FRAMESET
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.
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.
Frameset Container
cols: Determines the size and
number of rectangular columns
within a <frameset>. They are set
from left to right of the display
area.
<!DOCTYPE html>
<html>
<head>
<title> Framed Page </title>
<frameset cols=“50%,50%”>
<frame src=“ANIMATEDimage.html”>
<frame src=“LINKimage.html”>
</frameset >
</head>
</html>
OUTPUT
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset cols="30%,70%">
<frame src="ANIMATEDimage.html">
<frame src="BACKGROUNDcover.html">
</frameset>
</head>
</html>
OUTPUT
Frameset Container
ROWS : Determines the size and
number of rectangular rows within
a <frameset>. They are set from top
of the display area to the bottom.
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset rows="50%,50%">
<frame src="FOLDERimage.html">
<frame src="BACKGROUNDcover.html">
</frameset>
</head>
</html>
OUTPUT
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.
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset rows="50%,50%", noresize=“noresize”>
<frame src="FOLDERimage.html">
<frame src="BACKGROUNDcover.html">
</frameset>
</head>
</html>
OUTPUT
border(thickness of the Frame): This
attribute specified in pixels. A setting
of zero will create a borderless frame.
Default value is 5.
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset rows="50%,50%", noresize, border=20>
<frame src="FOLDERimage.html">
<frame src="BACKGROUNDcover.html">
</frameset>
</head>
</html>
OUTPUT
bordercolor: This attribute is
allows you choose a color for
your border. This attribute is
rarely used.
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset rows="50%,50%", noresize, border=20
bordercolor=red>
<frame src="FOLDERimage.html">
<frame src="BACKGROUNDcover.html">
</frameset>
</head>
</html> OUTPUT
frameborder : Possible values
0, 1, YES, NO. A setting of zero
or NO will create a borderless
frame.
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset cols=“20%,20%, 20%,20%",
noresize, frameborder=no>
<frame src="FOLDERimage.html">
<frame src="BACKGROUNDcover.html">
<frame src="FOLDERimage.html">
<frame src="BACKGROUNDcover.html">
</frameset>
</head> OUTPUT
marginheight: Optional attribute
stated in pixels. Determines
vertical space between the
<FRAME> contents and the
frame’s borders.
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset cols="20%,20%,20%,20%", noresize>
<frame src="FOLDERimage.html" marginheight=50>
<frame src="BACKGROUNDcover.html">
<frame src="FOLDERimage.html" marginheight=50>
<frame src="BACKGROUNDcover.html" >
</frameset>
</head>
</html> OUTPUT
marginwidth: Optional attribute
stated in pixels. Determines
horizontal space between the
<FRAME> contents and the
frame’s borders.
<!Doctype html>
<html>
<head>
<title> Framed Page </title>
<frameset cols="20%,20%,20%,20%", noresize>
<frame src="FOLDERimage.html" marginheight=50>
<frame src="BACKGROUNDcover.html" marginwidth=50>
<frame src="FOLDERimage.html" marginheight=50>
<frame src="BACKGROUNDcover.html" marginwidth=50>
</frameset>
</head>
</html> OUTPUT
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.
<!Doctype html> * means getting
<html> proportional values
<head>
<title> Compound Frames Page</title>
<frameset rows="120,*">
<frame src="banner.html">
<frameset cols="120,*">
<frame src="links.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
OUTPUT
<head>
<frameset rows="25%,50%,25%”>
<frame src="">
<frameset cols="25%,75%">
<frame src="">
<frame src="">
</frameset>
<frame src="">
</frameset>
</head>
25%
50%
25% 75%
25%
<head>
<frameset rows="50%,25%,25%">
<frameset cols="25%,25%">
<frame src="">
<frame src="">
</frameset>
<frame src="">
<frame src="">
</frameset>
</head>
50%
25% 25%
25%
25%
<head>
<frameset rows=“25%,75%">
<frame src="">
<frameset cols="25%,25%,25%,25%">
<frame src="">
<frame src="">
<frame src="">
<frame src="">
</frameset>
<frame src="">
</frameset>
</head>
25%
75%
25% 25% 25% 25%
ACTIVITY #5
Frame A
(RIZAL HIGH SCHOOL)
With logo and background image
Frame B Frame C Frame D
(MISSION) (VISON) (CORE VALUES)
With background image With background image With background image
Example
Rubrics Criteria
Items Points
All frames are properly created 20
Only 3 frames are properly created 15
Only 2 frames are properly created 10
Only 1 frame is created 5
