How To Use HTML iframe Element In HTML

HTML Iframes

HTML <iframes> is used to place another web page content within current web page.Basically, it is a container that shows other web page information within that container.

General syntax of iframes:

Statement
<iframe src="url" title="description"> </iframe> 
   

Example

General Syntax

<iframe src="hello.html" title="result page"></iframe>    

Source Code

Download
<iframe src="hello.html" title="result page"></iframe>

Source Code : Output

Code Explanation

Note: Here, the URL specifies the address of the webpage while the title denotes the description of the web page.

Assigning Height And Width of An Iframe Using Iframe Property

General Syntax

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;"></iframe>    

Source Code

Download
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;"></iframe>

Source Code : Output

Code Explanation

Note: To provide height and width of iframe, use height and width property of iframe.

Providing Height And Width of An iframe Usign CSS

General Syntax

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>    

Source Code

Download
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

Source Code : Output

Code Explanation

Note:To provide height and width of iframe ,use height and width property of CSS.

Removing Iframe Border

General Syntax

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>    

Source Code

Download
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

Source Code : Output

Code Explanation

Note:HTML Iframe border can be removed very easily by CSS style property of border.

Providing Border Of Ifarme

General Syntax

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>    

Source Code

Download
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

Source Code : Output

Code Explanation

Note:The HTML iframe border can be provided by CSS style property of the border.

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com