Le Web/Cours/Liens et Navigation

Liens et Navigation

25 min Cours SNT

Le coeur du Web : les liens hypertextes

Les liens hypertextes sont l'essence meme du Web. Ils permettent de naviguer de page en page, creant un reseau mondial de documents interconnectes. Le mot "Web" (toile) vient d'ailleurs de cette interconnexion !

Le saviez-vous ? Le "HT" dans HTML signifie HyperText - le concept de texte cliquable qui mene vers d'autres documents.

Les differents types de liens

Lien interne

/page.html

Vers une page du meme site

Lien externe

https://...

Vers un autre site web

Ancre

#section

Vers une partie de la page

Email

mailto:...

Ouvre le client email

Telephone

tel:...

Lance un appel (mobile)

Telechargement

fichier.pdf

Telecharge un fichier

Balise <a> : creer un lien

liens.html

<!-- Lien interne -->
<a href="/contact.html">Page de contact</a>

<!-- Lien externe (nouvel onglet) -->
<a href="https://google.fr"
   target="_blank"
   rel="noopener noreferrer">
  Visiter Google
</a>

<!-- Lien avec info-bulle -->
<a href="/aide" title="Acceder a l'aide">
  Besoin d'aide ?
</a>

<!-- Lien sur une image -->
<a href="/accueil">
  <img src="logo.png" alt="Accueil">
</a>

Attributs de la balise <a>

hrefURL de destination (obligatoire)href="https://google.fr"

targetOu ouvrir le lientarget="_blank"

relRelation avec la page ciblerel="noopener noreferrer"

titleInfo-bulle au survoltitle="En savoir plus"

downloadForce le telechargementdownload="fichier.pdf"

Ouvrir dans un nouvel onglet

L'attribut target="_blank" ouvre le lien dans un nouvel onglet. Attention a la securite !

_self

Meme onglet (par defaut)

Liens internes

_blank

Nouvel onglet

Liens externes

Securite : toujours ajouter rel="noopener noreferrer"

Sans cet attribut, la page cible peut acceder a votre page via window.openeret potentiellement rediriger l'utilisateur vers un site malveillant.

Liens speciaux : email, tel, telechargement

liens-speciaux.html

<!-- Lien email -->
<a href="mailto:contact@monsite.fr">
  Nous contacter par email
</a>

<!-- Lien telephone -->
<a href="tel:+33612345678">
  Appeler le 06 12 34 56 78
</a>

<!-- Telechargement de fichier -->
<a href="document.pdf" download>
  Telecharger le PDF
</a>

<!-- Telechargement avec nom personnalise -->
<a href="rapport-2024.pdf" download="MonRapport.pdf">
  Telecharger le rapport
</a>

Les ancres : naviguer dans la page

Les ancres permettent de creer des liens vers des sections specifiques de la meme page (ou d'une autre page). Tres utile pour les tables des matieres !

ancres.html

<!-- Definition d'une ancre (cible) -->
<section id="introduction">
  <h2>Introduction</h2>
  <p>Contenu...</p>
</section>

<section id="chapitre1">
  <h2>Chapitre 1</h2>
</section>

<!-- Liens vers les ancres -->
<nav>
  <a href="#introduction">Intro</a>
  <a href="#chapitre1">Chapitre 1</a>
  <a href="#top">Haut de page</a>
</nav>

<!-- Ancre sur une autre page -->
<a href="/article.html#conclusion">
  Voir la conclusion
</a>

Creer un menu de navigation

navigation.html

<!-- Menu de navigation semantique -->
<nav aria-label="Menu principal">
  <ul>
    <li><a href="/" class="active">Accueil</a></li>
    <li><a href="/cours">Cours</a></li>
    <li><a href="/exercices">Exercices</a></li>
  </ul>
</nav>

<!-- Fil d'Ariane (breadcrumb) -->
<nav aria-label="Fil d'Ariane">
  <ol>
    <li><a href="/">Accueil</a></li>
    <li><a href="/cours">Cours</a></li>
    <li aria-current="page">HTML Bases</li>
  </ol>
</nav>

Quiz : Teste tes connaissances

5 questions pour verifier ce que tu as appris sur les liens HTML

A retenir

<a href="..."> cree un lien hypertexte
target="_blank" + rel="noopener noreferrer" pour les liens externes
#id pour les ancres internes a la page
mailto: et tel: pour email et telephone

Images et Multimedia Cours suivant : Moteurs de Recherche