This page is under construction.
It was last revised on August 28, 2000.

DAY 28: BODY ATTRIBUTES: BACKGROUNDS and more

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.

INDEX CARD #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.) 
<BODY BGCOLOR="desired_background_color"
      BACKGROUND="URL_for_graphic_to_be_tiled"
      TEXT="desired_text_color"
      LINK="desired_color_for_links"
      VLINK="desired_color_for_visited_links"
      ALINK="desired_color_for_active_links" >
Here's some sample code for a "water" theme (which is VERY difficult to read): 
<BODY BGCOLOR="#333366" BACKGROUND="graphics/water_drops.jpg"
      TEXT="#000099" LINK="#336666" VLINK="#33CC33" ALINK="silver">
CLICK HERE TO SEE THE RESULTS OF THIS SAMPLE CODE!

DESCRIPTIONS OF BODY ATTRIBUTES (28b)

  • 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 is red.


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: -->
<BODY LEFTMARGIN="desired_left_and_right_margin" 
      TOPMARGIN="desired_top_and_bottom_margin">

  • <!-- NETSCAPE NAVIGATOR: -->
<BODY MARGINWIDTH="desired_left_and_right_margin" 
      MARGINHEIGHT="desired_top_and_bottom_margin">



  •  To set margins for both browsers, use all four attributes; the
ones that don't apply will be ignored.  For example:

    <BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0>



WORKSHEET #28:

ASSIGNMENT #28:

On to the next day's lesson!
Back to the COURSE SYLLABUS