Web Application Development Advice & How To
Active Server Pages Development Advice & How To
Shining Star Services LLC
 
Shining Star Services
Articles
ASP.NET
ASP.net Articles
ASP, DHTML, HTML
HTML Tutorial
Auto-select an Element from a Menu or Scrolling List & Save Keystrokes!
ASP Driven DHTML Slider Menus REVISITED One Year Later! Part II
ASP Driven DHTML Slider Menus
ASP Driven HTML Outlines
Reusing Code with ASP Include Files and Subroutines
Security
Hacker Query Check
.htr IIS Security Issue
Databases, Cookies
Functions to Open a Database Connection and Record Set
Setting Up and Using OraSession to Manage Your Oracle Database Objects
Storing Non-Durable Data for Cookie-less Sessions
Javascript
Smart Popups
Javascript: Validate Numeric Fields
Javascript Confirm Form Submission
Javascript Dynamic Text Area Counter
Javascript: Check All and Uncheck All Check Boxes
Javascript Field Validations -- Client Side Scripting
Miscellaneous
Tree Select Demo
Adobe Extension Manager
Scandisk & Defrag Pointers
Standards & Style
Setting Up Your Own ASP Development Templates
Creating a Project Template for Estimations of Time, Tasks, and Resources
To Host or Not To Host
ASP Naming Conventions
HTML Naming Conventions & Visual Interdev HTML Generation
Working with and in spite of the Visual Interdev Design Mode
Commenting Your ASP Source Code
Letters!
Reader Letters

Articles Home

Shining Star Services

  RETURN TO HTML TUTORIAL HOME

HTML Body Tag
By Nannette Thacker - 01/30/2001

Below are all examples of valid HTML BODY tags:

<body onload="document.Form1.Email.focus();">

Email:
You would use a body ONLOAD attribute when you want to have an action occur when the document loads. In the above ONLOAD attribute, you are telling the document to place the cursor in the email field of the form. This allows the user to start typing immediately, without having to tab to the field or use the mouse to put the cursor in the field.

<body>

Above is a simple BODY tag.

<body  BGCOLOR="#ffffff" link='#0000FF'
alink='#800000' vlink='#FF0000'
TEXT='#000000'>

The above BODY tag includes attributes which allow you to set various colors in the document:

  • BGCOLOR: sets the background color of the document, in this case, #ffffff is WHITE.
  • LINK: sets the color that hyperlinks will display in your document -- those that have not been depressed.
  • ALINK: sets the color of the active link, the one currently depressed.
  • VLINK: sets the color of the visited links, the ones that have already been depressed.
  • TEXT: the text attribute sets the color of the text in the document. In this case "#000000" is white.
Color Code Charts:
HTML & RGB Color Chart
Browser Safe Colors

<body  BGCOLOR="#ffffff" link='#B81810' alink='#000080' vlink='#000080'
TEXT='#000000' onload="document.Form1.Email.focus();">

The above BODY tag is a combination of two you've already seen.

<body background="/articles/images/bg.gif">

In the above body tag, a background image is set to display with the document.

Here is an example of a web site that uses a background image (this is NOT one of my web sites):
Dating Fun

<body bgcolor=peach>

In the above tag, it sets the color of the background of the document to peach. You may use certain color names instead of RGB colors (red, green, blue). However, color names are only supported in certain browsers.

Below is an example of a web site that changes the background color, using a javascript to hover over balloon colors (yes, this one is my web site):
Kids Karnival

<body bgcolor="#FFFFFF">

The above BODY tag sets the background color to white, as in a previous example. However, the RGB colors are entered in all CAPS. HTML is not case sensitive.

<body topmargin=50 leftmargin=50>

The above BODY tag sets a margin of 50 pixels on the left and on the top. A pixel is about the width of the tip of your thumbnail.

<body background="/warriors/images/spacestars.gif"
bgproperties="fixed">

The above BODY sets a background image and uses a new attribute: bgproperties="fixed". This is kind of a neat technique, where when you scroll, the text moves, but the background image doesn't. Try it out here:

His Warriors

Here is the original image used:

Notice that you do not have to have an image the size of the page. The system will take the image and duplicate it multiple times to fill the depth and width of the page.

To snag the above image and use it on your pages, right click the image, and select "Save Picture As."


ChristianSinglesDating

ShiningStar.net | ShiningStarSingles.com | Christian911.com