codescracker


html

HTML Iframes



« Previous Tutorial Next Tutorial »


You can use iframe to display a web page within a web page like this.

Create Iframe in HTML

Here is the general form used to create an iframe in HTML to include a web page inside a web page.

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

Here, the src attribute represents the URL (web address) of an iframe page.

Set Height and Width of Iframe

To set height and width of an iframe, simply use the height and width attributes to specify the size. Here is an example shows how to set height and width of an iframe in a web page.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Iframe Example</title>
</head>
<body>

<iframe src="http://codescracker.com" width="300px" height="250"></iframe>

</body>
</html>

Here is the sample output produced by the above HTML iframe example code:

html iframe

Below is the live demo output of the above iframe example in HTML.

Remove Border of Iframe

To remove the border of an iframe, simply add the style attribute and use the CSS border property. Here is an example shows how to remove border from an iframe in HTML.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Iframe Example</title>
</head>
<body>

<iframe src="http://codescracker.com" width="300" height="250" style="border:none"></iframe>

</body>
</html>

The above HTML iframe example code will produce the output given below:

html iframe example

Below is the live demo output of the above HTML iframe example code.

HTML Iframe Example

Here are some more examples on iframe in HTML. With CSS, you can also change the size, style and color of the iframe's border.

You can use CSS to make iframe more interactive. Here is an example shows how to create interactive iframe in HTML.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Iframe Example</title>
</head>
<body>

<iframe src="http://codescracker.com" width="300" height="250" style="border:5px solid black"></iframe>

</body>
</html>

Below is the sample output produced by the above HTML interactive iframe example code:

html interactive iframe example

Below is the live demo output of the above interactive iframe example code in HTML:

Use iframe as Target for Link

You can also use an iframe as a target for a link in HTML. In other word, an iframe can also be used as the target frame for the particular link. Here is an example shows how to use an iframe as a target for link.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Iframe Example</title>
</head>
<body>

<iframe width="300px" height="250px" src="http://codescracker.com" name="my_iframe"></iframe>
<p><a href="http://codescracker.com/html/html-iframes.htm" target="my_iframe">HTML Iframe</a></p>

</body>
</html>

When the target of a link matches the name of an iframe, then the link will open in that iframe. Here we have create an iframe named my_iframe and then create a link that target the iframe named my_iframe. Therefore when you click on the HTML Iframe link then your web page (HTML Iframe) will be opened in the iframe named my_iframe. Here is the initial output produced by the above HTML iframe example code.

html iframe code

Now click on the HTML Iframe link, the link will be opened in the targeted iframe named my_iframe, here is the output after clicking on the HTML Iframe link:

iframe in html

Here is the live demo output produced by the above iframe example code in HTML to target for a link:

HTML Iframe


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test