|home Java Script MS Access Perl HTML Delphi C ++ Visual Basic Java CGIPerl MS Excel Front Page 98 Windows 98 Ms Word Builder PHP Assembler Link to us Links|
Nearly every sample Web page in Chapters 1 through 12 has a white background and black text. In this chapter, you'll find out how to make pages with the background and text colors of your choice. You'll also discover how to make your own custom background graphics, and how to let the background show through parts of any image you put on your Web pages. To Do: The black-and-white figures printed in this book obviously don't convey colors very accurately, so you may want to view the sample pages online at:
You can also try the colors on your own Web pages as you read about how to make them.
To specify the background color for a page, put BGCOLOR="blue" inside the <BODY> tag. Of course, you can use many other colors other than blue. You can choose from the 16 standard Windows colors: black, white, red, green, blue, yellow, magenta, cyan, purple, gray, lime, maroon, navy, olive, silver, and teal. (You can call magenta "fuschia" and cyan "aqua" if you prefer.)
You can also specify colors for text and links in the <BODY> tag. For example, in Figure 13.1 you'll notice the following <BODY> tag:
<BODY BGCOLOR="red" TEXT="yellow" LINK="white" VLINK="gray" ALINK="green">
As you probably guessed, TEXT="yellow" makes the text yellow. There are three separate attributes for link colors:
Because I used pure red as the background color in the graphics images, they blend right into the background of the Web page.
Time Saver: Here's a neat trick: If you make the VLINK color the same as the BGCOLOR color, links to pages that a visitor has already seen will become invisible. This can make your page seem "smart"--offering people only links to places they haven't been. (Note, however, that it may also annoy anybody who wants to return to a page they've already seen!)
Figures 13.1 and 13.2 illustrate how color can be used in combination with links.
If the 16 named colors don't include the exact hue you're after, you can mix your own custom colors by specifying how much red, green, and blue light should be mixed into each color.
The format is #rrggbb, where rr, gg, and bb are two-digit hexadecimal values for the red, green, and blue components of the color. If you're not familiar with hexadecimal numbers, don't sweat it. Just remember that FF is the maximum, 00 is the minimum, and use one of the following codes for each component:
Figure 13.1. You can specify colors for the background, text, and links in the <BODY> tag of any Web page.
13.2. On a color screen, this page has
a red background, yellow body text, and white link text, as specified in Figure 13.1.
For example, bright red is #FF0000, dark green is #004000, bluish-purple is #8000B0, and medium-gray is #808080. As another example, the custom colors in Figure 13.3 specify a deep indigo background with steel blue text and a fuschia link that turns white after it's been visited (see Figure 13.4).
For a very handy chart showing the hexadecimal color codes, along with the colors they create, go to
Figure 13.3. For exact control of colors, you can use hexadecimal color codes instead of English color names.
Figure 13.4. On a color screen, the background on this page is indigo, with silvery blue text.
Time Saver: Even though you can specify millions of different colors, many computers are set to display only the 16 named colors. All others will be approximated by dithered patterns, which can make text look messy and difficult to read. Also, you should be aware that different computers may display colors in different hues. I recently designed a page with a beautiful blue background for a company I work for--only to find out later that the president of the company saw it on his computer as a lovely purple background! The moral of the story: Stick to the named colors and don't waste time mucking with hexadecimal color codes, unless you have precise control over the computer displays of your intended audience.
Though the colors you specify in the <BODY> tag apply to all text on the page, you can also change the color of a particular word or section of text using the <FONT> tag. This is discussed in Chapter 6, "Font Control and Special Characters."
Time Saver: You can set the color of an individual link to a different color than the rest by putting a <FONT> tag with a COLOR attribute after the <A HREF>. (Also include a </FONT> tag before the </A> tag.) Microsoft Internet Explorer 3.0, however, will always display all links with the colors set in the <BODY> tag.
Background tiles are all the rage on the Web these days. They let you specify an image file to be used as a wallpaper tile behind all text and images in a document. You put the image filename after BACKGROUND= in the <BODY> tag like this:
For example, the tile.gif file referred to by the <BODY> tag in Figure 13.5 is an image of one small tile. As you can see in Figure 13.6, most Web browsers will repeat the image like a floor tile, behind any text and images on the page.
Figure 13.5. You can specify a background image to tile behind a page in the BACKGROUND attribute of the <BODY> tag.
Figure 13.6. The tile.gif file (specified in Figure 13.5) is automatically repeated to cover the entire page.
Caution: Tiled background images should be implemented with great care in order to avoid distracting from the main content of the page itself. The text in Figure 13.6, for example, would be difficult to read if I hadn't made it all a big <H1> heading. Many pages on the Web are almost impossible to read due to overdone backgrounds. So before you include your company logo or baby pictures as wallpaper behind your Web pages, stop and think. If you had an important message to send someone on a piece of paper, would you write it over the top of the letterhead logo or on the blank part of the page? Backgrounds should be like fine papers: attractive, yet unobtrusive.
The astute observer of Figure 13.6 (that's you) will notice that the background tiles show through portions of the rectangular image. You'll often want to use partially transparent images to make graphics look good over any background color or background image tile.
Figure 13.7 shows the image from Figure 13.6, as it looked in Paint Shop Pro when I created it. (Figure 13.7 also shows the single tile used for the background in Figure 13.6.)
13.7. When I saved this image in Paint
Shop Pro, I made the background color transparent.
To make part of an image transparent, the image must have 256 or fewer colors and you must save it in the GIF file format. (JPEG images can't be transparent.) Most graphics programs that support the GIF format allow you to specify one color to be transparent. To Do: To save a transparent GIF in Paint Shop Pro, follow these steps:
Figure 13.8. Paint Shop Pro's GIF File Preferences dialog box lets you choose which palette color will become transparent.
Time Saver: For a masked preview of which part of the image will be transparent, click on the Preview button shown in Figure 13.8. This will temporarily replace the transparent color with the current foreground color. To emphasize the transparent color permanently, select Colors | Edit Palette and change the transparent palette color to some outrageous fluorescent green or another highly visible hue. If some areas aren't transparent that should be, use the color replacer tool to change their color.
Any GIF or JPEG image can be used as a background tile. But pages look best when the top edge of a background tile matches seamlessly with the bottom edge and the left edge matches up with the right.
If you're clever and have some time to spend on it, you can make any image into a seamless tile by meticulously cutting and pasting, while touching up the edges. You'll find the exact steps for doing this in my book, Creating Your Own Web Page Graphics, by Que Publishing.
Paint Shop Pro provides a much easier way to automatically make any texture into a seamless tile. You simply use the rectangular selection tool to choose the area you want to make into a tile, and then select Image | Special Effects | Create Seamless Pattern. Paint Shop Pro crops the image and uses a sophisticated automatic procedure to overlay and blur together opposite sides of the image.
In Figure 13.9 I did this with part of an image of the palm of my hand, taken with an inexpensive digital camera. The resulting tile, shown as the background of a Web page in Figure 13.10, tiles seamlessly but has the flesh tone and texture of skin.
You'll find similar features in other graphics programs, including Photoshop (use Filter | Other | Offset with Wrap turned on), Kai's Power Tools, and the Macintosh programs Mordant and Tilery.
Figure 13.9. Paint Shop Pro can automatically take any region of an image and make it into a background pattern that can be easily made into tiles.
13.10. The results of Figure 13.9 used
as a background image for a Web page.
To Do: Here are some tips for making your own background tiles with Paint Shop Pro.
If you just cannot seem to get the pattern you want, there are hundreds of sites on the Internet that offer public domain background images that you are free to use, or inexpensive professionally designed backgrounds. A good starting place is Gini Schmitz' Textures and Backgrounds Wonderland at:
If you happen to see a background image on someone else's page that you wish you could use on your own page, it is a simple matter to click on the background with the right mouse button and select Save Background As to save a copy of it. Be careful, though, to ask the person who created the image if you can use it, because the image could very well be copyrighted or legally protected in some other way.
Coffee Break: You'll see an unconventional use of background tiling at the newly wallpapered 24-Hour HTML Café:
(Can you figure out what I did and how I did it? If not, see Chapter 14, "Page Design and Layout," for some hints.) You'll also find a selection of snazzy backgrounds you can use for your own pages at the Background Underground lounge:
While you're checking out the backgrounds, you'll get an animated appetizer hot from Chapter 12, "Creating Animated Graphics."
In this chapter, you learned how to set the background and text colors for a Web page. You also found out how to make a tiled background image appear behind a Web page, how to make foreground images partially transparent so the background shows through, and how to create seamless image tiles for use as backgrounds.
Table 13.1 summarizes the attributes of the <BODY> tag discussed
in this chapter.
Table 13.1. Attributes of the <BODY> tag covered in Chapter 13.
|Encloses the body (text and tags) of the HTML document.|
|BACKGROUND="..."||The name or address of the image to tile on the page background.|
|BGCOLOR="..."||The color of the page's background.|
|TEXT="..."||The color of the page's text.|
|LINK="..."||The color of unfollowed links.|
|ALINK="..."||The color of activated links.|
|VLINK="..."||The color of followed links.|