Monday, 20 January 2014

Labels: , ,

A Complete HTML Guide And Tutorial For Beginner And Newbie Part 4

Posted by Unknown at 01:45


IMAGE TAG

  • The img tag is used to put an image in an HTML document and it looks like this:
  1. <img src="http://www.blogwritter.com/badge1.gif" width="120" height="90" alt="blogwritter">
  • The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as “ash.jpg” in a directory called “images” then the code would be <img src="images/ash.jpg"...
  • The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
  • The alt attribute is the alternative description. This is an accessibility consideration, providing meaningful information for users who are unable to see the image.
  • Note that, like the br tag, because the img element does not enclose any content, no closing tag is required.

LIST TAG

  • The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.
  1. <ul> 
  2. <li>To learn HTML</li> 
  3. <li> To show off 
  4. <ol> 
  5. <li>To my boss</li> 
  6. <li>To my friends</li> 
  7. <li>To my cat</li> 
  8. <li>To the little talking duck in my brain</li> 
  9. </ol> 
  10. </li> 
  11. <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li> 
  12. </ul>

TABLE TAG

  • Tables are used when you need to show "tabular data".
  • The table element defines the table.
  • The tr element defines a table row.
  • The td element defines a data cell. These must be enclosed in tr tags, as shown above.
  1. <table> 
  2. <tr> 
  3. <td>Cell 1</td> 
  4. <td>Cell 2</td> 
  5. </tr> 
  6. <tr> 
  7. <td>Cell 3</td> 
  8. <td>Cell 4</td> 
  9. </tr> 
  10. </table>
  • The two attributes colspan and rowspan are used when you want to create fancy tables. Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:
  1. <table border="1"> 
  2. <tr> 
  3. <td colspan="2">Cell 1</td> 
  4. <td>Cell 2</td> 
  5. </tr> 
  6. <tr> 
  7. <td>Cell 3</td> 
  8. <td>Cell 4</td> 
  9. <td>Cell 5</td> 
  10. </tr> 
  11. </table>

  • rowspan specifies how many rows a cell should span over
  1. <table border="1"> 
  2. <tr> 
  3. <td rowspan="3">Cell 1</td> 
  4. <td>Cell 2</td> 
  5. </tr> 
  6. <tr> 
  7. <td>Cell 3</td> 
  8. </tr> 
  9. <tr> 
  10. <td>Cell 4</td> 
  11. </tr> 
  12. </table>

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )