Introduction
Overview
History
Advice
IDE
Books
Tutorials

Beginners
Introduction
Text Formatting
Images
Tables
Forms
Entities/Colors

Advanced
Frames
Image Maps
Stylesheets
Reference

Community
Web Sites
Mailing Lists
USENET
Vendors
News

 GBIC >> HTML >> Frames
Frames
Basically, a frame is a way to split a web page into multiple, separately controlled sections. Each section can contain a different URL and may be viewed/scrolled separately from any other frames that are being displayed in the browser. A common use of frames is to have static content on one side of the browser (such as a menu) and dynamic content (such as the URLs corresponding to the menu selections) on the other side of the browser.

I'm not a huge fan of frames and I don't use frames on any of the approximately 1500 web pages at this site. Because of the difficulties in navigating, printing and saving a page with frames many surfers feel the same way, but that hasn't stopped many web site designers from using frames anyways.

Inline Frames Standard Frames

Return to top of document

Inline Frames

There are two general techniques for using frames. The first is simply to display a second URL in the middle of a web page. The <iframe> tag is used to do this. Just place the <iframe> tag anywhere in the HTML file and the referenced URL will be displayed at the location of the tag (just like images are displayed at the point where the <img> tag is embedded.

To make the <iframe> tag work the src attribute must be set, as in the following example: 

    <iframe src="htm-adv.htm">

There are twelve different attributes of the <iframe> tag that can be used to control how the inline web page is displayed. The height and width attributes are particularly useful and determine how large an area will be used to display the inline frame.

Here's a sample of an inline frame, where a second URL is visible within the frame that is defined as 100x400 in size. The code that generates the inline frame is also shown. Note that the </iframe> closing tag must be used even though no information is found between the tag pair. 

  <iframe src="htm-adv.htm" height=100 width=400>

Return to top of document

Standard Frames

The second approach to using frames is to think of the web page as a table of rectangular areas (cells), where each cell is a separate URL. Here's the code for a simple, but very useful example. This code creates a web page that has just two frames, one on the left (called 'left') and one on the right (called 'right'). To get a URL to appear in a frame, the target attribute of the anchor is set to the frame name. The one on the left is narrow, containing a menu of clickable links. The frame on the right contains the URL corresponding to the menu item that has been clicked: 

    <html>
    <frameset rows="100%" cols="20%,80%">
    < frame src="htm-menu.htm" name=left>
    < frame src="htm-over.htm" name=right>
    </frameset<
    </html>

This code is implemented here and looks like this: