Links Within Frames
Tom Linton, Computing Concepts, Fall 2001
Today, we'll take a look at some oddities of using links within a framed web site. We'll create our frameset HTML file from scratch, since FrontPage will automatically set values for the attributes and tags that we'd like to explore. We'll also use FrontPage to create some of the related (source) files for our frames.
  1. For starters, create a subfolder of your homework folder named frames. If you do not have a homework folder, create one now and start putting things in it. Put all of today's files in this frames folder.
  2. Create three simple web pages (use FrontPage for these three pages if you like) with just a single word or two description and an image, like this. The first should show a picture of your favorite cartoon (you may have to do a web search for these images), the second page should show some other picture (your choice, maybe an animal), and the third should show a picture of your favorite celebrity (but keep it clean). Make the background colors of these web pages something other than white, and different from one another. Name these files mypicture.html, mypicture2.html, and mypicture3.html. Give each of these files a <TITLE> (using HTML in the HEAD of the document).
  3. Now, create (use a simple text editor like Notepad for this) a file named framesactivity.html that defines a frameset with
  4. Open up Internet Explorer and load in your copy of framesactivity.html.
    1. Which files title (framesactivty.html, navigate.html, or start.html) is displayed in the browser?

      2.  

       
       
       
       
       

  5. Edit navigate.html and add a link from the word cartoon to mypicture.html. Refresh your copy of framesactivity.html in the browser and press on your new link. What happened?

    6.  

     
     
     
     
     

  6. To make a linked file appear in a different frame than the frame that holds the link, we use the TARGET attribute of the anchor tag. For example, here is a link that will appear in the frame named main

    7.          <A HREF="mypicture.html" TARGET="main"> Cartoon</A>.
    Using FrontPage, add a target attribute to your link in navigate.html. You can click on the HTML tab and type in the target attribute, or access the information by viewing the link properties, and then opening up the TARGET window (click on the pencil icon).
  7. Now, in navigate.html, add links to mypicture2.html and mypicture3.html, all with target attributes as well. Refresh your framesactivity.html file in the browser and make sure everything functions properly (when you click on each link, that file should appear in the right side frame). When everything works fine, save a copy of your navigate.html file as navigate1.html. To do this, use the Save As option from the File menu in FrontPage and save the file as navigate1.html, then close that file and re-open navigate.html. We will continue to modify navigate.html, I will grade navigate1.html to make sure you got the attributes correct.
  8. Now, erase all of the target attributes in navigate.html. Do not erase the links, just the TARGET="main" parts. In the HEAD of navigate.html add the tag:

    9.                 <BASE TARGET="main">
    Refresh your browser and test the links now. Where did the linked to files appear?
     
     

    Save this copy of navigate.html as navigate2.html.

    Keep this in mind: If most of your links included in one file will appear in a certain frame, you can use <BASE TARGET> once, to accomplish the same thing as several individual TARGET attributes!

  9. Edit navigate.html so that it contains a link to your homework page, at the bottom of the document. You now have a common situation, you want your homework page to appear in the "full window", not the left frame, nor the body frame. How do we do this? Try each of the following TARGET attribute settings, one at a time, and describe what happens. For your homework page link, set the TARGET attribute to "_top", then to "_blank", and finally to "_parent". Record below what happens when you follow the link with each of these settings.

    10.  

     
     
     
     
     
     





     

    There is a small difference between _parent and _top. _top will load the link in the full browser window, no matter how many nested frames one has. _parent will load the link in the parent window, or the part of the browser that corresponds to the frameset document (like framesactivity.html in our case) that contains the frame where the link appears (which might not be all of the browser window, if for example, one frameset file used another frameset file as a SRC). There is no difference unless one has a complicated collection of nested frames.

  10. Mimic the idea above to make your homework.html file a framed site. The left side will be for navigation, and most of the links should appear in the right side. A link back to your homepage should use the TARGET="_top" or _parent attribute setting. Call this file homeworkframeset.html.