Web.Wizard HTML tutorial series

Tutorial 11

Frames

HTML frames allow you to divide the main browser window into several sections, each of which display a different Web page (i.e. you can have more than one Web page on screen at once!). For example your browser window could look like this...

frames.gif

Please study carefully the examples below. A Web page that contains frames is not structured in the same way as the Web pages you have studied and written before. For example, the Web page does not contain a body section, as shown below.

<HTML>
<HEAD>
	<TITLE>Simple frame example</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
	<FRAME SRC="contents.htm">
	<FRAME SRC="main.htm">
	<NOFRAMES>
	Unfortunately, your browser is not capable of displaying frames.
	Click <A HREF="main.htm">here</A> to view a frame-free alternative.
	<P>Thank you.
	</NOFRAMES>
</FRAMESET>
</HTML>

To create frames the tags <FRAMESET> ... </FRAMESET> are used. The <FRAMESET> tag takes the following attributes:
  • COLS=""
    Defines the number of columns. The following format is used.

    <FRAMESET COLS="10%,100,*">

    The above example defines three columns. The first column is 10% of the browser window, the second is 100 pixels across while the character, * represets "the remainder".

  • FRAMEBORDER=
    If the frame is to be displayed with a 3D border, the value 1 should be used (the default). If no border should be displayed, the value 0 is used.
  • FRAMESPACING=
    The value used represents the distance, in pixels, between the frames.
  • ROWS=""
    Defines the number of rows. The following format is used.

    <FRAMESET ROWS="50%,80,*">

    The above example defines three rows. The first row is 50% of the browser window, the second is 80 pixels down while the character, * represets "the remainder".

The <FRAME> tag takes the following key attributes:
  • FRAMEBORDER=
    If the frame is to be displayed with a 3D border, the value 1 should be used (the default). If no border should be displayed, the value 0 is used.
  • MARGINHEIGHT=
    The value used represents the distance, in pixels, between the top and bottom edges of a frame and its contents.
  • MARGINWIDTH=
    The value used represents the distance, in pixels, between the left and right edges of a frame and its contents.
  • NAME=""
    A name can be given to a frame. This can then be used in conjunction with the hypertext link tag to direct a link into a particular window. In the example below, the file INDEX.HTM will be displayed in the frame named frame 1.

    <A HREF="index.htm" TARGET="frame 1">...</A>
  • NORESIZE
    This prevents the resizing of the frame.
  • SRC=""
    Defines the Web page to be displayed within the frame.
Because some older browsers are unable to display HTML frames, it is polite to provide a frame-free alternative. This is achieved by creating a hypertext link within the tags, <NOFRAMES> ... </NOFRAMES> as shown below.

<NOFRAMES>
	Unfortunately, your browser is not capable of displaying frames.
	Click <A HREF="...">here</A> to view a frame-free alternative.
	<P>Thank you.
</NOFRAMES>

We have only scratched the surface of using frames. To get an idea of what is possible, I'd recommend studying the HTML source code of other Web pages that use frames that you come across while surfing the World Wide Web. Of course, if you want to HTML frame Web pages quickly and easily, then look no further than Frame.Wizard, apart of the Web.Wizard HTML suite :)


The following example can be seen by clicking here (your browser will need to support frames!).
<HTML>
<HEAD>
	<TITLE>Example frame Web page</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
	<FRAMESET ROWS="50%,50%">
		<FRAME FRAMEBORDER=0 SRC="tut_1.htm">
		<FRAME FRAMEBORDER=0 SRC="tut_2.htm">
	</FRAMESET>
	<FRAMESET ROWS="33%,33%,33%">
		<FRAME FRAMEBORDER=0 SRC="tut_3.htm">
		<FRAME FRAMEBORDER=0 SRC="tut_4.htm">
		<FRAME FRAMEBORDER=0 SRC="tut_5.htm">
	</FRAMESET>

	<NOFRAMES>
		Unfortunately, your browser is not capable of displaying frames.
		Click <A HREF="tut_1.htm">here</A> to view a frame-free alternative.
		<P>Thank you.
	</NOFRAMES>
</FRAMESET>
</HTML>

END OF TUTORIAL

Go back to Contents Back|Next


Please direct any comments to Matthew Bacon at: cadenza@cyberstrider.org
Copyright © Matthew Bacon - Last updated on: 10-07-99

This page was created using Web.Wizard v3.10 © 1997-1999 Cadenza Software