Thus far, you have been learning how to specify colors with CSS. However, it is possible to add color to Web pages directly in your HTML code, without the use of style sheets. You’ll find this method a bit more limiting, because you can only use hexadecimal code or color names with HTML. Also, the methods for adding color in the sections that follow have been deprecated in favor of CSS. Nevertheless, you’ll find it helpful to at least be familiar with these elements and attributes, even if you decide not to use them.
To specify the background color of a page, use the bgcolor= " " attribute inside the <body> tag. The value that goes inside bgcolor can be one of the recognized color names or a color’s hexadecimal code. To select a red background for a page, you could write:
However, you could just as easily use the hex code for red, in which case your code would look like this:
Either way, you wind up with the same result—a Web page with a red background. To do a black background, you can use either the name “black” or the hex code “#000000”; for a yellow background, use “yellow” or “#ffff00”. . . you get the idea.
The bgcolor attribute is useful for more than just setting a page’s background color. As you already discovered, it can be used in a table to set the individual background color for cells. It also can be used to set the background color for table headings.
The bgcolor attribute has not been deprecated for use with tables. Thus, at least for now, you can use it without worrying about future compatibility.
You can set the color for all the text in your page by using the text=" " attribute inside the opening <body> tag. Again, using a color’s name or hex code will cause all the text in a page to display in that color. For example, if you want all the text on a page to be maroon, write your <body> tag this way:
To have a page with a yellow background and maroon text, construct your tag like this:
<body bgcolor="yellow" text="maroon">
As you learned in Chapter 3, you also can specify text characteristics with the <basefont /> element. If you include the following instruction in the body of your page:
<basefont color="purple" />
all the text will display in purple.
Just as you can modify link colors with CSS, you also have this capability with HTML, although in a more limited way. For example, if you want to set the link to red, the active link to yellow, and the visited link to blue, write the opening <body> tag this way:
<body link="red" vlink="yellow" alink="white">
Try typing out the following code, even if you don’t understand it all. It will create a small table on your page and a sample link below the table. If you try this out, you will see that the link on the page displays in the colors you have chosen rather than the default colors.
<html> <head> <title>Color Comparison Table</title> </head> <body bgcolor="teal" link="red" vlink="yellow" alink="white"> <table border="0" cellpadding="100"> <tr> <td bgcolor="aqua">Sample Color</td> </tr> </table> <a href="http://www.osborne.com"><h2>Sample Link to Osborne's Web Site</h2></a> </body> </html>
Before you change the colors of your links, keep in mind that many Web surfers have gotten used to the blue/red/purple color scheme for links. Be careful that you don’t make your page difficult to navigate by making your links difficult to identify.
If you want to set a particular portion of text apart by changing its color, but you want the rest of the page to retain its default color, you can do it with the <font> element and the color=" " attribute. To see how it works, add the following line to the page you just created:
<p>This line will have one <font color="red"> red</font> word.</p>
When you save and display your page now, you will see that the word “red” is displayed in bright red text. Remember, you also can use the hex code for red. Substitute the hex code #ff0000 for the word “red” in the <font> tag. Save and display it. You still get the same result.
Remember the horizontal rule <hr />? You can specify colors for it by including the color attribute inside the tag. Try adding this line to your page:
<hr color="yellow" width="50%" size="7" />
When you save and view the page, you will find a bright yellow horizontal rule has been inserted wherever you put the <hr /> element.
You have already experimented a bit with tables in this chapter. When you get to Chapter 8, you will learn that tables are used for much more than displaying columns and rows of data on a Web page. Tables are one of the most frequently used means of establishing a page’s layout. The bgcolor attribute enhances this by enabling you to set different colors for individual table cells, which allows you to create very pleasing layouts for your pages. To see how this works, try adding the following lines to the table you already created:
<html> <head> <title>Color Comparison Table</title> </head> <body bgcolor="teal" link="red" vlink="yellow" alink="white"> <table border="0" cellpadding="25"> <tr> <td bgcolor="aqua">Sample Color</td> </tr> <tr> <td bgcolor="#0000ff"> <font color="white"> <h1>Sample Two</h1> </font> </td> </tr> </table> <a href="http://www.osborne.com"><h2>Sample Link</h2></a> </body> </html>
When you save and view this file in your browser, you’ll see that another “cell” has been added just below the first one. This time the cell has a blue background and the text displays in white. Perhaps by now you’re thinking, “There’s got to be an easier way!” After all, to get some text to have a special background color, its own color, and a large size, you have to write this:
<tr><td bgcolor="#0000ff"><font color="white"><h1>Sample Two</h1></font></td></tr>
What’s worse is that you have to do that every time you want to produce those results! Is there a better way? You bet! You can do all this and more with Cascading Style Sheets. That’s why the W3C is phasing out (deprecating) these older methods of formatting.