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:
<HTML>
<HEAD>
<TITLE>HTML Basics - Using Backgrounds & Borders</TITLE>
</HEAD>
<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)
<TR>
<TD>
Your whole document goes in this part.
Then at the end, before the </BODY> and </HTML>
tags, you will type:
</TD>
</TR>
</TABLE>
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!
|
