'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Quick Quiz Results
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' Quick Quiz Results'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' Each question of the quick quiz will be restated below, along with the correct answer. If the the red light is on, you answered the question incorrectly. If it is green, you answered correctly.'); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 1'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '+form.Q1.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A1.value); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 2'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '+form.Q2.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A2.value); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 3'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '+form.Q3.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A3.value); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 4'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '+form.Q4.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A4.value); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 5'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '+form.Q5.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A5.value); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln('

'); results.document.writeln(' Click the close button below to close this results window. Then click Next Chapter to advance to the next chapter.'); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' Close
'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(''); results.document.close(); } // end hide from crusty browsers -->
Tutorial Navigation Bar Home New Users Returning Users Tutorial Features Site Map
Chapter 5: Browser Generated Colors
Goals of this Chapter

After completing this chapter, you should be able to set background, text and link colors, along with gaining an understanding of hex triplets.

Chapter Sections

The sections of Chapter Five are as follows:

Section 5.1: Hex Triplets
Hex triplets will give you the opportunity to change the background, text, and link colors of your web page. They consist of pieces of code that define aspects of colors. A hex triplet has three parts consisting of hex values. Hex numbers consist of six extra characters besides the usual ten. Notice there are 16 digits, 0 being the lowest, F being the greatest.

0 1 2 3 4 5 6 7 8 9 A B C D E F

A hex value consists of any two digits. A few examples out of many hex values are 00, 36, 8D, 92, CE, and FF. A hex value signifies an amount of either red, green, or blue in a desired color. A hex triplet consists of three hex values. The first being the amount of red, the second, green, and the third, blue. There is always a number sign, #, at the beginning of a hex triplet.

For example, #23C7DA is a valid hex triplet. The amount of red is 23, the amount of green is C7, and the amount of blue is DA. This will produce a rather intense blue color. A few more examples follow.

#FFAAAA
#FFCCAA
#FFFFAA
#AAFFAA
#AAAAFF
#FFAAFF

Section 5.2: Safe Colors
Monitors able to display only 256 colors will not be able to display the color #A7EC31 the same way that other, more advanced monitors might. Lower end monitors display it as the color #99FF33, which is a bit different. This is because the browser will find the closest match to the original color; it will not dither the background.

That is why it is a good idea to use safe colors. These colors will look perfect on anyone's monitor. The safe hex values are 00, 33, 66, 99, CC, and FF. You can use any combination of three of these to form a safe hex triplet color.

Section 5.3: Colors and Tags
The following paragraphs are a few examples of how hex triplets can be used in tags.

These attributes can be used in the <BODY> tag. The BGCOLOR attribute defines the background color of the document, the TEXT attribute defines the default text color throughout the document, the LINK attribute defines the link color throughout the document, the ALINK attribute defines the active link color throughout the document, and the VLINK attribute defines the visited link color throughout the document.

The <FONT> tag also has an attribute COLOR which was mentioned earlier in chapter 2. This attribute defines the color of the included text within the <FONT> tag. The COLOR attribute overrides the TEXT attribute located in the <BODY> tag.

There are more situations where hex triplets can be used, but those will be explained when the topics are introduced.

Section 5.4: Quick Quiz
Try to answer the following questions without looking back at the chapter.

Question 1: How many hex values does a hex triplet consist of?

Three hex values.
Six hex values.
Twelve hex values.

Question 2: How many characters does a hex triplet consist of?

Three characters.
Six characters.
Twelve characters.

Question 3: What color is represented by #AAAAFF?

Dark blue.
Bright red.
Light blue.

Question 4: What are two examples of tags that can incorporate hex triplets?

The <BODY> and <HEAD> tags.
The <HEAD> and <FONT> tags.
The <FONT> and <BODY> tags.

Question 5: Which hex triplet represents the color black?

The #FFFFFF hex triplet.
The #AAAAAA hex triplet.
The #000000 hex triplet.

Now that you have completed the Quick Quiz, please press the Submit button to see your results. If you would like to restart the Quick Quiz, press the Clear button. If nothing happens when the Submit button is pressed, your browser does not support JavaScript. In this case, you should click here for the answers.

Example Page
The Example button below will take you to an example page. This mini site demonstrates all the concepts learned in the first five chapters. This site is designed to be a social studies class home page. Please look through it to see how all the aspects of HTML are brought together.

We encourage you to view the document code by selecting Document Source from the View menu. Keep in mind that this is not a real site and we have kept it very simple in order to show the HTML techniques as well as possible.

Example
Continue the Tutorial
Please click the Next Chapter button below to advance to the next chapter.
Next Chapter