HTML · Leçon 3

Liens & images

Le « Web », c'est une toile de pages reliées par des liens. Et une page sans image, c'est un peu triste.

Les liens <a>

L'attribut href indique la destination. Clique sur les liens de l'aperçu : la console te dit où ils mènent.

href="https://…"

Lien absolu vers un autre site.

href="page.html"

Lien relatif vers une page de ton site.

href="#id"

Ancre : saute vers l'élément qui a cet id.

target="_blank"

Ouvre le lien dans un nouvel onglet.

Les chemins relatifs

Un chemin relatif part du fichier où tu te trouves. ../ veut dire « remonter d'un dossier ».

mon-site/
├── index.html
├── contact.html
├── pages/
│   └── blog.html
└── images/
    └── chat.png
Je suis dans…Je veux…J'écris
index.htmlcontact.htmlcontact.html
index.htmlchat.pngimages/chat.png
pages/blog.htmlindex.html../index.html

Depuis pages/blog.html, quel chemin mène à chat.png ?

  1. images/chat.png
  2. ../images/chat.png
  3. /pages/images/chat.png

On remonte d'abord dans mon-site/ avec ../, puis on descend dans images/.

Les images <img>

Pas de balise fermante. Deux attributs indispensables : src (le fichier) et alt (le texte de remplacement).

Pourquoi alt ? Il est lu par les lecteurs d'écran (personnes malvoyantes), affiché si l'image ne charge pas, et utilisé par les moteurs de recherche.

À toi de jouer

L'image cliquable

  • Affiche l'image ../assets/img/chat.svg avec une largeur de 120 et un alt descriptif.
  • Rends l'image cliquable : elle doit mener à https://fr.wikipedia.org/wiki/Chat.
  • Le lien s'ouvre dans un nouvel onglet.
IndiceCommence par afficher l’image seule, avec ses attributs : <img src="…" alt="…" width="…">.
IndicePour rendre un élément cliquable, on l’entoure d’un lien <a href="…">…</a>. Pour un nouvel onglet : target="_blank" sur le lien.
IndiceLa structure attendue :
<a href="https://fr.wikipedia.org/wiki/Chat" target="_blank">
  <img src="../assets/img/chat.svg" alt="..." width="120">
</a>

Le sommaire à ancres

Complète le sommaire : chaque lien doit sauter vers la bonne section (regarde leurs id).

IndiceRegarde les titres plus bas : chacun a un id (histoire, regles, materiel).
IndiceUn lien vers un élément de la même page s’écrit avec # suivi de l’id : href="#id".
IndicePremier lien : <a href="#histoire">Histoire</a>. Fais pareil pour les deux autres (les id n’ont pas d’accent).

À retenir