Unit 2.10 - Frames

Programming and Development Tools Web Programming

UNIT

2.10
Web Programming
Frames

OBJECTIVES
This unit helps you to organize your Web site by adding Frames to your Web
pages.
At the end of this unit, you will be able to
Add Horizontal Frameset in your Web Page.
Add Vertical Frameset in your Web page.
Add Mixed Frameset in your Web page.
Add Inline Frames in your Web page.
Add Nested Frames in your Web page.
Add Navigation Frames in your Web page.

Benchmark standard
Create well-organized Web sites using Frames.

Frames 2.10-1


Let us Revise!
1. Name the tags used to create a simple table.
2. Write how will you add a caption to a table.
3. Give the use of Cellpadding and Cellspacing attributes.
4. Name the tag and attribute used to set an image as the background
of a cell.
5. Write how you will set an image as the background of a cell.

Introduction
A Frame is a rectangular area in a Web page in which another Web page can
be displayed. So far you have seen only one Web page in a browser window.
Frames can be used to display more than one Web page in a browser
window. A Web page can be divided into different rectangular areas called
Frames and each frame can contain different Web pages.

+ Hands-On!

The following example illustrates the use of frames in a Webpage.
Open the HTML file Nav_Frame.html in Internet Explorer.
The code in Nav_Frame.html file is given below:
<HTML>
<HEAD>
<TITLE> Frames </Title>
</HEAD>
<FRAMESET Cols="25%,*">
<FRAME Src="Links.html">
<FRAMESET Rows="40%,*">
<FRAME Src="Lever.html" Name="Information">
<FRAME Name="Animation">
</FRAMESET>
</FRAMESET>
</HTML>
Code Sample 2.10.1
The Web page shown in Figure 2.10.1 is displayed in the browser window.

Frames 2.10-2


Figure 2.10.1: A Web Page Containing Frames

The Web page shown in Figure 2.10.1 is divided into 3 parts called Frames.
Click the hyperlink, Pulley, in the first frame. The working of Pulley is
explained in the second frame. Click the hyperlink, Click here, in the second
frame. The animation that explains how the pulley works will be displayed in a
frame inside the third frame. Click on all the hyperlinks in the first frame and
understand their working.

2.10.1 Types of Frameset
A Web page can be divided into different frames using Frameset. There are
three types of Frameset. They are Horizontal Frameset, vertical Frameset and
Mixed Frameset.

2.10.1[A] Horizontal Frameset
A Web page can be divided horizontally into different frames known as
Horizontal Frameset. Figure 2.10.2 shows a Web page divided into 3
horizontal framesets.

Frames 2.10-3


Figure 2.10.2: A Web Page Containing 3 Horizontal Frames

Hands-On!

The following example illustrates how to insert horizontal frames in a
Webpage,
Open the HTML file Hor_Frame.html in Internet Explorer.
The code in Hor_Frame.html file is given below:
<HTML>
<HEAD>
<TITLE> Horizontal Frameset </Title>
</HEAD>
Divides the Web page into 2 frames
<FRAMESET Rows="25%,*"> horizontally

<FRAME Src="Links.html"> Links.html loaded in the first frame

<FRAME Src="Lever.html">
Lever.html loaded in the second
</FRAMESET> frame

</HTML>
Code Sample 2.10.1

Frames 2.10-4


Figure 2.10.3: A Web Page Containing Horizontal Frames

In Figure 2.10.3, the Web page is divided into 2 horizontal frames. The tag
used to divide a Web page into frames is the <FRAMESET> tag. The Rows
attribute creates horizontal frames and sets the number and width of the
horizontal frames For example, the tag <FRAMESET Rows=”25%, 75%”>
will divide the Web page into 2 horizontal frames, where the height of the first
frame is 25 % and the height of the second frame is 75% of the browser
window. The <Frame> tag with Src attribute is used to display the HTML
document inside the frame. The URL of the document to be displayed inside
the frame is assigned to the Src attribute. The following code segment is used
to divide the Web page shown in Figure 2.10.3 into 2 horizontal frames. The
Web pages, Links.html and Lever.html are displayed in the first frame and
second frame respectively.
<FRAME Src=”Links.html”>
<FRAME Src=”Lever.html”>
</FRAMESET>
In the above code, the height of the second frame is 75% of the browser
window because * represents the height of the rest of the browser window,
which is 100% – 25% = 75%.

Frames 2.10-5


2.10.1[B] Vertical Frameset
A Web page can be divided vertically into different frames known as Vertical
Frameset. Figure 2.10.4 shows a Web page divided into 3 vertical framesets.

Figure 2.10.4: A Web Page Containing 3 Vertical Frames

Hands-On!

The following example illustrates how to insert vertical frames in a Webpage,
Open the HTML file Ver_Frame.html in Internet Explorer.
The code in Ver_Frame.html file is given below:
<HTML>
<HEAD>
<TITLE> Vertical Frameset </Title>
</HEAD> Divides the Web page into 2 frames
vertically
Links.html loaded in the first frame
<FRAME Src="Lever.html"> Lever.html loaded in the second
frame
</FRAMESET>
</HTML>
Code Sample 2.10.2
Frames 2.10-6



Figure 2.10.5: A Web Page Containing Vertical Frames

In Figure 2.10.5, the Web page is divided into 2 vertical frames. The tag used
to divide a Web page into frames is the <FRAMESET> tag. The Cols
attribute creates vertical frames and sets the number and width of the vertical
frames For example, the tag <FRAMESET Cols=”25%,75%”> will divide
the Web page into 2 vertical frames, where the width of the first frame is 25 %
and the width of the second frame is 75% of the browser window. The
<Frame> tag with Src attribute is used to display the HTML document inside
the frame. The URL of the document to be displayed inside the frame is
assigned to the Src attribute. The following code segment is used to divide the
Web page shown in Figure 2.10.5 into 2 vertical frames. The Web pages,
Links.html and Lever.html are displayed in the first frame and second frame
respectively.
<FRAME Src=”Links.html”>
<FRAME Src=”Lever.html”>
</FRAMESET>
Some of the older browsers do not support Frames. In that case,
<NOFRAME> tag can be used to display an alternate message. For

Frames 2.10-7


example, the following code displays, Frame support is required to view this page
if the browser does not support Frames.
<NOFRAME>
Frame support is required to view this page.
</NOFRAME>

2.10.1[C] Mixed Frameset
A Web page can contain both horizontal frame and vertical frame known as
Mixed Frameset. Figure 2.10.6 shows a Web page divided into both Vertical
and horizontal frames.

Figure 2.10.6: A Web Page Containing Mixed Frameset

Lab Exercise

Lab Exercise 1: Open D10_1.html in Internet Explorer. The following code will be present in
D10_1.html.

<HTML>
<HEAD>
<TITLE>FRAMES </TITLE>
</HEAD>

Frames 2.10-8


<FRAMESET Cols="40%,60%" Frameborder =NO >
<FRAME Name ="ONE" Src="D10_2.HTML">
<FRAME Name ="TWO">
</FRAMESET>
</HTML>

1. Identify the frame container element which is used to create the frame in source code
D10_1.html.
2. Locate the attribute which is used to specify the number of columns and size of
columns in the frame.
3. Name the attribute which is used to remove the border from the frame.
4. Identify the element which is used to assigns name of the frame.
5. Locate the attribute which contains the URL of the Web page to be displayed in the
frame.

Lab Exercise 2: Open D10_1.html in Notepad.
1. View the source code in the Notepad.
2. Set the row attribute instead of column attribute.
3. Add a border to the frame.
4. Add one more column in to the frame.
5. Set the frame column width to 25% 60% 15%.

Lab Exercise 3: Open D10_3.html in Notepad. The following code will be present in
D10_3.html.

<HTML>
<HEAD>
<TITLE>FRAMES </TITLE>
</HEAD>
<FRAMESET Cols="50%,50%" Frameborder =YES
Bordercolor ="GREEN" Framespacing = 5 >
<FRAME Name ="ONE" Src ="D10_2.HTML" >
<FRAME Name ="TWO" Scrolling=YES Noresize>
</FRAMESET>
</HTML>
1. Name the attribute which is used to set the frame colour in source code D10_3.html.
2. Locate the attribute which is used to increase the frame size.
3. Underline the attribute which is used scroll the frame.
4. Identify the attribute which is not allows to resize the frame.

Lab Exercise 4: Open D10_3.html in Notepad.
1. View the source code in the Notepad.
2. Set the row attribute into the frameset instead of column attribute.

Frames 2.10-9


3. Set the frame row width to 40% and 60%
4. Change the frame border colour to blue.
5. Increase the frame size to 7.
6. Set the frame scrolling to No.

Hands-On!

The following example illustrates how to insert Mixed Frames in a Webpage,
Open the HTML file Mix_Frame.html in Internet Explorer.
The code in Mix_Frame.html file is given below:
<HTML>
<HEAD>
<TITLE> Mixed Frameset </Title>
</HEAD> Divides the Web page into 2 frames vertically

<FRAMESET Cols="25%,*"> Links.html loaded in the first frame
Divides the Web page into 2 frames
<FRAMESET Rows="50%,*"> horizontally

<FRAME Src="Lever.html"> Lever.html loaded in the second frame
<FRAME Src="Lever_Anim.html">
Lever Anim.html loaded in the third frame
</FRAMESET>
</FRAMESET>
</HTML>
Code Sample 2.10.3

Frames 2.10-10


Figure 2.10.7: A Web Page Containing Mixed Frameset
The following code segment is used to create the mixed frameset shown in
Figure 2.10.7.
<FRAME Src="Lever_Anim.html">
</FRAMESET>
</FRAMESET>
The tag <FRAMESET Cols="25%,*"> divides the Web page into 2 vertical
frames. The tag <FRAME Src="Links.html"> opens the HTML document
Links.html in the left frame. The tag <FRAMESET Rows="50%,*"> divides
the right frame into 2 horizontal frames. The tag <FRAME
Src="Lever.html"> opens the HTML document Lever.html in the upper
horizontal frame. The tag <FRAME Src="Lever_Anim.html"> opens the
HTML document Lever_Anim.html in the lower horizontal frame.

Self-Check Exercise 2.10.1

1. Write the tag to create 2 vertical frames of equal width.

Frames 2.10-11


2. Write the tag to create 3 horizontal frames where the width of the first frame is 20%,
second frame is 40%.
3. Which attribute of <FRAME> tag is used to display a HTML document in a frame?

Activity 2.10.1

1. Create a Web page that shows the types of Frame as shown in
Figure 2.10.8.
2. Save the HTML file as Activity1.html.

Figure 2.10.8: A Web page displaying the types of Frame

Activity 2.10.2

1. Create a Web page that explains Vertical Frameset with the content shown
in the right frame of the Web page shown in Figure 2.10.9. Save the HTML
file as Ver_Frame.html.
2. Create a Web page that displays the HTML documents Activity2.10.1.html
in the left frame and Ver_Frame.html in the right frame as shown in Figure
2.10.9.

Frames 2.10-12


Figure 2.10.9: A Web page explaining Vertical Frameset

Activity 2.10.3

1. Create a Web page that explains Horizontal Frameset with the content
shown in the right frame of the Web page shown in Figure 2.10.10. Save
the HTML file as Hor_Frame.html.
2. Create a Web page that displays the HTML documents Activity1.html in
the left frame and Hor_Frame.html in the right frame as shown in Figure
2.10.10.

Frames 2.10-13


Figure 2.10.10: A Web page explaining Horizontal Frameset

Activity 2.10.4

1. Create a Web page that explains Mixed Frameset with the content shown
in the top right frame of the Web page shown in Figure 2.10.11. Save the
HTML file as Mix_Frame1.htm.
2. Create a Web page that gives an example for Mixed Frameset with the
content shown in the bottom right frame of the Web page shown in Figure
2.10.11. Save the HTML file as Mix_Frame2.html.
the left frame, Mix_Frame1.html in the top right frame and
Mix_Frame2.html in the bottom right frame as shown in Figure 2.10.11.
Save the HTML file as Activity4.html.

Frames 2.10-14


Figure 2.10.11: A Web page explaining Mixed Frameset

2.10.2 Inline Frame
An Inline Frame is a frame that occupies a rectangular area anywhere inside a
Web page. For example, the frame shown in Figure 2.10.8 is an Inline frame.

Frames 2.10-15


Figure 2.10.12: A Web Page Containing Inline Frame
The Inline frame in the Web page shown in Figure 2.10.12 is displayed using
the following code segment:
<IFRAME Src="Scenery.html" Align="Center" Height="500"
Width="450"></IFRAME>
The Inline frame is added to a Web page using <IFRAME> tag inside the
<BODY> tag. The Src attribute specifies the document to be displayed. Align
attribute specifies the alignment of the frame in the Web page. The Height and
Width attributes specify the height and width of the frame.

Lab Exercise

Lab Exercise 5: Write a HTML code to display the output as given in the following Figure
2.10.13 using <IFRAME> tag.

Frames 2.10-16


Figure 2.10.13: Inline Frame

2.10.3 Nested Frames
A set of frames in which one frame lies completely inside another frame is
called as Nested Frames. The frames in the Web page shown in Figure
2.10.9 is an example for Nested Frames.

Frames 2.10-17


Figure 2.10.14: A Web Page Containing Nested Frames

In the Web page shown in Figure 2.10.14, the Inline Frame is completely
inside the Horizontal Frame. Hence it is a Nested Frame.

Hands-On!

The following example illustrates how to insert Nested Frames in a Webpage,
Open the HTML file Nest_Frame.html Internet Explorer.
The code in Nest_Frame.html file is given below:
<HTML>
<HEAD>
<TITLE> Nested Frames </Title>
</HEAD>
<Frame Src="In_Frame.html">
</FRAMESET>

Frames 2.10-18


</FRAMESET>
</HTML>
Code Sample 2.10.3

Figure 2.10.15: A Web Page Containing Nested Frames

The following code segment is used to create the mixed frameset shown in
Figure 2.10.15.
<Frame Src="In_Frame.html">
</FRAMESET>
</FRAMESET>
The tag <FRAMESET Cols="25%,*"> divides the Web page into 2 vertical
frames. The tag <FRAME Src="Links.html"> opens the HTML document
Links.html in the left frame. The tag <FRAMESET Rows="50%,*"> divides
the right frame into 2 horizontal frames. The tag <FRAME
Src="Lever.html"> opens the HTML document Lever.html in the upper

Frames 2.10-19


horizontal frame. The tag <FRAME Src="In_Frame.html"> opens the
HTML document In_Frame.html in the lower horizontal frame. The
In_Frame.html document contains the following code:
<HTML>
<BODY>
<IFRAME Name="Animation" Height="260" Width="650">
</IFRAME>
</BODY>
</HTML>
The <IFRAME> tag inserts an Inline Frame of height 260 pixels and width
650 pixels inside the horizontal frame. The Name attribute of the <IFRAME>
tag assigns the name Animation to the Inline Frame.

Activity 2.10.5

1. Create a Web page that explains Inline Frames as shown in Figure 2.10..
Save the HTML file as In_Frame2.htm.
2. Create a Web page that displays the HTML document In_Frame.html in an
Inline Frame shown in the right frame of the Web page shown in Figure
2.10.. Save the HTML file as In_Frame1.html.
the left frame and In_Frame1.html in the right frame as shown in Figure
2.10.16 Save the HTML file as Activity5.html.

Frames 2.10-20


Figure 2.10.16: A Web page explaining Inline Frame

2.10.3 Navigation Frame
A Web page can be divided into different frames. One frame can have links
and the linked document can be displayed in the other frame. These frames
are called Navigation Frames.

Hands-On!

The following example illustrates the use of navigation frames in a Webpage.
Open the HTML file Nav_Frame.html in Internet Explorer.
The code in Nav_Frame.html file is given below:
<HTML>
<HEAD>
<TITLE> Navigation Frameset </Title>
</HEAD>

Frames 2.10-21


<FRAME Name="Animation">
</FRAMESET>
</FRAMESET>
</HTML>
Code Sample 2.10.4

Figure 2.10.17: A Web Page Containing Navigation Frame

Click on the Inclined Plane hyperlink in the vertical frame. The working of
Inclined plane is displayed in the top right frame. Click on Click here hyperlink.
The animation that describes an inclined plane is displayed in a frame inside
the lower frame.
In the Web page displayed in Figure 2.10.8, three frames are created. The
Links.html document is opened in the left frame and Lever.html is opened in the
upper frame using the following code:
<Frame Name="Animation">

Frames 2.10-22


</FRAMESET>
</FRAMESET>
The name Information is assigned to the upper frame and Animation is
assigned to the lower frame.
The code in Links.html is given below:
<HTML>
<BODY>
<H1> Simple Machine </H1>
<A Href="Lever.html" Target="Information"> Lever </A>
<BR>
<A Href="Plane.html" Target="Information"> Inclined Plane
</A> <BR>
<A Href="Screw.html" Target="Information"> Screw </A>
<BR>
<A Href="Wedge.html" Target="Information"> Wedge </A>
<BR>
<A Href="Pulley.html" Target="Information"> Pulley </A>
</BODY>
</HTML>
When the link Inclined plane is clicked, the Web page describing the working of
Inclined plane is displayed in the upper frame using the following code:
<A Href="Plane.html" Target="Information"> Inclined Plane
</A> <BR>
The Target attribute of the Anchor tag specifies the frame in which the
document Plane.html is displayed.
When the Click here link is clicked in the upper frame, the associated
animation file is displayed in the lower frame using the following code:
<A Href="Plane_Anim.html" Target="Animation">Click
here</A>
The Target attribute of the Anchor tag specifies the frame in which the
document Plane_Anim.html is displayed.

Lab Exercise

Lab Exercise 6: Write a HTML code to display the output as given in the following Figure
2.10.18 using <FRAME> tag. When you click on the text Desert then the Desert picture will
display in the next frame.

Frames 2.10-23


Figure 2.10.18: Nested Frames

Lab Exercise 7: Create two frames and open Welcome.html in the first frame.
1. When you click on the text “States of Malaysia” from the first frame the corresponding
file States.html which you have created under the folder in your name in C: should
open in Second frame as shown in the following Figure 1.10.19.
2. When you click on the text “National Flower” in the first frame the Flower description
which is available in Malaysia.html which you have created under the folder in your
name in C: should be displayed in the second frame.
3. The same way you open rest of the files.

Frames 2.10-24


Figure 2.10.19: Main Page

Activity 2.10.6

1. Create a Web page that explains Navigation Frames as shown in
the right frame of the Web page in Figure 2.10.20. Save the HTML
file as Nav_Frame.html.
2. Modify the Activity1.html file to convert the list mentioned under the
heading Types of Frame to links and save the file as Links.html. The
document to which the link should be linked is given below:
Vertical Frame should be linked to Ver_Frame.html
Horizontal Frame should be linked to Hor_Frame.html
Mixed Frame should be linked to Mix_Frame1.html
Inline frame should be linked to In_Frame1.html
Navigation Frame should be linked to Nav_Frame.html
3. The linked documents should be displayed in the second frame.

Frames 2.10-25


Figure 2.10.20: A Web Page explaining Navigation Frame

Self-Check Exercise 2.10.2

Fill in the blanks:
1. ______ tag is used to create Inline Frames.
2. ______ attribute of <A> tag specifies the name of the frame in which the document
should be opened.
3. ______ attribute of <IFRAME> tag aligns the frame in a Web page.

Technical Terminologies

Frame -
A Frame is a rectangular area in a browser window
where a Web page can be displayed.
Horizontal Frameset - A Web page can be divided horizontally into
different frames known as Horizontal Frameset.
Vertical Frameset - A Web page can be divided vertically into different
frames known as Vertical Frameset.
Mixed Frameset - A Web page can contain both horizontal frameset
and vertical frameset known as Mixed Frameset.
Inline Frame - An Inline Frame is a frame that lies completely
inside a Web page.

Frames 2.10-26


Navigation Frame - It is a frame with links that are linked to other
documents displayed in the other frame.

Summary
In this unit, you learnt that
A Frame is a rectangular area in a browser window where a Web
page can be displayed.
A Web page can be divided horizontally into different frames known
as Horizontal Frameset.
The tag used to divide a Web page into frames is the
<FRAMESET> tag.
The <Frame> tag with Src attribute is used to display the HTML
document inside the frame.
A Web page can be divided vertically into different frames known as
Vertical Frameset.
A Web page can contain both horizontal frameset and vertical
frameset known as Mixed Frameset.
An Inline Frame is a frame that occupies a rectangular area
anywhere inside a Web page.
The Inline frame is added to a Web page using <IFRAME> tag.

Assignment

I. Answer the following questions:
1. Define Frame.
2. Name the different types of Framesets.
3. Write the code segment to create a Web page with 2 vertical
frames.
4. Write the code segment to create a Web page with mixed frameset.
5. Write the code segment to create a Web page with Inline Frame.

Criterion Referenced Test

Frames 2.10-27


Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development Tools
Unit: Frames

Please tick [ √ ] the appropriate box when you have achieved the respective
competency.

Date Frames
C1 C2 C3 C4 C5

Comment

Competency codes:

General:

C1 = Write programs that adds Horizontal Frames to a Web page.
C2 = Write programs that adds Vertical Frames to a Web page.
C3 = Write programs that adds Mixed Frame to a Web page.
C4 = Write programs that adds an Inline Frame to a Web page.
C5 = Write programs that adds a Navigation Frame to a Web page.

Frames 2.10-28

Unit 2.10 - Frames

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Unit 2.10 - Frames (20)

More from Intan Jameel (20)

Recently uploaded (20)

Unit 2.10 - Frames