iFrames
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
What are iFrames?

iFrames, short for inline frames, are like FRAMES, but are not resticted by the boundaries of the browser. Like images, iFrames can sit any where on the webpage and give you more control over loading information into certain sections of a page that would normally require multiple nested frames to target an area, i.e., the dead center of a webpage.

Tags and attributes:

iFrames can be coded into a cell <td> of a table just like text or an image.

<iFrame></iFrame>

Just like FRAMES you need to assign a SRC and a NAME to the iFrame, otherwise your website will NOT know which page, in which spot, you want to load the info requested.

SRC = your_HTML_FILE.HTML, your_IMAGE.gif, your_IMAGE.jpg <iFrame src="myPage.html">

NAME = someName, my_iFrame, iF_1, etc. <iFrame src="myPage.html" name="my_iF1">

YOU NEED TO HAVE A PAGE LOAD INTO THE iFRAME IMMEDIATELY OR IT ACTS AS A BROKEN LINK!

iFrame attributes (similar to FRAMES):

width = pixel or %
height = pixel or %
align = left, center, right
frameborder = 1 or 0 (yes/no)
<iFrame src="myPage.html" name="my_iF1" width="100%" height="235" align="center" frameborder="0">

 

To change the content of the iFrame, using a link:

<a href="new_iFrame_info.html" target="my_iF1">my link</a>

The TARGET attribute is very important. The TARGET will equal the iFrame NAME. This tells the link (where on the page) to load the html file.

 

Lesson 8:

1) Create an HTML doc called: sample.html with background color = blue and a typed message (anything) inside the BODY of the doc. SAVE.

2) Create an HTML doc called: sample2.html with background color = red and a typed message (anything) inside the BODY of the doc. SAVE.

3) Create an HTML doc called: index.html with a table that has 3 columns and 3 rows - should have 9 cells total. Each cell 100 x 100 pixels, background color = white. SAVE.

4) Inside one of the cell tags <TD></TD> - doesn't matter which one, type:
<iFrame src="sample.html" name="iF1" width="100%" height="100%" align="center" frameborder="1">
SAVE.

5) Create a link in a cell other than the iFrame cell:
<a href="sample2.html" target="iF1">link text here</a>
SAVE.

6) TEST index.html including the link. You should see your sample.html load into the page immediately and sample2.html load when you click the link.