Index
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. 

<BODY background="picture.gif" bgcolor="#007700" text="#ffffFF"
  » link="#0000ff" vlink="#000055" alink="red"> 

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!







The Web Guild

© 2001 Thomas Rumley
webmaster@thewebguild.net