You can add attributes to the <BODY> tag to change
background and text colors, the colors of links, and the top and left
browser margins. You can also tile an image for your background. These
attributes are discussed in today's lesson.
You will need 2 index cards (4 sides) for this lesson.
INDEX CARDS #28:
ATTRIBUTES FOR THE <BODY> TAG (28a)
The <BODY> tag has attributes that affect the entire
document. Any number of these attributes may be used, in any order. (The
browser margin attributes are discussed separately.)
BGCOLOR sets the BackGround COLOR for the entire page.
BACKGROUND is used to specify a graphic image (any size) that
is repeated indefinitely to form BACKGROUND "tiles."
TEXT sets the color for all the regular TEXT. The default text
color is black.
LINK sets the color for hyperLINKs (before they've been
clicked). The default color is blue.
VLINK sets the color for Visited LINKs (i.e., links that
have already been clicked). The default color is purple.
ALINK sets the color for Active LINKs (i.e., the
color while a link is in the process of being clicked). The default color
DESIGN TIPS FOR BACKGROUND TILES (28c)
BE SURE THAT YOU CAN READ TEXT EASILY over your background tiles!
The "water theme" sample hopefully illustrates how FRUSTRATING it
can be when a background interferes with legibility.
KEEP FILE SIZES FOR YOUR BACKGROUND TILE GRAPHIC SMALL.
SPECIFY A BACKGROUND COLOR, even if you use background tiles. Try to
pick a color that blends nicely with your background tile. Keep in mind
that the background tile is sometimes the last thing to display on the page,
and you don't want your user staring at ugliness in the meantime.
IF YOU WANT COLORS TO MATCH SEAMLESSLY, USE THE SAME FILE FORMATS
FOR ALL GRAPHICS, since browsers interpret colors
different for JPGs and GIFs.
USE WEB-SAFE COLORS WHEN YOU WANT FOREGROUND AND BACKGROUND COLORS
TO MATCH SEAMLESSLY. On 8-bit monitors, background colors and
foreground colors (i.e., inline images) are handled differently. Even
if you use exactly the same (non-web-safe) color for the background of an inline image
and your background color, they may not match.
ADJUSTING BROWSER MARGINS (28d)
By default, browsers use a margin of 10 to 12 pixels between the browser window
and the document's contents. (See the samples below this card.)
These margins can be adjusted: however,
you have to use different attributes for different browsers. In both
cases, margin measurements are specified in pixels.
<!-- INTERNET EXPLORER: -->
(W28.1) Please read Chapter 1 (Backgrounds and Colors) and do all the exercises
at the end of Chapter 1:
http://www.cwru.edu/help/wilbur/ (link is no longer valid)
(W28.2) Some users specify their own colors (in the browser's preferences) to use for
text and links. If you ALSO specify these things in your web document,
which colors get used: the user's, or yours? Experiment to figure
(W28.3) Here's a good web site for background images (and lots more):