Lesson 3. Using colors.
Jazz up your Web page with great looking
C
O
L
O
R
S.
There is absolutely nothing wrong with plain black text on a white background. That having been said
however, how many exciting or really appealing Web pages have you seen that haven't used a splash of color
or two?
Hexadecimal colors.
Before we start to use different background or text colors, the basic concept of the hexadecimal system and color hexcodes needs to be understood.
A Web page's background or text color is defined in six digit codes called color hexcodes, created using the hexadecimal scale.
This scale is based on 16 digits that starts at 0 and ends at f. (Hang on, don't groan yet!) The letters are only added after the nine because the hexadecimal scale is based on a 16 'number' system and we only have 10 characters in our normal counting system.
Why 16 digits? Buggered if I know! Some 'techie-type' made it up I guess!
Compare our normal counting system with the hexadecimal system.
| 0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
| 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 |
|
Letters a-f are simply substitutes for 10-15.
"0" represents the darkest hues. (or absence of color)
"8" represents medium hues.
"F" represents the brightest hues. (or full color)
Q1.What color do you think "000000" is?
Guess, then click here to see if you were correct.
Q2.What color do you think "FFFFFF" is?
Guess, then click here to see if you were correct.
Each color code has 6 digits.
Basically 3 pairs of numbers.
| 1. The 1st pair represents the amount of red in your color. |
| 2. The 2nd pair represents the amount of green in your color. |
| 3. The 3rd pair represents the amount of blue in your color. |
| "FF0000" | FF as the 1st two digits will result in the brightest red possible. |
| "00FF00" | FF as the 2nd two digits will result in the brightest green possible. |
| "0000FF" | FF as the 3rd two digits will result in the brightest blue possible. | |
Check out the following combinations.
| "FFFF00" | Full red and green for the brightest yellow. |
| "FF00FF" | Full red and blue for magenta. |
| "00FFFF" | Full green and blue for aqua. |
| "000000" | Total absence of color to get black. |
| "FFFFFF" | Full red, green and blue for white. | |
16 Basic colors.
black
gray
aqua
blue
magenta
green
lime
maroon
|
navy
olive
purple
red
silver
teal
yellow
*white.
|
|
|
WARNING : Not all computers will recognize these 'named colors.'
Some browsers don't recognize these color names, so it is probably better, (or at least safer), if you use each color's 6 digit hexcode when changing the colors on your page.
|
Change background color.
Now you have a little background on the different colors,
it's time to get colorful and escape the boring 'black and whiteness'
we have been dealing with so far!
Do you remember the html codes I showed you in lesson 1 to create a basic page framework?
Familiar stuff huh!
<HTML>
<HEAD> <TITLE>
My funky title.
</TITLE></HEAD>
<BODY>
My very moving poem that I want to show the world.
</BODY>
</HTML>
|
|
The html code that will change your page's background color
needs to be inserted in the BODY TAG of your document.
When choosing one of the 16 named colors the command looks like this :
<BODY BGCOLOR=color name.>
eg.<BODY BGCOLOR=white> or <BODY BGCOLOR=green>
Note : Some computers won't recognize these color names!
When using a hexadecimal color code, the command looks like this:
<BODY BGCOLOR="#123456" >
Note: 123456 can be any combination of numbers (0 to 9) and letters
(A to F) from the hexadecimal counting scale explained earlier.
|
|
Change font color.
If you can change your background color,
then of course you can also change the color of your letters and
particular sections of text. Remember when we changed the font size and style in lesson 2?
Well, all we are going to do now is change its color.
When choosing one of the 16 named colors the code looks like this :
<font color=color name>
Some examples are:
- <font color=blue>Blue</font>
- <font color=green>Green</font>
- <font color=aqua>Aqua</font>
- <font color=lime>Lime</font>
- <font color=orange>Orange</font>
Note: Not all computers recognize color names.
|
When using hexadecimal codes to change text color, the code looks like this :
<font color="#123456">
Some examples are:
- <font color="#0000ff">Blue</font>
- <font color="#006633">Green</font>
- <font color="#66ffff">Aqua</font>
- <font color="#00ff00">Lime</font>
- <font color="#ff6600">Orange</font>
Note: Some monitors can't show all shades of color.
| |
The hex codes provided in the earlier tables
are generally considered 'safe' to use.
Set background/text color
at the start of your page.
*You can set your page's background and text color at the very start of your page.
*You can include your background and text color settings together in the one body tag!
*If you don't set your text's color, you can probably assume it will be black.
*It is better to set your text color as some computers might not see it if you don't.
*You can use hex codes or color names to determine your text and background colors.
Note:
- Some monitors can't show all the possible shades of color.
- Once you've set your background and text color in your BODY TAG, you can then go on and change the color of individual letters, words or sections of text by setting your color in the FONT TAG.
- You must never forget to finish your font instruction by inserting the end FONT TAG </font>
| * | You can also set the color of your links. |
| * | We haven't discussed links yet but that's coming up real soon. |
| * | I suggest you go away now try some different color combinations. |
| * | Also, don't forget to use the other tags you've learned so far. |
| * |
Try to write
K
I
M
B
E
R
L
Y.
in multicolored letters that's bold, italicized and in font size '5'.
Wanna see my multicolored Kimberly's code. |
| * |
Try making a page with a green background and a yellow caption. |
To the top
Go back to lesson 2.
 Go to the next lesson.
 Back to index page.
Thank you for visiting this page
Click to peruse our SpinNet Homepage.
Page created by Kimberly Rigby. / For any comments or questions, click here!
|
