Frames Course

 

Creating The Frameset Document

The first step is to create a new HTML document
that contains the following tags.
<HTML>, <HEAD> and <TITLE>

Note: NEVER put a <BODY> line of codein a frameset document.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
</HTML>

Now add a pair of <FRAMESET> tags

In more complex frames documents you could have multiple tags to add frames within frames but that is not necessary inour sample.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>

Adding the COLS= attribute.

Our sample we are creating will be set up in columns. At the end of the course I will show a sample frames document created with ROWS.

For our sample frames document the first column will be 21% of the pages width. While the column (on the right) fills in the remaining space. The ( * ) symbol will tell the browser to fill in the remaining space with the right side column.

A number value could be used in place of the ( * ) but that would mainly be used with a document that has more than two frames. We will be using percentage here for our document. So lets add the COLS= attribute to our sample.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*">
</FRAMESET>
</HTML>

Adding FRAMEBORDER, BORDER, BORDERCOLOR and FRAMESPACING attributes.

We will only be adding a frameborder to our sample document.

Experiment with the effects of the other attributes. All these attributes are placed within the FRAMESET line of code. Also try BORDER=0 FRAMEBORDER=0 to remove the borders. ( on MSNTV)

Why use two tags for a frame border ? One is for Netscape and one is for Internet Explorer. The two standard browsers require special accommodations.

Let's add the BORDER to our document.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
</FRAMESET>
</HTML>

Add a pair of <NOFRAMES> tags

This is to accommodate browsers that cannot display a page in frames.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>

Provide a regular HTML code within the NOFRAMES tags for readers with frame incapable browsers to see.

In this code, include a clickable link to your noframes HTML document.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
</FRAMESET>
<NOFRAMES>
<H1>Welcome To My Page</H1>
<A HREF="noframes.html">
This Is The No Frames Version</a>
</NOFRAMES>
</HTML>

That completes the structure of our sample FRAMESET document. In the next section we will set up the actual frames within this frameset layout.