iframe Tutorial

The iFrame is a nifty addition to an interactive web page design

What's an iframe?

   


An iFRAME, or "inline frame" is basically a floating frame (cell) which sits within a web document.

It's actual content is on another web document, and you position it within the floating frame according to the attributes (L x W, margin size etc.) you set.

The cell content is scrollable so you can fit a lot more content into smaller areas without ruining your table-based layouts.

To create an IFRAME on your page ........

1 > create a new HTML file and place a table in it.

2 > place your cursor in the cell where you want the iframe and then switch to CODE view

3 > paste ( control V) the following code

<iframe frameborder="9" height="200" scrolling ="auto" align = center width="350" src="iframecontent.html"> </iframe>

(you can cut and paste the above code in your code view you may edit the code before or after the insertion)
you can edit the attributes such as height width border etc.

this code will be inserted in ...
<BODY><table> <tr> <td>
code shown below goes in here </td></tr></table></BODY> HTML tags

4 > save this document as "iframe.html"

5 > next, create another HTML file and fill with your text and images (content)
then save it as iframecontent.htm
l

 

This will place iframecontent.html  content inside the floating frame, within  iframe.html page

 

 CODE Attribute List:      (what the code means)

src = the source file containing the iframe content, i.e iframecontent.html
 
frameborder = a number - Sets the iframe outline border (#) or no outline border (0)

width = pixels,  ... i.e. 350

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 - Horizontal alignment ( justification) of the iframe