|
Get Started!
First things first, open a text editor (such as Notepad, Wordpad, Microsoft Works) before proceeding.
Type <HTML> at the very beginning of the document. Press the ENTER key twice and follow up with the <HEAD> tag and another line break (Press ENTER once). Since this is your first web page, all you will be typing after the <HEAD> tag is the <TITLE> tag. Type <TITLE>YOUR PAGE TITLE</TITLE>. Insert one line break by pressing the ENTER key once. Type the ending head tag, </HEAD>. Insert two line breaks (ENTER key twice). Type <BODY>, ENTER key twice, </BODY>, ENTER key twice, </HTML>. The document should look like this:
<HTML>
<HEAD>
<TITLE>YOUR PAGE TITLE</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Quick Note: The <HEAD> section of the HTML document may contain other tags and attributes such as Meta Tags for search engines, JavaScript that enhances the page, and even a style sheet that ehances the way links appear on the page. All of these will be disregarded for now and are discussed with more detail under Advanced HTML. Tags and commands found between the opening <HEAD> and closing </HEAD>, but after the endig title tag (</TITLE>), is the first thing interpreted by the browser when a user opens a page. That is the reason why all advanced code is place in between the HEAD tags.
Now that you have the basic HTML document format on your text editor, you can begin adding your page contents. You should have put a title for your page as you typed the HTML format but if you didn't, put one now! You are now ready to begin the fun stuff! We will begin by starting at the BODY tag and moving down the HTML page.
<BODY> Tag
You can add attributes to the BODY tag that control the background color, text color, link color, and even add a background image (if you have one) instead of sticking to a boring old color.
Move your cursor (the vertical blinking line) to the opening BODY tag, after the Y in BODY. Example:
<HTML>
<HEAD>
<TITLE>YOUR PAGE TITLE</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Space after the Y and type BGCOLOR=, space, TEXT=, space, LINK=
Your document should look like this now:
<HTML>
<HEAD>
<TITLE>YOUR PAGE TITLE</TITLE>
</HEAD>
<BODY BGCOLOR= TEXT= LINK= >
</BODY>
</HTML>
HTML colors are called in by their HEXADECIMAL. What does this mean? It means that colors in HTML are not called in by their natural name and instead are called by a number. If you click on the HEX COLORS link, it will take you to a page with the colors and their HEXADECIMAL but that is not neccessary because, fortunately, there are 16 predefined colors that can be called by their natural name. As you may have guessed, this are the common colors used to day (such as white, black, red, purple, etc.) If you want Pink Salmon, you're pretty much on your own. Here is the list of predefined colors:
Silver, Gray, Maroon, Green, Navy, Purple, Olive, Teal, White, Black, Red, Lime, Blue, Magenta, Yellow, Cyan
Okay, maybe there are only about eight colors that are common (I mean is Olive a color you normally say? And I'm not taking about the ones that come in a jar.) From that list, type in the color you want used for each attribute under the BODY tag.
Quick Note: Although they are easier to remember than a bunch of number signs, letters. and numbers, it is best to use the HEXADECIMAL for each color, rather then their predefined term as not all browsers understand the predefined terms. For now, you can use the predefined terms until you become more familiar with HTML but afterwards, it will all depend if you want to be browser friendly (document can run withour a problem on most browsers) or not.
Now type whatever you please in between the opening and closing BODY tags. After you are finished, save the document as mypage.htm (or .html). Now, open another browser by pointing your mouse pointer to the File menu on THIS browser. Click on File, then New, then Window or hit Control N. After the new browser window opens, go to File open, and look for the document you just saved. After you find it, open it, and take a look at what you have just done. Pretty simple, eh? You are now ready to move on to the other HTML tags that will make your page look even better!
Quick Note: Every time you save your file in the text editor, you can hit the "Reload" (Netscape users) or "Refresh" (Internet Explorer users) to see the new changes you made in the HTML document!
NEXT
|
