M02 un10 p01

Unit 10 – Frames

Presentation 1

Web Programming

Revision

1. What are the tags used to create a simple table?

2. How will you add a caption to a table?3. What is the use of Cellpadding and

Cellspacing attributes?4. How will you set an image as the

background of a cell?

Objectives

At the end of this presentation, 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

Frames

• A Frame is a rectangular area in a Web page.

• A Web page can be divided into different rectangular areas called Frames.

Hands-On!

• Open the HTML file Nav_Frame.HTML in IE.• This HTML document illustrates the use of

frames in a Web page.

Types of Frameset

• A Web page can be divided into different frames using Frameset.

• Three types of Frameset. Horizontal Frameset Vertical Frameset Mixed Frameset.

Horizontal Frameset

• A Web page can be divided horizontally into different frames known as Horizontal Frameset.

Hands-On!

• Open the HTML file Hor_Frame.HTML in IE.• This HTML document illustrates how to

insert horizontal frames in a Web page.

Vertical Frameset

• A Web page can be divided vertically into different frames known as Vertical Frameset.

Hands-On!

• Open the HTML file Ver_Frame.HTML in IE.• This HTML document illustrates how to insert

vertical frames in a Web page.

Mixed Frameset

• A Web page can be divided both horizontally and vertically into different frames known as Mixed Frameset.

Lab Exercise

1. Open D10_1.html in Internet Explorer. a. Identify the frame container element

which is used to create the frame in source code D10_1.html.

b. Locate the attribute which is used to specify the number of columns and size of columns in the frame.

c. Name the attribute which is used to remove the border from the frame.

Lab Exercise Contd.

d. Identify the element which is used to assigns name of the frame.

e. Locate the attribute which contains the URL of the Web page to be displayed in the frame.

Lab Exercise

2. Open D10_2.html in Internet Explorer. a. View the source code in the Notepad. b. Set the row attribute instead of column

attribute.c. Add a border to the frame.d. Add one more column in to the frame.e. Set the frame column width to 25%

60% 15%.

Lab Exercise

3. Open D10_3.html in Internet Explorer. a. Name the attribute which is used to set the

frame colour in source code D10_3.html.b. Locate the attribute which is used to

increase the frame size.c. Underline the attribute which is used scroll

the frame.d. Identify the attribute which is not allows to

resize the frame.

Lab Exercise

4. Open D10_3.html in Internet Explorer. a. View the source code in the Notepad. b. Set the row attribute into the frameset instead of column attribute.a. Set the frame row width to 40% and 60%b. Change the frame border colour to blue.c. Increase the frame size to 7.d. Set the frame scrolling to No.

Hands-On!

• Open the HTML file Mix_Frame.HTML in IE.• This HTML document illustrates how to insert

Mixed Frames in a Webpage.

Activity 2.10.1

• Create a Web page that shows the types of Frame as shown in Figure.

• Save the HTML file as Activity1.html in C:\HTML\Unit10\Activity folder.

Activity 2.10.2• Create a Web page that explains Vertical Frameset with the content shown

in the right frame of the Web page shown in Figure. Save the HTML file as Ver_Frame.html in C:\HTML\Unit 10\Activity folder.

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

• Save the HTML file as Activity2.html in C:\HTML\Unit10\Activity folder.

Activity 2.10.2 Contd.

Activity 2.10.3 • Create a Web page that explains Horizontal Frameset with the content

shown in the right frame of the Web page shown in Figure. Save the HTML file as Hor_Frame.html in C:\HTML\Unit10\Activity folder.

• 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

• Save the HTML file as Activity3.html in C:\HTML\Unit10\Activity folder.

Activity 2.10.3 Contd.

Activity 2.10.4

• Create a Web page that explains Mixed Frameset with the content shown in the top right frame of the Web page shown in Figure. Save the HTML file as Mix_Frame1.html in C:\HTML\Unit10\Activity folder.

• 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. Save the HTML file as Mix_Frame2.html in C:\HTML\Unit10\Activity folder.

Activity 2.10.4 Contd.

• 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. Save the HTML file as Activity4.html in C:\HTML\Unit10\Activity folder.

Activity 2.10.4 Contd.

Summary

In this presentation, you learnt the following:• 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.

Summary

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

Assignment

1. Name the different types of Framesets.2. Define Frame.