Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 2. <ul><li>< img > tag has enough attributes to handle images on a web page </li></ul><ul><li>< img src=“boat.gif” alt=“Big Boat” border=“2” width=“30” height=“50” align=“bottom” hspace=“5” vspace=“5” usemap=“map1” /> </li></ul><ul><li>Images can be used as hyperlinks </li></ul><ul><ul><li>Replace the visible part of the tag by the image tag </li></ul></ul><ul><li><a href= > </li></ul><ul><li><img src=“NUImage.jpg> </li></ul><ul><li></a> </li></ul>
  2. 3. <ul><li>The <area> tag is used to define one sub-image shape at a time (origin top left) </li></ul>< img src=&quot;foodMenu.jpg&quot; usemap=&quot;#menuMap&quot; /> < map name=&quot;menuMap&quot;> < area href=&quot;; alt=&quot;Appetizers&quot; shape=&quot;rect&quot; coords=&quot;10,25,90,60&quot; /> < area href=&quot;; alt=&quot;Meals” shape=&quot;poly” coords=&quot;100,60,210,60,150,10&quot; /> < area href=&quot;; alt=&quot;Pizza&quot; shape=&quot;circle&quot; coords=&quot;252,40,35&quot; /> </ map > Restaurant Image Map Appetiser as rectangle Meals as triangle Pizza as circle
  3. 4. <ul><li>A table is defined as a region that has rows and columns of small rectangles (cells) that are arranged in a certain way that make up the table layout </li></ul><ul><li>XHTML provides many variables that allow web authors to control table layout </li></ul><ul><li>Table variables may be grouped into 2 categories: </li></ul><ul><ul><li>Non-cell variables </li></ul></ul><ul><ul><li>Cell variables </li></ul></ul>
  4. 5. <ul><li>Non-cell variables control the properties and structure of the table: </li></ul><ul><ul><li>caption is the title of the table </li></ul></ul><ul><ul><li>summary provides a longer description </li></ul></ul><ul><ul><li>border is the table’s outside border </li></ul></ul><ul><ul><li>header is the first row of the table </li></ul></ul><ul><ul><li>width is total width of table </li></ul></ul><ul><ul><li>height is total height of table </li></ul></ul>
  5. 6. Height Heading 1 Heading 2 Heading 3 Cell(1,1) Cell(1,2) Cell(1,3) Cell(2,1) Cell(2,2) Cell(2,3) Cell(3,1) Cell(3,2) Cell(3,3) Cell(4,1) Cell(4,2) Cell(4,3) Cell(5,3) Cell(5,2) Cell(6,3) Cell(6,2) Cell(6,1) Cell(5,1) Width Border Rows Columns
  6. 7. <ul><li>Cells are the basic units that make up the table </li></ul><ul><li>The horizontal and vertical lines that separate the cells are known as rulings/rules </li></ul><ul><li>Cell variables control the properties and structure of individual cells: </li></ul><ul><ul><li>Row span </li></ul></ul><ul><ul><li>Column span </li></ul></ul><ul><ul><li>Padding </li></ul></ul><ul><ul><li>Spacing </li></ul></ul><ul><ul><li>Alignment </li></ul></ul>
  7. 8. <ul><li>Cell spacing describes the amount of the horizontal and vertical spacing between cells </li></ul><ul><li>Specifying cell padding is equivalent to specifying top, bottom, left and right margins inside the cell </li></ul><ul><li>Cell content can be aligned within each cell </li></ul>
  8. 9. <ul><li>There are 5 important tags: </li></ul><ul><ul><li><table> - Encloses all other table tags </li></ul></ul><ul><ul><ul><li>Attributes: summary, width, height, border, align, rules, cell spacing and cell padding </li></ul></ul></ul><ul><ul><li><caption> - Assigns a title to the table </li></ul></ul><ul><ul><ul><li>Attributes: align </li></ul></ul></ul><ul><ul><li><tr> - Creates a table row </li></ul></ul><ul><ul><ul><li>Attributes: align </li></ul></ul></ul><ul><ul><li><th> - Creates a table header (row or column) </li></ul></ul><ul><ul><ul><li>Attributes: abbr, headers, rowspan, colspan, nowrap, align </li></ul></ul></ul><ul><ul><li><td> - Creates table data (cells) </li></ul></ul><ul><ul><ul><li>Attributes: abbr, headers, rowspan, colspan, nowrap, align, valign </li></ul></ul></ul>
  9. 10. <table border=“2” summary=&quot;This is a Sample Table&quot; width=&quot;400&quot; height=&quot;200&quot;> <caption align=&quot;center&quot;>This is a Sample Table</caption> <tr align=&quot;center&quot;> <th>1st Heading</th> <td bgcolor=&quot;yellow&quot;>Cell 1</td> <td>Cell 2</td> </tr> <tr align=&quot;center&quot;> <th>Second</th> <td bgcolor=&quot;yellow&quot;>Cell 3</td> <td>Cell 4</td> </tr> <tr align=&quot;center&quot;> <th>Last One</th> <td bgcolor=&quot;yellow&quot;>Cell 5</td> <td>Cell 6</td> </tr> </table> This is a Sample Table 1 st heading Cell 1 Cell 2 Second Cell 3 Cell 4 Last One Cell 5 Cell 6
  10. 11. <ul><li>Table nesting is used to control formatting </li></ul><ul><li>Code is quite complex </li></ul><ul><li>A table is nested by having a table inside another table </li></ul><ul><li>Tables can be nested by using a <table> tag after <td> </li></ul><ul><li>Nesting tables may produce awkward results </li></ul><ul><ul><li>Table cell sizes may vary greatly </li></ul></ul><ul><ul><li>Location of empty cells may not be acceptable to web authors </li></ul></ul>
  11. 12. <ul><li><table align=&quot;center&quot; border=&quot;4&quot; bgcolor=&quot;#FFFF00&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 1</td> </li></ul><ul><li><td>Nested Tables </li></ul><ul><li><table align=&quot;center&quot;> </li></ul><ul><li> <tr> </li></ul><ul><li> <td>T21</td> </li></ul><ul><li> <td>T22</td> <td>T23</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></td> </li></ul><ul><li><td align=&quot;center&quot;>Cell 3</td> </li></ul><ul><li><td valign=&quot;bottom&quot;>Cell 4</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 5</td> </li></ul><ul><li><td>Cell 6</td> </li></ul><ul><li><td>Cell 7</td> </li></ul><ul><li><td>Cell 8</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Cell 9</td> </li></ul><ul><li><td>Cell 10</td> </li></ul><ul><li><td>Cell 11</td> </li></ul><ul><li><td>Cell 12</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  12. 13. <ul><li>Formatting web pages using tables has the same idea as that of nesting tables </li></ul><ul><ul><li>A web page layout is divided into regions </li></ul></ul><ul><ul><li>Then a table or a cell is substituted for each region </li></ul></ul>
  13. 15. <ul><li>Tables </li></ul><ul><ul><li>Tables organize and structure web pages </li></ul></ul><ul><ul><li>There are table-level and cell-level variables </li></ul></ul><ul><ul><li>There are 5 important tags to use a table </li></ul></ul><ul><ul><ul><li>table </li></ul></ul></ul><ul><ul><ul><li>caption </li></ul></ul></ul><ul><ul><ul><li>tr </li></ul></ul></ul><ul><ul><ul><li>th </li></ul></ul></ul><ul><ul><ul><li>td </li></ul></ul></ul><ul><ul><li>Tables can be nested for better structure </li></ul></ul><ul><ul><li>Table are extensively used for formatting entire web pages </li></ul></ul>
  14. 16. <ul><li>Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference , Hungry Minds Inc,U.S. </li></ul><ul><li>Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS , New Riders. </li></ul><ul><li>Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.