HTML Iframe Basics
By Stephen Bucaro
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">
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
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.