The HTML BODY tag
By Stephen Bucaro
The opening <body> and closing </body> tag create the container for all the html
elements that can be viewed in the Web browser window. The body tag has several attributes
that are in common use but the W3C (World Wide Web Consortium) does not recommend using these
attributes because they are "deprecated". Deprecated means at some point in the future they
will no longer be supported by Web browsers.
The W3c recommends to instead use style rules to apply properties to the body tag.
However, I believe because the Web contains millions of old webpages that use these attributes,
and thousands of new webpages are being created each day using the body tag attributes, they
will be supported long into the future.
Two common body tag attributes are leftmargin and topmargin. Both Internet
Explorer and Firefox set default margins for the webpage body, but those default margins may
not be the size you desire, or you may wish to set one or both of those margins to 0 (zero).
The example shown below sets the leftmargin and topmargin to 4 pixels.
<body leftmargin="4" topmargin="4">
Another common body tag attribute is bgcolor. The bgcolor attribute sets the
background color of the webpage. There are many charts of hundreds of color names on the Web,
but only 16 color names are recognized by the W3C. If you use acolor name with the body tag
bgcolor attribute, be sure to test it with the Web browsers that you intend to support. The
example below sets the webpage background color to light blue.
<body bgcolor="lightblue">
You can also use hexidecimal color notation with the body tag bgcolor attribute.
All browsers support all colors defined with hexidecimal notation. The example below uses
hexidecimal notation to set the webpage background color to #add8e6. #add8e6 is hexidecimal
notation for the color light blue.
<body bgcolor="#add8e6">
The body tag background attribute can be used to set a webpage's background to
a texture or image. The background attribute is set to the path and file name of the image
file. The image will be tiled across the webpage's background. The example below sets the
webpage background to an image.
<body background="texture.gif">
Along with specifying an image with the body tag background attribute, you can also
include the bgproperties attribute. The bgproperties attribute set with the value
"fixed" causes the tiled background image to remain stationary while the webpage text is
scrolled. This results in a pretty cool effect. The example below sets the body tag's
bgproperties attribute to "fixed".
<body background="texture.gif" bgproperties="fixed">
Another common body tag attribute is text. The text attribute sets the color of
the webpage text. Similar to the bgcolor attribute, the tag attribute can be set to a
color name or hexidecimal notation for the color. The example below sets the webpage text
color to blue.
<body text="blue">
The most commonly use body tag attribute is not an attribute at all, but an event.
Although the body tag supports all the common document events, the most commonly defined
event is the onload event. The onload event is used to call a script immediately
after the webpage has been loaded. The example below shows how to set the body tag's onload event.
<body onload="functionName()">
Note that the body tag events are not deprecated, but the body tag attributes
are, so instead of using those attributes, you should set the body properties with style
definitions. An example of setting style for the document body is shown below.
<style>
body
{
margin-left:4px;
margin-top:4px;
background-image:url("fairie1.gif");
background-attachment:fixed;
font-family:verdana;
font-size:20px;
color:red;
}
</style>
This style block would be placed in the <head> section of the webapge. Note that the
style properties do not have the same names as the html attributes.
More HTML Code: • HTML center Tag • HTML Linking Basics • Checkbox Basics • Creating a Subscript or Superscript with HTML • HTML SPAN Basics • Adding Space Around an Image • HTML5 Spinbox Control • HTML Special Characters - Character Entities • HTML Numbered or Ordered List • HTML Text Tags Basics
|