Do not settle for that drab old grey page! Put a bold c o L O r or textured pattern behind the text.
After this lesson you will be able to:
Note: If you do not have the working documents from the previous lessons, download a copy now.
The background of your page should be just that -- in the background. As we add different colors or even patterns, keep in mind that it should not interfere with the readability of text. But don't take our words for gospel, draw your own conclusions from an example of what happens when you do not think about the impact of a noisy background.
For the pages of this tutorial, we have used a solid white color that makes for a clean and non-interfering (even if not dramatic) backdrop. No, it is not very exciting, but it is readable.
With some modifications to the <body> tag (introduced way back in lesson 1), you can add a solid color background to your web page. But before we show you how to do the fancy color stuff, we must first talk about RGB color values and their "hexadecimal" representation.
In a web browser, you have at your disposal many system colors to color text and backgrounds. Each color is identified by itsRed- Green- Blue (RGB) values, three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by different of RGB triplets.
Here is the tricky part. Rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue.
Here are some hexadecimal examples of different colors:
|Color||Hex Code||Color||Hex Code|
|xx oo xx||FFCCCC||xx oo xx||3300FF|
|xx oo xx||33FF66||xx oo xx||AA0000|
|xx oo xx||663300||xx oo xx||9900FF|
|xx oo xx||000077||xx oo xx||FFFF00|
|xx oo xx||EEEEEE||xx oo xx||888888|
|xx oo xx||444444||xx oo xx||000000|
Now, don't panic about having do a bunch of numerical conversions! There are many tools that will let you click on a color and they will provide the hexadecimal representation. Many color tools are available from those folks at Yahoo.
But better yet, many browsers support standard shorthands for these 16 colors (those Windows VGA favorites):
|xx oo xx||aqua||xx oo xx||black|
|xx oo xx||blue||xx oo xx||fuchsia|
|xx oo xx||gray||xx oo xx||green|
|xx oo xx||lime||xx oo xx||maroon|
|xx oo xx||navy||xx oo xx||olive|
|xx oo xx||purple||xx oo xx||red|
|xx oo xx||silver||xx oo xx||teal|
|xx oo xx||white||xx oo xx||yellow|
NOTE: You may want to first try a test to see if your browser supports solid color backgrounds.
For our Volcano Web, the first thing we will do is add a color background to the index.html file. The HTML format for adding a solid color background involves modifying the <body> tag to read:
<body bgcolor=#XXXXXX>where XXXXXX is the hexadecimal representation (indicated by the # sign in front of it) of the desired color.
If you recall, the image we use for the opening has pictures of volcanoes on a black background -- so if we were to use the same black color for the background of the web page, the picture would merge well into our page:
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>
where the XXXXXX values will determine:
You can now add some of these other color values by changing thetag to read:
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
|This will provide a black background, pale yellow text, light aqua blue hypertext, and red hypertext to visited links.|
NOTE: the order of the items in the <BODY> tag does not matterYou should now modify the <BODY> tags in all of your HTML files (fast and easy to do by copying and pasting the above example for the new <body> tag).
NOTE: You may want to first try a test to see if your browser supports textured backgrounds.
Solid colors add some variety to web pages -- but you can go even farther by adding a textured background. You use a small image file (GIF or JPEG) and the browser will "tile" the web page with repeated copies of the image. Some of the things you should keep in mind are:
In this part of the lesson, we will give you a chance to experiment with three different background images. The HTML format for adding a background image file is:
where bgfile.gif is the name of the image file (this can be a full URL or a relative file path -- see lesson 8a).
Below we list the names of three background files. You can download each one (if you do not know how to download graphics from a web page, please refer to our help sheet). You should put each graphic file in your pictures folder/directory in your web workspace:
You can also modify the text colors for your page as we did in the above example. For example, if we want RED text for the Legal Paper background, we might write this HTML:
<body background="../pictures/paper.gif" text=#CC0000>
which gives us red text on yellow paper.
NOTE: Many web browsers have the ability to change the default text colors -- sometimes a user may have the preferences set for colors that will interfere with the ones you have selected. Therefore, we suggest when using any background tags (solid color or texture file) that you include the "normal" colors -- black for text, blue for hypertext links, and purple for recent links: <BODY TEXT=#000000 VLINK=#660099 LINK=#0000FF>
If you are looking for some examples of background texture files, see the list of links from Yahoo
Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. We are going to keep the sample files with the solid black colors that we added in the early part of this lesson.
Review topics for this lesson:
If you would like to know that the colors you choose for your web pages will look the same on other computers, consider the hexadecimal codes. With the different combinations of letters and numbers, there are literally millions of colors to choose from, e.g. #FD6A2C, #06E293 or #55A92B. Yet, not all of these colors will be the same on all computers. Moreover, if your visitor does not have a cutting edge computer capable of displaying "millions" of colors, the web browser will make a closest "guess" to match the colors, with perhaps undesirable results.
Fortunately, you can do something about this... only use hex colors that are included in the NetScape 216 color palette. "What is that?" you ask. It is a set of 216 unique colors that are common to the system colors of both Macintosh and Windows operating systems. Therefore, these colors can be displayed on almost any computer.
If you are choosing these magical colors, you just need to choose ones that are triplet combinations of the following color codes: 00 33 66 99 CC FF. For examples, these colors are all part of the cross-platform color set: #FF6600, #00FF66 or #669933.
Add a solid color background or a texture file background to your web page(s). Ask some other people if they find that the text is suitably readable with the background elements you have chosen.
Two of the most hideous and HTML tag evers created...
Writing HTML: Lesson 16: Colorful and Textured Backgrounds
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is Alan Levine
Comments to firstname.lastname@example.org