This page looks much nicer, doesn't it? And it doesn't even have any images yet; this was all done within the body tag, like this:

< body bgcolor="ffffdd" text="007700" link="00bb00" vlink="009900" alink="00ff00" >

What are all those numbers and letters? Those are hexadecimal numbers that tell the browser what color to make stuff. The "hex" part means that there are six digits or letters in each chunk. They're also called RGB code, short for Red Green Blue.

The primary colors in paint are red, yellow, and blue; in lighting, and in web pages, they're red, green, and blue. You could go to some fancy-schmancy applet or look through a list of codes to find the color you want, but I'm going to show you how to mix colors by hand.

The first two digits in any hexadecimal color are red; the next two are green, and the third two are blue. So our link color looks like this:


The letters and numbers come from this scale:

1 2 3 4 5 6 7 8 9 0 A B C D E F

One is both the darkest shade of a color, and the least amount of that color; F is the brightest, largest amount of that color. So, you use FFFFFF to mix the brightest amount of all colors and make white, and 000000 to mix the darkest amount of all colors and make black.

Think of yourself as mixing different amounts of red, green, and blue to light your web page with. Suppose you want a light blue background. First of all, you know the color you want is light, so you stick to the high end of the scale, mostly the 9 and 0 and the letters. You already know that your code will be something like < body bgcolor=" AA AA AA" >. You also know you want more blue than anything else, so you put higher letters in the blue spot: < body bgcolor=" AA AA DD" >. Then you go look at your web page, and see that you've made this color. It's a pretty nice light blue; you could decrease the red so it's less purple, and get 88AADD, a good sky blue. If you want darker blue, you can decrease all the numbers and letters and get 6688BB or 446699, or go to a whole different color of blue with 0000FF, which is the brightest, most intense blue you can get because you've eliminated all the other colors and put in the highest blue you can.

You can do the same thing with any color; FF0000 will give you the brightest red, and CC9900 will mix you a nice yellowy-tan by combining a bright red and a not-quite-as-bright green.

So what do we use these colors for, now that we've learned them? Well, each web page gives you five chances to pick a color: one for the background, (bgcolor), one for the text, (text), and three for the links (link, vlink, and alink). The background and text are self-explanatory, like most of the HTML tags, but the links are a little more obscure. It's still easy: link gives a color for links that haven't been used yet. Vlink stands for Visited Link and colors in the links that your visitors have already seen. Alink means Active Link: the link which is being activated right now. If you click on one of the links below and hold the mouse down, you'll notice that it flashes bright green and a menu pops up; the bright green is my alink color. The default colors in Netscape are bright blue links, dull purple vlinks, and bright red alinks.

A digression: There's also a sixth command you can put in the body tag: background. Bgcolor paints the web page's background a given color; background will put a picture in as the web page's background. Background is like the wallpaper on your computer; it's a repeating picture over and over and over. There are HUGE web sites dedicated to giving you thousands of backgrounds to download and use; you can find them on any search engine. If you have a background picture to use, for example one called picture.gif, you write:
< body background="picture.gif" bgcolor="ffffff" >
and so on. Even if you have a picture chosen as your background, you should choose a bgcolor anyway so the visitor will have something to look at while the background picture loads. Pick a bgcolor that is similar to the main color in your background picture, and always make sure that your text is totally visible against the background - don't use one that's too busy or too bright. You can fade it out in Adobe Photoshop to make it useable; if you find something fabulous that makes your page unreadable, you can either

  • feature it on your page as a picture instead of a background, or
  • use a graphics program like Photoshop to make the background into a strip down the left side of your page and fill in the rest of the gif with a solid color. Then use one or two < ul > tags to move all your text over so it doesn't lie on the gif.

    You're probably dying to know how to make a link now. Suppose you're done with the front page of your site about dogs, called dogindex.html for the sake of argument, and want to make a link to a page you've made about dog feeding and care, called dogcare.html. You'd simply type this:

    < A HREF="dogcare.html" >Learn about dog feeding and care< /A >

    The HREF means Hypertext REFerence. The "Learn about dog feeding and care" is the text that will be your link when people see the page. Sometimes people make links that say things like

    < A HREF="dogcare.html" >Click here< /A > to learn about dog feeding and care.

    That makes a nice sentence, but it has two flaws. First, when your visitors glance over your page, they won't see a page full of dog feeding, dog care, and other key words; what jumps out at them will be lots of "Click here!"s. Second, some browsers will let you bookmark pages just by clicking on a link to the page; when a visitor looks at your page in the bookmark, they won't see "Learn about dog feeding and care," they'll see "Click here" - and they won't click anywhere. < /A > simply tells the browser that the next sentence isn't part of the link anymore.

    Now that you have a page full of text and links, how do you jazz it up with images?

    Links Images Tables Frames Streamlining Forms Learning More
    My home page
    Email me