You are on page 1of 7

F.

4 CIT – HTML – Frame page 1

Introduction
In many cases, when the content of a document is too long to be viewed in one window, we need to
scroll the document. By doing so, other elements are scrolled as well, thus making some no longer
visible to the user. This may not be a desirable result of scrolling. For example, a navigation bar may go
off the screen and can no longer be immediately accessed.
By dividing the window into frames, different elements can be placed in different frame. When one
frame is scrolled, others remain static within their own regions.
At their simplest level, frames provide multiple separately scrollable areas within one user window.
When implementing frames, a separate web document that defines the frame layout as well as individual
documents which actually occupy the frames are requires.
A frameset is created like other HTML document, except that its content is limited to frame-related tags.
This is to say, <BODY> element is not found in a frameset and is replaced by <FRAMESET> element.

Frame Structure - <FRAMESET> Tag


The <FRAMESET> tag defines the layout of the frames in the document. It does so by specifying
whether the frames should be laid out in columns or rows and what each column’s width should be.
Usage:
<html>
<head>...</head>
<frameset cols | rows = “column_or_row_size(s)”>...</frameset>
</html
Attribute:
cols, rows: An array of the width/height of all columns/rows. The size of the array tells the
number of columns/rows.
The size can be assigned in pixels, percentage or “*”.

Frame Content - <FRAME> Tag


While <FRAMSET> tag is responsible for defining the layout of the entire page, the <FRAME> tag is
responsible for defining the properties of each frame, for example the visibility of frame border, the
name of the frame and the URL of the frame content.
Usage:
<frame name=”frame_name” src=”url_of_content”></frame>
Attributes:
name: (Required) It gives the frame a unique name that can be referenced by URLs, scripts, and so on
to control the frame’s contents.
src: (Required) It is used to specify the URL of the content that the frame should display.
frameborder: Whether the frame has a border or not. Frame borders can help users understand the layout of
the document and where the frame borders are so they better manipulate them. On the other
hand, without borders, the frame division are hard to distinguish, which leads to a seamless
F.4 CIT – HTML – Frame page 2

page design.
Possible values: 0 (no border, default) | 1 (shows border)
marginheight: Sets the top and bottom margins for the frame, which is the distance from the border.
marginwidth: Sets the left and right margins for the frame, which is the distance from the border.
scrolling: Specify whether the frame displays scroll bars to help scroll the content displayed in the frame.
Possible values: yes | no | auto
Note: “yes” behaves differently from “auto”. So what is their difference?
noresize: If noresize appears in a frame tag, user will not be allowed to resize the frame size.
Example:
<html>
<head></head>
<frameset cols=”50%, *, *”>
<frame name=”First” src=”page1.html”></frame>
<frame name=”Second” src=”page2.html”></frame>
<frame name=”Third” src=”page3.html”></frame>
</frameset>
</html>
The following diagram shows the frames of the above code which is saved as frameset.htm:

URL: page1.htm URL: page2.htm URL: page3.htm


Name: First Name: Second Name: Third

frameset.htm
marginwidth

50% of the page 25% 25%

marginheight

 Change “50%” to “100px”, and “*” to other values.


 Assign different values to the border attribute of the frames.
 Vary the margins of different frames.
 Set scrolling to “yes”, “no” and “auto”. Try to find their difference.
 Introduce noresize to different frames. See what the effect of this attribute is.
F.4 CIT – HTML – Frame page 3

Browser Compatibility
Since some of the very old browsers may not equip with support to frames, it is always a good practice
to include another non-framed version of your page by using <NOFRAMES> tag in the frameset page.
Enclosed by the <noframes> tag is the <body> element, which defines the visual content of the non-
framed version.

Usage:
<html>
<head>...</head>
<frameset>...</frameset>
<noframes>
<body>...</body>
</noframes>
</html>
Attributes:
Attributes in <frame> tag are applicable to <noframes> tag.

Nested Framesets
If you want to create both rows and columns at the same time using framesets, you need to nest one
frameset inside of another. This can be achieved in different ways: file level and tag level.
File Level:
Nested frame can be done by putting another frameset in a frame.
Example:
In frameset1.htm:
<frameset rows=”*, *”>
<frame name=”TopFrame” src=”top.htm”></frame>
<frame name=”BottomFrame” src=”frameset2.htm”></frame>
</frameset>
In frameset2.htm:
<frameset cols=”*, *”>
<frame name=”LeftFrame” src=”left.htm”></frame>
<frame name=”RightFrame” src=”right.htm”></frame>
</frameset>
By defining nested framesets in this way, inner framesets can be reused by other framesets or be
shown independently. Moreover, this will give a greater flexibility when targeting links (see the
next section).
F.4 CIT – HTML – Frame page 4

Tag Level:
In this method, framesets are defined within another frameset. That is to say, you can include
another <frameset> tag within a <frameset> element.
Example:
Fragment 1:
<frameset rows=”*, *”>
<frame name=”TopFrame” src=”top.htm”></frame>
<frameset cols=”*, *”>
<frame name=”LeftFrame” src=”left.htm”></frame>
<frame name=”RightFrame” src=”right.htm”></frame>
</frameset>
</frameset>
Compare the resulting layouts after modifying Fragment 1 to Fragment 2.
Fragment 2:
<frameset cols=”*, *”>
<frame name=”LeftFrame” src=”left.htm”></frame>
<frameset rows=”*, *”>
<frame name=”TopFrame” src=”.top.htm”></frame>
<frame name=””BottomFrame” src=”right.htm”></frame>
</frameset>
</frameset>

Targeting Links to Frame


We may want to change the content of one frame by performing some actions. For example, by clicking
an item on the navigation bar on the left frame, we hope the right frame to show the new page. In order
to perform such action, we need to use the target attribute of, for example, the <a> tag to specify
the target of the anchor.
As discussed in previous chapter, target attribute of the <a> tag takes several possible values:
frame_name, _blank, _self, _parent, _top.
Explanation:
frame_name: the target frame is specified by the name attribute of <frame>
tag.
_blank: the target is a new window.
_self: the target is the current frame.
_parent: the target is the parent frameset of the current frame.
_top: the target is the current window, without frame.
Example:
Outerframeset.htm:
_top
<frameset rows=”20%, *”>
F.4 CIT – HTML – Frame page 5

<frame name=”TopFrame” src=”top.htm”></frame>


<frame name=”BottomFrame” src=”InnerFrameset.htm”></frame>
</frameset>
InnerframeSet.htm:
_parent
<frameset cols=”20%, *”>
_self
<frame name=”LeftFrame” src=”left.htm”></frame>
<frame name=”RightFrame” src=”right.htm”></frame>
</frameset>
left.htm:
<html>
<head></head>
<body>
<a href=”main.htm” target=”TopFrame”>Top</a><br>
<a href=”main.htm” target=”_blank”>Blank</a><br>
<a href=”main.htm” target=”_self”>Self</a><br>
<a href=”main.htm” target=”_parent”>Parent</a><br>
<a href=”main.htm” target=”Top”>Topmost</a><br>
</body>
</html>
The resulting layout is shown below:

TopFrame

_top
OuterFrameset.htm
Top
Blank
Self
Parent
Topmost

LeftFrame RightFrame

_self
_parent
InnerFrameset.htm
F.4 CIT – HTML – Frame page 6

Inline Frame - <IFRAME> Tag


In some occasions, we may want to include smaller pieces of content to be incorporated in scrollable
containers within a larger document. Although it is possible to use regular framesets to create
individually scrollable regions, it is better to use the <IFRAME> to build an inline frame – a frame
enveloped by the document around it.
However, please keep in mind that inline frames are not fully supported by all user agents.

Inline Frame

Usage:
<iframe src=”url_of_content”></iframe>
Attributes:
All attributes in <frame> tag are also applicable to <iframe> tag.
height, width: the height and width expressed in pixels or percentage.
align: the alignment of the frame to surrounding text.
Possible values:left | right | top | middle | bottom
Example:
innerFrame.htm:
<html>
<head></head>
<body>
Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.
Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.
<iframe src=”main.htm” align=”left”></iframe>
Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.
Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.
</body>
</html>
F.4 CIT – HTML – Frame page 7

 Try to change the value of align, height and width attribute.