TP 07 : Mise en page complète

Licence Humanités Numériques 1e année

Jean-Marc Lecarpentier — Antoine Widlocher

Enseignement des technologies du Web

 

Travail personnel

Exercice 1 — Cris d’animaux #

Adapté d'un exercice de Françoise Lambert et Frédéric Jurie

Récupérer l'archive avec les fichiers pour faire le TP.

Vous allez réaliser une page très simple utilisant l'élément HTML audio pour rendre la page sonore.

Capture d'écran de la page
Capture d'écran de la page

Le site MDN Web Docs propose un tutoriel d'introduction aux contenus audio et video, ainsi que des pages de documentation sur les éléments HTML audio et video.

  1. Se renseigner sur le web sur l'élément HTML audio : comment afficher les contrôles ? Comment préciser les fichiers son ?
  2. Mettre en place rapidement titre et le bas de page puis les 4 boites qui contiendront les images, leurs légendes respectives et les contrôleurs de sons. Mettre en place très rapidement le style correspondant.
  3. Mettre en place les 4 contrôleurs de sons et les fichiers associés : vous trouverez dans l’archive des fichiers sons de différents formats : .ogg, .wav, .mp3.
    Attention, pour la validation W3C, une balise audio ne doit pas être mise dans une balise figure !
  4. Observez les problèmes posés par les différents formats de son selon les navigateurs (en essayer plusieurs et regarder les docs). Vous devez proposer plusieurs fichiers pour que le navigateur prenne celui qu’il sait lire.
    Pour bien constater quel est le fichier lu, vous mettrez sous l’image du chaton le son du chaton dans un certain format, celui du chien dans un autre format, et le loup dans un troisième, par exemple. Regardez lesquels fonctionnent suivant les navigateurs et les machines (essayez sur votre smartphone). Que se passe-t-il si aucun fichier son n’est reconnu ?
  5. Testez rapidement les paramètres autoplay puis loop, mais retirez les ensuite sous peine d’énervement général !
  6. L'archive contient également une vidéo de chien, en deux formats, MP4 et WebM. Ajoutez la vidéo sur la page grâce à l'élément video. Là encore, pour être supporté par le maximum de navigateurs, il faut mettre les deux formats.
  7. Testez l'attribut poster de l'élément video avec une image quelconque.