Web Basics and Beyond

NANCY KAPLAN
STUART MOULTHROP

School of Communications Design
University of Baltimore

Updated 01-27-00

Part Five

FRAMES, FORMS, AND BEYOND

5.1 | FRAMES

5.1.1 · Concept and Background

    Frames are among Netscape's most ambitious extensions of conventional HTML; they subdivide the browser window into what are in effect other browser windows, each displaying a URL or Web page.

    In part this development answers the complaint that "travel" through the Web is too disorienting; with frames, part of the screen can remain stable as others change. This stable "ledge" could contain a table of contents, context-sensitive help, or just an identifying mark.

    Frame pages may thus enclose and exhibit other pages. This effect adds a new dimension to hypertext linking in HTML, allowing destination points to become visible before the reader has departed the original context.

    Since an entire frame page may be called up as subframe of another such page, the potential for recursion is very high, windows within windows within windows. Frames add considerably to the sophistication -- and complexity -- of Web documents.

    Finally, the cynic's view. Perhaps the motivation behind frames is simply commercial: advertisers can now keep their messages in front of Web surfers even as they cruise from site to site. Naaah.
5.1.2 · Principles of Frame Documents
    A GENERALIZED FRAME DOCUMENT
      <HTML>
          <HEAD>
          </HEAD>

          <FRAMESET>
                      <FRAME>
                      <FRAME>
          </FRAMESET>
      </HTML>


    A frame document has no BODY container: this is replaced in the markup by the FRAMESET container. Note that no tags useable inside a BODY container (IMG, H, HR, etc.) may appear ahead of the FRAMESET tag. The browser will ignore the frames information if it finds any of these first.

    Thus frames construction is an all-or-nothing proposition: you can't mix frames with other layout styles as you can tables, applets, movies, and other enhancements to standard HTML.

    By implication, frame layout pages constitute a new class of HTML documents, a more general and abstract level of structure that is connected to older forms, yet distinct from them.

5.1.3 · FRAMESET and its Attributes

    You'll remember that in HTML tables, rows are specified with <TR> while columns are implied by the layering up of table cells.

    Unlike in tables, the frame scheme allows both rows and columns to be specified, so the initial FRAMESET tag has attributes for COLS as well as ROWS.
      Of course, you can write frame layouts having only columns or only rows. These simpler layouts are in fact quite common on the Web.


    Here is a specimen frame layout showing this principle in action. Unlike in previous examples, you'll have to follow a link to see the frames output because the actual frames markup must reside on a separate page (remember, you can't mix frame tags with non-frame constructions).

    A Simple Frame Layout
    <frameset rows="50%,50%">

      <frameset cols="50%,50%">
        <frame src="demoA.htm">
        <frame src="demoB.htm">
      </frameset>

      <frame src="demoC.htm">

    </frameset>     		VIEW THE OUTPUT


    In this example the screen is divided two ways yielding three parts. The first "cut" (the initial or outer frameset container) splits the screen into two horizontal strips or rows. The top row is then divided by a vertical line into two columns (this is the work of the second, embedded frameset container). The lower section of the screen remains undivided and is handled by the final frame tag.

    Nothing requires that rows be specified before columns. We could have nested the elements the other way around, though this produces a different layout, as you can see.

    In designing a frames layout with both rows and columns, you first define one dimension of the grid (rows or columns) then work out the divisions within each of the primary units, if subdivisions are needed. Every division of the page must be accounted for either by a frame tag or by an embedded frameset container.

    The dimensions of frames may be set in three ways: in percentages (as in our examples), in absolute pixels, or with an asterisk (*) indicating that the frame in question will be sized in relation to the space available. Here's how the asterisk usage works:
      <FRAMESET ROWS="120,*,55">


    This frameset divides the screen horizontally into three sections, the topmost 120 pixels high, the lowest 55 pixels high, and the middle section whatever remains after these values are deducted from the total height of the active window. This approach might be used to place non-scrolling "ledges" at top and bottom and a scrolling window in the middle of the screen.

      NOTE: Don't forget the quotation marks ("") around the values assigned to ROWS and COLS. Though many attributes don't strictly require quotation marks, ROWS and COLS absolutely do. If your layout isn't coming out as you want, check your code for a missing quotation mark.
5.1.4 · <FRAME>
    Like <TD> in tables, the solitary FRAME tag fills in the content of the subdivisions in a frame layout. Each frame is assigned a particular URL (and the same URL may be assigned to more than one frame) through the SRC attribute. SRC in effect creates a view of an HTML page in one section of the current screen display.

    <FRAME> also has optional attributes:

    NAME
    This attribute gives the frame a designation that may be used with the TARGET attribute in the link anchor tag (see below).

    MARGINWIDTH, MARGINHEIGHT
    These attributes let you set (in pixels) the width or height of the gap between the frame border and the contents of the frame.

    SCROLLING
    By default scrollbars will appear within a frame if its contents exceed the available dimensions -- for instance, if you were to access the (very long) page you are reading now in a frame only 100 pixels high.

    If you set SCROLLING to "NO," then scrollbars will not appear under any circumstances; likewise a "YES" value brings in scrollbars whether or not they are required.

    Note that scrollbars appear for both horizontal and vertical scrolling even if you only wish to scroll in one dimension; some consider this a flaw.

    NORESIZE
    This attribute is a "flag" with no assigned value (like NOSHADE in the HR tag); if NORESIZE is included, then the frame in question will always have the same height and width -- otherwise the user can "drag" the frame margins to change the relative size of the frame, decreasing the amount of screen space given to other frames.

    NORESIZE turns off a default "yes" condition: all frames may be resized by the reader unless you say otherwise.
5.1.5 · Links and Frames
    When a Web page is displayed in a frame all its hypertexts links remain active, allowing the reader to call up other pages; but where do these other pages appear?

    By default they show up in the same frame within which the link was activated, as in this example...

    You may, however, create links that "arrive" in frames other than the one containing the departure point. This is done by adding a TARGET attribute to the departure link anchor.

    The value assigned to TARGET may be the NAME value assigned in <FRAME>. Consider yet another example, along with its frame layout:

    "TABLE OF CONTENTS" FRAME LAYOUT
    <frameset cols="20%,80%">
        <frame src="demo_toc.htm" name="toc">
        <frame src="demoA.htm" name="main">
    </frameset>     		VIEW
    OUTPUT


    Each of the two frames in this layout has a NAME attribute (though in this case only the second, "main," is actually used). The links contained in the "toc" ("Table of Contents") frame all contain TARGET attributes referring to "main," for instance:

    <a href="demoA.htm" target="main">FILE A</a>

    By using TARGET in link anchors, you can cause a link to change the contents of a specified frame. Note however that links cannot be targeted to more than one frame.

      NOTE: Sun's Java and Netscape's JavaScript offer ways of updating multiple frames, but both require structures considerably more complicated than a simple hypertext link.
5.1.6 · Special NAME/TARGET Values
    Though you can use almost anything you want as a corresponding value for NAME and TARGET, a number of values are reserved for special functions. Each of these special values begins with the underscore character ( _ ):

    _top
    Replaces the current frames layout with a new window in which only the destination page appears (you can use this facility to let readers "break out" of frames).

    _new and _blank
    Like _top, these values create fresh windows, but they do not in all cases close the original frames layout. This can be confusing.

    _parent
    Places the destination page in the "parent" of the current frame -- which has the same effect as "_top" unless there is more than one window open, in which case only the "parent" window is updated.

    _self
    Places the destination page in the frame containing the link -- this is the default case.


      NOTE: Special NAME/TARGET values must be given in lowercase letters; though HTML is usually not case-sensitive, this is a crucial exception.
5.1.7 · <NOFRAMES>
    This optional but highly useful container provides a "failsafe" option in case the reader is running a browser program that does not support frames. Markup placed within the NOFRAMES container appears in place of the frames layout when the page is accessed by a non-frames browser.

    You can think of NOFRAMES as a sort of emergency BODY container. When redesigning older pages for frames, some authors simply copy all the contents of BODY in the old version and insert it into the NOFRAMES container of the frames layout; or consider this more conservative option:

    EXAMPLE OF "NOFRAMES" BYPASS
    MARKUP OUTPUT
    <NOFRAMES>
      <TABLE HEIGHT="100%" WIDTH="100%">
      <TR><TD ALIGN="MIDDLE"><STRONG>
      Your Browser Does Not Support Frames
      </STRONG><P>
      For the non-frames version
      of this page, click
      <a href="old.htm">here</a>
      </TD></TR></TABLE>
    </NOFRAMES>     		<TABLE WIDTH="100%"> <TR><TD ALIGN="center"><CODE><STRONG> Your Browser Does Not Support Frames</STRONG> <BR><BR> For the non-frames version of this page, click</CODE> <A HREF="frameDem/demo_toc.htm"><CODE>here</CODE></A>. </TD></TR></TABLE>
5.1.8 · The Trouble(s) with Frames
    The reception of frames has been fairly cool. Bemused users point out several areas of concern, most of which software designers have tried to address, though controversies continue:

    Navigation
    Readers have complained sharply that frames make the Back function terribly ambiguous. Before frames, Back meant "show me the page I was viewing before this one" -- which is still the case with frames pages, though with a very troublesome difference.

    Frustrated readers found that Back on a frames page applies to the entire page (or layout), not just to the frame most recently updated. Having asked for a previous state of the layout (all the current frames plus an earlier version of one frame in particular) they would see instead whatever page they had been viewing before they accessed the frames layout -- usually a page showing none of the previously visible frames.

    Netscape has added Back in Frame and Forward in Frame functions, both of which are available from the pop-up menu that appears if the mouse button is held down while the cursor is within a frame. This is at least a partial solution.

    "Hide Frames"
    Authors may wish to let readers see the page in a separate, unframed window. Originally they had to create a link somewhere on their pages using the "_top" value for TARGET.

    This was a less than perfect solution, since the "hide frames" link could be scrolled out of sight on longer pages. Netscape responded by adding a feature to the local pop-up menu called New Window With This Frame.

    Proliferating Markup
    Inevitably, frames add a new level of complexity to Web markup. Working on a frames project may entail making interdependent changes on the frames layout page as well as several other pages invoked by various links.

    It is particularly difficult to view the source of a page within a frames layout; View Source in the browser shows only the markup for the layout page.

    To find the source for pages within frames, readers can use the New Window feature described above, then view the document source once the page has been isolated.

    Ugliness
    For those not fond of thick gray lines, the original frames implementation was notably unattactive. However, Microsoft added the ability to change or suppress the frames borders in Internet Explorer, prompting Netscape to do the same in Navigator 3.0.

    Navigator now supports a FRAMEBORDER attribute in both the FRAMESET container and the FRAME tag, allowing the author to set the width of frame border lines, including a 0 setting for no visible borders.

    There is also now a BORDERCOLOR attribute that enables border divisions in colors other than battleship gray.

    However, documentation for the new attributes seems less than clear about when they are and are not effective -- qualities set for one frame may be overridden by a neighboring frame, and framesets nested within other framesets are handled differently than those on the outside; this is not an easy problem.

    Scrolling
    Though individual frames within the layout may scroll, the layout as a whole may not. This is a substantial difference from tables, which may contain more elements than are visible on the screen at once -- a frame layout is confined to the limits of the screen, like it or not.

    This is of course as much a blessing as a curse: would I really want a meta-scrollbar on the left or bottom of the screen, allowing me to scroll EVEN MORE frames into view?

5.2 | FORMS

5.2.1 · The FORM Container

    Forms provide the potential for interactivity on Web pages, but they often require using a CGI residing on a server to process the input. As a result they may not seem terribly useful for basic Web Work. Nevertheless, knowing how to create FORMs will enable you to tackle more advanced techniques -- Javascript or middleware applications like Cold Fusion -- later on.

    The FORM tag is a container. It can take several attributes but the most important ones are METHOD and ACTION.

    METHOD specifies how the form data will be sent. You can choose between "get" and "post." The "get" method sends the data as part of the URL and limits the amount of data you can send to 100 characters. The "post" method is the more common because it does not restrict the amount of data you can send.

    ACTION tells the form where to send the data collected through its input elements. Often, ACTION specifies a URL for a script to handle processing at the server end. Such scripts are beyond the scope of this set of notes. One useful ACTION that does not require processing on the server, however, is a MAILTO:.

    Here's a sample of a FORM container specifying that the form's contents be sent via e-mail:
      <FORM METHOD="post" ACTION="mailto: nakaplan@ubmail.ubalt.edu">
        [ form elements go in here ]
      </FORM>

5.2.2 · INPUT element

    The INPUT element is the most general type of control or form element. It is a singleton tag used to create standard text fields, check boxes and radio buttons, submit and reset buttons, and password fields, to name a few of the most common varieties.

    To differentiate among all these varieties, the INPUT element uses the TYPE attribute. Below is a list of common VALUES for the TYPE attribute.

    TEXT
    An INPUT TYPE="text" usually accompanied by three other attributes: NAME, SIZE, and MAXLENGTH.

    The NAME attribute is an arbitrary name used to differentiate one input field from another. You need to use a unique NAME for each INPUT field of the TYPE TEXT.

    The value assigned to the SIZE attribute specifies the dimensions of the INPUT field.

    The value assigned to the MAXLENGTH attribute specifies the maximum number of characters a user can type into the field. MAXLENGTH can be a larger value than SIZE but it is usually a bad idea to specify a larger value for SIZE than for MAXLENGTH.

    PASSWORD
    Using PASSWORD as the value for the TYPE attribute directs the browser to display the input characters as bullets or asterisks. That way other people in the room cannot read the input string.

    NAME, SIZE, and MAXLENGTH attributes often accompany this TYPE.

    CHECKBOX
    These input types have lots of wonderful uses but they are a little tricky to construct. Generally check boxes appear in groups and allow you to offer a menu of non-exclusive choices (see radio buttons for creating a menu of mutually exclusive choices).

    To construct a group, each element in the group needs to be assigned the same NAME. To make sure I can tell which items were checked and which were left blank when I receive the data, I need to assign each check box a unique VALUEFor example, to construct a list of things the visitor to my Web site might want to hear about, I could create a sequence of check boxes like this:

      <INPUT TYPE="checkbox" NAME="categories" VALUE="politics"> politics
      <INPUT TYPE="checkbox" NAME="categories" VALUE="international markets"> international markets
      <INPUT TYPE="checkbox" NAME="categories" VALUE="weather"> weather
      <INPUT TYPE="checkbox" NAME="categories" VALUE="sports"> sports


    The display will look something like this:
      politics
      international markets
      weather
      sports


    RADIO
    Radio buttons work much the same way check boxes do: they are grouped together through the NAME attribute and can also have a VALUE attribute to differentiate members of the group from one another. Whereas a user can click on (CHECK) any number of check boxes within a single group, he or she can check only one radio button at at time. They are mutually exclusive options.

    The same set of choices set up as radio buttons look like this:

      <INPUT TYPE="radio" NAME="categories" VALUE="politics"> politics
      <INPUT TYPE="radio" NAME="categories" VALUE="international markets"> international markets
      <INPUT TYPE="radio" NAME="categories" VALUE="weather"> weather
      <INPUT TYPE="radio" NAME="categories" VALUE="sports"> sports

      politics
      international markets
      weather
      sports
    SUBMIT or RESET
    Each of these VALUES for the TYPE attribute creates a button. SUBMIT sends the form data to the script specified in the ACTION attribute of the FORM tag and RESET clears all the input the user has entered into the form.

    The VALUE attribute that goes with this INPUT TYPE specifies the words that appear on the button.

5.2.3 · Text Areas

    This tag constructs a free-form input area where your visitors can type whatever they want. It is a container requiring both a start and an end tag. It is sized by specifying values for two attributes: COLS and ROWS. The code looks like this:
      <TEXTAREA COLS="60" ROWS="4"></TEXTAREA>
    And the output like this:
 

5.2.4 · Selection Lists

    The SELECT tag is a container (that is, it requires both a start and an end component). It can accept a SIZE attribute to indicate whether the list will appear in a scrolling box (SIZE > 1) or a drop-down menu (SIZE="1"). If the selection list is presented as a scrolling box with multiple items and you want to allow people to choose more than one item from the list, you must also use the MULTIPLE attribute in conjunction with the SIZE attribute. The MULTIPLE attribute does not take a VALUE.

    The selection list presented as a drop-down menu does not permit users to select more than one choice from the list.

    Selection lists require that at least one OPTION element occur inside the SELECT container.

    The mark-up below creates a drop-down selection list with three choices:

      <SELECT NAME="animals" SIZE="1">
        <OPTION>lions</OPTION>
        <OPTION>tigers</OPTION>
        <OPTION>bears</OPTION>
      </SELECT>

    The results look like this:
    Note that no VALUE attribute is required for the OPTION element. The text typed between the two halves of the the OPTION tag becomes the text displayed in the list as well as the value passed when the form is submitted.

    The same code rendered as a scrolling field with multiple selection possibilities looks like this:

      <SELECT NAME="animals" SIZE="3" MULTIPLE>
        <OPTION>lions</OPTION>
        <OPTION>tigers</OPTION>
        <OPTION>bears</OPTION>
        <OPTION>mice</OPTION>
        <OPTION>voles</OPTION>
        <OPTION>moles</OPTION>
      </SELECT>

    Now the results look like this:


5.3 | STYLES & STYLE SHEETS

5.3.1 · The Principles of Styles

    Before the W3C established standards for using Styles and Style Sheets, all sorts of visual elements were laboriously coded one instance at a time. So every time you wanted an element like a heading treated with an application of color, you would have to add a FONT tag to the H1 or H2 tag. Likewise, to apply color to a small segment of text, you would have to surround that segment with a FONT tag with a COLOR attribute. The problem with all these manuevers is this: any time you decided to change the color scheme for your work, you'd have to hunt down each individual tag and make the color changes there.

    Style Sheets and in-line Styles economize on code and make the process of changing the look of a page or a set of pages much more manageable.

    Style rules can be specified either within a specific tag, for example the P tag, or they can be specified for an entire page or set of pages within a STYLE container.

5.3.2 · Style Rules

    The most common RULES involve color, font, font weight, and font size. Essentially, the rule specifies the feature to be styled and the value to apply to the feature.

    To style the text for a specific paragraph, for example, you would add a STYLE attribute to the tag. The value of the STYLE attribute is the rule or rules you want to apply to the text.

    For example, if I want all the text in a paragraph to be displayed in a 10-point sans-serif font, I would write the P tag this way:

    <P STYLE="font: 10pt sans-serif;">


    With rules for color and weight, the tag would look like this:

    <P STYLE="font: 10pt sans-serif; color: 660066; font-weight: bold">


    A rule consists of a PROPERTY and a VALUE separated by a colon. Rules are separated from each other by a semi-colon.

5.3.3 · Using a STYLE Container

    Adding STYLE RULES inside HTML tags works, but it is nearly as inefficient as the older method using the now defunct FONT tag, because each instance of the rule has to be coded separately. A better way to manage the visual design is to use a STYLE CONTAINER within which you specify all the rules for various HTML elements.

    Usually located inside the HEAD container, a STYLE CONTAINER surrounds a series of SELECTOR-NAMES each of which is accompanied by its specific DECLARATION or RULE. Each DECLARATION is contained within curly brackets.

    Here's an example of a STYLE SHEET:

      <STYLE TYPE="text/css">
        P {FONT: 12pt serif}
        BODY {background: FFFFFF}
        A:LINK {color: 0000CC}
        A:VLINK {color: 990000}
        H1 {font: 14pt serif; color: 660000}
        H2 {font: 12pt serif; color: 666666}
      </STYLE>


    Note that the STYLE tag contains a TYPE attribute specifying which variety of Style Sheet the page is utilizing.

    Using a Style Sheet means that if you change your mind about the color to be applied to the H1 or H2 text, you only need to change the code in one location for each page in your set.

    If you use an EXTERNAL STYLE SHEET for a whole group of pages, then changes made to declarations on that Style Sheet are applied throughout the entire set! An external Style Sheet is a file with a .css extension containing all the rules for the set of pages. It does not use the STYLE container.

    To apply an EXTERNAL STYLE SHEET, you need to add a LINK tag to the HEAD of the document. The LINK tag is a singleton. It requires two attribute-value pairs: HREF="URL" and TYPE="text/css":

    <LINK HREF="mystyle.css" TYPE="text/css">

5.3.4 · SPANs, DIVs, Classes, and IDs

    To make Style Sheets as flexible and powerful as possible, HTML 4.0 utilizes two new tags and two new attributes.

    The SPAN tag is used to identify a short span of text to which a style rule can be applied. SPAN is an in-line element: it can occur within a paragraph or other HTML element.

    The DIV tag is a block element and can therefore include multiple paragraphs and other HTML elements. Whereas a SPAN can mark off a chunk of text within a paragraph, a DIV always marks off a whole section of a document. It will cause the browser to start the display of the text within the DIV container on a new line.

    To operate as SELECTORS in a Style Sheet, these two tags usually need to include either a CLASS or an ID attribute. Without a CLASS or an ID attribute, all instances of these general tags would have the same style rule applied to them. Generally that is not the desired effect.

    To differentiate one SPAN or DIV from another and yet still be able to create "groupings" of such elements, specify a CLASS attribute and give it a VALUE that identifies it. For example, the code

    <SPAN CLASS="hilite">Highlight this.</SPAN>

    allows me to apply a single rule to every SPAN of the CLASS named hilite.

    The DECLARATION in my Style Sheet would look like this:

    SPAN.hilite {font: bold 16pt/20pt helvetica, arial, verdana, sans-serif}


    The ID attribute works much the same way. It takes an arbitrary string as its value. That string (name) is used in the Style Sheet as the SELECTOR. The difference is this: whereas the CLASS is added to an HTML element to form a single, unique SELECTOR, the ID acts as a kind of "super" selector of its own. That is, the same ID can be assigned to any number of different elements -- everything from SPAN and DIV tags to P or UL tags. Every element with the same ID will have the declaration for that ID applied to it.

    Here's what the HTML mark-up might look like:

    <SPAN ID="overall">Now see this.</SPAN>

    The syntax for the Style Sheet declaration for IDs is also a little different. Here's what it looks like:

    #overall {font: 10pt/12pt helvetica, arial, verdana, sans-serif}

    A HASH mark (pound sign) precedes the value assigned to the ID attribute to define the SELECTOR.

In the meantime, remember what Kerouac said:

-- YOU CAN'T STOP THE MACHINE --

END OF PART 5

TOP OF THIS PAGE ||| CLASS MAIN PAGE

Course and Materials ©1997 - 2000 by Stuart Moulthrop and Nancy Kaplan
Last Updated 01-27-00