HI WELCOME TO SIRIS

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.
AttributesValueDescription
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.
AttributesValueDescription
frameborder0
1
Specify whether display a border or not.
longdescurlSpecify URL link to another page having a long description of the frame contents.
marginheightpixel_sizeSpecify the top and bottom margins of frame.
marginwidthpixel_sizeSpecify the left and right margins of frame.
namenameSpecify the frame name.
noresizenoresizeSpecify that prevents to resize frame.
scrollingauto
yes
no
Specify weather scrollbars should be display or not.
srcurlSpecify 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>

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>

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>