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:
file: /Techref/language/html/ib/Document_Structure_Elements/body.htm, 26KB, , updated: 2009/1/28 18:46, local time: 2024/12/24 21:13,
3.135.186.233:LOG IN
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://linistepper.com/techref/language/html/ib/Document_Structure_Elements/body.htm"> <BODY></A> |
Did you find what you needed? |