Cours 5

Médias

Audio

Balise : <audio>

Exemple le plus simple

<audio controls src="musique.mp3"></audio>

Attributs

• autoplay : Démarre la lecture automatiquement. Désactivé par défaut sur la plupart des navigateurs pour des raisons de UX.
• controls : Affiche les contrôles du lecteur (lecture, pause, volume). Pas obligatoire, mais un peu oui ;), parce que l'autoplay ne fonctionne pas vraiment.
• loop : Fait jouer l’audio en boucle.
• muted : L’audio est désactivé.
• preload : Indique comment le navigateur doit gérer le chargement de l’audio :
  • none : Ne préchargera rien (idéal si on veut économiser la bande passante)
  • metadata : Préchargera uniquement les métadonnées (durée, dimensions)
  • auto : Laisse le navigateur choisir (c'est la valeur par défaut)

Formats recommandés :

• .mp3
• .ogg
• .wav

C'est possible aussi d'utiliser une méthode de chargement avec la balise <source>.

Elle permet de fournir plusieurs formats au navigateur et le laisse choisir celui qui est compatible. Celui-ci commence par essayer la lecture du premier format. S'il n'est pas compatible, il essaye le deuxième et ainsi de suite.

Si rien ne fait, le navigateur peut afficher un message spécifié dans la balise <audio>. Voici un exemple :

Exemple complet

<audio controls loop preload="metadata">
  <source src="https://assets.codepen.io/9367036/NyanCatoriginal.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="https://assets.codepen.io/9367036/NyanCatoriginal.mp3" type="audio/mpeg">
  <p>
    Votre navigateur ne prend pas en charge l'audio HTML.
    <a href="https://assets.codepen.io/9367036/NyanCatoriginal.mp3" download>Télécharger l’audio</a>.
  </p>
</audio>

Vidéo

Balise : <video>

Attributs :

• controls, autoplay, loop, muted, poster, width, height

Formats recommandés :

• .mp4 (H.264)
• .webm
• .ogg

Exemple :

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  Votre navigateur ne supporte pas l’élément vidéo.
</video>

Tableaux HTML

Balises :

• <table>
• <tr>
• <td>
• <th>

Structure logique :

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Julie</td>
    <td>21</td>
  </tr>
</table>

Attributs utiles : • colspan : étendre une cellule sur plusieurs colonnes • rowspan : étendre une cellule sur plusieurs lignes

Bonnes pratiques : • Ne pas utiliser de tableau pour la mise en page • Ajouter une légende (

) et utiliser les balises sémantiques (, , )

Listes structurées

Listes non ordonnées :

• Utilisée pour des listes où l’ordre n’a pas d’importance • Exemple :

<ul>
  <li>Pomme</li>
  <li>Banane</li>
</ul>

Listes ordonnées :

• Utilisée quand l’ordre compte (étapes, classement) • Exemple :

<ol>
  <li>Étape 1</li>
  <li>Étape 2</li>
</ol>

Listes de définitions :

,

,

• Exemple :

<dl>
  <dt>HTML</dt>
  <dd>Langage de balisage utilisé pour structurer le contenu Web.</dd>
</dl>