M02 un09 p01

415 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
415
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

M02 un09 p01

  1. 1. Unit 9 – Tables Presentation 1 Web Programming
  2. 2. Revision <ul><li>Write how to add music to a Web page. </li></ul><ul><li>Name the attributes of the <EMBED> tag. </li></ul><ul><li>Write how to add movie to a Web page. </li></ul><ul><li>Write how to add animation to a Web page. </li></ul>
  3. 3. Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Insert tables into your Web page </li></ul><ul><li>Add caption, heading and border to your table </li></ul><ul><li>Modify the rows and columns as per the need </li></ul>
  4. 4. Tables <ul><li>Tables can be added to Web page. </li></ul><ul><li>HTML provides tags to add tables into a Web page easily. </li></ul>
  5. 5. Hands-On! <ul><li>Open the HTML file Table.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to insert table in a Webpage. </li></ul>
  6. 6. Creating Table <ul><li>Table can be created using three tags. </li></ul><ul><li><TABLE> tag is used to create table. </li></ul><ul><li><TR> tag is used to insert a row in a table. </li></ul><ul><li><TD> tag is used to insert a cell in the row. </li></ul>
  7. 7. Hands-On! <ul><li>Open the HTML file Table1.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to creates a Web page with simple table. </li></ul>
  8. 8. Lab Exercise <ul><li>1. Open D9_1.html in Internet Explorer. </li></ul><ul><ul><li>Name the tag which is used to create the table in source code D9_1.html. </li></ul></ul><ul><ul><li>Identify the tag which is used to display the comment with a table. </li></ul></ul><ul><ul><li>Name the tag which is used to add a row into the table. </li></ul></ul><ul><ul><li>Identify the tag which is used to add a data into the table. </li></ul></ul>
  9. 9. Lab Exercise Contd. <ul><ul><li>e. Locate the attribute which is used to set border for the table. </li></ul></ul><ul><ul><li>f. Name the tag which is used to add a cell header. </li></ul></ul>
  10. 10. Lab Exercise <ul><li>2. Open D9_1.html in Internet Explorer. </li></ul><ul><ul><li>View the source code in the Notepad. </li></ul></ul><ul><ul><li>Change the border size to 5. </li></ul></ul><ul><ul><li>Add one more row into the table. </li></ul></ul><ul><ul><li>Add a data into the new row. </li></ul></ul>
  11. 11. Lab Exercise <ul><li>Open States.html that you have created under the folder in your name in C: Modify the program and display the output as shown in the following figure using <TABLE> tag. </li></ul>
  12. 12. Lab Exercise Contd.
  13. 13. Heading Tag <ul><li><TH> tag is used to display the heading. </li></ul><ul><li><TH> stands for Table Heading. </li></ul>
  14. 14. Caption and Border <ul><li><CAPTION> tag is used to add a caption to a table. </li></ul><ul><li>Border attribute of <TABLE> tag is used to add borders </li></ul>
  15. 15. Hands-On! <ul><li>Open the HTML file Table2.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to add heading, caption and border to the table. </li></ul>
  16. 16. Lab Exercise <ul><li>4. Open D9_2.html in Internet Explorer. </li></ul><ul><ul><ul><li>List out the attributes are in <TABLE> tag. </li></ul></ul></ul><ul><ul><ul><li>Name the attribute which is used to set the width of the table. </li></ul></ul></ul><ul><ul><ul><li>Locate the attribute which is used to display the text after the table. </li></ul></ul></ul>
  17. 17. Lab Exercise <ul><ul><li>d. Identify the attribute which is used to change the background colour of the table in source code D9_2.html. </li></ul></ul><ul><ul><li>e. Name the attribute which is used to change the border colour of the table in source code D9_2.html. </li></ul></ul>
  18. 18. Lab Exercise <ul><li>5. Open D9_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 caption attribute alignment to top. </li></ul></ul></ul><ul><ul><ul><li>Change the background colour of the table </li></ul></ul></ul><ul><ul><ul><li>to yellow. </li></ul></ul></ul><ul><ul><ul><li>d. Change the border colour of the table to </li></ul></ul></ul><ul><ul><ul><li>maroon. </li></ul></ul></ul>
  19. 19. Activity 2.9.1 <ul><ul><li>Create a Web page that explains how to add multimedia objects in a Web page as shown in Figure. </li></ul></ul><ul><ul><li>Save the HTML file as Activity1.html in C:HTMLUnit9Activity folder. </li></ul></ul>
  20. 20. Activity 2.9.1 Contd.
  21. 21. Rows and Columns <ul><ul><li>Rowspan and Colspan attribute. </li></ul></ul><ul><ul><li>Rowspan joins two or more cells in a column into a single cell. </li></ul></ul><ul><ul><li>Colspan joins two or more cells in a row into a single cell . </li></ul></ul>
  22. 22. Hands-On! <ul><li>Open the HTML file Table3.HTML in IE. </li></ul><ul><li>This HTML document illustrates how to adding the heading COUNTRIES that span from second column of fourth column. </li></ul>
  23. 23. Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li>A simple table can be created using three tags namely <TABLE> , <TR> and <TD> . </li></ul><ul><li>The <TH> tag is used to display the headings in a table. </li></ul><ul><li>The <CAPTION> tag is used to add a caption to a table. </li></ul>
  24. 24. Summary <ul><li>Two or more cells can be joined together using Rowspan and Colspan attributes of the <TH> and <TD> tags. </li></ul><ul><li>The height of the cells in a row can be set using the Height attribute of the <TH> or <TD> tag. </li></ul>
  25. 25. Assignment <ul><li>Name that tags that are used to create a simple table? </li></ul><ul><li>How will you add a caption to a table? </li></ul>

×