• Home
• About
• FAQ
• Contact
• Link
• Sitemap
• Forums

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

HTML frames

Displaying a webpage in a browser is great, but what if you had the ability to display more than one webpage at a time?

This tutorial focuses on:

• What are frames?
• The <frameset> tag
• The <frame> tag
• Linking within frames
• Building a frames page
• Dealing with browsers that do not support frames
• Inline frames
• Disadvantages of frames

What are frames?

In HTML, frames are a way to display more than one webpage in the same window. Each of these pages will be called a frame. The main page will not have any content on it, but will contain a 'frameset' that will consist of these frames.

The <frameset> tag

The <frameset> tag specifies that a page will be composed of frames.

The <frame> tag

The <frame> tag denotes a frame in a frames page.

NOTE: The <frame> tag has no end tag.

In this example, there is a frameset with two rows. The first row is set to 50% of the height of the browser window, and the second row is set to 50% as well.

Linking within frames

What if you want to open a link from one frame in another frame? How does linking work with frames?

Linking from one frame to another

To link from one frame to another, use the target attribute in the <a> tag and set it to the name of the frame where you want the content of that link to appear.

Notice how in the code the target of the link is specified as "frameLinked" using the target attribute. This ensures that the link will open in the second frame.

Opening a link from a frame in a new window

To open a link from a frame in a new window, use the target attribute in the <a> tag and set it to _blank, the same way you would for any other link.

Opening a link in the same window and breaking out of a frames page

To open a link in the same window and break out of a frames page, use the target attribute in the <a> tag and set it to _top

NOTE: Example below will open links for the entire web browser window, not just the frame.

Building a frames page

Start out with a basic structure -- just the <frameset>tag:

Decide if you're going to have a vertical or horizontal frameset. If it's vertical, you're going to be using the cols attribute of the <frameset> tag. If it's horizontal, you're going to be using the rows attribute. Let's go with horizontal!

Decide how much space each frame will take up in the browser window, and code this:

In this case, the rows attribute will take three values, each signifying the amount of space each frame takes. Remember that you will need to supply as many values as there are frames for either the cols or rows attribute.

NOTE: The * symbol in the above example means whatever space is left, in this case it is 20%

Put the frames in the frameset:

Ask yourself a few questions about how you want the page with the frames to function.

• Should the frames have a border?
  For this, use the border attribute inside the <frameset> tag. If you set the border attribute to "0", you can create the illusion that the frameset is actually one page.
• Should the frames be resizable?
  If you want the frames to be resizable, no additions are needed as they are resizable by default. If you don't want the frames to be resizable, include the noresize attribute inside each <frame> tag and set it to noresize.
• Should the frames be scrollable?
  Do you want the frames to have a scrollbar if the content gets to long or to wide and goes off screen? For this, the scrolling attribute should be used inside the <frame> tag. The scrolling attribute takes a value of "yes" for a scrollable frame, or a value of "no" for a non-scrollable frame.

With these questions in mind, lets make our frames page have a border of 1, where none of the frames are resizable, and only the middle frame has a scrollbar.

Click here to see the frames page in a separate window.

Dealing with browsers that do not support frames

Not all browsers can handle frames. For such a situation, use the <noframes> tag. If someone tries to access a frames page through a browser that can not handle frames, they will see what is specified with the <noframes> tag.

NOTE: When creating a frames page, do not use the <body></body> tags. However, if you use the <noframes> tag, sorround the data in it with <body></body> tags. Also, the <noframes> tag should go inside the <frameset> tag.

Inline frames

Another type of frame is an inline frame - a frame inside a webpage that contains within it another webpage, but is not within a frameset. An inline frame is declared with the <iframe> tag.