Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment insérer des médias (image,vidéo et audio) dans une page HTML.
accès rapide
La démo
mettre ici la vidéo de la démonstration
Insérer une image
La balise <img> permet de lier une image à un document HTML en spécifiant sa source via l’attribut « src ».
Il est important d’ajouter une description de l’image en utilisant l’attribut « alt » ce qui permettra d’afficher le texte au survol de l’image et de servir de texte par défaut dans le cas où l’image ne se charge pas.
La balise <img> n’a pas de balise de fermeture .
La balise doit être accompagnée de deux attributs obligatoires :
-src : il permet d’indiquer où se trouve l’image à insérer.
-alt : cela signifie texte alternatif . On doit toujours indiquer un texte alternatif à l’image, c’est-à-dire un court texte qui décrit ce que contient l’image.
<!DOCTYPE html>
<html>
<head>
<title>Ma page web</title>
</head>
<body>
<h2>C'est mon chien "boby"</h2>
<!-- Incorrect img declaration -->
<img src="path/to/image/dog.jpg" alt="A dog" > </img>
<!-- Correct img declaration -->
<img src="path/to/image/dog.jpg" alt="A dog" >
</body>
</html>
si il y a une erreur au niveau de la source de l’image l’a résultat l’affichage sera comme suite :
A l’aide de l’attribut « title », nous pouvons rajouter une bulle d’information à l’image. Cet attribut est facultatif.
<!DOCTYPE html>
<html>
<head>
<title>inserer une image </title>
</head>
<body>
<h2>C'est mon chien "boby"</h2>
<img src="dog.jpg" alt="A dog" title="C'est mon chien" >
</body>
</html>
Les formats d’images à insérer
Les images peuvent être présentés avec plusieurs formats différents. Le poids (en Ko, voire en Mo) de l’image sera plus ou moins élevé selon le format choisi et la qualité de l’image.
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l’ordinateur fait des calculs pour qu’elles soient moins lourdes et donc plus rapides à charger.
Les sites Web utilisent généralement des images numériques de ces trois formats :
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Le format GIF C’est un format assez vieux, qui a été néanmoins très utilisé. Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu’à plusieurs millions de couleurs). Néanmoins, le GIF conserve un certain avantage que le PNG n’a pas : il peut être animé.
Le format JPEG
Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire le poids des photos, qui peuvent comporter plus de 16 millions de couleurs différentes.
Les images JPEG sont enregistrées avec l’extension .jpg ou .jpeg.
Notez que le JPEG détériore un peu la qualité de l’image, d’une façon généralement imperceptible. C’est ce qui le rend si efficace pour réduire le poids des photos
Le format PNG
Le format PNG (Portable Network Graphics ) est le plus récent de tous. Ce format est adapté à la plupart des graphiques. Le PNG a deux gros avantages : il peut être rendu transparent et il n’altère pas la qualité de l’image.
Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l’image :
-PNG 8 bits : 256 couleurs ;
-PNG 24 bits : 16 millions de couleurs (autant qu’une image JPEG).
Insérer une vidéo
Pour insérer une vidéo dans une page HTML 5, nous allons utiliser la balise <video>.
Les attributs de la balise <video>
- src : L’URL du fichier audio.
- autoplay : joue le fichier automatiquement.
- loop : joue en boucle.
- controls : affiche les contrôles.
Ci-dessous un exemple d’insertion d’une vidéo :
<!DOCTYPE html>
<html>
<head>
<title>Inserer une vidéo</title>
<meta charset="utf-8" />
</head>
<body>
<video controls src="video.ogv">
Ici la description alternative
</video>
</body>
</html>
Insérer un fichier audio
Pour insérer un fichier audio dans une page HTML5, nous allons utiliser la balise <audio>.
Les attributs de la balise <audio> :
- src : URL du fichier audio.
- autoplay : joue le fichier automatiquement.
- loop : joue en boucle.
- controls : affiche les contrôles.
<!DOCTYPE html>
<html>
<head>
<title>Ma page Web </title>
</head>
<body>
<audio src="fichiermusique.mp3 "></ audio >
</body>
</html>
Dans cette partie , nous avons appris comment insérer des médias (image,vidéo et audio) dans une page HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer à ajouter des listes dans un fichier HTML.