M02 un10 p01
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

M02 un10 p01

on

  • 459 views

 

Statistics

Views

Total Views
459
Views on SlideShare
459
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

M02 un10 p01 Presentation Transcript

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