working with frames

Frames

A web page may be split into several individual frame windows. Each frame contains the result of accessing an URL.

The tags <FRAMESET> </FRAMESET> form a container, for URL's which will be displayed in individual windows in a single web browser page. The tags <FRAMESET> <FRAMESET> replace the normal body tags <BODY> </BODY>. The elements of the tag define the size and shape of these frame windows.

For example, the tag <FRAMESET COLS="30%,70%"> specifies that the frameset will contain two frames, tiled in columns, with the first frame occupying 30% of the browser window, and the second frame 70%.

View result Complete HTML markup required

To see the result of executing the HTML in the RHS table entry access the link in a new browser window.
<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > </FRAMESET> </HTML>

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry access the link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > </FRAMESET> </HTML>

It is usual to add the tags <NOFRAMES> </NOFRAMES> so that a browser that does not support frames will at least see something. As all unrecognised tags are ignored, the viewer will be presented with the remaining text. A browser that supports frames, will ignore this text. For example:

<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <NOFRAMES>Sorry does not support frames</NOFRAMES> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > </FRAMESET> </HTML>

try this

For example, the tag <FRAMESET ROWS="30%,30%,40%"> specifies that the frameset will contain three frames, tiled in rows, with the first frame occupying 30% of the browser window, the second frame also 30% and the final frame 40%.

View result Complete HTML markup required

To see the result of executing the HTML in the RHS table entry access the link in a new browser window.
<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET ROWS="30%,30%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </HTML>

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry access the link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET ROWS="30%,30%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </HTML>

For example, the tag <FRAMESET COLS="30%,30%,40%"> specifies that the frameset will contain three frames, tiled in cols, with the first frame occupying 30% of the browser window, the second frame also 30% and the last frame 40%.

View result Complete HTML markup required

To see the result of executing the HTML in the RHS table entry access the link in a new browser window.
<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="30%,30%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </HTML>

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry access the link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="30%,30%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </HTML>

Frame Parameters

The attributes to a <FRAME> are:

SRC=
The URL of the document to be displayed in the frame.
NAME=
The name of the frame. This is required so that a URL can be targeted into the frame window.
MARGINHEIGHT=
Specifies in pixels the margin width of the frame.
MARGIWIDTH=
Specifies in pixels the margin height of the frame.
SCROLLING=
NO - No scroll bars. YES - Scroll bars, AUTO - Let the browser choose. The default is AUTO.
NORESIZE
Prohibit the person browsing the document re-sizing the frame window.

The attributes to <FRAMESET COLS= > and <FRAMESET ROWS= >are:

"value%"
A relative size as a percentage.
For example: "10%,40%,50%" first frame 10% of total size, second frame 40% of total size, third frame 50% of total size.
"value*"
A relative size.
For example: "*3,*" would allocate 3/4 of the frame size to the first frame the rest to the second.
"value"
An absolute size in pixels.
For example: "50,*" would allocate 50 pixels to the first frame, the remaining space to the second frame.

Nesting frame windows

The <FRAMESET> tag may be nested to give more complex layouts. For example, for a layout of two columns, with the first column split into two rows, and the second column split into three rows the layout is as follows:

View result HTML frame markup required

To see the result of HTML on the RHS open a window with this link in a new browser window.
<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt1.html > </FRAMESET> <FRAMESET ROWS="40%,20%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </FRAMESET> </HTML>

View result	HTML frame markup required
To see the result of HTML on the RHS open a window with this link in a new browser window.	<HTML> <HEAD> <TITLE>Page with frames</TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt1.html > </FRAMESET> <FRAMESET ROWS="40%,20%,40%"> <FRAME SRC=fr-txt1.html > <FRAME SRC=fr-txt2.html > <FRAME SRC=fr-txt3.html > </FRAMESET> </FRAMESET> </HTML>

Targeting windows for output

A frame window can contain links which when accessed will cause their content to be displayed in another window. For example:

View result Complete HTML markup required

To see the result of executing the HTML in the RHS table entry the contents of fr-txt11.html and fr-txt22.html are as follows
<HTML> <HEAD> <TITLE>Page with targeting</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC=fr-txt11.html > <FRAME SRC=fr-txt22.html NAME="results"> </FRAMESET> </HTML>

View result	Complete HTML markup required
To see the result of executing the HTML in the RHS table entry the contents of fr-txt11.html and fr-txt22.html are as follows	<HTML> <HEAD> <TITLE>Page with targeting</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC=fr-txt11.html > <FRAME SRC=fr-txt22.html NAME="results"> </FRAMESET> </HTML>

The <FRAME> tag is named with NAME element. An <A HREF="URL"> tag may have the addition element TARGET to name the frame window into which the file described by the URL is to be loaded.

Partial contents of file
fr-txt11.html Partial contents of file
fr-txt22.html

<UL> <LI><A HREF="fr-txt21.html" TARGET="results"> Display A</A> <LI><A HREF="fr-txt22.html" TARGET="results"> Display B</A> <LI><A HREF="fr-txt23.html" TARGET="results"> Display C</A> </UL>

<H2>Display B</H2> B is the second letter of the alphabet.

Partial contents of file fr-txt11.html	Partial contents of file fr-txt22.html
<UL> <LI><A HREF="fr-txt21.html" TARGET="results"> Display A</A> <LI><A HREF="fr-txt22.html" TARGET="results"> Display B</A> <LI><A HREF="fr-txt23.html" TARGET="results"> Display C</A> </UL>	<H2>Display B</H2> B is the second letter of the alphabet.

Now try this

The tag <FRAMESET> may also be labeled with a name tag. In this way a URL may be targeted onto the whole window, and not just to a frame within a window.

Special targets for URL's. For example:

<A HREF="All_window" TARGET="_top">all of window </A>

will target the URL all_window to fill the browser window.

Other reserved targets include:

TARGET="_blank"
A new empty window. Neat way of spawning a new window from within HTML.
TARGET="_self"
The same window as the anchor.
TARGET="_parent"
The parent of the frame. A nice way of implementing back.
TARGET="_top"
Targets the whole of the browser window. A nice way of implementing an escape from a framed window.