Les liens et les images

Les liens hypertextes et les images sont des éléments fondamentaux du web, permettant de naviguer entre les pages et d’afficher du contenu visuel.

Les liens hypertextes (<a>)

La balise <a> (pour anchor, ancre en anglais) est utilisée pour créer un lien hypertexte vers une autre ressource (une autre page web, un fichier, une adresse e-mail, etc.). L’attribut le plus important est href qui spécifie la destination du lien.

Liens externes et internes

• Lien externe : Pointe vers une ressource sur un autre site web. L’URL doit être complète (incluant http:// ou https://).
• Lien interne : Pointe vers une autre page du même site. On utilise généralement un chemin relatif.

<!-- Lien vers un site externe -->
<p>Visitez le site de <a href="https://www.mozilla.org/">Mozilla</a>.</p>

<!-- Lien vers une autre page du même site -->
<p>Allez voir notre page <a href="/contact.html">contact</a>.</p>

Les ancres nommées

Il est également possible de créer un lien vers une section spécifique d’une page. C’est ce qu’on appelle une ancre.

1. Définir l’ancre : On ajoute un attribut id unique à l’élément vers lequel on veut pointer.
2. Créer le lien : On fait pointer l’attribut href du lien vers cet id, précédé d’un dièse (#).

Cela fonctionne pour un lien pointant vers un élément de la même page ou d’une autre page.

<!-- 1. L'élément de destination avec son id -->
<h2 id="chapitre2">Chapitre 2 : Le développement</h2>
<p>Contenu du chapitre...</p>

<!-- 2. Le lien qui pointe vers l'ancre -->
<p>Aller directement au <a href="#chapitre2">Chapitre 2</a>.</p>

<!-- Lien vers une ancre sur une autre page -->
<p>Lire le <a href="page-details.html#conclusion">résumé sur la page de détails</a>.</p>

Les images (<img>)

La balise <img> permet d’insérer une image dans une page web. C’est une balise « vide » ou « orpheline », ce qui signifie qu’elle n’a pas de balise de fermeture. Elle possède deux attributs obligatoires :

• src (source) : Spécifie le chemin vers le fichier image. Ce chemin peut être une URL absolue ou un chemin relatif.
• alt (alternative text) : Fournit un texte de remplacement qui sera affiché si l’image ne peut pas être chargée. Ce texte est également crucial pour l’accessibilité (lu par les lecteurs d’écran) et le référencement (SEO).

<img src="/images/logo-entreprise.png" alt="Logo de Mon Entreprise">

Il est aussi recommandé de spécifier les attributs width (largeur) et height (hauteur) pour que le navigateur puisse réserver l’espace nécessaire à l’image avant même son chargement, évitant ainsi des décalages de mise en page (Layout Shift).

<img src="/images/photo-equipe.jpg" alt="Photo de l'équipe projet" width="600" height="400">