The body tag sets the basics for the body text of your document. Those basics are background, bgcolor, text, link, vlink and alink. Let's look at these separately.

background
The background refers to an image that can be used for a background. It should be mentioned here that background images are generally very small, that is about 60 x 60 pixels or smaller. Think of it as something like a postage stamp size. The background image repeats itself through the entire document so that the entire page is covered in the background image. There is no mandatory size for a background. I see lots of them on clipart sites and the like that are available, and lots of them are created at 60 x 60 pixels. A 5 x 5 pixel image would accomplish the same thing, although perhaps with less detail.

Let's use this image and have a look at how things work out. If you're experimenting with things as we progress (good!) you can save this image to your machine by right clicking on it, and then selecting *save image*. Save it as background0.gif. Here is some code using the <body> tag to set a background image. We'll use the page we've created already.

<html>
<head>
<title>My First Web Page :0)</title>
</head>
<body background="background0.gif">
My First Web Page! :0)<br>
</body>
</html>

Here is what this would look like:

My First Web Page! :0)

Voila! An instantly colored page! WOW! ... I shouldn't have to say this but these little examples are simply "reproductions" of what the real web page would look like. The real page would take up your entire screen all by itself. You should open up NoteTab (or whatever you are using) and copy/paste these little chunks of test code yourself, and then viewing the lessons. Follow along with participation and you'll get this down in no time.

OK, let's take a look at a background that is a little more than just color. This is a nice image for a web page. I say it's nice because it's quiet. It doesn't scream out at you and you can read the type on the page. It blends together without showing seams so it indeed does look like a backdrop or background. When I created this particular image I tried to make it look like a piece of linen paper.

<html>
<head>
<title>My First Web Page! :0)</title>
</head>
<body background="background1.gif">
My First Web Page! :0)<br>
</body>
</html>

Here is what that would look like:

My First Web Page! :0)

The above is a good background. It meets all the requirements of being seamless, of a color that allows the type on the page to be read and it's not distracting. It's also small (60 x 60 pixels) which is a good thing.

Let's take
another background
and see what
happens with it.

<html>
<head>
<title>My First Web Page! :0)</title>
</head>
<body background="background2.gif">
My First Web Page! :0)<br>
</body>
</html>

Here is what that would look like:

My First Web Page! :0)

Hmmm ... what on Earth is that you may have said. I've thrown this in just to demonstrate the repeat feature of the background part of the body tag. You've seen this type of background on the web before. It's used constantly. It's a great background idea, a margin on the left that's a different color than the rest of the page. It's a good place to put a list of links or your navigation bar. But hey, what's up with this one? Well, this graphic isn't as wide as where it is being displayed. Consequently as it repeats itself that nice useful left margin shows up again and again across the page. I bring this up so that you can see exactly how backgrounds work.

To use this type of background image you need to create it so that it will cover the entire monitor screen. Screen resolutions vary. Resolution refers to the number of pixels across the screen left to right and top to bottom. Today, most screen resolutions are set to 800 x 600, but larger monitors may have even higher resolutions. The above image is 350 x 60 pixels. I have recreated it making it 1600 x 60. As you'll see we now have a left margin of one color and the rest of the page another color. Note here that even though your monitor is probably set to 800 x 600 this image displays properly. The extra 800 pixels of that image (it's 1600 wide) simply extends into cyberspace past the limits of your screen. It won't repeat the left margin again, unless your monitor has a resolution set greater than 1600 wide.

It's worth noting here that if this was a normal graphic, that is a logo or photograph or whatever, you'd get a horizontal scroll bar across the bottom of the screen so you could view the entire graphic, but not with a background. Backgrounds just fill your screen to it's maximum resolution.

Here is how this background should look.

My First Web Page! :0)

You can find many web sites that have backgrounds for you to use for free. You can search the web for them, or visit my ClipLinks. ClipLinks is a mini directory of Clip Art sites. Click on "Backgrounds" and you'll get a list of sites offering backgrounds for you to use. There are some backgrounds at ClipLinks for you too.

bgcolor
Background color. This one is easy. <body bgcolor="#ffd0d0">. That's all there is to it. The code's for colors are hexidecimal and are used as #xxxxxx where x is a number or letter code that translates to a color.

Here is what that would look like:

My First Web Page! :0)

It's nice, but how on Earth do I know what "#ffd0d0" means, or how do I find out what code to use for Blue?

This is a place where you need to use a chart. There are many charts around. There are many monitors around. There are PCs and there are MACs. None of which display colors the same. It's a losing battle quite frankly. You can't be perfect here. This is one good reason to stay with plain 'ole white for your pages. But that's boring huh!

Here are links to three color charts. Each a bit different. All useful. The second one claims that it is "color safe" meaning those colors will display correctly on any computer whether it is a MAC or PC. Who knows! I don't believe a bit of it. Best idea is to limit colors to a minimum and then check them over and over again on every computer you can find. Visit your friends and see what your pages look like on their machines. Check the local library too. Schools. Everywhere you can think of. You'll find the biggest differences between the PC and MAC. Chart One - Chart Two (Color Safe) - Chart Three. These links are also on the left nav panel on each page of this tutor.

text
You won't have any problem with text or the link parts of the <body> command 'cuz they work the same as the bgcolor does. Text defines the base font's color on your page. So if you wanted all your type to be blue, you'd code the page with the hexidecimal value for blue (#0000ff).

<html>
<head>
<title>My First Web Page :0)</title>
</head>
<body text="#0000ff">
My First Web Page! :0)<br>
</body>
</html>

Here is what that would look like:

My First Web Page! :0)

link
We haven't got into links yet, but since the attributes for them can be controlled by the <body> tag we will look at that part of a link. Link refers to the color of the text that is a link. A link as you should know, is some text that when clicked takes you to another web page, or sometimes sends an email. It's default color is blue, which is probably the way to leave it. Most web pages are this way. People get used to things being one way, and many newbies will not understand that your link is a link if it's not in blue. They may well never even find it if it doesn't look just like every other link they've ever seen.

However, there are some times when you'll want to change this. Go ahead and be creative if you like, it's OK, but bear in mind, that your links will not look like normal links on Web Pages and some newbies won't know what they are. Well, about time for them to learn huh! Notice that on the navigation bar at the left of this page I have set the colors to something other than the default. Can you tell which links you've clicked on and which you haven't visited yet?

vlink
Visited Link. The default color is red. This is the color a link will be when you return to the page after clicking on it. It's very useful to visually see which links you've already visited and which you haven't seen yet. Some webmasters will set this to the same color as the link. I don't like that practice, although I've done it here in this eBook and it is done with some regularity all over the web. When that is done you can't tell which links you've already clicked on and visited from the ones you haven't.

alink
Active Link. This doesn't seem to work on Netscape Navigator. This is the color that the link will be while you click on it. I have fun setting this value to the same color as the background. When set this way the link appears to disappear when you click on it (only to return to the vlink color as soon as you release the mouse button). This is more profound if you click the link and hold it ... not letting go of the mouse button. Of course you won't go to the link until you do let go!

Here is an example <body> tag specifying black body text, blue links, red visited links, white active links and a white background.

< Previous: Utter Basics — Next: Headings >

Daily SEO Tips eMail
SEO Blog
SEO Training
SEO Basics 101 eBook
Learn All the Basics to SEO

8153 / 051006 / 302129