An iframe (imbedded frame) is a "window" or box that is imbedded in a webpage. The iframe tag uses the src attribute to designate the URL of a webpage that is to be displayed within the iframe.
The iframe element, created with the tags:
<iframe src="pageURL"></iframe> will create a default size window
(about 300 pixels wide by 150 pixels high) with a border. If the src attribute
referenced webpage displayed in the iframe is larger than the iframe, it will
display scrollbars. The scrollbars will allow you to scroll to view the entire webpage.
The src attribute does not need to be a webpage, it can be an image, a PDF document, or any other document capable of being displayed on a webpage.
• iframes are often used to display advertising on a webpage, therefore some users will have iframes disabled in their browser. However, iframes are also used for many other purposes besides advertising so disabling them results in a cripled browser and most users will NOT have iframes disabled.
You can use the width and height attributes to set the dimmensions, in pixels, of the iframe. Alternatively, you can set width and height as percentages of the width and height of the iframe's containing element. Another commonly used attribute is frameborder which can be set to 0 to prevent display of a border, or set to 1 to always display a border.
Below is shown an iframe with the width, height, and frameborder attributes set.
<iframe width="200" height="150" frameborder="1" src="URL"> </iframe>
You can use the scrolling attribute to control the display of scrollbars. Set scrolling to "no" to prevent the display of scrollbars. In this case, if the displayed document is larger than the iframe, the user will not be able to scroll to view the entire document.
Set scrolling to "yes" to always display scrollbars. In this case, if the displayed document is smaller than the iframe, the scrollbars will be visible, but not functional. Set scrolling to "auto" to let the browser display scrollbars when necessary.
An iframe is an inline element, which means that when the browser lays out the webpage, the iframe will flow into place from left-to-right with the text, images and other inline elements. Similar to images. Like other inline elements, the bottom of the iframe will be alligned to the baseline by default. you can use the align attribute to align the iframe to the left,right,top,middle, or bottom within it's containing element.
By default, the iframe will place some margin around the element displayed within its border. You can use the marginwidth attribute to set the left and right margins, and the marginheight attribute to set the top and bottom margins to a specific number of pixels (or to 0 to set zero margin).
Iframe attributes
| width | Sets the width in pixels or % |
| height | Sets the height in pixels or % |
| src | The URL of the document to be displayed |
| frameborder | Whether to display a border: 0 = no, 1 = yes |
| scrolling | Whether to display scroll bars: yes, no, auto |
| marginwidth | Sets left and right margins in pixels |
| marginheight | Sets top and bottom margins in pixels |
| align | How to align the iframe: left,right,top,middle,bottom |
More HTML Code:
• Use Meta Tags for Search Engine Optimization
• Line Breaks in HTML
• Providing Alternate and Title Text for an Image
• The HTML BODY tag
• Easy Code to Add Google Site Search to Your Website
• How to Debug HTML
• Checkbox Basics
• HTML DIV Basics
• HTML Definition List
• Changing the Size of an Image on Your Webpage