Setting Color Options and Using Horizontal Rule Lines

Now that we've got the skeleton of our webpage laid out, we need to decide how we want the page to look. While there's no absolute need to play with the colors or add a background image, or do anything with the fonts, most of us can't resist at least a little fiddling. Unfortunately, it's this fiddling that messes us up most of the time. Let's go through the process of individualizing our page, one step at a time.

First, we need to tell the browsers to start looking for content, or in other words, that the body of our document is beginning. We do this by typing:

<body>

Body is another one of those things that need a closing tag, so go ahead and put in:

</body>

We'll be putting the content of our page between those two tags.

First, we need to set the variables for the background and text color. For the background you can use either a solid color or a background image. Both background and text color are set within the <body> tag. It's important to note, however, that the syntax for setting up a backgound image differs significantly from that used to designate a background color! We'll look at simply using a background color to start with. First, though, I need to explain how colors are specified in html.

Html uses hexadecimal color codes. This looks daunting but is really not all that complicated. Hexidecimal color coding uses the standard three colors; red, green, and blue; in combination to make more than 16 million different colors. A hexidecimal color code is six digits long. The first two digits tell us how much red is in the color, the second two digits are for green, and the last two set the amount of blue. A value of "00" means that there is none of that component at all in our color. A value of "FF" means, "assign that component its maximum value."

"Hey, wait a minute...where the heck did those F's come from?!" Glad you asked! We don't have enough digits to count in hexidecimal. We count 0 1 2 3 4 5 6 7 8 9 and then we start over with 10 11 12 13 and so on. Hexidecimal doesn't do it that way. It counts 0 1 2 3 4 5 6 7 8 9 A B C D E F. See? 16 digits instead of 10. Since we don't *have* 16 different digits, we just use letters to indicate the biggest 6. Let's do some color mixing!

#000000 is black, but you couldn't see it very well on this background.

#ffffff is white.

#ff0000 is as red as you can get!

#00ff00 is as green as you can get!

#0000ff is as blue as you can get!

#00ffff gives us a simple aqua.

#bbbbbb is a nice light grey.

#777777 is much darker, isn't it?

#ffff00--if you balance red and green, you get yellow.

#ff00ff--red and blue make purple.

#996633--brown is a bit harder to figure out.

For a list of the colors that work best in all browsers, hop over to this page of the Graphics Cookbook.

So, bearing that in mind, let's give our page a dark blue background. To do this we add a background color value to our body tag, like this:

<body bgcolor="#000033">

That sets our background to dark blue, but leaves the text color at it's default value. Since someone might have their default text color set at dark blue, we should set a text color variable too, so let's add that in:

<body bgcolor="#000033" TEXT="#00ffff">

That gives us a dark blue background with aqua colored text, just like this one.

If you want to use an image for your background, keep in mind that it will take longer to load and be sure to use a text color that is readable over the image. You also need to make sure it will tile attractively. It's very bad form to use a huge image just so you don't have to worry about tiling. People won't bother to wait for your page to load if you do that, so they won't see it anyway. Small images that tile well are your best bet. To use an image for your background, your body tag should look like this:

<body background="image.gif" TEXT="#00ffff">

That would use the gif file, image.gif as your background image. Gif's, jpg's, and png's can be used as background images. Make sure that the image you use is in the same directory as index.html.

In the body tag, you can also specify the colors for links and visited links. If you choose to do that, don't make both of them the same! Here's how a body tag would look with the background color, the text color, the link color, and the visited link color all set:

<body bgcolor="#000000" TEXT="#ffffff" LINK="#ff0000" VLINK="#00ff00">

"LINK" sets the link color; "VLINK" sets the visited link color.

Now that we've set our properties, we'll put a heading on the page. Headings are used to make things stand out. Basically, they increase the fontsize of the selected text. To make a bit of text into a heading, place it within a heading tag, like this:

<h1>Size 1 Heading</h1>

A size 1 heading is this big.


A size 2 heading is this big.


A size 3 heading is this big.


Put in whatever size heading you like. If you want to center it, put it within a center tag, like this:

<center><h1>Size 1Heading</h1></center>

Let's add a line across the screen to make our title stand out. The command to add a line is:

<hr>

If you want a thicker line, specify it's size value, like this:

<hr size="3">

This is a regular sized rule line.


This is a size 7 rule line.


This is a size 10 rule line.


You can have either shaded or unshaded horizontal rule lines. The ones above are nonshaded. To make a nonshaded line, just put "noshade" inside the < >'s like this:

<hr size="7" noshade>

or

<hr noshade>

Otherwise your line will be shaded. Shaded lines look like this:

This is a regular sized, shaded rule line.


This is a size 7, shaded rule line.


This is a size 10, shaded rule line.
You can also make a horizontal rule line that doesn't go all the way across the page. To do this, you specify its width as a percentage. For example:

<hr width="50%">

gives us a line that's half as wide as the screen, like this:



You can combine all of these variables with no problem. For example, this:

<hr width="50%" size="20" noshade>

gets us:




Here's how our file looks so far:

<html>

<head>
<meta name="description" content="Description of the contents of this webpage">
<meta name="keywords" content="A few keywords referring to this webpage">
<title>Title of the webpage</title>
</head>

<body bgcolor="#000000" TEXT="#ffffff" LINK="#ff0000" VLINK="#00ff00">
<h1>Our Heading</h1>
<hr>
</body>

</html>

 The color values are just examples. You can use whatever colors you like, or you can use an image for the background, or you can leave it at a simple <body> tag and leave everything set to default. These things are your choice. Be sure to save your work as plain text. Ready to add content now?

On to the next page!

Back to the Previous Page

or

Back to the Top!


Want to email me? I can be reached at velvet@pele.cx