Frames: A Quick tutorial

Think of a framed document as a Web page (HTML file) which contains other Web pages. Consider the example below:

The main file, shown in blue, is not actually seen in the browser. Its file name in this example is Frame.htm. It contains two HTML files: Index.htm and Details.htm. The contents of these files are seen in the browser.

In order to create an example like this, you need to create the three files above. To create the first file, copy the source below into a new HTML file and save it as Frame.htm.Then create the other files.

Click here to see the result

<HTML>
<HEAD>
<TITLE>Sample Framed Web Page</TITLE>
</HEAD>
<FRAMESET ROWS="25%,*">
<FRAME SRC="Index.htm">
<FRAME SRC="Details.htm">
</FRAMESET>
<NOFRAME><BODY>
If you see the following text, you are using a Web browser that does not support frames.
</BODY></NOFRAME>
</HTML>
As in the previous example, the main file, shown in blue, is not actually seen in the browser. Its file name in this example is Frame2.htm. It contains three HTML files: Contents.htm, Left.htm and Right.htm. The contents of these files are seen in the browser.

In order to create an example like this, you need to create the four files above. To create the first file, copy the source below into a new HTML file and save it as Frame.htm. Then create the other files.

Click here to see the result

<HTML>
<HEAD>
<TITLE>Another Sample Framed Web Page</TITLE>
</HEAD>
<FRAMESET ROWS="25%,*">
<FRAME SRC="Index.htm">
<FRAMESET COLS="25%,*">
<FRAME SRC="left.htm">
<FRAME SRC="right.htm">
</FRAMESET>
</FRAMESET>
<NOFRAME>
<BODY>
If you see the following text, you are using a Web browser that does not support frames.
</BODY></NOFRAME>
</HTML>

 

Things get a little more complicated when you want to add a link to another file. For example, to link to a file called myfile.htm, you have to edit one of the html files contained in the framed document.

You would use the normal syntax i.e.:

<a href="myfile.htm">Click here to see another file</a>

The problem is that the linked file will appear in the frame where the link was. To correct this, you must:

  1. go back to the document which defines and creates the frames, and add code to name each frame
  2. Specify the target frame of the hyperlink by name

To try it out follow these steps:

  1. Copy the code below.
  2. Create a new HTML file.
  3. Paste the code into the file. Save the file.
  4. Create four files: A.htm, B.htm, C.htm, D.htm, and myfile.htm.
  5. Create a link in B.htm to myfile.htm, but specify the target frame as "TheResult" i.e.

<a href = "myfile.htm TARGET = "TheResult"> Click me!</a>

That's it!

<HTML>
<HEAD>
<TITLE>Another Sample Framed Web Page</TITLE>
</HEAD>
<FRAMESET ROWS="25%,*">
<FRAME SRC="A.htm">
<FRAMESET COLS="25%,*">
<FRAME SRC="B.htm" NAME = "TheList">
<FRAME SRC="C.htm" NAME = "TheResult">
</FRAMESET>
</FRAMESET>
<NOFRAME>
<BODY>
If you see the following text, you are using a Web browser that does not support frames.
</BODY></NOFRAME>
</HTML>

Click here to see the result