A colorful background is perhaps the simplest way to add a little spice to your Web page. Color choices reflect your personality on a Web page. Some people like basic black and white; others prefer light colors, while some choose fluorescent colors. Some color combinations can give your page a three-dimensional effect. You can have a black background with white text, or a purple background with green text. Some color combinations are harder to read than others, but in the end, the choice is yours!
The tag used to change the color of your Web page is <BODY BGCOLOR=“RRGGBB”>. The tag should be located at the beginning of the body text, after the <BODY> tag. The first <BODY> tag defines the body text of the Web page.
The color code (RRGGBB) is made up of 3 two-digit codes (RRGGBB). Each two-digit code represents the amount of red (RR), green (GG), and blue (BB) that makes up the color. For example, a color that starts with 00 has no red, and a color that ends in 00 has no blue.
Some letters are also used when creating colors. A color that starts with FF has full red, and a color with FF as the middle pair of digits has full green. The color code for white is FFFFFF and color for black is 000000. Since all the colors on the color wheel fall between white and black, the color codes are a combination of letters and numbers. For example, DB70DB is the color code for purple.
This method of combining numbers and letters is called the hexadecimal format, otherwise known as HEX. HEX is a numbering system based on 16 rather than 10. HEX uses the numerals 0 to 9 and after that the letters A to F. The letters are added to the numbers to create more than 16 million different colors! Luckily programs and charts are available that list different colors and their HEX numbers, so you won’t have to figure them out!
Basic Color in HEX format:
|
Color |
HEX format |
|
White |
FFFFFF |
|
Black |
000000 |
|
Red |
FF0000 |
|
Green |
00FF00 |
|
Blue |
0000FF |
Some colors can be displayed in your page as words (<BODY BGCOLOR>=“red”>), but you may want to use the color code instead of the name so the browser understands exactly what color you want. For example, you couldn’t use “mint green” as the color code. You can use words for most primary colors, such as red, orange, yellow, green, and blue, but not for most variations of those colors, like pale yellow, mint green, and lavender.
To change the background color of your Web page, do the following steps:
First let’s change the background color using words, then we’ll change it using a HEX number.
Did your background change to yellow? Congratulations! If not, double-check your color tag and make sure it’s correct. Now let’s change it to red.
Now let’s use some HEX numbers.
Did your background change to purple? Great! Let’s try a few more.
As you can see, the possibilities are endless. Luckily, you don’t have to guess what letter and number combination will create the color you want. Web pages and programs on the Internet will convert colors to HEX for you, or have pictures of colors with their HEX numbers.
To visit a color chart on the Web, do the following steps:
Next, you will change the color of the text.
Text color is changed basically the same way the background color is changed. The tag use to change the color of the text is
<BODY TEXT=RRGGBB>.
To change the color of your text, do the following steps:
The tag should now read <BODY BGCOLOR=“RRGGBB” TEXT=“6600DD”>
NOTE: The background color will be the color you chose in step 16.
Did the text change to purple? If not, check your source code and make sure the tag is correct.
Some color combinations can make the text hard to read. You may need to experiment with different background and text colors until you find a combination you like.
Now we are going to change the colors of the links on your Web page.
There are three different links with three different colors on your Web page: unvisited links, visited links, and active links. The active link is the link when you click on it, and this happens so fast that you can rarely see the link color change. We are going to change the color for unvisited and visited links since these remain on your Web page and you can see the color change.
The attribute use to change the color of an unvisited link is LINK=. The attribute used to change the color of a visited link is VLINK=. The link attributes are added to the same <BODY> tag as the BGCOLOR and TEXT attributes.
To change the color of the links in your documents, do the following:
NOTE: For this exercise the location of the link on your page does not matter.
This will change the unvisited links to green.
The tag should now read <BODY BGCOLOR=“0099BB” TEXT=“6600DD” LINK=“00FF00”>.
This will change the visited links to red.
The tag should now read <BODY BGCOLOR=“0099BB” TEXT=“6600DD” LINK=“00FF00” VLINK=“FF0000”>.
Notice the color of the links. The previously activated links are red and the new link you created is green.
Notice that the link you clicked is a different color. This is to let you know that you have already activated that link.
Remember, your can return to the RGB Triplet Color Chart by going to your Favorites folder.
In this exercise you will use what you have learned to change the colors of another Web page. The table below describes the attributes you learned in this chapter.
|
Background Color |
<BGCOLOR=“RRGGBB”> |
|
Text Color |
TEXT=“RRGGBB”> |
|
Unvisited Link Color |
<LINK=“RRGGBB”> |
|
Visited Link Color |
<VLINK=“RRGGBB”> |
Using the attributes in the above table, do the following:
NOTE: Use the RGB Triplet Color Chart Web page in your favorites for the correct color codes for the following steps.
In this exercise you will use what you have learned to customize your own Web page.
Open resort lastnameinitial in your text editor. Using what you have learned about the color tags and the <FONT> tags see if you can change the company name “Fun in the Sun Vacations” to red. Do not change the color of the rest of the text. Change the color for all three times the company name is used in the document.