5.3. Document Colors and Background ImagesThe HTML 4 and XHTML standards provide a number of attributes for the <body> tag that let you define text, link, and document background colors, in addition to defining an image to be used as the document background. All the popular browsers additionally extend these attributes to include document margins and better background image control. And, of course, the latest stylesheet technologies integrated into the current browsers let you manipulate all of these various display parameters. 5.3.1. Additions and Extensions to the <body> TagThe attributes that control the document background, text color , and document margins are used with the <body> tag. [<body>, 3.8.1] 5.3.1.1. The bgcolor attributeOne standard, although deprecated, way you can change the default background color in the browser window to another hue is with the bgcolor attribute for the <body> tag. Like the color attribute for the <font> tag, the required value of the bgcolor attribute may be expressed in either of two ways: as the red, green, and blue (RGB) components of the desired color, or as a standard color name . Appendix G provides a complete discussion of RGB color encoding along with a table of acceptable color names you can use with the bgcolor attribute. Setting the background color is easy. To get a pure red background using RGB encoding, try: <body bgcolor="#FF0000"> For a subtler background, try: <body bgcolor="peach"> 5.3.1.2. The background attributeIf a splash of color isn't enough, you may also place an image into the background of a document with the background attribute in the <body> tag. The required value of the background attribute is the URL of an image. The browser automatically repeats (tiles) the image both horizontally and vertically to fill the entire window. You normally should choose a small, somewhat dim image to create an interesting but unobtrusive background pattern. Besides, a small, simple image traverses the network much faster than an intricate , full-screen image. Figure 5-20 and 5-21 show you how the extended browsers render a single wood panel as an individual picture and then tile it to create a paneled wall when included as a document's background: Figure 5-20. A single wood panel...Figure 5-21. ...becomes many as the <body> background<body> <img src="pics/wood_panel.gif"> versus: <body background="pics/wood_panel.gif"> Background images of various dimensions and sizes create interesting vertical and horizontal effects on the page. For instance, a tall, skinny image might set off your document heading: <body background="pics/vertical_fountain.gif"> <h3>Kumquat Lore</h3> For centuries, many myths and legends have arisen around the kumquat. ... If vertical_fountain.gif is a narrow, tall image whose color grows lighter toward its base and whose length exceeds the length of the document body, the resulting document might look like the one shown in Figure 5-22. Figure 5-22. A tall and skinny backgroundYou can achieve a similar effect horizontally with an image that is much wider than it is long (see Figure 5-23). Figure 5-23. A long and skinny backgroundThe background attribute is deprecated in HTML 4 and XHTML because you can achieve similar effects using stylesheets. 5.3.1.3. The bgproperties attributeThe popular browsers no longer support the bgproperties attribute extension for the <body> tag. It worked only in conjunction with the background attribute extension and had a single value, fixed . Its effect was to freeze the background image to the browser window, so it did not scroll with the other window contents. Hence, the example H2Omark.gif background image might serve as a watermark for the document: <body background="pics/H2Omark.gif" bgproperties="fixed"> 5.3.1.4. The text attributeOnce you alter a document's background color or add a background image, you also might need to adjust the text color to ensure that users can read the text. The HTML 4/XHTML text standard attribute for the <body> tag does just that: it sets the color of all nonanchor text in the entire document. Give the text attribute a color value in the same format as you use to specify a background color (see bgcolor in the earlier section, 5.3.1.1)an RGB triplet or color name, as described in Appendix G. For example, to produce a document with blue text on a pale yellow background, use: <body bgcolor="#777700" text="blue"> Of course, it's best to select a text color that contrasts well with your background color or image. The text attribute is deprecated in HTML 4 and XHTML because you can achieve similar effects using stylesheets. 5.3.1.5. The link, vlink, and alink attributesThe link , vlink , and alink attributes of the <body> tag control the color of hypertext (text inside the <a> tag) in your documents. All three accept values that specify a color as an RGB triplet or color name, just like the text and bgcolor attributes. The link attribute determines the color of all hyperlinks the user has not yet followed. The vlink attribute sets the color of all links the user has followed at one time or another. The alink attribute defines a color for active link texti.e., a link that is currently selected by the user and is under the mouse cursor with the mouse button depressed. Like text color, you should be careful to select link colors that can be read against the document background. Moreover, the link colors should be different from the regular text as well as from each other. These attributes are deprecated in HTML 4 and XHTML because you can achieve similar effects using stylesheets. 5.3.1.6. The leftmargin attributeOnce peculiar to Internet Explorer but now supported by all the popular browsers, the leftmargin attribute extension for the <body> tag lets you indent the left margin relative to the left edge of the browser's window, much like a margin on a sheet of paper. Antiquated browsers ignore this attribute, and just left-justify the body content to the left edge of the document window. The value of the leftmargin attribute is the integer number of pixels for that left-margin indent; a value of 10 is the default. The margin is filled with the background color or image. For example, Internet Explorer renders the following text justified against a margin 50 pixels away from the left edge of the browser window (see Figure 5-24): Figure 5-24. The leftmargin attribute for indenting body content<body leftmargin=50> Modern browsers lets you indent the<br> <left margin<br> away from the left edge of the window. </body> 5.3.1.7. The topmargin attributeLike leftmargin , the topmargin attribute extension used to be exclusive to Internet Explorer, but now all the popular browsers support it well. You may include it in the <body> tag to set a margin of space at the top of the document. The margin space is filled with the document's background color or image. Body content begins flowing below the integer number of pixels you specify as the value for topmargin ; a value of 0 is the default. For example, Opera renders the following text at least 50 pixels down from the top edge of the browser window (see Figure 5-25): Figure 5-25. The topmargin attribute for lowering body content<body topmargin=50> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Modern browsers give your documents a little extra headroom with topmargin. </body> 5.3.1.8. The style and class attributesYou also can set all the various style- related <body> features, and then some, with CSS. But although you may include the style attribute with the <body> tag to create an inline style for the entire document body, we recommend that you set those styles at the document level (using the <style> tag inside the document head) or via a collection-level (imported) stylesheet. Use the class attribute and name value to apply the appropriate style of a predefined class of the <body> tag to the contents. (Because there can be only one body per document, what is the point of setting a class name otherwise ?) We cover the use of style and class definitions in Chapter 8. 5.3.1.9. Mixing and matching body attributesAlthough background and bgcolor attributes can appear in the same <body> tag, a background image will effectively hide the selected background color unless the image contains substantial portions of transparent areas, as we described earlier in this chapter. But even if the image does hide the background color, go ahead and include the bgcolor attribute and some appropriate color value. Users can turn off image downloading, which includes background images, so otherwise they may find your page left naked and unappealing. Moreover, without a bgcolor attribute or a downloaded (for whatever reason) background image, the browsers merrily ignore your text and link color attributes, too, reverting instead to their own default values or the ones the user has chosen . 5.3.2. Extending a WarningMuch like early users of the Macintosh felt compelled to create documents using ransom-note typography ("I've got 40 fonts on this thing, and I'm going to use them all!"), many authors cannot avoid adding some sort of textured background to every document they create ("I've got 13 wood grains and 22 kinds of marbling, and I'm going to use them all!"). In reality, texture-mapped backgrounds, except for the very clever ones, add no information to your documents. The value of your document ultimately lies in its text and imagery, not the cheesy blue swirly pattern in the background. No matter how cool it looks, your readers are not benefiting and you could be losing readability. We advise you not to use the color extensions except for comparatively frivolous endeavors or unless the extension really adds to the document's value, such as for business advertising and marketing pages. 5.3.2.1. Problems with background imagesHere are some of the things that can go wrong with background images:
5.3.2.2. Problems with background, text, and link colorsYou also will encounter a slew of problems if you play with background colors, including the following:
5.3.2.3. And then againThere is no denying the fact that these extensions result in some very stunning HTML and XHTML documents. And they are fun to explore and play with. So, instead of leaving this section on a sour note of caution, we encourage you to go ahead and playjust play carefully . |