The Wonderful World of Color

Arachnophilia New Page Popup

Color often first comes into our pages with the <body> tag. Let's look at the qualifiers here:

bgcolor="#ffffff" : Background is white

text="#000000" : Normal text is black

link="#0000ff" : A "virgin" link is blue

vlink="#800080" : A link you've visited is this shade of purple. "v" for "visited."

alink="#ff0000" : The link you you are about to visit or just visited is red. "a" for "active."

Those are the default colors, so there are no surprises. Arachnophilia prompts you to select colors with a new page

So what do those funny letters and numbers mean, I hear you not saying? Well, what they actually are is a set of three numbers in base-16 or hexadecimal ("hex" for short.) The three values in order are red, green, and blue, running from 00 to ff (0 to 255), which allow for "true color", more than 16 million different tones. You may not even be able to see them all; I keep my machine set for "High Color" which allows for only 65,536 displayed tones.

You don't have to put anything inside the <body> tag--in fact, if you are doing a story for Fanfiction.net in HTML (which I recommend), that's exactly what you want there--nothing. If there are no values for colors in here, the system is free to change them. You can do this yourself with Netscape or Internet Explorer, but I never fool with mine.

How to Pick Colors

You can select colors for several things on a page: the background of the page, the background of a table or part of a table (which is how you pull off a lot of simple effects) and, of course, text. I don't know a way to change the link colors inside a page, except by using a frame, which is really a way to show more than one page on the screen at once.

Let's change a color using Arachnophilia. First, a word:

Orange

Which is done with:

<p><font size="5">Orange</font></p>

We'll talk more about fonts later, but right now we'll concentrate on color. Right now "Orange" is in the default color, probably black. Now, I highlight the word, bring up the "Font" bar, and press the "Color" Button, and the box to the right comes up. I click on the second orange down and I get:

<font size="5"><font color=#ff8000>Orange</font></font>

Which displays:

Orange

But there's more than one way to say "orange." Let's look at some different code. Does it all produce the same result for you?

Orange     <font size=5 color=#ff8000>Orange</font>
Orange     <font size=5 color=ff8000>Orange</font>
Orange     <font size=5 color=orange>Orange</font>

Hmmm, that last one surprised me--it's a lighter, brighter orange. Anyway, your decent browsers will recognize some common color names. I've done so much of this I've memorized the important color codes, so I don't use the names any more.

Anyway, I'm going to make up a custom color now. I'll start out by typing this in. I could have just typed in "Custom Color" and used the "H1" and the "Font","Color" buttons, but I just decided to do it more by hand here. If you can type reasonably well, typing is often faster than going through a lot of mouse-clicking for simple things.

<h2><font color=>Custom Color<font></h2>

Now I put the cursor right after the equal sign, press the "Graphics" button on the bottom of the screen, and press the "EditColr" button on the new bar that comes up. I get the familiar dialogue. This time I press that big long button and up comes:

After fooling around a little, I selected the second custom color I made, a sort of subdued teal. BTW, this is exactly the same box that comes up eventually when you do the gymnastics to select a custom color in FrontPage Express--it's an accessory buried in one of the many .dll files that make up Windows.

<h2><font color=#09caca>Custom Color</font></h2>

Which gives:

Custom Color

Ta-da!

Back to the HTML index.
Back to the first page. On to the next page.
Hosting by WebRing.