Web Hosts
with
Website Builders

HTML Code Tutorial

Tutor Ebook Download

Frames

Frames can add a little bit of extra character to any web site. They are a little harder to set up for search engines, but that doesn't seem to lessen their popularity for many.

The first rule to follow when using frames is to replace the body tag with the <frameset></frameset> tag.
Frames can be set up in either a row or column configuration.
The first frameset tag determines which set up is chosen.

Figures 1 and 2 (below) are diagrams of a row configuration.
The first and defining frameset tag for each would be:
<frameset rows="20/ ,60/, 20/"></frameset>
The three numbers represent 3 individual frames (rows) within the frameset.

They are percentages of available (vertical) space and should add up to 100. (/ = %)

You can also use absolute width settings specified in pixels and wilcards as shown below.
<frameset rows="150,300,*">

Each individual frame within the frameset must now be defined by either a <frame> or <frameset> tag. If the frame is a single column it is defined with a frame tag. If it contains multiple columns it is defined by a second frameset tag.

Contents

Page Structure

Text Controls

Tables

Forms

Frames

Miscellaneous

For figure 2 the code would be:
<frameset rows="20/,60/,20/">
<!--row 1-->
<frame src="">
<!--row 2-->
<frameset cols="30/,70/">
<frame src="">
<frame src="">
</frameset>
<!--row 3-->
<frame src="">
</frameset>

Notice that the second row in figure 2 contains 2 columns. Each column in that nested frameset must be defined with a frame tag.
The src or source attribute is used to name the html page that will be located within the appropriate frame.
Example:
src="index.html"

Figures 3 and 4 (below) are diagrams of a column configuration.
The first and defining frameset tag for each would be:
<frameset cols="20/ ,80/"></frameset>
The two numbers are percentages of available (horizontal) space and should add up to 100. (/ = %) and represent two individual frames (columns) within the overall frameset.

Each individual frame within the frameset must now be defined by either a <frame> or <frameset> tag. If the frame is a single row it is defined with a frame tag. If it contains multiple rows it is defined by a second frameset tag.

For figure 4 the code would be:
<frameset cols="20/,80/">
<!--column 1-->
<frame src="">
<!--column 2-->
<frameset rows="30/,70/">
<frame src="">
<frame src="">
</frameset>
</frameset>

Notice that the second column in figure 4 contains 2 rows. Each row in that nested frameset must be defined with a frame tag.
The src or source attribute is used to name the html page that will be located within the appropriate frame.
Example:
src="index.html"

Copy and paste this code into an html page and run it through your browser. Be sure to delete the body tags.
Next lesson --> Target and Scrolling

Check out our Free Frames Template Kit or try our Free Frames Kit Demo

CGI Online
How to Create a Website -Tutorial
Main Website