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...
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
|