When Microsoft introduced Internet Explorer 3.0, they also introduced support for a new feature called "inline frames," which allows you to embed an HTML document inside of a frame right in the middle of another HTML document. Unfortunately, none of the other browser makers at that time included support for them.
Without support from all the major browsers, inline frames took a backseat while conventional frames took over. In retrospect, this was really an unfortunate event as inline frames offer almost identical capabilities and are much easier to implement than conventional frames.
However, now that inline frames are a part of the HTML 4.0 specification and the most recent versions of many popular browsers, such as Netscape 6 and Opera 5, support them, I think it's time to revisit inline frames and explore some of the options that this feature makes available to web designers.
The inline frames feature really opens the door to all kinds of innovative web design techniques and eliminates some of the problems inherent in the use of conventional frames. In many cases, pages using conventional frames can be replaced with pages using inline frames without any downsides. Furthermore, coding a page to use inline frames is much easier than coding a page with conventional frames—even when you use a wizard to do so.
In this article, I'll introduce you to inline frames and explain how they work. I'll then show you how you can use inline frames to mimic the operation of a page created with conventional frames. As I do, I'll explain the advantages you can gain by using inline frames as well as point out how you can avoid some of the problems you run into with conventional frames.
The Inline Frame Element
The inline frames element is relatively easy to work with once you understand the mechanics. To begin with, inline frames use many of the same attributes as conventional frames, but since they are embedded in the main portion of an HTML document much like graphic images are, they also use many of the same attributes you use to place images in an HTML document.
To get started, you'll create an inline frame with the <IFRAME> element. Keep in mind that you must specify the end of an inline frame with the </IFRAME> tag. In between, you'll use a series of attributes to define the contents of the inline frame and how it is to appear. Let's take a closer look.
NAME=framename is used to specify the name of the inline frame. Just as with conventional frames, this allows you to access the frame from within the main page.
SRC=url specifies the initial page that will appear inside the frame. Here the url can reference a local page or a link to a page on another site.
HEIGHT=n and WIDTH=n specifies the actual size of the inline frame window. You can use either a percentage value, such as 50 percent, or you can specify an exact value in pixels.
FRAMEBORDER=1 | 0 enables and disables the 3D border by using this attribute. A value of 1 will enable the 3D border while a value of 0 will disable it. By default, an inline frame uses a 3D border to define its perimeter.
ALIGN= LEFT | CENTER | RIGHT specifies the horizontal position of an inline frame in your web page. You can use this attribute and set its value to Left, Center, or Right.
MARGINHEIGHT=n and MARGINWIDTH=n sets the margins to position its contents away from the edges of the frame. To do so, you'll use the MARGINHEIGHT attribute to specify the amount of space for the top and bottom margins. Likewise, you'll use the MARGINWIDTH attribute to specify the amount of space for the left and right margins. You'll specify these values as pixels.
SCROLLING=Yes|No allows you to specify whether or not you want to provide horizontal and vertical scroll bars when the size of the page that you place inside an inline frame is larger than the frame itself. By default, the appropriate horizontal and vertical scroll bars will automatically appear inside the frame.
Comparing Conventional Frames With Inline Frames
Now that you have a basic idea of how the <IFRAME> element and its attributes work, let's take a look at how inline frames stack up against conventional frames. As you probably know, the whole idea behind using frames for a web page is to allow you to segment a browser window into a set of independent areas, each displaying content from a different page. The idea is to separate static content from content that changes as someone browses through a web site. This makes your pages easier to navigate as well as giving them a cleaner look.
For example, the most common layout for a page using conventional frames includes a banner across the top, a menu down the left, and a core section that displays the site's main contents. Such a page layout might look like the one shown in Figure 1.
 Figure 1: The most common conventional frames page layout contains three main components. |
In this case, the banner at the top and the menu on the left are static components that never change. As a user selects links on the menu, the page displayed in the core area, also called the target frame, changes.
Creating such a page layout using conventional frames would require four separate HTML documents: One document for the banner, one for the menu, one for the core area, and a master document, called a frameset page, that defines the location and content source of all the frames that make up the page.
Now, using inline frames, you can create a very similar page layout that serves the same function. And the best part is that you only need two HTML documents to do so: One document for the banner and the menu and one for the core area. Such a page layout using inline frames would look like the one shown in Figure 2.
 Figure 2: Using inline frames, you can create a very similar page layout that serves the same function. |
As you can see, the inline frame sort of floats in the middle of the main HTML document—thus the nickname "floating frames."
Advantages of inline frames
The advantages of using inline frames as opposed conventional frames are:
- Fewer pages required to create a frame page layout. Two pages compared to four. In addition to reducing the number of pages, creating an inline frame only requires one line of code.
- More room for static content. As you can see in Figure 2, inline frames provide more room for other kinds of static content on the main page. For instance, you could put copyright or credit card information beneath the inline frame. You could also put advertisements or other information on the right side of the inline.
- Easier on search engine crawlers. A lot of search engines' crawlers have a difficult time properly indexing sites that use conventional frames. This is because the first page that the crawler encounters when investigating the site is the frameset page, which doesn't contain links to the rest of the pages on the site. As such, some crawlers will simply ignore the site and move on.
However, if you're using inline frames, you won't have to worry about this problem as the main page contains the menu and as such contains links to the rest of the pages on the site.
Now to be fair, there is one search engine problem that plagues sites using conventional frames that is also a problem for sites that use inline frames. Sometimes a search engine will index individual pages on a site and provide links directly to those pages—sans the frames. As you can imagine, this can be very confusing to users who follow a link from a search results page and end up on a page without any reference to the site that it belongs to. However, you can work around this problem by putting a link to the home page near the bottom of each page on the site that appears inside the core frame.
Inline Frame Example
At this point, you should have a good idea of how inline frames work. Now, let's take a look at an example of how you can create an HTML document containing a single inline frame that can replace a page that uses conventional frames.
Using Tables For Positioning
Figure 2 showed you a page layout using inline frames that mimics the traditional page layout created with conventional frames. In order to achieve this page layout, you'll need use a table to accurately position the inline fame on the page. Using a table also allows you to easily place text on either side of the frame.
Here's the base code for using inline frames to create the page layout like the one shown in Figure 2.
<html>
<body>
<table width="700">
<tr>
<td colspan="2">
<h1 align="center">
Banner
</h1>
</td>
</tr>
<tr>
<td valign="top" width="75">
Menu 1
Menu 2
</td>
<td valign="top" width="625">
<iframe
name="Core"
src="Page 1.htm"
width="625"
height="400">
</iframe>
</td>
</tr>
</table>
</body>
</html>
I've created a table with a width of 700 pixels that consists of two rows where the first row contains a single cell and the second row contains two cells. The first row spans the entire table and simply contains the banner.
The first cell in the second row is sized at 75 pixels and contains the menu. The second cell is sized at 625 pixels and contains the inline frame.
You'll notice that the inline frame is named Core and its initial contents come from an HTML document called "Page 1.htm." I've set the width of the inline frame to 625 pixels—the same as the width of the cell—and the height to 400 pixels.
If you want to add information to the right of the inline frame, all you need to do is add another cell to the second row and then resize the width of the cells and the inline frame appropriately.
To place information beneath the inline frame, just add the text below the </table> tag.
Creating Targeted Links
To change the contents of the inline frame from the main page, you'll use targeted links exactly the same way you would if you were using conventional frames.
For example, the first three items in the menu could be configured as such:
<a href="Page 1.htm" target="Core">Page 1</a> <a href="Page 2.htm" target="Core">Page 2</a> <a href="Page 3.htm" target="Core">Page 3</a>
Conclusion
The inline frames feature is relatively simple to use, yet can be a powerful HTML tool to have in your arsenal. And now that inline frames are a part of the HTML 4.0 specification and supported by many of the mainstream browsers, you can begin taking advantage of them in your web site designs.
Greg Shultz is a freelance technology writer who has been in the computer publishing industry for more than ten years. He has worked for The Cobb Group (which later became ZD Journals and then Element K Journals), ZDNet, CNET, and TechRepublic. His articles have also appeared on Microsoft's TechNet and MSDN sites as well as on the MSN and TechTV sites. You can visit his web site at www.TheWinWiz.com, which features the Article Database where you can find links to many of his previous articles.