FRAMES in HTML
Version 3.0 - May 3, 2003
Hold mouse here for list of most recent changes.
Receive notice whenever this page is updated.
(This page presumes familiarity with basic HTML. If you wish to refresh the basics, or do not yet have the basics, please see the Basics in HTML page, then click back here for instruction in Frames.)
Frames provide a powerful (and thus easy to abuse!) way to structure Web pages for multiple purposes. This is accomplished by displaying more than one HTML document or other file at a time.
In the early days of frames — the days when Netscape was frame-capable but the early versions of Internet Explorer were not — I learned just how badly people could abuse frame structures. Because early IE (which was my introduction to the World Wide Web) couldn’t display frames, I never saw them until I tried Netscape — at which point it took me less than an hour to decide that I really hated Netscape and this “strange way” it made Web pages look! (These were the days of a 13-inch monitor!) I raced back to IE as fast as I could go. It was probably a year before someone pointed out that the only difference was that Netscape was showing me frames, and that it was the page designs that were to blame — not the browser!
<frameset> ... </frameset>
Use this instead of the <body> tag. It provides the structural format for the frame-based Web page (hereafter referred to as the “master page”). See below for attributes to this tag.
<frame>
Specifies the files that will provide the content to each frame of your master page, and various attributes of the frame. See below for attributes to this tag.
<noframes><body> ... </body></noframes>
Provides alternative content on the page, which will be used by older browsers that do not support frames. Place the <noframes> block at the end of the HTML file, before the closing </frameset> tag. The most extreme use of <noframes> would be to replicate the entire body of the page you want to display. A more conservative approach would be to provide a link to the nonframe version of the page. If your particular pages just don’t work well without frames, another approach is to provide a message concerning this to the visitor, perhaps including recommendations for a browser upgrade.
Here is the code for the actual Web page, www.aumha.org/html/frames.htm, which you are viewing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Coding Frames in HTML</title>
</head>
<frameset rows="50,*" frameborder="0" frameborder="no" framespacing="0" border="0">
<frame src="../navbar.htm" marginwidth="1" marginheight="1" scrolling="no">
<frameset cols="175,*" frameborder="0" frameborder="no" framespacing="0" border="0">
<frame src="frames2.htm" name="choices" scrolling="auto">
<frame src="framesz.htm" name="khephra">
</frameset>
</frameset>
</html>
As you will see, the basic approach is to make a separate HTML document for each frame of your master document, then reference them in the master document’s <frame> tags. The master document (in this case, frames.htm) is then the page that you link to or call. In the present example, the master page calls three files: navbar.htm, which provides the navigation bar at the top of this page, and frames2.htm and framesz.htm, which provide the left and right portions of the body of the page you are now reading.
The second <frameset> line inaugurates a second frameset inside the first. It acts in most respects as if it were a second <frame> tag within the first <frameset>. As will be detailed below, this is necessary because we cannot divide rows and columns at the same time. We first divide the page into two rows (navbar.htm and the rest), and then divide the second row (which takes up most of the page) into its two columns.
cols="x%, y%, z%, etc." or
cols="x, y, z, etc."
Specifies how many columns are in the frame, and their relative sizes in %, or their actual sizes in pixels, from left to right. (The default is one column.)
rows="x%, y%, z%, etc." or
rows="x, y, z, etc."
Specifies how many rows are in the frame, and their relative sizes in %, or their actual sizes in pixels, from top to bottom. (The default is one row.)
For both cols= and rows= attributes, you can use an asterisk (*) to assign the balance (remainder) of all space that you have not specifically allocated to another column or row. In the sample, master document above, 50 pixels are given to the first row, and the balance (*) to the remaining row, i.e., to the rest of the page. In the second <frameset>, 175 pixels are given to the first column, and the balance (*) to the remaining column (the rest of the page).
HINT: In practice, cols and rows are not set in the same <frameset> tag, because such a usage generally doesn’t create a desirable page design. However, it is perfectly legal to do so, to create a grid effect.
HINT: If you have more than one column or row assigned the balance (*) of all available space, the balance will be divided equally between or among them, by default. You can, however, put a numeral in front of one or more of the asterisks to establish a ratio for distributing the space; e.g, <frameset rows="*, 40%, 3*"> assigns 40% of the screen to the middle column, and divides the remaining 60% between columns 1 and 3, with the third column getting three times as much of the screen as the first column.
HINT: If you assign sizes of multiple columns or rows in pixels instead of %, be sure to assign the balance (*) size to at least one of them to make it elastic. Otherwise, your frame will not fit right on screens of different sizes and video resolutions.
frameborder="n"
Can be set to either yes (or 1) or no (or 0), to control whether the frame has a border between itself and each adjoining frame. (See the sample above.) The default is frameborder="1" or frameborder="yes" . Unfortunately, some browsers honor one of these and not the other. Internet Explorer can be counted on to recognize 0 and 1, and Netscape can be counted on to recognize no and yes. As was done in the sample above, you may wish to use both!
NOTE: The presence or absence of visible borders is not supposed to affect whether or not bounded frames can be resized. Unfortunately, in some browsers it does: For those browsers (including older versions of both Internet Explorer and Netscape), turning off the visible border also engages the noresize option. If it is important that visitors be able to resize frames on a particular page, consider leaving the frameborder enabled.
framespacing="n" and border="n"
These control the amount of spacing between frames, in pixels. (Default is 1, but it can be set to 0.) Unfortunately, some browsers honor one of these and not the other. Internet Explorer can be counted on to recognize framespacing, and Netscape can be counted on to recognize border. As was done in the sample above, you may wish to use both!
FRAME tags are inserted after the <frameset> tag, just as if you were inserting HTML tags and content after the <body> tag of a non-frame HTML document. The order in which you list frames is the order in which they are loaded in successive columns or rows. As is shown in the sample above, you may put additional <frameset> tag pairs within a given frame, that is, between a pair of <frameset> and </frameset> tags, much as you would put a <frame> tag. This is used to put multiple columns within a row, or multiple rows within a column.
Attributes that can be used with the <frame> tag include:
src="n"
Specifies the contents of the frame; that is, what file is to be loaded into it. (Compare this to img src= for loading image files. In fact, you can use src= in a <frame> tag to load an image file instead of a document file, if you wish, and the same rules apply as with an <img> tag.)
name="n"
Gives the frame a name so that it can be referenced. This name must begin with an alphanumeric character, except in four special situations using the underscore _ character. (See the second and third frames in the sample above.) A frame’s name enables a document loaded into one frame to link to another document and force it to open in the named frame, using the target="framename" tag. This is very handy for menu or navigation bars. target= variations include:
target="_self" loads the linked file into the frame that is calling it. (This is the default.)
target="framename" loads the linked file into the named frame.
target="_blank" opens a new browser window to display the linked file.
target="_top" loads the linked file into the the current browser window, overwriting the current master document rather than loading it into a frame of the current master document. That is, it acts like a link would act from a non-frame page. HINT: I use this attribute on most pages of this present site to let the navigation bar, or links on various pages, load other pages that also have the navigation bar frame. Otherwise, every time you clicked to go to a new page, you would add one more navigation bar layer to your on-screen collection! Right-click on the navigation bar at the top of this page and select “View Source” to see the different ways each button’s link is coded.
target="_parent" loads the linked file into the “parent” of the frame that calls it.scrolling="n"
Specifies whether scrollbars appear at the edge of the frame. You may set n to yes, no, or auto. (The default is auto, meaning that either scrollbar appears only if needed, and does not appear otherwise.)
frameborder="n"
This attribute can be used in a FRAME tag as well as in a FRAMESET tag to control whether the frame has a border between itself and each adjoining frame. See the discussion above to more details.
border="n"
Specifies the border thickness between frames. The default is 6 in current versions of the leading browsers, but may vary with other browsers.
bordercolor="n"
For this attribute, n is either a color label (e.g., red) or an RGB code (e.g., #ff0000).
marginwidth="n"
Specifies the frame’s left and right margins, in pixels. The minimum value of n is 1. Most browsers use a default of about 12. (See the sample above.)
marginheight="n"
Specifies the frame’s top and bottom margins, in pixels. The minimum value of n is 1. (See the sample above.)
HINT: If you have items with exact sizes (such as images) in columns or rows, set your column width to about 25 pixels, or row height to about 8 pixels, larger than the minimum required size.
HINT: If you have a marginwidth or marginheight greater than 1, add an additional number of pixels to the column width or height (respectively) equal to twice the amount that the margin is greater than 1. This is necessary because the increase you add is applied to both sides of the frame’s contents.
HINT: You can use the <base target="framename"> tag in the HEAD portion of a page to specify that all links on that page load into the frame specified in framename.
noresize
By default, viewers usually can click-and-drag a frame border to resize it. The noresize attribute disables that. HINT: Because this affects adjacent frames also, test all frames to make sure that you have exactly the effect you want. Given the wide range of monitor sizes and screen resolutions in use, and to increase general accessibility to your pages, use the NORESIZE attribute sparingly.
A little-seen HTML tag is <iframe> tag, or Inline FRAME tag. This embeds another frame right in the middle of a page without the need for the <frameset> structure. However, older browsers may not support it (iframe requires at least IE 3.0 or Netscape 6.0), in which case the inline frame will not appear on the page.
To use iframe, simply put this pair of tags in the body of a page where you want the inline frame to appear. Nothing goes between the opening and closing iframe tags. You may position the frame with attributes to the <iframe> tag such as align=, specify which page is displayed with src=, size it with height= and width= attributes, or use the name, marginwidth, marginheight, frameborder, and scrolling attributes.
I’ve made use of the <iframe> tag on this site, in a fairly invisible and rather atypical way, on Gary Woodruff’s article, File & Settings Transfer Wizard. Feel free to view the source code to see what I did. In this instance, I used it to overcome a problem caused by that article requiring a large number of illustrations which are extremely slow to load. By setting each of them in an iframe and letting them import in that fashion, the overall page loaded dramatically faster — a few seconds on dial-up rather than over five minutes! — and the framed JPEG files imported fairly quickly after that. In this case, I didn’t have to worry about the limitations of browsers used, because the page was intended for Windows XP users who, by default, would have IE 6.0.