EIW Fall 2003 Lecture Notes
  EIW Home  |   Course Syllabus

HTML Frames

Frames allow you to divide the browser window into independent rectangles, each rectangle can hold a different document. There are lots of fancy things you can do with frames, including having hyperlinks in one from change the document that is displayed in another frame. Each frame can have it's own scroll bars and each can contain different types of content (for example: one frame can hold HTML while another can hold a PDF file).

To use frames you need to create a special HTML document that defines the layout of the frames and includes URLs to the documents that should occupy the frames. This means that you need to use multiple files to use frames - one to define the frames themselves, and one file for the content of each frame.

Creating a frame document requires the HTML tags <FRAMESET> and <FRAME>. The <FRAMESET> tag define the layout of the frames (how many rows and columns and how big each row and column is) and within the <FRAMESET> and </FRAMESET> tags you put one <FRAME> for each frame to define the document that should be placed in the frame.

FRAMESET

The FRAMESET tag is used instead of the BODY tag when defining a frame document. There should be nothing else in the file other than the HEAD (you don't include any document content in the frame document itself). The FRAMESET tag must include an attribute to define the layout of frames, the possible attributes are ROWS or COLS. The value of either of these attributes is a sequence of sizes (specified as either pixels or percentage of the window size) separated by commas. The number of sizes determines the number of frames. Here are some examples:

<FRAMESET ROWS="50%,50%">

 This will result in two frames, one at the top of the browser window and the other below. Both frames will be half the height of the browser window
 
 
 

<FRAMESET COLS="200,*">

 This will split the window down the middle, the left frame will be 200 pixels wide and the right frame will take up whatever space is leftover (the * means whatever is left).
  
 

<FRAMESET COLS="20%,60%,20%">

 This will split the window in to 3 frames, the outside frames each 20% of the windows size.
     

You can use both ROWS and COLS to chop up the window in to a grid. Some examples: 

<FRAMESET ROWS="50%,50%" COLS="50%,50%">

 This will result in a 2x2 grid with all frames of equal size.
  
  
 

<FRAMESET ROWS="20%,80%" COLS="20%,80%">

 This will result in a 2x2 grid with frames of different sizes.
  
  
The FRAME Tag

Between the <FRAMESET> and </FRAMESET> tags you put one FRAME tag for each of the frames. Each FRAME can have a SRCattribute that specifies the URL of the document that should appear inside the frame.

.

The order of FRAME tags is important - the browser will assign them column by column from left to right, then move on to the next row. Here are some examples:

<FRAMESET ROWS="50%,50%" COLS="50%,50%">
  <FRAME SRC="page1.html">
  <FRAME SRC="page2.html">
  <FRAME SRC="page3.html">
  <FRAME SRC="page4.html">
</FRAMESET>

will hold page1.html page2.html
page3.html page4.html

Hyperlinks and Targets

When using the <A> tag to create a hyperlink you can also specify a target. The target is the name of a window or frame in which you want the new document to appear. By default the new document will appear in the same window/frame as the one containing the hyperlink. To change this behavior (something very useful when using frames) you use the TARGET attribute inside an A tag.

Targets: Named Frames

In order to use the TARGET attribute inside a hyperlink to specify another frame as the target of the hyperlink, you must have named the target frame. To name a frame you use the NAME attribute of the FRAME tag. An example:

<FRAMESET ROWS="100,*">
  <FRAME SRC="menu.html">
  <FRAME SRC="doc1.html" NAME=main>
</FRAMESET>

In the above example, the browser window will be split in to 2 rows, with the top row being 100 pixels in height. The upper frame will hold a menu that allows the user to select the contents of the lower (larger) frame. The lower frame is named main and is initially set to hold the document doc1.html.

The menu document can contain hyperlinks with the TARGET attribute set to the value main. When the user clicks on these links the browser will load the new document in to the lower frame. Here is what part of menu.html might look like:


<P>My Favorite Links:
  <A HREF=http://www.cs.rpi.edu/~hollingd/eiw TARGET=main>EIW</A>
   &nbsp   &nbsp
  <A HREF=http://www.wired.com TARGET=main>Wired</A>
   &nbsp   &nbsp
  <A HREF=http://www.slashdot.org TARGET=main>Slashdot</A></P>

NOTE: &nbsp is a special code that means non-blank space which results in the browser leaving some space (it's puts a space in the document).

You can check out this example system that includes a menu inside a frame that changes the document loaded in another frame here

Targets and Named Windows

If the name specified as the value of the TARGET attribute does not exist - the browser assumes that you want a new window and creates one. The window will be given the name, so if the name is used as the target of other hyperlinks they too will show up in the new window.

You can also use the special target name _blank which tells the browser to create a new window every time. There are some other special target names - check an HTML reference for details. Here is some sample HTML to play with:

<TABLE BORDER=1 ALIGN=CENTER>
  <TR>
    <TH>In a new window</TH>  <TH>In the window "win0"</TH>
  </TR><TR>
    <TD><A HREF=http://www.yahoo.com TARGET=_blank>yahoo</A></TD>
    <TD><A HREF=http://www.yahoo.com TARGET=win0>yahoo</A></TD>
  </TR><TR>
    <TD><A HREF=http://www.slashdot.org TARGET=_blank>Slashdot</A></TD>
    <TD><A HREF=http://www.slashdot.org TARGET=win0>Slashdot</A></TD>
  </TR><TR>
    <TD><A HREF=http://www.google.com TARGET=_blank>google</A></TD>
    <TD><A HREF=http://www.google.com TARGET=win0>google</A></TD>
  </TR>
</TABLE>

In a new window In the window "win0"
yahoo yahoo
Slashdot Slashdot
google google

Complete Frame Examples

Here are a links to a few complete examples. In each example on of the frames will itself contain the source code for the frame document.