Successfully reported this slideshow.

Introduction to HTML5: Part II

1

Share

Loading in …3
×
1 of 82
1 of 82

Introduction to HTML5: Part II

1

Share

Download to read offline

Description

Second part of an introduction to HTML5 and related technologies

Transcript

  1. 1. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Introduction to HTML5: Part II Apostolos Syropoulos Xanthi, Greece asyropoulos@yahoo.com Introduction to HTML5 for members of the Erasmus+ founded project GAMES
  2. 2. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Presentation Outline 1 HTML Lists 2 HTML Tables 3 Video and Audio 4 Various Elements 5 Finale
  3. 3. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1
  4. 4. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists:
  5. 5. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered,
  6. 6. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and
  7. 7. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists.
  8. 8. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list
  9. 9. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul>
  10. 10. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul> Other styles include circle,
  11. 11. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul> Other styles include circle, square, and
  12. 12. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul> Other styles include circle, square, and none.
  13. 13. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2
  14. 14. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list
  15. 15. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol>
  16. 16. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker:
  17. 17. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker: type="1" for numbers (default, that is, you can ignore it!);
  18. 18. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker: type="1" for numbers (default, that is, you can ignore it!); type="A" or type="a" for uppercase or lowercase letters, respectively;
  19. 19. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker: type="1" for numbers (default, that is, you can ignore it!); type="A" or type="a" for uppercase or lowercase letters, respectively; type="I" or type="i" for uppercase or lowercase roman numerals, respectively.
  20. 20. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3
  21. 21. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3 Unordered list
  22. 22. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3 Unordered list <dl> <dt>Macarons</dt> <dd>A meringue-like cookie</dd> <dt>Opera cake</dt> <dd>An elegant gâteau</dd> </dl>
  23. 23. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3 Unordered list <dl> <dt>Macarons</dt> <dd>A meringue-like cookie</dd> <dt>Opera cake</dt> <dd>An elegant gâteau</dd> </dl>
  24. 24. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice
  25. 25. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Create an HTML file with that will contain the following list:
  26. 26. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Create an HTML file with that will contain the following list: <dl> <dt>Macarons</dt> <dd>A meringue-like cookie</dd> <dt>Opera cake</dt> <dd>An elegant gâteau</dd> <dt>Crème brûlée</dt> <dd>A delicious creme</dd> <dt>Poire belle Hélène</dt> <dd>A dessert made from pears</dd> <dt>Tarte Tatin</dt> <dd>Hotel Tatin signature dish</dd> </dl>
  27. 27. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General
  28. 28. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form.
  29. 29. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag.
  30. 30. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag.
  31. 31. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
  32. 32. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered.
  33. 33. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
  34. 34. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The <caption> tag defines a table caption.
  35. 35. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The <caption> tag defines a table caption. The <caption> tag must be inserted immediately after the <table> tag.
  36. 36. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables
  37. 37. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables Create an HTML file with that will contain the following table:
  38. 38. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables Create an HTML file with that will contain the following table: <table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
  39. 39. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables Create an HTML file with that will contain the following table: <table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Examine the result.
  40. 40. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos
  41. 41. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams.
  42. 42. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg.
  43. 43. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. Firefox supports all three formats.
  44. 44. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. Firefox supports all three formats. A simple example
  45. 45. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. Firefox supports all three formats. A simple example <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
  46. 46. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files
  47. 47. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams.
  48. 48. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg.
  49. 49. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg. Firefox supports all three formats.
  50. 50. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg. Firefox supports all three formats. A simple example
  51. 51. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg. Firefox supports all three formats. A simple example <audio controls> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </video>
  52. 52. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio
  53. 53. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Create an HTML file with that will contain the following markup:
  54. 54. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Create an HTML file with that will contain the following markup: <!DOCTYPE html> <html> <body> <audio controls> <source src="hyena.wav" type="audio/wav"> Audio element not supported. </audio> <p><strong>Note:</strong> No MP3 files!</p> </body> </html>
  55. 55. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Create an HTML file with that will contain the following markup: <!DOCTYPE html> <html> <body> <audio controls> <source src="hyena.wav" type="audio/wav"> Audio element not supported. </audio> <p><strong>Note:</strong> No MP3 files!</p> </body> </html>
  56. 56. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element
  57. 57. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text.
  58. 58. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word:
  59. 59. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word: δεσοξυριβο-<wbr>ζονουκλεϊ-<wbr>νικό
  60. 60. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word: δεσοξυριβο-<wbr>ζονουκλεϊ-<wbr>νικό I created a really narrow page to show the effect.
  61. 61. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word: δεσοξυριβο-<wbr>ζονουκλεϊ-<wbr>νικό I created a really narrow page to show the effect.
  62. 62. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page?
  63. 63. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page? A narrow page is useful sometimes! Use CSS to make one.
  64. 64. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page? A narrow page is useful sometimes! Use CSS to make one. </style> body { width: 250px; margin-left: auto; margin-right: auto; background-color: lightblue; } </style>
  65. 65. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page? A narrow page is useful sometimes! Use CSS to make one. </style> body { width: 250px; margin-left: auto; margin-right: auto; background-color: lightblue; } </style> Create a web page that is 180 px wide.
  66. 66. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document?
  67. 67. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document? We need to use the <address> element.
  68. 68. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document? We need to use the <address> element. <address> 28 Oktovriou Str, 366<br> GR-671&nbsp;31&nbsp;&nbsp;Xanthi GREECE-EU </address>
  69. 69. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document? We need to use the <address> element. <address> 28 Oktovriou Str, 366<br> GR-671&nbsp;31&nbsp;&nbsp;Xanthi GREECE-EU </address> Create a web page that contains your school’s mail address.
  70. 70. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document?
  71. 71. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced?
  72. 72. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced? For example,
  73. 73. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced? For example, Here is how we can do it:
  74. 74. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced? For example, Here is how we can do it: <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
  75. 75. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Final Exercise!
  76. 76. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Final Exercise! Create a simple web page about your school or your family.
  77. 77. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale
  78. 78. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists.
  79. 79. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables.
  80. 80. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables. I explained how one can embed video and/or sound in HTML pages.
  81. 81. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables. I explained how one can embed video and/or sound in HTML pages. I also presented some other interesting elements.
  82. 82. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables. I explained how one can embed video and/or sound in HTML pages. I also presented some other interesting elements. Thank you very much for your attention!

Description

Second part of an introduction to HTML5 and related technologies

Transcript

  1. 1. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Introduction to HTML5: Part II Apostolos Syropoulos Xanthi, Greece asyropoulos@yahoo.com Introduction to HTML5 for members of the Erasmus+ founded project GAMES
  2. 2. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Presentation Outline 1 HTML Lists 2 HTML Tables 3 Video and Audio 4 Various Elements 5 Finale
  3. 3. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1
  4. 4. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists:
  5. 5. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered,
  6. 6. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and
  7. 7. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists.
  8. 8. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list
  9. 9. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul>
  10. 10. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul> Other styles include circle,
  11. 11. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul> Other styles include circle, square, and
  12. 12. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 1 Three types of lists: unordered, ordered, and description lists. Unordered list <ul style="list-style-type:disc"> <li> éclair</li> <li> croissant</li> <li> kouign amann</li> </ul> Other styles include circle, square, and none.
  13. 13. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2
  14. 14. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list
  15. 15. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol>
  16. 16. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker:
  17. 17. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker: type="1" for numbers (default, that is, you can ignore it!);
  18. 18. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker: type="1" for numbers (default, that is, you can ignore it!); type="A" or type="a" for uppercase or lowercase letters, respectively;
  19. 19. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 2 Ordered list <ol type="1"> <li> Paris-Brest</li> <li> religieuse</li> <li> mille-feuille</li> </ol> the type attribute defines the type of the item marker: type="1" for numbers (default, that is, you can ignore it!); type="A" or type="a" for uppercase or lowercase letters, respectively; type="I" or type="i" for uppercase or lowercase roman numerals, respectively.
  20. 20. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3
  21. 21. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3 Unordered list
  22. 22. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3 Unordered list <dl> <dt>Macarons</dt> <dd>A meringue-like cookie</dd> <dt>Opera cake</dt> <dd>An elegant gâteau</dd> </dl>
  23. 23. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Lists: Part 3 Unordered list <dl> <dt>Macarons</dt> <dd>A meringue-like cookie</dd> <dt>Opera cake</dt> <dd>An elegant gâteau</dd> </dl>
  24. 24. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice
  25. 25. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Create an HTML file with that will contain the following list:
  26. 26. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Create an HTML file with that will contain the following list: <dl> <dt>Macarons</dt> <dd>A meringue-like cookie</dd> <dt>Opera cake</dt> <dd>An elegant gâteau</dd> <dt>Crème brûlée</dt> <dd>A delicious creme</dd> <dt>Poire belle Hélène</dt> <dd>A dessert made from pears</dd> <dt>Tarte Tatin</dt> <dd>Hotel Tatin signature dish</dd> </dl>
  27. 27. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General
  28. 28. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form.
  29. 29. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag.
  30. 30. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag.
  31. 31. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
  32. 32. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered.
  33. 33. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
  34. 34. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The <caption> tag defines a table caption.
  35. 35. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tables in General Tables are used to display information in tabular form. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The <caption> tag defines a table caption. The <caption> tag must be inserted immediately after the <table> tag.
  36. 36. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables
  37. 37. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables Create an HTML file with that will contain the following table:
  38. 38. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables Create an HTML file with that will contain the following table: <table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
  39. 39. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Practice Tables Create an HTML file with that will contain the following table: <table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Examine the result.
  40. 40. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos
  41. 41. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams.
  42. 42. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg.
  43. 43. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. Firefox supports all three formats.
  44. 44. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. Firefox supports all three formats. A simple example
  45. 45. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Videos The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. Firefox supports all three formats. A simple example <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
  46. 46. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files
  47. 47. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams.
  48. 48. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg.
  49. 49. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg. Firefox supports all three formats.
  50. 50. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg. Firefox supports all three formats. A simple example
  51. 51. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Files The <audio> tag specifies sound, such as music or other audio streams. Currently, there are 3 supported video formats for the <audio> element: MP3, WAV, and Ogg. Firefox supports all three formats. A simple example <audio controls> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </video>
  52. 52. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio
  53. 53. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Create an HTML file with that will contain the following markup:
  54. 54. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Create an HTML file with that will contain the following markup: <!DOCTYPE html> <html> <body> <audio controls> <source src="hyena.wav" type="audio/wav"> Audio element not supported. </audio> <p><strong>Note:</strong> No MP3 files!</p> </body> </html>
  55. 55. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Playing Audio Create an HTML file with that will contain the following markup: <!DOCTYPE html> <html> <body> <audio controls> <source src="hyena.wav" type="audio/wav"> Audio element not supported. </audio> <p><strong>Note:</strong> No MP3 files!</p> </body> </html>
  56. 56. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element
  57. 57. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text.
  58. 58. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word:
  59. 59. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word: δεσοξυριβο-<wbr>ζονουκλεϊ-<wbr>νικό
  60. 60. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word: δεσοξυριβο-<wbr>ζονουκλεϊ-<wbr>νικό I created a really narrow page to show the effect.
  61. 61. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <wbr> element The <wbr> element is used to hyphenate text. Here is how we should hyphenate a long word: δεσοξυριβο-<wbr>ζονουκλεϊ-<wbr>νικό I created a really narrow page to show the effect.
  62. 62. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page?
  63. 63. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page? A narrow page is useful sometimes! Use CSS to make one.
  64. 64. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page? A narrow page is useful sometimes! Use CSS to make one. </style> body { width: 250px; margin-left: auto; margin-right: auto; background-color: lightblue; } </style>
  65. 65. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to create a narrow page? A narrow page is useful sometimes! Use CSS to make one. </style> body { width: 250px; margin-left: auto; margin-right: auto; background-color: lightblue; } </style> Create a web page that is 180 px wide.
  66. 66. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document?
  67. 67. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document? We need to use the <address> element.
  68. 68. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document? We need to use the <address> element. <address> 28 Oktovriou Str, 366<br> GR-671&nbsp;31&nbsp;&nbsp;Xanthi GREECE-EU </address>
  69. 69. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How do I write an address in a HTML document? We need to use the <address> element. <address> 28 Oktovriou Str, 366<br> GR-671&nbsp;31&nbsp;&nbsp;Xanthi GREECE-EU </address> Create a web page that contains your school’s mail address.
  70. 70. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document?
  71. 71. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced?
  72. 72. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced? For example,
  73. 73. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced? For example, Here is how we can do it:
  74. 74. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to semantically delete text from an HTML document? The question is: How to make crystal clear that some text is deleted and possibly replaced? For example, Here is how we can do it: <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
  75. 75. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Final Exercise!
  76. 76. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Final Exercise! Create a simple web page about your school or your family.
  77. 77. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale
  78. 78. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists.
  79. 79. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables.
  80. 80. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables. I explained how one can embed video and/or sound in HTML pages.
  81. 81. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables. I explained how one can embed video and/or sound in HTML pages. I also presented some other interesting elements.
  82. 82. Introduction to HTML5: Part II Syropoulos HTML Lists HTML Tables Video and Audio Various Elements Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I introduced HTML lists. We talked about HTML tables. I explained how one can embed video and/or sound in HTML pages. I also presented some other interesting elements. Thank you very much for your attention!

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×