Guide to HTML
Creating Frames

about frames | <frameset> | <frame> | target | <noframes> | example

About Frames

Before reading this document, it is wise to read the sections Basic document structure and Enhanced document structure.

When you start creating Web page based on frames, create one main document containing all the frame definitions and references to documents that should be shown in the frames. Basically, the documents that have to show up in the frames are just regular HTML documents, with a few minor changes.

The structure of the main document looks like this:

<html>
<head>
  <title>Title of document</title>
</head>

<frameset>
  <frame>
  <frame>
  ...
  <frame>
   <noframes>
   Text to display for non frame capable browsers.
   </noframes>
</frameset>

</html>

The main document that contains the frame definitions has no body -- i.e. the frameset definition takes replaces what normally would be the body. Tags that would normally be placed in the body cannot be used prior to the <frameset> tag, or the whole frameset is likely to be ignored.

All other documents (i.e. the ones that are referred to from the main document) are allowed to contain <frameset> tags.

Top


Frameset

Syntax:

<frameset [cols="value"] [rows="value"]>
...
</frameset>

Note: value = "value"|"percentage"|"*"

With value You can specify the number of rows and columns the frame should consist of.

Options:

cols="value" : Specifying columns within a frameset

You can specify the number of columns by specifying the column width for each of the columns. The value is a list of values -- each of the column widths can be specified as an absolute number of pixels, a size relative to the screen (%), or can be specified as the remaining screen width (*).

rows="value" : Specifying rows within a frameset

You can specify the number of rows by specifying the row height for each of the rows. The value is a list of values -- each of the row heights can be specified as an absolute number of pixels, a size relative to the screen (%), or can be specified as the "remaining" screen height (*).

Example:

<frameset cols="10%,*,10%">

In this example, the screen will be divided into 3 columns: the left and right ones each take up 10% of the total available screen width, while the middle one takes up the rest of the available width.

Example:

<frameset cols="1*,250,3*">

This example creates three columns: the second has a fixed width of 250 pixels (useful, for example, to hold an image with a known size). The first receives 25% of the remaining space and the third 75% of the remaining space.

Example:

<frameset rows="30%,400,*,2*">

Suppose in this example the available screen height is 1000 pixels. The first row is allotted 30% of the total height (=300 pixels). The second row is specified to be exactly 400 pixels high. This leaves 300 pixels to be divided between the other two frames. The fourth frame's height is specified as "2*", so it is twice as high as the third frame. The third frame will be 100 pixels high and the fourth will be 200 pixels high.

Note:

Top


<frame>

Syntax:

<frame [src=URL] [name="name"] [marginwidth="value"] [marginheight="value"] [scrolling="yes|no|auto"] [frameborder="1|0"] [noresize]>

This tag consists of just one part (there is no "closing" tag) and specifies what the contents of that particular frame will be.

Options:

src="URL" : Document to show

Here you can specify the URL of the document to be displayed in the frame. If this modifier is not used, the frame will be left blank.

name="target" : Frame target name

This is the name of the window. Purpose is to be able to target the frame from other documents.

marginwidth="value" : Left and right margins

The value is an absolute value, specifying the number of pixels for the left and right margins inside the current frame. Possible values range from 1 and on. If no margin width is specified, the browser will decide on an appropriate margin.

marginheight="value" : Upper and lower margins

The value is an absolute value, specifying the number of pixels for the upper and lower margins inside the current frame. Possible values range from 1 and on. If no margin height is specified, the browser will decide on an appropriate margin.

scrolling="yes|no|auto" : Scroll bars control

Determines whether scroll bars should be visible for the current frame or not. Depending on the screen size and size of the current frame, the browser will show scroll bars when necessary.
No : Scroll bars will never appear, even if necessary.
Yes : Scroll bars will always be visible, even if not necessary.
Auto : The browser will decide whether to show scroll bars or not, depending on the screen size and the frame size.

noresize : Frame resize control

Normally, a frame can be resized using the mouse. In most frame capable browsers you can use the mouse pointer to drag the frame border. However, you can prevent your frame from being resized by specifying this modifier.

frameborder="1|0" : Border switch

With 0 no borders will be drawn around the frames.

noresize

When present, this tells the browser that the frame window cannot be resizeable.

Example:

<frame src="contents.html" name="contents" scrolling="auto" noresize>

In this example, the frame "contents" is specified with auto scroll bars and without the resize option.

Top


Target

Syntax:

target="window"

When a user clicks on a link, the new document will usually be loaded in the same browser window. However, this will not do for frames, as you probably want to determine beforehand in which frame a document will be loaded. Also, you might want to open an external link in another window.

This can be done using targets. In the main document, i.e. the document containing the frame definitions, frames can be named. You can use those names to load a specific document into a specific frame.

Options:

There are different kinds of targets:

Target in anchor

Syntax:

<a href="URL" target="window">...</a>

The new document will be loaded in the frame with the name specified.

Target in form definition

Syntax:

<form action="URL" target="window">

The result of the form submission will not be displayed in the current window but will be displayed in the window specified. For more information, see Creating HTML forms.

Target in client side image map

Syntax:

<area shape="shape" coords="coordinates" href="URL" target="window">

This is just a regular area definition in a client side image map. However, the new document will be loaded in the frame sepcified. For more information, see Creating Client Side Image Maps.

Target frames always start with an alphanumeric character. There are several "magic" target names, that start with an underscore ("_").

target="_blank"

The target document will be loaded in a new browser window.

target="_self"

The target document will be loaded in the same window as the anchor. (This is the default behavior.)

target="_parent"

The target document will be loaded in the immediate frameset parent of the current document. If there is no parent frameset, this target name acts the same as _self.

target="_top"

This target "escapes" from the frameset, loading the target document in the full window of the browser.

Top


<noframes>...</noframes>

Syntax:

<noframes>Text</noframes>

Browsers that are not capable of rendering frames or browsers that have the frame capability disabled, will not be able to show any of the contents of a "master" document that contains frame specifications.

With the noframes tags you can specify a text that can be shown in such situations. You could also provide a link to a non-framed version.

This set of tags needs to be specified within the frameset, i.e. before the closing tags of the frameset.

<noframes>
  Your browser does not support frames. Please switch to the
  <a href="index_noframe.html">non-framed version</a>.
</noframes>

Top


Example

Theory is nice, to see it at work is even more helpfull. Take a look at a very basic example of a main document.

<html>
<head>
  <title>TCC - Frame Example</title>
</head>

<frameset cols="90,*">
  <frame src="index.html" name="contents" scrolling="auto" noresize>
  <frame src="main.html" name="main" noresize>
  <noframes>
    <h4>Notice</h4>
    Your browser does not support frames.<br>
    Please switch to the <a href="index_noframe.html">non-framed
    version</a> of this site.
  </noframes>
</frameset>

</html>

(Remember, there can be no body in this document.)

In this main document, two vertical frames are defined. The left frame (called contents) will display the contents of the file index.html and is 90 pixels wide. The right frame (called main) will display the contents of the file main.html and will take up the rest of the available screen width. Both frames cannot be resized because of the noresize modifier.

For browsers that do not support frames, reference to a non-frame version of the document is made.

The document index.html could look like this:

<html>
<head>
  <title>TCC - Frame Example</title>
</head>

<a href="first.html" target="main">Index</a><br>
<a href="second.html" target="main">First</a><br>
<a href="third.html" target="main">Second</a><br>
<hr>
<a href="bigwindow.html" target="_top">Exit</a>

</html>

The HTML documents first.html, second.html and third.html will be shown in the window named main. The document bigwindow.html will be shown filling the whole browser window.

To see a simple, basic example at work: HTML frame example (a new browser window will be opened.)



Paragraph separator