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, color, and frames.

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

Here is a color chart created by Doug Jacobson.

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

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.
To find out how to get a copy of a background someone else is using, try the HowTo on this tutorial.

Ever wonder how to allow people to send you mail from your page? Well, it's easy! Here's how:

<A HREF="mailto:username@address"> text </A>

Replace the username and address with your own, and you've got email!

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.

Frames are a really spiffy new feature introduced by Netscape. With frames, you can divide up an HTML page into an arbitrary number of frames, each of which can display another web page.

NOTE: When you write a page using frames, be sure to include a no-frames version, because many browsers don't understand frames.

In a page with frames, you don't use <BODY></BODY> tags. Instead, you use <FRAMESET></FRAMESET>. You cannot include background or color tags in the <FRAMESET> tag. If you want to use backgrounds or colors, each individual page in the frames can specify it's own.
Between the <FRAMESET></FRAMESET> tags, you should have only <FRAMESET></FRAMESET> tags, <FRAME> tags, or <NOFRAMES><NOFRAMES> tags.

Example:

<FRAMESET COLS="150,*,30%">

</FRAMESET>

The <FRAMESET> tag can have two modifiers: ROWS and COLS.
ROWS="..." defines the numbers of rows the frameset will have. Each row can be specified in three ways.
A number means that the row will be that number of pixels wide.
A percentage means that the row will take up take percentage of the window.
An asterisk means that the row will take up whatever space is left. If there is more than one row of size *, they divide the remaining space evenly. If a number is used before the asterick, like 2*, then that row gets that number of "shares" of the remaining space.
See the above example.
COLS="..." works the same as ROWS, except that it specifies the number of columns.

<FRAME> defines each individual frame. The <FRAME> tag can have several modifiers.
SRC="..." sets which page will be loaded in the frame. If a frame has no SRC tag, the frame will be an empty block.
NAME="..." gives the frame a name. later, when we talk about TARGETs, this will be important.
SCROLLING="yes|no|auto" allows you to control the scroll bars on the frame. "yes" forces the frame to always have scroll bars. "no" forces the frame to never have scroll bars. "auto" allows the browser to decide if scroll bars are necessary. If no SCROLLING tag is used, the frame defaults to "auto".
NORESIZE allows you to keep the frame from being resizable by the viewer.
MARGINHEIGHT="#" lets you set the top and bottom margins of the frame to # pixels. If the tag is not included, the browser will choose appropriate margins.
MARGINWIDTH="#" is the same as MARGINHEIGHT="#", except that it controls the left and right margins.

<NOFRAMES></NOFRAMES> is used to create a frameless alternate. When the page is viewed by a frame-capable browser, everything between the <NOFRAMES></NOFRAMES> tags is ignored. When the page is viewed by a frame-challenged browser, everything EXCEPT what is between the <NOFRAMES></NOFRAMES> tags is ignored.

The pages specified by the SRC tag can be normal HTML pages, or can also contain frames.

The thing that makes frames particularly useful is TARGETing. TARGETs allow you to make links appear in specific frames or windows.

Here's an example. On this example page, clicking a link in one frame loads a page into the other.

Here's the code for the frames:

<FRAMESET COLS="50%,50%">

</FRAMESET>

And here's the code for one of the links in the left frame:

<A HREF="Example1.html" TARGET="Frame2">Example Page 1</A>

As you can see, the TARGET tag for the link points to the NAME of the left frame. That's all there is to TARGETs. Using the very same set up, you can create a table of contents on one side, with the links loading on the other side. Thusly, your table of contents will always stay visable.

There are a couple of other tricks with TARGETs.

The <BASE TARGET="page.html"> tag will make all of the links on the page open in the TARGETed frame. Individual TARGET tags will override the <BASE...> tag.

There are also some "magic" TARGETs.
"_blank" will always open the link in a new window.
"_top" will open the link in the whole page, instead of in a single frame.
"_self" makes the link open in the frame it's called from. This is useful when the <BASE...> tag is used.
"_parent" opens the link in the immediate frameset parent of the frame the link is called from.

Example:

<A HREF="Advanced.html" TARGET="_blank">Advanced</A>

And, TARGET can also be added to the <FORM> tag to make the output from the script got to the specified frame or window.

The best way to get a good feel for frames is to look at the pages of people who are using them. When you come across such a page, be sure to view the source code.

The next lesson is Forms.

Take the Advanced Pop Quiz

Return to the Menu