Il existe différents formats d’images que l’on peut utiliser sur les sites web, si l’image est volumineuse à télécharger, cela ralentit le chargement de la page web : faites un choix judicieux des images à utiliser !!!!
Pour insérer une image en html, on utilise la balise orpheline <img/>, mais on doit renseigner deux attributs obligatoires :
Si tout fonctionne normalement, l’image sera affichée, sinon c’est le texte que vous avez défini avec alt qui va s’afficher à la place de l’image. Sachez aussi que alt aide les robots des moteurs de recherche pour les recherches d'images.
Exemple
Insérons deux images, l’une se trouvant dans le même dossier que mon fichier html et l’autre se trouvant ailleurs :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<h> Guymens</h4>
<img src="IMG/Guymens.jpg" alt="Guymens">
</body>
</html>
Et voici le résultat:
Mettons un nom d’image qui n’existe pas à la place de notre image :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<h> Guymens</h4>
<img src="IMG/non.jpg" alt="Guymens">
</body>
</html>
On peut voir qu’à la place de la deuxième photo, le navigateur a affiché le texte que nous avons défini pour
l’attribut alt (1er jour de la formation) parce qu’il n’a pu télécharger l’image (qui n’existe pas).
Pour afficher une infobulle lorsque le curseur touche l’image, on utilise l’attribut title :
Ajoutons ça dans le code précédent :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<h> Guymens</h4>
<img src="IMG/Guymens.jpg" alt="Guymens" title="Mon pote Guymens">
</body>
</html>