
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 fortyfive 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
© Copyright
Robert Andrews
All pages, scripts, and graphics.
