Menu
HTML Iframe Basics

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

widthSets the width in pixels or %
heightSets the height in pixels or %
srcThe URL of the document to be displayed
frameborderWhether to display a border: 0 = no, 1 = yes
scrollingWhether to display scroll bars: yes, no, auto
marginwidthSets left and right margins in pixels
marginheightSets top and bottom margins in pixels
alignHow to align the iframe: left,right,top,middle,bottom


Learn more at amazon.com

More HTML Code:
• Introduction to HTML
• Checkbox Basics
• How to Use a Meta Redirect
• Adding Space Around an Image
• Create a Meta Tag Slide Show - No Java Script Required
• Easy Code to Add Bing Site Search to Your Website
• Easy Form Design
• Use fieldset to Organize Form Elements
• XHTML Basics
• Aligning an Image on Your Web Page