How to Create Horizontal Frames in HTML

The following code example demonstrates How to Create Horizontal Frames in HTML.

Here, we create a frameset with three frames. Basically, the rows attribute specifies the size of each row. Hence, the rows attribute represents that the frameset has three rows each containing a separate frame. Whereas, the cols attribute specifies the size of columns and divides the web page in columns. As can be seen in the code, the first frame is 30% of the browser window and displays an HTML form. Similarly, the second frame is 20% of the browser window and demonstrates the formatting tag. Accordingly, the last frame occupies the remaining browser window (50%) and displays an unordered list.

frames.html

<html>
  <head>
     <title>Horizontal Frames in HTML</title>
  </head>
  <frameset rows="30%, 20%, *">
    <frame name="HTML Form" src="form1.html"/>
    <frame name="Formatting Tags" src="formatting.html"/>
    <frame name="List" src="lis1.html"/>
  </frameset>
</html>

Apart from the above HTML document, we need to create three more documents that will display in the three frames. The following code shows form1.html, formatting.html, and lis1.html. These documents show an HTML form, the formatting tags, and onordered list respectively.

form1.html

<html>
  <head>
    <title>Sidebar</title>
    <script>
     function display()
     {
     	document.write(document.myform.t1.value);
      }
    </script>
  </head>
  <body>
    <form name="myform" id="f1" action="form1.html">
      <h2>Form Example</h2>
      <table>
      <tr>
         <td>Enter your name:</td>
         <td><input type="text" name="t1" /></td>
      </tr>
      <tr>
         <td>Enter your address:</td>
         <td><input type="text" name="t2" /></td>
      </tr>
      <tr>
         <td>Enter your age:</td>
         <td><input type="text" name="t3" /></td>
      </tr>
      <tr>
	<td colspan="2"><input type="button" onclick="display()" value="Submit"></button></td>
      </tr>
    </form>
  </body>
</html>

formatting.html

<html>
   <head>
	<title>Formatting Tags Example</title>
   </head>
   <body>
      <p><b>This is bold text</b></p>
      <p><strong>This is strong text</strong></p>
      <p><i>This is italic text</i></p>
      <p><em>This is emphasized text</em></p>
      <p><mark>This is marked text</mark></p>
      <p><ins>This is inserted text</ins></p>
      <p><del>This is deleted text</del></p>
      <p>x<sup>2</sup></p>
      <p>x<sub>2</sub></p>
   </body>	
</html>

lis1.html

<html>
  <head>
    <title>Unordered List</title>
  </head>
  <body>
     <!-- An Example of Unordered List -->
     <h1>A List of Subjects in BCA First Semester</h1>
     <ul style="list-style-type: disc;">
	<li>Discrete Mathematics</li>
	<li>FIT</li>
	<li>C Programming</li>
	<li>Web Technologies</li>
	<li>Technical Communication</li>
     </ul>

     <ul style="list-style-type: circle;">
	<li>Discrete Mathematics</li>
	<li>FIT</li>
	<li>C Programming</li>
	<li>Web Technologies</li>
	<li>Technical Communication</li>
     </ul>

  <ul style="list-style-type: square;">
	<li>Discrete Mathematics</li>
	<li>FIT</li>
	<li>C Programming</li>
	<li>Web Technologies</li>
	<li>Technical Communication</li>
     </ul>

  </body>
</html>

Output

**An Example Demonstrating How to Create Horizontal Frames in HTML**

Further Reading