Global Settings with the <body> Tag (Web Design in a Nutshell, 2nd Edition)

9.3. Global Settings with the <body> Tag

The <body> tag, originally designed to delimit the body of the document, has been extended to include controls for the backgrounds and text colors of a document. These settings are global, meaning they apply to the entire document. While these controls are currently well supported by major browsers, be aware that they have been deprecated by the HTML 4.01 specification and will eventually be phased out of use in favor of style sheet controls.

9.3.1. Colors

You can use the <body> tag to set colors for the document's background and text elements (see Table 9-1). Specified link colors apply to linked text and also to the border around linked graphics. (Chapter 15, "Forms" shows how to specify color in HTML.)

Table 9-1. Attributes for specifying colors with the <body> tag

Page element	HTML tag	Description
Background color	`<BODY BGCOLOR="`color`">`	Sets the color for the background of the entire page.
Regular text	`<BODY TEXT="`color`">`	Sets the color for all the regular text in the document. The default color for text is black.
Links	`<BODY LINK="`color`">`	Sets the color for hyperlinks. The default color for links is blue.
Visited link	`<BODY VLINK="`color`">`	Sets the color for links that have already been clicked. The default color for visited links is purple.
Active link	`<BODY ALINK="`color`">`	Sets the color for a link while it is in the process of being clicked. The default color for an active link is red.

A single <body> tag can contain a number of specific attributes, as shown here:

<BODY BGCOLOR="color" TEXT="color" LINK="color" VLINK="color"
    ALINK="color">

9.3.2. Tiling Background Graphics

You've probably seen web pages that have a graphic image repeating behind the text. These are called background tiles or tiling graphics, and they are added to the document via the <body> tag using the background attribute and the URL of the graphic as follows:

<BODY BACKGROUND="background.gif">

Any web-based graphic file format (such as GIF or JPEG) can be used as a background tile (some new browsers even support animated GIFs in the background). Following are a few guidelines and tips regarding the use of background tiles:

Use a graphic that won't interfere with the legibility of the text over it.

Keep file sizes small. As usual for the web, it is important to keep the file size as small as possible for background graphics, which often lag behind the display of the rest of the page.

Provide a background color specification in the <body> tag that will display while the background image downloads. In some cases, the background graphic may be the last element to display on the page while background colors display almost instantly. It is a nice trick to specify a background color that matches the overall intensity and hue of your background graphic, to at least set the mood while users wait for the background image to load. This is particularly useful if you've got light-colored text or graphics that will be unreadable or just ugly against the interim default gray browser background.

If you want the color of the background image to match other graphics positioned inline in the web page, be sure that they are saved in the same graphic file formats. Because browsers interpret colors differently for JPEGs and GIFs, the file formats need to match in order for the colors to match seamlessly (GIF with GIF, JPEG with JPEG).

Non-web-safe colors (colors not found in the web palette) are handled differently for background images than they are for foreground images when the page is displayed on an 8-bit monitor. This makes it very difficult to match inline images to the background seamlessly, even when the graphics use exactly the same color (or even when using the same graphic in both places).

To make matters worse, the way non-web-safe colors are handled differs from browser to browser. For instance, on the Mac, Navigator dithers the foreground graphic but shifts the background graphic to its nearest web palette value. In Internet Explorer, just the opposite happens: the background image dithers and the foreground image shifts. If you are trying to create a seamless effect, either make your foreground images transparent or stick diligently to the colors in the web palette.

The web palette is explained in Section 3.3.2, "Color in Browsers ( The Web Palette)" in Chapter 3, "Web Design Principles for Print Designers", and further in Chapter 22, "Designing Graphics with the Web Palette".

9.3.3. Adjusting Browser Margins

By default, browsers insert a margin of 10 to 12 pixels (depending on the browser and platform) between the edge of the browser window and the document's contents. There is no method for changing these margins using tags from the HTML 4.01 specification alone (the W3C prefers style sheets adjusting margins); however, there are browser-specific attributes that can be added to the <body> tag that increase or decrease the margin width.

The drawback is that Internet Explorer and Netscape Navigator use different attributes to control margins. In addition, Netscape's tags only work with version 4.0 and higher. If you want to reach a broader audience, you can use frames for a similar effect (see "Frame Margins" in Chapter 14, "Frames").

Internet Explorer uses the attributes leftmargin , rightmargin, topmargin, and bottommargin to specify pixel widths for the respective margins in the browser window. Navigator 4.0 and higher uses marginwidth (to adjust the left and right margins) and marginheight (for top and bottom margins).

For all these attributes, the value is a pixel measurement. The margin may be removed completely, allowing objects to sit flush against the window, by setting the attribute values to 0. Be aware that there is a bug in Navigator 4.x that inserts a 1-pixel border even when the margins are set to zero.

To set margins for both browsers, it is necessary to duplicate attributes. In the following example, the margins are turned off on the top and left edges using two sets of proprietary attributes:

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