Join us Now |  Forgot Password? | Forgot UserName?


Learn step by step

HTML Frames

Frames divide a browser window into several panes, each pane containing a separate source element. One of the key advantages that frames offer is that you can then load the panes individually without loading whole window. A collection of frames is known as a frameset.
The document is divided up into frames in a same pattern the way tables are organized. The simplest of framesets might just divide the screen into two rows/halves, while a complex frameset could have several vertical and horizontal parts.
There are some drawbacks with frameset which are as follows

  • Not compatible with all browsers.
  • It doesn't works for smaller devices like tablets, mobile.
  • It is impacted by screen resolutions.
  • The browser's back button may not work as expected.

To create a frames, you need the <frameset> element, which is used instead of the <body> element. The frameset defines the vertical and horizontal division of your page, which in turn specify where each individual frame will go. Each frame is then represented by a <frame> element.
For browser not supporting frames <noframes> element can be used to display default message.
Now we will discuss these tags in detail.

Creating Frames - The <frameset> Element:
  • The <frameset> tag replaces the <body> element in frameset documents.
  • The <frameset> tag defines how to divide the window into frames.
  • Each frameset defines a set of rows or columns. If you define frames by using rows then horizontal frames are created. If you define frames by using columns then vertical farmes are created.
  • The values of the rows/columns indicate the amount of screen area each row/column will occupy.
  • Each farme is indicated by <frame> tag and it defines what HTML document to put into the frame.

<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.
The <frameset> Element Attributes:

Following are important attributes of <frameset> and are required to use frameset.

  • cols:specifies no. of columns in the frameset and the size of each column. You can specify the width of each column in one of four ways:
    • These are absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100".
    • A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%".
    • Wildcard symbol. In order to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remaining of the window.
    • As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth.
  • rows: attribute works same as cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns.
  • border: attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero specifies that no border should be there.
  • frameborder: specifies whether a three-dimensional border should be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border.
  • framespacing: specifies the amount of space within frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames.
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 so 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.

  • src: indicates the file path that should be used in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file available in html directory.
  • name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links to navigate between frames.
  • frameborder: attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> element, and the possible values are the same. This can take values either 1 (yes) or 0 (no).
  • marginwidth: allows you to specify space width between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10".
  • marginheight: allows you to specify space height between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight="10".
  • noresize: By default you can resize any frame by clicking/dragging on the borders of a frame. The noresize attribute prevents a user from resizing a frame. For example noresize="noresize".
  • scrolling: controls the appearance of the frame scrollbars. This takes values as "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars.
  • longdesc: allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm"
Browser Support - The <noframes> Element:

If a user is using 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 place some warning message for your user having non supporting 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 links in one frame and then load the pages with the content into a separate frame.

As you have already seen, each <frame> element can have a 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. This is a very simple example which will 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="http://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="http://news.bbc.co.uk/" target="main_page">BBC News</a>

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

Value Description
_self Loads the page into the current frame.
_blank Loads a page into a new browser window.opening a new window.
_parent Loads the page into the parent window, which in the case of a single frameset is the main browser window.
_top Loads 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.

Related Videos