HTML CSS JS

Jusqu'ici, votre page ne contient que du texte. Ce chapitre ajoute les 3 éléments qui rendent une page web réellement utile : les liens pour naviguer, les images pour illustrer, et les listes pour organiser.

Les liens hypertextes — la balise <a>

Le lien est l'invention qui a créé le Web. C'est la balise <a> (pour "anchor", ancre en anglais) qui relie les pages entre elles.

La syntaxe : <a href="destination">Texte cliquable</a>

L'attribut href (hypertext reference) contient l'adresse de destination. Il existe 4 types de liens :

1. Lien externe — vers un autre site : <a href="https://google.com">Aller sur Google</a>

2. Lien interne — vers une autre page de votre site : <a href="about.html">À propos</a>

3. Lien ancre — vers une section de la même page : <a href="#contact">Me contacter</a> Ce lien scrolle vers l'élément qui a l'attribut id="contact" sur la page.

4. Lien email — ouvre le client email : <a href="mailto:moussa@email.com">M'écrire</a>

Attributs importants des liens :

• target="_blank" — ouvre le lien dans un nouvel onglet. À utiliser pour les liens externes uniquement.
• rel="noopener noreferrer" — sécurité. Toujours ajouter quand vous utilisez target="_blank". Empêche la page de destination d'accéder à votre onglet.

Combinez-les pour les liens externes : <a href="https://github.com" target="_blank" rel="noopener noreferrer">Mon GitHub</a>

> Bonne pratique : Le texte du lien doit décrire la destination. "Cliquez ici" est mauvais pour l'accessibilité — un lecteur d'écran lit les liens hors contexte. "Voir mon profil GitHub" est bien meilleur.

Les images — la balise <img>

La balise <img> affiche une image. C'est une balise auto-fermante (pas de </img>).

La syntaxe : <img src="chemin/vers/image.jpg" alt="Description de l'image">

Deux attributs obligatoires :

• src (source) — le chemin vers le fichier image. Peut être relatif (images/photo.jpg) ou absolu (https://site.com/photo.jpg).
• alt (texte alternatif) — une description textuelle de l'image. C'est obligatoire pour 3 raisons :
  1. Accessibilité — les lecteurs d'écran lisent le alt aux personnes malvoyantes
  2. SEO — Google utilise le alt pour comprendre le contenu de l'image
  3. Fallback — si l'image ne charge pas, le alt s'affiche à la place

Un bon alt décrit ce que l'image MONTRE : "Portrait de Moussa souriant devant un ordinateur" est bon. "image1" ou "photo" est mauvais. Si l'image est purement décorative (pas de contenu informatif), utilisez alt="" (vide mais présent).

Attributs recommandés :

• width et height — les dimensions en pixels. Le navigateur réserve l'espace avant le chargement de l'image, ce qui évite les "sauts" de page.
• loading="lazy" — l'image ne se charge que quand elle est proche de la zone visible. Améliore la performance.

Les listes — <ul>, <ol> et <li>

HTML propose 2 types de listes :

Liste non ordonnée — <ul> (unordered list) — affiche des puces. Pour des éléments sans ordre particulier : compétences, liens de navigation, fonctionnalités.

Liste ordonnée — <ol> (ordered list) — affiche des numéros. Pour des éléments avec un ordre : étapes d'un tutoriel, classement, instructions.

Chaque élément de liste est une balise <li> (list item) à l'intérieur du <ul> ou <ol>.

Les listes peuvent être imbriquées : un <li> peut contenir un autre <ul> ou <ol> pour créer des sous-listes.

> Usage courant : Les menus de navigation sont toujours construits avec un <ul> contenant des <li> avec des <a> à l'intérieur. C'est la convention standard du web.

Construire un menu de navigation

Un menu de navigation combine les 3 éléments de ce chapitre : une liste de liens dans un <ul>, le tout dans une balise <nav> (que nous approfondirons au chapitre 3).

Le pattern standard : <nav> contient un <ul> qui contient des <li> qui contiennent des <a>.

Les liens utilisent des ancres (#about, #skills, #projects, #contact) pour naviguer vers les sections de la même page.