Second part of an introduction to HTML5 and related technologies

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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 1

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. 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. 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. 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. 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. 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. 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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 2

14. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 2
Ordered list

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. 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. 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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 3

21. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 3
Unordered list

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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Practice

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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Tables in General

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. 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. 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. 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. 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. 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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Practice Tables

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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Playing Videos

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. 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. 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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Playing Audio Files

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. 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. 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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Playing Audio

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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The <wbr> element

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. 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. 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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to create a narrow page?

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Final Exercise!

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. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale

78. Introduction to
HTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
I introduced HTML lists.

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. 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. 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. 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!