Maddog's HTML Primer for Real People

Chapter 5, Lesson 4

Ch 5, L 4 - Link Color

If you already know how to use 'BODY' attributes to specify link colors, you can skip this lesson.

Isn't working with HTML colors a hoot?

Have you ever noticed the behavior of your graphic browser regarding hypertext links? Typically, on starting up, the browser assigns a default color for the description portion of a link (that's the part you see, as opposed to the reference portion, which is hidden from view). Actually, as we shall see, it assigns colors to three different attributes related to text links.

Most recent graphics browsers keep a record of links which have been visited since starting the browser software, and in some cases based on a "history" file stored on the hard disk. When parsing (reading and interpreting) the HTML file, the browser will apply one color to links (or rather, link descriptions) which have NOT been visited, and yet another color to links which HAVE already been visited. Also, though you may not have noticed, the browser usually applies yet another color during the time you actually click on it. In Netscape, for example, an unvisited link is painted blue by default, sort-of-pink when it has been previously loaded, and red during the click. Browser behavior varies depending on the software, but that won't keep you from controlling the attributes.

Imagine, for example, that you wanted to use a blue, pink, or red background color. If you did, the link-description on the Netscape browser would disappear depending on what the status of the link is (unvisited, visited, or clicking). I've seen this phenomenon many times, while surfing the net.

Well, since you can't be sure what color is going to be assigned to links at the receiving browser, and if you're going to specify a background color, it would be an excellent idea to explicitly state your preferences in this regard. HTML allows this by specifying additional attributes in the '<BODY></BODY>' tag pair. There are three (3) relevant attributes. Let's examine them one at a time:

To specify the color of an un-visited link, use the 'LINK' attribute as follows in the opening 'BODY' tag:

As with previous implementations of color attributes (using a space to separate the tag name and attribute name, and no spaces around the '=' sign), we put the RGB-code (i.e., LINK color) inside quotation marks. Also, don't forget that the '#' sign is part of the RGB-code.

To specify the color of a previously Visited link, use the 'VLINK' attribute:

To specify the color of a link during "clicking", use the 'ALINK' attribute as follows in the opening 'BODY' tag:

This brings us to an interesting point. Normally, an HTML document will have only one opening '<BODY>' tag. We've shown each of the separate link-color attributes in a separate 'BODY' tag, but in practice you'll want to include all the attributes associated with the '<BODY>' tag inside the one opening tag. This includes the background color attribute 'BGCOLOR'. Therefore, we can commonly expect to implement background and link color attributes as follows:

Lets look at an HTML source-code example. Let's say we want to use an "aqua" (#00FFFF) background. In order to make sure we have good contrast on our links, we'll specify "red" (#FF0000) for unvisited links, "white" (#FFFFFF) while clicking, and "blue" (#0000FF) for visited links. Here's the code:


<HTML>
<HEAD>
<TITLE> Link Color Demo </TITLE>
</HEAD>
<BODY BGCOLOR="#00FFFF" LINK="#FF0000" ALINK="#FFFFFF" VLINK="#0000FF">
<FONT COLOR="000080"> This is our page with an aqua background!
<P>
click <A HREF="c5_4.htm">-here- </A> to return to the lesson.
</FONT>
</BODY>
</HTML>

We'll demo this on a separate page, which you can view -here-

If you have an advanced graphic browser that fully supports colors, you can see if we did a good job with color selection (of course we did!). You'll observe that the red color for unvisited links worked very well to call attention to the link, and that after the link was visited, the change to "blue" served to de-emphasize the link, yet still allow it to be distinguished from the rest of the text. We chose to put the text inside a 'FONT' tag pair, enabling us to assign text a color of it's own ("navy") that contrasts readily with the aqua background.

It's also a good idea to test (that is, view) the same page with "silver" and "white" backgrounds specified, in case a receiving browser has their HTML colors disabled (i.e., in case they're forcing their own default colors). We did so, and because we stuck with colors that contrast well against a light background, we were able to assure readability in the event our specified background color doesn't get enabled.

If you remember anything about the use of colors in HTML, remember this: it's worthwhile to consider carefully the consequences of color selection, keeping in mind that contrast between text, links, and background are the factors which most affect readability. And always, always, always test your web page!

Overseer: Monty Northrup ...

... leave e-mail ...