HTML for the complete beginner

Backgrounds

We have seen how to set up the basic web page, and how to add text and font effects, now we can add some color to it via a background image and/or background color.

We add the codes for the background image and/or background color in the <body> tag.
For a background color, we use the 'bgcolor=' and for a patterned background we use 'background='.

This is the HTML method, the XHTML method is via CSS

<body bgcolor="#ffffff"> - gives you a colored background (RGB colors)

<body bgcolor="#000000" background="pattern.jpg"> - gives you a patterned background. (Tiled image)

Note: We should always use the bgcolor when we want a patterned background incase the background doesn't display we see the bgcolor. The pattern will always over ride the bgcolor tag.

The tags and tag names should be lower case while the RGB color can be upper or lower case, but the 0 is a number, not the letter.

Here is an example of how a pattern loads without a bgcolor, it tiles or repeats itself over and over until the page is covered, this happens so fast you wouldn't actually see it happening.

For this pattern to be used a light font color would have to be used, like white or grey, if the background didn't load or took forever to load you wouldn't see any text. If the bgcolor was set to black (#000000) or dark blue (#000080) and font set to white (#FFFFFF) we would still be able to read the page while the background was loading.

The #number is the RGB color, we use these to tell the browser which color we want, there are 216 browser safe colors (Which can be found on the "Color chart" page), the # has to be included before the RGB code, just like we used with the font tags.

RGB is what colors are made out of - Red, Green, Blue

Background images tile through out the page, to make a side bordered background it's best to make the image at least 40 pixels high by at least 1300 pixels wide, remember we are making this for ALL size screens.

Animated backgrounds aren't advised as they make it hard to read, plus are usually slow in loading, remember it's the content of your site that you want people to see, not what fancy graphics you could find on the web. Some people surf with graphics turned off, so don't rely on your background or graphics for anything important. We'll see more on this later.

Fixed background images can be fun. What is a fixed background? It's a background that's fixed :), it just sits there while the contents of the page move up and down which can give a nice effect if the background image is suitable. Never use 60's style patterned backgrounds with this trick as it makes reading the content hard. This is sort of going against what I want to do, make it work on all browsers ... But here is a little trick for the Internet Explorer AND Netscape fans, a fixed background, Netscape doesn't support Internet Explorer's version, so a Style sheet (CSS) is needed to do the same. This works on most versions of the above mentioned browsers but not all. Here is the code for the fixed background:

<html>
<head>
<title>title goes here</title>
<style type="text/css">

</style>
</head>
<body>
page contents here
</body>
</html>

This works in version 5 and up, NS4.7 will display the background image but wont fix it. I should point out this is just one of the many "thrilly" things that can be done with HTML, it has no real purpose.

To set up a left bordered background the best way is to use a table with an invisible spacer with a pre-made image or we can just color the left table cell (see the Tables section for more on this).

Here is the spacer, it's invisible so you won't see it, but it's there. I put a big border around it so you know where it is. Right click and save as into your web page folder.