HTML5 > Elements of HTML

Iframes in HTML5

How to create the iframe using HTML?


Iframes are used to create a webpage inside a webpage 

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

In the above code snippet we are having the iframe src which creates the webpage inside a webpage

Iframe with width and height  

It sets the width and height of the iframes

 <h2 style="color:red"><i>Iframe with width and height</i></h2>
   <iframe src="" width="400" height="200"></iframe>

In the above code snippet we have defined iframe with the width and height properties width value 400  and height value 200


Iframe with the border 

we can apply the border to the iframe 

 <h2 style="color:navy"><i>Iframe with Border</i></h2>
   <iframe src="" style="border:5px solid maroon;"></iframe>

Iframe with border

In the above code snippet we have style in the iframe to apply the border value 5px solid marron color


Iframe as target link

We can open the link as target in the iframe

<h2 style="color:blue"><i>The name should match the target of the link to open the iframe </i></h2>
    <iframe width="400" height="200" src="" name="iframe_a"></iframe>
    <p><a href="" target="iframe_a">DotNetFunda</a></p>

Iframe with target link

In the above code snippet we have iframe source with the link as techfunda, width, height values 400 and 200 we have given the name value iframe_a

In the nextline we are having the <a> tag to give the  link in the a tag with the target name as iframe_a which calls the dotnetfunda page 


Iframe with scroll bar

We can scroll the iframe using scroll bar

 <h2 style="color:blue"><i>iframe with scroll bar </i></h2>
    <iframe src="" width="400" height="200" scrolling="yes"></iframe>
  <h2 style="color:red"><i>iframe with no scroll bar </i></h2>
    <iframe src="" width="400" height="200" scrolling="no"></iframe>

Iframe with scrolling 

In the above code  snippet we are having the scroll bar function in the iframe , If we want to scroll the iframe we need to add the scrolling as "yes" and if we need to have no scroll function we need to add the scrollling as "no"


 Views: 5282 | Post Order: 22

Write for us

Hosting Recommendations