Chapter 5, Lesson 2
Chapter 5, Lesson 2![[INDEX]](icon_bki.gif){kind=icon}
Ch
5,
L
2 -
Background Color
If you already know how to specify the background color of a web page, you can skip this lesson.
Dazzle em! That's what we want our web page to do for us, and one HTML feature that will help us get there is 'background color'. The "background" is what's left over of the web page that is not text or graphics. Most browsers use a default background color that's either white or light grey. Used with the default black text, it provides a very readable document, albeit a little boring. Hey, but guess what? We don't have to be boring. OK, OK... I have to be boring, but you don't.
Remember the '<BODY></BODY>' tag pair? It's part of the HTML skeleton code, and it surrounds the meat & potatoes text & graphics of our web page. The browser looks inside the opening '<BODY>' tag for any attributes which should be assigned to the entire body, and one of the attributes it looks for is 'background color'. The attribute's symbolic name is 'BGCOLOR', and of course it's followed by the now-famous and much-beloved '=' sign and value. Therefore, if we want to specify the background color for our document (rather than accept whatever background color the receiving browser is going to parcel out to us), we do so like this:
<BODY BGCOLOR="#RGB-code"></BODY>
There are several things to notice about this. In addition to the usual guidelines we follow about embedded attributes (like a space to separate the tag name and attribute name, and no spaces around the '=' sign), we put the RGB-code (i.e., color) inside quotation marks. (Quotation marks are generally used wherever a value has to be interpreted or calculated by the browser, rather than just assigned from a internal table). Also, don't forget that the '#' sign is part of the RGB-code.
Let's run through the procedure for specifying a background color. Let's have a 'yellow' background. (that'll wake 'em up!) We look in the table for a color from the 16-bit pallette, and see that 'yellow' is represented by the RGB-code '#FFFF00'. To make our yellow web page background, we use the tag:
<BODY BGCOLOR="#FFFF00"></BODY>
Let's see what that looks like in an HTML source file; since we are using the 'BODY' tag, we'll include the skeleton code in our example:
<HTML> <HEAD> <TITLE> Demo Yellow Background </TITLE> </HEAD> <BODY BGCOLOR="#FFFF00"> <H3>This is our page with a yellow background!</H3> click <A HREF="c5_2.htm">-here- </A> to return to the lesson. </BODY> </HTML>
Since the characteristics of this page (the one you're looking at now) are already established, and there's no way to change the background color after the fact, we'll have to provide a link to our demonstration of the above source code. -- here's the demo--
That ought to get your motor going, huh? Say, what would have happened if we made our background color '#000000'? Let's see!
Whoa, daddy! What happened? Well, when we specified 'BODY BGCOLOR="#000000"', we asked for a 'black' background. When we got it, the text disappeared because it, too, is 'black'. MORAL: some prudence is desirable in choosing background colors. Be sure to test your web page, to see what it's going to look like at the far end. Color is not a feature if readability is reduced by using it.
You don't have to specify a color from the 16-color pallette. For example, let's specify a slightly darker grey (#B9B9B9) than the standard 'silver' color (#C0C0C0) --look here--
The browser might respond to this color value in one of three ways: First, it might have this color in it's pallette, and display it just like you specified. Second, it might substitute the closest color available for the color you specified. If it substitutes, you might very well end up with 'silver'. Third, it might "dither", which means it tries to approximate the color you specified by mixing some dots of the two closest available colors, hoping to fool the eye into seeing the color you specified. Dithering sometimes makes a slightly polka-dotted pattern on a solid background.
Incidentally, if you have a graphics browser, but you didn't see color backgrounds on the pages demonstrated, it could be that you need to adjust the default "settings" or "preferences" in your browser. If you have a setting called "use default backgrounds only" (or some such thing), disable that so that the HTML file specifies the background. If the HTML file does not specify a background, you'll get the default background anyway.
... leave e-mail ...
