| |
|
Between the <Body> and </Body> Tags
Just Below the </Head> Tag
|
| The Explanation |
|
The HTML Code |
| The <Body> tag
consists of instructions in how the web browser will display a page
when other attributes are missing from the main content of the web
page. Such attributes as font name, font color, font size, and
background types are an example. The <Body> tag must have a
closing tag, </Body> in order for the browser to know where the
content of the document ends.
|
Attributes supported inside the
<Body> tag can be substituted in the more recent browser versions
with Cascading Style Sheets (CSS). For this instruction, we will focus
on building the web page without CSS, even though HTML Validators will
report warnings on “depreciated tags” where CSS has not been used. We
are building a basic web page now, later we will delve into more
advanced studies of web page development. |
|
|
| The <Body> And It's Attributes. |
How The Tag Should Be Written. |
- ALINK=”#RRGGBB” Active link (mouse selected) color.
- BACKGROUND=”URL” The relative or absolute location of an image file to tile (repeat) in the background of a web page.
- BGCOLOR=”#FFFFFF” The background color of a web page.
- BGPROPERTIES=”FIXED” Where a background image tiles the web page,
and the visitor scrolls the page down, the background remains fixed.
Internet Explorer, OK. Netscape Communicator ignores the attribute.
- LEFTMARGIN=”n” Sets the left margin of the page from zero (0)
pixels to any size you need. Internet Explorer, OK. Netscape
Communicator ignores the attribute.
- TOPMARGIN=”n” Sets the top margin of the page from zero (0) pixels
to any size you need. Internet Explorer, OK. Netscape Communicator
ignores the attribute.
- MARGINWIDTH=”n” Sets the width of the margins from zero (0) pixels
to any size you need. Netscape Communicator, OK. IE ignores the
attribute.
- MARGINHEIGHT=”n” Sets the height of the margin from zero (0) pixels
to any size you need. Netscape Communicator, OK. IE ignores the
attribute.
- LINK=”#RRGGBB” Link color where no action has been taken.
- TEXT=”#RRGGBB” Sets the text color inside the web page where there are no other attributes affecting the content of the page.
- VLINK=”#RRGGBB” Sets the color of a visited link.
|
<Body TEXT=”#000000”
BACKGROUND=”my_image.jpg” BGCOLOR=”#FFFFFF” BGPROPERTIES=”FIXED”
LEFTMARGIN=”0” TOPMARGIN=”0” MARGINWIDTH=”0” MARGINHEIGHT=”0”
LINK=”#FF0000” ALINK=”#00FF00” VLINK=”#0000FF”>
(In the above example all the MARGIN attributes have been set
to “0” pixels, by using all four attributes both Netscape and IE will
render the page with no margin space. Exception to Netscape
Communicator version 4.x, Netscape will default a right margin of 10
pixels expecting a vertical scroll bar.)
|
| |
| </Body> |
Now that we have most of
the basic ingredients in place for the web page we need to close the
document with the following two tags "</Body>" and "</Html>"
Most
HTML tags found inside the content area of the web page will require
closing tags, failure to include these closing tags will result in the
page not rendering, or the content opened by a tag not displaying on
the screen. |
|
These two tags are the
opposites of the major opening tags for the document, web browsers need
to know where certain elements begin and end to render your web page
correctly. The switch that turns off these tags is the "/" (forward
slash) and will be found in later HTML tags used within the document
content. |
| |
| Now we practice what we teach. |
| For this exercise and all
the following exercises involving writing HTML code it is recommended
that you "Print the example document", open an ASCII text editor
(NotePad, Word Pad, Edit, or any other text editor capable of saving
your document in ASCII text only), and hand code the printed document
into your new web page file. Hand coding these examples will teach you
two very important lessons in writing web pages, the correct syntax for
HTML, and how easy it is to make a simple keystroke error that causes
the entire page to fail. Writing the code for a web page is just half
the job, debugging errors is the second half. |
|
This section contains a
Pop up Window with the Basic HTML Code inside, the window has "Word
Wrap" turned off so each line of code is displayed with the correct
number of blank spaces where they belong. Click the link below and
using your mouse copy all the code from top to bottom, you do not have
to scroll right to capture all the hidden code if your mouse rests
below the last line of code when you right click to copy.
After
you have pasted this code into a New Document in your text editor save
the file as "BasicExample.html" (no quotes). Use the "Save As: command,
do not exit the editor. The filename extension is critical, it must be
either .HTML or .htm, there are no exceptions. Remember where you have
saved this file on your hard Disk.
Get The Code.
|
|
|
| In order to test your page
you must place some readable content into the web page, at this point
if you opened the document in your favorite web browser you would only
see a White Page. With your editor still open and the BasicExample.html
document available for editing you will enter some simple text. For
this example you may turn On Word Wrap to make editing easier. Place
the cursor at the end of the <Body> tag (just past the >) and
press the "Return Key" once, this will enter a line return and place
the cursor one line below the <Body> tag on a blank line of it's
own. On this blank line enter the following text, "This is
demonstrating building a web page." (No quotes) |
This link will show how your edited document should look in your text editor.
Demonstrating
You can open the saved document in two ways; you can open your browser
and go to "File, Open, Browse, and navigate to where you saved your
file, or in MS Windows you can open Windows Explorer and navigate to
where you saved your file and double click on the HTML icon with your
filename. Since your filename has the extension of .HTML or .htm it is
associated with your default browser and Windows will automatically
open your browser and display this page. This link will show how the
document should look in your favorite browser.
Testing in your browser. |
| |
| Now
it is time to add the special tags and attributes to bring the page
alive. Select a topic from the navigation panel on the left. |
|
