While everyone's web page is different, they all have to have the same basic structure. This uniformity alows browsers (like Netscape) to read the page and understand what the author means.

The framework of a web page is this:

<HTML>
<HEAD>
<TITLE> Your Page's Title </TITLE>
</HEAD>
<BODY>
The Body of Your Page
</BODY>
</HTML>
The <HTML> </HTML> tells the browser that your page is definitely HTML code.
The <HEAD> </HEAD> encloses the header of your page. In the page header, you can add lots of other commands which give the browser special information about your page.
The <BODY> </BODY> sections off the part of your page that will actaully be displayed.

Now that you have the framework, what actually goes in it? Well, think of the body of a web page as an old WordStar-style document. It consists mainly of text, modified by Tags. There are a wide variety of tags, some of which are interprited differently by different browsers.

NOTE: In general, all HTML commands will take the form:
<COMMAND> text </COMMAND>.

Style Tags modify the way your text looks. The following list is not comprehensive, but it's close:

NOTE: HTML does not recognize more than one consequative whitespace as separate entities, so ten spaces, 2 carriage returns, 3 tabs and 5 more spaces will look like a single space on your web page when viewed by a browser. One of the only ways to get HTML to recognize multiple whitespace characters is to use preformatted text. The downside is that it's displayed in a blah, typewriter-like font.

Since HTML interprets carriage returns as spaces, special tags must be used for carriage returns. The <BR> tag is the same as a carriage return, and <P> is the same as two carriage returns.

NOTE: Since HTML condenses whitespace, two <BR> tags together are still only equivalent to one carriage return. <P> must be used to get a space between lines.

Along the same lines as <P> and <BR>, is the <HR> tag. The difference is that instead of a space between lines, it draws a line between them.
The thickness of the line can be controlled by using <HR SIZE=##>, where ## is the thickness of the line you want.

There is also a No Break tag. It tells the browser that the enclosed text should not be broken up unless absolutely necessary. The No Break tag looks like this: <NOBR> text not to be broken </NOBR>.

Heading Tags are very similar to style tags. Headings come in six sizes, 1-6. 1 is the largest. 6 is smallest. The heading tag also includes an implicit <P> at the beginning and end. The format for the heading tags is <H#>heading</H#> with # being a number 1-6, and they look like this:

<H1>

This is a size 1 heading

</H1>

<H2>

This is a size 2 heading

</H2>

<H5>

This is a size 5 heading
</H5>

Another important HTML tag type is the List. HTML supports four types of lists: ordered lists, unordered lists, definition lists and menus. Menus are equivalent to basic unordered lists.
All lists begin and end with an implicit <BR> and, except for the definition list (see below), they all take the form:

<OPEN LIST>
&lh;LH> Optional list header </LH>
<LI> Item in the list </LI>
...
<LI> Item in the list </LI>
<CLOSE LIST>

Ordered Lists use <OL> to open the list and </OL> to close the list.

  1. The items in an ordered list look like this.
  2. But the list doesn't have to be numbered!
  1. <OL TYPE=A> causes the list
  2. to be lettered in CAPS
  1. <OL TYPE=a> causes the list
  2. to be lettered in lower case
  1. <OL TYPE=I> causes the list
  2. to be numbered with large Roman Numerals
  1. <OL TYPE=i> causes the list
  2. to be numbered in small Roman Numerals
  1. And you can even start somewhere
  2. other than the beginning with <OL START=##>,
  3. where ## is the starting number. (Translate letters and numerals into their corresponding numbers, i.e. E=5, b=2, III=3, etc.)
NOTE: The above stuff about TYPE and START is HTML 2.0 and might not be recognised by Netscape 2.0.
What follows is the HTML 3.0 equivalents, but they may not be recognised by any browser!

To start the numbering at a specific place, add SEQNUM=num to the <OL ... > tag, where num is the number to start the numbering with.
Adding CONTINUE to the <OL ... > tag will pick up the numbering of this list where the last list left off.

So, a list starting at 49 would look like this:

<OL SEQNUM=49>
...
</OL>

Unordered Lists use <UL> </UL> to open and close the list.

NOTE: The above stuff about TYPE is HTML 2.0 and might not be recognised by Netscape 2.0.
Just as with ordered lists, what follows is the HTML 3.0 equivalents, but they also may not be recognised by any browser!

The unordered list can be modified by adding tags to the opening <UL ... > tag. Adding PLAIN will create a list with no bullets.
Adding WRAP= will make your list "wrap" into columns. WRAP=vert will make the list start a new column after reaching the bottom of the page. WRAP=horiz will make the list divide into as many columns as the page has room for.
To use some other image instead of the standard bullet, include SRC="picture", where picture is a link to the image you want to use. (See the next lesson: images)

An unordered list with no bullets that wraps vertically would look like this:

<UL PLAIN WRAP=vert>
...
</UL>

Definition lists are two-part lists, useful for things like glossaries or defining lists of terms. <DL> </DL> is used to open and close the list. The list items have two parts: the term and the definition. The definition term is enclosed in <DT> </DT> and should preceed the definition definition. The definition definition is enclosed in <DD> </DD>. A list header can also be added as with the other list types. So, the whole thing looks like:

<DL>
<LH> list header <DL>
<DT> term </DT> <DD> definition </DD>
...
<DT> term </DT> <DD> definition </DD>
</DL>

NOTE: The definition term and the definition definition do NOT have to be on the same line like in the example.

Definition List:
This is how they look when viewed with a brwoser.
Their Use:
They are useful for any list shaped like this!

One useful feature of lists is that they can be nested, i.e. one lists is a List Item of another list, like this:

<UL>
<LI>You can have one list...</LI>
<OL>
<LI>Inside of another list...</LI>
<OL TYPE=A>
<LI>Inside of another!</LI>
</OL>
</OL>
</UL>

Which looks like this:

Tables are 2-dimesional lists. They are coded similarly to definition lists. They have an implicit <BR> at the beginning and end. The format is:

<TABLE>
<TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> </TR>
...
<TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> </TR>
</TABLE>

Each row is ecapsulated in <TR> </TR>. Within the row are cells, enclosed in <TD> </TD>. The whole table is opened and closed with <TABLE> </TABLE>. There can be as many rows and columns as you want and as will fit on the screen. The browser will autoformat the rows, vertically centering cell contents if necessary.
If you want a cell to span more than one column, encolse it in <TD COLSPAN=##> </TD>, where ## id the number of columns to span. Similarly, <TD ROWSPAN=##> </TD> will cause the cell to span ## rows.
A border can the placed around all the cells by using <TABLE BORDER=##> </TABLE>, where ## is the number of pixels thick the border should be.

Tablescancontain
anyamountof
INFORMATION!!!
INFORMATION

Another very useful ability is changing the Font Size. This can be done two ways. First, is can be done with <FONT SIZE=##> </FONT>, where ## is a number 1-7, 1 being smallest. It can also be done with <FONT SIZE="##"> </FONT>, where ## is a number from -2 to +4. There is a direct correlation between the two, i.e. 1="-2", 2="-1", etc.

Using the font tags, the whole text can be changed
Or just a part of it.

One of the cooler tricks with font tags is to simulate an ALL CAPS FONT. Just make the caps a size or more larger than the lower case letters.

Centering can be accomplished with the <CENTER> </CENTER> tags,

<CENTER>Like this!</CENTER>

NOTE: Structures such as centering, tables, lists, and headings sometimes ignore formatting applied outside of the structures limits. So,
<B><CENTER> text </CENTER></B> may not make "text" bold.
<CENTER><B> text</B> </CENTER> may be needed in this case.

Finally, we come to the topic of Links. Links are what makes an HTML page be more than just a text document. Links come in three basic varieties: links to other files, links to same file and links to pictures.
To link to another file on another server, use
<A HREF="http://www.address.com/path/filename.html"> anchor text </A>. This is called absolute linking. The tag is called an anchor.

Example: The Walt Disney Home Page

To link to another file on the same server, use <A HREF="path/filename.html"> anchor text </A>. That is called relative linking.

Example: The Nashville Gaming Connection

To link to a different place in the same file, you have to do two things. First you must leave a pointer to the place in the file you want to link to. The pointer looks like <NAME="abcdefg">. Then the link will look like <A HREF="#abcdefg"> anchor text </A>.

Example: Link to the top of the page

Links to places in other documents can be done the same way.
<A HREF="Other.html#abcdefg"> anchor text </A> will do it.

Here's a cool trick from HTML 3.0: To have the link displayed in a new window, add TARGET="_blank" to your anchor tag like this: <A HREF="url" TARGET="_blank">. For an example of this type of tag, try the Scratch Pad from the main menu. When you create your page, it's displayed in a new window.

NOTE: This tag only works with Netscape 2.0. Any other browser will just ignore the TARGET tag.

To include a picture in your page, you use a slightly different link. <IMG SRC="picture">. picture can be a relative or absolute link, but absolute links are strongly discouraged because of the bandwidth they eat up. (It's much quicker to access a local drive than to go out over the net for a picture.)
Here's an example picture from the Nashville Gaming Connection:

A thing you will often see is an image as a link. It's easy, just put the image link in as the anchor text like this:

Now, here's a hot tip. You can get rid of that colored border by using <IMG SRC="picture" BORDER=0>. It can turn links like this:

Into links like this:

Another important feature of images is alternates. In case your image doesn't load, or if the viewer is using a non-graphical browser, your text alternate will be diplayed.
Alternates are done with <IMG ALT=text ... >. If text contains any whitespace, it must be enclosed in quotes.

Other interesting things can be done with IMG links.

By using <IMG BORDER=## ... >, with ## equal to a number, a border can be added to pictures whether they are anchors or not.
By using <IMG HEIGHT=## WIDTH=## ... >, the heigth and width of the image can be controlled. ## is the height or width you want to image to be. This is useful in formatting.
By using <IMG ALIGN=?????? ... >, a variety of things can be done. ?????? can be one of five things: TOP, MIDDLE, BOTTOM, LEFT or RIGHT. Default is BOTTOM.

Top Aligned
Middle Aligned
Bottom Aligned
Left Aligned
When an image is left aligned, more than one line of text can be placed beside it, and when there is too much text to fit in the space to the left of the image, it wraps around below the image. However, there catch is that the left align stay in effect until all the space to the left of the image has bee filled. That means that the next paragraph or image or whatever followed the left-aligned image may end up formatted completely wrong if you expand the window of your browser too wide. Also, if you have a long image, you may not ever be able to fill the space with text since HTML doesn't recognide multiple whitespace characters. The way around this problem is to use tables (view the source for my homepage.).
Right Aligned
Right-aligned images work the same way as left-aligned.

That's it! That's all the basic HTML you need to know to write an really impressive homepage. It may seem like a lot, but most of it is really rather intuitive, and you should pick it up pretty quickly once you start using it.

Now we come to the frilly stuff. I've shown you how to make a basic page and how to create the structures and links that go into it. Now I'll teach you how to make it pretty. That includes backgrounds and color. I'll add more frills later.

Let's start with color. The first thing you need to know about color in HTML is the way it's always coded. Colors are coded as a 6 digit hex RGB number. English translation: colors are represented by their composition: red, green, and blue, hence RGB. The amount of each of the prime hues present in a color ranges from 0 to 255, which is 00 to ff in hexadecimal. Since each color contains mixtures of the three primary hues, each taking 2 digits to represent in hex (short for hexadecimal or base 16), the whole color takes 6 digits.
Here are some examples:

Red:ff0000
Green:00ff00
Blue:0000ff
Magenta:ff00ff
Purple:9900dd
Light Gray:bbbbbb

Colors can be used in several ways. Here's a list:

  • Background Color
  • Overall Text Color
  • Unvisited Link Color
  • Visited Link Color
  • Inverse Link Color (The color the link turns while your clicking on it)
  • Individual Text Color (Netscape 2.0 only)
All but the last item are done in the <BODY> statement. The last is done similarly to font size. (From here out, I'll use "RRGGBB" to represent colors.)

To add color to the body statement, you just add your color statement to the body declaration, like this: <BODY colortag=RRGGBB>. Each thing you want to color has a different tag to replace colortag.

To make the background some color other than the usual dull gray, use BGCOLOR=RRGGBB.
To change the overall text color, use TEXT=RRGGBB. The individual text color tag will override the overall text color for the text it encloses. (See below.)
To change the color of links that haven't been visited yet, use LINK=RRGGBB.
To change the color of links that have been visited, use VLINK=RRGGBB.
When you click on a link, it momentarily changes color. (I believe the default is red.) To change that color, use ALINK=RRGGBB.
On this tutorial, I have LINK, VLINK, and ALINK all set to the same color to maintain a solid and orderly appearance. Also, remember to make your text color readable over your background color!

The individual text color will only show up in Netscape 2.0. If someone using any other browser tries to view such text, it will just be the same color as the rest of the text. Coloring specific text is done very much like changing the font size. The tag is: <FONT COLOR=RRGGBB> text to be colored </FONT>. This tag can be combined with the font size, so you'd have: <FONT COLOR=RRGGBB SIZE=#> text </FONT>.
This font coloring will override the TEXT color, but not LINK, VLINK or ALINK.

To add a background image, add BACKGROUND="path/picture" to the body declaration like we did with background color. the path and file name should be specified as though it were an image link. (See Links.)
The image you specify has to be a GIF.
I have put together a library of backgrounds you can use.

Example: <BODY BACKGROUND="web2.gif" TEXT=d0d0ff LINK=a0a0ff>

That's all there is to it. With these few tags you can do some pretty amazing stuff. The real key to a great looking page is a good background image. One that tiles well is preferable.
If you see a background that you'd like to use on someone else's page, view the page's source. (Go to the View menu and choose Source....) Look at the body declaration and find the BACKGROUND="picture" part. Highlight the stuff between the quotes and copy it (CTRL-C in Windows). Now go to the Location bar at the top on your Netscape window (right under the Back, Forward, etc. buttons). Highlight just the name of the page you're viewing. (right now that is Advanced.html.) Then just do a paste (CTRL-V in Windows). Finally, press ENTER.
What you've just done is visit the GIF that is being used as the background. It should be displayed in your Netscape window now. Just go to File and Save the GIF for your own use! Try it now with this page if you'd like.

Comments are an important part of any coding. They let you annotate your work so you know what you were thinking when you wrote it. In HTML, comments aren't as useful as in conventional programming languages, but they are still pretty handy.
The comment tag looks like this: <!-- Your Comments Here -->
Nothing inside the comment tag will show up when your page is viewed. It's there just to leave a note to yourself or to anyone else who views your source code. I've seen comments used to note places for future changes and even to give copyright information.

Now we'll step a little into the grey areas of HTML. Forms are a way to allow interactive use of your page. Forms allow the user to enter all sorts of information. That information is sent to a script for processing. Eventually, I'll add something on scripting, but until then, ask your ISP or sysop about how to write scripts.
Forms begin with the <FORM ACTION="path/script.pl" METHOD="get"> tag and end with </FORM>. In between you can have entry blanks, text areas, checkboxes, buttons, radio buttons and any usual HTML construct. path/script.pl is the address of your script. Talk to your system administrator to find out about that.

Entry Blanks take the form <INPUT NAME=name SIZE=##>. When the data is sent to the script for processing, every data element has a name. name is the name the data recieved from that entry blank will be called. ## is the number of characters wide the blank will be. If a user types in more than ## characters, the blank will scroll, but only ## will be displayed at a time.

Example:

This blank is 20 characters wide.

Text Areas are like big entry blanks. Entry Blanks can only be one line, but Text Areas can be as big as you'd like. The workspace on the Scratch Pad is a Text Area.
Text Areas take a different form from the other form elements. They begin with <TEXTAREA NAME=name ROWS=## COLS=##> and end with </TEXTAREA>. Any text between the tags will come up as the default text in the Text Area. name has the same meaning for all form elements. ## is the number of ROWS or COLumnS the Text Area will take up. Just like with entry blanks, if more than that is entered, it will scroll, but it will only display ##x## characters.

Example:

Radio Buttons and Checkboxes take the form <INPUT NAME=name TYPE="type" VALUE="value">. type is either radio or checkbox. Checkboxes let the user check things from a list. Radio Buttons are similar, but only one button with a particular name came be pressed at a time. So, if you had two radio buttons named ANSWER, the user could only select one of them. If the user tries to pick a second button, the first one is unselected.
value is the data value the item passes to the script if the item is clicked. So, if a checkbox named BOB with a value of YES was checked, it would pass the script BOB=YES.

Example:
Radio Button #1 Checkbox #1
Radio Button #2 Checkbox #2
Other button types include submit and reset. These buttons take the form: <INPUT TYPE="type" VALUE="value">, where value is the button's label, such as Return in the example below, and type is either submit or reset, respectively. submit is the button the user presses to send in the form. clear clears the entire form so the user can start over. The "submit" button is necessary. The form won't work without one. The "clear" button is optional.

NOTE: You can use the submit button as a link to another HTML page.
<FORM ACTION="/path/webpage.html">
<INPUT TYPE="submit" VALUE="Click Me!">
</FORM>
This code creates a button labeled Click Me! which acts as a link to webpage.html. The only catch is that you must specify the address absolutely. (although you can leave out the server name.) So, to link to this page I'd use ACTION="/~templedf/crash/Advanced.html".

Example: This button will take you to the main menu:

There is a lot more out there than just this, though. With every new browser, new code appears. For an up-to-date tutorial on how to do all the neato stuff that's a little more advanced check out How do they do that with HTML? Or, for the whole shebang, try Netscape's complete definition of HTML 3.0 And always, if you see something cool, view the source (Go to the View menu and choose Source....) and find out how they did it!!!

Return to the Menu