Make your own free website on
:: crazy8 #web_resources ::

The BODY Tag
Tutorial by
Mr. Baldy

Here's where the real fun begins. You've learned a few tags that don't really do anything, wtih the exception of the title tag, which can be powerful if used well. Now comes something that can change a page drastically, and with this tag, you define the atmosphere of your page. A good page must have a good set of attributes in the BODY tag, and you'll understand in a little while.

The document BODY indicates the start and end of the content of the page, and it comes right after the head. As you could probably have guessed, the tag is:


So after what we had in the last tutorial, this is what we have altogether:

<title>Your title</title>

All right. Here's the BODY tag's function. It controls the background (color or image), the normal text color, the link color, the visited link color, the active link color, and some other things which will be discussed later. But for now, this is what we are going to work on. First, you ought to know the system's defaults for the BODY tag which are as follows:

Background = White = #FFFFFF
Text = Black = #000000
Link = Blue = #0000FF
Visited Link = Purple = #800080 (I think)
Active Link = Red = #FF0000

Now, so then it wouldn't make sense to change only the background to black, because the other colors would not easily be visible, making the page not as good. You wouldn't be able to see the visited links very well, or the plain text at all, so, for instance, you could change the text color to white, and the visited link color to yellow, to make it easier to see. I hope you get my point. This is more of a design tip than HTML.

All know the body tag, and are ready to put the other stuff inside it...Here's how it works. Remember the example at the previous guide page like this?

<startelement EXTRA="X">Element Contents</endelement>

Well, this format is used, but can also be extended to this:

<startelement EXTRA="X" MORE="Y" EVENMORE="Z">Element Contents</endelement>

You can put as many extra attributes as you want, or that the tag allows. The first we will learn is if you want to change the background colors (Note, even if you are using the defaults, this is a good idea to write anyway) This is very simple, and all you have to do is this:

<body bgcolor="X">

X represents either a RGB value, such as "#000000", or a named color, such as "black", "white", etc. The value you put in for the BGCOLOR is always put in ""s. This would be an example if you wanted to makea page with a blue background, it would be this:

<body bgcolor="blue">

I hope you get my point. Now, we go on to the text color. It is almost the same thing, but with a different attribute name...of course:

<body text="X">

Where X represents a named color or an RGB value. The same goes for LINK:

<body link="X">

And visited link:

<body vlink="X">

And last, and definately least, active link:

<body alink="X">

As usual, the X represents anything you want, but must be either a named color or an RGB value, and must be enclosed in parenthesis. These all can be put together in one BODY tag, which can get you this:

<body bgcolor="X" text="Y" link="Z" vlink="W" alink="V">

For those of you who don't quite understand, the bgcolor is the background color of the page, the text is the normal text color, link is the normal hyperlink color, vlink is the color of a link you have already been to, and alink is the color of the link after you click it, but the page hasn't changed yet.

The next part gets a little more interesting. If you want to use an image for a background, there is another attribute you need to add:

<body background="X">

In this case, X is the location, or source, of an image file which can be used as the background for the document. If the image file is in the same directory as the document you are creating, you can just put this:

<body background="background.*">

Where * is the file format of the picture, and you replace background with the real name. If the image is in the directory above the one the document is, you would have this:

<body background="../background.*">

As you can see, ../ makes it search in the previous directory. Another way of having a background is if you know the remote location on another internet page of a background, where you would put it as this:

<body background="*">

Now that you've got that, here's something you need to think about. Some people are on SLOW computers. When they connect to your site, and you have a large sized background, they might take a while to load, but they won't be able to see your text and stuff while they're waiting, so here's a little trick:

<body bgcolor="X" background="background.*">

First, the browser loads the bgcolor, and then the background when it is finished loading. Ther best thing to do is to make the bgcolor almost the same color as the background image, so the user will be able to read while he/she loads the page. Another thing you need to remember is that people will have higher and lower resolutions than you, so please pick a background image that will look good on all resolutions. ONE LAST THING BEFORE WE MOVE ON...please...please...please don't use background images that are just photos or something. try to get a texture, which look good, or try to eliminate the "image overlap line" which lets you see where the image starts and then stops again...which does not look good, so take that into account when trying to make a page with backgrounds.

A neat little thing you can add to a body tag which effect the background's properties is this:

<body background="background.*" bgproperties="fixed">

That makes it so when you scroll down, the background stays in the same place...pretty neat and nice, but a little choppy when scrolling. FIXED is the only option for BGPROPERTIES though. Now that you have learned that...let's update our page:

<title>Your title</title>
<body bgcolor="black" text="white" link="blue" alink="red" vlink="yellow">

Now...a few last things you could add to the BODY tag as attributes...margins. Here are the attirbutes:

<body bottommargin="X" leftmargin="Y" rightmargin="Z" topmargin="W">

I hope you can figure out what these attributes mean...the margin on the bottom...the margin on the left...the margin on the right...and the margin at the top of the document. W,X,Y, and Z all represent a length in pixels.

There's one more thing...Scrolling. You can turn it off with this:

<body scroll="no">

But I don't recommend it.

Looks like you've finished the most important part of the page...GOOD JOB! Now you are ready for the next lesson...

<< back  |  top  |  next >>

. . . . . . . . . . . . . . . . . . . . . . .
All html, graphics, and javascript is © 1999 crazy8 #web_resources
All quake, quake 2, and quake arena content is © id software
All unreal content is © epic megagames, and half-life © valve software
Page designed by mr. baldy ( webmaster )


Free gfx
Design Tips