In this article, we will look at inline frames, otherwise known as iframes. Our discussion will include the syntax of iframes, possible uses and the essential issue of browser support. Let's first talk about what iframes are.
What are iframes?
To understand an iframe, it is usually helpful to contrast it to the generic HTML frame. HTML frames divide the page into separate sections, all populated from different physical pages displayed at once. Users can scroll down one page while keeping another page static, all on the same screen. HTML frames are supported in almost all current browser versions.
In contrast, an inline frame is still a frame, but it appears in the middle of a page. Think of it as a little window on your page, where data from an entirely separate document is displayed. The iframe works independently from the page that displays it. Users can scroll within iframes and link to documents from within them, just like generic HTML frames. Users can not, however, resize the iframe.
|
NOTE: Iframes support more than simple HTML documents. Users can display everything from HTML, to text documents and even Adobe Acrobat files within the iframe element.
|
What do iframes look like? If your browser supports iframes, look below for an example:
First, notice a few things. There are no scrollbars simply because the content of my inline document does not span that far. If it did, scrollbars would appear on the right hand side. Additionally, any HTML code works fine within iframes, because the iframe is including another physical HTML page. In essence, we are embedding an entire page within a little window.
Next, let's examine the syntax of the iframe.
Inline frame syntax
The iframe takes some of the same attributes that any other HTML element takes, like width, height, src and align. Taking our above iframe as our example, here's the code required to pull that off.
<iframe src="url/to/document.html" width="100%">
Sorry, your browser does not support iframes.
</iframe>
The inline frame syntax starts by identifying the name of the element, or 'iframe'. Then, we specify the source file that will be displayed (embedded) within the iframe. I've set the width to 100%, which will span 100% of the main table in this case. The 'Sorry, your browser does not support iframes.' text will only display if the browser does not support the iframe element. Then, we simply end our iframe tag set.
While we are looking at the syntax, let's take a look at some of the other attributes that the iframe element supports.
Name: names the iframe element
Src: location of source document
Longdesc: long description of content
Height/Width: sets dimensions of element
Frameborder: sets iframe border (0 or 1)
Align: top, bottom, middle, right and left
Marginwidth: padding within iframe (left, right)
Marginheight: padding within iframe (top, bottom)
Scrolling: takes values of yes, no or auto
The syntax of the iframe is very straight forward. Although you don't have to specify all of these, you must use the 'src' attribute so the iframe knows which document to include. Alignment, unless otherwise stated, defaults to left and scrolling defaults to auto. Frameborder defaults to 1 and marginwidth/marginheight defaults to about 5 each. The 'Longdesc' attribute is a decent supplement to the Title tag, which offers visually impaired users a description of the content.
So, if I want to design an iframe with the name "MyIframe", 100% width, aligned in the center and with both marginwidth and marginheight set to 10, here's what the code looks like:
<iframe src="url/to/document.html" width="100%" align="center" marginheight="10" marginwidth="10" name="MyIframe">
Sorry, your browser does not support iframes; try a browser that supports W3 standards.
</iframe>
Now that we know what an inline frame is, what it looks like and how to code it, which browsers support this element? We'll examine it below.
Browser support for iframes
IE: IE appears to support the iframe since version 4 (Mac since version 3)
Netscape: version 6 and later
Opera: the 4.02 beta is said to support iframes (Mac and Unix since version 5; BeOS since version 3.62)
Mozilla: since version 1
Bezilla: since version 1
Galleon: since version 1.2
WarpZilla: since version 1
Lynx: support since 2.8.2
Where should iframes be used?
Iframes are especially useful for displaying larger amounts of information in a small space. Because iframe elements support scrolling, the user can view many pages of information without having to scroll the main page at all. Because iframes support the same HTML as any other document, including images, links and CSS styles, users can unleash the power of iframes and create an extremely efficient display of information.
|
NOTE: Links clicked within the iframe element will change the iframe page, NOT the main page. To change the main page from a link within the iframe element, use target="_parent" in the embedded iframe page.
|
You should now be able to design an iframe, link it to the appropriate file and set their attributes accordingly. Be sure your target audience supports the iframe element by a large majority and have fun. They can become beneficial design elements if used appropriately.
Articles from WebSiteGravy.com
|
