Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web engineering - An overview about HTML

397 views

Published on

Basic of HTML

Published in: Education
  • Be the first to comment

  • Be the first to like this

Web engineering - An overview about HTML

  1. 1. Web Engineering An Overview about HTML Lecture 03 University of Lahore 1
  2. 2. Block and Inline elements • Block elements contain an entire large region of content. • Examples: paragraphs, lists, table cells • Inline elements affect a small amount of content. Must be nested inside a block element. • Examples: bold text, images, SPAN
  3. 3. Example of Block
  4. 4. Ordered List • HTML provide several tags for displaying list. • <ol type=“a”> <li> One </li> <li> Two </li> <li> Three </li> </ol> • type = “a”, “1”, “A”, “i”, “I” • start = “25”
  5. 5. Unordered List • HTML provide several tags for displaying list. • <ul style=“list-style-type: disc;”> <li> One </li> <li> Two </li> <li> Three </li> </ul> • Type = “disc”, “square”, “circle”, “decimal”, “Iower-alpha”, “katakana”, “armenian”, “hiragana”
  6. 6. Nested Unordered List • Example • <ul> <li> Four </li> <li> Five <ul> <li> Four </li> <li> Five </li> <li> Six </li> </ul> </li> <li> Six </li> </ul>
  7. 7. Nested Unordered List • Example • <ol> <li> One </li> <li> Two <ol> <li> One </li> <li> Two </li> <li> Three </li> </ol> </li> <li> Three </li> </ol>
  8. 8. EXAMPLE • <ol> <li> One </li> <li> Two <ol start=“5”> <li> One </li> <li> Two <ol type=“i” start=“7”> <li> One </li> <li> Two </li> <li> Three </li> </ol> </li> <li> Three </li> </ol> </li> <li> Three </li> </ol> 8
  9. 9. Images • Images are major part of websites. • Example: <body> <h1> HTML Image </h1> <img src=“images/sciss.png” width=“240” height=“240” alt=“Picture of scissors” title=“Running with these is not recommended.” /> </body> 9
  10. 10. Link on a Images <a href=“index.html” target=“_blank”><img src=“images/image1.jpg” width=“250” height=“250” alt=“alternative text” /></a> 10
  11. 11. 11 <TABLE> Table (made up of rows) <TR> Row (made up of data cells) <TH> Heading Data Cell (Can contain paragraphs, images, lists, forms, tables) <TD> Data Cell (Can contain paragraphs, images, lists, forms, tables)
  12. 12. TABLES • Tables are very useful feature in HTML. • Example: <h1>HTML Tables</h1> <table> <caption>My Favorite Albums</caption> <tr> <th> Title </th> <th> Artist </th> <th> Comment </th> </tr> <tr> <td> Electric Lady Land </td> <td> Jimi Hendrix </td> <td> Revolutionary </td> </tr> </table> 12
  13. 13. <tbody> <tr> <td></td> … </tr> <tr> <td></td> … </tr> </tbody> </table> 13
  14. 14. TABLE Attributes • CELLPADING – Determines the distance between the border of a cell and the contents of the cell – Example: <TABLE CELLPADDING = “3”> • CELLSPACING – Determines the empty spacing between the borders of two adjacent cells – Example: <TABLE CELLSPACING = “1”> 14
  15. 15. <TH> & <TD> Attributes • COLSPAN – No. of rows the current cell should extend itself downward – Example: <TD COLSPAN = “2”> • ROWSPAN – The number of columns the current cell should extend itself – Example: <TD ROWSPAN = “5”> 15
  16. 16. 16 Year Quarter Expenses Income Quetta Dubai Quetta Dubai 2001 1 1,900 8,650 9,000 7,780 2 2,230 8,650 8,500 8,670 3 4,000 8,650 9,900 9,870 4 2,200 8,650 9,800 9,900 2002 1 7,780 8,650 7,780 9,000 2 8,670 8,650 8,670 8,500 3 9,870 8,650 9,870 9,900 4 9,900 8,650 9,900 9,800
  17. 17. EMBEDDING AUDIO • HTML5 provides the simple powerful feature of adding audio files on your web page. • Example: <p> Here’s a song: </p> <audio id=“audio” controls autoplay loop> <source src=“media/song.m4a” type=“audio/x-acc” /> <source src=“media/song.mp3” type=“audio/mpeg” /> <source src=“media/song.ogg” type=“audio/ogg” /> </audio> 17
  18. 18. 18
  19. 19. EMBEDDING VIDEO • HTML5 provides the simple powerful feature of embedding video files on your web page. • Example: <p> Here’s a song: </p> <video id=“video” widht=“860” height=“480” controls autoplay loop> <source src=“media/video.m4v” type=“video/mp4” /> <source src=“media/video.webm” type=“video/webm” /> <source src=“media/video.ogg” type=“video/ogg” /> </video> 19

×