Introduction
This chapter demonstrates about the HTML Iframe which is very useful and are mainly used to display the web page in another web page, following are the concepts covered.
- Iframe
- Developing Iframes
Description
Iframes are used to display a web pages in web page. Iframes are mostly used on webpages where ever user required to show any other page content in current HTML document. HTML Iframes are mostly used for frames. Following are some of the attributes of Iframes in HTML.
| Attribute | Description |
|---|---|
| name | Used to give names to the frames which are useful while loading one frame into another frame. |
| src | Indicated the loaded file name inside a frame. |
| frame border | Used to give the frame border and overrides the frame border value. |
| margin height | Defines the space between the two frames |
| margin Width | Specify the space or width between the two frames |
| noresize | User can resize the frame by clicking and dragging border of the frames |
Description
In order to develop the Iframes user can make use of <iframe> tag, inside the <iframe> tag use <frameset> instead of the <body> tag. <frameset> tag can be use any were in the document, by using <iframe> tag then it will create the a rectangular region for the document.
The code below demonstrates to create the <iframe> by using the these tags is as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Content Of the Document</p>
<iframe src="http://www.splessons.com/" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Without Borders
The code blow demonstrates the Iframe without border to remove the border user need to use the CSS border property.
[html]
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.splessons.com/" style="border:none"></iframe>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Height and Width
By using the height and width attribute user can set the height and width of the frames in percentages as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.splessons.com/" width="300" height="250"></iframe>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Example
The code below demonstrates the Iframes which are used to display a web pages in web page. These iframes we use mostly on any webpages where user required to show any other page content in current HTML document.
[html]
<html>
<iframe name="inlineframe" src="http://www.splessons.com" frameborder="0"
scrolling="auto" width="500" height="180" marginwidth="5" marginheight="5" ></iframe>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Iframes are used for Inline elements.
- Iframes are the targets for a links.
- src specify the URL of the document.