Medias
Images
Les images sont probablement l'élément média le plus vieux et le plus simple que l'on peut mettre dans une page Web. Pour ajouter une image à une pages, nous utiliserons simplement la balise <img>. Cette balise est l'une des rares balise à ne pas avoir de balise fermante. Pour spécifier l'image à afficher, nous devons spécifier un attribut src qui correspondra à l'URL de l'image.
Cet URL peut être un lien vers une image sur le web ou encore un lien relatif pour les images que vous ajouterez dans le dossier /assets de votre projet.
Vous pouvez constater que les images ont tous un attribut alt. Cet attribut indique simplement une description de ce que l'image affiche. Il est surtout utilisé par les lecteurs de pages Web pour les personnes ayant un handicap visuel ou encore pour afficher du texte si l'image n'est pas en mesure de se charger.
Vous devez toujours mettre un attribut alt sur une balise <img>. Si vous ne le mettez pas, votre HTML sera invalide.
Video
La balise <video> nous permet d'ajouter une video à notre site web. Elle est beaucoup plus récente que la balise pour les images et, par conséquant, possède des attributs et complexités supplémentaire.
Voici comment l'utiliser:
Voici quelques explications pour son utilisation:
- width
- La largeur originale de la video. Si vous le mettez pas, votre page sera moins bien classé par les engins de recherche comme Google.
- height
- La hauteur originale de la video. Si vous le mettez pas, votre page sera moins bien classé par les engins de recherche comme Google.
- controls
- Indique au navigateur que l'on veut afficher les boutons de contrôle de la vidéo, tel que les boutons pour démarrer et pauser la vidéo, le bouton pour ajuster le son et le bouton pour mettre en plein écran.
- <source>
- Indique la source de la video. Son attribut src permet d'indiquer un URL vers la vidéo, de la même façon que la l'attribut src de la balise <img>. L'attribut type indique le type de la video.
L'élément <video> est très complexe à utiliser. Pour plus d'information sur celui-ci, vous pouvez consulter la page suivante:
Audio
La balise <audio> nous permet d'ajouter une séquence audio à notre site web. Elle est sortie en même temps que la balise <video> et possède, par conséquant, plusieurs similitude avec celle-ci.
Voici comment l'utiliser:
Voici quelques explications pour son utilisation:
- controls
- Indique au navigateur que l'on veut afficher les boutons de contrôle de l'audio, tel que les boutons pour démarrer et pauser l'audio et le bouton pour ajuster le son.
- <source>
- Indique la source de l'audio. Son attribut src permet d'indiquer un URL vers l'audio, de la même façon que la l'attribut src de la balise <img>. L'attribut type indique le type de l'audio.
L'élément <audio> est très complexe à utiliser. Pour plus d'information sur celui-ci, vous pouvez consulter la page suivante:
Vidéo externe au site web
Une des façon les plus facile d'intégrer des vidéos dans notre site Web est de simplement héberger notre vidéo sur un autre site web tel que Youtube, Vimeo ou DailyMotion. Ensuite nous pouvons lier la vidéo à notre site web. Cette façon de faire permet entres autres d'économiser de la mémoire pour la taille de notre site web.
Chaque site web d'hébergement de vidéo utilise son propre code pour partager les vidéo. Il faut donc aller lire un peu sur le sujet si vous désirez le faire. Dans le cas de Youtube, pour ajouter une vidéo à notre site web, nous n'avons qu'à nous rendre sur la page de la vidéo, cliquer sur le bouton "Partager", suivit de "Intégrer". Vous n'avez plus qu'à copier le code affiché dans votre site Web.
Type de fichiers
Voici une liste non exhaustives des types de fichiers multimédias généralement utilisé dans un site Web:
| Fichier d'image | Fichier audio | Fichier vidéo |
|---|---|---|
| .jpg | .midi | .mpeg |
| .png | .wma | .avi |
| .gif | .wav | .wmw |
| .webp | .ogg | .mov |
| .svg | .mp3 | .ogg |
| .mp4 | .webm | |
| .mp4 |