Tailgunner404

Basic Body

How to Make it Colorful

The <body> tag is the beginning of the real content of your Web Page. Here are some basic things that you can do using the "Body" tag.

First how about a background color for your web page? That is easy just add bgcolor="" to the "Body" tag of your page. In between the quotes of the bgcolor place either a hex code (eg #ffffcc) or you can use the basic red, blue, white that most browsers recognize. Keep in mind that browsers do come in many flavors and versions, YMMV.

<body bgcolor="blue"> Click Here to see how it looks. While there view the source code to see how it was done.

Here is the "Body" tag for that page. <body bgcolor="#0000ff" text="#ffffff" link="#80ffff" vlink="#ff8040" alink="#ffff00">

First we have the "body" statement telling the browser that this is a "Body" tag
Then the "bgcolor" attribute telling the browser what color the background should be.
The "Text" attribute tells the browser what color the text should be.
The "Link" attribute tells the browser what color to make hypertext links.
The "vlink " attribute tells the browser what color to make a visited hyper link.
Finally the "alink" attribute tells the browser what color to make an active hyper link.

Some key points to remember. First always place the color code inside quotes. Missing quotes or not having a completed pair of quotes will screw up the page big time! Be careful. If using hex codes don't forget the "#". You will wonder why the colors aren't what you wanted or aren't working...it is almost always the quotes or the "#".

Look at your colors in your browser when coding a page and be sure you can read the text with ease. Don't turn off your visitor with poorly chosen colors. Black can be an effective background color but pick colors that can be read.

How About a Background Image?

Sure no problem. Remember the <body> tag? Well it can contain an image pointer as well as a color.

The tag will look like this <body bgcolor="white" background="csnsbg.jpg" link="#008080" vlink="#990000" text="#000000">

Click Here to see how it looks.

The key here is to put the path to the image into the "Body" tag correctly. If your image resides in the same directory as your html file then it can go just as I have it above. background="image.jpg" but if it is in a separate directory the you need to set the path correctly. For example if you keep all of your images in a file called strangely enough, "Images" then the path would be "images/image.jpg" and the background attribute would look like this:
background="images/image.jpg" .

So if your images do not display check out the path statement in your "Background" attribute.

Click Here for next tutorial.

Where Do I Get Images?

There are any number of free background images available over the Internet. Please keep in mind that you should only copy those images that are offered as "Free". If an image is copy righted don't copy it without permission. All of the "Free" graphics sites have instructions on how to copy any image.

Here are a few of my favorite image - graphic sites. Yes I really like Boogie Jack's the best, that's why it's listed first. And yes the Open Directory is listed second because I am a Volunteer Editor. You could be one too! Get information about joining the Open Directory.

Please READ the terms of use for each site and follow their instructions. DO NOT direct link to their graphics from your web site. Download a copy of the image and save it on your hard drive. Then upload it to your server. This will help your site load faster and allow the free sites to remain free.

Click Here for next tutorial.

Return to Top

Click Here to Email Tailgunner404

Disclaimer

bgproperties="fixed"