Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to divide an HTML page into four parts using frames ?

  • Difficulty Level : Basic
  • Last Updated : 25 Mar, 2021

In this article, we will learn how to divide a page into four parts using HTML frames. This can be used to represent the header, sidebar, footer, and main content. The frames are created using the <frame> tag. We will have to use four HTML files for each of the portions.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<frameset>
    // frame elements
</frameset>

The below example will demonstrate the approach to create the four parts of the page.

index.html






<html>
<frameset rows="10%,80%,10%">
  <frame name="A" src="header.html">
    <frameset cols="80%,20%">
      <frame name="B" src="home.html">
        <frame name="C" src="sidebar.html">
    </frameset>
    <frame name="B" src="footer.html">
      <frameset rows="100%">
      </frameset>
</frameset>
</html>

Output: The page will now be divided like this.

We will now create the HTML pages of the four sections and the content of the main page separately. 

header.html




<html>
<body>
  <h1 style="color: green; 
             text-align: center">
    GeeksforGeeks
  </h1>
</body>
</html>

home.html




<html>
<body>
  <h1 style="text-align: center">
    Welcome to the home page
  </h1>
</body>
</html>

sidebar.html




<html>
<body>
  <h3>Sidebar</h3>
  <a href="html_content.html" target="B">
    HTML
  </a><br>
  <a href="css_content.html" target="B">
    CSS
  </a><br>
  <a href="js_content.html" target="B">
    JS
  </a><br>
  <a href="php_content.html " target="B">
    PHP
  </a>
</body>
</html>

footer.html




<html>
<body>
  <h4 align="center">
    All Rights Reserved
  </h4>
</body>
</html>

html_content.html




<html>
<body>
  <p style="text-align: center">
    Hyper Text Markup Language
  </p>
  
</body>
</html>

css_content.html




<html>
<body>
  <p style="text-align: center">
    Cascading Style Sheets
  </p>
  
</body>
</html>

js_content.html




<html>
<body>
  <p style="text-align: center">
    JavaScript
  </p>
  
</body>
</html>

php_content.html




<html>
<body>
  <p style="text-align: center"
    Hypertext Preprocessor
  </p>
  
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :