HTML Frame Example

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... »