Data Koncepts

HTML Frames

Data Koncepts

HTML Frames

This page will provide an overview of HTML frames
with a few helpful notes, a practical example and a way to prevent
the theft of your page (escape from a frameset on another site).

Frames have a mixed history. While they are tremendously useful from the standpoint of providing a static navigation scheme, headers and footers, they are not handled well by search engines so are to be avoided whenever possible.

Frames documents are generated by three things:

FRAMESET element pairs,
FRAME elements, and
Other Frame Documents.

FRAME DOCUMENT

A Frame document has a basic structure very much like your normal HTML document, except the <BODY> ... </BODY> element pair is replaced by a <FRAMESET> ... </FRAMESET> element pair which describes the sub-HTML documents, or frames, that will make up the page.

    <HTML>
    <HEAD>
        ...
    </HEAD>
    <FRAMESET>
        ...
    </FRAMESET>
    </HTML>

FRAME SYNTAX

Frame syntax is similar in scope and complexity to that used by tables.

<FRAMESET> ... </FRAMESET>

This is the main container for a Frame.

<FRAMESET> Attributes

<FRAMESET attributes> ... <FRAMESET> is the format where there are only two possible attributes: ROWS and COLS.

ROWS="row_height_value_list"

The ROWS attribute is assigned a comma separated list of values. These values can be absolute, percentage, or relative scaling values. Since the total height of all the rows must equal the height of the window, row heights might be normalized. A missing ROWS attribute is interpreted as a single row arbitrarily sized to fit.

Syntax of the ROWS="row_height_value_list"

value

A simple numeric value represents a fixed size in pixels. This is the most dangerous type of value to use since the size of the viewer's window can and does vary substantially. If fixed pixel values are used, it will almost certainly be necessary to mix them with one or more of the relative size values described below. Otherwise the browser will likely override your specified pixel value to ensure that the total proportions of the frame fill the user's window.
If your frame contains an image, use the image's width to obtain a complete view — unless the browser normalizes your frames!

value%

This is a simple percentage value between 1 and 100. As a relative value, if the total height does not fill the user's window, these values will be normalized.

value*

The value on this field is optional. A single "*" character is a "relative-sized" frame and is interpreted as a request to give the frame all remaining space. If there are multiple relative-sized frames, any remaining space is divided evenly among them. If there is a value in front of the "*", that frame gets that much more relative space.
"2*,*" would give 2/3 of the space to the first frame, and 1/3 to the second.

Example for 3 rows, the first and the last being smaller than the center row:

<FRAMESET ROWS="20%,60%,20%">

Example for 3 rows, the first and the last being fixed height, with the remaining space assigned to the middle row:

<FRAMESET ROWS="100,*,100">

COLS="column_width_list"

The COLS attribute is also a comma separated list of the exact same syntax as described above for the ROWS attribute.

<FRAMESET> Elements

A frame document has no BODY element pair, and no elements that would normally be placed in the BODY can appear before the FRAMESET element, or the FRAMESET element will be ignored. The FRAMESET element is a matched pair, and within the FRAMESET element pair, you can only have other nested FRAMESET element pairs, FRAME elements, or the NOFRAMES element pair.

FRAMESET element pairs can be nested inside other FRAMESET element pairs. This would place the complete subframe in the space that would be used for the corresponding frame if this had been a FRAME element instead of a nested FRAMESET element pair.

<FRAME>

This element defines a single frame in a frameset. It has 6 possible attributes:

SRC="url": The SRC attribute is the URL of the document to be displayed in the frame. FRAMEs without SRC attributes are displayed as a blank space the size the frame would have been.

NAME="window_name"

The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents (usually from other frames in the same document). The NAME attribute is optional.

NAMEs must begin with an alphanumeric character, however, several reserved names have been defined, which start with an underscore. These are currently:

_blank: Always load this link into a new, unnamed window.
_self: Always load this link over the existing (calling) frame. This is the default as a hypertext link will ALWAYS be loaded into the same frame unless directed otherwise!
_parent: Always load this link over your parent (or self if you have no parent).
_top: Always load this link at the top level (or self if you are at the top).
All other names starting with "_" will be ignored.

MARGINWIDTH=value: The MARGINWIDTH attribute is used when the document author wants some control of the margins for this frame. If specified, the value for MARGINWIDTH is in pixels. The MARGINWIDTH attribute is optional — by default, all frames rely on the Web browser decide on an appropriate margin width.

MARGINHEIGHT=value: The MARGINHEIGHT attribute is just like MARGINWIDTH above, except it controls the upper an lower magins instead of the left and right margins.

SCROLLING=yes|no|auto

The SCROLLING attribute is used to describe if the frame should have a scrollbar or not.: Yes results in scrollbars always being visible on that frame.; No results in scrollbars never being visible.; Auto instructs the browser to decide whether scrollbars are needed, and place them where necessary.
The SCROLLING attribute is optional; the default value is auto.

NORESIZE: The NORESIZE attribute has no value. It is a flag that indicates that the frame is not resizable by the user. Users typically resize frames by draging a frame edge to a new position. If any frame adjacent to an edge is not resizable, that entire edge will be restricted from moving and will effect the resizability of other frames. The NORESIZE attribute is optional and, by default, all frames are resizable.

The FRAME element does not have a matching end element

<NOFRAMES> ... </NOFRAMES>

This element pair is for content providers who want to create alternative content that is viewable by non-Frame-capable browsers. A Frame-capable Internet client ignores everything contained in the NOFRAMES element pair.

Helpful Notes:

NEVER forget that some of your readers will be "frame challenged" so you must provide a means to navigate to all your pages within the FRAMESET page's NOFRAME section.
You NAME the frames so you can use the TARGET="{FrameName}" to display a page in a designated frame. I like to use a small left side frame to contain a Table of Contents ("toc") and use a "main" frame to display the results of Table of Contents selections. In this case, each hypertext link in the Table of Contents will contain the <a href= ... TARGET="main"> notation. (Okay, I used the <BASE TARGET="main"> instead but that is a shorthand notation for the same thing — and it can have disasterous consequences if you're not careful with targeting exceptions 8-().
Lastly, you can change MULTIPLE frames with the same link by changing the FRAMESET which generated those multiple frames. This requires multiple FRAMESET pages but will allow you to selectively expand your Table of Contents, for example, in response to a hypertext selection. PLEASE note that the multiple frames MUST be contained in a single FRAMESET element, thus they MUST define a rectangular area. Since this FRAMESET page can be called from any frame, I won't tell you that the predefined TARGET names will always work but TARGET="{NewFramesetName}" will!
I've built a demo set of pages to illustrate this and offer it as a download (DoubleLoad.zip (3.6 Kb)). The readme.txt file describes the frameset operations and calls to simultaneously load to the multiple frames.

EXAMPLES

This example compares FRAME syntax and TABLE syntax, and will show the HTML source used to display the layout below.

+----------------------------------------------------------+
|                            |                             |
|                            |                             |
|                            |                             |
|                            |                             |
|                            |---------------------+
|                            |                             |
|                            |                             |
|                            |                             |
|                            |                             |
+---------------------|                             |
|                            |                             |
|                            |                             |
|                            |                             |
|                            |                             |
|                            |---------------------+
|                            |                             |
|                            |                             |
|                            |                             |
|                            |                             |
+----------------------------------------------------------+

THE ABOVE LAYOUT USING TABLES

<CENTER>
<TABLE WIDTH="100%" HEIGHT="100%" BORDER=4>
    <TR><TD ROWSPAN=2>CELL1 </TD>
        <TD>CELL2</TD></TR>
    <TR><TD ROWSPAN=2>CELL3</TD></TR>
    <TR><TD ROWSPAN=2>CELL4</TD></TR>
    <TR><TD>CELL5</TD></TR>
    </TABLE>
</CENTER>

CELL1	CELL2
	CELL3
CELL4
	CELL5

THE ABOVE LAYOUT USING FRAMES

<FRAMESET COLS="50%,50%">
    <FRAMESET ROWS="50%,50%">
        <FRAME SRC="cell.html">
        <FRAME SRC="cell.html">
    </FRAMESET>
    <FRAMESET ROWS="33%,33%,33%">
        <FRAME SRC="cell.html">
        <FRAME SRC="cell.html">
        <FRAME SRC="cell.html">
        </FRAMESET>
    </FRAMESET>

View the frame.

THE ABOVE LAYOUT USING NOFRAMES INFO

<FRAMESET COLS="50%,50%">
    <FRAMESET ROWS="50%,50%">
        <FRAME SRC="cell.html">
        <FRAME SRC="cell.html">
    </FRAMESET>
    <FRAMESET ROWS="33%,33%,33%">
        <FRAME SRC="cell.html">
        <FRAME SRC="cell.html">
        <FRAME SRC="cell.html">
        </FRAMESET>
    </FRAMESET>

<NOFRAMES>
    <CENTER>
    <H1><BLINK>Frame ALERT!</BLINK></H1>
    <{ Oh, this is an example of the <B><I>very irritating</I> 
          BLINK</B>ing element! }
    <P>
    <P>
    This document is designed to be viewed using<BR>
    <B>Netscape 2.0+'s and IE 3.0+'s</B> Frame features.<P>
    <P>
    If you are seeing this message,<BR>
    you are using a <I>"frame challenged"</I> browser.<P>

    Download your copy of <A HREF=http://home.netscape.com/>
         Netscape</A> now!<P>
    <P>
    </CENTER>
    </NOFRAMES>

View the frame.

NOTE: If you are using Netscape 2.0+ or IE3+, you will NOT see the NOFRAME data. Conversely, if you are not, you will ONLY see the NOFRAME data.

Practical Example

With the e-mail I get requesting clarification of creation and naming issues, I've decided to create an example for you to use.

In our window, we'll create three frames: A "header" frame for our title, a fixed width table of contents ("toc") for site navigation and a contents "main" frame.

<HTML>
<HEAD>
	<TITLE< Practical Frame Example</TITLE>
</HEAD>
<FRAMESET COLS="70,*">
	<FRAME NAME="header" SRC="title_page.html">
	<FRAMESET ROWS="150,*">
		<FRAME NAME="toc" SRC="table_of_contents.html">
		<FRAME NAME="main" SRC="first_document.html">
	</FRAMESET>
</FRAMESET>

<NOFRAMES>

<!-- Make accommodation for your non-framed visitors here -->

</NOFRAMES>

</HTML>

The above code is all that is required for your default page. It established A framed page with ...

A "header" frame for your title
A "toc" frame to hold a directory for your site (this frame is narrow to provide ample room for your contents to be displayed in your "main" frame — try using a <font size=-1></font> to squeeze the directory information into the "toc" frame)
A "main" frame to hold your main content pages
AN
Names for your frames so they can be addressed from within any of your frames — normally, the "toc" links will be TARGETed to the "main" frame by a link like this: <a href="http://mercurybay.co.nz/index.html" target="main">Mercury Bay Online!</a> Note the target="main" that directs that this document be loaded into the "main" frame.
Lastly, don't forget the less fortunate souls out there that still haven't upgraded to a frame-capable browser. You can build your pages so that they are
- (a) ignored
- (b) scolded with an admonition to get a frame capable browser
- (c) accommodated by adding your table of contents information in the <NOFRAMES> tag and ensuring that your pages all have a link back to a directory OR
- (d) accommodated with a duplicate of your web site designed for non-frame browsers.
Personally, I prefer option (c).

I hope this update will simplify your life!

Escape Frames

If someone is displaying a particularly good page of yours on their site(using frames), you can "escape frames" by adding the following Javascriptcode to your page header(s):

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

On JavaScript-enabled browsers, this will pop your page to the TOP replacing the content thief's frameset with your page.

Go back to:

or go on to take a look at:

Publishing your Web page