Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Web engineering - An overview about HTML

395 Aufrufe

Veröffentlicht am

Basic of HTML

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×