The address for this web page is:   http://fishcaro.crosswinds.net/day_39_floating_frames.htm
On to the next lesson!
Back to the COURSE SYLLABUS

39. FLOATING FRAMES

Sometimes you want a scrollable frame placed within the flow of an HTML document, like this:

A frame like this is called a "floating frame" or an "inline frame," and is the subject of the current lesson.

INDEX CARD #39:

WHAT IS A FLOATING FRAME? (39a)

A floating frame (also called an inline frame) is a frame placed within the flow of an HTML document, like this:

What are the advantages of floating frames? Floating frames are much easier to code than a regular frameset document, since they work much like an <IMG> tag. They can give easy access to the contents of another web site, without interfering with the flow of text.

What are the disadvantages of floating frames? As of this writing, floating frames are only supported by Microsoft Internet Explorer, which greatly limits their usefulness. However, you can give alternate text to appear in browsers that don't support floating frames.

THE <IFRAME> TAG (39b)

Here is the general structure of the <IFRAME> tag:
<IFRAME SRC="URL_of_source"
        HEIGHT="desired_height_in_pixels_or_%"
        WIDTH="desired_width_in_pixels_or_%"
        ALIGN="left|right"
        SCROLLING="yes|no|auto"
        HSPACE="space_to_left_and_right_in_pixels"
        VSPACE="space_above_and_below_in_pixels"
        MARGINWIDTH="inside_left_and_right_margins_in_pixels"
        MARGINHEIGHT="inside_top_and_bottom_margins_in_pixels"
        FRAMEBORDER="1|0"
        NAME="name_of_frame_for_linking_purposes">
Optional text for browsers that don't support floating frames goes inside
the container tag.
</IFRAME>
The only required attribute is SRC. All the attributes are discussed on cards 39c and 39d.


ATTRIBUTES FOR THE <IFRAME> TAG (39c)

  • Use SRC to give the web address of the source. Be sure to include the http:// part, or it won't work! The source can also be a local file.
  • HEIGHT and WIDTH give the floating frame size. You can use absolute measurements, in pixels, like HEIGHT="200". Or, you can specify a percentage of the current window, like HEIGHT="50%".
  • Use ALIGN to align the frame along the left or right margin of the web page. ("Left" is the default.) To center the frame, just put the <IFRAME></IFRAME> container inside a <CENTER></CENTER> container.
  • The SCROLLING attribute controls the appearance of the scrollbar.
    Use SCROLLING="yes" if you always want a scrollbar to appear.
    Use SCROLLING="no" if you never want a scrollbar to appear.
    Use SCROLLING="auto" (the default value) if you only want a scrollbar to appear when necessary.
  • Use HSPACE to hold space to the left and right of the frame (horizontal space).
    Use VSPACE to hold space above and below the frame (vertical space).
    Give measurements in pixels; for example, HSPACE="50".

MORE ATTRIBUTES FOR <IFRAME> (39d)

  • Use MARGINWIDTH and MARGINHEIGHT to control the margins inside the frame; that is, between the edge of the frame and the frame contents. MARGINWIDTH controls left/right margins; MARGINHEIGHT controls top/bottom margins. Give measurements in pixels.
  • FRAMEBORDER="1" turns the frame border on (this is the default value).
    FRAMEBORDER="0" turns the frame border off.
  • Use NAME="desired_name" to give a name to the frame, so you can link to it.
Here's an example. The floating frame produced by this code appears just below this index card:
<IFRAME SRC="Frames/float3.htm"
        HEIGHT="200" WIDTH="50%"
        ALIGN="right"
        SCROLLING="yes"
        HSPACE="50" VSPACE="25"
        MARGINWIDTH="20" MARGINHEIGHT="40"
        FRAMEBORDER="1"
        NAME="test_frame">













Printable version of Index Card 39a

Printable version of Index Card 39b

Printable version of Index Card 39c

Printable version of Index Card 39d

WORKSHEET #39:

ASSIGNMENT #39:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2001 Carol J.V. Fisher    All Rights Reserved