Using Backgrounds and Borders


Using background wallpaper and bordered wallpaper is simple - once you know how. The bordered wallpaper requires an extra step, but we'll get into that later.

All your pages are "framed" within certain commands, as we discussed in Part 1. The first is the <HTML> followed by <HEAD>, then <TITLE></TITLE>, then </HEAD>. Next is the <BODY> tag - this is where you make all your color choices for background color (BGCOLOR), text (TEXT), links (LINK), visited links (VLINK), and active links (ALINK).

Example from this page:

<TITLE>HTML Basics - Using Backgrounds & Borders</TITLE>
<BODY BACKGROUND="flowersbg1.jpg" TEXT="#00004A" BGCOLOR="#00A060" VLINK="#FF99BF" LINK="#0000FF" ALINK="#FF0060>

I chose #00A060 (green) for a background color even though I have a wallpaper so that before it loads, the text will look right on the page. You can also choose a contrasting color so that Netscape browsers will color any table borders you might have on the page. I also had that in mind when chosing the green.

And what's with these numbers and letters anyway? That's the hexadecimal color code system. Numbers 0 to 9 and letters A through F are used in varying combinations to produce all the colors we see onscreen. 0 is the absence of color, so all 0s (#000000) is black. F (#FFFFFF) is the strongest of all colors together which produces white. The six digits are further broken down into the RGB colors (red-green-blue), so that the first two digits pertain to the strength of red, the second two digits describe the strength of green, and the last two are the blue part. If you're lost, don't worry about it. I just threw that in because when I first learned that, I thought it was cool.

And here is a trick you can use to learn how someone produces an effect on their page. In MSIE, hit the "View" button, then "Source". This brings up the code for the page you are looking at. Netscape users can get the same code by clicking "View" and then "Document/Page Source" (or right-click the page, choose "View Source" or "View Frame Source").

Anyway, back to the command line:
I have been using this same flower background for this HTML series, so I typed: <BODY BACKGROUND="flowersbg1.jpg" (always remember to enclose it in quotation marks, no spaces in-between).
Next I wanted a background color as well, so I typed: BGCOLOR="#00A060".
For my text color I wanted a very dark blue, so I typed: TEXT="#00004A".
Then I chose my link and visited link colors, so that the resultant line is:

<BODY BACKGROUND="flowersbg1.jpg" BGCOLOR="#00A060" TEXT="#00004A" VLINK="#FF99BF" LINK="#0000FF" ALINK="#FF0060">

which produces what you now see.

Got it?

We're off to tackle bordered wallpapers.

If you want to offset your text and images from the left margin, you'll need to enclose your whole document within a table. The size of that table will vary with the pixel width of the border. My borders vary in width, so I cannot give you a standard percentage to use that will work with all borders, but you can play around within a certain range to get your desired effect.

Ok, what you will do, is after your BODY tag (remember that?), you will type:
<TABLE WIDTH="85%" ALIGN="right"> (however, this percentage can vary)

Your whole document goes in this part.

Then at the end, before the </BODY> and </HTML> tags, you will type:

If you want your stuff closer to the left border, increase the percentage. If you need to move farther to the right, decrease the percentage.

That's it! Now, that wasn't too bad, was it? You are now a full-fledged HTML-Warrior! <g> Go out there and Conquer!




Part One
Starting Out and Sound

Part Two
Working with text

Part Three
Images, HRs, Linking, and Wallpaper

Part Four
Tables are your friends

Part Five
Using Backgrounds & Borders


Main SiteGuide
Avian Critter || Canine Critter
Human Critters || Wild Critters

background/hr by me: Papagei Studios