Frames Tutorial: 465 Fall 1998

Sample frames

NOTE: To do this tutorial, you may want to launch two iterations of your browser. use one for the instructions and the other for your work. if you launch the first browser, then your editor, then the second browser, your taskbar in Win 95 will clearly indicate all three and where you are.

Frames were added to HTML browsers later than Tables, so there may be browsers in use that do not support them. It is a good idea in creating frames to think of a main frame where browsers that don't support frames can start.

To create a Frame, we will need at least two content files that can be seen on the screen and one invisible control file containing a FRAMESET that isn't displayed.

Let's start by creating several content files. For demonstration purposes let's give them different colors.

1. Create a file called red.html with the tag <BODY BGCOLOR="red"> and the text <H1> This is Red </H1>. Don't worry for this demo if your file lacks <HTML> and <HEAD> tags.

The result should look like this (don't copy these texts -- they contain special codes to display rather than execute the angle bracket characters):

<BODY BGCOLOR="red">
<h1<This is red</h1>

To create this file you can

  1. Type it into a new file in your Pico or Emacs word processor
  2. --Or start a new file, insert a simple template file, and edit it
  3. --Or copy a simple template file to the new name and edit it.
  4. --Or edit it in Notepad and then upload it -- the hard way.
2. To be sure the new file works, bring it up in your browser. Don't forget to do chmod 755! Or since there are several files to create, you can grant permissions one by one or do them all at once.

3. Create a second file called white.html. The BGCOLOR should be white, and the text should say "This is white." The simplest way to do this is to copy red.html to white.html

in Unix, cp red.html white.html

and then edit it in Emacs or Pico. You can also use the editor write or output command, specificying a new filename after you make changes. Whatever you do, re-use modules and avoid re-typing. Check the result in your browser if you are unsure.

4. To be sure the new file works, bring it up in your browser.

5. Do the same for a third file called blue.hrml with blue BGCOLOR and blue caption.

6. To be sure the new file works, bring it up in your browser.

7. One more time, please, for a fourth file, gray.html with gray BGCOLOR and caption.

8. To be sure the new file works, bring it up in your browser.

Now that we have four visible files to play with, we are read to create the invisible (and disembodied) control file.

9. Start a new file called frame-r1.html" and type in the following:

  1. A normal <HTML>, <HEAD>, and <TITLE> heading with the TITLE "Frame Rows 1 Test".
  2. Be sure to close these tags with </TITLE> and </HEAD>.
  3. No BODY tag, please. This is an invisible (and disembodied) file, remember?
  4. A <FRAMESET> tag ... which will be closed with </FRAMESET>.
  5. A rows (or cols) specification for the <FRAMESET> tag. In this case, let's make it <FRAMESET ROWS="50%,50%"> for two equally sized rows.
  6. Two <FRAME SRC> tags for the content. In this case, let's do
    • <FRAME SRC="red.html">
    • <FRAME SRC="white.html">
  7. Now close the </FRAMESET>.
  8. Finally, provide for browsers that cannot read frames:
    <NOFRAMES>[alternate text here]</NOFRAMES>

    A good alternate text might a link to the mainpage in the frame group, perhaps with a brief explanation:

    Example: <NOFRAMES> Your browser does not support frames. But you can still go to the <a href="mainpage.html">main page</a>. </NOFRAMES>

*** To recapitulate, the file should look like this: ** *

<HTML> <HEAD> <TITLE> Frame Rows Test 1 </TITLE> </HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="red.html">
<FRAME SRC="white.html">
</FRAMESET>
<NOFRAMES> Your browser does not support frames. But you can still go to the <a href="mainpage.html">main page</a>. </NOFRAMES> </HTML>>

10. Bring up frame-r1.html in your browser. You should see a display with the red file at top and the white file at bottom, equally sized.

11. Let's do the same thing with columns. Start a new file called frame-c1.html" and type in the following:

  1. A normal <HEAD> with the <TITLE> Frame Cols 1 test.
  2. Be sure to close these tags with </TITLE> and </HEAD>.
  3. No BODY tag, please. This is an invisible (and disembodied) file, remember?
  4. A <FRAMESET> tag ... which will be closed with </FRAMESET>.
  5. A cols specification for the <FRAMESET> tag. In this case, let's make it <FRAMESET COLS="25%,75%"> for two unequally sized columns.
  6. Two <FRAME SRC> tags for the content. In this case, let's do
    • <FRAME SRC="blue.html">
    • <FRAME SRC="gray.html">
  7. Now close with </FRAMESET>.

12. Bring up frame-c1.html in your browser. You should see a display with the smaller blue file on top and the larger gray file on the bottom.

13. We can of course use more than two frames. Let's do a tricolor. Start a new file called frame-r2.html and type in the following:

  1. A normal <HTML>, <HEAD>, and <TITLE> heading with the TITLE "Frame Rows Test 2".
  2. Be sure to close these tags with </TITLE> and </HEAD>.
  3. No BODY tag, please. This is an invisible (and disembodied) file, remember?
  4. A <FRAMESET> tag ... which will be closed with </FRAMESET>.
  5. A rows (or cols) specification for the <FRAMESET> tag. In this case, let's make it <FRAMESET ROWS="*,*,*;> for three equally sized rows. The browser divides the space proportionately by asterisk values. (It it were "2*,*,*" it would make three parts in the ratio 50%, 25%, 25%.
  6. Three <FRAME SRC> tags for the content. In this case, let's do
    • <FRAME SRC="red.html">
    • <FRAME SRC="white.html">
    • <FRAME SRC="blue.html">
  7. Now close with </FRAMESET>.

14. Save the file and inspect it in your browser.

15. You can also combine columns and rows in your frames. Let's repeat the tricolor with a gray block at the left. In mixing columns and rows, the direction that goes completely from edge-to-edge comes first.

16. Start a new file called frame-cr1.html and type in the following:

  1. A normal <HTML>, <HEAD>, and <TITLE> heading with the TITLE "Frame Columns/Rows Test 1".
  2. Be sure to close these tags with </TITLE> and </HEAD>.
  3. No BODY tag, please. This is an invisible (and disembodied) file, remember?
  4. A <FRAMESET> tag ... which will be closed with </FRAMESET>.
  5. A cols specification for the <FRAMESET> tag. In this case, let's make it <FRAMESET COLS="150,*; for two columns, the first 150 pixels, then the second for the remainder of the screen.
  6. One <FRAME SRC> tags for the first column. In this case, let's do
    • <FRAME SRC="gray.html">
  7. But the second column will contain three rows so we need a second <FRAMESET> tag for three equal parts, namely
    <FRAMESET ROWS="33%,33%,33%"> -- which is the same as "*,*,*".
  8. Now we need the three contents files:
    • <FRAME SRC="red.html">
    • <FRAME SRC="white.html">
    • <FRAME SRC="blue.html">
  9. Now close with </FRAMESET> for the three rows.
  10. Then close with a secomd </FRAMESET> for the two columns.

17. Save the file and inspect it in your browser.

18. Frames need not be static. A small frame can be a navigation area to select different contents in the larger frame. Let's assume we'll have a fixed but thin vertical navigation frame on the left and variable contents in the larger frame on the right. In this case we must assign a name to that larger frame and then use it as the TARGET for the different files to be seen there.

19. Let's start a new file called frame-n1.html and type in the following:

  1. A normal <HEAD> with the <TITLE> Frame Nav 1 test.
  2. Be sure to close these tags with </TITLE> and </HEAD>.
  3. No BODY tag, please. This is an invisible (and disembodied) file, remember?
  4. A <FRAMESET> tag ... which will be closed with </FRAMESET>.
  5. A cols specification for the <FRAMESET> tag. In this case, let's make it <COLS="20%,*"> for two unequally sized columns.
  6. Two <FRAME SRC> tags for the content. In this case, let's do
    • <FRAME SRC="nav.html" NAME="nav"> -- we'll create this nav.htmlfile in a moment...
    • <FRAME SRC="red.html"> NAME="right">
  7. Now close with </FRAMESET>.

20. Create the nav.html file. If you wish to give it a background color, use "tan" or "ivory" or "yellow" or some other light, preferably warm color so the blue links will stand out.

21. Include in the nav.html this series of links:
<ul>
<LI><A HREF="red.html" TARGET="right">Red</a>
<LI><A HREF="white.html" TARGET="right">White</a>
<LI><A HREF="blue.html" TARGET="right">Blue</a>
</ul>

22. Bring up the frame-n1.html file in your broswer. As you click on the various colors on the left in the navigation frame they will be displayed on the right.

23. Attributes for FRAMESET:

Sample frames Use the examples with COLS or ROWS for testing.

The FRAMESET tag defines the distribution and division of the total canvas into separate frames. It must have at least one ROWS or COLS attribute. The FRAME tag defines the ingredients within each tag. Each FRAME tag must have an SRC attribute pointing to a text or image or other URL.

By default, your frames will have borders which can be resized by dragging. Scollbars will appear if the amount of text exceeds the frame space available. As ever, avoid horizontal scollbars.

To prevent borders, resizing and scrollbars, as in the case of a logo or navigation bar of fixed size, use the BORDER=0 tag in FRAMESET and the NORESIZE and SCROLLING tags in FRAME (below).

FRAMESET tags may be nested. In its simplest form, a file called for in a subsidiary FRAME tag may have another FRAMESET in it to divide that frame into sub-rows and/or subcolumns.

Or a FRAMESET tag can be nested at the top level by putting it where a FRAME tag might go.

BORDER
Any number for border thickness (pixels) . Use BORDER=0 for no border. Usually a borderless frame can'r be scrolled or resized.

FRAMEBORDER
1 or yes for Border and 0 or no for none. This FRAMESET tag can be overridden by a FRAME tag, permitting individual differences,

COLS
Specified in integers (pixels, percentages, or asterisks (proportional), or any combination. The FRAMESET must have at least one COLS or ROWS tag.

ROWS
Specified in integers (pixels), percentages, or asterisks (proportional) , or any combination. The FRAMESET must have at least one COLS or ROWS tag.

24. Attributes for FRAME:

Sample frames Use the examples with COLS or ROWS for testing.

The file must contain at least two FRAME tags. If any FRAME tag does not contain a SRC attribute, nothing will appear on the screen. By default, the several FRAME tags will be displayed in the order provided in the FRAMESET tag, first by rows and then by columns.

SRC
The URL to be displayed.

FRAMEBORDER
1 or yes for Border and 0 or no for none. If this tag appears here and in the FRAMESET the FRAME version takes precedence.

MARGINHEIGHT
Top & bottom margin (height) in pixels. The mimimum value is 1.

MARGINWIDTH
Left and right margin (width) in pixels. The mimimum value is 1.

NAME
Any string in quotes beginning with a letter. Do not start the name with an underline, which is reserved for several "magic names," the most useful of which is "_top," which displays the file in a full screen.

NORESIZE
When present, prevents user from resizing the frame. Used with a navigation bar or graphic of fixed size. Sometime used with borderless frames.

SCROLLING
  • AUTO (default) provides scrollbars as needed
  • YES provides scrollbars.
  • NO prevents scrollbars. Often used with borderless frames.

    • A tight frame arrangement might use

    <FRAMESET "Cols/Rows" ... BORDER=0 FRAMEBORDER=0>

    in association with

    <FRAME SRC="...URL..." FRAMEBORDER=0 MARGINHEIGHT=1 MARGINWIDTH=1 NAME=label TARGET="_top," NORESIZE SCROLLING=AUTO>

    25. Attributes for calling links:

    Any member of a frame set may be called from any other file. To specify where the file is to be displayed, use the TARGET tag. Let's assume we have two frames named "nav" and "right":

    <A HREF="framefile.html" TARGET="nav"> Shows file in navigation frame</A>

    <A HREF="framefile.html" TARGET="right"> Shows file in right side frame</A>

    <A HREF="framefile.html" TARGET="_self"> The magic name "_self" replace current frame</A>

    <A HREF="framefile.html" TARGET="_top"> The magic name "_top" is used to replace the display with a full screen frame</A>

    <A HREF="framefile.html" TARGET="_blank"> The magic name "_blank" is used to open a new full screen frame</A>

    <A HREF="framefile.html" TARGET="_parent"> The magic name "_parent" is used to replace a higher level full screen frame</A>

    Example:

    Use this to code to let the reader break out of a frameset, especially where one or more unwanted navigation bars may persist! Always use this target when linking it a URL at a new location or old frame elements will persist.

    26. Some afterthoughts on frames.

    Frames are an effective way to display two or more things on the screen independently. Often they have a hierarchical relationship -- logo and content, advertising and content, navigation and content, navigation and subnavigation (subtopics), or content and subcontent (footnotes or glossary).

    Frames can also be used for fancy wrap around menus often covering

  • (1) the left edge of the screen,
  • (2) the top of the screen, often rounded at the right, and
  • (3) a rounded corner between the top and left to make them all appear one piece in presenting logos, ads, help, navigation, what's new, etc.

    Frames must be rectangular but the images they contain can have any shape.

    But frames have some complications.

    • The original TITLE will persist in the titlebar.
    • It's hard to bookmark a page within frames.
    • VIEW-SOURCE will bring up not the frame but its control file.
      • To focus on a particular frame: right-click for a frame menu and then select view-source or display in new window
    • Printing or downloading may produce the wrong frame.
      • Before printing, focus on the frame by clicking on it or define a piece of text.
    • In older browsers, BACK will break out of the frame series to show the previous file. Recent browsers can move backwards in the frame series but only the original title wll be seen in the Go menu.
    • Unless external URLs are targetted correctly, unwanted frames will persist at the new location.
      • Even in the same location, multiple unwanted frames can build up if going to another location with frames.