|
 Background and Text Color |
|
|
|
|
|
Background and Text Color |
|
|
Specifying a background color:The body color for this page is set for white. This is done by adding:
BGCOLOR="#ffffff"
to the body tag at the beginning of the html document. The actual source code that begins this page looks like this:
<HTML><HEAD>
<TITLE>Color Tags</TITLE> </HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000"
LINK="#0000ff" VLINK="#006600" ALINK="#00ffff">
The ffffff in the BGCOLOR tag is a series of hexidecimal numbers. Computer folks are used to using letters for numbers but the rest of the world is not. Here's a brief summary of how this color system works followed by some "pre-mixed" colors.
Color is specified in HTML by amounts of the three primaries:
red, green, and blue
In the above ffffff example, there are actually three pairs of numbers, one for each of the primaries:
ff, ff, and ff
In the hexidecimal number system, ff is the highest two-digit number (equivalent to 255 in conventional numbers) so ffffff means that:
Red is set for ff (which is maximum)
Green is set for ff (which is maximum)
Blue is set for ff (which is maximum)Basic Color Theory:
If the setting at the beginning of this HTML had been BODY BGCOLOR="#000000" (all three primaries set to zero) the background color of the page would be black and this text would be pretty hard to read.
Using these principles, the following settings would give the listed background colors:
BODY BGCOLOR="#000000" = black
BODY BGCOLOR="#ffffff" = (white)
BODY BGCOLOR="#ff0000" = red
BODY BGCOLOR="#00ff00" = green
BODY BGCOLOR="#0000ff" = blue
BODY BGCOLOR="#ffff00" = yellow
BODY BGCOLOR="#00ffff" = cyan
BODY BGCOLOR="#ff00ff" = MagentaBODY BGCOLOR="#999999" = gray
BODY BGCOLOR="#cccccc" = light gray
BODY BGCOLOR="#333333" = dark gray
BODY BGCOLOR="#660000" = dark red
BODY BGCOLOR="#006600" = dark green
BODY BGCOLOR="#000066" = dark blue
BODY BGCOLOR="#ffcccc" = light red
BODY BGCOLOR="#ccffcc" = light green
BODY BGCOLOR="#ccccff" = light blue
Note that these colors are all made up of 00, 33, 66, 99, cc and ff. Limiting your colors to combinations of these six choices (referred to as the web-safe palette) is necessary to insure that colors selected will display the same on multiple computer platforms and systems. (Depart from this rule and web designers will think you're a rank amateur.) If you don't get this hexidecimal number stuff, or you're just not inclined to deal with it, use this web-safe color chart to select your colors.
Specifying text color:Changing the color of text is similar to changing the background color and the color of links can also be specified. To do this, the following tags are added at the beginning of the HTML:
<BODY BGCOLOR="#ffffff" TEXT="#990000"
LINK="#0000ff" VLINK="#006600" ALINK="#00ffff" >These tags specify:
| BGCOLOR="#ffffff" | Body background color is white |
| TEXT="#990000" | Text color is medium red |
| LINK="#0000ff" | Unvisited links are blue |
| VLINK="#006600" | Visited links are dark green |
| ALINK="#00ffff" | Active link is cyan ("Active" refers to the color of the link while a viewer is clicking the mouse on it - this is supported only by Netsape browsers.) |
Changing the link color also changes the color of borders and highlights around image links:
Though not supported by older browsers, newer browsers make it possible to create rainbow - colored text...
(The only thing stopping you is good taste.)
This feature is implemented as an attribute of the FONT tag:
<FONT COLOR="#ff0000"> Red </FONT>
<FONT COLOR="#00ff00"> Green </FONT>
<FONT COLOR="#0000ff"> Blue </FONT>
Select colors carefully -The default color settings of web browsers may seem boring but they have one big advantage: they are easy to read.
Also, although the ability to change the color of links and text allows the page author considerable flexibility in design, it also creates the possibility of making text that looks like links and links that look like non-linking text - very confusing to viewers.
Web page designers should be careful when selecting text and background colors that the results do not impair readability or confuse navigation (page probably shouldn't look flat-out ugly either). The aim of web page design is to create a space that is visually inviting and easy to navigate - not one that will confuse viewers or drive them away.
