Basic HTML

Advance HTML

HTML Tags Reference

HTML Code Generator

HTML Resource


HTML Frame Example



Frame Example.1       View Result

The frameset (frame_example1.php):

 
<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.php)</h2>
</body>
</html>

The Frame.2 (frame_2.html):

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

Frame Example.1 View Result



Frame Example.2       View Result

The frameset (frame_example2.php):

 
<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.php)</h2>
</body>
</html>

The Frame.2 (frame_3.html):

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

The Frame.3 (frame_4.html):

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

Frame Example.1 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