[an error occurred while processing this directive]


Handouts » HTML Handouts » The HTML Body Tag

The HTML Body Tag


Referring to the handout on HTML, the body tag is present in every web page. On the one hand it is possible to have an extremely plain and simple body tag, like this: <body>. This plain body tag will cause the look of your web pages to default to the settings of the visitor's web browser.

A better approach is to choose your own colors and background image. The colors you are able to choose include the beginning color of the page and the colors of the regular text, and all the link colors: visited link, UNvisited link and active link (the active links is a really cheap thrill - it is the color that flashes as you click on the link!)


Setting up text and background colors

The initial commands for colors are placed in the body tag. Do Not create a second body tag; you should edit your existing body tag. The strange numbers in this command, that appear in quote marks and begin with a # (pound sign) are used to identify specific colors. You can use the sites linked to the next section to choose the colors you want to use, and to identify the correct number. Format your body tag to look like this (remember it doesn't matter whether you type the HTML tags (commands) in upper case, lower case or mixed case. I recommend you use lower case):
     <body
       bgcolor="#ffffff"
       background="wh-paper.jpg"
       text="#000000"
       link ="#0000FF"
       vlink="#FF0000"
       alink="#ffff00">

What do all those commands mean?

<body
This is the beginning of the body tag. Notice the greater then sign that used to end the tag is gone. It's been moved down to the last to enclose all of these added commands.

bgcolor="#ffffff"
The bgcolor command sets a smooth color background. Sometimes this is all you want and you won't want a background gif at all. The number entry is a combination of the basic red,green,blue colors to produce a color. If you choose to also have a background graphic you should choose a bgcolor that complements the primary color of the background graphic. (see more about this under background, next). Notice the number must be in quotation marks, and that it must begin with a # (pound sign).

background="wh-paper.jpg"
This command places a background graphic on your page, underlying all of the text and images you place there. Be sure to carefully select a bgcolor to be placed under this graphic. This helps support text and link colors you choose. When a person with a graphics browser visits your page they'll see the background, NOT the bgcolor. BUT if the person has graphics turned off, they'll see the bgcolor. Because of this you must be sure this bgcolor is harmonious with the other colors you choose for the page.

text="#000000"
This command sets the default color of plain text on the page. You can change the text color at any point on the page with the command <font color="#999999"> and entering the </font> command to turn off the temporary color and return to the default set in the body tag.

link ="#0000FF"
The link color refers to links you have not yet visited.

vlink="#FF0000"
The vlink refers to links you have visited.

alink="#ffff00">
The alink refers to an active link. A link is "active" for that brief moment when you are actually clicking on the link. It will flash this color for a fraction of a second, before it begins making the connection to the link.

Notice the > at the end of the alink
You can enter these commands in any order you wish. But the last entry must end with the > which serves to "close" the body tag.


Resources for Choosing Color Settings

The Netscape Composer had a good color picker built right into Format/Page Colors and Properties. O'Reilly offers a list of colors by name that you can use without those strange hex numbers! OR you can try a web-based resource.

There's an excellent resource for picking out colors for the bgcolor and link colors. This ColorMaker offers a grid of color for setting background colors and link colors.

  1. At the ColorMaker page, click on the Colors button.
  2. Next to the Element heading is a pick list on which you can select which element you want to pick a color for - bgcolor or the various link colors.
  3. As you choose colors you will see format in the right-hand frame so you can see how all the colors work together.
  4. Once you have all the settings you want, select the copy the BODY tag link in the right-hand frame to display the complete body tag.


Resources for Background Images


http://paula.edmiston.org/handouts/html/bodytag.html
Last Edited: 11 Mar 2012


[an error occurred while processing this directive]