Les liens et la navigation

Créer des liens hypertextes

Les liens sont l'essence du web. Ils connectent les pages entre elles.

Lien de base

<a href="https://www.example.com">Visitez Example</a>

Attributs importants

<!-- Ouvrir dans un nouvel onglet -->
<a href="https://www.example.com" target="_blank">Ouvrir dans un nouvel onglet</a>

<!-- Titre au survol -->
<a href="contact.html" title="Page de contact">Contactez-nous</a>

<!-- Lien de téléchargement -->
<a href="document.pdf" download>Télécharger le PDF</a>

Types de liens

1. Liens absolus (URL complète)

<a href="https://www.google.com">Google</a>

2. Liens relatifs (même site)

<a href="about.html">À propos</a>
<a href="../index.html">Retour à l'accueil</a>
<a href="/contact">Contact</a>

3. Ancres (liens vers une section)

<!-- Créer une ancre -->
<h2 id="section-contact">Contact</h2>

<!-- Lien vers l'ancre -->
<a href="#section-contact">Aller au contact</a>

<!-- Ancre sur une autre page -->
<a href="page.html#section2">Voir section 2</a>

Liens spéciaux

<!-- Lien email -->
<a href="mailto:contact@example.com">Envoyez un email</a>

<!-- Avec sujet et corps -->
<a href="mailto:contact@example.com?subject=Question&body=Bonjour">Email avec sujet</a>

<!-- Lien téléphone -->
<a href="tel:+33612345678">Appelez-nous</a>

<!-- Lien SMS -->
<a href="sms:+33612345678">Envoyez un SMS</a>

Liens avec images

<a href="produit.html">
    <img src="produit.jpg" alt="Voir le produit">
</a>

Sécurité des liens externes

<a href="https://external-site.com" 
   target="_blank" 
   rel="noopener noreferrer">
    Site externe sécurisé
</a>

rel="noopener noreferrer" empêche le site externe d'accéder à votre page.

Navigation typique

<nav>
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="about.html">À propos</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Points clés

• <a href="..."> crée un lien
• target="_blank" ouvre dans un nouvel onglet
• Utilisez des liens relatifs pour le même site
• Les ancres (#) pointent vers des sections
• Sécurisez les liens externes avec rel="noopener"

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !