Some simple frame examples

frameSet1.html (Side-by-side frames)

This is the simplest case. There is a left frame and a right frame. The right frame uses the scrolling option so that the frame will scroll if the content overflows the frame.

Here is the HTML in frameSet1.html that defines the frameset.

<frameset cols="30%,70%">
   <frame src = "left.html" name = "left" scrolling="no">
   <frame src = "right.html" name = "right" scrolling="yes">
</frameset>

In a frameset document there is no <body> element. Each frame is given a name and a page to load into the frame. The name can be used by a scripting language such as JavaScript to reference the frame or it can be used in a link to specify into which frame a document should load.

frameSet2.html (Side-by-side frames)

This is similar to the first example except the left frame is a table of links. When a link is clicked the corresponding page is loaded into the right frame. Here is the HTML in frameSet2.html that defines the frameset.

<frameset cols="15%,70%">
   <frame src = "links.html" name = "links" scrolling="no">
   <frame src = "content.html" name = "content" scrolling="yes">
</frameset>

The file links.html will contain thepage of links and the default page content.html in the right frame will be replaced by a new page when a link is clicked. Here is the body of links.html.

<a href="http://www.cnn.com" target = "content">CNN</a>
<p>
<a href="http://www.canoe.ca" target = "content">Canoe</a>
<p>
<a href="http://www.javascript.com" target = "content">JavaScript site</a>

The target attribute is used to specify which frame in the frameset will be loaded with the page.

frameSet3.html (frames within frames)

This example shows that a frame set can be nested inside another frame set. Here there is a top frame a middle frame and a bottom frame. The middle frame is divided into two side-by-side frames. Here is the HTML in frameSet3.html that defines the frameset.

<frameset rows="10%,*,10%">
   <frame src="top.html" name="links" scrolling="no">
   <frameset cols="10%,*">
      <frame src="left.html" name = "left" scrolling="no">
      <frame src="right.html" name="right" scrolling="yes">
   </frameset>
   <frame src="bottom.html" name="bottom" scrolling="no">
</frameset>

There are several other attributes for the frame and frameset elements (see HTML documentation).