Design a Web Page Using Iframe in HTML

Assuming, you are familiar with the basic concept of HTML!

Have you ever worked with the Iframe tag in HTML?🤔

If yes, it’s good otherwise don’t worry!

Through this article, you’ll be able to create your web pages using <iframe> in HTML.

However, before proceeding deep into it, let’s have a brief analysis of Iframe in HTML.

What is Iframe in HTML?

An iframe or inline frame is used to embed the other web pages or documents within a webpage.

That’s mean you can embed the pdf, links, other webpage locations using the iframe tag into a single web page.

Syntax for Iframe:

<iframe src="url"></iframe>

Note: The URL specified in the src attribute points to the location of an external object or a web page.

Sample Code for Web Page Design Using Iframe

Task to Perform:

Create a page containing the music image at the top of the page after that put the images of actors with hover effect and when you click on individual images, the videos related to the respective actors will be played within that area.

So, how to perform it?

It’s a basic task to be performed using an iframe tag.

Abstract for the page:

create file task1.html

task1.html will contain two files i.e, headr.html & centr.html
headr.html will contain the top image & centr.html will contain the images of actors
within centr.html, provide images link and video link.

Let’s code it!👨‍💻

// Creating the file named task1.html...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-      scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="headr.html" name="headr" width="100%" height="200px">
    </iframe>
    
    <iframe src="centr.html" name="centr" width="100%" height="570px" style="margin: top 0px;">
    </iframe>

</body>
</html>

// Creating the file named headr.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="green">
    <marquee behavior="" direction="">
        <img src="images/music.jpg" width=500px height=160px>
        <img src="images/music.png" width=500px height=160px>
    </marquee>
    
</body>
</html>

// Creating the file named centr.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="yellow">

    <style> 
    div{
        margin-top: 100px;
        margin-left: 50px;
    }
        img{
          opacity: 0.5;
        
        }
        img:hover {
          opacity: 1.0;
        }
        </style>
    <div>
        <a href="videos/varun.mp4" target="_self"><img src="images/varun.jpg"  width="350px" height="400px" 
         style="margin-left:80px ;"></a>
        <a href="videos/Tiger Shroff.mp4" target="_self"><img src="images/Tiger-Shroff.jpg" width="350px" height="400px"
             style="margin-left:100px ;"></a>
        <a href="videos/Amitabh Bachchan.mp4" target="_self"><img src="images/amitabh.jpg" width="350px" height="400px"
            style="margin-left:100px ;"></a>
    </div>


</body>
</html>

Note: You can insert the images link and videos link from creating folders on the left side as shown above.

Output:

Wrapping it Out!

The more you code the more you learn!

I hope, now you can design a web page using iframe in HTML.

So, what are you waiting for? let’s create it.

And, if you have any related suggestions or queries, feel free to let me know in the comment section.👇