How to Create Frames in HTML

In this tutorial, we will explore the process of generating frames in HTML. First, let's gain an understanding of what HTML frames are.

HTML Frames

HTML frames are utilized to divide the browser window into multiple independent sections that load separately from each other.

HTML frames allow for the division of a document into multiple views. These views can include different components such as a navigation bar in one frame and the main content in another frame.

In HTML, a table is made up of rows and columns, mirroring how a web browser window can be divided into frames to establish multiple sections.

A set of frames within a web browser window is referred to as a frameset.

Creating frames

We can create frames in HTML utilizing <frameset> tag and <frame> tag . The <frameset> tag is used in place of the <body> tag for creating frames on a webpage. If we use the <body> tag along with the <frameset> tag then the code will not work.

<frameset> tag and <frame> tag tag and <frameset> tag and <frame> tag tag

The <frameset> tag is employed to partition the window into frames. It encompasses one or multiple frames that are specified using the <frame> tag.

Syntax:

Example


<frameset>
    <frame name="frame1" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
    <frame name="frame2 src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
    .
    .
</frameset>

The <frameset> is the opening tag and the <frameset> is the closing tag. The <frame> tag is a self-closing tag.

Note: The <frame> tag and <frameset> tag are not recommended to use because they are not supported in HTML5.

Different properties are utilized in <frameset> and <frame> elements, which we will examine individually.

Attributes of <frame> tag:

Attribute	Description
`Cols`	Thecolsattribute is utilized to define the number of columns present in the frameset and the size of each column in the frameset.It creates vertical frames and the value of thecolsattribute can be in pixels, percentages, etc.Example: <frameset cols = "20%, 50%, 30%">The above example creates three column frames on the web browser. For two frames, two values will be given. For three frames, three values will be given and so on.
`Rows`	Therowsattribute is utilized to define the number of rows present in the frameset and the size of each row in the frameset.It creates horizontal frames and the value of therowsattribute can be in pixels, percentages, etc.Example: <frameset cols = "20%, 50%, 30%">The above example creates three column frames on the web browser. For two frames, two values will be given. For three frames, three values will be given and so on.
`Rows`	Therowsattribute is utilized to define the number of rows present in the frameset and the size of each row in the frameset.It creates horizontal frames and the value of therowsattribute can be in pixels, percentages, etc.Example: <frameset cols = "25%, 75%">The above example creates two-row frames on the web browser.
Border	Thewidthattribute is utilized to define the width of the border of each frame.
frameborder	Theframeborderattribute defines whether to display a 3-D border between frames or not. It takes only two values either"0"or"1".The value"0"defines no frame border and the value"1"defines a 3-D frame border.
framespacing	Theframespacingattribute defines a space between frames. It takes an integer value.

Attributes of <frame> tag:

Attribute	Description
`name`	The"name"attribute is utilized to provide the name to the frame.
`Src`	The"src"attribute is utilized to provide the URL of the frame.
marginwidth	The"marginwidth"attribute is utilized to define the space between the left and the right of the borders of the frame and the content of the frame.
marginheight	The"marginheight"attribute is utilized to define the space between the top and the bottom of the borders of the frame and the content of the frame.
frameborder	The"frameborder"attribute defines whether or not to demonstrate a frame border. It takes only two values either"0"or"1".The value"0"means"Yes"and"1"means"No".
noresize	The"noresize"attribute is utilized to stop the user from changing the size of the frame.Example: noresize = "noresize"
longdesc	The"longdesc"attribute is utilized to give a link to another page which consists of a long description.
scrolling	The"scrolling"attribute is utilized to control the look of the scrollbars which are visible on the frames.

Constructing frames in HTML

Let's start by creating a file named "navbar.html". Here is the code:

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navbar File</title>
    <style>
        body {
            background-color: darkkhaki;
        }
        nav {
            color: black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="https://www.google.co.in/">Google</a>
            </li>
            <li>
                <a href="https://www.youtube.com/">YouTube</a>
            </li>
            <li>
                <a href="https://twitter.com/">Twitter</a>
            </li>
            <li>
                <a href="https://www.instagram.com/">Instagram</a>
            </li>
            <li>
                <a href="https://in.pinterest.com/">Pinterest</a>
            </li>
        </ul>
    </nav>
</body>
</html>

Output:

Below is a representation of a navigation bar.

It is necessary to create a file named "main.html" that will hold the primary content.

Code:

Example


<!DOCTYPE html>
<html lang="en">.g
<head>
    <title>Main Content File</title>
    <style>
        body {
            background-color: rgb(253, 248, 180);
            color: red;
            text-align: center;
            padding: 20px;
            font-weight: bold;
            font-size: 36px;
        }
    </style>
</head>
<body>
    <div>
        Main Content...
    </div>
</body>
</html>

Output:

Below, we can observe the primary content displayed.

We will make a footer file called "foot.html" .

Code:

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer File</title>
    <style>
        body {
            background-color: rgb(119, 87, 45);
            color: white;
            text-align: center;
            font-weight: bold;
            margin-top: 36px;
            font-size: 28px;
        }
    </style>
</head>
<body>
    FOOTER
</body>
</html>

Output:

A footer file has been generated, and its display can be observed at the bottom of the result.

Let's create a frameset and include three pre-made files called "navbar.html", "main.html", and "foot.html" that we have already prepared.

We will make use of the "cols" attribute to create frames arranged in columns.

Code:

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frames in columns</title>
</head>
<frameset cols="30%, 40%, 30%">
    <frame name="navbar" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
    <frame name="main-content" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
    <frame name="foot" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</frameset>
</html>

Output:

In the output, we can observe three frames arranged in columns within a single webpage.

We will make use of the "rows" attribute to build frames horizontally.

Code:

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Frames in rows</title>
</head>
<frameset rows="=20%, 70%, 10%">
    <frame name="navbar" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
    <frame name="main-content" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
    <frame name="foot" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</frameset>
</html>

Output:

The outcome below displays a webpage layout with three sections named "navbar.html", "main.html", and "foot.html" arranged vertically for easy observation.

Nested framesets

The arrangement of one frameset within another frameset is known as nested framesets.

In this tutorial, we will be creating nested framesets using HTML.

Code:

Example


<!DOCTYPE html> 
<html lang="en">
<head>
	<title>Nested Framesets in HTML</title> 
</head> 

<frameset rows="20%,*,*"> 

	<frameset cols="100%"> 

        <frame name="navbar" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">

	</frameset>

	<frameset cols="*, *"> 
		<frame name="frame4" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> 
		<frame name="frame5" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
	</frameset> 

    <frame name="foot" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</frameset> 

</html>

Output:

Nested framesets can be observed on a single webpage.

Advantages of frames:

✅ The major benefit of using frames in HTML is that it permits users to view multiple documents on a single web page.
✅ We can keep one frame static and change the other frames.
✅ We can load webpages from various servers in a single frameset.
✅ It reduces downloading time as there is no need to load images on each page.
✅ It reduces server load.
✅ We can create dynamic layouts by utilizing frames.
✅ We can use the top frame as a header.

Disadvantages of frames:

✅ When there are more than two frames on a single web page then it becomes difficult to navigate through frames.
✅ Frames are not supported by some of the old browsers so the content is placed separately utilizing the <noframes> HTML tag .
✅ It is hard to print the content of all the frames.
✅ Search engine optimization becomes difficult when using frames because it is hard for search engines to rank the web pages containing frames.
✅ If utilizing too many frames then the server will take more time to load the webpage.
✅ Space on the system screen reduces when using many frames.

Browsers Support:

Following are the browsers that support the <frameset> and <frame> tag:

✅ Google Chrome
✅ Firefox
✅ Safari
✅ Microsoft Edge
✅ Opera

Conclusion:

The process of generating frames in HTML involves using the <frameset> tag and <frame> tag. It is possible to construct nested framesets within an HTML document.

HTML Frames

Creating frames

<frameset> tag and <frame> tag tag and <frameset> tag and <frame> tag tag

Note: The <frame> tag and <frameset> tag are not recommended to use because they are not supported in HTML5.

Attributes of <frame> tag:

Attributes of <frame> tag:

Constructing frames in HTML

Nested framesets

Advantages of frames:

Disadvantages of frames:

Browsers Support:

Conclusion:

Input Required