Unit 10 – Frames Presentation   1 Web Programming
Revision <ul><li>What are the tags used to create a simple table? </li></ul><ul><li>How will you add a caption to a table?...
Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Add Horizontal Frameset in your ...
  Frames <ul><li>A Frame is a rectangular area in a Web page. </li></ul><ul><li>A Web page can be divided into different r...
  Hands-On! <ul><li>Open the HTML file  Nav_Frame.HTML  in IE. </li></ul><ul><li>This HTML document illustrates the use of...
Types of Frameset <ul><li>A Web page can be divided into different frames using Frameset.  </li></ul><ul><li>Three types o...
Horizontal Frameset <ul><li>A Web page can be divided horizontally into different frames known as  Horizontal Frameset. </...
Hands-On! <ul><li>Open the HTML file  Hor_Frame.HTML  in IE. </li></ul><ul><li>This HTML document illustrates how to inser...
Vertical Frameset <ul><li>A Web page can be divided vertically into different frames known as  Vertical Frameset. </li></ul>
  Hands-On! <ul><li>Open the HTML file  Ver_Frame.HTML  in IE. </li></ul><ul><li>This HTML document illustrates how to ins...
  Mixed Frameset   <ul><li>A Web page can be divided both horizontally and vertically into different frames known as  Mixe...
  Lab Exercise   <ul><li>1.  Open D10_1.html in Internet Explorer.  </li></ul><ul><ul><li>Identify the frame container ele...
Lab Exercise Contd. <ul><ul><li>Identify the element which is used to assigns name of the frame. </li></ul></ul><ul><ul><l...
Lab Exercise <ul><li>2. Open D10_2.html in Internet Explorer.  </li></ul><ul><ul><ul><li>View the source code in the Notep...
Lab Exercise <ul><li>3. Open D10_3.html in Internet Explorer.  </li></ul><ul><ul><li>Name the attribute which is used to s...
Lab Exercise  <ul><li>4. Open D10_3.html in Internet Explorer.  </li></ul><ul><ul><ul><li>View the source code in the Note...
Hands-On! <ul><li>Open the HTML file  Mix_Frame.HTML   in IE. </li></ul><ul><li>This HTML document illustrates how to inse...
Activity 2.10.1 <ul><ul><li>Create a Web page that shows the types of  Frame as shown in Figure. </li></ul></ul><ul><ul><l...
Activity 2.10.2 <ul><ul><li>Create a Web page that explains Vertical Frameset with the content shown in the right frame of...
Activity 2.10.2 Contd.
Activity 2.10.3  <ul><ul><li>Create a Web page that explains Horizontal Frameset with the content shown in the right frame...
Activity 2.10.3 Contd.
Activity 2.10.4  <ul><ul><li>Create a Web page that explains Mixed Frameset with the content shown in the top right frame ...
Activity 2.10.4 Contd. <ul><ul><li>Create a Web page that displays the HTML documents Activity1.html in the left frame, Mi...
Activity 2.10.4 Contd.
Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li>A  Frame  is a rectangular area in a bro...
Summary <ul><li>The  <Frame>  tag with  Src  attribute is used to display the HTML document inside the frame. </li></ul><u...
Assignment <ul><li>Name the different types of Framesets. </li></ul><ul><li>Define Frame. </li></ul>
Upcoming SlideShare
Loading in …5
×

M02 un10 p01

439 views
357 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
439
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

M02 un10 p01

  1. 1. Unit 10 – Frames Presentation 1 Web Programming
  2. 2. Revision <ul><li>What are the tags used to create a simple table? </li></ul><ul><li>How will you add a caption to a table? </li></ul><ul><li>What is the use of Cellpadding and Cellspacing attributes? </li></ul><ul><li>How will you set an image as the background of a cell? </li></ul>
  3. 3. Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Add Horizontal Frameset in your Web page </li></ul><ul><li>Add Vertical Frameset in your Web page </li></ul><ul><li>Add Mixed Frameset in your Web page </li></ul>
  4. 4. Frames <ul><li>A Frame is a rectangular area in a Web page. </li></ul><ul><li>A Web page can be divided into different rectangular areas called Frames. </li></ul>
  5. 5. Hands-On! <ul><li>Open the HTML file Nav_Frame.HTML in IE. </li></ul><ul><li>This HTML document illustrates the use of frames in a Web page. </li></ul>
  6. 6. Types of Frameset <ul><li>A Web page can be divided into different frames using Frameset. </li></ul><ul><li>Three types of Frameset. </li></ul><ul><ul><li>Horizontal Frameset </li></ul></ul><ul><ul><li>Vertical Frameset </li></ul></ul><ul><ul><li>Mixed Frameset. </li></ul></ul>
  7. 7. Horizontal Frameset <ul><li>A Web page can be divided horizontally into different frames known as Horizontal Frameset. </li></ul>
  8. 8. Hands-On! <ul><li>Open the HTML file Hor_Frame.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to insert horizontal frames in a Web page. </li></ul>
  9. 9. Vertical Frameset <ul><li>A Web page can be divided vertically into different frames known as Vertical Frameset. </li></ul>
  10. 10. Hands-On! <ul><li>Open the HTML file Ver_Frame.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to insert vertical frames in a Web page. </li></ul>
  11. 11. Mixed Frameset <ul><li>A Web page can be divided both horizontally and vertically into different frames known as Mixed Frameset. </li></ul>
  12. 12. Lab Exercise <ul><li>1. Open D10_1.html in Internet Explorer. </li></ul><ul><ul><li>Identify the frame container element which is used to create the frame in source code D10_1.html. </li></ul></ul><ul><ul><li>Locate the attribute which is used to specify the number of columns and size of columns in the frame. </li></ul></ul><ul><ul><li>Name the attribute which is used to remove the border from the frame. </li></ul></ul>
  13. 13. Lab Exercise Contd. <ul><ul><li>Identify the element which is used to assigns name of the frame. </li></ul></ul><ul><ul><li>Locate the attribute which contains the URL of the Web page to be displayed in the frame. </li></ul></ul>
  14. 14. Lab Exercise <ul><li>2. Open D10_2.html in Internet Explorer. </li></ul><ul><ul><ul><li>View the source code in the Notepad. </li></ul></ul></ul><ul><ul><ul><li>Set the row attribute instead of column attribute. </li></ul></ul></ul><ul><ul><ul><li>Add a border to the frame. </li></ul></ul></ul><ul><ul><ul><li>Add one more column in to the frame. </li></ul></ul></ul><ul><ul><ul><li>Set the frame column width to 25% 60% 15%. </li></ul></ul></ul>
  15. 15. Lab Exercise <ul><li>3. Open D10_3.html in Internet Explorer. </li></ul><ul><ul><li>Name the attribute which is used to set the frame colour in source code D10_3.html. </li></ul></ul><ul><ul><li>Locate the attribute which is used to increase the frame size. </li></ul></ul><ul><ul><li>Underline the attribute which is used scroll the frame. </li></ul></ul><ul><ul><li>Identify the attribute which is not allows to resize the frame. </li></ul></ul>
  16. 16. Lab Exercise <ul><li>4. Open D10_3.html in Internet Explorer. </li></ul><ul><ul><ul><li>View the source code in the Notepad. </li></ul></ul></ul><ul><ul><ul><li>Set the row attribute into the frameset </li></ul></ul></ul><ul><ul><ul><li>instead of column attribute. </li></ul></ul></ul><ul><ul><ul><li>Set the frame row width to 40% and 60% </li></ul></ul></ul><ul><ul><ul><li>Change the frame border colour to blue. </li></ul></ul></ul><ul><ul><ul><li>Increase the frame size to 7. </li></ul></ul></ul><ul><ul><ul><li>Set the frame scrolling to No. </li></ul></ul></ul>
  17. 17. Hands-On! <ul><li>Open the HTML file Mix_Frame.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to insert Mixed Frames in a Webpage. </li></ul>
  18. 18. Activity 2.10.1 <ul><ul><li>Create a Web page that shows the types of Frame as shown in Figure. </li></ul></ul><ul><ul><li>Save the HTML file as Activity1.html in C:HTMLUnit10Activity folder. </li></ul></ul>
  19. 19. Activity 2.10.2 <ul><ul><li>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:HTMLUnit 10Activity folder. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Save the HTML file as Activity2.html in C:HTMLUnit10Activity folder. </li></ul></ul>
  20. 20. Activity 2.10.2 Contd.
  21. 21. Activity 2.10.3 <ul><ul><li>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:HTMLUnit10Activity folder. </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>Save the HTML file as Activity3.html in C:HTMLUnit10Activity folder. </li></ul></ul>
  22. 22. Activity 2.10.3 Contd.
  23. 23. Activity 2.10.4 <ul><ul><li>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:HTMLUnit10Activity folder. </li></ul></ul><ul><ul><li>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:HTMLUnit10Activity folder. </li></ul></ul>
  24. 24. Activity 2.10.4 Contd. <ul><ul><li>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:HTMLUnit10Activity folder. </li></ul></ul>
  25. 25. Activity 2.10.4 Contd.
  26. 26. Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li>A Frame is a rectangular area in a browser window where a Web page can be displayed. </li></ul><ul><li>A Web page can be divided horizontally into different frames known as Horizontal Frameset. </li></ul><ul><li>The tag used to divide a Web page into frames is the <FRAMESET> tag. </li></ul>
  27. 27. Summary <ul><li>The <Frame> tag with Src attribute is used to display the HTML document inside the frame. </li></ul><ul><li>A Web page can be divided vertically into different frames known as Vertical Frameset. </li></ul><ul><li>A Web page can contain both horizontal frameset and vertical frameset known as Mixed Frameset . </li></ul>
  28. 28. Assignment <ul><li>Name the different types of Framesets. </li></ul><ul><li>Define Frame. </li></ul>

×