Understanding Color Settings
A Brief Rundown of Numbering Systems
For the most part, the world works on a base-10 numbering system, meaning that counting up to the number "9" involves one column, but then you adjust to two columns to keep track of "tens". Considering the number of toes and fingers the average person has, it's easy to understand why we use 10 as our basis for counting. There are other numbering systems such as base-2 (binary) and base-8 (octal) that count differently. For instance, octal digits are 0-7; when you count 8, it is represented in octal by 10.
Hexidecimal is the numbering system used by HTML for many purposes, most notably to keep track of colors. In hexidecimal, digits go from 0 to F before looping to the next place column. Confused? Maybe this table will help...
Numeric Systems
| Decimal Value | Binary | Octal | Hexidecimal
| 0 | 00000 | 00 | 00
| | 1 | 00001 | 01 | 01
| | 2 | 00010 | 02 | 02
| | 3 | 00011 | 03 | 03
| | 4 | 00100 | 04 | 04
| | 5 | 00101 | 05 | 05
| | 6 | 00110 | 06 | 06
| | 7 | 00111 | 07 | 07
| | 8 | 01000 | 10 | 08
| | 9 | 01001 | 11 | 09
| | 10 | 01010 | 12 | 0A
| | 11 | 01011 | 13 | 0B
| | 12 | 01100 | 14 | 0C
| | 13 | 01101 | 15 | 0D
| | 14 | 01110 | 16 | 0E
| | 15 | 01111 | 17 | 0F
| | 16 | 10000 | 20 | 10
| |
|---|
Most of you who are reading this are probably doing so from a computer using Microsoft Windows. Thanks to the standard accessories, you can use the calculator to do conversions for you. Open the calculator application and choose the "Scientific" view. Enter the number you want to convert, then click the radio buttons on the upper lefthand section of the calculator keypad; the default is decimal, but by simply choosing 'binary' or 'hex' you can see the resulting conversion.
Why Do I Need to Know the Geeky Stuff?
The hexidecimal (from now on, I'll just call it 'hex' like a real geek) numbering system is essential in understanding how colors are set in HTML. Color adjustment parameters take three hex numbers as arguments, one for each part of the RGB scale. RGB means 'Red, Green, Blue' -- forget what you learned in school about red, blue, and yellow being the primary colors -- these are the colors of light being produced by the "guns" in your TV and computer monitors, so this is the scale we need to work with. Each of the colors has an assigned value, from 00 to FF (0 - 255). By giving a combination of different values, you can produce the ever-impressive 16.7 million different colors (000000 is black, FFFFFF is white). I'm including samples below, but feel free to experiment...
| 000000 | 0000A1 | 0000B4 | 0000C7 | 0000DA | 0000EC | 0000FF
|
| 00A100 | 00B400 | 00C700 | 00DA00 | 00EC00 | 00FF00 | 00A1A1
|
| A10000 | B40000 | C70000 | DA0000 | EC0000 | FF0000 | D5962C
|
| 8D3BB4 | A1B4B4 | A1B4C7 | FFA1C7 | C7A1DA | A1A1EC | C700FF
|
| FFCC00 | CCFFA1 | 4ABBB4 | 5A6B71 | 9C7ADF | 2992AA | 92AA29
|
| 3ADBC9 | 43FFFF | FF48DF | 72AF99 | CADE69 | 1F33CF | 8D9CAB
|
Putting Colors to Work
Using Color in Your Pages
One of the most common uses of color is as a background for your pages. If you view the source of this page, you'll also notice that the color samples above were part of a table (don't worry, we'll get there...) and each sample was simply a different background color for each cell of the table. Color can be used any number of ways, but many of them are handled in the basic
tag.
Let me emphasize that these are by no means all the options available for the
tag, but some that will instantly spice up your pages:
RRGGBB is representative of the two-digit hex numbers for Red(RR), Green(GG), and Blue(BB). For example, the really bright violet cell above was set with BGCOLOR=C700FF.
- BGCOLOR will set a color for your page's background. Try to keep these lighter shades - not because you might scare someone away with gaudy colors, but so your text can be read.
- TEXT sets the default color of the text on your page, if you don't like the default of black.
- LINK indicates the color of unvisited hyperlinks you'll have on your page (we'll see those VERY soon).
- ALINK gives you the ability to look really high-tech. When a person puts their mouse cursor over a link, it becomes active, even if they don't click it. You can make it easier for a person to know whether they are clicking the correct link by making it stand out more when they hover over it.
- VLINK is the color applied to links that have already been used.
Setting Individual Text Properties
Although the tag has been deprecated, it is the most flexible way of altering text without the use of style sheets (which are covered in the advanced material). This tag is really nothing without the use of its parameter settings, which provide all the functionality of changing size and color of the font. A single tag can contain multiple parameters, but not conflicting values for the same parameter (i.e. Don't give two "SIZE" parameters, and especially not with different values). Here's a quick rundown:
- COLOR sets the color of the font. Remember your closing tag, or all your text from here to the end of the document will be this color!
- SIZE is a relative term. Font sizes are generally accepted as having seven sizes, with normal text being size "3". Larger numbers produce larger fonts, lower are smaller; zero, negative numbers, and numbers greater than 7 will have little or no effect.
An interesting sidebar is that you can add or subtract values rather than setting a specific size. "SIZE=+2" will automatically increase the text two sizes larger than the default, while "SIZE=-1" will make it the next size smaller than the default text size.
Either way works, so just use what you feel comfortable with.
- FACE puts you at the mercy of the fonts installed on the computer of the person viewing your page. You can list multiple fonts by name, as I have done in the example, but whether they show up on the viewer's screen or not depends on whether that user's computer has the font installed. Don't worry too much, though; if the fonts are not found, the default font is used.
Now that you have all these wonderful ways to display text and modify the way it looks, and since you know how to put colors into use, it's probably just getting you burning hot to make a series of web pages. There's just one problem: how do you get them to refer to each other? On the next page, we'll talk about linking pages and creating anchors.