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:

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.

The next lesson is Forms.

Return to the Menu