0% found this document useful (0 votes)
85 views5 pages

HTML Frames Are Used To Divide Your Browser Window Into Multiple Sections Where Each Section Can Load A Separate HTML Document

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
85 views5 pages

HTML Frames Are Used To Divide Your Browser Window Into Multiple Sections Where Each Section Can Load A Separate HTML Document

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

HTML frames are used to divide your browser window into multiple sections where each

section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset.

Creating Frames
 To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines, how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and
 cols attribute defines vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.

Example
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">


<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>

<html>

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">


<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>
The <frameset> Tag Attributes
cols
Specifies how many columns are contained in the frameset and the size of each
column.
You can specify the width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols =
"100, 500, 100".
A percentage of the browser window. For example, to create three vertical
frames, use cols = "10%, 80%, 10%".
Using a wildcard symbol. For example, to create three vertical frames, use cols =
"10%, *, 10%". In this case wildcard takes remainder of the window.
rows
This attribute works just like the cols attribute and takes the same values, but it is
used to specify the rows in the frameset.
For example, to create two horizontal frames, use rows = "10%, 90%". You can
specify the height of each row in the same way as explained above for columns.
border
This attribute specifies the width of the border of each frame in pixels. For example,
border = "5". A value of zero means no border.
frameborder
This attribute specifies whether a three-dimensional border should be displayed
between frames.
This attribute takes value either 1 (yes) or 0 (no).
For example frameborder = "0" specifies no border.
framespacing
This attribute specifies the amount of space between frames in a frameset.
This can take any integer value.
For example framespacing = "10" means there should be 10 pixels spacing between
each frames.
src
This attribute is used to give the file name that should be loaded in the frame.
Its value can be any URL. For example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.
name
This attribute allows you to give a name to a frame.
It is used to indicate which frame a document should be loaded into.
This is especially important when you want to create links in one frame that load
pages into an another frame, in which case the second frame needs a name to
identify itself as the target of the link.

frameborder
This attribute specifies whether or not the borders of that frame are shown;
it overrides the value given in the frameborder attribute on the <frameset> tag if one
is given, and this can take values either 1 (yes) or 0 (no).
marginwidth
This attribute allows you to specify the width of the space between the left and
right of the frame's borders and the frame's content.
The value is given in pixels. For example marginwidth = "10".
marginheight
This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents.
The value is given in pixels. For example marginheight = "10".
noresize
By default, you can resize any frame by clicking and dragging on the borders of a
frame.
The noresize attribute prevents a user from being able to resize the frame. For
example noresize = "noresize".

scrolling
This attribute controls the appearance of the scrollbars that appear on the frame.
This takes values either "yes", "no" or "auto". For example scrolling = "no" means it
should not have scroll bars.

Frame's name and target attributes


One of the most popular uses of frames is to place navigation bars in one frame and then
load main pages into a separate frame.

<html>

<head>
<title>HTML Target Frames</title>
</head>

<frameset cols = "200, *">


<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>
Here, we have created two columns to fill with two frames. The first frame is 200
pixels wide and will contain the navigation menu bar implemented by menu.htm file.
The second column fills in remaining space and will contain the main part of the
page and it is implemented by main.htm file. For all the three links available in menu
bar, we have mentioned target frame as main_page, so whenever you click any of
the links in menu bar, available link will open in main page.
Following is the content of menu.htm file
<html>

<body bgcolor = "#4a7d49">


<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />

<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>


<br />
<br />

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>


</body>

</html>
Following is the content of main.htm file –

<html>

<body bgcolor = "#b5dcb3">


<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>
When we load test.htm file, it produces following result –

The targetattribute can also take one of the following values –

_self
Loads the page into the current frame.
_blank
Loads a page into a new browser window. Opening a new window.
_parent
Loads the page into the parent window, which in the case of a single frameset is the
main browser window.
_top
Loads the page into the browser window, replacing any current frames.
targetframe
Loads the page into a named targetframe.

HTML - Iframes
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not
somehow related to <frameset> tag, instead, it can appear anywhere in your
document. The <iframe> tag defines a rectangular region within the document in
which the browser can display a separate document, including scrollbars and
borders. An inline frame is used to embed another document within the current
HTML document.
The src attribute is used to specify the URL of the document that occupies the inline
frame.

Example
html>

<head>
<title>HTML Iframes</title>
</head>

<body>
<p>Document content goes here...</p>

<iframe src = "/html/menu.htm" width = "555" height = "200">


Sorry your browser does not support inline frames.
</iframe>

<p>Document content also go here...</p>


</body>

</html>

The <Iframe> Tag Attributes


Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc,
marginheight, marginwidth, name, scrolling, style, and title behave exactly like the
corresponding attributes for the <frame> tag.

You might also like