What is an iframe ?
HTML iframe is used to display a web page within a web page.
Its also called as nested webpage display process.
HTML <iframe> tag specifies an inline frame.
Why we use HTML iframe ?
HTML iframes are used to embed another document within the current HTML document.
Both webpage content and iframe contents can interact with each other using JavaScript.
How HTML iframe works ?
When <iframe> tag is declared with “src” attribute, A rectangular within the document is opened and source URL is loaded inside the iframe.
The iframe window will be treated as the new HTML document by the browser with scrollbars and borders.
Syntax :
<iframe src="sourceURL"></iframe>
1. Simple HTML Iframe
Example :
Example :
<!DOCTYPE html>
<html>
<head>
<title>IFrame</title>
</head>
<body>
<p>Simple IFrame Example</p>
<iframe src="https://s30.e0b.myftpupload.com/" title="cstechbook"></iframe>
</body>
</html>
Output :
Web page create in html !!!
Click to Learn More about – HTML Tutorial for beginners
Attributes of IFrame
1. src
This attribute is used to give the file name or other external url.
This src URL will be loaded inside the iframe.
2. name
This attribute is used to give a name to a frame.
If the parent window loads the child src URL in iframe, the newly loaded iframe needs a name.
3. frameborder
This attribute determines whether the borders of the frame should be shown or not.
4. marginwidth
This attribute allows us to specify the width of the space between the left and right of the frame’s borders and the frame’s content.
5. marginheight
This attribute allows you to specify the height of the space between the top and bottom of the frame’s borders and its contents.
6. height
This attribute specifies the height of <iframe>.
It can be specified in pixels or in percentage.
7.scrolling
This attribute controls the appearance of the scrollbars that appear on the frame.
Possible values for scrolling is “yes”, “no” or “auto”.
8. longdesc
This attribute allows you to provide a link to another page containing a long description of the contents of the frame.
9. width
This attribute specifies the width of <iframe>.
It can be specified in pixels or in percentage.
2. IFrame with Width and Height
Example :
<!DOCTYPE html>
<html>
<head>
<title>IFrame</title>
</head>
<body>
<p>Simple IFrame Example</p>
<iframe src="https://s30.e0b.myftpupload.com/" title="cstechbook" height="300px" width="300px"></iframe>
</body>
</html>
Output :
3. IFrame Width and Height in percentage.
Example :
<!DOCTYPE html>
<html>
<head>
<title>IFrame</title>
</head>
<body>
<p>Simple IFrame Example</p>
<iframe src="https://s30.e0b.myftpupload.com/" title="cstechbook" height="30%" width="30%"></iframe>
</body>
</html>
Output :
4. IFrame Width and Height modified using CSS property.
Example :
<!DOCTYPE html>
<html>
<head>
<title>IFrame</title>
</head>
<body>
<p>Simple IFrame Example</p>
<iframe src="https://s30.e0b.myftpupload.com/" title="cstechbook" style="height:300px;width:300px"></iframe>
</body>
</html>
Output :
5. IFrame without border
Example :
<!DOCTYPE html>
<html>
<head>
<title>IFrame</title>
</head>
<body>
<p>Simple IFrame Example</p>
<iframe src="https://s30.e0b.myftpupload.com/" title="cstechbook" style="border:none;height:300px;width:300px"></iframe>
</body>
</html>
Output :
6. IFrame with border
Example :
<!DOCTYPE html>
<html>
<head>
<title>IFrame</title>
</head>
<body>
<p>Simple IFrame Example</p>
<iframe src="https://s30.e0b.myftpupload.com/" title="cstechbook" style="border:2px solid orange;height:300px;width:300px"></iframe>
</body>
</html>
Output :
HTML online course !!!
Click to Learn More about – HTML Tutorial for beginners
7. IFrame with Target link.
Example :
<!DOCTYPE html>
<html>
<head>
<title>IFrame</title>
</head>
<body>
<p>Simple IFrame Example</p>
<iframe src="text.html" title="google" name="cstechbook" style="border:2px solid orange;height:300px;width:300px"></iframe>
<p><a href="https://s30.e0b.myftpupload.com/" target="cstechbook">CSTechbook.com</a></p>
</body>
</html>
Output :
