HTML/WWW Wkshop: Adv HTML-Frames

Advanced HTML: Frames

Frames allow the window of a browser to be broken into different sections, e.g., to display an index on one side, a header along the top, and the information to be presented in the main section of the window. Frames are a "Netscapeism" that has been adopted by Microsoft's Internet Explorer and probably other browsers as well. They are not part of the HTML 3.2 specification, but can be very useful. (For a more concise explanation of frames, see my frames review.)
A document with frames is different from a normal HTML document as it lacks a body tag, and has instead a frameset tag that defines the rows or columns in the framed document. For example, the HTML file shown in figure F1 gives the display shown in figure F2.

<html> <head> <title>frame test</title> </head> <frameset rows="60%,40%"> <frame src="ft1.html"> <frameset cols="40%,60%"> <frame src="ft2.html" name=ft1 marginwidth=20 marginheight=5> <frame src="ft3.html" name=ft2> </frameset> </frameset> <noframes> this is a test document for frames </noframes> </html>

Figure F1: Frames source HTML Figure F2: Frames as displayed
Now, clearly there is a little magic going on here---nowhere in this document is there the "Frame 1", "Frame 2" and "Frame 3" text that shows up in the browser window! This is done by the frameset tags:
  <html>
  <head>
  <title>ft1</title>
  </head>
  <body bgcolor="#AA6666"
    text="#FFFFFF">
  <b>FRAME 1</b>
  </body>
  </html>
Figure F3: ft1.html
First, the <frameset rows="60%,40%"> defines thicker (60% of the window) and narrower (40% of the window) frames, the first above the second.
Then the <frame src="ft1.html"> loads the contents of the file "ft1.html" into the top frame---"ft1.html" is actually the file shown in figure F3 to the right.
Next, a pair of frames in columns are defined in the frame constituting the second row with the <frameset cols="40%,60%">
and the file "ft2.html" is loaded into the first column with the <frame src="ft2.html"...> tag,
and the file "f3.html" into the second column with <frame src="ft3.html"...>
With this in mind, let's look at the different tags we've used in more detail:

The frameset tag defines a document having frames. It replaces the body tag, and may be nested to define different column or row formats, as shown below. Opening and closing frameset tags should enclose a frame tag for every row or column defined.
Possible attributes of the frameset tag are:
rows="list of row data"
gives the sizes of the rows of frames. May be given as a list of numbers ("33,108,99"), specifying the pixel length of each frame in the row, or a list of percentages ("33%,67%") specifying the percentage of the window for each frame in the row. A star * following a number indicates that all remaining space in the window should be given to that frame (specifying "2*,*" will result in one frame twice as large as the second; specifying "33,* will result in a frame 33 pixels high and a second one using the remainder of the browser window).
cols="list of column data"
as the rows attribute, for the columns of frames.
border=number
sets the border for the frames in the frameset. The HTML 4.0 specification prefers the use of frameborder, below.

The frame tag defines the information to include in a frame. Possible attributes are:
src="URL"
gives the URL HTML document to insert in the frame. Required, unless blank frames appeal to you.

frameborder=number
if number=1, frame has borders; if 0, it doesn't
marginheight=number
sets the size of the top and bottom margins between frame and frame contents.
marginwidth=number
sets the size of the side margins between frame and frame contents.
name="name"
assigns a name to the frame, allowing anchors in other frames to load documents into that frame rather than the one in which the anchor appears (see below).
noresize
prevents the viewer from resizing the frames.
scrolling="value"
value can be yes, no or auto, to put in or prevent scroll bars for the frame.
The content of the a frame should be a standard HTML document, beginning and ending with an html tag and conforming to standard document construction rules formats. Note that some of the tags (e.g., the title tag) won't appear to affect the frame. (I have no documented source for the assertion of required completeness of the contents of the frame. It makes sense to me, and appears borne out by examples I expect to be good. Correct me if you have better information.)

The Target Attribute allows new documents to be loaded into existing frames.

Example: If a frame document is defined by

<frameset rows="33%,67%">
<frame href="source1.html">
<frameset cols="40%,60%">
<frame href="source2.html">
<frame href="source3.html" name="frame3">
</frameset>
</frameset>

and the HTML in the frame source file source2.html includes the anchor tag
<a href="source4.html" target="frame3">link to source4</a>
then when the link is selected, the source from the file source4.html will be loaded into the frame named frame3.
So: by using a "target" attribute in an anchor, we can specify the frame into which the linked material should be loaded. In particular, we can specify

target=framename, which loads the document into the frame named "framename"
target=newwindowname, which loads the document into a new window
target=_blank, which loads the document into a new window
target=_parent, which loads the document into the parent frameset (doing away with a set of frames)
target=_self, which loads the document into the same frame as that in which the link is located
target=_top, which loads the document into the whole browser window no matter how deeply nested the frames are

[advhtml] [colors] [reuse] [valid] [images] [objects] [imaps] [tables] [frames] [forms]

[title] [objectives] [www uses] [the works] [basic html]
[adv html] [editors] [resources] [feedback]

Last modified: Thu Jul 17 12:53:10 CDT 1997
HTML/WWW Wkshop: Adv HTML-Frames
©1997 Gavin LaRose
Comments to: glarose@NebrWesleyan.edu

`[title]`	`[objectives]`	`[www uses]`	`[the works]`	`[basic html]`
`[adv html]`	`[editors]`	`[resources]`		`[feedback]`