How To Play Body Tag

The first item we'll look at is background color, not to be confused with background image. You may recall from the Saving Images section that a background image is set with the BACKGROUND= command. The background color can be set with the BGCOLOR= command. It will look something like this --

<BODY BGCOLOR="white">

or

<BODY BGCOLOR="#FFFFFF">

AND to see what the page looks like, squick your mouse on --

Sample White Page

Spelled out colors like RED, ORANGE, BLUE, GREEN, YELLOW and even VIOLET, BROWN, GOLD, and BRONZE can be used.

NOTE: Capital letters are NOT required in the <BODY> tag.

The "#FFFFFF" in the <BODY> tag will yield a WHITE background color, and if instead you use "#000000" (six zeros), your page background color will be BLACK.

The six alpha-numeric digits are really a hexacode, a series of three hexadecimal (BASE 16) numbers. More about this later. Before we get into the detail, let me give you two reference tables.

First, to see some colors that are yielded by a few "hexacodes," squick your mouse on --

Hexacode Color Chart

Next, here is a table that converts between decimal and hexadecimal --

Base Ten/Base Sixteen Conv. Table

Why might you need these? You can use the color chart to choose a six-digit hexacode to insert in the <BODY> tag. You can have any background color you desire for your web pages. And as you will see, they can also be used in other HTML color tags/commands like <FONT>, TEXT=, LINK= and so on.

As for converting to decimal and back, you can use your web browser color screen OR your WINDOWS Control Panel color screen to experiment with "custom colors." This will get you just the right colors you like. Then you can take the three decimal values for RED, GREEN, and BLUE, convert them to a hexacode, and use for backgrounds, font colors, text colors, link colors, et cętera!

You might also need the conversion chart to help you set your web browser background color. Some browsers use three decimal numbers to stand for RED, GREEN, and BLUE. Each of these three numbers can range from 000 (zero) to 255.

Now look at the hexacode "#FF6699 " -- this tells us that, in hexadecimal --

RED = FF
GREEN = 66
BLUE = 99

The conversion chart gives us the decimal --

RED = 255
GREEN = 102
BLUE = 153

NOW THERE'S A SHOCKING BACKGROUND COLOR, isn't it?
Any Questions?
Okay, so we got off on a little web browser tangent there. Let's get back to the <BODY> tag. You can experiment with the decimal-to-hex numbers. This will give you even more choices than the hexacode color chart.

Sometimes you might want to set both a background color AND image on your web page. Just insert a space between commands, like this --

<BODY BGCOLOR="#BBDDBB" BACKGROUND="rainbow.gif">

You can control TEXT, LINK and VLINK (visited link) colors the same way as you control background color. And anyplace you can control color (see hint below), you can either spell the color, or use the hexacode for more versatility. Then your <BODY> tag might resemble --

<BODY BGCOLOR="#BBDDBB" BACKGROUND="rainbow.gif" TEXT="brown" LINK=red VLINK="#9E3742">

NOTE: Sometimes the quote marks (") are needed, and sometimes not -- so experiment!

HINT: The <FONT> tag can be used anywhere in your page body to control size and color of text, and again, the color can be spelled or you can use a hexacode for variety --

<FONT SIZE=5 COLOR=yellow>this is the text that will be affected when you load this page into a browser</FONT>

After the ending </FONT> tag (the one with the slash) the text will return to the color that you set in the <BODY> tag.

HINT: Some tags, like the <FONT> tag for example, can be layered or tiered, like this --

Start with the default text color, then <FONT COLOR="#FF0000">this text will be RED on your page, <FONT COLOR=green>and this text will be GREEN, </FONT>this text will be RED again, </FONT>and finally, this text will be back to the default color (the color you set in the <BODY> tag).

Last of all, remember to end the <BODY> tag at the end of the page, so it looks like this --

</BODY>
</HTML>

(note the slash just before the word BODY -- I always forget the darn slash <grin> )

If you liked this, you're gonna LOVE the <EMBED> tag!

Return to Table of Contents

You got a question?