Frames

or scroll down the page.

Return to Main Page of Ted’s HTML Tutorial

Some web pages employ the use of a frame layout, which is a method of displaying multiple, often scrollable files (documents and/or graphic images) at once on the same page.  The file in each frame has its own URL (Uniform Resource Locator or web address).  Most graphical browsers will recognize frame commands and are able to display frames.

Frames easily can be misused, and care must be taken to make sure that the final product will be what the author has in mind.  Before placing any file inside of a frame, it should be determined that the contents of the file will fit neatly into the frame, without excessive scrolling being necessary by anyone observing the page.  As far as frames are concerned, improvement comes with practice.

The collection of frames in a browser window is referred to as a “frameset.”  The document which defines all the frames in a framset is called the “frameset document.”  A framset document is just like any other HTML source document except that the “body” tags (<BODY> & </BODY>) are replaced by “frameset” tags:

The syntax of framesets is similar to that of tables, in that both are composed of “rows” and/or “columns.”  A <FRAMESET> tag must contain within it one of two parameters as part of the command: Other parameters which optionally may be contained within a <FRAMESET> tag are: Since framesets may be nested within one another, a page can be created with both rows and columns on it, with each frameset defining either rows or columns.


Following a <FRAMESET> tag, emptyframe” tags are inserted:

A <FRAME> tag may contain within it parameters as part of the command:

Many browsers do not support a frames format.  Therefore, for these browsers, “no frames” tags should be included:


Here is an example of the HTML source code for a frameset (called “index.html” and titled “Anatomy, Physiology and Pathology of the Human Eye”), using some of the tags and parameters for frames and including a “noframes” alternate document (you will be able to view this entire frameset if you link to it via “Frames Example” at the bottom of the page):

<HTML>
<HEAD>
<TITLE>Anatomy, Physiology and Pathology of the Human Eye</TITLE>
</HEAD>

<FRAMESET ROWS="38,*" BORDERCOLOR="#00A8A0"> <FRAME SRC="title.html" MARGINHEIGHT="0" MARGINWIDTH="0" SCROLLING="NO">
<FRAMESET COLS="284,*">

<FRAMESET ROWS=219,*> <FRAME SRC="eyeantmy.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO">
<FRAME SRC="links.html" MARGINWIDTH="5" MARGINHEIGHT="0">
</FRAMESET>

<FRAME SRC="overview.html" NAME="structures"> </FRAMESET>

<NOFRAMES>
<BODY TEXT="#007078" LINK="#0080FF" ALINK="#00B8F0" VLINK="#00E0E0" BACKGROUND="graphics/sand.gif" BGCOLOR="#FFE8A8" BGPROPERTIES="fixed">

<CENTER><H1>Anatomy, Physiology & Pathology of the Human Eye</H1></CENTER>

<FONT SIZE="5"><P>Your browser does not display frames.&nbsp; Therefore, this information on eye anatomy, physiology and pathology will be presented in a standard browser format.&nbsp; Click on the hyperlinks below to learn more about the eye and how it works.&nbsp; (After reading each section, as well as taking the short quizzes at the end if you wish, click on the #&147;Back#&148; button of your browser, or press #&147;Alt <IMG SRC="graphics/ltarrow.gif">#&148; on your keyboard, to return this page.)</P></FONT>

<CENTER>
<TABLE CELLSPACING="5">
<CAPTION><FONT SIZE="6"><B>About the Eye</B></FONT></CAPTION>
<TR ALIGN="CENTER"> <TD ROWSPAN="15" VALIGN="TOP"><IMG SRC="graphics/eyeantmy-a.gif" WIDTH="289" HEIGHT="221" ALT="Anatomy of An Eye"></TD>
<TD><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="overview.html">Overview</A></B>}</FONT></TD>
<TD COLSPAN="2"><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="anatomy.html">Anatomy Of An Eye</A></B>}</FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="glasses.html">Eyeglasses</A></B>}</FONT></TD>
<TD COLSPAN="2"><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="acuity.html">Visual Acuity</A></B>}</FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD COLSPAN="3"><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="glossary/index.html">Glossary of Ocular Terms</A></B>}</FONT></TD> </TR>
<TR> <TD COLSPAN="3"><HR WIDTH="50%"></TD> </TR>
<TR ALIGN="CENTER"> <TD COLSPAN="3"><FONT FACE="ARIAL" SIZE="3"><B><A HREF="eom.html">Extraocular Muscles</A></B></FONT></TD> </TR>
<TR ALIGN="CENTER"> <TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="cornea.html">Cornea</A></B></FONT></TD>
<TD>&nbsp;</TD>
<TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="optcnrve.html">Optic Nerve</A></B></FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="lens.html">Crystalline Lens</A></B></FONT></TD>
<TD>&nbsp;</TD>
<TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="macula.html">Macula</A></B></FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="iris.html">Iris</A></B></FONT></TD>
<TD>&nbsp;</TD>
<TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="vitreous.html">Vitreous Humor</A></B></FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="cnjnctva.html">Conjunctiva</A></B></FONT></TD>
<TD>&nbsp;</TD>
<TD><FONT FACE="ARIAL" SIZE="3"><B><A HREF="retina.html">Retina</A></B></FONT></TD>
</TR>
<TR> <TD COLSPAN="3"><HR WIDTH="50%"></TD> </TR>
<TR> <TD><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="eyequiz1/eyequiz1.html" TARGET="_BLANK">Eye Quiz #1</A></B>}</FONT></TD>
<TD><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="eyequiz2/eyequiz2.html" TARGET="_BLANK">Eye Quiz #2</A></B>}</FONT></TD>
<TD><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="eyequiz3/eyequiz3.html" TARGET="_BLANK">Eye Quiz #3</A></B>}</FONT></TD>
</TR>
<TR> <TD COLSPAN="3"><HR WIDTH="50%"></TD> </TR>
<TR ALIGN="CENTER"> <TD COLSPAN="3"><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="colortst/colortst.html">Color Vision Testing</A></B>}</FONT></TD> </TR>
<TR ALIGN="CENTER"> <TD COLSPAN="3"><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="macula.html#amsler_grid">Amsler Grid Testing</A></B>}</FONT></TD> </TR>
<TR ALIGN="CENTER"> <TD COLSPAN="3"><FONT FACE="ARIAL" SIZE="3">{<B><A HREF="optcnrve.html#blind_spot">Blind Spot Testing</A></B>}</FONT></TD> </TR>
</TABLE>
</CENTER>

</FONT><FONT SIZE="4"><P ALIGN="CENTER"><B><I><FONT COLOR="#C58917">Return to </FONT><A HREF="../frames.html">Frames <IMG SRC="graphics/orangeL.gif" ALIGN="BOTTOM" BORDER="0" WIDTH="17" HEIGHT="15"></A></I></B></P>

<P ALIGN="CENTER"><B><I><FONT COLOR="#C58917">Return to Main Page of </FONT><A HREF="../index.html">Ted&#146;s HTML Tutorial <IMG SRC="graphics/orangeL.gif" ALIGN="BOTTOM" BORDER="0" WIDTH="17" HEIGHT="15"></A></I></B></P>

<P ALIGN="CENTER"><B><I><FONT COLOR="#C58917">Return to </FONT><A HREF="../../../MontyBooks/index.html">Ted&#146;s HOMEPAGE <IMG SRC="graphics/orangeL.gif" ALIGN="BOTTOM" BORDER="0" WIDTH="17" HEIGHT="15"></A></I></B></P>

</BODY>
</NOFRAMES>
</FRAMESET>

</HTML>
Note:  The “../” symbol tells a browser to back up one (1) directory.
This is what the HTML source code for “eyeantmy.html” looks like: <HTML>
<HEAD>
<BASE TARGET="structures">
</HEAD>

<BODY>

<IMG SRC="graphics/eyeantmy-a.gif" BORDER="0" WIDTH="284" HEIGHT="217" USEMAP="#eyemap">

<MAP NAME="eyemap"> <AREA SHAPE=POLY COORDS="3,4,80,4,83,8,83,17,70,20,70,30,24,30,19,28,16,25,16,18,
11,18,6,16,3,13" HREF="eom.html">
<AREA SHAPE=RECT COORDS="3,43,61,57" HREF="cornea.html">
<AREA SHAPE=POLY COORDS="3,84,64,84,67,88,67,95,60,100,60,110,17,110,12,108,9,105,
9,98,6,96,3,93" HREF="lens.html">
<AREA SHAPE=RECT COORDS="3,124,48,139" HREF="iris.html">
<AREA SHAPE=RECT COORDS="3,159,83,173" HREF="cnjnctva.html">
<AREA SHAPE=RECT COORDS="204,43,283,58" HREF="optcnrve.html">
<AREA SHAPE=RECT COORDS="224,95,283,110" HREF="macula.html">
<AREA SHAPE=RECT COORDS="221,125,284,140" HREF="vitreous.html">
<AREA SHAPE=RECT COORDS="227,159,283,173" HREF="retina.html">
<AREA SHAPE=RECT COORDS="26,191,254,217" HREF="anatomy.html">
<AREA SHAPE=CIRC COORDS="126,108,59" HREF="anatomy.html">
</MAP>

</BODY>
</HTML>
Note:  USEMAP is a type of image mapping where regions of an image are converted into hyperlinks.

Note:  Not all browsers which support mapping will recognize the "POLY" (polygon) or "CIRC" (circle) values.
This is what the HTML source code for “links.html” looks like: <HTML>
<HEAD>
<BASE TARGET="structures">
</HEAD>

<BODY TEXT=#504030 LINK=#904000 ALINK=#B06020 VLINK=#D08040 BACKGROUND=graphics/burlap.gif BGCOLOR=#FBE7B8>

<CENTER>
<TABLE BORDER=0 WIDTH=100%>
<TR ALIGN=center> <TD COLSPAN=2><FONT FACE=arial><B><SPAN STYLE="background-color: #FFD898"> Eye and Vision Information </SPAN></B></FONT></TD> </TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><B><A HREF=overview.html>Overview</A></B></FONT></TD>
<TD><FONT FACE=arial SIZE=2><NOBR><B><A HREF=anatomy.html>Anatomy of an Eye</A></B></NOBR></FONT></TD>
</TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><B><A HREF=glasses.html>Eyeglasses & Optics</A></B></FONT></TD>
<TD><FONT FACE=arial SIZE=2><B><A HREF=acuity.html>Visual Acuity</A></B></FONT></TD>
</TR>
<TR ALIGN=center> <TD COLSPAN=2><FONT FACE=arial SIZE=2><B><A HREF=glossary/index.html>Glossary of Ocular Terms</A></B></FONT></TD> </TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><B><A HREF=javascript:NewWindow2('surfing.html')>Surfing Tips</A></B></FONT></TD>
<TD><FONT FACE=arial SIZE=2><B><A HREF=examform.html TARGET=_blank>Eye Exam Form</A></B></FONT></TD>
</TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><B><A HREF=javascript:NewWindow2('eyeinformation.html')>My Advice</A></B></FONT></TD>
<TD><FONT FACE=arial SIZE=2><B><A HREF=javascript:NewWindow2('linkexchanges.html')>Link Exchanges</A></B></FONT></TD>
</TR>
<TR> <TD COLSPAN=2><HR WIDTH=35% COLOR=#A87848></TD>
</TR>
<TR ALIGN=center> <TD COLSPAN=2><FONT FACE=arial SIZE=2><B><A HREF=eom.html>Extraocular Muscles</A></B></FONT></TD> </TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><B><A HREF=cornea.html>Cornea</A></B></FONT></TD>
<TD><FONT FACE=arial SIZE=2><B><A HREF=optcnrve.html>Optic Nerve</A></B></FONT></TD>
</TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><NOBR><B><A HREF=lens.html>Crystalline Lens</A></B></NOBR></FONT></TD>
<TD><FONT FACE=arial SIZE=2><B><A HREF=macula.html>Macula</A></B></FONT></TD>
</TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><B><A HREF=iris.html>Iris</A></B></FONT></TD>
<TD><FONT FACE=arial SIZE=2><NOBR><B><A HREF=vitreous.html>Vitreous Humor</A></B></NOBR></FONT></TD>
</TR>
<TR ALIGN=center> <TD><FONT FACE=arial SIZE=2><B><A HREF=cnjnctva.html>Conjunctiva</A></B></FONT></TD>
<TD><FONT FACE=arial SIZE=2><B><A HREF=retina.html>Retina</A></B></FONT></TD>
</TR>
<TR ALIGN=center> <TD COLSPAN=2><FONT FACE=arial SIZE=2><B><A HREF=javascript:NewWindow('pupildefects.html')>Pupillary Defects and Conditions</A></B></FONT></TD> </TR>
</TABLE>

<HR WIDTH=50% SIZE=4 COLOR=#A87848>

<TABLE WIDTH=100%>
<TR ALIGN=center> <TD COLSPAN=5><NOBR><FONT FACE=arial><B><SPAN STYLE="background-color: #FFD898"> Ocular Photos, Graphics, Meds </SPAN></B></FONT></NOBR></TD> </TR>
<TR ALIGN=center> <TD COLSPAN=3><FONT FACE=arial SIZE=2><B><A HREF=eyephotos/index.html TARGET=_blank>Ocular Pathology Photos</A></B></FONT></TD> </TR>
<TR ALIGN=center> <TD COLSPAN=3><FONT FACE=arial SIZE=2><B><A HREF=eyephotos/index-grphc.html TARGET=_blank>Eye Condition Graphics</A></B></FONT></TD> </TR>
<TR ALIGN=center> <TD COLSPAN=3><B><FONT FACE=arial SIZE=2><A HREF="treatment/index.html" TARGET="_blank">Ocular Pathology Medications</A></FONT></B></TD> </TR>
</TABLE>

<HR WIDTH=50% SIZE=4 COLOR=#A87848>

<TABLE WIDTH=100%>
<TR ALIGN=center> <TD COLSPAN=5><FONT FACE=arial><B><SPAN STYLE="background-color: #FFD898"> Color and Field Tests </SPAN></B></FONT></TD> </TR>
<TR ALIGN=center> <TD><NOBR><FONT FACE=arial SIZE=2><B><A HREF=colortst/colortst.html>Color Vision</A></B></FONT></NOBR></TD>
<TD><B>|</B></TD>
<TD><NOBR><FONT FACE=arial SIZE=2><B><A HREF=macula.html#amsler_grid>Amsler Grid</A></B></FONT></NOBR></TD>
<TD><B>|</B></TD>
<TD><NOBR><FONT FACE=arial SIZE=2><B><A HREF=optcnrve.html#blind_spot>Blind Spot</A></B></FONT></NOBR></TD>
</TR>
<TR> <TD COLSPAN=5><HR WIDTH=35% COLOR=#A87848></TD> </TR>
<TR ALIGN=center> <TD COLSPAN=5><FONT FACE=arial><B><SPAN STYLE="background-color: #FFD898"> <A HREF=eyequiz/index.html TARGET=_blank>Eye Quizzes</A></B> </SPAN></FONT></TD> </TR>
<TR ALIGN=center> <TD><NOBR><FONT FACE=arial SIZE=2><B><A HREF=eyequiz1/eyequiz1.html TARGET=_blank>Eye Quiz #1</A></B></FONT></NOBR></TD>
<TD><B>|</B></TD>
<TD><NOBR><FONT FACE=arial SIZE=2><B><A HREF=eyequiz2/eyequiz2.html TARGET=_blank>Eye Quiz #2</A></B></FONT></NOBR></TD>
<TD><B>|</B></TD>
<TD><NOBR><FONT FACE=arial SIZE=2><B><A HREF=eyequiz3/eyequiz3.html TARGET=_blank>Eye Quiz #3</A></B></FONT></NOBR></TD>
</TR>
<TR> <TD COLSPAN=5><HR WIDTH=50% SIZE=4 COLOR=#A87848></TD> </TR>
<TR ALIGN=center> <TD COLSPAN=5><FONT FACE=arial><B><SPAN STYLE="background-color: #FFD898"> Other Links </SPAN></B></FONT></TD> </TR>
<TR ALIGN=center> <TD COLSPAN=5><FONT FACE=arial SIZE=2><B><A HREF=weblinks.html>Links to Eye and Health<BR>Information on the Web</A></B></FONT></TD> </TR>
<TR> <TD COLSPAN=5><HR WIDTH=75% SIZE=5 COLOR=#A87848></TD> </TR>
</TABLE>
</CENTER>

</FONT><CENTER><B><I><FONT COLOR=#C58917>Return to </FONT><A HREF=../index.html TARGET=_top>Ted’s HOMEPAGE <IMG SRC=graphics/orangeL.gif ALIGN=bottom BORDER=0 WIDTH=17 HEIGHT=15></A></I></B><BR>
<B><I><FONT COLOR=#C58917>Go to </FONT><A HREF=../remarks.html TARGET=_blank>Ted’s Remarks <IMG SRC=graphics/orangeR.gif ALIGN=bottom BORDER=0 WIDTH=17 HEIGHT=15></A></I></B><BR>
<B><I><FONT COLOR=#C58917>Return to </FONT><A HREF=../tutorial/frames.html TARGET=_top>Frames <IMG SRC=graphics/orangeL.gif ALIGN=bottom BORDER=0 WIDTH=17 HEIGHT=15></A></I></B><BR>
<B><I><FONT COLOR=#C58917>Return to the Main Page of</FONT><BR><A HREF=../tutorial/index.html TARGET=_top>Ted’s HTML Tutorial <IMG SRC=graphics/orangeL.gif ALIGN=bottom BORDER=0 WIDTH=17 HEIGHT=15></A></I></B><BR>
<B><I><FONT COLOR=#C58917>View </FONT><A HREF=../bblovrvw/mycommentaries.html TARGET=_top>Ted’s Bible Commentaries <IMG SRC=graphics/orangeR.gif ALIGN=bottom BORDER=0 WIDTH=17 HEIGHT=15></A></I></B><BR>
<B><I><FONT COLOR=#C58917>Go to </FONT><A HREF=../bblovrvw/Endtimes/ENP.html TARGET=_top>European<BR>Neighbourhood Policy <IMG SRC=graphics/orangeR.gif ALIGN=bottom BORDER=0 WIDTH=17 HEIGHT=15></A></I></B>
</CENTER>

</BODY>
</HTML>
To see how this frameset of frames is marked up on a browser, and to see how the “noframes” alternate document appears on a browser which does not display frames, click on the first two links below.

Proceed to Frames Example
“Anatomy, Physiology & Pathology of the Human Eye”

Proceed to Noframes Example

Return to Main Page of Ted’s HTML Tutorial

Copyright © 1998– by Ted M. Montgomery.  All rights reserved.