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>
task1 iframe 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>
headr iframe 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>
centr iframe tag html

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

Output:

IFRAME HTML task1 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.👇

Leave a Reply

Your email address will not be published. Required fields are marked *