Skip to content
Related Articles

Related Articles

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

How to include frameset inside another frameset in HTML ?

Improve Article
Save Article
Like Article
  • Last Updated : 04 Oct, 2021

The frameset is the collection of frames in the browser window. It is used to specify the number of rows and columns in a frameset with their pixels of space. There are some real-world applications of frameset like while making the website for any purpose, the developer first makes the design of the whole website where he divides the whole website into some frames such that each frame has some function. Let’s take an example of a news website, there are various sections like trending, latest, business, cricket news, etc and there is also a slider in some websites which scrolls the image after some seconds. 

In this article, we will discuss for creating a nested frameset or a frameset inside another frameset. Let’s see an example to understand the topic much better. Comments are added in the code for better understanding.

Example

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Nested Framesets in HTML</title>
</head>
  
<!-- Frameset tag starts from here -->
  
<!-- We divide the whole website into three rows -->
<!-- "*" divides equally based on the left space -->
<frameset rows="50%,*,*">
  
    <!-- Here we are defining the columns 
        in the first row -->
    <!-- It is set to 100% which means that 
        it will cover first row by 100% -->
    <frameset cols="100%">
  
        <!-- Defining the frame which is 
            to be inserted -->
        <frame name="frame1" src="frame1.html">
  
    </frameset>
  
    <!-- Here we are defining the columns 
        in the second row -->
    <frameset cols="*, *, *">
        <frame name="frame2" src="frame2.html">
        <frame name="frame3" src="frame3.html">
        <frame name="frame4" src="frame4.html">
    </frameset>
  
    <!-- Now the final third row which will 
        cover the rest space -->
    <frame name="frame5" src="frame5.html">
  
</frameset>
<!-- frameset tag ends here -->
  
</html>

 

Below are the codes for frame1.html, frame2.html, frame3.html, frame4.html, frame5.html:

frame1.html




<html>
  
<head>
    <title>frame1</title>
</head>
  
<body bgcolor="aqua">
    <center>
        <img src="gfglogo.png" alt="gfglogo"
            width="400" height="350"><br>
        frame1
    </center>
</body>
  
</html>

frame2.html




<html>
  
<head>
    <title>frame2</title>
</head>
  
<body bgcolor="hotpink">
    frame2
</body>
  
</html>

frame3.html




<html>
  
<head>
    <title>frame3</title>
</head>
  
<body bgcolor="lightgreen">
    frame3
</body>
  
</html>

frame4.html




<html>
  
<head>
    <title>frame4</title>
</head>
  
<body bgcolor="grey">
    frame4
</body>
  
</html>

frame5.html




<html>
  
<head>
    <title>frame5</title>
</head>
  
<body bgcolor="yellow">
    frame5
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!