If you use Frames, you can load several HTML pages on one web page, tiled however you like. This allows you to place links on one of the pages, and when clicked, that page changes to the new site, but the other pages remain as they are. One of your HTML pages can be just a title that stays at the top of the web page. Another can be just a menu that stays on the side of the web page. A third can be the page with the primary content that changes as links are clicked. For instance, see this example.

The problem with Frames is that they are a pain for the viewer. Suppose the viewer opens a web page with frames. XYZ.COM is splashed across the top of the screen and links to other sites adorn the left side. Refer to the example linked above. The viewer clicks on the ABC.COM link. The XYZ.COM banner is still at the top of the displayed page, and the links still adorn the side, but a new page appears in the vast middle of the displayed screen. This new page splashes ABC.COM across its top, and now the viewer gets parts of XYZ.COM and ABC.COM on the screen. The ABC.COM page is itself a Frames page, so when the viewer clicks on a link from ABC.COM, banners from XYZ.COM, ABC.COM and now your page appear, and what the viewer really wants to see becomes a small box in the lower corner of the screen.

Frames can violate §508 if you are not careful. One side comment--to avoid having your page opened within someone else's frame, see Lesson 6C - META Tags.

Since there are more than one HTML pages to be displayed in one window, you do not use a HTML DTD. You don't even use BODY tags. Your basic Frames master page looks like so (note the Frameset DTD and FRAMESET tags where you might expect BODY tags):

The FRAMES are individual HTML pages, coded just like any other HTML pages. In this case, abc.htm is shown in one FRAME, and def.htm is shown in the other.

Frames are a lot like tables. The screen is divided into rows and columns. Each FRAMESET establishes a row or column, and each FRAME establishes a cell within its FRAMESET. In the example above, there is one FRAMESET, with two FRAMES. However, the browser doesn't know if you want the FRAMES to be side-by-side or on top of each other.

We can clean this up by declaring <frameset cols="*,*">. Now, the browser knows you want the FRAMES in separate columns, each of equal width. If you wanted one FRAME to be 200px wide, you would code <frameset cols="200px,*">. The asterik ( * ) tells the browser to fill in the rest of the space.

The FRAME is like a window within a window, only you don't see the browser shown twice. If you want to control each FRAME (and you often do), you must give them names. Our first example now becomes:

A common use for FRAMES is to have a "Navagation Bar" across the top or left side of the screen. When the viewer clicks on a link in the Navagation Bar, the page appears in the other FRAME. We do this by setting the target of the link to the name of the other FRAME.

Continuing with our example, we have a Navagation Bar across the left of the screen that is 200px wide. If we put this link in it:
            <a href="ghi.htm" target="rightFrame">Georgia Hampton Inns</a>,
when a viewer clicks on the link, the ghi.htm page appears in the right FRAME. This is why we name the FRAMES.

By nesting FRAMESETs, you can create a rather elaborate layout. Study the code below, and see if you can tell what will be displayed:

The initial FRAMESET is just as before. That creates a 200px wide column on the left of the screen, and the remaining area in a column on the right. The area on the right, however, is another FRAMESET, divided into two equal rows. abc.htm will appear in leftFrame, which is the entire left column of the screen, and def.htm and ghi.htm appear one atop the other in the right column.

You can add some advanced attributes to both FRAMESET and FRAME tags. <frameset frameborder="3px" framespacing="2px"> will give you a 3px border between FRAMEs, with another 2px spacing between FRAME borders (similar to border and cellspacing in tables). <frame src="a.htm" frameborder="1px" framespacing="5px" noresize="noresize" scrolling="no" /> gives you a FRAME with a 1px border (be careful not to conflict with the frameborder value in the FRAMESET tag), a spacing of 5px from any other FRAME around it, noresize and automatic scrolling. By default, all FRAMEs can be resized by the viewer by dragging the border. If you don't want that to happen, use the noresize attribute. Each FRAME has its own HTML page within; if scrolling is needed to see the entire page, the browser will provide it. A scrolling of auto is the default (the browser provides scrolling only if needed). You can force a scroll-bar by a scrolling value of yes, and you can prevent it with a value of no.

Inline Frames

Inline frames are a nice compromise between frames and no frames. You can still show the contents of another HTML page on your page, but you can control the amount of space it consumes. Inline frames can be located anywhere within the html page, sized as desired and scrolled as needed, but there is complete control over what appears within.

Suppose you want the viewer to witness several web pages on one page, but you don't want each page to take-up a lot of space. If each were placed within an inline frame, the viewer could see all at once, and scroll through each as desired, like so. It is also handy where the results of a report or other query are lengthy and you want it to display within another page.

To create an inline frame, use the <iframe></iframe> tags (note there is no text between the tags!)with a combination of the following attributes:

An example would be <iframe frameborder="1" height="200" scrolling="auto" src="Lesson23.php" width="700"></iframe> which produces:

Add an inline frame to your sample2.htm that points to your sample.htm.

---

By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see this site. To see a sample of how CSS can imitate frames without encompassing the negative aspects described above, go here.