Scribd
Upload
76 views

Frames: First Introduced in Netscape Navigator 2.0

Frames allow you to divide the browser window into multiple panes to display multiple HTML documents simultaneously. A frameset page uses the <FRAMESET> element to define the divisions, and <FRAME> elements to specify the source of the content document for each division. The <NOFRAMES> element provides fallback content for non-frame supporting browsers. Attributes like rows, cols, and target help control the layout and linking between frames.

Uploaded by

Alfred Amponsah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
76 views

Frames: First Introduced in Netscape Navigator 2.0

Frames allow you to divide the browser window into multiple panes to display multiple HTML documents simultaneously. A frameset page uses the <FRAMESET> element to define the divisions, and <FRAME> elements to specify the source of the content document for each division. The <NOFRAMES> element provides fallback content for non-frame supporting browsers. Attributes like rows, cols, and target help control the layout and linking between frames.

Uploaded by

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

Frames

 Frames are a relatively new addition to the HTML


standard. First introduced in Netscape
Navigator 2.0.
Objectives:
Upon completing this section, you should be able to:
 Create a Frame based page.
 Work with the Frameset, Frame, and Noframes
elements.
 Use the attributes of the Frames elements to
control the display.
 Set Targets appropriately.
1
Frames
 A framed page is actually made up of multiple
HTML pages. There is one HTML document
that describes how to break up the single
browser window into multiple windowpanes.
Each windowpane is filled with an HTML
document.

 For Example to make a framed page with a


windowpane on the left and one on the right
requires three HTML pages. Doc1.html and
Doc2.html are the pages that contain
content. Frames.html is the page that
describes the division of the single browser
window into two windowpanes.
2
Frames

Doc1.html Doc2.html

Doc1.html Doc2.html

Frames.html
3
Frame Page Architecture
 A <FRAMESET> element is placed in the html
document before the <BODY> element. The
<FRAMESET> describes the amount of screen real
estate given to each windowpane by dividing the
screen into ROWS or COLS.
 The <FRAMESET> will then contain <FRAME>
elements, one per division of the browser window.
 Note: Because there is no BODY container,
FRAMESET pages can't have background images
and background colors associated with them.
4
Frame Page Architecture
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>

</HTML>
5
The Diagram below is a graphical view
of the document described above

FRAMESET COLS=”23%, 77%”


FRAME FRAME

NAME= NAME=right_pane
left_pane SRC= Doc2.html
SRC=Doc1.h
tml

6
<FRAMESET> Container
<FRAMESET> : The FRAMESET element creates
divisions in the browser window in a single direction.
This allows you to define divisions as either rows or
columns.
 ROWS : Determines the size and number of
rectangular rows within a <FRAMESET>. They are
set from top of the display area to the bottom.
Possible values are:
 Absolute pixel units, I.e. “360,120”.
 A percentage of screen height, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “360,*”.
 <Frameset cols=“200,20%,*,2*”>
7
Creating a Frames Page
 COLS: Determines the size and number of
rectangular columns within a <FRAMESET>.
They are set from left to right of the display
area.

Possible values are:


 Absolute pixel units, I.e. “480,160”.
 A percentage of screen width, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is
often combined with a value in pixels , e.g.
“480,*”.

8
Creating a Frames Page
 FRAMEBORDER : Possible values 0, 1, YES, NO. A
setting of zero will create a borderless frame.
 FRAMESPACING: This attribute is specified in
pixels. If you go to borderless frames you will need
to set this value to zero as well, or you will have a
gap between your frames where the border used to
be.
 BORDER(thickness of the Frame): This attribute
specified in pixels. A setting of zero will create a
borderless frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you choose
a color for your border. This attribute is rarely used.

9
10
<FRAME>
<FRAME>: This element defines a single frame within a
frameset. There will be a FRAME element for each
division created by the FRAMESET element. This tag
has the following attributes:
 SRC: Required, as it provides the URL for the page that
will be displayed in the frame.
 NAME: Required for frames that will allow targeting by
other HTML documents. Works in conjunction with the
target attribute of the <A>, <AREA>, <BASE>, and
<FORM> tags.

11
<FRAME>
 MARGINWIDTH: Optional attribute stated in pixels.
Determines horizontal space between the
<FRAME> contents and the frame’s borders.
 MARGINHEIGHT: Optional attribute stated in
pixels. Determines vertical space between the
<FRAME> contents and the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame.
Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame
contents.
By default: scrolling is auto. 12
<FRAME>

 NORESIZE: Optional – prevents viewers


from resizing the frame. By default the
user can stretch or shrink the frame’s
display by selecting the frame’s border
and moving it up, down, left, or right.

13
<NOFRAMES>
 <NOFRAMES>: Frame – capable browsers ignore all
HTML within this tag including the contents of the BODY
element. This element does not have any attributes.

<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
</HEAD>

14
<NOFRAMES>
<FRAMESET COLS="23%,77%">
<FRAME SRC="" NAME="left_pane“>
<FRAME SRC="" NAME="right_pane">
<NOFRAMES>
<P> This is a Framed Page. Upgrade your
browser to support frames.</P>
</NOFRAMES></FRAMESET>

15
Compound FRAMESET Divisions

 In this case a second FRAMESET element will


be inserted in the place of the FRAME element
that would describe the second row.
 The second FRAMESET element will divide the
remaining screen real estate into 2 columns.
 This nested FRAMESET will then be followed by
2 FRAME elements to describe each of the
subsequent frame divisions created.

16
Compound FRAMESET Divisions
<html> <noframes>
<head>
<p>
<title> Compound Frames Page</title>
Default
</head> message
<frameset rows=“120,*”>
<frame src=“banner_file.html” </p>
name”banner”> </noframes>
<frameset cols=“120,*”>
</frameset>
<frame src=“links_file.html”
name=“links”> </frameset>
<frame src=“content_file.html”
name=“content”> </head>
17
Compound FRAMESET Divisions
You may want to create a frames design with a
combination of rows and columns.

Banner File

Links
File Contents File

18
Compound FRAMESET
Divisions Example
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>
19
Output

20
21
22
23
Frame Formatting
• Example:

<frameset rows=“20%, *, 20%”>


<frame src=“header.html”
noresize scrolling=no>
<frame src=“body.html”>
<frame
src=“navigationbar.html” noresize
scrolling=no>
</frameset>
24
25
26
What do the following mean?
1) <FRAMESET COLS="2*, 3*, 5*">
2) <FRAMESET COLS="150, 20%, *, 3*">
So what are the space-allocation priorities?
Absolute pixel values are always
assigned space first, in order from left to
right. These are followed by percentage
values of the total space. Finally,
proportional values are divided based
upon what space is left.
27
Generic Frame Formula
• The <FRAME> tag has six associated
attributes: SRC, NAME, MARGINWIDTH,
MARGINHEIGHT, SCROLLING, and
NORESIZE. Here's a complete generic
FRAME:
• <FRAME SRC="url" NAME="window_name"
SCROLLING=YES|NO|AUTO
MARGINWIDTH="value"
MARGINHEIGHT="value"
NORESIZE>
28
What will be the Output?
<FRAMESET ROWS="*, 2*, *" COLS="2*, *">
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
</FRAMESET>

29
Targets
 When you use links for use in a frames environment you
will need to specify an additional attribute called TARGET.
 The TARGET attribute uses the NAME attribute of the
FRAME element.
 If we were to place a link in doc1.html that linked to
doc3.html and we wanted doc3.html to be displayed in the
right windowpane; the HTML code would appear in
doc1.html as follows:

<A HREF=“doc3.html”
TARGET=“right_pane”>Link to Document 3
</A>
30
Special Targets
• There are 4 special target names that cannot be assigned by
the NAME attribute of the FRAME tag.
1. TARGET=“_top” : This loads the linked document into the full
browser window with the URL specified by the HREF attribute.
All frames disappear, leaving the new linked page to occupy
the entire window. The back is turned on.
2. TARGET=“_blank” : Opens an unnamed new browser
window and loads the document specified in the URL attribute
into the new window (and your old window stays open). The
back is turned off. Other windows remains on.

3. TARGET=“_self” : Loads the document in the same window


where the anchor was {Clicked}. This is the default setting for
linking elements.

4. TARGET=“_parent” : the _parent frame is a prior frameset


that the current frameset was “spawned” from. If there isn’t
one it is the browser window. The document is loaded into the
area occupied by the columns or rows frameset containing the
frame that contains the link. The back is turned on. All
windows disappear. 31
If a frame contains the following link, then clicking the link
launches a new, unnamed browser display window that contains
the content defined in stuff.HTM. This can be a simple HTML
document, or an entirely new FRAMESET definition.
1. <A HREF="stuff.html" TARGET="_blank">
If a frame contains the following link, then clicking the link will
simply cause the frame which contains the link to clear, and its
content will be replaced with whatever is in stuff.htm.
2. <A HREF="stuff.html" TARGET="_self">
If a frame contains the following link, the frameset that contains
the frame that contains this link will be replaced by stuff.HTM.
3. <A HREF="stuff.html" TARGET="_parent">
Finally, if a frame contains the following link, clicking the link
replaces the entire browser window with the contents of
stuff.HTM.
4. <A HREF="stuff.html" TARGET="_top">
32
Targeting links to frames
The TARGET attribute allows you to specify the frame into which a page
is to be loaded into in a frames setting.

<A HREF=“chap1.html” TARGET=“_self”> [Chapter 1]</A>


<A HREF=“chap1.html” TARGET=“_parent”> [Chapter 2]</A>

Parent window chap1.html Learning HTML


[Chapter 1][Chapter 2][Chapter 3]

chap2.html

33
Targeting links to frames

The TARGET attribute allows you to specify the frame into which a
page is to be loaded into in a frames setting.

<A HREF=“chap1.html” TARGET=“bottom”> [Chapter 1]</A>


<A HREF=“chap2.html” TARGET=“bottom”> [Chapter 2]</A>
<A HREF=“chap3.html” TARGET=“bottom”> [Chapter 3]</A>

chap1.html Learning HTML


[Chapter 1][Chapter 2][Chapter 3]
chap2.html

chap3.html

34

You might also like