In this hour, you learn how to set the background and text colors for a Web page. You also find 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.
(View HTML tags covered in Hour 10.)
The Old Teal and Fuchsia(Figures 10.1 - 10.2)
A rousing cheer, rendered in the Credley High team colors. In the <BODY> tag, use BGCOLOR to specify a background color for the page, TEXT to indicate the text color, LINK and VLINK for the color of unvisited and recently-visited links, and ALINK to make a link flash a specified color when clicked.
Motawi Tileworks(Figures 10.3 - 10.6)
As Karim and Nawal demonstrate, tiling can be fun and profitable. The BACKGROUND attribute of the <BODY> tag lets you specify a graphics image to be tiled repeatedly behind all other graphics and text on a page. The picture of the Motawi siblings looks oval instead of rectangular, because Paint Shop Pro's Colors | Set Palette Transparency option was used to make part of the GIF image invisible, letting the page background show through.
The Spot(Figures 10.7 - 10.8)
To make this custom background tile, I opened a NASA image of Jupiter, in Paint Shop Pro, used the rectangular selection tool to select the Great Red Spot, and chose Selections | Convert to Seamless Pattern.
Hexidecimal Color Codes Reference
These 216 color codes are sometimes referred to as the "browser-safe" colors, because they will be rendered reliably in both Netscape Navigator and Microsoft Internet Explorer on any monitor that displays at least 256 colors. (The 16 named colors mentioned below will also appear reliably.) Other custom colors may look raggedy on computers that don't have true color (or high color) capability, since they have to be simulated by placing different-colored dots next to one another.
You can click on the 16 standard windows colors at the top of the Hexidecimal Color Codes page to see what text of that colors looks like on top of all the background colors in the chart.
It's easy to come up with background tiles that overwhelm the contents of the page, and make text difficult to read. The tile behind this silly page would be way too obtrusive for any serious site.
Used named colors like BGCOLOR="red" and TEXT="yellow" when you want bold, primary colors on a page.
Use custom colors like BGCOLOR="#400040" and TEXT="#8080FF" when you want that certain subtle mood. (Just remember that computer monitors vary wildly in their representation of color, so the colors you see will never match what others see with any precision.)
Seamless Tiling vs.Plain Old Cropping
These two backgrounds, made from the same section of a scan of my hand, demonstrate the difference between using Paint Shop Pro's Convert to Seamless Pattern and simply cropping out part of an image to use as a tile.
"If the 16 named colors (black, white, red, green, blue, yellow, magenta, cyan, purple, gray, lime, maroon, navy, olive, silver, and teal) 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:
For example, bright red is #FF0000, dark green is #003300, bluish-purple is #660099, and medium-gray is #999999."
The Tile Room
Buy Stuff Here
Modern Moments: Hi-Tech Hiku