Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

This article shows 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:

<frameset>
// frame elements
</frameset>

Example 1: This example will demonstrate the approach to create the four parts of the page.

HTML




// Home.html
 
<html>
 
<head>
    <title>Header</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>Welcome to the home page</h1>
</body>
 
</html>


HTML




// Sidebar.html
 
<html>
 
<head>
    <title>Sidebar</title>
</head>
 
<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>


HTML




// header.html
 
<html>
 
<head>
    <title>Header</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
</body>
 
</html>


HTML




// footer.html
 
<html>
 
<head>
    <title>Footer</title>
    <style>
        h4 {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h4>
        All Rights Reserved
    </h4>
</body>
 
</html>


HTML




// html_content.html
 
<html>
 
<head>
    <title>
        HTML content
    </title>
    <style>
        p {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <p>Hyper Text Markup Language</p>
</body>
 
</html>


HTML




//css_content.html
 
<html>
 
<head>
    <title>CSS</title>
    <style>
        p {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <p>Cascading Style Sheets</p>
</body>
 
</html>


HTML




//js_content.html
 
<html>
 
<head>
    <title>JS content</title>
    <style>
        p {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <p>JavaScript</p>
</body>
 
</html>


HTML




//php_content.html
 
<html>
 
<head>
    <title>PHP Content</title>
</head>
<style>
    p {
        text-align: center;
    }
</style>
 
<body>
    <p>Hypertext Preprocessor</p>
</body>
 
</html>


Output:

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

Output:

Example 2:Implementation to show how to divide an HTML page into four parts by using images.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Frame into 4 parts</title>
</head>
<frameset rows="250px, 250px" cols="250px, 250px">
    <frame src=
        <frame src=
            <frame src=
                name="frame3">
                <frame
                    src=
                    name="frame4">
</frameset>
 
</html>


Output:

hfg



Last Updated : 23 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads