Extras << Iframes
IFRAME stands for Inline FRAME. These are also known as "floating" frames. It's kinda like a smaller version of regular frames. There is an individual window on the page instead of the entire current window being sectioned.

Kinda looks like a text box doesn't it? Well, that is actually a separate web page being shown in there. The IE browser (version 3+) does well with this cool feature. I think Netscape has now adopted the ability to show IFRAMES, but that is just a guess right now. If you don't see an IFRAME above this paragraph, you are out of luck.

First you start off with the tag itself...
<iframe>     </iframe>

And these are the properties allowed in the starting iframe tag. You may notice that most of these are extremely similar to normal FRAME coding.
src Specified the URL of the document to be displayed in the frame.
name Specifies the name of the frame for the purpose of linking and targeting.
Specifies the width/height of the iframe space in pixels or percentages.
width="200" height="100"
align Aligns the iframe to the left, center, or right side of the page.
noresize Kills the visitors ability to resize the iframe borders manually.
scrolling Indicates the ability of a scrollbar to appear (or not) with a value of yes, no, or auto.
frameborder Carries a value of 0 or 1 depending if you want a border to appear around the iframe or not.
Specifies the width/height of the margin in pixels.
marginwidth="1" marginheight="1"
Specifies the verticle/horizontal margin space in pixels.
vspace="1" hspace="1"

You don't have to use ALL of these properties. Most of the time, you will use the first four : SRC, NAME, WIDTH, and HEIGHT.

The space between the opening and closing iframe tags is used just like the NOFRAMES tag in frames and the default text in the TEXTAREA tag. The text you enter within this area will be shown on the webpage IF the visitor's browser does not support the IFRAME tag.

The next part is linking. Iframes behave the exact same way as regular frames when it comes to linking. The Iframe has a NAME property assigned to it, the link tags get a TARGET property in them.

<iframe src="firstpage.html" name="myspot" width="75%" height="200">
Sorry, your browser doesn't support iframes.

<a href="nextpage.html" target="myspot">

When clicked on, the link will open "nextpage.html" into the space known as "myspot" which just happens to be the iframe area.

You can have as many iframes on a page as your layout requires, just make sure each one has its own NAME and the links are TARGETed correctly. Click on one of the links to see the pages change in the test iframe area.



Extras << Iframes

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads