|
If Web pages all had
the same color, they’d get pretty boring pretty quickly.
You can change the color of your page’s background and of
text fairly easily.
All color changes are
made in the following format:
thing
to be changed = color name or six digit hexidecimal color code
EXAMPLE:
text
= #FF2200 will change the color of all the text on the page
to a bright red.
Four questions need
to be answered to explain the color changing process:
- Where do you make
these changes?
- What things can
be changed?
- What the heck is
a “hexidecimal code?”
- Why six digits?
Question
1: Where do you make these changes?
Color changes for the
background color and for the text in the page are made in the
<BODY> tag. They are actually written after the actual word
“BODY” but still inside the pointed brackets. (<
>)
Example:
<BODY TEXT= #FF2200>
Multiple changes can
exist in the same command. This method of adding “extra”
information to an HTML tag is very common. The “extra”
information is called a parameter.
Color changes can also
be applied, as we've seen before, with the <FONT> tag, using
the same 6-digit codes and color names. So, taking the same font
tag we've seen before, let's look at an example:
<font
size=5 face="Times" color=#FF2200>This is some text</font>
will
produce:
This
is some text.
Question
2: What things can be changed?
You can change any
of the following by using the appropriate parameter name:
|
Changed
Item
-
Text
in the page
-
Links
in the page
-
Visited
links
-
Active
links
-
Background
color
|
Parameter
Name
-
text
-
link
-
vlink
-
alink
-
bgcolor
|
"Links in the
page" are links the viewer has not clicked on or "visited"
yet. These appear in blue by default.
"Visited links"
are links to pages the viewer has already clicked on or "visited."
These appear in purple by default.
"Active links"
are links that the viewer is currently clicking on (it
will change color as it is clicked on until the viewer releases
the mouse button.)
Question
3: What the heck is a hexidecimal code?
“Hexidecimal”
is a counting system computers use. Instead of having a ten digit
counting scheme like humans use, computers sometimes use a sixteen
digit counting scheme. This is called “hexidecimal”
(the ten digit counting scheme is called decimal)
Hexidecimal
digits are: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Therefore: a “six
digit hexidecimal code” could be anything from 000000
to FFFFFF, with “000000” being the lowest possible
value and “FFFFFF” being the highest.
Question 4: Why six digits?
Computers make colors
up by using three basic colors in differing amounts: Red, Green,
and Blue. (You may have heard of an "RGB Monitor." RGB
stands for Red, Green, Blue)
What a “color
code” does is to tell the computer how much of each basic
color to use to make up the final color.
Looking at this code:
FF
22 00
The first two "digits"
(FF) tell the computer how much "red" to use. The next
set of two digits tell the computer how much "green"
(22) to use. The last three digits tell the computer how much
"blue" (00) to use.
What this code tells
the computer to do is to create a color using the maximum amount
of red, a little green, and no blue.
Some
Basic Color Codes
#000000 = Black (No Red, No Green, No Blue)
#FF0000 = Red (Max Red, No Green, No Blue)
#FFFF00 = Yellow (Max Red, Max Green, No Blue)
#00FF00 = Green (No Red, Max Green, No Blue)
#00FFFF = Cyan (No Red, Max Green, Max Blue)
#0000FF = Blue (No Red, No Green, Max Blue)
#FFCC00 = Orange (Max Red, Some Green, No Blue)
#AAAAAA = Gray (Equal Amounts Of Each)
#FFFFFF = White (Max Red, Max Green, Max Blue)
An
Example of color changing: What Will This Tag Produce?
<BODY
BGCOLOR=#000000 TEXT=#00FF00 LINK=#FFFF00 VLINK=#FFFFFF ALINK=#FFCC00>
Answer:
This tag will produce
an HTML page with green text on a black background. Any links
not already clicked on or previously visited will appear in yellow.
Any links previously visited or already clicked on will appear
in white. Any link a user holds the mouse button down on will
appear in orange until they release the mouse button.
Let's see if this actually
works. Open your web page code and replace the <BODY> tag
with the tag listed above so that your web page code looks like
this:
<html>
<head>
<title>My First Web Page</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#00FF00 LINK=#FFFF00 VLINK=#FFFFFF
ALINK=#FFCC00>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
<H1>This is going to be big text on its own line.</H1>
<font face="Arial" size=5>This will be almost
as big, and in Arial font!</font>
<br>
<div align="right">This should be on the next
line and on the right side of the screen.</div>
<br>
<center>This should be centered text.</center>
<br>
<br>
<hr width=75% size=6 align="left">
<br>
<br>
<br>
<div align="center">So should this, but several
more lines down the page.</div>
<br><br>
<a href="http://www.tmlp.com">Click here to go
to the TMLP Home Page.</a>
<br>
<br>
<ol>
<li> <font size="5">Text 1</font>
<ul>
<li><i>Text 1a</i>
<li><u>Text 1b</u>
</ul>
<li> <font size="7">Text 2</font>
</ol>
</body>
</html>
Now load up your web
page in your browser. It should look something like this:
You'll note the link
to the TMLP home page appears in white (FFFFFF). This is because
we've already visited the TMLP home page in a previous development
on the web page.
Is it really necessary to remember all those hexidecimal codes?
No, not with more recent browsers. They allow the use of color
"names" instead of codes for a lot of different color
combinations. The names should be written with quote marks around
them.
(For
example, to make a body background red, instead of typing <BODY
BGCOLOR=#FF0000> you could type <BODY BGCOLOR="RED">)
The
following "names" can be used to substitute for color
codes. Do not put any spaces between words in any that contain
multiple words (such as "AntiqueWhite" It will
not work if you type "Antique White".
|
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
FireBrick
FloralWhite
ForestGreen
Gainsboro
GhostWhite
|
Gold
GoldenRod
Gray
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGray
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
|
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
VioletRed
Wheat
White
WhiteSmoke
Yellow
YellowGreen
|
(Note: These names can also be used for <FONT> tag color
changes.)
Up next,
we're going to move on to putting images onto your web page.
|
