1 / 35

Adding images to web page Using images as links Image map Adding audio and video to web page

Adding images to web page Using images as links Image map Adding audio and video to web page. How to create tables Page lay-out using tables. Tables display information in rows and columns

may-saunders
Download Presentation

Adding images to web page Using images as links Image map Adding audio and video to web page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  2. Adding images to web page • Using images as links • Image map • Adding audio and video to web page Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  3. How to create tables • Page lay-out using tables Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  4. Tables display information in rows and columns • Tables are commonly used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports etc. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  5. In HTML <table> tag is used to start a table while </table> tag indicates the end of the table <table> Table Structure </table> • <tr> tag starts a row of the table and </tr> ends the row • <td> is used to create a cell inside the row while </td> ends the cell Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  6. The contents of the cell are written between <td> and </td> tags • <th> tag is used to declare the cell of the heading row of the table Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  7. <table border=“1”> <tr> <td> Name </td> <td> Registration No. </td> </tr> <tr> <td>Ali</td> <td>FA13-BCS-001</td> </tr> </table> Registration No. Name Ali FA13-BCS-001 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  8. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  9. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  10. Table level attributes • Row level attributes • Cell level attributes Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  11. TheBorder Attribute: Indicates the presence of the border around the table • <table border=“1”> • The align Attribute: • <table align= “center, right or left”> • The bgcolor Attribute: sets the background color of the table • <table bgcolor=“gray”> • The background Attribute: sets the specified image at the background of the table • <table background=“image-title”> Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  12. The height and width Attributes: • The cellpaddingAttribute: The cellpadding attribute is used to create a gap between the edges of a cell and its contents • <table cellpadding=“50”> • The cellspacing Attribute: The cellspacingattribute is used to create a space between the borders of each cell Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  13. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  14. cellspacing cellpadding Height Width Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  15. The alignAttribute: • <tr align=“center,rightor left”> • ThebgcolorAttribute: • <trbgcolor=“gray”> • Thebackground Attribute: • <trbackground=“image-name”> • The height and width Attributes: • <tr height=“20” widht=“20”> • The valign Attributes: • <trvalign=“top, middle or bottom”> Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  16. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  17. Vertical Align Row Height Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  18. The alignAttribute: • <td align=“center,rightor left”> • The bgcolorAttribute: • The valign Attributes: • The rowspanAttributes: used when a cell should span across more than one rows • The colspan Attribute: used when a cell should span across more than one column Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  19. <table border=“1”> <tr> <td rowspan=“2”>Name</td> <td colspan=“2”>Subjects</td> </tr> <tr> <td >OOP</td> <td >DB</td> </tr> <tr> <td >ALi</td> <td >75</td> <td >80</td> </tr> </table> Name Subjects OOP DB ALi 75 80 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  20. <caption> tag is used to add a caption of the table • We usually add caption before the first row of the table Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  21. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  22. Caption Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  23. We can use tables to define the structure of the web page Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  24. Header Links Body Footer Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  25. Header Footer Body and links Example: Step 1 (Structure of the page) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  26. Example: Step 1 (Structure of the page) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  27. Example: Step 2 (Header section) Adding Logo Title Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  28. Example: Step 2 (Header section) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  29. Links table Example: Step 3 (Links section) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  30. Example: Step 3 (Links section) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  31. Example: Step 4 (body section) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  32. Footer Example: Step 5 (footer section) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  33. Example: Step 5 (footer section) Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  34. Creating tables in HTML • Table attributes • Page lay-out using tables Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.

  35. References • Chapter 4, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.

More Related