Debugger script
Dhtml css
|
|
Using a background color or image is a great way to dress up the appearance of your Web page. In the following sections, I show you how to set a background color (as well as how to match text and link colors) and how to use a background image in your Web page.
Using the right background color is a simple and easy way to make your Web page look great. (Or horrible, depending on the color you choose!) In this section, I show you how to set a background color and matching text and link colors.
You can set the colors for the background, text, and links by using these attributes of the BODY element:
BGCOLOR sets the background color
TEXT sets the text (or foreground) color
LINK sets the color of hypertext links
VLINK sets the color of visited links
ALINK sets the color of activated links (where you click and hold down the mouse button on a link but haven't released it)
As with the FONT element's COLOR attribute, you can set these attributes using any of the 16 color names (black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow) or by using RGB hexadecimal codes.
The general form for entering these attributes as color names is shown here, where colorname is one of the 16 color names given:
<body bgcolor="colorname" text="colorname" link="colorname" vlink="colorname" alink="colorname">
The general form for entering these attributes as RGB hexadecimal codes is shown here, where rrggbb is three hexadecimal numbers forming the RGB code for setting the red, green, and blue components of an RGB color:
<body bgcolor="#rrggbb" text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">
The following example sets the colors for the background, the text (or foreground), and the three varieties of links—regular, visited, and activated. Your main concern when setting background, text, and link colors should be readability. If the color of your background and the colors of your text and links don't have enough contrast, or if they clash with each other, your page will end up being a strain for a visitor to read, which is not what you want. Also, when setting the color for visited links (specified by the VLINK attribute), it is conventional to use a less bright or intense version of the same color that is assigned to links (specified by the LINK attribute). If you do it the other way around, visitors might mistake unvisited links for visited ones. You can also set the same color to both, if you want, which keeps the color of a link from changing after it has been visited. Use a combination of color names and RGB hex codes to set colors for the page's background, text, and links (see Figure 4.26):
<body bgcolor="#ffffcc" text="navy" link="#cc0099" vlink="#cc0099" alink="red">
Notice in the code example that the same color is set for the LINK and VLINK attributes. Internet Explorer 6 displays internal links (such as those in the document menu) as visited links, whereas other browsers display these links as unvisited links. To get the same result across browsers, the LINK and VLINK attributes are set to display the same color for both unvisited and visited links. This is a good example of why you need to test out your pages in more than just one browser. Just because Internet Explorer handles something in a certain way, doesn't mean that other browsers will do the same thing.
Whenever setting a background color for a page, you should also set the text and link colors. That's because a user might specify text and link colors for their browser that are different than what is normally the default.
The BACKGROUND attribute of the BODY element lets you specify a background image. Background images are usually quite small (usually not larger than 100Ч100 pixels)—the Web browser tiles the image so that it fills the whole background of the browser window (similar to how tiles are laid on a bathroom wall or floor). Background images are usually created so they can be seamlessly tiled, meaning that you can't easily distinguish the seams between the tiled images; the tiled images appear to be a continuous pattern or texture. A background image can be a GIF, JPEG, or PNG file. The general format for entering this attribute is shown as follows, with filename referring to a graphic file located in the same folder as the Web page and URL referring to the address (relative or absolute) of a graphic file located in a different folder than the Web page:
<body background="filename or URL">
A key consideration when using background images is to avoid busy or high-contrast images. If you're going to use a dark background image, set the color of your text and links to a lighter color. The following example inserts a background image that is close in color and tone to the background color you added previously, so you don't have to change the other colors (see Figure 4.27):
<body background="b_mottle.jpg" bgcolor="#ffffcc" text="navy" link="#cc0099" vlink="#cc0099" alink="red">
If you set a light text color that you're displaying against a dark background image, realize that someone surfing with the display of images turned off will most likely see your light text displayed against a white background. If you've set the color of your text to white, they'll see (or won't see, that is) white text against a white background. To avoid this problem when you're using light text against a dark background image, always specify a dark background color, as well, that is similar at least in tone to the predominant color in the background image you're using. Look in the images folder in your MyHTML folder for additional background images you can use (just look for images beginning with "b_"). Here are just a couple of places on the Web where you can find background images you can download and use:
The Background Sampler by Netscape at home.netscape.com/assist/net_sites/bg/backgrounds.html.
FIND IT ONLINE
Backgrounds by NCSA at www.ncsa.uiuc.edu/SDG/Software/mosaic-w/coolstuff/Backgrnd/.
|
|
Debugger script
Dhtml css
