YogeshChauhan.com
What is iFrame in HTML? Why do we need it?
July 10, 2019

Iframe displays a webpage within a webpage. You can include it in your HTML page using ‘iframe’ tag.

Checkout the syntax below.

<iframe src="URL of the webpage you want to display"></iframe>

It’s pretty simple to do that. Also, you can set width and height for the webpage inside. Let’s see how.

<iframe src="URL of the webpage you want to display" height=500 width=800></iframe> /* OR */ <iframe src="URL of the webpage you want to display" height=100% width=100%></iframe> /* OR */ <iframe src="URL of the webpage you want to display" style="height:500pc;width=800px"></iframe>

As you can see there are more than one way to set the width and height of any element. You can use pixels(px) directly to specify the height and width or you can use percentage directly. Also, you can use inline CSS code or a separate CSS file with same code as inline.

One more thing you can do is adding border to make it look real nice with a border frame.

<iframe src="URL of the webpage you want to display" style="border:2px solid blue;"></iframe> /* OR- in case you don&#8217;t want any border then */ <iframe src="URL of the webpage you want to display" style=border:none;></iframe>

You have to specify border width in order to add a border for e.g. 2px solid black otherwise browser won’t add any borders.

There is one more interesting fact about the iframe which you can go for and users might love it as well. Look at the code below.

<iframe src="URL of the webpage you want to display" style="border:2px solid blue;" name=websiteChange></iframe><p><a href=https://www.wikipedia.org/ target=websiteChange rel=noopener>Wikipedia</a></p>

As you can see, we can use iframe as a target frame of a link. The only condition is it must refer to the name of the iframe.

Demo
dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

What is PostgreSQL? How similar or different it is from SQL?PostgresWhat are components in Angular?AngularWhat is the correct way to enqueue multiple CSS files in WordPress?WordPressEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgresIntroduction to components and templates Part 4: Pipes and DirectivesAngularHow To Create a Fullscreen Background Video using CSS and JavaScript?CSS