in this lesson “HTML Iframe tag” you will learn how to use frames and how to adjust it’s attribute. Also you will learn how to embed new website to yours.

Visual Explain in This Video for Further Understand:

<iframe> tag is used to display a web page within a web page.

Ifreame example:

<iframe src="https://www.safhatech.com" height="200"></iframe> 

The Result:

Iframe Syntax

An HTML iframe is defined with the <iframe> tag.

Example:

<iframe src="URL"></iframe> 

The src attribute specifies the URL (web address) of the inline frame page.

Iframe – Set Height and Width

Use the height and width attributes to specify the size of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like “80%”) just to make it responsive.

Example:

 <iframe src="www.safhatech.com" height="200" width="300"></iframe> 

Or we can use CSS to set the height and width of the iframe.

Example:

 <iframe src="www.safhatech.com" style="height:200px;width:300px;"></iframe> 

Iframe – Remove the Border

By default, an iframe has a border around it. To remove the border, add the style attribute and use the CSS border property.

Example:

 <iframe src="www.google.com" style="border:none;"></iframe> 

Iframe – Target for a Link

An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe.

Example:

 <iframe src="www.safhatech.com" name="iframe_a"></iframe>

<p><a href="https://www.safhech.com" target="iframe_a">safhatech.com</a></p> 

This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681