HTMLisEasy.com
HTML tutorials for the rest of us...

Ok, now that we have learned a bit about framing let's go back to something simple and we'll tear into linking between frames.

<frameset cols="33%,67%">
  <frame src="beth.html">
  <frame src="terri.html">
</frameset>

VIEW IT


What we're going to do is add a link from beth.html to shannon.html. So open beth.html with Notepad and add the following...

<html>
<head>
<title>My Framz Page</title>
</head>
<body>
Beth
<p>You have to visit my friend Shannon.
</body>
</html>

Then add the link, and save it.

<html>
<head>
<title>My Framz Page</title>
</head>
<body>
Beth
<p>You have to visit my friend <a href="shannon.html">Shannon</a>.
</body>
</html>

Now try it.

<frameset cols="33%,67%">
  <frame src="beth.html">
  <frame src="terri.html">
</frameset>

VIEW IT


If you click on that link you'll see Shannon's page load into Beth's window. I know, I know... you're not impressed. You want to click on a link in Beth's window and have it load into Terri's window. Well, that's a little more work.

What you have to do is name the <frame> in your master page. So go ahead and give that second frame a name.

<frameset cols="33%,67%">
  <frame src="beth.html">
  <frame src="terri.html" name="WINDOW-1">
</frameset>

Nearly any name will do... I chose "WINDOW-1". You could have chosen "mywindow", "APPLESAUCE", "beenerweener"... just about anything you want... as long as it BEGINS with an alpha-numeric character (abcABC123 etc). All other window names will be ignored. (An exception is to begin the frame name with the underscore _   It's use is explained a little later.)


Next we have to add a little something to that link in Beth's page, so open beth.html again (with Notepad) and add a target.

<html>
<head>
<title>My Framz Page</title>
</head>
<body>
Beth
<p>You have to visit my friend <a href="shannon.html" target="WINDOW-1">Shannon</a>
</body>
</html>

This will cause the link to load into the frame named WINDOW-1.

VIEW IT

<< BACK NEXT >>
Frames Tutor
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Frames Templates      HTML 4.0 Reference      Barebones HTML Guide