28
Unit 10 – Frames Presentation 1 Web Programming

M02 un10 p01

  • View
    471

  • Download
    1

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: M02 un10 p01

Unit 10 – Frames

Presentation 1

Web Programming

Page 2: M02 un10 p01

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?

Page 3: M02 un10 p01

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

Page 4: M02 un10 p01

Frames

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

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

Page 5: M02 un10 p01

Hands-On!

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

frames in a Web page.

Page 6: M02 un10 p01

Types of Frameset

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

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

Page 7: M02 un10 p01

Horizontal Frameset

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

Page 8: M02 un10 p01

Hands-On!

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

insert horizontal frames in a Web page.

Page 9: M02 un10 p01

Vertical Frameset

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

Page 10: M02 un10 p01

Hands-On!

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

vertical frames in a Web page.

Page 11: M02 un10 p01

Mixed Frameset

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

Page 12: M02 un10 p01

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.

Page 13: M02 un10 p01

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.

Page 14: M02 un10 p01

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

Page 15: M02 un10 p01

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.

Page 16: M02 un10 p01

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.

Page 17: M02 un10 p01

Hands-On!

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

Mixed Frames in a Webpage.

Page 18: M02 un10 p01

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.

Page 19: M02 un10 p01

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.

Page 20: M02 un10 p01

Activity 2.10.2 Contd.

Page 21: M02 un10 p01

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.

Page 22: M02 un10 p01

Activity 2.10.3 Contd.

Page 23: M02 un10 p01

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.

Page 24: M02 un10 p01

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.

Page 25: M02 un10 p01

Activity 2.10.4 Contd.

Page 26: M02 un10 p01

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.

Page 27: M02 un10 p01

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.

Page 28: M02 un10 p01

Assignment

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