With Internet Explorer 3.0, Microsoft introduced a novel variation on frames: floating frames. This concept, which is a part of HTML 4.01, is somewhat different from the original frames idea that was introduced in Netscape.
Floating frames have their advantages and disadvantages. One advantage is that you can position a floating frame anywhere on a web page, just as you can with an image, a table, or any other web page element.
Standard framesets enable you to specify alternative content that can be viewed when someone without a frames-compatible browser navigates to a frameset. Unfortunately, you don't have this option with the <iframe> element. If you include a floating frame on your web page and a user navigates to it with a browser that doesn't support them, he'll see absolutely nothing at all in the area where the frame should be.
With that warning out of the way, here's a brief run-through of how to create floating frames. First, you define them by using the <iframe> tag. Like images, these frames appear inline in the middle of the body of an HTML document (hence the i in <iframe>). The <iframe> tag enables you to insert an HTML document in a frame anywhere in another HTML document.
Table 14.3 shows how <iframe> takes the key attributesall of which, except for those indicated as Internet Explorer extensions, appear in HTML 4.01.
Because you know how to use both regular frames and inline images, using the <iframe> tag is fairly easy. The following code displays one way to use the Away from My Desk pages in conjunction with a floating frame. In this example, you begin by creating a page with a red background. The links that the user clicks appear on a single line, centered above the floating frame. For clarity, I've placed each of the links on a separate line of code.
Following the links (which target the floating frame named "reason"), the code for the floating frame appears within a centered <div> element. As the following code shows, the floating frame will be centered on the page and will measure 450 pixels wide by 315 pixels high:
<html> <head> <title>I'm Away From My Desk</title> </head> <body bgcolor="#ffcc99"> <h2>I'm away from my desk because ...</h2> <p align="center"> <a href="reason1.html" target="reason">Reason 1</a> | <a href="reason2.html" target="reason">Reason 2</a> | <a href="reason3.html" target="reason">Reason 3</a> | <a href="reason4.html" target="reason">Reason 4</a> | <a href="reason5.html" target="reason">Reason 5</a> | <a href="reason6.html" target="reason">Reason 6</a> </p> <div align="center"> <iframe name="reason" src="/books/2/631/1/html/2/reason1.html" width="450" height="315"> </div> </body> </html>
Figure 14.17 shows the result.
Figure 14.17. An inline (or floating) frame.