HTML Frame Tutorial

Definition

HTML Frame used to split the browser window in several individual frames that can contain a separate HTML web document.
Frame is use to improve appearance and usability of a site.
HTML document within frame include a other web pages link can be opened in the desired frame.

Advantages of Frames

Frame Provides technical sophisticated appearance to the web site.
It facility to reduce downloading time and improves the usability of the website.
Frames generally include navigation link, header or footers, which help user to find and navigate to required information.
It separates content of website from navigation elements, which is useful for website maintenance and content modification.

Disadvantages of Frames

The web developer must be track of more HTML documents linked with main frame.
It is difficult to print the entire page, which is developed using frame.

<frameset> tag Attributes

HTML <frameset> tag support following specific attributes.

Attributes	Value	Description
cols	* % pixels	Specifies the number of columns and their width in a frameset. Default value is 100%. : Allocated remaining size of the window. Eg. Create two vertical frames, use cols="35%, ". Here * will takes remaining size of the window.
rows	* % pixels	Specifies the number of rows and their height in a frameset. Default value is 100%. : Allocated remaining size of the window. Eg. Create two horizontal frames, use cols="40%, ". Here * will takes remaining size of the window.

<frame> tag Attributes

HTML <frame> tag support following specific attributes.

Attributes	Value	Description
frameborder	0 1	Specify whether display a border or not.
longdesc	url	Specify URL link to another page having a long description of the frame contents.
marginheight	pixel_size	Specify the top and bottom margins of frame.
marginwidth	pixel_size	Specify the left and right margins of frame.
name	name	Specify the frame name.
noresize	noresize	Specify that prevents to resize frame.
scrolling	auto yes no	Specify weather scrollbars should be display or not.
src	url	Specify web document URL to show in a frame.

Frame Example 1

frame_1.html

<html>
<body style="background-color:#ff9900;">
  <h2 align="center">First frame (frame_1.html)</h2>
</body>
</html>

frame_2.html

<html>
<body style="background-color:#ffcc00;">
  <h2 align="center">Second frame (frame_2.html)</h2>
</body>
</html>

frame_example1.html

<html>
<head>
  <title>Frameset Example 1<title>
</head>
<frameset rows="35%, 65%">
  <frame src ="frame_1.html" />
  <frame src ="frame_2.html" />
</frameset>
</html>

Run it... »

Frame Example 2

frame_1.html

<html>
<body style="background-color:#ff9900;">
  <h2 align="center">First frame (frame_1.html)</h2>
</body>
</html>

frame_3.html

<html>
<body style="background-color:#a08029;">
  <h2 align="center">Second frame (frame_3.html)</h2>
</body>
</html>

frame_4.html

<html>
<body style="background-color:#ffcc00;">
  <h2 align="center">Third frame (frame_4.html)</h2>
</body>
</html>

frame_example2.html

<html>
<head>
  <title>Frameset Example 2<title>
</head>
<frameset rows="35%, 65%">
  <frameset cols="50%, 50%">
    <frame src ="frame_3.html" />
    <frame src ="frame_4.html" />
  </frameset>
</frameset>
</html>

Run it... »

Frame Example 3 (Remove the frame border)

Top Navbar (top_nav.html)

<html>
<body style="background-color:#CCCC00;color:white;font-family:verdana; font-size:14px;">
  <h3>Top Navbar</h3>
</body>
</html>

Menu List (menu_list.html)

<html>
<body style="background-color:#ff6600;color:white;font-family:verdana; font-size:14px;">
  <h3>Menu List</h3>
</body>
</html>

Content (content.html)

<html>
<body style="background-color:#ffcc00;color:white;font-family:verdana;
font-size:14px;">
  <h2>Content</h2>
  <ul>
    <li><a href="http://www.way2tutorial.com" target="_blank">
      Online Web Developemnt Tutorial</a></li>
  </ul>
</body>
</html>

Footer (footer.html)

<html>
<body style="background-color:#000000;color:white;font-family:verdana;font-size:14px;">
  <h3>Footer</h3>
</body>
</html>

frame_example3.html

<html>
<head>
  <title>Frame Example 3</title>
</head>
<frameset rows="100,*,75" frameborder="0" border="0" >
  <frame name="topNav" src="top_nav.html">
<frameset cols="200,*" frameborder="0" border="0">
  <frame name="menu" src="menu_list.html" scrolling="auto" noresize>
  <frame name="content" src="content.html" scrolling="auto" noresize>
</frameset>
   <frame name="footer" src="footer.html">
</frameset>
<noframes></noframes>
</html>

Run it... »