CREATION D'UN SITE WEB AVEC HTML ET CSS

I.7 LES IMAGES

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 :

Src : permet d’indiquer le nom de l’image à insérer, il permet aussi d’indiquer où se trouve l’image en question (dans le cas où l’image ne se trouve pas dans le même dossier que le fichier html).
Alt : Il peut arriver que le navigateur soit incapable d’afficher l’image pour une raison quelconque, alt permet d’afficher quelque chose à la place de l’image dans un cas pareil. En d’autres termes alt est le texte alternatif à l’image.

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).

Une infobulle pour l’image

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>