Copyright ©

HTML Frames

previous next


Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. One of the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the browser window. A collection of frames in the browser window is known as a frameset.

The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. The simplest of framesets might just divide the screen into two rows, while a complex frameset could use several rows and columns.

There are few drawbacks also you should be aware of with frames are as follows:

To create a frameset document, first you need the <frameset> element, which is used instead of the <body> element. The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. Each frame is then represented by a <frame> element.

You also need to learn the <noframes> element, which provides a message for users whose browsers do not support frames.

Now we will discuss these tags in detail one by one.

Creating Frames - The <frameset> Element:


Following is the example to create three horizontal frames:

<title>Frames example</title>
   <frameset rows="10%,80%,10%">
      <frame src="/html/top_frame.htm" />
      <frame src="/html/main_frame.htm" />
      <frame src="/html/bottom_frame.htm" />
      Your browser does not support frames.

Now create three HTML files called top_frame.htm, main_frame.htm and bottom_frame.htm to be loaded into three frames with some content.

To become more comfortable - Do Online Practice

The <frameset> Element Attributes:

Following are important attributes of <frameset> and should be known to you to use frameset.

Loading Content - The <frame> Element:

The <frame> element indicates what goes in each frame of the frameset. The <frame> element is always an empty element, and therefore should not have any content, although each <frame> element should always carry one attribute, src, to indicate the page that should represent that frame.

From the above example, lets take small snippet:

   <frame src="/html/top_frame.htm" />
   <frame src="/html/main_frame.htm" />
   <frame src="/html/bottom_frame.htm" />

The <frame> Element Attributes:

Following are important attributes of and should be known to you to use frames.

Browser Support - The <noframes> Element:

If a user is using any old browser or any browser which does not support frames then <noframes> element should be displayed to the user.

In XHTML you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand the <frameset> element it should understand what is inside the <body> element contained in the <noframes> element.

You can put some nice message for your user having old browsers. For example Sorry!! your browser does not support frames.

Frame's name and target attributes:

One of the most popular uses of frames is to place navigation bars in one frame and then load the pages with the content into a separate frame.

As you have already seen, each <frame> element can carry the name attribute to give each frame a name.This name is used in the links to indicate which frame the new page should load into. Consider this very simple example, create following content in index.htm file:

<frameset cols="200, *">
   <frame src="/html/menu.htm" name="menu_page" />
   <frame src="/html/main.htm" name="main_page" />

There are two columns in this example. The first is 200 pixels wide and will contain the navigation bar. The second column or frame will contain the main part of the page. The links on the left side navigation bar will load pages into the right side main page.

Keep some content in main.htm file and the links in the menu.htm file look like this:

<a href="" target="main_page">Google</a>
<br /><br />
<a href="" target="main_page">Microsoft</a>
<br /><br />
<a href="" target="main_page">BBC News</a>

To Become more comfortable - Do Online Practice

The target attribute can also take the attribute values listed in the table that follows.

_selfLoads the page into the current frame.
_blankLoads a page into a new browser window.opening a new window.
_parentLoads the page into the parent window, which in the case of a single frameset is the main browser window.
_topLoads the page into the browser window, replacing any current frames..

Inline Frames - The <iframe> Element:

You can define an inline frame with the <iframe> tag. The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders.

Use the src attribute with <iframe> to specify the URL of the document that occupies the inline frame.

All of the other, optional attributes for the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag.

Following is the example to show how to use the <iframe>. This tag is used along with <body> tag:

...other document content...
<iframe src="/html/menu.htm" width="75" height="200" align="right">
Your browser does not support inline frames. To view this
<a href="/html/menu.htm">document</a> correctly, you'll need
a copy of Internet Explorer or the latest Netscape Navigator.
...subsequent document content...

The align attribute lets you control where the frame gets placed in line with the adjacent text or moved to the edge of the document, allowing text to flow around the frame.

For inline alignment, use top, middle, or bottom as the value of this attribute. The frame is aligned with the top, middle, or bottom of the adjacent text, respectively. To allow text to flow around the inline frame, use the left or right values for this attribute. The frame is moved to the left or right edge of the text flow, respectively, and the remaining content of the document is flowed around the frame. A value of center places the inline frame in the middle of the display, with text flowing above and below.

To Become more comfortable - Do Online Practice

previous next

Copyright ©