🔗 Le cours : relier les pages et illustrer
Le « H » de HTML, c'est l'hypertexte : des documents reliés entre eux par des liens. Pour qu'un lien ou une image fonctionne, il faut écrire correctement son chemin (l'adresse du fichier). C'est la compétence clé de cette fiche.
Chemins relatifs et absolus
Un chemin relatif part de l'endroit où se trouve la page qui contient le lien. Un chemin absolu donne l'adresse complète. Pour un site que l'on déplace d'un dossier à un autre (ou d'un ordinateur à un serveur), on préfère les chemins relatifs.
| Écriture | Signification |
|---|
page.html | fichier du même dossier que la page actuelle |
cours/page.html | fichier du sous-dossier cours |
../page.html | fichier du dossier parent (.. = on remonte d'un niveau) |
/page.html | fichier à la racine du site |
https://exemple.fr/page.html | adresse absolue, sur n'importe quel site |
site/
├── index.html
├── images/
│ └── logo.png
└── cours/
├── python.html
└── c.html
Depuis index.html, le logo s'écrit images/logo.png et la fiche Python cours/python.html. Depuis cours/python.html, le logo s'écrit ../images/logo.png (on remonte d'un dossier, puis on descend dans images) et la fiche C simplement c.html.
<!-- Cette page est dans le dossier cours/ -->
<a href="c.html">Voir la fiche C</a>
<a href="../index.html">Retour à l'accueil</a>
<img src="../images/logo.png" alt="Logo du site">
Les ancres : aller à un endroit précis
N'importe quel élément peut recevoir un identifiant unique avec l'attribut id. Un lien dont le href commence par # y fait défiler la page. On peut cibler une ancre d'une autre page : cours.html#recherche. C'est la base d'une table des matières.
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#methode">Méthode</a></li>
</ul>
<h2 id="intro">Introduction</h2>
<p>…</p>
<h2 id="methode">Méthode</h2>
<p>…</p>
Nouvel onglet et sécurité
target="_blank" ouvre le lien dans un nouvel onglet. Ajoute rel="noopener" : sans cela, la page ouverte pourrait agir sur la page d'origine. N'ouvre un nouvel onglet que pour un site extérieur ; pour naviguer dans ton site, laisse le comportement normal.
Bien écrire le texte d'un lien
Le texte d'un lien doit se comprendre seul : les lecteurs d'écran peuvent lister tous les liens d'une page.
À éviter
<p>Pour le sujet, <a href="sujet.pdf">cliquez ici</a>.</p>
Correct
<p><a href="sujet.pdf">Télécharger le sujet (PDF, 2 Mo)</a></p>
Autres destinations
| Besoin | Code |
|---|
| écrire un e-mail | <a href="mailto:eleve@exemple.fr">Nous écrire</a> |
| appeler (téléphone) | <a href="tel:+33123456789">01 23 45 67 89</a> |
| télécharger un fichier | <a href="exercices.zip" download>Exercices (ZIP)</a> |
Les images : src, alt, taille
alt remplace l'image quand elle ne s'affiche pas et est lu par les lecteurs d'écran : il décrit ce que l'image apporte. Pour une image purement décorative, écris alt="" (vide) : elle sera ignorée. width et height (en pixels, sans unité) permettent au navigateur de réserver la place avant le chargement, ce qui évite que le texte « saute ». loading="lazy" retarde le chargement des images hors écran.
| Format | Quand l'utiliser |
|---|
JPEG (.jpg) | photographies (compression avec perte) |
| PNG | schémas, captures d'écran, transparence |
| WebP | photos et schémas, plus léger que JPEG et PNG |
| SVG | logos et icônes : dessin vectoriel qui reste net à toute taille |
| GIF | petites animations |
Une image de plusieurs mégaoctets ralentit toute la page : redimensionne-la avant de la publier à la taille réellement affichée.
figure et figcaption
<figure> regroupe une illustration et sa légende <figcaption> : le lien entre les deux est ainsi explicite (exemple de la deuxième carte).
