The HTML Page

Home HTML Page Stylesheet Improvements DummyLink DummyLink DummyLink

Here we describe the basic skeleton of the HTML page that is used for the demonstration. The page is a basic HTML page with three main sections. The three main sections are:

• mastHead section - blue border
• linkIndex section - red border
• contentsBox - green border

Let's discuss each section one by one. The mastHead section represents the top frame use in normal frame versions. It basically consists of the main banner or mast of the web page or web site, which usually never changes. The relevant code for the mastHead is shown below:

<!-- Top Header portion of page - ususally remains unchanged -->
<div id="mastHead">
<h1>The HTML Page</h1>
</div>

The main page banner is using the id = mastHead attribute to get the style information from the linked style sheet. This demo just contains simple text in the mastHead section, but users can have a combination of images, html code, etc for real world websites.

A frame based web site would use a separate frame for the navigation part of their pages. This demo also uses a similar idea by keeping all the navigation links in one section, called the "linkIndex" section.

<!-- Left section of page - acts as link Index for pages,
     text in this section seldom changes. -->
<div id="linkIndex">
<a href="frameSimulate.html">Home</a>
<a href="frameSimulate1.html">HTML Page</a>
<a href="frameSimulate2.html">Stylesheet</a>
<a href="frameSimulate3.html">Improvements</a>
<a href="#"<DummyLink</a>
<a href="#"<DummyLink</a>
<a href="#"<DummyLink</a>
</div>

The linkIndex section, like the mastHead section is also the part of the page (an individual frame in frames version) which remains the same. The only time this part changes is when there is an addition to the navigation section due to a new page on the web site.

The most dynamic part of the page is the contentsBox section. We call it dynamic, because that is the only part of the page which changes when we browse over different pages on the web site. It contains the main body of the HTML page, the one you are reading right now!

<!-- Main content box of page - acts as the "frame" in this design -->
<div id="contentsBox">
<p>.....main body text.....</p>
.......
.......
</div>

This is the section of the page that you want to edit in order to edit the "body frame". Remember, in frames version the body frame scrolls vertically(sometimes horzontally too!) if the contents cannot fit the browser window. Our contentsBox also displays the same behaviour.

With the main sections of the HTML page code explained, click on the Stylesheet link in the navigation panel to read about the discussion on the style rules and definitions used in the style sheet linked to this page.