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

Last Updated : 01 Aug, 2024

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=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108153811/fadein1.gif" 
           name="frame1">
        <frame src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108153519/fadeout1.gif" 
               name="frame2">
            <frame src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108152900/Factor-Tree-of-20.png"
                name="frame3">
                <frame
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108153420/Prime-Factorization-of-20.png"
                    name="frame4">
</frameset>

</html>

Output:

How to place a div inside an iframe for IE ?

krishnakarthikeyakhandrika

Improve

Article Tags :

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

Syntax

Similar Reads

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions

Thank You!

What kind of Experience do you want to share?