Scribd
Upload
38 views30 pages

HTML Frames

The document provides a tutorial on using frames in HTML. It describes the <FRAMESET> tag and its attributes like ROWS, COLS, FRAMEBORDER, and BORDERCOLOR that define the layout and styling of frames. It also covers nested framesets, target frames, and the <NOFRAMES> tag for non-frame browsers.

Uploaded by

AIM Technologies
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
38 views30 pages

HTML Frames

The document provides a tutorial on using frames in HTML. It describes the <FRAMESET> tag and its attributes like ROWS, COLS, FRAMEBORDER, and BORDERCOLOR that define the layout and styling of frames. It also covers nested framesets, target frames, and the <NOFRAMES> tag for non-frame browsers.

Uploaded by

AIM Technologies
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 30

Contents

Frames Tutorial
Nested Framesets
Frames Targeting Frames
Targeting the Whole Window
Yes, We Have NOFRAMES
Frames allow you to divide the page into several No Borders Between Frames
rectangular areas and to display a separate document in Don't Get Framed
each rectangle. Each of those rectangles is called a Do Get Framed
"frame". Frames are very popular because they are one Should You Use Frames?
of the few ways to keep part of the page stationary while
other parts change. Frames are also one of the most <FRAMESET ...>
controversial uses of HTML, because of the way the
<FRAME ...>
frames concept was designed, and because many web
<NOFRAMES>
framed web sites are poorly implemented.
<IFRAME ...> Inline Frame
We start off this section with a tutorial on creating
frames. We'll start with a simple set of frames, move into  Inset Boxes using IFRAME
more advanced frames pages, and then show some
special techniques for using frames

Frames Tutorial

Frames Tutorial

<FRAMESET ...>
Usage Recommendation
use it, but don't rely on it
 COLS: how many cols in the frameset  FRAMESPACING: space between the
 ROWS: how many rows in the frameset frames
 BORDER: space between frames
 FRAMEBORDER: if the frames should
have borders  BORDERCOLOR: color of frame
borders

<FRAMESET ...> defines the general layout of a web page that uses frames.
<FRAMESET ...> is used in conjunction with <FRAME ...> and <NOFRAMES>.

<FRAMESET ...> creates a "table of documents" in which each rectangle (called a "frame") in
the table holds a separate document. In its simplest use, <FRAMESET ...> states how many
columns and/or rows will be in the "table". You must use either the COLS or the ROWS
attributes or both. For example, this code creates a set of frames that is two columns
wide and two rows deep:

this code produces this


<HTML> this page
<HEAD>
<TITLE>A Basic Example of Frames</TITLE>
</HEAD>

<FRAMESET ROWS="75%, *" COLS="*, 40%">


<FRAME SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">
</FRAMESET>

</HTML>

<FRAMESET ...> itself only define how many rows and columns of frames there will be.
<FRAME ...> defines what files will actual go into those frames.

<FRAMESET ...> can be nested within another <FRAMESET ...> to create a "table within a
table". By doing this you can create frames that are not strict grids like in the example
above. This set of nested framesets creates the popular "title and sidebar" layout.

this code produces this


<HTML> this page
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>

<FRAMESET ROWS="15%,*">
<FRAME SRC="recipetitlebar.html" NAME=TITLE
SCROLLING=NO>

<FRAMESET COLS="20%,*">
<FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html" NAME=RECIPES>
</FRAMESET>
</FRAMESET>

</HTML>
The first <FRAMESET ...>
creates a "table" of two rows
and only one column
(because there is no COLS
attribute). The first row in the
frameset is filled in by the
first <FRAME ...>. The row
in the frameset is filled in not
by a frame but by another
<FRAMESET ...>. This
inner frameset has two
columns, which are filled in
by two <FRAMESET ...>'s.

Your Ad Here

Attributes for <FRAMESET ...>


COLS = integer
ROWS = integer

Usage Recommendation

use it

COLS and ROWS establish the quantity and sizes of the columns and rows in a frameset.
The value for each attribute is a comma separated list of sizes (in pixels or percents). For
example, you might use this code for a set of frames that has two rows and three
columns:

this code produces this


<FRAMESET ROWS="80%,20%" COLS="60%,20%,20%"> this page
<FRAME SRC="rowcol1a.html">
<FRAME SRC="rowcol1b.html">
<FRAME SRC="rowcol1c.html">
<FRAME SRC="rowcol1d.html">
<FRAME SRC="rowcol1e.html">
<FRAME SRC="rowcol1f.html">

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>
The ROWS attribute says that the first row should be 80% of the height of the window and the
second row should be 20%. The COLS attribute says that the first column should be 60% of the
width of the window, the second column 20%, and the third another 20%.

If you leave out either ROWS or COLS, that indicates that there should be just one column or
one row:

this code produces this


<FRAMESET ROWS="80%,20%"> this page

If you use an asterisk ("*") in place of a number, that says "use whatever is left over". If more than
one asterisk is used then the remaining space is divided evenly. In the next example, the ROWS
attribute says that the first row is 80% of the window height, the second is whatever is left. The
COLS attribute says to that the first column is 60% of the width of the window, the other
two columns split the rest evenly:

this code produces this


<FRAMESET ROWS="80%,*" COLS="60%,*,*"> this page

If you use only asterisks then everything is spaced evenly. The next example produces six
frames that are all the same width and all the same height (i.e., all the same size):

this code produces this


<FRAMESET ROWS="*,*" COLS="*,*,*"> this page

Attributes for <FRAMESET ...>


FRAMEBORDER = YES | 1 | NO | 0
FRAMESPACING = integer
BORDER = integer

The issue of what goes in between the frames is determined (somewhat confusingly) with
FRAMEBORDER, FRAMESPACING, and BORDER. There are two separate issues:

 Should there be a three-dimensional-looking border between the frames


 How much space should be between the frames.

To set the frames so there are no borders at all see "No Borders".
3-D Borders

FRAMEBORDER determines if there should be 3-D borders between the frames. YES, which is the
default, says there should be borders. 1 is the same as YES.

NO says there should not be 3-D borders. Unfortunately, the name "FRAMEBORDER" is
deceptive. With NO there are not cool 3-D borders, but there is still the default background color
(usually gray or white) between the frames:

For example:

this code produces this


<FRAMESET ROWS="20%,*" FRAMEBORDER=NO> this page

How Much Space Between Frames

To control how much space is between the frames (that is, how big are the borders) use
FRAMESPACING and BORDER. These are actually the same attribute; it's just that MSIE only
understands FRAMESPACING and Netscape only understands BORDER. Use both to be safe:

this code produces this


<FRAMESET ROWS="20%,*" FRAMESPACING=30 this page with some unusual
BORDER=30>
frame borders

No Borders

The most common use of FRAMEBORDER, FRAMESPACING, and BORDER is to create a page with
no space between the borders. To do this, set NO, FRAMESPACING, and BORDER:

this code produces this


<FRAMESET ROWS="20%,*" FRAMEBORDER=NO FRAMESPACING=0 this page
BORDER=0>

Attribute for <FRAMESET ...>


BORDERCOLOR = color expression

BORDERCOLOR sets the color of the borders in the frameset.

this code produces this


<FRAMESET ROWS="50%,*" BORDERCOLOR=RED> this page
<FRAME SRC="fsbctitle.html">
<FRAME SRC="fsbcmain.html">

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

There is no defined behaviour if you use BORDERCOLOR in both <FRAMESET ...> and
<FRAME ...>. Different versions of MSIE resolve the situation differently. Netscape is a more
consistent. In Netscape, <FRAMESET BORDERCOLOR="..."> sets the color for all borders, and
<FRAME BORDERCOLOR="..."> makes exceptions to that rule. For example, this code sets
the borders for all frames to yellow for the borders of the middle frame which are red:
this code produces this
<FRAMESET ROWS="*,*,50%,*,*" BORDERCOLOR=YELLOW> this page
<FRAME SRC="fsbcex1.html">
<FRAME SRC="fsbcex2.html">
<FRAME SRC="fsbcexmain.html" BORDERCOLOR=RED>
<FRAME SRC="fsbcex3.html">
<FRAME SRC="fsbcex4.html">

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

<FRAME ...>

Usage Recommendation
use it, but don't rely on it
 SRC: what file to put in the frame  FRAMEBORDER: should this frame have a
 NAME: the name of the frame border?

 SCROLLING: should the frame have a  BORDERCOLOR: color of the surrounding

scrollbar? border
 MARGINWIDTH: the internal left and right
 NORESIZE: don't let the user make margins for the frame
the frame bigger or smaller
 MARGINHEIGHT: the internal top and
bottom margins for the frame

<FRAME ...> sets a single frame in the framed page. <FRAME ...> always goes inside a
<FRAMESET ...> element. The SRC attribute, which is required, indicates the URL of the page
that goes in the frame. In most situations you should also use NAME to give the frame a name so
that links can target the frame.

For example, this code creates a frameset with two frames. The first <FRAME ...> loads the file
frame1_title.html into a frame named TITLE. The second <FRAME ...> loads the file
frame1_body.html into a frame named MAIN.

this code produces this


<FRAMESET ROWS="20%,*"> this page
<FRAME SRC="frame1_title.html" NAME="TITLE">
<FRAME SRC="frame1_body.html" NAME="MAIN">

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

Attribute for <FRAME ...>


SRC = "URL"

SRC indicates the URL to put into the frame.

this code produces this


<HTML>
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>

<FRAMESET ROWS="15%,*">
<FRAME SRC="recipetitlebar.html" NAME=TITLE
SCROLLING=NO>

<FRAMESET COLS="20%,*">
<FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html" NAME=RECIPES>
</FRAMESET>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

</HTML>

Attribute for <FRAME ...>


NAME = "text string"

NAME is used in conjunction with <A TARGET="..."> to indicate which frame the link targets.
For example, a common use for frames is to have three frames on a web page, such as pictured
here (and here's the real thing):
The large frame in the lower right is named "RECIPES" using NAME:

<HTML>
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>

<FRAMESET ROWS="15%,*">
<FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO>

<FRAMESET COLS="20%,*">
<FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html" NAME=RECIPES>
</FRAMESET>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

</HTML>

The <A ...> tag which links to "Greek Salad" uses TARGET:

<A HREF="recipes.html#Greek Salad" TARGET=RECIPES>Greek Salad</A>


When the user clicks on the "Greek Salad" link, the results are put in the RECIPES frame

Attribute for <FRAME ...>


SCROLLING = YES | NO | AUTO

Usage Recommendation
use it, but watch for overformatting

SCROLLING says if there should be a scroll bar on the right and/or bottom of the frame. YES
says there absolutely will be scroll bars, even if they are not needed. NO says there will not be
scroll bars, even if they might be needed. AUTO is the default: there will be scroll bars on the
side and/or bottom as needed.

this code produces this


<FRAMESET ROWS="30%,30%,*"> this page
<FRAME SRC="scrollingYes.html" SCROLLING=YES>
<FRAME SRC="scrollingNo.html" SCROLLING=NO>
<FRAME SRC="scrollingAuto.html" SCROLLING=AUTO>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

It's best to avoid using SCROLLING. If you turn off scrolling, users with small screens may be
unable to see all of what you have in the frame, and that makes for an annoying page.

Attribute for <FRAME ...>


NORESIZE

NORESIZE says that the user cannot make the frame bigger or smaller by sliding the borders.
Normally the user can put the mouse over the border and move the border left/right or up/down.
NORESIZE disables that ability. All borders that run along the frame are effected. For example,
this code uses NORESIZE with the frame for the title bar, and so the border along the
bottom of the title bar title bar cannot be resized. However, the two frames at the bottom
of the page can still be resized by moving the border left and right.

this code produces this


<HTML> this page
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>

<FRAMESET ROWS="20%,*">
<FRAME SRC="recipetitlebar.html" NAME=TITLE NORESIZE>

<FRAMESET COLS="20%,*">
<FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html" NAME=RECIPES>
</FRAMESET>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

</HTML>

NORESIZE is the single most hated feature in frames. By disabling resizing, you are forbidding
the user from adjusting the screen more optimally. If your text or logo doesn't quite fit in the space
allowed, the user is left to wonder what they are missing, and this just makes your site look bad.
Avoid NORESIZE

ames >> <FRAME ...>

<FRAME NORESIZE> <FRAME BORDERCOLOR="..."

ute for <FRAME ...>


RDER = YES | 1 | NO | 0
g for Information on Borderless Frames?

wish to see No Borders Between Frames.

ute for <FRAME ...>


OLOR = color expression

RCOLOR sets the color of the borders around the frame.

this code produces this


SET ROWS="*,*,40%,*,*"> this page
FRAME SRC="bcRow1.html">
FRAME SRC="bcRow2.html">
FRAME SRC="bcRow3.html" BORDERCOLOR=RED>
FRAME SRC="bcRow4.html">
FRAME SRC="bcRow5.html">

MES>NOFRAMES stuff
AMES>

ESET>
rsions of MSIE have a bug concerning BORDERCOLOR and can't figure out which
hould be which colors. It's not a harmful bug, but often the colrs won't be arranged
ou expect.

Attributes for <FRAME ...>


MARGINWIDTH = size in pixels
MARGINHEIGHT = size in pixels

MARGINWIDTH and MARGINHEIGHT control the inside margins of the document in the
frame.

this code produces this


<FRAMESET ROWS="60%,*,*"> this page
<FRAME SRC="mwTop.html">
<FRAME SRC="mwMiddle.html" MARGINWIDTH=1>
<FRAME SRC="mwBottom.html" MARGINWIDTH=50>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

<FRAMESET COLS="33%,33%,*"> this page


<FRAME SRC="mhLeft.html">
<FRAME SRC="mhCenter.html" MARGINHEIGHT=1>
<FRAME SRC="mhRight.html" MARGINHEIGHT=50>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

The official specifications say that MARGINWIDTH and MARGINHEIGHT should be set to values
of greater than 1... 0 is not an acceptable value. Some browsers will honor margin settings of 0,
while others don't.

Both Netscape and MSIE display some odd behavior with these attributes: the default for
MARGINWIDTH (i.e. if you don't use it) is around 13 or 14 pixels. However, if you use
MARGINWIDTH, then the default for MARGINHEIGHT changes to 1. The reverse is also true.
Take a look at the pages in the examples above to see this strange behavior.

<NOFRAMES>
Usage Recommendation
use it if you use Frames

<NOFRAMES> holds text that should be displayed for people who don't have frames. A large
percentage of people on the web don't use browsers which can read frames. You can avoid
leaving out those people by using <NOFRAMES>.

<NOFRAMES> should be used in the same document as <FRAMESET ...>. <NOFRAMES>


should be inside the outermost <FRAMESET ...> element.

this code produces this


<HTML> this page
<HEAD> Of course, if your browser can do frames,
<TITLE>NOFRAMES example</TITLE> you won't see the content of the
</HEAD> <NOFRAMES>, but it looks something like
this.
<FRAMESET ROWS="15%,*">
<FRAME SRC="recipetitlebar.html"
NAME=TITLE>

<FRAMESET COLS="20%,*">
<FRAME
SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html"
NAME=RECIPES>
</FRAMESET>

<NOFRAMES>
<H1>Great Recipes</H1>
No frames? No Problem! Take a look at
our
<A HREF="noframesrecipes.html">no-
frames</A>
version.
</NOFRAMES>

</FRAMESET>

</HTML>

The proposed specifications for HTML 4.0 state that <NOFRAMES> can also go in the
<BODY ...> element of a regular page. This allows you to add some content that was originally
intended for another frame. Unfortunately, most of the browsers don't recognize this construct, so
the content of <NOFRAMES> will be visible to the users.

this code produces this


<HTML> this set of frames
<HEAD>
<TITLE>Example of NOFRAMES in the BODY</TITLE>
</HEAD>

<BODY>
<NOFRAMES>
<H1>My Home Page</H1>
</NOFRAMES>

regular BODY contents

</BODY>
</HTML>

<IFRAME ...>

Usage Recommendation
Use it, but be particularly careful to include options for the many people whose
browsers don't do inline frames.
 Inset Boxes using IFRAME
 SRC: URL of the document to go in the  MARGINWIDTH: internal left/right
frame margin for the frame
 HEIGHT: height of the inline frame  MARGINHEIGHT: internal top/bottom
 WIDTH: width of the inline frame margin for the frame

 NAME: name of this inline frame  SCROLLING: if the frame should have

 LONGDESC: URL of a long description of scroll bars

the contents of the frame  ALIGN: alignment of the frame object


to text around it
 FRAMEBORDER: if the frame should have a  VSPACE: space above and below the
border around it frame

 HSPACE: space to the left and right of


the frame

<IFRAME ...> is an HTML 4.0 addition to the frames toolbox. Currently only MSIE supports
<IFRAME ...>.

Unlike frames created using <FRAMESET ...> and <FRAME ...>, <IFRAME ...> creates a
frame that sits in the middle of a regular non-framed web page. <IFRAME ...> works like <IMG
...>, only instead of putting a picture on the page, it puts another web page.

For example, within the same directory as this page there is a file called "hello.html". This code
puts hello.html into an inline frame:
<IFRAME SRC="hello.html" WIDTH=450 HEIGHT=100>
If you can see this, your browser doesn't
understand IFRAME. However, we'll still
<A HREF="hello.html">link</A>
you to the file.
</IFRAME>

which gives us this inline frame:

If you can see this, your browser doesn't understand IFRAME. However, we'll still link you to the
file.

Here's what the code means:

IFRAME
The name of the <IFRAME ...> tag
SRC="hello.html"
The URL of the document to show in the inline frame.
WIDTH=450 HEIGHT=100
The dimensions of the inline frame.
If you can see this, your browser doesn't understand IFRAME. However,
we'll still <A HREF="hello.html">link</A> you to the file.
Code between <IFRAME ...> and </IFRAME> is not displayed by browsers that
understand <IFRAME ...>. Browsers that do not understand <IFRAME ...> will
display this code (because they don't know to ignore it).

You can do most of the things with <IFRAME ...> that you can do with regular frames, including
set the frame border, set internal margins, and set if there are scroll bars. You can use the
attribute so that you can set links to target the frame.

You can also control a few settings similar to the <IMG ...> tag, including ALIGN, HSPACE, and
VSPACE.

Inset Boxes using <IFRAME ...>

The most popular use of <IFRAME ...> is for creating "inset boxes", much like those found
in newspapers and magazines. Insets boxes are popular for small mini-articles tagentially
related to the main page. For example, this code puts an inline frame on the page, and
provides a link for non-IFRAME browsers:

<IFRAME
SRC="BeaverHabitat.html"
WIDTH=275 HEIGHT=200
ALIGN=RIGHT
>
<TABLE ALIGN=RIGHT BORDER=1 CELLPADDING=5>
<TR><TD>See the article on
<A HREF="BeaverHabitat.html">Stuff about the Beaver</A></TD></TR>
</TABLE>
</IFRAME>
which produces this inline frame (or table, or just a link):

Note that we use ALIGN to set the frame


aligned to the right side and to have text
See the article on Stuff about the Beaver
flow around it.

Attribute for <IFRAME ...>


SRC = "URL"

SRC indicates the URL of the document which should go in the frame.

this code produces this


<IFRAME SRC="hello.html" If you can see this, your browser doesn't
WIDTH=250 HEIGHT=100>
understand IFRAME. However, we'll still
If you can see this, your browser
doesn't link you to the file.
understand IFRAME. However,
we'll still
<A HREF="hello.html">link</A>
you to the file.
</IFRAME>

Attributes for <IFRAME ...>


WIDTH = "width expression"
HEIGHT = "height expression"

HEIGHT and WIDTH indicate the dimensions of the inline frame.

this code produces this


<IFRAME SRC="hello.html" If you can see this, your browser doesn't
WIDTH=250 HEIGHT=100>
understand IFRAME. However, we'll still
If you can see this, your browser
doesn't link you to the file.
understand IFRAME. However,
we'll still
<A HREF="hello.html">link</A>
you to the file.
</IFRAME>

We have not found any official reference that HEIGHT and WIDTH are required attributes. MSIE's
default values are HEIGHT and WIDTH.
Attribute for <IFRAME ...>
NAME

NAME indicates the name of the frame. This name can be used for targeting links much the
same way <FRAME NAME="..."> can be used to target links. For example, this can be
useful in the situation where you want to produce multiple "inset boxes":

<TABLE ALIGN=RIGHT BORDER=1 BGCOLOR="#FFFFCC">


<TR>
<TD><H4>Facts About Beavers</H4>

<UL>
<LI><A HREF="BeaverHabitat.html" TARGET="BeaverFacts">Habitats</A>
<LI><A HREF="BeaverEat.html" TARGET="BeaverFacts">Food</A>
<LI><A HREF="BabyBeavers.html" TARGET="BeaverFacts">Baby
Beavers</A>
</UL>

<IFRAME
SRC="BeaverHabitat.html"
NAME="BeaverFacts"
WIDTH=300 HEIGHT=200>
</IFRAME></TD>
</TR></TABLE>

produces:

Notice that in this example we don't include any content


Facts About Beavers
inside <IFRAME ...>. In this particular implementation that  Habitats
list of links is sufficient for browsers that don't understand
 Food
NAME. For browsers such as Netscape, each link will open in
a new window. Opening in new windows may be a
downside, or it may match nicely with your design.  Baby Beavers

Your Ad Here

Attribute for <IFRAME ...>


LONGDESC
Similar to <IMG LONGDESC="...">, W3C describes LONGDESC as "a link to a long
description of the frame". Like <IMG LONGDESC="...">, we don't know of any browsers that
actually support this attribute, but it would be a worthwhile thing to support.

Attribute for <IFRAME ...>


FRAMEBORDER = 1 | 0
FRAMEBORDER indicates if the inline frame should have a border around it. 1 (the default)
indicates it should, 0 indicates it should not.

this code produces this


<IFRAME Stuff about the
SRC="BeaverHabitat.html"
Beaver
WIDTH=150 HEIGHT=150
FRAMEBORDER=0
>
<A HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
</IFRAME>
<IFRAME Stuff about the
SRC="BeaverHabitat.html"
Beaver
WIDTH=150 HEIGHT=150
FRAMEBORDER=1
>
<A HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
</IFRAME>
<IFRAME Stuff about the (don't use
SRC="BeaverHabitat.html"
Beaver FRAMEBORDER at all)
WIDTH=150 HEIGHT=150>
<A HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
</IFRAME>

Attributes for <IFRAME ...>


MARGINWIDTH = integer
MARGINHEIGHT = integer
Usage Recommendation

don't use it

MARGINWIDTH and MARGINHEIGHT work much the same as their frame counterparts.
MARGINWIDTH and MARGINHEIGHT control the inner margins of the frame.

this code produces this


<IFRAME Stuff about the Beaver
SRC="BeaverHabitat.html"
WIDTH=250 HEIGHT=250
MARGINWIDTH=1
MARGINHEIGHT=1
>
<A HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
</IFRAME>
<IFRAME Stuff about the Beaver
SRC="BeaverHabitat.html"
WIDTH=250 HEIGHT=250
MARGINWIDTH=30
MARGINHEIGHT=30
>
<A HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
</IFRAME>
These are good attributes to avoid. It's much better to let the browsers display the frame margins
as they deem best.

Attribute for <IFRAME ...>


SCROLLING = YES | NO | AUTO

Usage Recommendation

don't use it

SCROLLING indicates if there should be scroll bars in the frame. YES forces the frame to have a
scroll bar, even if one isn't needed, NO forces the frame to not have a scroll bar, even if one isn't
needed. AUTO (the default) indicates that the browser should decide for itself.

this code produces this


<IFRAME A link to the
SRC="iframescrollyes.html"
page
WIDTH=250 HEIGHT=150
SCROLLING=YES
>
<A
HREF="iframescrollyes.html">A
link to the page</A>
</IFRAME>
<IFRAME A link to the
SRC="iframescrollno.html"
page
WIDTH=250 HEIGHT=150
SCROLLING=NO
>
<A HREF="iframescrollno.html">A
link to the page</A>
</IFRAME>
<IFRAME A link to the
page
SRC="iframescrollauto.html"
WIDTH=250 HEIGHT=150
SCROLLING=AUTO
>
<A
HREF="iframescrollauto.html">A
link to the page</A>
</IFRAME>
<IFRAME A link to the (not using SCROLLING at all is
page the same as AUTO )
SRC="iframescrollauto.html"
WIDTH=250 HEIGHT=150
>
<A
HREF="iframescrollauto.html">A
link to the page</A>
</IFRAME>

As with so many issues in HTML, it's best to trust the browser. AUTO is the "trust the browser"
choice, and because it's the default just leave the whole attribute out.

Attribute for <IFRAME ...>


ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | CENTER | BOTTOM |
ABSBOTTOM | BASELINE

ALIGN offers the same bewildering array of alignment options as <IMG ALIGN="...">.
However, for <IFRAME ...> there are really only three useful options: LEFT, RIGHT, and of
course, not using ALIGN at all.

LEFT and RIGHT indicate that the frame should align to the left or right side of the page and that
text should flow around it. If no ALIGN attribute is used then the frame is inline with the text.

this code produces this


<IFRAME Stuff about the Beaver Yada yada yada.
SRC="BeaverHabitat.html"
Yada yada yada. Yada yada yada. Yada
WIDTH=150 HEIGHT=150
ALIGN=RIGHT yada yada. Yada yada yada. Yada yada
> yada. Yada yada yada. Yada yada yada.
<A
HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
</IFRAME>
<IFRAME Stuff about the Beaver Yada yada yada.
SRC="BeaverHabitat.html"
Yada yada yada. Yada yada yada. Yada
WIDTH=150 HEIGHT=150
ALIGN=LEFT yada yada. Yada yada yada. Yada yada
> yada. Yada yada yada. Yada yada yada.
<A
HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
</IFRAME>
<IFRAME Stuff about the Beaver This example does
SRC="BeaverHabitat.html" not use ALIGN at all, so the inline frame is,
WIDTH=150 HEIGHT=150
>
well, in line. Yada yada yada. Yada yada
<A yada. Yada yada yada. Yada yada yada.
HREF="BeaverHabitat.html">Stuff Yada yada yada. Yada yada yada. Yada
about the Beaver</A> yada yada. Yada yada yada.
</IFRAME>

Attributes for <IFRAME ...>


VSPACE
HSPACE

VSPACE sets the vertical distance between the text and the inline frame. HSPACE sets the
horizontal space between the text and the frame. These attributes are most commonly used in
conjunction with ALIGN to set the distance of wrapped text from the frame.

this code produces this


<IFRAME Stuff about the Beaver Lorem ipsum dolor
SRC="BeaverHabitat.html"
sit amet, consectetuer adipiscing elit, sed
WIDTH=150 HEIGHT=150
ALIGN=LEFT diem nonummy nibh euismod tincidunt ut
HSPACE=5 VSPACE=5 lacreet dolore magna aliguam erat volutpat.
> Ut wisis enim audra minim veniam, quis
<A nostrud exerci tution ullamcorper suscipit
HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
lobortis nisl ut aliquip ex ea commodo
</IFRAME> consequat. Duis te feugifacilisi. Duis te
feugifacilisi. Duis autem dolor in hendrerit in
vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et usto odio dignissim qui
blandit praesent luptatum zzril delenit au
gue duis dolore te feugat nulla facilisi.
<IFRAME Stuff about the Beaver Lorem ipsum dolor
SRC="BeaverHabitat.html"
sit amet, consectetuer adipiscing elit, sed
WIDTH=150 HEIGHT=150
ALIGN=LEFT diem nonummy nibh euismod tincidunt ut
HSPACE=30 VSPACE=30 lacreet dolore magna aliguam erat volutpat.
> Ut wisis enim audra minim veniam, quis
<A nostrud exerci tution ullamcorper suscipit
HREF="BeaverHabitat.html">Stuff
about the Beaver</A>
lobortis nisl ut aliquip ex ea commodo
</IFRAME> consequat. Duis te feugifacilisi. Duis te
feugifacilisi. Duis autem dolor in hendrerit in
vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et usto odio dignissim qui
blandit praesent luptatum zzril delenit au
gue duis dolore te feugat nulla facilisi.
<IFRAME Stuff about the Beaver This inline frame
SRC="BeaverHabitat.html"
doesn't use VSPACE or HSPACE. Lorem ipsum
WIDTH=150 HEIGHT=150
ALIGN=LEFT dolor sit amet, consectetuer adipiscing elit,
> sed diem nonummy nibh euismod tincidunt
<A ut lacreet dolore magna aliguam erat
HREF="BeaverHabitat.html">Stuff volutpat. Ut wisis enim audra minim veniam,
about the Beaver</A>
</IFRAME> quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis te feugifacilisi.
Duis te feugifacilisi. Duis autem dolor in
hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et usto
odio dignissim qui blandit praesent luptatum
zzril delenit au gue duis dolore te feugat
nulla facilisi.

Frames Tutorial

Let's look at a basic example of how frames work:

The frameset file is the file you point your browser to.
The frameset file uses <FRAMESET ...> and
<FRAME ...> to tell the browser to go get more files to
put on the page.
The browser goes out again and retrieves the files
which will appear on the page.

The browser puts all the files on one page in separate


rectangles ("frames"). The user never sees anything
from the original frameset file.

Think of frames as creating a "table of documents" on the page. Like a table, a group of frames
has rows and columns. Each cell of the table contains a document which is stored in a separate
file. <FRAMESET ...> defines the beginning and end of the table, and how many rows and
columns that table will have. <FRAME ...> defines what will go into each cell ("frame") of the
table.

Let's look in more detail at the example above. The entire contents of basicframeset.html (the
frameset file) look like this:

This code ... creates this page (here's the real thing)
<HTML>
<HEAD>
<TITLE>A Basic Example of
Frames</TITLE>
</HEAD>

<FRAMESET ROWS="75%, *"


COLS="*, 40%">
<FRAME SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">

<NOFRAMES>
<H1>No Frames? No Problem!
</H1>
Take a look at our
<A
HREF="basic.noframes.html">no
-frames</A>
version.
</NOFRAMES>

</FRAMESET>

</HTML>

Here's a line-by-line explanation of each piece of code for the frames:

<FRAMESET
Start the "table of documents".
ROWS="75%, *"
The table should have two rows. The first row should take up 75% of the height of the
page, the second should take up the rest.
COLS="*, 40%">
The table should also have two columns. The second column should take up 40% of the
width of the page, the first column should take up the rest.
<FRAME SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">
Put the four files into the frames.
<NOFRAMES> ... </NOFRAMES>
Every framed page should have a no-frames alternative. The <NOFRAMES> content
should go inside the outermost <FRAMESET ...> tag, usually just before the last
</FRAMESET>. The most efficicent method for no-frames content is to link to a page
which is specifically designed for no-frames.
</FRAMESET>
End the frameset.

There are several other aspects of frames to note from this example:
 <FRAMESET ...> is used instead of the <BODY ...> tag. The frameset file has no
content which appears on the page, so it has no need for <BODY ...>, which
designates the content of the page. In fact, if you use <BODY ...> (except inside
<NOFRAMES>), the frames will not appear. Tags in <HEAD>, including <TITLE>, still have
their intended effects.
 Rows and columns are described by a list of widths or heights. For example
COLS="25%, *, 40%" says that there will be three columns. The first column takes up
25% of the width of the page, the third column takes up 40% of the width of the page, and
the asterisk ("*") means "whatever is left over". See COLS and ROWS for more details.
 You do not explicitly designate the start and ending of each row. The browser keeps
adding frames until it reaches the number designated by COLS, then starts another row.

Nested Framesets
Let's move now to a more real world example, and a few more techniques for using frames. One
of the most popular uses for frames is the "title bar and side menu" method. We'll use as an
example a page of recipes, pictured at right. The title of the page, "Great Recipes" stays
stationary in a frame at top, a contents list is on the left, and the recipes themselves are in the
large box on the right. As you click on the name of a recipe in the contents list, that recipe
appears on the right. Go ahead and try out the real page. (We're sorry if these recipes make you
hungry. They did us. These recipes come from the wonderful vegetarian recipe site Veggies
Unite!.)

Remember that a frameset is like a "table of documents" with rows and columns. The recipes
page, however, has one column on top, but two on bottom. This is done by nesting framesets,
putting one frameset inside another.

Here's the code for the frameset file for the recipes page:

<HTML>
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>

<FRAMESET ROWS="15%,*">
<FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO>

<FRAMESET COLS="20%,*">
<FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html" NAME=RECIPES>
</FRAMESET>

<NOFRAMES>
<H1>Great Recipes</H1>
No frames? No Problem! Take a look at our
<A HREF="recipes.html">no-frames</A> version.
</NOFRAMES>

</FRAMESET>

</HTML>
The first
<FRAMESET ...> tag
says "this frameset will
have two rows" (and,
implicitly, only one column,
since COLS was left out).
The first <FRAME ...>
tag puts a document in the
first frame. The second
frame is filled in not by a
document but by another
frameset. The second
<FRAMESET ...> is frameset within frameset
creating a "table within a
table", or, to be more correct, a frameset within a frameset.
Targeting Frames
Each frame is given a name using <FRAME NAME="...">. These names uniquely identify each
frame. Using these names, links in other frames can tell the browser which frame the link targets.

For example, this code creates a framed page, naming the frames TITLE, SIDEBAR, and MAIN:

<FRAMESET ROWS="15%,*">
<FRAME SRC="tfetitle.html" NAME=TITLE SCROLLING=NO MARGINHEIGHT=1>

<FRAMESET COLS="20%,*">
<FRAME SRC="tfesidebar.html" NAME=SIDEBAR>
<FRAME SRC="tfemain.html" NAME=MAIN>
</FRAMESET>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

To target one of these frames, the link should have a TARGET attribute set to the name of the
frame where the linked page should appear. So, for example, this code creates a link to
tfetacos.html and targets that link to the MAIN frame:

this code produces this


<A HREF="tfetacos.html" TARGET=MAIN>my link</A> the link in this page

Targeting the Whole Window


Eventually in a framed site you want to "break out"... link to a page and have that page take over
the entire window. To create this sort of link, we add TARGET="_top" to the <A ...> tag:

this code produces this


<A HREF="wwtarget.html" TARGET="_top"> the link in this page
In the previous example we
used TARGET to refer to a
frame we had named MAIN. In
this example, however, we
refer to a frame we never
named: "_top". We can do this
because the outermost frame
(that is, the entire window) is
already named "_top". "_top" is
a reserved name which is
automatically given to the
entire window. So when we say
TARGET="_top", we are
saying "put the new web page
in the entire window". Note that
"_top" needs to be in all lower- No matter what the other frames are named,
case, it should have quotes
around it, and don't forget the
the entire window is always named "_top"
underscore ("_").

Yes, We Have NOFRAMES


As mentioned earlier, frames don't degrade well. Browsers that don't know frames (for example,
Mosaic or Lynx) see none of what was intended to be on the page. That's where <NOFRAMES>
comes in. Browsers that know frames will ignore everything between <NOFRAMES> and
</NOFRAMES>. Browsers that don't understand frames will also not understand (and therefore
ignore) <NOFRAMES>, and display the content. So in our example, someone with a
browser that doesn't recognize frames will see this:

Great Recipes
Don't have frames? Take a look at our no-frames
version.

It's best to provide no-frames alternatives. There are substantial numbers of people surfing the
net who can't see frames. Rude <NOFRAMES> content like "It's time to get a real browser" only
serve to make you look like someone who can't create a complete web site.
No Borders Between Frames
By default frames have visible borders between them. Sometimes, however, you want the frames
to join directly to each other with no border between them. MSIE and Netscape recognize
different attributes in <FRAMESET ...> for this purpose, but they are mutually compatible, so
you can use all of them at once.

To create a borderless frameset, use a <FRAMESET ...> tag with FRAMEBORDER,


FRAMESPACING, and BORDER attributes like this:

this code produces this


<FRAMESET ROWS="20%,*" FRAMEBORDER=NO FRAMESPACING=0 this page
BORDER=0>

You might also like