Il y a une différence entre insérer une image sur un page Web et faire de cette image un lien cliquable. Bien que le HTML est similaire, un lien repose sur un ancre élément tandis qu'une image utilise le img élément. Cependant, une image peut s'imbriquer dans une ancre, rendant cette image cliquable en tant que lien.
Insertion d'images dans des éléments d'ancrage
Une utilisation courante d'un lien basé sur une image est le graphique du logo du site, qui est ensuite lié à la page d'accueil du site.
Voici comment placer une image non cliquable dans le document HTML:
Pour transformer l'image en lien, ajoutez le lien d'ancrage, en ouvrant l'élément d'ancrage avant l'image et en fermant l'ancrage après l'image. Cette technique est similaire à la façon dont vous liez du texte, sauf qu'au lieu d'envelopper les mots, vous enveloppez l'image:
Lorsque vous ajoutez ce type de code HTML à votre page, ne placez aucun espace entre la balise d'ancrage et la balise d'image. Si vous le faites, certains navigateurs ajouteront de petites coches à côté de l'image, ce qui semblera étrange.
Le logo agit désormais également comme un bouton de page d'accueil, ce qui est à peu près un standard du Web de nos jours.
Notez que nous n'incluons aucun style visuel, tel que la largeur et la hauteur de l'image, dans notre balisage HTML. Nous laisserons ces styles visuels au CSS et maintiendrons une séparation nette entre la structure HTML et les styles CSS.