Floating Frames

< Day Day Up >

Up to this point, all the frames shown have been attached to the sides of the browser (left, right, top, or bottom). Another form of frame, known as a floating frame but more appropriately called an inline frame, was initially introduced by Microsoft but has been incorporated into the HTML and XHTML standards. The idea of the floating frame is to create an inline framed region, or window, that acts similarly to any other embedded object, insofar as text can be flowed around it. An inline frame is defined by the iframe element and can occur anywhere within the <body> of an HTML document. Compare this to the frame element that should occur only within the frameset element.

The major attributes to set for an <iframe> tag include src , height , and width . The src is set to the URL of the file to load, while the height and width are set either to the pixel or percentage value of the screen that the floating frame region should consume . Like an < img> tag, floating frames support the align attribute for basic positioning within the flow of text. Like standard frames, the iframe element also supports marginheight and marginwidth attributes to control the margins on framed content. Internet Explorer supports the addition of the hspace and vspace attributes as well, although the HTML and XHTML specification does not. In general, like most elements, more complex presentation should be handled by CSS rules, as discussed in Chapters 10 and 11.

Note that, unlike the empty frame element, the iframe element has a closing tag. The tag pair <iframe> and </iframe> should contain any HTML markup code and text that is supposed to be displayed in browsers that don't support floating frames ”thus the concept of <noframes> is provided in the tag itself. A simple example of floating frames is shown here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Floating Frame Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h1 align="center">  Floating Frame Example  </h1>   <iframe src="file1.html" name="iframe1" id="iframe1" width="350" height="200" align="left">  There would be a floating frame here if your browser supported it.  </iframe>   <p>  This is a simple example of how floating frames are used. Notice  that in many ways the floating frame acts very similar to an inline  image. Floating frames act like embedded objects in many ways.  </p>   </body>   </html>

Note	Because the iframe element occurs within the <body> of a document, the actual doctype used with a document using an iframe is the standard one and not the frameset doctype.

The rendering of this example code is shown in Figure 8-7. Note how the Netscape 4. x generation browser does not support the iframe element, but renders the enclosed text instead, whereas browsers such as Internet Explorer 6 and Netscape 7 render the floating frame (see http://www.htmlref.com/examples/chapter8/iframe.html).

Figure 8-7: Rendering of <iframe> example

Like other frames it is possible to target an inline frame using the target attribute of the a element. Given the previous example, a link such as

  <a href="http://www.democompany.com" target="iframe1">  Load in iframe  </a>

would have loaded the retrieved file within the inline frame. Unfortunately, a troublesome side effect can occur for those browsers such as Netscape 2. x , 3. x , and 4. x as well as early versions of Opera, which support link targeting but not the iframe element. In this situation, the link will still render and open a new window, which is what would normally happen if you set a link target to a non-existent window.

The syntax for iframe is strikingly similar to the img element as well as to other elements, such as object , that are used to insert other forms of content inline. The complete syntax of the iframe element is provided in Appendix A.

Using Frames

One of the biggest problems with frames is that they initially were used simply because they existed. Framed documents can provide considerable benefit, but at a price. A potential benefit of frames is that they allow content to be fixed onscreen, although CSS will eventually provide this effect in compliant browsers. As demonstrated in previous examples, one frame can contain navigation, while the other frame contains the actual information. Keeping navigation onscreen provides a convenient way to navigate the body of information. Furthermore, if one frame has fixed navigation, the user might perceive the Web interface to be more responsive because only part of the screen needs to update between selections. In addition to this benefit, frames enable the designer to present two or more documents simultaneously , which is useful for comparison. Despite their wonderful benefits, however, frames have their costs, as explained in the next section.

< Day Day Up >