Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Web engineering - An overview about HTML

386 vues

Publié le

Basic of HTML

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×