HTML
Tutorial - Chapter 5: Changing Your Canvas
First,
do you remember how to set your website's canvas? Let's quickly
review.
First,
you tell the browser to start processing HTML.
<html>
Then,
you declare the head area, useful only (at this point) for
your site's title.
<head>
<title>My
Site</title>
</head>
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.
<body>
My Site's Content
</body>
</html>
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="http://www.founderweb.com/logo.gif">
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...
...as
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.
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 |