Frames is an HTML features, which divide a browser window into rectangular regions containing separate Web pages.

  • Each of such regions is known as a frame.
  • Just like tables, frames allow text and graphics to be arranged into rows and columns.
  • However, in contrast to a table cell, a frame may contain links that change the contents of other frames or itself.

Click here to see one of the examples how frames work in the real world.

 

A frameset document actually has no contents, but tells a Web browser which other pages to load and how to arrange them in the browser window.

  • It simply instructs the Web browser to split its window into multiple frames, and then specifies which Web page should be displayed in each frame.
  • The <FRAMESET> and </FRAMESET> tags also replace the <BODY> and </BODY> tags completely because frameset is designed to load other HTML pages that do include the <BODY> and </BODY> tags.

The <FRAMESET> tag accepts two attributes: rows and cols.

  • Both attributes accept numerical values (size in pixel), percentages, or a combination of both.
  • The value * can be used to suggest that a particular row or column should take up the rest of the page.
  • The number of rows or columns is determined by the number of values given to the attribute.
  • Note that each <FRAMESET> statement only works with one attribute or the other (i.e., either rows or cols).

The following example creates two rows: one row that is 80 pixels long and another that takes up the rest of the page.

<FRAMESET rows="80, *">

The following example creates two columns: one on the leftmost, which occupies 25% of the screen and another one that occupies 75%.

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

 

The <FRAME> tag is used within the <FRAMESET> and </FRAMESET> tags to determine which Web page actually appears in a particular frame.

The source codes below demonstrate the use of the <FRAME> tag.

The following codes create a frameset of two rows: one that loads the menu.htm at the top of the Web page and another that loads the details.htm at the bottom of the page.

Click here to review how the above document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<FRAMESET rows="20%, 80%">
<FRAME src="menu.htm">
<FRAME src="details.htm">
</FRAMESET>
</HTML>

The following codes create a frameset of two columns: one that loads the menu.htm on the left of the Web page and another that loads the details.htm on the right of the page.

Click here to review how the above document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="menu.htm">
<FRAME src="details.htm">
</FRAMESET>
</HTML>

 

The <NOFRAMES> and </NOFRAMES> tags enclose HTML intended for browsers that do not support frames.

  • Text and HTML tags inside the <NOFRAMES> and </NOFRAMES> tags are ignored by frames-capable browsers.

The following codes create a frameset of two columns, and display some text in browsers that do not support frames.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="menu.htm">
<FRAME src="details.htm">
<NOFRAMES>
<P>This page requires a Frames-capable Browser. Please upgrade your browser.</P>
</NOFRAMES>
</FRAMESET>
</HTML>