introduction to html5: part ii
TRANSCRIPT
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Introduction to HTML5: Part II
Apostolos Syropoulos
Xanthi, [email protected]
Introduction to HTML5 for members of theErasmus+ founded project GAMES
Introduction toHTML5: 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
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: 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>
Ordered list
<ol type="1"><li> Paris-Brest</li><li> religieuse</li><li> mille-feuille</li>
</ol>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 2
Unordered list
<dl><dt>Macarons</dt><dd>A meringue-like cookie</dd><dt>Opera cake</dt><dd>An elegant gâteau</dd>
</dl>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 2
Unordered list
<dl><dt>Macarons</dt><dd>A meringue-like cookie</dd><dt>Opera cake</dt><dd>An elegant gâteau</dd>
</dl>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 2
Unordered list
<dl><dt>Macarons</dt><dd>A meringue-like cookie</dd><dt>Opera cake</dt><dd>An elegant gâteau</dd>
</dl>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Lists: Part 2
Unordered list
<dl><dt>Macarons</dt><dd>A meringue-like cookie</dd><dt>Opera cake</dt><dd>An elegant gâteau</dd>
</dl>
Introduction toHTML5: 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>
Introduction toHTML5: 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>
Introduction toHTML5: 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>
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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 othervideo 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>
Introduction toHTML5: 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 othervideo 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>
Introduction toHTML5: 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 othervideo 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>
Introduction toHTML5: 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 othervideo 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>
Introduction toHTML5: 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 othervideo 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>
Introduction toHTML5: 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 othervideo 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>
Introduction toHTML5: 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 audiostreams.
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>
Introduction toHTML5: 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 audiostreams.
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>
Introduction toHTML5: 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 audiostreams.
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>
Introduction toHTML5: 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 audiostreams.
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>
Introduction toHTML5: 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 audiostreams.
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>
Introduction toHTML5: 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 audiostreams.
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>
Introduction toHTML5: 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>
Introduction toHTML5: 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>
Introduction toHTML5: 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>
Introduction toHTML5: 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>
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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.
Introduction toHTML5: 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 31 XanthiGREECE-EU
</address>
Create a web page that contains your school’s mail address.
Introduction toHTML5: 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 31 XanthiGREECE-EU
</address>
Create a web page that contains your school’s mail address.
Introduction toHTML5: 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 31 XanthiGREECE-EU
</address>
Create a web page that contains your school’s mail address.
Introduction toHTML5: 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 31 XanthiGREECE-EU
</address>
Create a web page that contains your school’s mail address.
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to semantically delete text from an HTMLdocument?
The question is: How to make crystal clear that some text isdeleted and possibly replaced?
For example,
Here is how we can do it:
<p>My favorite color is <del>blue</del><ins>red</ins>!</p>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to semantically delete text from an HTMLdocument?
The question is: How to make crystal clear that some text isdeleted and possibly replaced?
For example,
Here is how we can do it:
<p>My favorite color is <del>blue</del><ins>red</ins>!</p>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to semantically delete text from an HTMLdocument?
The question is: How to make crystal clear that some text isdeleted and possibly replaced?
For example,
Here is how we can do it:
<p>My favorite color is <del>blue</del><ins>red</ins>!</p>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to semantically delete text from an HTMLdocument?
The question is: How to make crystal clear that some text isdeleted and possibly replaced?
For example,
Here is how we can do it:
<p>My favorite color is <del>blue</del><ins>red</ins>!</p>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to semantically delete text from an HTMLdocument?
The question is: How to make crystal clear that some text isdeleted and possibly replaced?
For example,
Here is how we can do it:
<p>My favorite color is <del>blue</del><ins>red</ins>!</p>
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Final Exercise!
Create a simple web pageabout your school or yourfamily.
Introduction toHTML5: Part II
Syropoulos
HTML Lists
HTML Tables
Video and Audio
Various Elements
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Final Exercise!
Create a simple web pageabout your school or yourfamily.
Introduction toHTML5: 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 HTMLpages.
I also presented some other interesting elements.
Thank you very much for your attention!
Introduction toHTML5: 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 HTMLpages.
I also presented some other interesting elements.
Thank you very much for your attention!
Introduction toHTML5: 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 HTMLpages.
I also presented some other interesting elements.
Thank you very much for your attention!
Introduction toHTML5: 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 HTMLpages.
I also presented some other interesting elements.
Thank you very much for your attention!
Introduction toHTML5: 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 HTMLpages.
I also presented some other interesting elements.
Thank you very much for your attention!
Introduction toHTML5: 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 HTMLpages.
I also presented some other interesting elements.
Thank you very much for your attention!