With HTML frames one can display multiple HTML documents at once.
Each HTML document is displayed in a frame. A frame
is created using the frame element and usually occupies only a part of
the viewport. The frame elements are contained within a
frameset document. A frameset document specifies the
dimensions and layout of the frames. A frameset document uses a frameset
doctype:
- HTML 4.01 Frameset Document Type Definition
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">- XHTML 1.0 Frameset Document Type Definition
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Instead of the body element, a frameset document contains
the frameset element. This frameset element can contain the
frame element, the noframes element or even more
frameset elements.
The frameset Element
This element is the container for the frame elements of a frames document. In a framset document,
it takes the place of the body element.
Frameset elements can be nested within each other. Therefore, a frameset
can contain both frame elements and frameset elements.
Example 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A Frames Document</title>
</head>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="200px,*">
<frame src="nav.html">
<frame src="content.html">
</frameset>
</frameset>
</html>
Attrbutes
- Core Attributes
- The core attributes can be applied to this element.
colsThe value of this attribute is a comma-separated list of numbers, and/or percentages, and/or relative lengths.
This attribute specifies the number of columns and their widths.
- Number values
- Number values specify the widths of the columns in pixels.
Example:
<frameset cols="200,400,200">
- Percentage Values
- These specify the width of the columns as a percentage of the width of the viewport.
Example:
<frameset cols="20%,70%,10%">
- Relative Length Values
- An asterisk (*) specifies that the column should use all the available space.
- Example:
<frameset cols="100px,70%,*">
- Asterisks that are prefixed with numbers are used to specify ratios.
- Example:
<frameset cols="2*,7*,*">
- In the above example, the ratio of the widths of the three columns are 2:7:1.
- Relative length values are useful when used together with number values, because they allow one
to relatively divide the space remaining after allocating a fixed number of pixels.
- Example:
<frameset cols="200,5*,2*">
rows- This takes the same values as
cols, but specifies the height of rows.
- Example:
<frameset rows="200,400,200">
- The
rows and cols attributes can be used together to specify
both rows and columns in a frameset.
- Example:
<frameset cols="100,200" rows="50%,50%">
border- This is a nonstandard attribute. Its value is a number. This number is the pixel width of the frame
borders. A value of zero removes the frame borders.
bordercolor- This is a nonstandard attribute. The value of this attribute is a color name or a hexadecimal notation color value. Opera does not
support this attribute.
frameborderThis is a nonstandard attribute. However, this attribute is standard on the
frame element. Therefore, it is preferable not to use this attribute on the
frameset element.
The value of this attribute can be 1 or yes to display the borders,
or 0 or no to hide the borders. Opera does not support this attribute.
The frame Element
The frame element is used to specify the initial source file of a frame in a frameset.
This is an empty element. Apart from the initial file, the attributes of this element specify the presentation, behavior and
semantics of the frame.
Attrbutes
- Core Attributes
- The core attributes can be applied to this element.
- src
- The value of this attribute is a URL that specifies the initial file that will be
displayed in the frame.
The
src attribute can refer to any file, even to another frameset document.
- Example:
<frame src="../folder/file.html">
bordercolor- This is a nonstandard attribute. This attribute specifies the color of the frames borders.
The
bordercolor specified on the frame element overrides the
color specified by bordercolor on the parent frameset element.
frameborder- This is a nonstandard attribute. The value of this attribute can be
1 or yes to display the borders,
or 0 or no to hide the borders. Opera does not support this attribute.
The value of this attribute on the frame element
does not override the value specified on the frameset element.
longdesc- The value of this attribute is a URL to a document that has a description of the
content of the frame. This will help those who are browsing the frameset document
non-visually. However, visual browsers such as Firefox, Internet Explorer, etc. do not
provide any method to view the document specified in
longdesc.
- Example:
<frame src="fr.html" longdesc="frdesc.html">
marginheight- This specifies the top and bottom margin between the inside edge of a frame and its contents.
It is a number value, which specifies the margin in pixels. The value has to
be a positive number and greater than zero.
marginwidth- This specifies the left and right margin between the inside edge of a frame and its contents.
It is a number value, which specifies the margin in pixels. The value has to
be a positive number and greater than zero.
name- This attribute is used to name a frame. It allows links in one frame to load documents
into another using the
target attribute on a elements.
noresize- This attribute can have only one value, like this:
noresize="noresize".
When this attribute is present, it prevents the user from resizing the frame. Note that
in a three-column or three-row layout, setting noresize="noresize" on the middle
column or row prevents resizing of all the columns or rows.
scrolling- This attribute can take one of these values:
yes,no or auto.
With yes, scrollbars are always show whether they are needed or not. With no,
scrollbars are never shown. With auto, scrollbars are shown when needed, this is the default.
The noframes Element
This is a block element whose contents are displayed only in browsers that do not
support frames or have frames disabled. This element usually appears as the last child of frameset.
noframes is a flow element and can therefore contain
both block and inline elements.
In an XHTML frameset document, this element must contain the body
element. In an HTML frameset document, body is an optional child element.
Nesting Framesets
Frames can be nested in each other. There are two ways of doing this:
- Putting a frameset document in a frame
- A frameset document can be specified in the
src attribute of
the frame tag.
-
- The image above shows how a nested-frame webpage looks.
- There is one major disadvantage to this method:
The nested frameset is independent of the parent frameset.
Therefore, the nested frames cannot be targeted by links in the parent frameset frames.
- Nesting
frameset Elements
<frameset cols="18%,64%,18%">
<frame src="mefra1.html" name="navigation" noresize="noresize" />
<frameset rows="18%,64%,18%">
<frame src="header.html" />
<frame src="all_tags.html" name="content" scrolling="yes" />
<frame src="footer.html" />
</frameset>
<frame src="mefra3.html" name="copyright" title="copyright" />
</frameset>- There is no difference in the appearance of the nested frameset document using either of the two methods.
The difference is all frames - nested and otherwise - can be targeted by links anywhere in the document.
Therefore, this method is superior to the first method.
Problems with frames
- Bookmarking
- When browsing a frameset, the URL in the address bar never changes.
This is because new web pages load within the frames of the frameset.
Therefore, if you click a link in any of the frames of a website and then bookmark it,
you bookmark only the URL of the frameset (the URL displayed in the address bar).
You cannot return to the page you were looking at using the bookmark.
- Linking
- With plain HTML and CSS, it is not possible for a link to load
a frameset along with specific pages in its frames. A link can load a frameset,
which will always load its default pages into its frames.
Search engine users who arrive at a page on a website using frames will only see a single page
of a frame, not the frames page within its frameset.
- Latency
- Framesets are slow to load because many files have to be downloaded to fill up one screen.
Each HTML file requires an HTTP request to be sent, this makes framesets much slower than ordinary web pages.
