Working with frames

FYI: No, there are no frames on this page, that comes later in the tutorial. Frames require at least a Netscape, or equivalent browser, 2.02 or above. If you don't have one--this tutorial won't help you much. You should head to the Netscape or the Explorer home page and get an appropriate browser.
So go. Now!

What Are Frames Anyway?

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:

S'alright? S'alright!

Above is a simple table. That table is obviously sitting on the page you are looking at right now (frame1.html). I put up a few commands and, poof! up came the table.

Now imagine that little framed item above as being the entire viewing screen of your browser, the screen you're looking right now. Frame commands are used to do just that, break up the screen.

So, what goes in the frame cells? I'm glad you asked. Other pages go in the frame cells. Frame commands allow you to display more than one page at the same time, in the same browser screen. Let's do that illustration above as if it were your browser screen using frames:

PAGE_A.html

PAGE_B.html

If that table above were a browser screen using FRAME commands, there would be THREE pages involved: The frames page template that breaks up the page and "Page_A.htm", "Page_B.htm". The frame commands that would create a page like the example above would look like this:

<HTML>

<TITLE >First Frame Page </TITLE >

</HTML >

Look over the small program and then click here to see what it looks like on the browser. (This will open in a new window.)You'll be able to click back from the next page to continue the tutorial. So, go look and come back and I'll tell you what the commands are doing. See you in a moment...

Basic Frame Commands

Neat, huh? There were two pages displayed at the same time. I simply split the screen into two parts and placed a different page in each part. Look again at the small HTML frames program above; here's what the commands are doing:

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? Of course you can. Go nuts if you want, just separate the percentages by commas and get it all to add up to 99% or 100%. 99%?! Yes. You see, 33%, 33%, 33% adds to 99 and splits the screen three ways. The browser just distributes the final 1% over the three spaces. Dig?
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.

Some Immediate Questions:

Q: Do I have to write pages skinny enough to fit in only one-half of the page frame?
A: Nope. The browser will cram it all in there, but it tends to look smooshy. (How about that word?) I'll offer examples in a moment.

Q: What if my page is taller than the screen? How do I put in a vertical scroll bar?
A: The browser will do it for you. Don't concern yourself with it. Write for content, not for frame.

Q: Columns are nice, but can I get rows too?
A: Yes. Here's how you do it...

Adding Rows To Columns

Okay, now it starts to get a little goofy. 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.

Hey.htm	down.htm
Hey.htm	me.htm
PAGE_B.html	PAGE_A.htm

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

Remember that frames read left to right just like you read a page. 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%. What this did was break 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 that I was done with breaking up the first column. Still with me? Good... let's go on.

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. Still with me? Good. Here's what the item above looks like. Please note:

...the scroll bar that appears on the "LONGPAGE.htm" frame cell. It reads "DOWN" again and again to show the scroll bar.
...how squished some pages look.
...the directions in the TOP LEFT block.
--It has to do with the next section of this tutorial.
Click here to see the frames in action.

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:

1. Click on a link in a frame -- just that frame changes pages (you just saw that).
2. Click on a link in a frame -- another frame on the screen receives the information (you haven't seen that yet).
3. Click on a link in a frame -- the frames go away and you get a full page (you saw that first).

Here's how you do all three!

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

This is the default. It just happens without you doing a darn thing. So, if that's all you want to happen, do nothing more than what you already know. Browsers are programmed to handle frame clicks just that way. The other two methods require a little more work.

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. "Ah Ha! That's the NAME deal above," you say. Bingo. 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:

Here is what the source code would look like: <FRAMESET >

</FRAMESET >

Okay, great... you've named the cells. See the "NAME=" commands I snuck in the FRAME SRC commands above? Good. 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:

<A HREF="http://www.cbs.com" TARGET="C" >

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.

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 squooshed. 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:

<A HREF="http://www.cbs.com" TARGET="_top" >

Ok, enough explanation. Click Here for examples of the NAME and TARGET commands above.

Encountering Non-Frame-Ready Browsers

That's a problem. 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. That's the reason there are no frames on this main page. There are a couple of ways around it.

1. Don't do frames.
2. 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--bummer.
3. Use <NOFRAME > and </NOFRAME > commands.

Ooooooo... tell me more about the NOFRAME command. Well, it's 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 browserly challenged. Like so... <FRAMESET COLS="50%,50%" >

Greetings Browser Challenged. 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="page.html" >Here </A > for a non-frame version of this page.

</NOFRAME >

Get What's Happening?

The person who can't see frames gets the message and the person who can read frames will get the frame page. Isn't technology wonderful?

1. Create and upload a page(s) with the following criteria:

Basic frame dividing your page into two sections make the left one approximately 50 percent of your total page width, make the right one 50 percent of your page.
Compare and contrast the importance of frames on the Internet. Be sure to include your personal feelings on likes and dislikes.
Each side should include two Gifs or JPEGs
Each Side should include two links to sites supporting the view point stated

Remember each week builds on the last week(s) so I still expect to see proper page layout and all the other elements we have discussed thus far.

Material for this lesson has been adapted from the HTML GOODIES site created by Joe Burns located at http://www.htmlgoodies.com/