Bare Bones Guide To HTML Frames
How to set up your frames index.html file
  1. A standard index.html file will be the home page for a frames site but, there are significant differences in how the default html code is set up for a Frameset home page.
  2. On a Frames based site the index.html, or home page, is referred to as the Frameset File or simply the "Frameset."
  3. The same set of default HTML tags used for a regular html page will be used for a frameset index.html page with one very important exception.
  4. There will be no BODY tags. You must not key them in in the first place or, if you are working with a default html code template, you will need to DELETE the two body tags.

The default HTML code for a FRAMESET index.html file that includes the frameset code will look like this.

<HTML>
<HEAD>
<TITLE><TITLE/>
</HEAD>

<FRAMESET COLS="25%,75%">

<FRAME NAME="left" SRC="left.htm">
<FRAME NAME="right" SRC="main.htm">

</FRAMESET>

</HTML>

Example 1. Basic two column frameset with each column width set as a percentage of the width of the viewers browser window. The alternate beginning FRAMESET tag shows the column widths set in pixels. Note the comma that separates the frame dimension values.

<FRAMESET COLS="25%,75%"> (alternate <FRAMESET COLS="200,400">)

<FRAME NAME="left" SRC="left.htm">
<FRAME NAME="right" SRC="main.htm">

</FRAMESET>

How It Works

The opening frameset tag <FRAMESET COLS="25%,75%"> defines the structure of the frameset display. This code specifies a frame display that has two vertical "COLS" or columns. The first or left column will be 25% of the width of the browser window. The second or right column will occupy 75% of the browser window opening.

The information in the parenthesis, (alternate <FRAMESET COLS="200,400">), shows how to replace the percentage values with specific pixel dimensions. This prevents your frameset from re-sizing as the viewer expands and contracts their browser window. This is similar to setting a fixed width for tables or table columns using the "width=xx" pixels attribute.

The first line of <FRAME> code <FRAME NAME="left" SRC="left.htm"> gives the name "left" to the left frame and "calls" the static html page left.htm to open and display in the left frame.

The second line of <FRAME> code <FRAME NAME="right" SRC="main.htm"> gives the name "right" to the right frame and "calls" the static html page main.htm to open and display in the right frame.

The final line of code </FRAMESET> closes the frameset tag.

The frameset code sets up essentially empty spaces and calls other static html pages in your root directory to open and display in a specified empty frame.

The empty spaces are like a house window frame that has yet to receive it's stained glass window panes. The wooden or steel framework is there but there is nothing but air where the stained glass panes will be.

The web pages the <FRAME> tag refers to are like the stained glass. They display in the empty frame openings when called. But, better than a real window, you can target or direct other pages to open in the same frame opening.

A frame needs a name because it is necessary on a frames site to "Target" or specify exactly which Frame a static content page will open in. You will learn how to do this in this guide.

In these examples the individual frames are named for their relative positions, left and right. You could name them anything you want to. One frame could be named "mars" and the other named "venus." Using position specific naming conventions makes it easier to maintain a frames site, especially when you have to target or specify the specific frame a static content page is to open in.

Example 2. Basic two row frameset with each row height set as a percentage of the height of the viewers browser window. The alternate beginning FRAMESET tag shows the row heights set in pixels. Note the comma that separates the frame dimension values.

<FRAMESET ROWS="25%,75%"> (alternate <FRAMESET ROWS="250,250">)

<FRAME NAME="top" SRC="top.htm">
<FRAME NAME="bottom" SRC="bottom.htm">

</FRAMESET>

Scrolling Attributes

There are three scrolling attributes that can be added to a <FRAME NAME> tag.

  1. scrolling="no" This prevents scrolling.
  2. scrolling="yes" This shows a scroll bar all the time.
  3. Scrolling="auto" This displays a scroll bar only when needed.
  4. Two conditions control auto scrolling.
  5. If the content in the frame exceeds the display area of the frame, a scroll bar will appear.
  6. A user may make their browser window smaller. This may require the user to scroll to the left or right, or up and down to view all the content on a page.
  7. All three <FRAME NAME> tags in Example 3 below have a scrolling attribute.

Example 3. Basic three column frameset with the left column width set at 150 pixels, middle column variable width set by the asterisk and right column set at 150 pixels. Note the two commas that separate the frame dimension values.

<FRAMESET COLS="150,*,150">

<FRAME NAME="left" SRC="left.htm" scrolling="no">

<FRAME NAME="middle" SRC="middle.htm" scrolling="yes">

<FRAME NAME="right" SRC="right.htm" scrolling="auto">

 </FRAMESET>

NOTE: The scrolling characteristics of each frame have been set by the scrolling attribute. All three scrolling parameters, no, yes and auto are shown here.

Example 4. Basic three row frameset with a two column frameset nested inside the ROW frameset. The nested two column frameset occupies the second row defined by the asterisk in the beginning frameset tag of the primary frameset. Note the commas that separate the frame dimension values.

<FRAMESET ROWS="55,*,45">

<FRAME NAME="top" SRC="top.htm">

<FRAMESET COLS="150,*">

<FRAME NAME="left" SRC="left.htm">

<FRAME NAME="right" SRC="right.htm">

</FRAMESET>

<FRAME NAME="bottom" SRC="bottom.htm">

</FRAMESET>

How To Create Alternatives To Frames

Both Netscape and Internet Explorer have supported frames since versions 2.0 & 3.0 respectively.

If you want to reach the broadest possible audience, you can add the <NOFRAMES> tag set at the end of your frameset document. You can create alternate content and put it between the <NOFRAMES> tags. This content will be displayed for users who cannot access frames. The content that goes between the <NOFRAMES> tags will act as your home page and entry point to a no frames version of your website. If you plan carefully, the pages that open in the frame may be able to be recycled largely as they are for the noframes side of the site.

If you do not add the <NOFRAMES> tags, users who visit your site using browsers that do not support frames will see nothing, not a good plan!

The content you put between the <NOFRAMES> tags will NOT be shown in browsers that do support frames.

Example 5. Basic two column frameset with the <NOFRAMES> attribute added to the

<FRAMESET COLS="25%,75%">

<FRAME NAME="left" SRC="left.htm">
<FRAME NAME="right" SRC="right.htm">

</FRAMESET>

<NOFRAMES>
<BODY>

Put all alternate content here, between the two body tags as you would on a normal HTML document.

There are two approaches to supporting NOFRAMES.

The best way to approach NOFRAMES is to design it in from the beginning. This means that the same pages that will open in your frames site will be the pages for the NOFRAMES site with the important exception of the Home Page.

The Home Page html for the NOFRAMES side of the site goes here, between the <NOFRAMES> tags. Remember to include the <BODY> tags.

You then link out to the other pages that are also opening in the frame windows of the frames side of the site. Your "Home" navigation link on the NOFRAMES side of the site will link back to the index.html frameset file.

The second alternative is to simply indicate that your site requires a frames capable browser. All browsers since Netscape 2.2 and Internet Explorer 3.0 have supported frames. At the time of this writing, that is going back at least 6 years.

</BODY>
</NOFRAMES>

Special Frames Attributes

As with other HTML tags, it is possible to add attributes to lines of frames code that define a frameset. These attributes control special formatting elements like frames with no borders, margin widths & heights and the ability to target or specify the specific frame window or other window where local or external HTML pages will open.

How to Control The Width and Height of Margins.

You can specify the distance in pixels between any individual horizontal or vertical frame edge and the content in that frame by adding the MARGINWIDTH and MARGINHEIGHT attributes to the desired frame tag. You do not have to set margins for all edges in a frame. You may do it selectively for individual frames.

The margin widths in the example below have been set at 10 pixels and the margin heights have been set at 15 pixels in each FRAME tag below.

<FRAMESET COLS="25%,75%">

<FRAME NAME="left" SRC="left.htm" MARGINWIDTH=10 MARGINHEIGHT=15>
<FRAME NAME="right" SRC="right.htm" MARGINWIDTH=10 MARGINHEIGHT=15>

</FRAMESET>

How to Hide Frame Borders

To make all borders invisible, add these three attributes to the opening FRAMESET tag.

FRAMEBORDER=NO

BORDER=0

FRAMESPACING=0

Here is what the HTML code will look like when added to the opening frameset tag.

<FRAMESET ROWS="150,400" FRAMEBORDER=NO BORDER=0 FRAMESPACING=0>

This will also remove any gaps that may appear between the frame borders and the edges of the pages that display in the frame window.


To selectively display some borders when the topmost frameset is set to FRAMEBORDER=0, add FRAMEBORDER=1 to the desired FRAME or nested FRAMESET tag as in the example below

<FRAMESET ROWS="150,400" FRAMEBORDER=0>

<FRAME NAME="top" SRC="top.htm" FRAMEBORDER=1>
<FRAME NAME="bottom" SRC="bottom.htm">

</FRAMESET>

How to prevent visitors from re-sizing your frame windows

If you do not add the "NORESIZE" attribute to individual FRAME tags that are part of your FRAMESET document, visitors will be able to grab any of the horizontal or vertical frame borders and readjust the vertical and horizontal dimensions of your frame windows. This may not be desirable as it can mess up the formatting effect you want the visitor to see. As they change the size of frame windows, the position of images and text displayed inside the frame may change for the worse.

<FRAMESET COLS="25%,75%">

<FRAME NAME="left" SRC="left.htm" NORESIZE>
<FRAME NAME="right" SRC="right.htm" NORESIZE>

</FRAMESET>

How To Target Links to Open Pages In Specific Windows

When you set up your frameset code, you give each empty frame a "name" as described above. You use these frame window "names" to TARGET or direct a link to open in the frame that has been given the specific name.

When you set up a frames site, in most cases, you will have local or relative links to pages that are part of your site and absolute or external links to "http://www.anywhere.com" addresses out on the Internet. You can control the location where these pages will open in your frames page by adding "TARGET" attributes to the anchor or link code of the links on the pages that display in any of your frame windows.

In the two column frameset below

  1. The left frame window carries the NAME="left" attribute.
  2. The right frame window carries the NAME="right" attribute

"right" and "left" are the "names" of these two frame windows. It's like naming rooms in a house the "living room," "dining room" etc. You are simply naming a "space," in this case a virtual space, or area within your frames layout.

  1. The HTML page that will open in the left window is "left.htm"
  2. The HTML page that will open in the right window is right.htm"

<FRAMESET COLS="25%,75%">

<FRAME NAME="left" SRC="left.htm">
<FRAME NAME="right" SRC="right.htm">

</FRAMESET>

Now, imagine you have a hyperlink on your "left.htm" page that displays in the left frame. You want to direct the link to open the page it refers to in a different window like the right frame when the viewer clicks on the link. You control this with the "TARGET" attribute in the link code.

Imagine that the links below are on the "left.htm"page, the page that displays in the left frame.

This is a relative link that points to a local page in your root directory
<A HREF="hawaii.htm">Hawaii</A>

To make the local file hawaii.htm to open in the right frame, add the TARGET=right attribute to the link code as shown below.

<A HREF="hawaii.htm" TARGET=right>Hawaii</A>

How to force a page to open in a new browser window

The link below is an absolute link that points to an external web site. In most cases It is good HTML Frames design to have external pages open in a new and separate browser window. Otherwise, when an external page opens in a frame, they tend to be difficult to read and can cause navigation confusion for your users.

To make the http://www.cnn.com page to open in a separate browser window, add TARGET=_blank to the link code as shown below.

<A HREF="http://www.cnn.com" TARGET=_blank>CNN</A>

If you want the referred to relative or local page to open in the same frame, add the TARGET=_self attribute to the link code.

<A HREF="hawaii.htm" TARGET=_self>Hawaii</A>

If you want the referred to page to open in the same browser window the frameset is currently open in, add the TARGET=_top attribute to the link code.

<A HREF="http://www.cnn.com" TARGET=_top>CNN</A>

How To Set Up A Default Target For All The Links on One Page
You may want to set one single target location as the ONLY location where all links on a given frames page will open.

On the frameset page add the use the <base target=right> tag inside the HEAD tag container as shown below. In this example, all the links on this page will open in the frame named "right." You will not need to target individual links if you do this.

<html>
<head>
<title></title>

<base target=right>

</head>

<FRAMESET COLS="25%,75%">

<FRAME NAME="left" SRC="left.htm">
<FRAME NAME="right" SRC="right.htm">

</FRAMESET>

<html> Revised July 2003

Copyright 1997 - 2004 John Sedgwick
All Rights Reserved