<BODY>

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