Introduction to HTML 9: Frames

What Are Frames?

Frames are a little different than anything you've done in html in that you are not writing a page in the traditional sense. What you are creating is a template where more than one page can sit. Here's an example using TABLE commands:

Above is a simple table. This table is obviously sitting on the page you are looking at right now (HTML_9.html).

Frames are similar to tables in that they split the browser page into cells. In tables, the information that appears in the cells are typed in the source code on the same page. In frames, the information that appears in the cells are actually other pages.

Frame commands allow you to display more than one page at the same time, in the same browser screen. To change the above html page with a table to an html page with frames there would be THREE pages involved: The frames page template that breaks up the page and "Page_A.html", "Page_B.html". The frame commands that would create a page like the example above would look like this:

<HTML>

<TITLE>Frames 1</TITLE>

<FRAMESET COLS="50%,50%">
<FRAME SRC="PAGE_A.htm">
<FRAME SRC="PAGE_B.htm">
</FRAMESET>

</HTML>

Look over the program above and notice:

there is no <body> command
where you would previously have <table><tr><td> you now have <frameset> <frame src="">

To view the above as frames, click here.

Basic Frame Commands

FRAMESET starts any frame page. It alerts the browser that FRAMES are going here.
COLS denotes that I want columns. In this case, I want two; each 50% of the screen.
Can I do other percentages? Yes, just separate the percentages by commas and get it all to add up to 100% or 99%. (33%, 33%, 33% adds to 99% and splits the screen three ways. The browser just distributes the final 1% over the three spaces.)
FRAME SRC denotes the source of the frame. Frames read like you do, left to right. The first source offered will be hard left. I only have two frame sections so I need only 2 sources.
/FRAMESET ends the whole deal.

Adding Rows To Columns

Here's the browser screen configuration I'm going to make. The table below is a pretty good representation, but not quite exact to scale. It's just for demonstration purposes.

Page_A.html

one.html

two.html

Page_B.html

www.google.com

Here's the FRAMES program I'll use to do it:

<HTML>

<TITLE> Frames 2 </TITLE>

<FRAMESET COLS="50%,50%">
  <FRAMESET ROWS="75%,25%">
    <FRAME SRC="Page_A.html">
    <FRAME SRC="Page_B.html">
  </FRAMESET>

  <FRAMESET ROWS="33%,33%,33%">
    <FRAME SRC="one.html">
    <FRAME SRC="two.html">
    <FRAME SRC="http://www.google.com">
  </FRAMESET>
</FRAMESET>

</HTML>

What is Happening Here?

Remember that frames read left to right. I told the computer I wanted FRAMES by using the FRAMESET command. I then broke up the page vertically just as before.

Here's where the rows come in. I added a new FRAMESET command denoting ROWS. I asked for 75%, 25% breaking up the first column into two rows. I then offered two SOURCES for the two sections of the first column. The first frame to offer a source is always the top one. I then put in a /FRAMESET to denote close of the first column.

Note I did another FRAMESET command again denoting ROWS, but this time I set the rows at 33%, 33%, 33%. Then I denoted SOURCES for those three rows in column two. I then added a /FRAMESET to end those rows and another /FRAMESET still to end the whole deal. Please note that I am going to show 5 different pages on the same browser screen.

To see what the code above looks like click here.

Naming Cells and Using Targets

Okay, so now we know how to break up the screen through FRAMESET percentage commands. Now the question is how to control page changes (hypertext links) in your frames. There are three basic methods of changing data within cells:

Click on a link in a frame -- just that frame changes pages.
Click on a link in a frame -- another frame on the screen receives the information.
Click on a link in a frame -- the frames go away and you get a full page.

Here's how you do all three!

1. Click on a link in a frame -- just that frame changes pages.

This is the default. Just add a link as you normally would.

2. Click on a link in a frame -- another frame on the screen receives the information.

Now it's time to talk about two new commands, "NAME" and "TARGET."

Let's say I'm doing a very simple frame page with only three frame cells. It'll look something like this:

Frame Cell One Frame Cell Two
Frame Cell Three

In order for me to ask the computer to send data to another frame cell, I have to make a point of naming each of the cells. Name them whatever you want, but it's my suggestion to keep it simple -- like capital letters. Here's what the FRAMESET command will look like, with NAMES, to create the illustration above:

<HTML>
<TITLE>Frames 4</TITLE>

  <FRAMESET COLS="50%, 50%">
    <FRAME NAME="A" SRC="cell_1.htm">
      <FRAMESET ROWS="50%, 50%">
        <FRAME NAME="B" SRC="cell_2.htm">
        <FRAME NAME="C" SRC="cell_3.htm">
      </FRAMESET>
  </FRAMESET>

</HTML>

Now that you have the cells named, you can make any hypertext link inside of them targeted. Basically, you're going to add a TARGET command to the usual <A HREF>. Let's say this example hypertext link is in cell_a above:

You can guess what will happen. When you click on the link, cell_a will remain the same and cell_c will receive the information. You would commonly see this used in building an index in the left column or left cell of a page to click on an item and have it appear on the right side of the page.

3. Leaving a Frames Page Completely

So now you can send information from any cell to any cell. The problem is you're still on the frames page -- and some of the larger pages are squished. Say you want to have someone click on a frame and have the link to pop up as its own page, in a full browser window. Well, you have to tell it to do that. Remember! Default is to have the information stay in the same frame.

You need to TARGET the hypertext link to be its own page. Easy enough. Just follow the format above but make the TARGET, "_top." Note the underline before the word "top." It looks like this:

Click Here for examples of the NAME and TARGET commands above.

Encountering Non-Frame-Ready Browsers

Most browser today accept frames, but some still don't, text-only browsers for example. The "browserly-challenged" will get an error code if they attempt to log into a page with frames. Either that or they will receive a blank page. There are a couple of ways around it.

Don't do frames.
Write a page without any frames (like this one) and offer a choice to go to a framed page or to a non-framed page. But that means you have to write two pages.
Use <NOFRAME> and </NOFRAME> commands.

Using the NOFRAME command is simple. You write a basic frame page like any of the three above -- but -- immediately following the first FRAMESET command you put in a <NOFRAME> command and write a message to the user. Like so...

<HTML>
<Title> Frames Example: <NOFRAME>Tag </Title>

<FRAMESET COLS="50%,50%">
<NOFRAME>
The page you are attempting to enter has frames and if you're reading this message, you don't have the ability to see it. I suggest you go <A HREF="Frames_Table.html">Here</A> for a non-frame version of this page.
</NOFRAME>

<FRAME SRC="Page_A.html">
<FRAME SRC="Page_B.html">

</FRAMESET>
</HTML>

What's Happening Here:

The person who can't see frames gets the message and the person who can read frames will get the frame page. You could also just put the text page code in the <NOFRAME> tag rather than a message, that way, the user would see the page and be none the wiser.

For more Advanced Frame Commands, click here.

Home

Previous

Next