Chapitre 3

Lien hypertexte, Tableau, Image,

Vidé o et Audio en HTML 5
1. Les liens hypertextes
• Lien externe : lien vers un autre site.
• Lien interne à un site : lien vers une autre page du même site.
• Lien interne à une page appelé aussi ancre : lien vers un autre endroit de la
même page.

1. 1. Lien externe
<a href="http://www.google.com"> Lien vers Google </a>

1. 2. Lien interne à un site

<h1>Liste des chapitres</h1>

<a href="Cours/Chapitre1.html">Chapitre 1</a><br>

<a href="Cours/Chapitre2.html">Chapitre 2</a>

<h1>Liste des exercices</h1>

<a href="Exercices/Exercice1.html">Exercice 1</a><br>

<a href="Exercices/Exercice2.html">Exercice 2</a>

Lien relatif
<a href="../index.html"> Retour à la page d'accueil</a>
Lien absolu
<a href="/D:/site/index.html"> Retour à la page d'accueil</a>

1. 3. Lien interne à une page (ancre)

Dans la page Exercice1.html :
<h1 id="solex1">Solution</h1>

Ensuite, il suffit de créer un lien Voir la solution dans la page Exercice1.html,

mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre :
<a href="#solex1">Voir la solution</a>

L'attribut id sert à donner un nom « unique » à une balise, pour s'en servir de
repère.

1
 1. 4. Remarques pratiques pour les liens

a. Un lien qui affiche une infobulle au survol

<a href="http://www.google.com" title="Google"> Lien vers Google
</a>

b. Un lien qui ouvre une nouvelle fenêtre

<a href="http://www.google.com" target="_blank"> Lien google </a>

c. Un lien pour envoyer un e-mail

<a href="mailto:exemple@gmail.com"> Contact </a>

d. Un lien pour télécharger un fichier

<a href="document.rar">Télécharger ici</a>

2. Les tableaux
<table border="1">
<caption>Première année 2020/2021</caption>
<tr><th>Classe</th><th>Nbr
Etudiants</th></tr>
<tr><td>TI 1.1</td><td>31</td></tr>
<tr><td>TI 1.2</td><td>30</td></tr>
<tr><td>TI 1.3</td><td>30</td></tr>
</table>

2. 1. La fusion dans les tableaux

<table border="1">

<tr><td colspan="3">Emploi du temps</td></tr>

<tr><td rowspan="2">Lundi</td><td>08-10</td><td>Mathématiques
1</td></tr>

<tr><td>10-12</td><td>Mathématiques 2</td></tr>

<tr><td rowspan="2">Mardi</td><td>10-
12</td><td>Physique</td></tr>

<tr><td>14-16</td><td>Chimie</td></tr>

</table>

2
3. Les images
Les formats les plus connus pour représenter une image sont :
• GIF : Petits éléments graphiques, icônes, petites images animées.
• PNG : Format ouvert (recommandation W3C), Images de haute qualité
avec niveaux de transparence.
• JPEG : Photographies pas de transparence.
La balise <img/> (balise orpheline) insère une image stockée dans un fichier
externe à l'intérieur d'un document web.
Les attributs de <img> les plus utilisés :
• src : attribut indispensable qui indique l’URL de l’images .
• alt : texte alternatif à utiliser en cas d'absence de l’image.
• width : nombre entier positif qui indique la largeur de l'image en pixels.
• height : nombre entier positif qui indique la hauteur de l'image en pixels.
• title : ajoute une infobulle
Exemple :

<h1> Logo de HTML 5 <h1>>

<img src="logoHTML.png" alt="Image du logo de HTML 5"

title="Logo de HTML5"/>

4. Les vidéos
La balise <video> spécifie la vidéo. Il existe trois formats vidéo pris en charge :
mp4, webm et ogg.
Les attributs de la balise <video> sont :
Attribut Valeur Description
src url Définir l’adresse du fichier vidéo
width et
en px Dimension de la vidéo
height
controls controls Afficher les boutons de contrôle du lecteur
Afficher une image quand le
poster url
téléchargement est en cours

3
 loop loop Lecture en boucle
Lecture automatique au chargement de la
autoplay autoplay
page
autobuffer autobuffer Commencer le téléchargement tout de suite
muted muted Assurer que la vidéo sera lancer sans le son.

Exemple:
<video width="400" height="222" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Un message ou un lien de chargement
</video>
5. Les audio
La balise <audio> spécifie le son. Il existe 3 formats vidéo pris en charge : mp3,
wav et ogg.
Les attributs de la balise <audio> sont :
Attribut Valeur Description
Définir l’adresse du fichier musicale ou
src url
sonore
Lecture automatique au chargement de la
autoplay autoplay
page
controls controls Affiche les boutons de contrôle du lecteur
loop loop Lecture en boucle
Définit si le fichier musicale ou sonore est
auto
pré-chargé en même temps que la page ou
preload metadata
uniquement lorsque l’utilisateur clic sur
none
play
muted muted Assurer que l’audio sera lancer sans le son.
Exemple :
<audio controls>
<source src="f1.ogg" type="audio/ogg" >
<source src="f1.mp3" type="audio/mpeg" >
Votre navigateur ne supporte pas l'élément audio
</audio>