Unit 2.10 - Frames
Upcoming SlideShare
Loading in...5
×
 

Unit 2.10 - Frames

on

  • 1,095 views

Unit 2.10 - Frames

Unit 2.10 - Frames

Statistics

Views

Total Views
1,095
Views on SlideShare
1,095
Embed Views
0

Actions

Likes
0
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Unit 2.10 - Frames Unit 2.10 - Frames Document Transcript

  • Programming and Development Tools Web Programming UNIT 2.10Web ProgrammingFrames 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
  • Programming and Development Tools Web ProgrammingLet 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
  • Programming and Development Tools Web Programming Figure 2.10.1: A Web Page Containing FramesThe 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 isexplained in the second frame. Click the hyperlink, Click here, in the secondframe. The animation that explains how the pulley works will be displayed in aframe inside the third frame. Click on all the hyperlinks in the first frame andunderstand their working.2.10.1 Types of FramesetA Web page can be divided into different frames using Frameset. There arethree types of Frameset. They are Horizontal Frameset, vertical Frameset andMixed Frameset.2.10.1[A] Horizontal FramesetA Web page can be divided horizontally into different frames known asHorizontal Frameset. Figure 2.10.2 shows a Web page divided into 3horizontal framesets.Frames 2.10-3
  • Programming and Development Tools Web Programming Figure 2.10.2: A Web Page Containing 3 Horizontal Frames Hands-On!The following example illustrates how to insert horizontal frames in aWebpage,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.1The Web page shown in Figure 2.10.3 is displayed in the browser window.Frames 2.10-4
  • Programming and Development Tools Web Programming Figure 2.10.3: A Web Page Containing Horizontal FramesIn Figure 2.10.3, the Web page is divided into 2 horizontal frames. The tagused to divide a Web page into frames is the <FRAMESET> tag. The Rowsattribute creates horizontal frames and sets the number and width of thehorizontal frames For example, the tag <FRAMESET Rows=”25%, 75%”>will divide the Web page into 2 horizontal frames, where the height of the firstframe is 25 % and the height of the second frame is 75% of the browserwindow. The <Frame> tag with Src attribute is used to display the HTMLdocument inside the frame. The URL of the document to be displayed insidethe frame is assigned to the Src attribute. The following code segment is usedto divide the Web page shown in Figure 2.10.3 into 2 horizontal frames. TheWeb pages, Links.html and Lever.html are displayed in the first frame andsecond frame respectively.<FRAMESET Rows="25%,*"><FRAME Src=”Links.html”><FRAME Src=”Lever.html”></FRAMESET>In the above code, the height of the second frame is 75% of the browserwindow because * represents the height of the rest of the browser window,which is 100% – 25% = 75%.Frames 2.10-5
  • Programming and Development Tools Web Programming2.10.1[B] Vertical FramesetA Web page can be divided vertically into different frames known as VerticalFrameset. 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<FRAMESET Cols="25%,*"> Links.html loaded in the first frame<FRAME Src="Links.html"><FRAME Src="Lever.html"> Lever.html loaded in the second frame</FRAMESET></HTML> Code Sample 2.10.2Frames 2.10-6
  • Programming and Development Tools Web ProgrammingThe Web page shown in Figure 2.10.5 is displayed in the browser window. Figure 2.10.5: A Web Page Containing Vertical FramesIn Figure 2.10.5, the Web page is divided into 2 vertical frames. The tag usedto divide a Web page into frames is the <FRAMESET> tag. The Colsattribute creates vertical frames and sets the number and width of the verticalframes For example, the tag <FRAMESET Cols=”25%,75%”> will dividethe 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 insidethe frame. The URL of the document to be displayed inside the frame isassigned to the Src attribute. The following code segment is used to divide theWeb 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 framerespectively.<FRAMESET Cols="25%,*"><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. ForFrames 2.10-7
  • Programming and Development Tools Web Programmingexample, the following code displays, Frame support is required to view this pageif the browser does not support Frames.<NOFRAME>Frame support is required to view this page.</NOFRAME>2.10.1[C] Mixed FramesetA Web page can contain both horizontal frame and vertical frame known asMixed Frameset. Figure 2.10.6 shows a Web page divided into both Verticaland horizontal frames. Figure 2.10.6: A Web Page Containing Mixed Frameset Lab ExerciseLab Exercise 1: Open D10_1.html in Internet Explorer. The following code will be present inD10_1.html.<HTML><HEAD> <TITLE>FRAMES </TITLE></HEAD>Frames 2.10-8
  • Programming and Development Tools Web Programming<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 inD10_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
  • Programming and Development Tools Web Programming 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<FRAME Src="Links.html"> 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.3The Web page shown in Figure 2.10.7 is displayed in the browser window.Frames 2.10-10
  • Programming and Development Tools Web Programming Figure 2.10.7: A Web Page Containing Mixed FramesetThe following code segment is used to create the mixed frameset shown inFigure 2.10.7.<FRAMESET Cols="25%,*"><FRAME Src="Links.html"><FRAMESET Rows="50%,*"><FRAME Src="Lever.html"><FRAME Src="Lever_Anim.html"></FRAMESET></FRAMESET>The tag <FRAMESET Cols="25%,*"> divides the Web page into 2 verticalframes. The tag <FRAME Src="Links.html"> opens the HTML documentLinks.html in the left frame. The tag <FRAMESET Rows="50%,*"> dividesthe right frame into 2 horizontal frames. The tag <FRAMESrc="Lever.html"> opens the HTML document Lever.html in the upperhorizontal frame. The tag <FRAME Src="Lever_Anim.html"> opens theHTML 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
  • Programming and Development Tools Web Programming 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.21. 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
  • Programming and Development Tools Web Programming Figure 2.10.9: A Web page explaining Vertical Frameset Activity 2.10.31. 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
  • Programming and Development Tools Web Programming Figure 2.10.10: A Web page explaining Horizontal Frameset Activity 2.10.41. 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
  • Programming and Development Tools Web Programming Figure 2.10.11: A Web page explaining Mixed Frameset2.10.2 Inline FrameAn Inline Frame is a frame that occupies a rectangular area anywhere inside aWeb page. For example, the frame shown in Figure 2.10.8 is an Inline frame.Frames 2.10-15
  • Programming and Development Tools Web Programming Figure 2.10.12: A Web Page Containing Inline FrameThe Inline frame in the Web page shown in Figure 2.10.12 is displayed usingthe 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. Alignattribute specifies the alignment of the frame in the Web page. The Height andWidth attributes specify the height and width of the frame. Lab ExerciseLab Exercise 5: Write a HTML code to display the output as given in the following Figure2.10.13 using <IFRAME> tag.Frames 2.10-16
  • Programming and Development Tools Web Programming Figure 2.10.13: Inline Frame2.10.3 Nested FramesA set of frames in which one frame lies completely inside another frame iscalled as Nested Frames. The frames in the Web page shown in Figure2.10.9 is an example for Nested Frames.Frames 2.10-17
  • Programming and Development Tools Web Programming Figure 2.10.14: A Web Page Containing Nested FramesIn the Web page shown in Figure 2.10.14, the Inline Frame is completelyinside 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><FRAMESET Cols="25%,*"><FRAME Src="Links.html"><FRAMESET Rows="50%,*"><FRAME Src="Lever.html"><Frame Src="In_Frame.html"></FRAMESET>Frames 2.10-18
  • Programming and Development Tools Web Programming</FRAMESET></HTML> Code Sample 2.10.3The Web page shown in Figure 2.10.7 is displayed in the browser window. Figure 2.10.15: A Web Page Containing Nested FramesThe following code segment is used to create the mixed frameset shown inFigure 2.10.15.<FRAMESET Cols="25%,*"><FRAME Src="Links.html"><FRAMESET Rows="50%,*"><FRAME Src="Lever.html"><Frame Src="In_Frame.html"></FRAMESET></FRAMESET>The tag <FRAMESET Cols="25%,*"> divides the Web page into 2 verticalframes. The tag <FRAME Src="Links.html"> opens the HTML documentLinks.html in the left frame. The tag <FRAMESET Rows="50%,*"> dividesthe right frame into 2 horizontal frames. The tag <FRAMESrc="Lever.html"> opens the HTML document Lever.html in the upperFrames 2.10-19
  • Programming and Development Tools Web Programminghorizontal frame. The tag <FRAME Src="In_Frame.html"> opens theHTML document In_Frame.html in the lower horizontal frame. TheIn_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 width650 pixels inside the horizontal frame. The Name attribute of the <IFRAME>tag assigns the name Animation to the Inline Frame. Activity 2.10.51. 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.3. Create a Web page that displays the HTML documents Activity1.html in 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
  • Programming and Development Tools Web Programming Figure 2.10.16: A Web page explaining Inline Frame2.10.3 Navigation FrameA Web page can be divided into different frames. One frame can have linksand the linked document can be displayed in the other frame. These framesare 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><FRAMESET Cols="25%,*"><FRAME Src="Links.html"><FRAMESET Rows="40%,*"><FRAME Src="Lever.html" Name="Information">Frames 2.10-21
  • Programming and Development Tools Web Programming<FRAME Name="Animation"></FRAMESET></FRAMESET></HTML> Code Sample 2.10.4The Web page shown in Figure 2.10.17 is displayed in the browser window. Figure 2.10.17: A Web Page Containing Navigation FrameClick on the Inclined Plane hyperlink in the vertical frame. The working ofInclined 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 insidethe lower frame.In the Web page displayed in Figure 2.10.8, three frames are created. TheLinks.html document is opened in the left frame and Lever.html is opened in theupper frame using the following code:<FRAMESET Cols="25%,*"><FRAME Src="Links.html"><FRAMESET Rows="50%,*"><FRAME Src="Lever.html" Name="Information"><Frame Name="Animation">Frames 2.10-22
  • Programming and Development Tools Web Programming</FRAMESET></FRAMESET>The name Information is assigned to the upper frame and Animation isassigned 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 ofInclined 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 thedocument Plane.html is displayed.When the Click here link is clicked in the upper frame, the associatedanimation file is displayed in the lower frame using the following code:<A Href="Plane_Anim.html" Target="Animation">Clickhere</A>The Target attribute of the Anchor tag specifies the frame in which thedocument Plane_Anim.html is displayed. Lab ExerciseLab Exercise 6: Write a HTML code to display the output as given in the following Figure2.10.18 using <FRAME> tag. When you click on the text Desert then the Desert picture willdisplay in the next frame.Frames 2.10-23
  • Programming and Development Tools Web Programming Figure 2.10.18: Nested FramesLab 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
  • Programming and Development Tools Web Programming 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
  • Programming and Development Tools Web Programming Figure 2.10.20: A Web Page explaining Navigation Frame Self-Check Exercise 2.10.2Fill 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 TerminologiesFrame - 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
  • Programming and Development Tools Web Programming 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
  • Programming and Development Tools Web ProgrammingInstruction: Students must evaluate themselves to attain the list of competencies to be achieved.Name:Subject: Programming and Development ToolsUnit: FramesPlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency.Date Frames C1 C2 C3 C4 C5CommentCompetency 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