HTML Tutorial - Chapter 5: Changing Your Canvas

» Adding a Border

First, do you remember how to set your website's canvas? Let's quickly review.

First, you tell the browser to start processing HTML.


Then, you declare the head area, useful only (at this point) for your site's title.

My Site</title>

Next, you start the main part of your site - the <body> - put in your site's content - end the <body> and finally tell your browser to stop processing HTML.

My Site's Content

And that's the canvas! Let's practice quickly typing out a full site's canvas with any content you like in the space below. You'll need this before we can move on.

Now might be a good time to practice using images and links and different fonts to spice up the body of your site.

» Changing Canvas Properties

As you've no doubt seen from experimenting, the default background color of your website is white, the default text color is black, and the default link colors are blue and purple (blue for new links, purple for visited links).

We can change all this though by adding properties to the <body> tag in your canvas. Watch and learn.

First, let's change the boring white default color to an elegant gray.

<body bgcolor="#CCCCCC">

The code there will neatly change your site's default background color from white to #CCCCCC (which is light gray in Hex).

Now, let's change the default new link color to green and the default visited link color to orange. This can be done with the following properties...

<body bgcolor="#CCCCCC" link="green" vlink="orange">

Guess which property stands for "new link" and which stands for "visited link." It's not hard. ^_^

There's one other link type (besides new and visited) that exists. It's for active links. Active links only exist for a split second after you've clicked them. You'd use the property alink for active links, but they're not that important so we won't spend time with that here.

Other than specifying a background color, we can also specify a background image for your canvas. Images can be sourced in an absolute or relative sense. Here's an example:

<body bgcolor="#CCCCCC" background="">

As you can see, it's legal to specify both a background color and a background image at the same time. Your browser will simply load the color first and then paste the image over it. This is useful if you have a background image that will take some time to load. Just remember that they each use different tags. bgcolor for color and simply background for images. Now, just for fun, set up a page with the URL I linked above as the background... you can see, background images naturally repeat themselves over and over again to create a tiling effect. That's why you should approach background images in a very careful fashion. They can easily make your site unreadable.

The final property we'll explore is the default color of the text of your site. This can be changed with the following code...

<body text="blue">

Quite simple. But just remember that text that's not black or white (on a dark background) usually looks horrid. And don't make a horrid-looking site, please, there's enough of them already out there.

» Next Chapter

In the next chapter, we're going to introduce a powerhouse tag that will be absolutely essential to organizing your site.

You can't miss it.

Previous Chapter | Next Chapter