Liens et images

Pourquoi les liens et les images sont essentiels

Sans liens, le web n'existerait pas. "Web" veut dire toile en anglais. Les pages sont reliées entre elles comme une toile d'araignée. Chaque lien t'emmène d'une page à une autre en un clic.

Sans images, les pages seraient ennuyeuses. Dans cette leçon, tu apprends à créer des liens et à afficher des images.

Créer un lien : la balise <a>

La balise <a> crée un lien hypertexte. "a" vient de "anchor" (ancre en anglais). Une ancre qui accroche deux pages ensemble.

L'attribut indispensable : href (HyperText REFerence). C'est l'adresse de destination. Sans href, pas de lien.

HTML

<!-- Lien vers un site externe -->
<a href="https://monminilab.fr">Visiter MonMiniLab</a>

<!-- Même lien, mais s'ouvre dans un nouvel onglet -->
<a href="https://monminilab.fr" target="_blank">Ouvrir dans un nouvel onglet</a>

<!-- Lien vers une autre page de ton propre site -->
<a href="contact.html">Me contacter</a>

<!-- Lien qui descend vers une section précise de la même page -->
<a href="#section-contact">Aller directement au contact</a>

Décortiquons le premier exemple :

<a — balise de lien.
href="https://monminilab.fr" — l'adresse de destination.
> — fin de la balise ouvrante.
Visiter MonMiniLab — le texte cliquable, souligné en bleu.
</a> — fin du lien.

L'attribut target="_blank" ouvre le lien dans un nouvel onglet. Utilise-le pour les liens vers d'autres sites — le visiteur reste aussi sur le tien.

Chemins relatifs et absolus

Pour les liens vers tes propres pages, tu as deux façons d'écrire l'adresse. Comme donner une direction : l'adresse complète, ou juste "c'est la deuxième à droite".

Chemin absolu

L'adresse complète. Commence toujours par https://. Pour les sites externes.

Chemin relatif

Une adresse qui part de l'emplacement de ta page actuelle. Pour les pages de ton propre site.

HTML — chemins relatifs

<!-- page dans le même dossier que toi -->
<a href="contact.html">Contact</a>

<!-- page dans un sous-dossier "pages" -->
<a href="pages/about.html">À propos</a>

<!-- page dans le dossier parent (un niveau au-dessus) -->
<a href="../index.html">Retour à l'accueil</a>

💡

../ veut dire "remonte d'un dossier". Si tu es dans pages/about.html et tu veux aller à index.html dans le dossier parent, tu écris ../index.html. Deux dossiers à remonter → ../../.

⚠️

Erreur fréquente ! Les chemins sont sensibles aux majuscules. Contact.html et contact.html sont deux fichiers différents. Utilise uniquement des minuscules et des tirets pour nommer tes fichiers.

Insérer une image : la balise <img>

La balise <img> affiche une image. Pas de contenu à envelopper, pas de balise fermante.

Deux attributs toujours obligatoires :

src (source) — le chemin vers l'image. Relatif ou absolu, comme pour les liens.
alt (alternative) — un texte qui décrit l'image. Il s'affiche si l'image ne charge pas. Les lecteurs d'écran le lisent pour les malvoyants. Google l'utilise pour comprendre l'image.

HTML

<!-- Image dans le même dossier -->
<img src="photo.jpg" alt="Portrait de Marie souriante">

<!-- Image dans un sous-dossier "images" -->
<img src="images/logo.png" alt="Logo MonMiniLab">

<!-- Image avec une taille définie -->
<img src="logo.png" alt="Logo" width="200" height="80">

<!-- Image depuis internet (URL complète) -->
<img src="https://picsum.photos/400/200" alt="Image de paysage">

⚠️

alt est obligatoire. Même si l'image est décorative, mets alt="" (vide). Oublier alt pénalise l'accessibilité et le référencement.

Quel format d'image choisir ?

Le format affecte la qualité et la vitesse de chargement.

JPEG / JPG — pour les photos. Bonne compression. Pas de transparence.
PNG — pour les logos. Supporte la transparence (fond transparent).
SVG — pour les icônes. Se redimensionne sans perdre en qualité.
WebP — format moderne. Plus léger que JPEG et PNG. À préférer.

Rendre une image cliquable

Tu peux mettre une image à l'intérieur d'un lien <a>. L'image devient alors cliquable. C'est ce qu'on fait avec les logos de sites.

HTML

<!-- L'image est dans le lien — cliquer sur l'image amène à la page d'accueil -->
<a href="https://monminilab.fr">
  <img src="logo.png" alt="MonMiniLab — retour à l'accueil">
</a>

Dans ce cas, le alt doit décrire la destination du lien, pas juste l'image. C'est le seul texte disponible pour les lecteurs d'écran.

// à toi de jouer

Crée un lien et affiche une image

Objectif : ajoute un lien qui ouvre une nouvelle page et affiche une image depuis le web avec un attribut alt descriptif. Essaie aussi de rendre l'image cliquable.

Éditeur live

HTML

Résultat

// à retenir

<a href="...">texte cliquable</a> crée un lien.
target="_blank" ouvre dans un nouvel onglet — pour les sites externes.
Chemin absolu (https://...) pour les sites externes. Chemin relatif pour les pages de ton site.
../ remonte d'un dossier dans l'arborescence.
<img src="..." alt="..."> affiche une image. Balise orpheline, pas de fermeture.
alt est obligatoire. Toujours décrire ce que montre l'image.
Formats : JPG pour photos, PNG pour transparence, SVG pour icônes, WebP pour la modernité.
Image cliquable : mets <img> à l'intérieur d'un <a>.