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

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>



<FRAME Src="Lever.html">

Hands-On!

Links.html loaded in the first frame

Divides the Web page into 2 frames horizontally

Lever.html loaded in the second frame</FRAMESET>

</HTML>


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

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>



Hands-On!

Links.html loaded in the first frame

Divides the Web page into 2 frames vertically

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

</FRAMESET>

</HTML>

Code Sample 2.10.2

Frames 2.10-6


The Web page shown in Fig in the browser window.

Figure 2.10.5: A Web Page ontaining Vertical Frames

Figure 2

="25%,*">

lder browsers do not support Frames. In that case, y an alternate message. For

ure 2.10.5 is displayed

C

In .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.

<FRAMESET Cols

<FRAME Src=”Links.html”>

<FRAME Src=”Lever.html”>

</FRAMESET>

Some of the o<NOFRAME> tag can be used to displa

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>

t is required to view this paFrame suppor

</NOFRAME>

ge.

ixed Frameset ntal frame and vertical frame known as s a Web page divided into both Vertical

.10.1[C] M2A Web page can contain both horizoMixed Frameset. Figure 2.10.6 showand horizontal frames.

Figure 2.10.6: A Web Page Containing Mixed Frameset

Lab Exercise Lab Exercise 1: Open D10

10_1.html. _1.html in Internet Explorer. The following code will be present in

D <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>

ify the f1. Ident

D10_rame container element which is used to create the frame in source code

1.html. 2. Locate the attribute which is used to specify the number of columns and size of

3. ibute which is used to remove the border from the frame.

5. ich contains the URL of the Web page to be displayed in the

Lab e1. e source code in the Notepad. . Set the row attribute instead of column attribute.

Lab e The following code will be present in D10 h

columns in the frame. Name the attr

4. Identify the element which is used to assigns name of the frame. Locate the attribute whframe.

Ex rcise 2: Open D10_1.html in Notepad.

View th23. 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%. Ex rcise 3: Open D10_3.html in Notepad._3. tml.

<HTML>

HEAD> <

<TITLE>FRAMES </TITLE>

</HEAD>

<FRAMESET Cols="50%,50%" Frameborder =YES

Bordercolor ="GREEN" Framespacing = 5 >

<FRAME Name ="ONE" Src ="D10_2.HTML" >

e> <FRAME Name ="TWO" Scrolling=YES Noresiz

</FRAMESET>

</HTML>

1. Name the attribute which iste the attribute which i

used to set the frame colour in source code D10_3.html. s used to increase the frame size.

rline the attribute which is used scroll the frame.

Lab e

. Set the row attribute into the frameset instead of column attribute.

2. Loca3. Unde4. Identify the attribute which is not allows to resize the frame. Ex rcise 4: Open D10_3.html in Notepad. 1. View the source code in the Notepad. 2

Frames 2.10-9


3. Set the frame row width to 40% and 60% .

le Mix_Frame.html in Internet Explorer.

4. Change the frame border colour to blue5. Increase the frame size to 7. 6. Set the frame scrolling to No.

TO

Hands-On!

he fpen the HTML fi

ollowing example illustrates how to insert Mixed Frames in a Webpage,

The code in Mix_Frame.html file is given below: <HTML>

<HEAD>

<TITLE> Mixed Frameset </Title>

</HEAD>

<FRAMESET Cols="25%,*"> Links




<FRAME Src="Lever_Anim.html">

Divides the Web page into 2 frames vertically

.html loaded in the first frame

Lever.html loaded in the second frame

Divides the Web page into 2 frames horizontally

Lever Anim.html loaded in the third frame </FRAMESET>

</FRAMESET>

</HTML>

Code Sample 2.10.3 ge shown in Figure 2.10.7 is displayed in the browser window. The Web pa

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.

3. Save the HTML file as Activity2.html.

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.

3. Save the HTML file as Activity3.html.

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.

3. Create a Web page that displays the HTML documents Activity1.html in 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

the Web page shown in Figure 2.10.14, the Inline Frame is completely In

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 The Web page shown in Fig in the browser window.

Figure 2.10.15: A Web Page

he follow

s="25%,*">

>

ESET Cols="25%,*"> divides the Web page into 2 vertical

ure 2.10.7 is displayed

Containing Nested Frames

T ing code segment is used to create the mixed frameset shown in Figure 2.10.15.

<FRAMESET Col




<Frame Src="In_Frame.html"

</FRAMESET>

</FRAMESET>

The tag <FRAMframes. 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 </IFRAME

Name="Animation" Height="260" Width="650"> >

ME> tag inserts an Inline Frame of height 260 pixels and width inside the horizontal frame. The Name attribute of the <IFRAME>

explains Inline Frames as shown in Figure 2.10.. Save the HTML file as In_Frame2.htm.

the Web page shown in Figure

3. ame as shown in Figure

</BODY>

</HTML>

The <IFRA650 pixels tag assigns the name Animation to the Inline Frame.

Activity 2.10.5

1. Create a Web page that

2. Create a Web page that displays the HTML document In_Frame.html in anInline Frame shown in the right frame of2.10.. Save the HTML file as In_Frame1.html. Create a Web page that displays the HTML documents Activity1.html in the left frame and In_Frame1.html in the right fr2.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>


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

Education

web page shown

html document

web page

inclined plane

html document

html file

lower frame

inline frame