inline frames

The basic principle of inline frames is the same as with "ordinary" frames: a part of the browser window is "framed" separately from the rest, and a different file can be displayed within it. But rather than simply drawing partitions across the screen, inline frames are actually displayed in a scrolling window, or box. Best illustrated by example I think, so see below.

Like the frames techniques we've already looked at, inline frames are not perfect. They must be used with full consideration for those who might not be able to see them, which means your providing alternative ways for those users to access the information. In the case of inline frames this is even more important as at present time these are supported only by some browsers, namely Internet Explorer and Opera. Netscape doesn't support this tag at all. However, they are included in recent HTML standards and technically this means that all future browsers should support it (though having said that, the status of target is problematic - serious web designers need to keep an eye on this sort of thing). Also, with not too much consideration, you can easily allow for those users who can't see the tag, even if you won't get the full singing-and-dancing effect.

Inline frames do not need frameset documents but can be simply placed in the usual flow of HTML with a tag, <iframe>. See this example:

That's an entirely separate file called 2001.html which, if you want, you can check by following the link. Nifty, huh? (Particularly when combined with active links, which we'll look at below.) Not hard to do either: here's the code:

<iframe height="200" scrolling="auto" src="2001.html" width="80%">
  <p>Your browser does not support the <iframe> tag so
    it is not possible to illustrate this example. Sorry.
    To see the file being displayed go here:
    <a href="2001.html">2001.html</a>
  </p> </iframe>

Note first of all the use of the alternative text inside the <iframe> tag - it's this that explains why <iframe> has a closing tag, as otherwise you might think there's no need for one. Please use this facility properly if you're using inline frames, just as you should with the <noframes> tag.

Here are the available attributes for <iframe>

• align: takes values of left, right and center and aligns the frame on the page or, more specifically, within whichever page element it rests. Left or right alignment should (in theory) allow text to flow round the sides of a frame, as shown below.
• frameborder: default is 1, which renders the frame with a border as you've seen above: 0 turns this off.
• height: Specify the height of the frame in pixels, as you've seen: or as a percentage of the window size.
• marginheight and marginwidth: specifies a space, in pixels, inside the frame between the frame edges and frame contents.
• name: names the frame for reference by targeted links, as you can see below.
• noresize: prevents users from resizing the frames. As with "real" frames though, I wouldn't use this: if somebody really wants to resize your frame, they've probably got a good reason.
• scrolling: takes the same values of yes, no and auto. (Incidentally, I had problems in older versions of IE with the constant appearance of the horizontal scroll bar, but I think this bug has now been fixed.)
• src: The clearly important link to the contents of the frame.
• width: an absolute (pixels) or relative (%) width for the frame.

As with "real" frames, the true power lies in making the <iframe> interactive. Like this, for instance:

Synposis of "2001"

Synopsis of "Dr. Strangelove"

This is just done with target attributes pointing at the <iframe>'s name in the same way as we've already seen. Piece of cake, really. In addition, if readers can't see the inline frame but can still see the links above, they can still view the content; the files will just open up in a separate window.

You might already be thinking that it'd be possible to render the "inner" page in exactly the same style (font, background colour etc.) as this "outer" one, change the colour of the scroll bar as well, and have an almost seamless integration of that page onto this one. The possibilities are then just limited by your imagination. True... and it does seem to me that inline frames have a lot of potential for page layout. I've only just started experimenting with them myself, but I can see the possibilities here - see the version of the Mondrian page you saw in the virtual lecture. Or, for a published example, have a look at the "Funeral for a Friend" site. However, I do note that this site has no content within the <iframe> tag and is therefore not accessible.

But a couple of caveats. Note that <iframe> may not be considered a link by Google, which may mean that content "inside" the inline frame is never given a high ranking by that popular search engine. I honestly don't know whether it is or not, but it is always safer to have a proper link unless you've a very good reason to do otherwise. If Google doesn't see <iframe> as a link then it has no reason to consider the content of the inline frame important. And you must always remember to have some other way of looking at the frame content. Ensure you've looked at your page on as many browsers as possible to check it still works even without the inline frame. <iframe> is one of those tags that get people very excited when they first see them, but in the end, it may look flashy, but content is still content, however it's presented.

Back to the top

Back to the menu for lesson 10