HTML Frames

Learn how to create HTML frames. This article shows how to use the FRAME and FRAMESET tags, how to link between frames, and some frameset examples.

When HTML frames were first introduced into Netscape 2 and IE 2.1, they were often criticized as ugly, slow and unmanageable. Thankfully, today's browsers have come along way with their implementation of frames, and if properly used, frames can help to make a site more attractive and easier to navigate.

For example, a site can use one small frame for its navigation menu, with the main content displayed in a second, larger frame. The navigation frame remains the same while the main content frame changed to display the different content pages.

HTML frames can also be used in an arty way to position graphic elements on the screen. See our PageKit Online Japery for an example of this.

The HTML frameset and frame tags

The two tags used to create a framed site are <frameset> and <frame>. The first of these, <frameset>, is placed at the top of your site, where you would normally put a <body> tag. The second tag, <frame>, is used to specify each frame within the frameset. In addition, you can put further <frameset> tags within the outer <frameset>, so you can have nested frames.

To simplify things, we're not going to cover the whole <frameset> and <frame> syntax here; just the options that are most often used.

Let's take a look at the <frameset> tag first:


<frameset rows|cols="a,b,c,..." border=n frameborder="1|0"
    framespacing=n>
.
.
.
</frameset>

All the attributes are optional except the rows or cols attribute.

The first attribute, rows or cols, specifies whether the frameset will consist of frames lined up in rows or columns. (To create a frameset containing both rows and columns, you need to nest framesets inside the main frameset — see the frameset examples section at the bottom of the page.)

The rows and cols attributes also allow you to specify how those rows or columns will appear within the frameset. Each of the rows/columns is specified in turn, separated by commas. Each value can take one of the following four forms:

n
The row/column will be n pixels deep/wide
n%
The row/column will take up n% of the width/height of the parent window/frame
*
The row/column will take up whatever space is available to it
n*
The row/column will take up proportionately n times as much space as a row/column defined with *

The border attribute allows you to specify the width (in pixels) of the borders between the frames in the frameset. The default on most browsers is 5 pixels wide.

The frameborder attribute specifies whether the frames will have borders or not. Often it is nice to have seamless frames, as in the Online Japery frameset — this option allows you to turn off frame borders altogether with frameborder=0. Note that this will not always produce borderless frames in all browsers, as they all have additional settings which can result in flat-colour borders between frames! To be safe, specify border=0, frameborder=0 and framespacing=0.

The framespacing attribute specifies the width between frames in pixels, and hence the border width; effectively the same as the border attribute.

Now let's take a look at the HTML <frame> tag:



<frame src="frame-source" name="frame-name"
    scrolling="yes|no|auto" frameborder="1|0"
    noresize marginwidth="n" marginheight="n">
.
.
.
</FRAME>

All the attributes are optional.

Here's how these frame attributes work:

src
Specifies the content of the frame - usually an HTML page. For example, <frame src="main.html"> will create a frame which displays the page main.html. It's always a good idea to specify a source for each frame, although you don't have to.
name
Allows you to associate a name with each frame in the frameset. This is necessary to target frames (see the linking between HTML frames section). Example: <frame name="main">.
scrolling
Selects whether the frame will have scrollbars in it. A value of "yes" means it will always have scrollbars; "no" means it never has scrollbars; and "auto" means it will have scrollbars only if the frame's content is too big to fit in the frame.
frameborder
This works like its equivalent in the frameset tag, and allows you to turn the border off or on for individual frames (the border will only turn off between two adjacent frames if they both specify frameborder=0).
noresize
If present, this attribute means that the user cannot resize the frame by dragging the frame border around.
marginwidth and marginheight
These control how much space appears between the edges of the frame and the frame's content, in pixels. If they're not specified, default values are used (approx. 10 pixels, though different browsers have different defaults!).

Take a look at some of the frameset examples at the end of this page to see how the <frameset> and <frame> tags work together.

Linking between HTML frames

Often you want to have a hyperlink in a document in one frame that opens a document in another frame. For example, one frame might be a navigation or menu frame, containing links to pages that should be opened in another frame.

So how's it done? Easy. You add the attribute target to the <a> tag to specify the name of the frame to open the page in. You did give each frame a name, right? :)

For example, say your frameset has two frames, called main and menu. Your menu frame has a src of menu.html. You have a link in your menu.html page to a page called services.html, that you want to appear in the main frame. This is how you do it:


<a href="services.html" target="main">Our Services</a>

This link, when placed in the menu.html page, will cause the page services.html to be opened in the main frame.

There are some special values that you can use for target. These are:

_parent
The page will be loaded into the frameset containing the current frame (for nested framesets).
_top
The page will replace the topmost frameset, i.e. load into the whole browser window. Great for replacing one whole frameset with another.
_blank
The page will be loaded into a brand new browser window, causing a new window to open.
_self
The page will always load into the same frame as the link is in. This is the default target anyway, but the default can be overridden by specifying the line <base target="frame-name"> in the page's head element.

Linking to other sites within frames

When linking to external sites from within your frameset, it's considered good netiquette to load the external page into the main browser window using target="_top".

Coding for frameless browsers

It's a good idea when using HTML frames to provide an alternative page for early browsers that don't use frames, even if that page just says "get a newer browser!". If you don't do this, older browsers will just display a blank page, and people will think your site doesn't exist!

You provide an alternative page by using the <noframes> and </noframes> tags before your </frameset> tag. Frame-aware browsers will ignore everything between these tags, while older browsers will go ahead and display the content. For example:



.
.
.

<noframes>

<p>Spoil yourself - get a new browser!</p>

</noframes>

</frameset>


Some frameset examples

Let's have a look at a couple of sample framesets, along with the HTML that makes them.

1. The "menu-on-the-left" frameset

This is a pretty common frameset, where the page is split into two columns. The narrow left hand column contains graphic or text links to pages which appear in the right hand column. This neat approach means that, for smallish sites, all of the site content can be accessed via the links in the left hand frame.

View the frameset. (Use your browser's Back button to return here.)


<html>
<head>
<title>"Menu on the left" example</title>

<frameset cols="140,*">

    <frame name="menu" src="menu.html">
    <frame name="main" src="welcome.html">

</frameset>

</html>

2. A three-framed frameset

This example uses nested framesets to display two menu frames, one along the top and one down the right-hand side.

View the frameset. (Use your browser's Back button to return here.)


<html>
<head>
<title>"Three-frame" example</title>

<frameset cols="*,150">

    <frameset rows="104,*">

        <frame name="top" src="top.html" noresize scrolling=no
                         marginheight=5 marginwidth=5>
        <frame name="main" src="welcome.html" noresize scrolling=auto
                         marginheight=5 marginwidth=5>

    </frameset>

    <frame name="right" src="right.html">

</frameset>

</html>

Take a look at some of the framesets in our PageKits as well. Download them and open them in a text editor. Study the usage of the HTML <frameset> and <frame> tags and look at how the pages interact with each other. Soon you'll be creating beautiful framed websites. Good luck!

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page