Home
Guestbook
E-mail me

It's all about the body

All right, now you've got a basic page: a few links, some images, and of course, text. But it's, I dunno, a little bland. I mean, for christ's sake, it's white! It's like a book. It's boring. It needs colors. Well, fear not my fine friend, as this section is dedicated to: the body command.

The body command

Now, we've talked about the body command. It encompasses every image, every word, and every link that makes your page. But the body command also includes a couple of attributes which are quite useful. The easiest of them all is "BACKGROUND". It defines the image which will tile on the background. Its value is equal to the URL of the image to be used. Here's an example:

<BODY BACKGROUND="/background.gif">

As I said, the image will tile automatically, so there's no need to make a really big image that encompasses all of your page.

Colors, colors, and nothing but colors

The next attributes will be using colors. In html, there are two ways to define color attributes: with Hex codes or with English words. English word colors are easy. There are 216 of them, and they can be found at http://www.pcnet.com/~jtimmons/basics/colorcodes.html. Hex codes are a bit tougher. They're RGB numbers written in base 16, and I won't bother to tell you how it works exactly. Here's an example: #FF5A32. The advantage with hex colors is that they are much more precise: you can choose from any of over 16 million colors. You can create your hex codes dynamically thanks to a great Java program called ColorServe Java. You can use it online at: http://www.ac.biola.edu/~brian/csapplet.html.

The Bgcolor and text attributes

Now that you know colors, this part should be easy. First off, we have "BGCOLOR", which defines the background color of your page. Here are two examples, one with hex code and one in plain English code:

<BODY BGCOLOR="#FF0000">
<BODY BGCOLOR="red">

Both of these will make the background red. You can use "BACKGROUND" and "BGCOLOR" simultaneously. This way, while the background image is loading your users will still be able to see your text even if it is the same color as the default browser background color setting.

With "BGCOLOR" comes "TEXT". This one sets, you guessed it, the text color. It's very important to set the text color according to the background color, otherwise your text will be unreadable.

Link colors

Now that your background and text colors are set, you might need to update your link colors. There are three different parts of the link colors you can set. Here's a table with everything you need to know about them:

Property name	Effective areas	Default browser color
"LINK"	Ordinary links	Blue
"ALINK"	Active links	red
"VLINK"	Visited links	purple

That's about it for link colors.

Review

So now you know all about changing colors in your page. Let's see an example using all the new attributes we learned about in this section:

<BODY BACKGROUND="/background.gif" BGCOLOR="#FF0000" TEXT="navy" LINK="orange" ALINK="red" VLINK="green">

That about wraps it up for this section. Stay tuned for new sections and more advanced stuff coming soon.