How to create and use inline frames (iframes)

IFRAME tutorial

What's an iframe?
An IFRAME, or "inline frame" is basically a floating frame which sits within a web page document. Its actual content is an external web document, and you slot it within the floating frame according to the attributes you set.

To create an IFRAME on your page, create a new HTML file and place some text in it. Call this document "newpage.html" Next, create another HTML file and call it "holdingpage.html", and include the following syntax within the <BODY> .. </BODY> tags of this document.

Syntax:

<iframe src="newpage.html" width="200" height="200" 
frameborder="0" scrolling="auto" name="myInlineFrame">
TEXT FOR NON-COMPATIBLE BROWSERS HERE</iframe>

This will place newpage.html inside the floating frame, within holdingpage.html. Cool huh? The text for non-compatible browsers is some text that you can write in to inform users with web browsers that cant render iframes that they're unable to see the iframe.

Current browsers (Internet Explorer 5.5/6, Netscape 6.x and Opera 5/6) can all handle iframes, some very old browsers cannot, so choose them based on your audience and the technology they have at their fingertips.

ok, heres an example of an iframe which ive placed within this table data cell. (so that you can see its dimensions, the frameborder attribute has been set to "1")

Positioning iframes within data cells within tables (<td>) is a nice way of using inline frames, it appears as if the cell content is scrollable so you can fit a lot more content into smaller areas without ruining your
table-based layouts.

Attribute List:

src = the source file the iframe uses, i.e newpage.html
name = a unique name for the iframe (not essential)
frameborder = 0 | 1 - Sets the iframe an outline border (1) or no outline border (0)
width = pixels, i.e 200
height = pixels, i.e 200
scrolling = yes | no | auto - Sets scrolling. auto will mean scrollbars appear when text overflows initial size
align = left | right | center - Alignment of the iframe, horizontally
marginwidth = pixels - margin widths in pixels, i.e 2 would give a 2px margin width (rarely used)
marginheight = pixels - margin height in pixels, i.e 2 for a 2px margin height (rarely used)

Go to: Client side tutorial links | Home

Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

Partners

Advertise here!

Ads

Reseller Web Hosting