HTML in Color

Now, we are ready to re-open our first.html file and make some colorful additions.

But first, we need to understand how web browsers handle color.

Text Colors and Color Basics 101:

In a web browser, you have a choice of 256 system colors for text and backgrounds. Each color is identified by its Red- Green- Blue (RGB) values, three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by different of RGB triplets.

However, rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue.

Here are some hex-code examples of different colors:

Pink FFCCCC Blue 3300FF
Green 33FF66 Red AA0000
Brown 663300 Purple 9900FF
Dk. Blue 000077 Yellow FFFF00
Lt. Grey EEEEEE Grey888888
Dk. Grey 444444 Black 000000

To make things easier, most current browsers support standard shorthands for these 16 colors. All you have to do is type the color name instead of the annoying hex-code.

aqua black
blue fuchsia
gray green
lime maroon
navy olive
purple red
silver teal
white yellow

So, let's add some color to our Bad Poem in the first.html file. First, delete the <h2> thru <h6> tags, and add the following:

<h1>A bad HTML Poem</h1>

<p><font color="red">This is my HTML page. There are many like it, but this one is mine...</font><br>

<p><font color="blue">Without by browser, by HTML is nothing;<br>
without my HTML, my browser is nothing...</font>

<p><font color="green">I must type quick and true, and develop web-based courses faster than my collegues...</font>

<hr><font color="yellow">who are trying to revoke my tenure...</font>

The result should look like this sample page

Index of topics next topic: Backgrounds