Purple, Blue, and You

Robert Andrews
February 17, 1999
10th, 11th and 12th Grade
Introduction to the Internet

Materials Needed:
Whiteboard and markers, computer with a word processor, web browser, and Internet connection for reference material linked from the teacher's web site.

Time Needed:
One forty-five minute class period.

Behavioral Objective:
10th, 11th and 12th grade students will apply their understanding of how the RGB color system works to produce three web pages, each with a different set of colors for the background, text, links, and visited links.

Rationale:
In today's technologically advanced world, the Internet, especially web pages, are key to business. By knowing what is needed to create web pages, the students will have an easier time in the future creating web pages.

Objective:
Web page colors are all based on the RGB Color system. It is therefore very important to understand why items are the color that they are on the screen.

Procedure:
First the RGB color system will be explained on the whiteboard. The breakdown into the Red, Green, and Blue components, each having a value from 00, nothing, to FF, full. The RGB simply tells the browser how much of each color to show on the screen. Hexadecimal is simply another way of counting. Normally, we work in what is called base 10. This means we have 10 numbers to work with, 0 to 9. Hexadecimal simply means hex, or six, and decimal, or 10. Add them together to get base 16. This means we have the numbers form 0 to 9, plus 6 more, which are called A to F. Thus, in base 16 counting, we have numbers from 0 to F. Why this change? In base 10, we have only 100 possible numbers per color with two digits. With three colors, that is only 1,000,000 color combinations. With hex, we have 256 possibilities for each color, and with three colors, we now have 16,777,216 color choices! When adding in base ten, when we get to the top number, i.e. 9, we increase the second column from 0 to 1, and reset the first column to the smallest value, 0. In normal base 10, we count "0 1 2 3 4 5 6 7 8 9 10 11 etc." where in base 16 we count " 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 etc." The whole class will discuss the process of mixing colors. We start with three colors, red, green, and blue, and can mix any color out of these. For example, if we wanted a purple, we would use some red, some blue, and no green. With our range from 00 to FF, we might want 88 red, BB blue and 00 green, or in RGB 8800BB, simply putting the red code, then green, then blue. From there, the teacher will distribute a file which is the basic shell of a web page, since the students are not at the level of creating their own yet. The students will open the file in a word processing program. They will then have to experiment with changing and setting the colors in the page. On the web page they will state what color they are trying to mix and the code they thought of for that color. The colors are those for the background, text, links, and visited links. These codes are found in the body tag, <body bgcolor="#000000" text="#FFFFFF" link="#0000FF" vlink="#5500FF">, where the students need to replace the color codes. The teacher will maneuver through the classroom to observe the students. Students will be required to turn in the disk with the different files saved on them. The students will also fill out an electronic exit slip at the teacher's web page listing what colors they decided to try to mix and the codes they came up with. Students will also be pointed to the teachers web site at http://www.RobertAndrews.com to find more information on how to mix colors as well as color charts and interactive mixing programs.

Extensions:
Students could be guided from here into how to use graphics instead of solid colors for background. Also, there could be an exploration of cascading style sheets (CSS) or JavaScript on how to change colors of different items in a more complex manner.

Submitted By: Robert Andrews
Address: 6801 North Yates Road, Milwaukee, WI 53217
Email Address: Robert@RobertAndrews.com, http://www.RobertAndrews.com

Back