CSCI 220: HTML Authoring & WWW Programming


Frames


What Are Frames?

Frames are graphical and logical subdivisions of a single web "page" into two or more sections. Frames allow one to create web sites which are less "linear" than non-framed sites. The idea behind frames is to make a site more "browseable", like one would casually flip through a book. Most current sites use a two-frame format. The first serves as the site navigation index, while the other is the frame holding the selected "content" pages. In case you haven't noticed already, you are using a two-frame site as you navigate Ted's online documentation pages or Chris' home page!

When frames were first introduced, they were received with great enthusiasm. So positive was the response that frames were often abused and became subject to much derision by many in the Web community. In particular, sites would become so heavily framed that it actually hindered easy navigation rather than assisted it. Since the frames craze has since died down, many sites offer alternative frame and non-framed versions (notice a common theme here?) to cater to the tastes of all Web navigators.

As with any other Web authoring resource, use a little common sense when using frames. Don't use frames just for the sake of using them. You first need to ask yourself what it is that you want to do with the site and then try to come up with the tools at your disposal which will help you achieve that objective. If frames are the answer, use them, if not, don't, it's that simple! If you do use them, try to use no more than three frames per page.

Are Frames HTML?

Yes and no. Frames are a proprietary HTML tag courtesy of Netscape Communications. They are not subject to the HTML 2.0 specification. However, due to their wide acceptance, they have become a de-facto "standard" supported by the majority of popular browsers. If the HTML 3.0 specification ever becomes official, it is likely that frames will be a part of that specification.

The "Back" Button Fiasco

One of the biggest complaints (and sources of frustrations for newcomers) concerning frames was their failure to properly support the "back" button. Normally, when one browses a site (or series of sites) and wants to return to the previously viewed page, one simply clicks the back button. Unfortunately, this wasn't the case for framed pages. Clicking the back button within a framed page took you to the "main" page (or previous web site) rather then the previous frame. In order to circumvent this problem, one was required to place the pointer in the viewing frame and then click the right mouse button, which would provide a "back in frame/forward in frame" option. This created a fairly cumbersome and non-intuitive method of site navigation, somewhat defeating the whole idea behind frames. Fortunately, Netscape 3.0 addresses this problem and allows "normal" use of back button operations within a framed site.

How Do I Create A Framed Page?

One of the first things to understand with frames is that it actually takes several HTML documents to create a single framed "page" (or "window"). For a two-frame page, you will actually have three HTML documents. The first document establishes the framesets, or configuration, of the page. The remaining two are standard HTML documents which specify the content of each frame.

When creating a framed page, before typing any HTML code, you need to think a little bit about page setup. Making efficient use of frames and maximizing "content" page space is one of the most difficult problems to solve for the person creating framed sites. Try to determine what you want to achieve, the least number of frames necessary to achieve the desired effect, and the configuration of the frames themselves. You might want to draw sketches on paper first to see what will work best. Once you have determined the page configuration, you are ready to create the frameset page. There are three basic tags necessary to create a framed HTML document:

  1. <frameset></frameset>

  2. <frame></frame>

  • <noframes>

    One thing to bear in mind when using frames as a navigational tool is font size. Because index frames are generally fairly narrow, they can appear quite cluttered using standard size font. Reducing the font size will help make the frame appear tidier and less crowded.

    Referencing Frames In HTML Documents

    One problem created with a framed page which you may or may not have noticed is this: "How does the browser know which page to place the "new" page into when a hyperlink is clicked?" You first response would probably be what the people at Netscape decided upon as the default. When a hyperlink is clicked within a frame, the new document will be created in the same frame unless another frame is specified. However, this method will not work where one frame serves as an "index" and the other serves as a "content" page. In that situation, what we want to have happen is have an index topic be clicked, and have the corresponding page appear in the separate "content" frame. Again, this is how the present online materials are set up: you click on a topic in the bottom frame and the related materials appear in the top frame.

    To direct new pages to a different frame, use the following syntax:

    <a href = URL target = framename>

    In addition to the names specified in the <frame></frame> tags, there are a few special targets which you can use:

    1. target = _top
      • Completely destroys the current frame structure and loads the new page into a new window. This is a useful target if you want to replace the contents of more than one frame with a single click on a hyperlink.

    2. target = _parent
      • Similar to _top, except the entire frame structure is not destroyed. The new page is loaded into the area defined by the frameset containing the frame which contains the hypertext link.

    3. target = _self
      • The page is loaded into the frame containing the hypertext reference. This is the default where no other frame is specified.

    4. target = _blank
      • Creates a new window in which to load the document.


    Web Resources

    HTML FORMS & CGI SCRIPTING


    Up until now we have shown you how to create interesting, informative and aesthetically appealing web pages. However, the information exchange at the present time is proceeding in only one direction: toward the user. One of the latest buzzwords which you may have been hearing with respect to the Internet is it's potential for interactivity (i.e. the bi-directional exchange of information between server and client). HTML forms are one of an ever-growing number of means by which true interactivity is being achieved.

    What Are HTML Forms?

    Forms are essentially what the name implies them to be: HTML documents which allow the user to input values and return the information to the person who created the form. Questionnaires, search engines, order forms, comment requests and guest books are just a few of the myriad ways in which HTML's support for online forms have been implemented.

    Anatomy of A Form

    HTML forms have three fundamental components:

    1. Form Tags
      • <form method = "" action = ""></form>
    2. Form Element(s)
    3. Submit/Reset Buttons
      • <input type = "submit">
      • <input type = "reset">
      • Optional attribute
        • value = "buttonname"

    There are two primary methods which may be specified in an HTML form:

    1. method = "GET"
      • Contacts server and transmits data in single transmission
    2. method = "POST"
      • Contacts server and transmits data in separate transmissions

    As a general rule, when in doubt, use the POST attribute unless you are certain that you understand the difference between POST & GET, or if the script which you are using indicates that you must use the GET attribute. One clever use of the GET attribute can be found at Stroud's Consummate Winsock Apps list. By utilizing the GET attribute in conjunction with submit buttons, one can create simple "hot buttons" which will send you to another page at the website.

    The "action = " attribute specifies how the form will be handled by the server. For example, if the form will be processed by a CGI script, the URL of the script will be provided here.

    There are several elements which can be included in an HTML form:

    1. Text Areas
      • <textarea></textarea>
      • Attributes
        • name = "areaname"
        • rows = #
        • cols = #
    2. Text Fields
      • <input type = "text">
        • Attributes
          • name = "areaname"
          • size = #
          • maxlength = #
          • value = # or "textvalue"
    3. Password Field
      • <input type = "password">
        • Optional Attributes
          • name = "areaname"
          • size = #
          • maxlength = #
    4. Drop-Down (Select) Lists

      or

      • <select name = "listname"></select>
        • Optional Attributes
          • multiple
          • name = name
      • <option value = # or "textvalue"> (Between <select></select> tags)
        • Optional Attributes
          • selected
          • value = # or textvalue
    5. Checkboxes
      Checkbox1 Checkbox 2
      • <input type = "checkbox">
        • Optional Attributes
          • name = "name"
          • value = # or "textvalue"
          • checked
    6. Radio Buttons
      Button 1 Button 2
      • <input type = "radio">
        • Optional Attributes
          • name = "name"
          • value = # or "textvalue"
          • checked

    Lab Assignment

    Part One:

    Part Two:



    © 1996 Ted D. Biggs, Andy Harris. All Rights Reserved.
    Indiana University, Purdue University, Indianapolis
    Department of Computer & Information Science
    email: tbiggs@klingon.iupucs.iupui.edu