HTML and CSS —

Wonderful Inline Frames

Originally introduced by Internet Explorer 3.0, iframes, inline or floating frames, were officially adopted in HTML 4.0. This is good news because they're very effective when put to appropriate use. The bad news is that they aren't supported by Netscape 4.61 and many other browsers. Netscape 6.0+ does have inline frame support.

Iframes work a bit differently from standard frames. First, you don't create a separate frameset for the frame. You place the iframe information directly inline in any regular page.

Iframes are extremely handy in terms of being able to update specific windows within a browser. They are often used to manage web advertisements, which are often delivered from another server and updated regularly. This means that the main HTML page never gets touchedjust the remote page does.

NOTE

You aren't limited to just HTML pages. You can link to any kind of source in an iframe, including images and multimedia objects.


Inline frames can be placed anywhere on a page. Unlike standard frames, they do not require a frameset. As with standard frames, iframes do require an additional pagein this case text.html, to work (see Example 6-14).

Example 6-14. Inline frames
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Inline Frames</title>
</head>

<body>
<iframe width="350" height="200" src="text.html" scrolling="auto" frameborder="1">
</iframe>

</body>
</html>

The browser will draw the iframe to your specifications. Here, I've got it set to a width of 350 pixels and a height of 200 pixels, with automatic scrolling and a frame border of 1 to help you visualize the results.

NOTE

I like to think of iframes a lot like images or objects. They really do work in a very similar way: The browser draws the area and then inserts the objectin this case, another HTML fileinto the drawn area.


Figure 6-10 shows the results.

Figure 6-10. iframe in Mozilla.

NOTE

Frames have backward-compatibility issues. All modern browsers implement them, but older browser might not have support. Usually in those instances, the iframe is completely ignored. There is no method such as noframes for iframes, either. So, although their use is often very convenient, you'll want to limit it to instances in which you do not have to support older web browsers.


You're Framed!

Even though framed sites are not a sought-after concern these days, as you can tell from this tutorial, it's important to understand them because they work in a very different way from regular HTML.

You might not choose to use frames for a site, but it's a good idea to practice their use and get a feel for how they can be put to good use.

You never knowit might be just the solution you find yourself looking for one day.

And, of course, iframes have a lot of very useful applications and are commonly used in contemporary design. It is important to understand the differences between frames and iframes, and to get comfortable with both approaches.

Finally, CSS can be used to not just style the information within framed sites or with iframes, but to actually create similar effects that frames do. You'll learn more about this in upcoming tutorials.

And speaking of CSS, now that you've gotten through a lot of markup, it's time to move on to learning about CSS, and how it can take all the structural elements you've been working with and add lots of attractive, useful effects.