|
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.
- At the ColorMaker page, click on the Colors button.
- 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.
- As you choose colors you will see format in the right-hand
frame so you can see how all the colors work together.
- 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
|