Liens et Navigation
Les liens hypertexte sont l'essence même du Web ! Sans eux, pas de navigation, pas de 'toile' mondiale. Découvrez comment créer et utiliser les liens.
Objectifs du cours
- Comprendre le rôle des liens hypertexte sur le Web
- Maîtriser la balise <a> et l'attribut href
- Distinguer liens absolus, relatifs et internes
- Utiliser les ancres pour naviguer dans une page
- Créer des liens email et téléphone
Erreurs courantes à éviter
- Oublier l'attribut href (le lien ne fonctionne pas)
- Confondre liens absolus et relatifs
- Ne pas utiliser target="_blank" pour les liens externes
- Oublier le # pour les ancres internes
**Qu'est-ce qu'un lien hypertexte ?**
Un lien hypertexte (ou simplement "lien") est un élément cliquable qui permet de **naviguer** d'une page à une autre, ou d'un endroit à un autre dans la même page.
**Pourquoi "hypertexte" ?**
• **Hyper** = au-delà, supérieur • **Texte** = contenu textuel • **Hypertexte** = texte enrichi avec des liens de navigation non linéaire
**Rôle essentiel des liens** :
🌐 **Navigation** : • Passer d'une page à une autre • Explorer un site web • Connecter différents sites entre eux
📚 **Organisation** : • Structurer l'information • Créer une hiérarchie de contenus • Relier des informations connexes
🔍 **Référencement (SEO)** : • Google suit les liens pour explorer le Web • Plus un site a de liens entrants, mieux il est référencé • Structure de liens interne importante
**Historique** :
• **1989** : Tim Berners-Lee invente le concept de lien hypertexte • **1991** : Premier site web avec liens cliquables • **Aujourd'hui** : Des milliards de liens sur le Web
**Métaphore** :
Imaginez le Web comme une **immense toile d'araignée** : • Chaque page = un nœud de la toile • Chaque lien = un fil qui relie les nœuds • Sans les fils (liens), pas de toile !
**Types de liens** :
🔗 **Liens externes** : • Vers d'autres sites web • Exemple : lien vers Google, Wikipedia
🏠 **Liens internes** : • Vers d'autres pages du même site • Exemple : menu de navigation
⚓ **Ancres** : • Vers une section de la même page • Exemple : table des matières, "retour en haut"
📧 **Liens spéciaux** : • Email (mailto:) • Téléphone (tel:) • SMS (sms:)
# Simulation de navigation par liens
class PageWeb:
def __init__(self, url, titre):
self.url = url
self.titre = titre
self.liens = []
def ajouter_lien(self, page_destination):
"""Ajoute un lien vers une autre page."""
self.liens.append(page_destination)
def afficher(self):
"""Affiche la page et ses liens."""
print(f"\n{'=' * 50}")
print(f"PAGE : {self.titre}")
print(f"URL : {self.url}")
print(f"{'=' * 50}")
if self.liens:
print("\nLiens disponibles :")
for i, lien in enumerate(self.liens, 1):
print(f" [{i}] → {lien.titre}")
else:
print("\nAucun lien sur cette page.")
# Création d'un petit site web
accueil = PageWeb("https://monsite.com/", "Accueil")
blog = PageWeb("https://monsite.com/blog", "Blog")
contact = PageWeb("https://monsite.com/contact", "Contact")
google = PageWeb("https://www.google.com", "Google")
# Ajout de liens
accueil.ajouter_lien(blog)
accueil.ajouter_lien(contact)
accueil.ajouter_lien(google)
blog.ajouter_lien(accueil)
contact.ajouter_lien(accueil)
# Simulation de navigation
print("=== SIMULATION DE NAVIGATION WEB ===")
accueil.afficher()
print("\n→ Utilisateur clique sur 'Blog'")
blog.afficher()
print("\n→ Utilisateur clique sur 'Accueil'")
accueil.afficher()
# Statistiques
print("\n=== STATISTIQUES DU SITE ===")
toutes_pages = [accueil, blog, contact, google]
total_liens = sum(len(p.liens) for p in toutes_pages[:3]) # Sans compter Google
print(f"Pages du site : {len(toutes_pages) - 1}")
print(f"Total de liens internes : {total_liens}")
print(f"Liens externes : {len([l for l in accueil.liens if 'google' in l.url.lower()])}")Quiz de validation
1. Quelle balise HTML crée un lien hypertexte ?
2. Quel attribut est OBLIGATOIRE sur une balise <a> ?
3. Comment créer un lien qui s'ouvre dans un NOUVEL onglet ?
4. Comment créer un lien vers une SECTION de la même page ?
5. Comment créer un lien EMAIL ?
