The body of a HTML document, as its name suggests, contains all the text and images that make up the page, together with all the HTML elements that provide the control/formatting of the page. The format is :
<BODY>
The rest of the document included here.
See index for other HTML tags
</BODY>
NOTE : The <BODY> ...
</BODY> elements are directly enclosed by the
<HTML> ... </HTML> elements.
It is possible to control the document colour scheme and background by specifying
certain attributes in the <BODY ...> declaration. However,
it should be noted that most browsers provide the user with a means to over-ride
colour schemes and prevent images from loading.
The BACKGROUND attribute can be used to point to an image file that will be tiled across the browser window, to provide a background for the document. Specifying :
<BODY BACKGROUND="imagename.gif">
Rest of the document goes here
</BODY>
would cause whatever text, images, etc. appeared in that document to be placed on a background consisting of the (imagename.gif) graphics file being tiled to cover the viewing area, much like bitmaps are used for Windows wallpaper. Browsers that support this attribute, allow the use of .GIF, .JPG images for HTML backgrounds, while Internet Explorer supports those, plus Windows .BMP files.
The BGCOLOR attribute allows setting of the background colour for the document
<BODY BGCOLOR="#rrggbb"> Rest of document goes
here </BODY>
Where "#rrggbb" is a hexadecimal (base 16) red-green-blue triplet used to specify the background colour.
For two tables, showing the possible colours that can be described using reserved colour names, see this topic
Clearly, once the background colours/patterns have been changed, it will be necessary to also be able to control the foreground to establish the proper display contrasts.
TEXT
This attribute is used to control the colour of all the normal text in the
document. This basically consists of all text that is not specially coloured
to indicate a link. The format of TEXT is the same as that of
BGCOLOR.
<BODY TEXT="#rrggbb">
Rest of document goes here
</BODY>
colour names are valid values of this attribute
LINK, VLINK, and
ALINK attributes
These attributes let you control the colouring of link text.
VLINK stands for visited link, and ALINK stands
for active link (this sets the colour that the link text will be for the
time that it is clicked on). The default colouring of these is:
LINK=blue (#0000FF), VLINK=purple (#800080), and
ALINK=red (#FF0000). Again, the format for these attributes
is the same as that for
BGCOLOR and
TEXT.
<BODY LINK="#rrggbb"
VLINK="#rrggbb"
ALINK="#rrggbb">
Rest of document goes here
</BODY>
Colour names are valid values of this attribute.
NOTE : The ALINK attribute is
Netscape specific.
The ability to watermark HTML documents,
by fixing a background image so that it doesn't scroll as a normal background
image does, has been added to Microsoft's Internet Explorer
since version 2.0. To give a page with a background image a watermark background,
add BGPROPERTIES=FIXED to the BODY
element as follows:
<BODY BACKGROUND="filename.gif"
BGPROPERTIES=FIXED>
NOTE : This attribute is Internet Explorer specific.
LEFTMARGIN attribute
This Internet Explorer attribute allows the left hand margin
of the document to be set.
For example:
<BODY LEFTMARGIN="40">
This document is indented 40 pixels from the left hand edge of the browser
window </BODY>
RIGHTMARGIN attribute
This Internet Explorer (4.0 and above) specific attribute
allows the right margin of the document to be set in pixels.
TOPMARGIN attribute
This Internet Explorer specific attribute allows the top
margin of the document to be set. It accepts a pixel value.
BOTTOMMARGIN attribute
This Internet Explorer specific attribute allows the bottom
margin of the document to be set. It accepts a pixel value.
NOTE : All of the above attributes can be set to 0, making the page start and finis at the extreme edges the page.
LANG="language setting"
The LANG attribute can be used to specify what language the
<ADDRESS> element is using. It accepts any valid ISO standard
language abbreviation (for example "en" for English,
"de" for German etc.) For more details, see the
Document
Localisation section for more details.
LANGUAGE="Scripting
language"
The LANGUAGE attribute can be used to expressly specify which
scripting language Internet Explorer 4.0 uses to interpret
any scripting information used in the <ADDRESS> element.
It can accept values of vbscript, vbs,
javascript or jscript. The first two specify the
scripting language as Visual Basic Script, the latter two specify it as using
Javascript (the default scripting language used if no LANGUAGE
attribute is set.
TITLE="Informational Text"
The Internet Explorer 4.0 (and above) specific
TITLE attribute is used for informational purposes.
CLASS="Style Sheet class
name"
The CLASS attribute is used to specify the
<BODY> element as using a particular style sheet class.
See the
Style
Sheets topic for details.
STYLE="In line style setting"
As well as using previously defined style sheet settings, the
<BODY> element can have in-line stylings attached to it.
See the
Style
Sheets topic for details.
ID="Unique element identifier"
The ID attribute can be used to either reference a unique style
sheet identifier, or to provide a unique name for the
<BODY> element for scripting purposes. Any
<BODY> element with an ID attribute can be
directly manipulated in script by referencing its ID attribute,
rather than working through the
All
collection to determine the element. See the
Scripting
introduction topic for more information.
SCROLL attribute
The SCROLL attribute can be set to "yes" or "no". Setting it
to "no" removes the documents scroll bars that would normally appear if the
document is larger than a single viewing window. Care should be taken when
using this attribute, as you can not guarantee (with older browsers) any
screen/font resolutions.
Colouring Considerations.
Most graphical browsers allow the downloading of embedded images to be turned
off to allow for faster downloading and display of the HTML document. If
this has been activated by the user, then background images will not be loaded
or displayed. If this happens and no
BGCOLOR attribute was specified,
then all of the foreground text and link colouring attributes
(TEXT, LINK,
VLINK and ALINK) will
be ignored. This is so that documents are not rendered illegible if the text
colour scheme authored for use over the set image clashes with the default
browser background.
Using the 'Safe' browser
palette
Netscape and Internet Explorer will both
're-colour' any colour settings that aren't part of the system palette
at the users screen resolution. I.e. your Web pages may look fantastic on
your system at 16 bit (65,536) or 24 bit (16,777,216) colour depth, but if
the person viewing your pages has their colour depth set to 8 bit (256) colour,
or even less, then the colour scheme may not be displayed as authored (in
some cases, the colours may not be displayed at all - if what you have specified
is a pale colour, it may turn out white, as the browser will choose the nearest
'solid' colour in its available palette). To allow for this, web pages that
use colours should only use colours taken from what is known as the Safe
browser palette (or Non-dithering palette). This palette consists
of 216 colours (256 colours minus the palette entries reserved by the system,
and those that vary across different systems (i.e. Windows/Macintosh platforms)).
This means that you can be sure that the pages you are authoring (or the
graphics in those pages) will display as authored on both Macintosh and Windows
platforms. This palette uses multiples of 51 (33 in hexadecimal notation)
for the Red,
Green and
Blue components. So, to be sure that
the colours you use will not be dithered, only use #rrggbb triplets made
up of components of 33 (00, 33, 66, 99, CC and FF). For instance,
"#0066FF" would be a 'safe' colour, while "#FFF0FA"
wouldn't (as it would be dithered to the nearest safe palette entry (i.e.
"#FFFFFF" on 8-bit (256) colour systems).
For a page that dynamically creates a table and populates it with cells using
the colours in the safe browser palette, see this
topic
NOTE : This re-colouring 'problem' can
be seen more clearly in .GIF images that attempt to use colours that aren't
part of the safe browser palette. Instead of choosing the nearest solid colour
entry, Netscape and Internet Explorer will
both dither the graphic according to the colour palette they have
available. Hence it becomes more crucial to have an understanding of the
safe browser palette when creating graphics for display on the Web.
NOTE : All of the attributes detailed on this page can be set using Style Sheet definitions.
The <BODY> element, in accordance
with Internet Explorer 4.0's
Dynamic
HTML document object model, supports various properties, methods and
events. Note that most of these are Internet Explorer 4.0
specific, although some are supported by Netscape (in versions
3.0 and 4.0). Browser support is detailed with the property, method or event.
<BODY...>
Properties
The <BODY...> element/object supports all of
the standard
Dynamic
HTML properties (i.e. className,
document, id,
innerHTML, innerText,
isTextEdit, lang,
language, offsetHeight,
offsetLeft, offsetParent,
offsetTop, offsetWidth,
outerHTML, outerText,
parentElement,
parentTextEdit,
sourceIndex, style,
tagName and title). Details
of these can be found in the
standard
Dynamic HTML properties topics. The <BODY> element
also supports the following properties:
background
The background property reflects the setting of the
BACKGROUND
attribute as described above. It is possible to change a documents background
by manipulation of the background property.
bgColor
The bgColor property, reflects the setting (if any) of the
BGCOLOR
attribute. It also has read-write permissions, allowing dynamic changing
of the documents background colour.
bgProperties
This reflects the
BGPROPERTIES
attribute. If the bgProperties property is set to "fixed", any
background images will be 'fixed' to the viewing window. If set to "" (i.e.
nothing), the background image will scroll with the document (which is the
default setting).
bottomMargin
The bottomMargin property reflects the setting (if any) of the
BOTTOMMARGIN.
The bottomMargin property can be dynamically changed in script
functions.
clientHeight
The clientHeight property reflects the height (in pixels) of
the currently viewable portion of the document. The clientHeight
property is read-only, but could be useful for determining the size of the
users current browser window, to dynamically resize any document content.
clientWidth
The clientWidth property reflects the width (in pixels) of the
currently viewable portion of the document. The clientWidth
property is read-only, but could be useful for determining the size of the
users current browser window, to dynamically resize any document content.
leftMargin
The leftMargin property reflects the setting (if any) of the
LEFTMARGIN.
The leftMargin property can be dynamically changed in script
functions.
link
(vlink and alink) The
*link properties reflect the settings of their respective attributes
(LINK,
ALINK
and
VLINK).
All three can be changed through scripting.
rightMargin
The rightMargin property reflects the setting (if any) of the
RIGHTMARGIN.
The rightMargin property can be dynamically changed in script
functions.
scroll
The scroll property reflects the setting (if any) of the
SCROLL.
The scroll property can be dynamically changed in script functions.
scrollHeight
The scrollHeight property reflects the documents total scrollable
height (in pixels). It differs from the clientWidth and
offsetWidth properties, in that when applied to the
<BODY> element, they only return a value corresponding
to the currently visible portion of the document, whereas the
scrollHeight property returns a value representing the total
height of the visible document content. (Note that for the
<BODY> element, clientHeight and
offsetHeight are essentially identical)
scrollLeft
The scrollLeft property reflects a value representing the distance
between the left-most edge of the element and the left hand edge of the current
viewing window. When used with the <BODY> element, the
scrollLeft property is a value indicative of the extent to which
the document has been scrolled sideways.
scrollTop
The scrollTop property returns a value that represents the distance
between the top-most edge of the element and the top-most edge of the current
viewing window. When used with the <BODY> element, the
scrollTop property is a value indicative of the extent to which
the document has been scrolled vertically. As an example, the button below
will display the current document <BODY>'s
scrollTop property on the status bar. Click it to get the value,
then scroll the page either up or down and click it again. Scrolling the
page down increases the scrollTop property value, scrolling
the page up decreases it.
scrollWidth
Like the scrollHeight property, the scrollWidth
property reflects a value that represents the total scrollable width of the
document. The same nuances between it and the clientWidth and
offsetWidth properties exist, as exist between the
scrollHeight, clientHeight and
offsetHeight properties.
text
The text property reflects the setting (if any) of the
TEXT,
which can be used to set default text colouring for the document. The
text property can be dynamically changed in script functions.
scrolltopMargin
The topMargin property reflects the setting (if any) of the
TOPMARGIN.
The topMargin property can be dynamically changed in script
functions.
<BODY...>
Methods
The <BODY...> element/object supports all of
the standard
Dynamic
HTML methods (i.e. click,
contains, getAttribute,
insertAdjacentHTML,
insertAdjacentText,
removeAttribute,
scrollIntoView and
setAttribute). Details of these can be found in
the
standard
Dynamic HTML Methods topics. The <BODY> element also
supports the following methods:
blur
The blur method can be used to force a document to lose the
focus. Doing this would fire the
onblur event.
blur
The createTextRange method is used for creating a Text Range
from the document content. For more information, see the
Text
Range Object topic.
focus
The focus method can be used to force a document to gain the
focus. Doing this would fire the
onfocus event.
<BODY...>
Events
The <BODY...> element/object supports all of
the standard
Dynamic
HTML events (i.e. onclick,
ondblclick, ondragstart,
onfilterchange, onhelp,
onkeydown, onkeypress,
onkeyup, onmousedown,
onmousemove, onmouseout,
onmouseover, onmouseup
and onselectstart). Details of these can be found
in the
standard
Dynamic HTML events topics. The <BODY> attribute also
supports the following events:
onblur
The onblur event fires when the current document loses the focus.
For example, if your site uses two or more windows for display, you could
effectively track the users location by using the onblur and
onfocus events in the relevant <BODY> elements.
onfocus
The onfocus event is fired whenever the document receives the
focus. As mentioned above, this can be especially useful for executing script
functions to determine the users location, should your site/application use
multiple browser windows.
Note : The onfocus event is also supported
by Netscape
onload
The onload event can be used to execute script functions when
the page loads. For example, this HTMLib re-creates a 'non-scrolling region',
by executing a script function using the onload event in every
document's <BODY> element. The script function loads the
title document (or the main content document) immediately after the calling
document has loaded.
Note : The onfocus event is also supported
by Netscape
onunload
The onunload event is the reverse of the onload
event - so, as you'd expect, it can be used to execute script functions when
the current document is unloaded from the browser.
Note : The onfocus event is also supported
by Netscape
Note : Netscape supports the onblur,
onfocus, onload and onunload events
for the <BODY> element as part of its
Window
Object.
© 1995-1998, Stephen Le Hunte
Comments: