The BODY section of the web page is where you put the content
of your page. Each section of the tutorial will begin with an example page
for now on. The example page will be an ongoing example of what you can
do with HTML. Each new section will now carry an evolving version of the
example page. By the time you've completed the full tutorial you'll be
adept with HTML and will have seen exactly what it can do. The example
page will open up in a new window that you can refer to as you work your
way through the guide.
Here's the body's html for the example page.
<BODY background="text"
bgcolor="#007700" text="#ffffFF"
»
link="#0000ff" vlink="#000055" alink="red">
<CENTER>
<DIV align="center">
<P align="center">
<IMG src="monkey.gif"
border=4 height=68 width=468 alt="Here's an example of a gif image">
<p>
<H1>Example
Page One</h1>
<B>Everything<B>
that you see on this page is thought of as <I>the content</i> of
the page.
You're able
to put <FONT color="red" size=6>pictures</font>,
<FONT color="#FFAA00"
size=5>songs<font>, and
<FONT color="yellow"
size=4>text</font> onto your web page with HTML.
Just found this
page and want to see how it was made? Try the <A
href="http://guild.sphosting.com/html/index.html" target="_blank">Guild's
guide to HTML</a>.
</div>
</center>
</body>
Tags are either called empty
tags or container tags.
example below a container tag may have one or more attributes.
An attribute allows a web master to control aspects of the web page without
having to include further tags.
As a rule, a tag should be typed
on a single line. While your editor may divide an element into multiple
lines, you should never insert a carriage return into the middle of a tag
yourself. When you see a tag being displayed with the » symbol
beginning the subsequent lines, this just means that I've divided the line
for readability's sake. The » should not be included into
the tag when you write it.
The first, and last, tag of the body section,
is <BODY> and it's closing opposite. The BODY tag does two things for
your web page. First, it tells the browser where the beginning and ending
of the BODY section of the page is. Second, it sets the colors that the
web browser will display the contents of your page in.
The BODY tag is optional for your web page. But it is definitely a good
idea to include it within your web page. The only time that you would not
wish to include the tag is when you are designing a
frames orientated page.
There are several different attributes within the
BODY tag. Each attribute controls a different aspect of your web page's
display.
background="file.gif"
If you've seen the background of a web page as a picture this attribute
is how it was done. The text within the quotes is the file name of the
picture that you want as the background.
bgcolor="#000000"
If you'd like the background of the web page to be a simple color,
you can do it by setting this attribute.
text="#000000"
From here you can set the color that the text will be displayed in.
link="#000000"
This attribute will display text links in the color that you specify.
This attribute sets the color of the link before they've been clicked
on.
We'll be explaining links
in another two sections.
vlink="#000000"
Links that have been clicked on will be displayed in the color that
you set here.
alink="#000000"
alink sets the display color for a text link. The link is shown
in this color between the time that the link is clicked on and the time
that the page is loaded into the browser.
Internet
Explorer extensions In addition to the tags in the 4.0 standard,
the two major browsers have introduced elements that are only observed
by their own particular browsers. These tags are called proprietary.
In the case of the BODY tag, Microsoft's Internet Explorer has added several
attributes to the tag. If you wish to include these attributes into your
web page you shouldn't worry about them causing problems in other browsers.
If the browser doesn't recognize an attribute it will just ignore it. This
is true for tags that they don't recognize as well.
bgproperties="fixed"
If you've watched web pages that have background images, you've probably
noticed that they scroll in lock step with the content of the page. The
bgproperties
attribute makes the background image stick to the screen. The content
of the web page scrolls over the background image. This allows you to set
a watermark on your page. A logo or picture that will stay in the
same place on the screen as your site it loaded. fixed is the only
value that is allowed for this attribute. If you'd rather have the image
scroll normally with the content just leave the bgproperties="fixed"
out of the tag.
bottommargin=n
The bottommargin will set the bottom of the web page against the bottom
of the window. The n is an integer setting the number of pixels
to place between the bottom of the window and the bottom of the web page.
Setting it to zero butts the web page right against the bottom of the window.
leftmargin=n
Like bottommargin, leftmargin controls how near the edge of the page
will rest against the edge of the window. In this case the left edge of
the page against the left side of the window.
rightmargin=n
You've probably figured this one out by now. Right side of the page
against the right side of the window.
topmargin=n
Top of the page against the top of the window.
scroll=yes | no
scroll lets you turn the scroll bars off. While you can set
them on (yes) or off (no), if you just leave this attribute out the browser
will make the decision on the scroll bars all on its own.
Remember that these attributes only work in the Internet Explorer browser.
So the appearance of your page will be a bit different when it's viewed
in a different brand's browser.
That's the body tag!
Next up is positioning your content on the web
page! Go there!