Basic HTML

Advance HTML

HTML Tags Reference

HTML Code Generator

HTML Resource


HTML Frames Tutorial




Definition and Usage

HTML Frames 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

<body> tag is not used in any HTML webpage that contains <frameset> tag.

Attributes Value Description
cols "50%, 50%, *" Set to specify the number of column in which you divide on page. Its value supported pixels and percentage.
* means define all other size assign.
rows "50%, 50%, *" set to specify the number of row in which you divide on page. Its value supported pixels or percentage.
* means define all other size assign.
noresize
 
Used to you do not want to frames resize.
border "Size_px" Display size of border thickness.
frame bordercolor "purple" Display border color on dived individual frames.

<frame> tag Attributes

Used to include the web page details into the <frame> tag.

Attributes Value Description
src "Specified_URL" Use to specify URL to wish open the web document.
name "alternate_name" Use to specify the name to idenfity this frame to open document.
scrolling "auto","yes","no" Used to display on scrolling.
marginwidth "Size_px" Display margin of the width of left or right.
marginheight "Size_px" Display margin of the height of left or right.
noresize
 
Used to you do not want to frames resize.

Frame Example.1       View Result

The frameset (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>

The Frame.1 (frame_1.html):

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

The Frame.2 (frame_2.html):

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

Frame Example.1 View Result



Frame Example.2       View Result

The frameset (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>

The Frame.1 (frame_1.html):

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

The Frame.2 (frame_3.html):

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

The Frame.3 (frame_4.html):

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

Frame Example.2 View Result


Remove the Frame Border (Frame Example.3)  View Result

The frameset (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>

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 Example.3 View Result