HTML: Color

 

Color

As mentioned in the "HTML Getting Started" lesson, the background color of a page can be set using the BGCOLOR attribute in the BODY tag:

<BODY BGCOLOR="aqua"> makes the background color aqua.

Colors can be set by using a color's name. For a list of named colors for browsers, see www.w3schools.com/colors/colors_names.asp.

An alternative is to use a hexadecimal number to represent the color. In hexadecimal, you count like this: 0 1 2 3 4 5 6 7 8 9 A B C D E F. So 15 is represented in hexadecimal as F. To represent 16, we add a second digit, and 16 in hexadecimal is represented as "10". Think of our familiar base-ten system. What comes after 9? To express the next number, we add a "1" digit with a value equal to the base of the system: 10. The same idea applies to hexadecimal, except that the "1" in the number "10" stands for 16.

The number 20 is expressed in hexadecimal as "14": 16 + 4. The number 32 is written in hexadecimal as "20": 2 16's. The number 160 is "A0" in hexadecimal: 10 16's. The number 255 - the largest color value - is "FF" in hexadecimal: 15 16's + 15.

A color in RGB format has a number for its red, green and blue values. Each number is between 0 and 255. In hexadecimal format, the values for red, green and blue are expressed not in decimal form but in "hex". Pure red, for example, has an RGB value of 255-0-0, which is expressed in hexadecimal as "#FF0000".

Another way of setting the background color to "aqua" is thus: <BODY BGCOLOR="#00FFFF">, because the RBG value for "aqua" is 0-255-255.

For more on the hexadecimal values for colors, see W3C'S page at www.w3.org/MarkUp/Guide/Style.html. About 2/3 of the way down the page, there is a section called "Named Colors" with a wealth of relevant information, including a calculator to convert between RGB and hexadecimal formats.

The color of text can also be set using the BODY tag and the TEXT attribute. To set text to the color "lightgreen," for example, you might write: <BODY TEXT="lightgreen">.

 

Background

To use an image as the background of a page, use the BACKGROUND attribute of the BODY tag. To get the image "back.gif" to tile across a page, for example, you might write: <BODY BACKGROUND="back.gif">.

 

Example

Assume I want to tile bulldog.gif on the background of a page:

I also want orange text. I might use this code:

<HTML>

<BODY BACKGROUND="bulldog.gif" TEXT="orange">

Go Bulldogs!

</BODY>
 

to see this how this code looks in a window.


Exercise

You can work on your own page or on the eEverything.com web page. Set the page's background color, and then use a GIF that you found for the page's background. Also, set the color of the text.

If you work on the eEverything.com site, you can mention that the site's new interactive auction will be live soon.