Formatting Your Web Site in HTML

After the tables tutorial you're probably feeling overwhelmed. This tutorial is fairly simple and should give you a bit of a break :-)

Here we'll deal with some web site formatting issues that we haven't discussed before, but that are, nonetheless, important. We'll begin with page backgrounds. If a color or image is not defined within an HTML document, your visitors' browsers would use a default color (usually gray or white) as the background for your web site. Typically, webmasters have a specific look in mind and would prefer to specify their own background color or image. HTML provides for this with add-on code that is actually a PART OF THE BODY TAG. Let's take a look at the code for specifying a background color for an HTML document.

An Explanation of the HTML

Placement : Background color specification MUST be placed WITHIN THE BODY TAG!

The Format : When you type your body tag, rather than placing the > right after the word body, type a space, the word bgcolor (this stands for background color), an equals sign, quotation mark, your desired color (ie. blue), quotation mark, >. This code tells your visitors' computers that the body of the HTML document should be colored per your specifications.

The BGCOLOR Tag : Remember, when you define your color that only 18 colors can be specified by name. Other colors must be called using a mathematical value to be discussed in a later tutorial. Also bear in mind that your page should be easily legible and at least fairly easy on your visitors eyes. In other words, no lime green backgrounds with orange text, please!

Let's take a look at what a page would look like with the code from the textarea above inserted. I've done this with a sample page. After you view the page (which will open in a new browser window), close it to return to this tutorial.

Notice that the page background was now blue. Also notice that this wasn't easy on visitors' eyes. Remember to coordinate your text and link colors with the background color you select. From time to time, webmasters may want to use an image as a background for their web sites. The code that creates this effect is quite similar to that of background color specification and also occurs directly within the body tag.

An Explanation of the HTML

Placement : The image specification for a background image follows the same placement rules as that of background color specification (detailed in the preceeding section of this tutorial).

Format : Rather than placing the > immediately after typing the word body, instead space, type the word background, an equals sign, quotation mark, the name of your image (image should be uploaded to the same directory as your files), quotation mark, >. This code tells your visitors' computers to assign the image you specified to the background of your HTML file.

The Background Image Tag : By default your visitors' computers will "tile" the image you specify within the body tag. This means the image will be repeated over and over (think a tiled floor with each tile being your image) as many times as is necessary to fill the entire page background.

Let's take a look at what a page would look like with the code from the textarea above inserted. I've done this with a sample page. After you view the page (which will open in a new browser window), close it to return to this tutorial.

Notice how the image has been tiled several times over to cover the full page. Again, make sure to adjust your font and link colors to go with your background image. Also be sure to select an image that will be a good background over which to put readable text.

If you had a favorite font, or just wanted to have control over the look of your web site you'd need the command to specify a specific font. The command is one you're familiar with. The font face tag from the. Go back and review it if you do not remember. Placing this tag directly under your body tag and not closing it will set this as the default font for your site.

Webmasters will almost always want to set a default font color for their documents, one that coordinates well with their background and provides easy readability and an eye-catching look for their site. Default font color is also set within the HTML body tag.

An Explanation of the HTML

The Default Font Color Tag : Set within the body tag by not closing the body tag with a >, rather adding a space, the word text, an equals sign, a quote, the color you'd like, quote, >. This command tells your visitors' computers to make the text within your HTML document the color you specify (special font color changes you make within the document will still be in effect).

Let's take a look at what a page would look like with the code from the textarea above inserted. I've done this with a sample page. After you view the page (which will open in a new browser window), close it to return to this tutorial.

We can also change the colors of the links within our site. HTML provides code for changing the colors of links and visited links (those pages that a person has already visited within your site), both within the body tag. Let's look at the code in the textarea below.

An Explanation of the HTML

The Link Tag : Placed within the body tag itself, the link tag appears by placing a space after the word body, the word link, an equals sign, quote, color name, quote, >. This tells your visitors computers to make all of the links within an HTML page appear the color you set.

The Visited Link Tag : Placed within the body tag itself, the link tag appears by placing a space after the word body, the word vlink (for visited link), an equals sign, quote, color name, quote, >. This tells your visitors computers to make all of the visited links within an HTML page appear the color you set.

Let's take a look at what a page would look like with the code from the textarea above inserted. I've done this with a sample page. After you view the page (which will open in a new browser window), close it to return to this tutorial.

Notice how the links appear yellow, as we set them. Were you to click on a link and return to the page, the visited link color of orange would appear. Keep in mind how few colors may be named by typing a color word.

You may be thinking at this point that you can only specify one item (font color, link color, background image, etc.) per document. In reality you can specify any number of attributes all within the same body tag.

An Explanation of the HTML

The Format Tags : All of the tags are the same as you've seen them earlier in this tutorial, just all with one space between them, and all within the same body tag. The effects they'd have on your page do not change by placing them together.