Cours

HTML & CSS Leçon 3

Liens et images

Relier des pages entre elles avec des liens et afficher des images, avec les bons attributs.

20 min

À la fin de cette leçon, tu sauras

  • Comprendre ce qu'est un attribut
  • Créer un lien vers un autre site ou une autre page
  • Afficher une image avec un texte alternatif

Les attributs

Certaines balises ont besoin d'informations en plus. On les écrit dans la balise ouvrante, sous la forme nom="valeur". Tu en as déjà vu un : lang="fr" dans <html>.

Les liens

Un lien s'écrit avec la balise <a> (pour anchor, « ancre »). L'attribut href indique où le lien mène, et le contenu de la balise est le texte sur lequel on clique.

<a href="https://antonin.skapski.fr">Voir le portfolio d'Antonin</a>
<a href="contact.html">Me contacter</a>
<a href="mailto:moi@exemple.fr">M'écrire</a>
  • Une adresse complète, qui commence par https://, mène vers un autre site : c'est une adresse absolue.
  • contact.html mène vers un fichier du même dossier que ta page : c'est une adresse relative.
  • mailto: ouvre la messagerie avec l'adresse déjà remplie.

Astuce : le texte du lien doit dire où il mène. « Voir le portfolio » est bien plus clair que « cliquez ici », surtout pour quelqu'un qui utilise un lecteur d'écran.

Les images

La balise <img> n'a pas de contenu, donc pas de balise fermante. Elle a deux attributs indispensables :

<img src="/exemples/avion.svg" alt="Un avion qui décolle en laissant une traînée pointillée">
  • src (source) : l'adresse de l'image ;
  • alt (alternative) : une description de l'image. Elle s'affiche si l'image ne charge pas, et elle est lue à voix haute aux personnes aveugles.

Attention : ne laisse jamais alt de côté. Si l'image est purement décorative, écris alt="" (vide) pour dire aux lecteurs d'écran de l'ignorer.

Une image cliquable

On peut mettre une balise dans une autre : une image à l'intérieur d'un lien devient cliquable.

<a href="https://antonin.skapski.fr">
  <img src="/exemples/avion.svg" alt="Portfolio d'Antonin">
</a>

À toi de jouer

Crée une petite carte de présentation :

  • un <h1> avec ton prénom ;
  • l'image /exemples/avion.svg, avec un attribut alt qui la décrit ;
  • un lien vers https://antonin.skapski.fr avec un texte clair.

Pour cet exercice, seule l'image /exemples/avion.svg fonctionne : les images d'autres sites sont bloquées.

index.html
Résultat
  • Il y a un titre <h1>
  • L'image /exemples/avion.svg est affichée
  • L'image a un texte alternatif alt rempli
  • Un lien mène vers https://antonin.skapski.fr
  • Le lien a un texte
Bloqué ? Voir une solution 
<h1>Léa</h1>

<img src="/exemples/avion.svg" alt="Un avion qui décolle">

<p><a href="https://antonin.skapski.fr">Voir le portfolio d'Antonin</a></p>

Quiz

1Quel attribut indique où mène un lien ?
2À quoi sert l'attribut alt d'une image ?
3href="page2.html" est une adresse…