Frames - Part 3 from Chapter 11 of HTML & XHTML: The Definitive Guide (1/4)
HTML & XHTML: The Definitive Guide, Chapter 11: Frames
[The following is the conclusion of our series of excerpts from Chapter 11 of the O'Reilly title, HTML & XHTML: The Definitive Guide.]
To this point, our discussion has centered around frames that are defined as part of a frameset. A frameset, in turn, replaces the conventional
<body> of a document and supplies content to the user via its contained frames.
The HTML 4 and XHTML standards let you do things a bit differently: you can also define a frame that exists within a conventional document, displayed as part of that document's text flow. These frames behave a lot like inline images, which is why they are known as inline frames.
Internet Explorer Versions 4 and later and Netscape Version 6 support inline frames.
The <iframe> Tag
Define an inline frame with the
<iframe> tag. The
<iframe> tag is not used within a
<frameset> tag. Instead, it appears anywhere in your document that an
<img> tag might appear. The
<iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders.
- Defines an inline frame within a text flow
- align marginwidth
- class name
- frameborder scrolling
- height src
- id style
- longdesc title
- marginheight width
- End tag:
</iframe>; never omitted
- Used in:
src attribute with
<iframe> to specify the URL of the document that occupies the inline frame. All of the other, optional attributes for the
<iframe> tag, including
title, behave exactly like the corresponding attributes for the
Use the content of the
<iframe> tag to provide information to users of browsers that do not support inline frames. Compliant browsers ignore these contents, whereas all other browsers ignore the
<iframe> tag and therefore display its contents as though they were regular body content. For instance, use the
<iframe> content to explain to users what they are missing:
...other document content... <iframe src="sidebar.html" width=75 height=200 align=right> Your browser does not support inline frames. To view this <a href="sidebar.html">document</a> correctly, you'll need a copy of Internet Explorer or the latest Netscape Navigator. </iframe> ...subsequent document content...
In this example, we let the user know that she was accessing an unsupported feature and provided a link to the missing content.
The align attribute
align attribute for the
<table> tag, this inline frame attribute lets you control where the frame gets placed in line with the adjacent text or moved to the edge of the document, allowing text to flow around the frame.
For inline alignment, use
bottom as the value of this attribute. The frame is aligned with the top, middle, or bottom of the adjacent text, respectively. To allow text to flow around the inline frame, use the
right values for this attribute. The frame is moved to the left or right edge of the text flow, respectively, and the remaining content of the document is flowed around the frame. A value of
center places the inline frame in the middle of the display, with text flowing above and below.
The height and width attributes
Internet Explorer and Netscape 6 put the contents of an inline frame into a predefined, 150-pixel-tall, 300-pixel-wide box. Use the
width attributes with values as the number of pixels to change those dimensions.
Using Inline Frames
Although you'll probably shy away from them for most of your web pages (at least until most browsers become fully standards-compliant), inline frames can be useful, particulary for providing information related to the current document being viewed, similar to the sidebar articles you find in a conventional printed publication.
Except for their location within conventional document content, inline frames are treated exactly like regular frames. You can load other documents into the inline frame using its name (see the next section) and link to other documents from within the inline frame.
Created: November 25, 2002
Revised: November 25, 2002