Frames
Element: <frameset> Start tag: required End tag: required Attributes: rows, cols. id, class, title, style, onload, more attribute info here
Element: <frame> Start tag: required End tag: forbidden Attributes: longdesc, name, src, frameborder, marginwidth, marginheight, noresize, scrolling. id, class, title, style, more attribute info here
Element: <noframes> Start tag: required End tag: required Attributes: [none]
Frames allow you to render multiple HTML documents within subwindows of the main
window. These subwindows can remain stationary to display a banner or offer a small
navigation bar that updates another subwindow meant for viewing different site
documents. The tags used to create a frames document are <frameset>,
<frame> and <noframes>.
Attributes of the
<frameset> tag are rows and cols.
rows is used for creating a horizontal area and cols is used
for creating a vertical area.
The value of both attributes
can be in either pixel or percentage format and each value must be separated by a comma.
cols="20%, 20%, 30%, 30%". Also, if you have set the value of one area you can let the
user agent decide what size the remaining area should be with an asterisks. rows="200, *".
Attributes of the <frame> tag are
longdesc, name, src, frameborder,
marginwidth, marginheight, noresize, and
scrolling. longdesc let's you supply a URL to a document with
more information on the frame. name let's you set the name of the frame and
is what you refer to in the target attribute of the a link. src
is where you put the URL of the frame. frameborder values are 1
(yes) and 0 (no). marginwidth can be set to a pixel value.
marginheight can be set to a pixel value. noresize prevents
the frame from being resized. scrolling values are auto,
yes, and no.
The <noframes> tag is used to contain a version of your page
that will be viewed by browsers that do not support frames. A noframes version
must be included in your frames document. It is not
meant to tell people to download a new browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>This Site - Welcome</title>
</head>
<frameset cols="40%, 30%, 30%">
<frameset rows="150, *"> <frame src="keyboards.html" name="keyboards"
longdesc="keyboardsinfo.html" frameborder="1" marginwidth="2" marginheight="2">
<frame src="monitors.html" name="monitors" longdesc="monitorsinfo.html" frameborder="1"
marginwidth="2" marginheight="2">
</frameset>
<frame src="cpus.html" name="cpus" longdesc="cpusinfo.html" frameborder="1"
marginwidth="2" marginheight="2">
<frame src="mice.html" name="mice" longdesc="miceinfo.html" frameborder="1"
marginwidth="2" marginheight="2">
<noframes>
<body>
<p>Content of the noframes version.
<ul>
<li>Some information
<li>More information
</ul>
</body>
</noframes>
</frameset>
</html>
---------------------------------- | | | | | | | | | keyboards | | | | | | | | | | | |-----------| | | | | cpus | mice | | | | | | | | | | | | | | monitors | | | | | | | | | | | ----------------------------------
Before you start building your 'house of frames' you should read the following pages. The first page lists some fundamental flaws in frames, and the other is just plain hysterical.
Borderless Frames
You've created your frame markup, you've created all your files, but there's those annoying borders and margins around your frames! Take a deep breath and use the following attributes in exactly the same format to get rid of 'em.
<frameset cols="100,*" border="0" spacing="0" FRAMEBORDER=0 FRAMESPACING=0>
<frame src="top.html" name="top" border="0" MARGINWIDTH="0" marginheight="0" spacing="0" FRAMEBORDER=0 FRAMESPACING=0>
<frame src="main.html" name="main" border="0" MARGINWIDTH="0" marginheight="0" spacing="0" FRAMEBORDER=0 FRAMESPACING=0>
</frameset>
The completly valid way.
<frameset cols="100,*">
<frame src="top.html" name="top" marginwidth="0" marginheight="0" frameborder="0">
<frame src="main.html" name="main" marginwidth="0" marginheight="0" frameborder="0">
</frameset>
Update Two Frames
You can update two frames with embedded framesets. Instead of creating all of your
framesets within the main frameset document you will create some of them and refer
to another document that contains information on the remaining frames. If you want the
following layout.
---------------------------------- | | | | | banner | | | | | n |----------------------| | a | | | v | | | b | | | a | | | r | | | | main | | | | | | | | | | ----------------------------------
You would create one frameset to start out with.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>This Site - Welcome</title>
</head>
<frameset cols="150, *">
<frame src="navbar.html" name="nav"
longdesc="navbarinfo.html">
<frame src="mainarea.html" name="mainarea"
longdesc="mainareainfo.html">
<noframes>
<body>
<p>Content of the noframes version.
<ul>
<li>Some information
<li>More information
</ul>
</body>
</noframes>
</frameset>
</html>
Then in the file mainarea.html you will have another
frameset that defines 'banner' and 'main'.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>mainarea</title>
</head>
<frameset rows="200, *">
<frame src="banner.html" name="banner"
longdesc="bannerinfo.html">
<frame src="main.html" name="main"
longdesc="maininfo.html">
<noframes>
<body>
<p>Content of the noframes version.
<ul>
<li>Some information
<li>More information
</ul>
</body>
</noframes>
</frameset>
</html>
When you want to update both frames at the same time you will target mainarea and
load another frameset identical to the one in mainarea.html but that contains
information on the new desired frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>anotherarea</title>
</head>
<frameset rows="200, *">
<frame src="banner2.html" name="banner2"
longdesc="banner2info.html">
<frame src="credits.html" name="credits"
longdesc="creditsinfo.html">
<noframes>
<body>
<p>Content of the noframes version.
<ul>
<li>Some information
<li>More information
</ul>
</body>
</noframes>
</frameset>
</html>
In Frame
Element: <iframe> Start tag: required End tag: required Attributes: longdesc, name, src, frameborder, marginwidth, marginheight, scrolling, height, width. id, class, title, style, align, more attribute info here
<iframe> allows you to insert another document within the current document. Any data within
the <iframe> tags will be displayed by user agents not supporing <iframe>.
Attributes are longdesc, name,
src, frameborder, marginwidth,
marginheight, scrolling, height, and width.
longdesc let's you supply a URL to a document with more information on the frame.
name let's you set the name of the frame and is what you refer to in the
target attribute of the a link. src is where you put the URL of
the frame. frameborder values are 1 (yes) and 0 (no).
marginwidth can be set to a pixel value. marginheight can be
set to a pixel value. scrolling values are auto, yes,
and no. height sets the height of the frame. width
sets the width of the frame.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>in frame</title>
</head>
<body>
<p>Content of the document.
<iframe src="file.html" width=300 height=150
scrolling=auto frameborder=2>
[Your browser is not iframe enabled. You can
find the document <a href="file.html">here</a>.]
</iframe>
</body>
</html>
