Unit 1.2 HTML - Frames-1

Syllabus
Dr. Anupama Jha

HTML Frames
Unit-1
Dr. Anupama Jha

Objectives
 Create/control appearance & placement of frames

 Control the behavior of hyperlinks on pages with frames
 Create and implement floating frames
Dr. Anupama Jha

HTML Frames
 HTML Frames are used to divide the web browser window into multiple sections
where each section can be loaded separately.
 A frameset tag is the collection of frames in the browser window.
 Creating Frames:
Instead of using body tag, use frameset tag in HTML to use frames in web browser.
But this Tag is deprecated in HTML 5.
The frameset tag is used to define how to divide the browser.
Each frame is indicated by frame tag and it basically defines which HTML document
shall open into the frame.
To define the horizontal frames use row attribute of frame tag in HTML document and
to define the vertical frames use col attribute of frame tag in HTML document.
Dr. Anupama Jha

Advantages to Using Frames
 flexibility in design
 information in different Web pages
 remove redundancy.
 site easier to manage.
 update only a few files rather than the whole.
 Web designers create both framed and non-framed versions for a Web site
and give users the option of which one to use.
Dr. Anupama Jha

Disadvantages to Using Frames
 The browser has to load multiple HTML files

• increasing wait time
 Some older browsers cannot display frames.
 Some users do not like using frames.
 Some web authors feel that frames are too constricting.
 Frames can use up valuable screen space.
 The source code is hidden.
Dr. Anupama Jha
Creating a Frame Layout
 The <frameset> tag is used to store the definitions of the various frames
in the file. These definitions will typically:
 include the size and location of the frame
 include the Web pages the frames display
 The <frameset> code does not include an opening and closing <body>
tag.
 the reason for this is that this HTML file displays the contents of other Web pages; technically, it is not
a Web page
Dr. Anupama Jha

Specifying Frame Size and Orientation
 For frame layout

• use rows and cols attributes of <frameset>
 frameset is defined by rows or columns, but not both.
 Must choose to layout frames in either rows or columns.
Dr. Anupama Jha

The Frame Syntax
 The syntax for creating a row or column frame layout is:

<frameset rows=“rowheight 1, rowheight 2, rowheight
3, . . .”>
Where row height is the height of each row
or
<frameset cols=“columnwidth 1, columnwidth 2,
columnwidth 3, . . .”>
Where column width is the width of each column
Dr. Anupama Jha

Row and Column Sizes
 Row and column sizes can be specified in three ways:

 in pixels
 as a percentage of the total size of the frameset
 by an asterisk (*)
Dr. Anupama Jha

Attributes of Frameset tag:
 cols: The cols attribute is used to create vertical frames in web browser. This attribute
is basically used to define the no of columns and its size inside the frameset tag.
The size or width of the column is set in the frameset in the following ways:
•Use absolute value in pixel
Example:<frameset cols = "300, 400, 300">
•Use percentage value
Example:<frameset cols = "30%, 40%, 30%">
•Use wild card values:
Example:<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentage for creating vertical frame.
Dr. Anupama Jha

 rows: The rows attribute is used to create horizontal frames in web browser.
This attribute is used to define no of rows and its size inside the frameset tag.
The size of rows or height of each row use the following ways:
• Use absolute value in pixel

Example:<frameset rows = "300, 400, 300">
• Use percentage value
Example:<frameset rows = "30%, 40%, 30%">
• Use wild card values
Example:<frameset rows = "30%, *, 30%">
In the above example * will take the remaining percentage for creating horizontal
frame.
Dr. Anupama Jha

 border: This attribute of frameset tag defines the width of border of

each frames in pixels. Zero value is used for no border.
Example: <frameset border="4" frameset>
Dr. Anupama Jha

Defining Rows and Columns
Using (*)
 Tells the browser to allocate any unclaimed space in the frameset to the particular
row or column.
◦ <frameset rows=“160,*”>
creates two rows of frames.
 Specify at least 1 of the rows or cols of <frameset> with (*) to ensure that the
frames fill up the screen.
 You can use multiple asterisks.
 The browser divides the remaining display space equally among the frames with the
asterisks.
◦ <frameset rows=“*,*,*”>
creates three rows of frames with equal heights.
Dr. Anupama Jha
Nesting <frameset> Tag
 "Nesting" refers to embedding one object in another object of the same type.
 Remember that a frameset is defined by rows or columns, but not both.
 To create frames using both rows and columns, one frameset must be nested inside another.
 The interpretation of the rows and cols attributes changes slightly.
<FRAMESET ROWS="*,*">
<FRAMESET ...> the first row is itself a frameset </FRAMESET>
<FRAMESET ...> the second row is itself a frameset </FRAMESET>
</FRAMESET>
Dr. Anupama Jha

Specifying a Frame Source
 To specify a source for a frame, use the <frame> tag with the syntax:
<frame src=“URL”>
 The URL is the filename and location of the page that you want to
load.
 You must insert the <frame> tag between the opening and closing
<frameset> tags.
Dr. Anupama Jha

Controlling the Appearance of
Frames
You can control three attributes of a frame:

 scroll bars
 the size of the margin between the source document and the frame border
 whether or not the user is allowed to change the size of the frame
Dr. Anupama Jha

Controlling the Appearance of Scroll Bars
 By default, scroll bars are displayed when the content of the source page
cannot fit within the frame.
 You can override the default setting using the scrolling attribute.
 The scrolling syntax is: <frame src=“URL” scrolling=“scrolling”>
 scrolling can either be “yes” (to always display scroll bars) or “no” (to
never display scroll bars)
Dr. Anupama Jha

Removing the Scroll Bars from the
Frame
set the scrolling
attribute to “no” to
remove the scroll
bars
<!DOCTYPE html>
<html>
<head> <title>Example of HTML Frames Using col Attribute</title></head>
<frameset rows="30%, 40%, 30%">
<frame src="p1.html" >
<frameset cols="40%, 60%">
<frame src="main.html" scrolling=no>
<frameset rows="*, *">
</frameset>
</frameset>
</frameset>
</html>
Controlling Frame Margins
The following should be consider for frame margins:

 the browser determines the amount of space between the content of the
page and the frame border
 occasionally, the browser sets the margin between the border and the
content too large
 the margin should be big enough to keep the source’s text or images
from running into the frame’s borders
 the margin should not take up too much space, because you typically
want to display as much of the source as possible
Dr. Anupama Jha

Specifying Margins Syntax
 The syntax for specifying margins for a frame is:

<frame src=“URL” marginheight=“value” marginwidth=“value”>
 marginheight is the amount of space, in pixels, above and below the content of the
page in the frame
 marginwidth is the amount of space to the left and right of the page
 If you specify only one, the browser assumes that you want to use the same value for
both.
Dr. Anupama Jha

Controlling Frame Resizing
 By default, users can resize frame borders

 Web designers can freeze, or lock, frames, so that users cannot resize
them.
 The syntax for controlling frame resizing is:
<frame src=“URL” noresize>
 The noresize attribute
Dr. Anupama Jha

Working with Frames and Hypertext Links
 By default, clicking a hyperlink within a frame opens the linked file inside the same frame.
 You can display hyperlinks in many ways:
 in a different frame
 in a new window
 in the entire window
 When you want to control the behavior of hyperlinks in a framed page, there are two
required steps:
 give each frame on the page a name
 point each hyperlink to one of the named frames
Dr. Anupama Jha

Assigning a Name to a Frame
 To assign a name to a frame, add the name attribute to the frame tag.
 The syntax for this attribute is:
<frame src=“URL” name=“frame_name”>
 frame_name is any single word you assign to the frame
 case is important in assigning names: “information” is considered a different name
than “INFORMATION”
Dr. Anupama Jha

Specifying a Link Target
 You can use the target attribute to open a page in a specific frame.
 The syntax for this is: <a href=“URL” target=“frame_name”>
 frame_name is the name you’ve assigned to a frame on your Web page
 When a page contains dozens of hyperlinks that should all open in the same frame, HTML
provides a way to specify a target frame for all the hyperlinks within a single page.
Dr. Anupama Jha

Assigning a Name to Each Frame
the frame name
Once the frames are named,

the next task is to specify the
target frame for each
hyperlink.
Assigning a Target to a Hyperlink

Target name
Dr. Anupama Jha

Dr. Anupama Jha
Using Reserved Target Names
 Reserved target names are special names that can be used in place of
a frame name as the target.
 They are useful in situations:
 where the name of the frame is unavailable
 when you want the page to appear in a new window
 when you want the page to replace the current browser window
 All reserved target names begin with the underscore character ( _ ) to
distinguish them from other target names.
 Reserved target names are case-sensitive, they must be entered in
lowercase.
Dr. Anupama Jha

Reserved Target Names
This figure describes the reserved target names.
Dr. Anupama Jha

Using the _Self Target Name
You can use the
reserved target
name, _self,
which overrides
the target
specified in the
<base> tag and
instructs the
browser to open
the page in the
same frame that
contains the
hypertext link.
page will appear in the frame

containing the hyperlink
Dr. Anupama Jha

Using the _Top Reserved Target
To target a link Name
to the full
display area, you
will use the _top
reserved target
name.
The _top target

is often used
when a framed
page is accessed
from another.
It’s also used
when you are
linking to pages
that lie outside
your Web site page will appear in
altogether. the full display area
Dr. Anupama Jha
Example – Frame.html
<html>
<head></head>
<frameset rows="50%,*,2*" frameborder="no">
<frame src="one.htm" scrolling="no" bordercolor="cyan" name="try">
<frameset cols="50,*">
<frame src="a.htm" marginwidth="3" scrolling="no">
<frame src="a1.htm" height="500" width="200" noresize>
</frameset>
<frame src="a2.htm">
</frameset>
</html>
Dr. Anupama Jha

Example (contd.)– a1.htm
<html>
<head></head>
<BODY BGCOLOR="#FFFFAA" TEXT="black" LINK="blue"
VLINK="green" ALINK="red">
<p> this is just <a href="a.htm" target="_top"> For </a> testing.
</p>
<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>
</BODY>
</html>
Dr. Anupama Jha

Working with Frame Borders
 There are additional attributes you can apply to the <frame> tag
that allow you to change border size and appearance. For
example:
 you can remove borders from your frames to
free up more space for text and images
 you can change the color of the frame border
so that it matches or complements the color
scheme for your Web site
Dr. Anupama Jha

Setting the Border Color
 To change the color of a frame’s border, use the bordercolor

attribute.
 The attribute can be applied either to an entire set of frames, using the
<frameset> tag, or to individual frames, using the <frame> tag.
 The syntax for this attribute is:
 <frameset bordercolor=“color”>
or
 <frame bordercolor=“color”>
 color is either a color name or a color value
Dr. Anupama Jha

Setting the Border Color
Continued
 Applying the bordercolor attribute to the <frameset> tag affects all of
the frames and nested frames within the set.
 If you apply the bordercolor attribute to a single <frame> tag, that
particular color of the border changes in Internet Explorer, but in
Netscape Navigator, all of the frame borders change.
 View the page using different browsers and browser versions.
Dr. Anupama Jha

Setting the Border Width
 Another way of modifying frame borders is to change their widths using the
border attribute.
 The border attribute can be used only in the <frameset> tag, and not in
individual <frame> tags.
 The syntax for the border attribute is: <frameset border=“value”>
 value is the width of the frame borders in pixels
Dr. Anupama Jha

The frameborder Attribute
 Adding frameborder=“no” to a <frameset> tag removes the

borders from the frames in your page.
 by removing the borders, more space for the
text and images in each of the Web pages is
created
 Internet Explorer also supports the framespacing attribute, which
has the same effect as the border attribute.
 Netscape does not support the framespacing attribute.
Dr. Anupama Jha

Removing the Frame Borders
Some Web setting the width of the
designers frame border to zero has
prefer not to the effect of removing the
border
show frame
borders in
order to give
the illusion of
having a single
Web page
rather than
three separate
ones, while
other Web
designers
believe that
hiding frame
borders can
confuse users
as they
navigate the
Web site.Dr. Anupama Jha
Floating Frames
 Another way of using frames is to create a floating frame.

 A floating frame, or internal frame, is a frame displayed as a separate
box or window within a Web page.
 The frame can be placed within a Web page in much the same way as an
inline image.
Dr. Anupama Jha

Floating Frames/Inline Frame
What are the advantages of floating frames?
Floating frames are much easier to code than a regular frameset document,
since they work much like an <IMG> tag. They can give easy access to the
contents of another web site, without interfering with the flow of text.
What are the disadvantages of floating frames?
As of this writing, floating frames are only supported by Microsoft Internet
Explorer, which greatly limits their usefulness. However, you can give
alternate text to appear in browsers that don't support floating frames.
Dr. Anupama Jha

Syntax: Floating Frames
 The syntax for a floating frame is:

<iframe src=“URL” frameborder=“option”></iframe>
 URL is the name and location of the file you want to display in the
floating frame
 the frameborder attribute determines whether the browser displays
a border (“yes”) or not (“no”) around the frame
 in addition to these attributes, you can use some of the other
attributes you used with fixed frames, such as the marginwidth,
marginheight, and name attributes
Dr. Anupama Jha

<IFRAME SRC="URL_of_source“
HEIGHT="desired_height_in_pixels_or_%"
WIDTH="desired_width_in_pixels_or_%"
ALIGN="left|right" SCROLLING="yes|no|auto"
HSPACE="space_to_left_and_right_in_pixels"
VSPACE="space_above_and_below_in_pixels"
MARGINWIDTH="inside_left_and_right_margins_in_pixels"
MARGINHEIGHT="inside_top_and_bottom_margins_in_pixels"
FRAMEBORDER="1|0"
NAME="name_of_frame_for_linking_purposes">
</IFRAME>
Dr. Anupama Jha

Attributes <iframe> Tag
Attribute Description
align="alignment" How the frame is aligned with the surrounding text (use "left" or "right" to flow text
This figure around the inline frame.)
shows some
of the other border="value" The size of the border around the frame, in pixels
attributes
frameborder="type" Specifies whether to display a border ("yes") or not ("no")
associated
with the classid="URL" The class identifier of the object
<iframe> tag.
height="value" The height and width of the frame, in pixels
width="value"
hspace="value" The horizontal and vertical space around the frame, in pixels
vspace="value"
marginheight="value" The size of the internal margins of the frame, in pixels.

marginwidth="value"
name="text" The name of the frame
scrolling="type" Specifies whether the frame can be scrolled ("yes") or not ("no")
Dr. Anupama Jha
src="URL" The location and filename of the page displayed in the frame
Creating a Floating Frame
<!DOCTYPE html>
<html>
<body>
<H2>Inline (Floating) Frames</H2>
<p>Microsoft Internet Explorer 3.0 introduced a feature called inline frames... </p><br>
<br><br>
<IFRAME NAME="float1" SRC="http://www.java2s.com" WIDTH=350 HEIGHT=200 ALIGN=LEFT>
There would be an floating frame here if your browser supported it.</IFRAME>
<br><br><br><br><br><br>
<P>This is a simple example of how floating frames are used.<BR>
Notice that in many ways the floating frame acts very similar to an inline image. <BR>
<br><br><br><br>
Floating frames act like embedded objects in many ways.</P>
<IFRAME SRC="pic1.jpg" WIDTH=200 HEIGHT=100 ALIGN=left HSPACE=12></IFRAME>
</BODY>
</HTML>
Dr. Anupama Jha

Dr. Anupama Jha

Unit 1.2 HTML - Frames-1

Uploaded by

Copyright:

Available Formats

Unit 1.2 HTML - Frames-1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1.2 HTML - Frames-1

Uploaded by

Copyright:

Available Formats

Syllabus

Dr. Anupama Jha

Dr. Anupama Jha

 Create/control appearance & placement of frames

Dr. Anupama Jha

Dr. Anupama Jha

Dr. Anupama Jha

 The browser has to load multiple HTML files

Dr. Anupama Jha

 For frame layout

Dr. Anupama Jha

 The syntax for creating a row or column frame layout is:

Dr. Anupama Jha

 Row and column sizes can be specified in three ways:

Dr. Anupama Jha

Dr. Anupama Jha

• Use absolute value in pixel

Dr. Anupama Jha

 border: This attribute of frameset tag defines the width of border of

Dr. Anupama Jha

Dr. Anupama Jha

Dr. Anupama Jha

You can control three attributes of a frame:

Dr. Anupama Jha

Dr. Anupama Jha

The following should be consider for frame margins:

Dr. Anupama Jha

 The syntax for specifying margins for a frame is:

Dr. Anupama Jha

 By default, users can resize frame borders

Dr. Anupama Jha

Dr. Anupama Jha

Dr. Anupama Jha

Dr. Anupama Jha

Once the frames are named,

Assigning a Target to a Hyperlink

Dr. Anupama Jha

Dr. Anupama Jha

Dr. Anupama Jha

page will appear in the frame

Dr. Anupama Jha

The _top target

Dr. Anupama Jha

Dr. Anupama Jha

Dr. Anupama Jha

 To change the color of a frame’s border, use the bordercolor

Dr. Anupama Jha

Dr. Anupama Jha

Dr. Anupama Jha

 Adding frameborder=“no” to a <frameset> tag removes the

Dr. Anupama Jha

 Another way of using frames is to create a floating frame.

Dr. Anupama Jha

Dr. Anupama Jha

 The syntax for a floating frame is:

Dr. Anupama Jha

Dr. Anupama Jha

marginheight="value" The size of the internal margins of the frame, in pixels.