HTML Iframes
An HTML Iframe is used to include and display one web page within another web page.
Iframe is also called Inline Frame. Using HTML Iframes, you can embed one or more external HTML documents or web pages into your web page.
Iframe Syntax
<iframe src="http://tutorialsclass.com/"></iframe>
HTML <iframe>
tag is used to create Iframe in webpage. The src attribute specifies the webpage address which you want to display in frame.
Iframe – Attributes List
There are many Iframe Tag Attributes available to use for different purposes. We have set Iframe source using The src
attribute in previous example. You can also use attributes to set Iframe height and width as well. See more attributes in following table:
Attribute | Description | Syntax & Example |
Source (src) | used to give the webpage URL that need to load in the frame. | src="page.html" |
Height | used to set height of the frame. | height="400" |
Width | used to set width of the frame | width="500" |
No Resize | used to enable or disable resizing of frame by users | noresize="noresize" |
Frame Border | used to define the border of the frame | frameborder="1" |
Scrolling | used to enable or disable scrolling | scrolling="yes" |
Iframe – Height and Width
Iframe height and width attributes are used to specify the size of the iframe. By default, the value of these attribute are specified in pixels, but you can specify in percentage as well.
Complete HTML Iframe program with Height and Width:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://tutorialsclass.com" height="400" width="500"></iframe>
</body>
</html>
Iframe – Border
You can set border width using frameborder
attribute. iframe always has a border by default, but we can remove it by setting frameborder="0"
You can set and remove border using CSS attribute as well. We can read about that in CSS border tutorial.
<iframe src="http://google.com" frameborder="4"></iframe>
<iframe src="http://tutorialsclass.com" frameborder="0"></iframe>
Iframe as a Target for a Link
A HTML iframe can be used as the target frame for a html link. This works in two simple steps:
- Assign a name to the Iframe using name attribute.
- Create an HTML Link using anchor tag and give above Iframe name to this link’s target attribute.
This way, when user will click on above link, its reference page will be opened in target Iframe.
<!DOCTYPE html>
<html>
<body>
<iframe height="50%" width="60%" src="page1.html" name="tc_frame"></iframe>
<p><a href="http://tutorialsclass.com" target="tc_frame">Tutorials Class</a></p>
<p>when user will click on above link, its reference page will be loaded in target Iframe.</p>
</body>
</html>
Exercises & Assignments |
---|
No Content Found. |
Interview Questions & Answers |
---|
No Content Found. |