Chapitre 180 | Les liens Hypertexte – CDUI <code is my friend>

Objectifs pédagogiques

Dans cette activité, les apprenants découvriront :

Comment créer des liens internes reliant différentes pages d’un site.
Comment styliser des liens hypertexte pour indiquer leur état (normal, survolé, visité et actif).
Comment structurer un projet avec une séparation claire entre HTML et CSS pour de bonnes pratiques professionnelles.
L’importance d’une navigation intuitive grâce à la mise en évidence de la page courante.

Structure du projet

link-hypertexte/
├── index.html   (page principale)
├── page1.html   (première page secondaire)
├── page2.html   (seconde page secondaire)
├── css/
    └── style.css   (fichier CSS pour styliser les pages)

1. Fichier CSS : `css/style.css`

Le fichier CSS est conçu pour gérer les différents états des liens, styliser les titres et rendre la navigation visuellement claire.

Contenu de `style.css` :

/* Style général */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f9f9f9;
}

/* Titres */
h1, h2 {
    color: #333;
    margin-bottom: 10px;
}

/* Liens hypertexte */
a {
    text-decoration: none;
    color: blue;
}
a:hover {
    color: red;
}
a:visited {
    color: purple;
}

/* Liste des liens */
ul {
    list-style: none;
    padding: 0;
}
li {
    margin-bottom: 5px;
}

/* Lien actif ou courant */
.current {
    font-weight: bold;
    color: black;
    pointer-events: none;
    text-decoration: underline;
}

2. Page principale : `index.html`

La page d’accueil contient des liens vers elle-même, page1.html et page2.html, avec une mise en évidence du lien actif.

Contenu de `index.html` :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page d'accueil</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Page d'accueil</h1>
    <p>Bienvenue sur la page principale. Utilisez les liens ci-dessous pour naviguer :</p>

    <ul>
        <li><span class="current">Accueil</span></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
    </ul>
</body>
</html>

3. Première page secondaire : `page1.html`

Cette page permet de naviguer vers toutes les pages tout en mettant en évidence son propre lien.

Contenu de `page1.html` :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Page 1</h1>
    <p>Vous êtes maintenant sur la page 1. Utilisez les liens ci-dessous pour naviguer :</p>

    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><span class="current">Page 1</span></li>
        <li><a href="page2.html">Page 2</a></li>
    </ul>
</body>
</html>

4. Seconde page secondaire : `page2.html`

De même, la page 2 met en évidence son propre lien tout en permettant une navigation vers les autres pages.

Contenu de `page2.html` :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 2</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Page 2</h1>
    <p>Vous êtes maintenant sur la page 2. Utilisez les liens ci-dessous pour naviguer :</p>

    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><span class="current">Page 2</span></li>
    </ul>
</body>
</html>

5. Explication des états des liens en CSS

Voici une explication des styles appliqués aux liens :

Normal (a) : le style de base des liens est défini ici. Ils sont bleus et sans soulignement.cssCopier le codea { text-decoration: none; color: blue; }
Survolé (a:hover) : lorsque la souris passe au-dessus d’un lien, sa couleur devient rouge pour indiquer une interaction possible.cssCopier le codea:hover { color: red; }
Visité (a:visited) : si un lien a déjà été cliqué, il change de couleur pour devenir violet, informant l’utilisateur qu’il a déjà visité la page cible.cssCopier le codea:visited { color: purple; }
Lien courant (.current) : un lien vers la page actuelle est mis en valeur avec un style particulier :
- Gras : pour le différencier des autres liens.Couleur noire : pour indiquer qu’il est actif.Désactivation des clics : avec pointer-events: none, l’utilisateur ne peut pas cliquer dessus inutilement.
- .current { font-weight: bold; color: black; pointer-events: none; text-decoration: underline; }

Conclusion

Ce projet illustre une navigation simple et intuitive entre plusieurs pages, en introduisant une gestion efficace des liens avec le CSS. Les apprenants ont une structure professionnelle avec des concepts comme :

L’état des liens pour améliorer l’ergonomie.
L’importance de la différenciation visuelle pour indiquer la page active.
La séparation claire entre HTML et CSS pour une maintenance facilitée.

Corrigé

Corrigé (archive zip)

Vous devrez peut être outrepasser l’alerte de sécurité de téléchargement

Comment ouvrir une page dans un nouvel onglet ?

Pour ouvrir une page dans un nouvel onglet en HTML, on utilise l’attribut target dans une balise de lien <a>. L’attribut target="_blank" spécifie que le lien doit s’ouvrir dans un nouvel onglet du navigateur. Voici un exemple simple :

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

Explications :

href : Cet attribut contient l’URL de la page que l’on souhaite ouvrir.
target="_blank" : Indique au navigateur d’ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre, selon les paramètres du navigateur.

Attention : Pour des raisons de sécurité, il est recommandé d’ajouter l’attribut rel="noopener noreferrer" lorsque vous utilisez target="_blank". Cela empêche la page ouverte d’avoir accès à l’objet window.opener, réduisant ainsi les risques de vulnérabilité. Exemple :

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visitez Example en toute sécurité</a>

Ainsi, l’ouverture dans un nouvel onglet devient à la fois pratique et sécurisée.

Exercice

Ajouter un lien vers www.google.fr sur la page index.html qui s’ouvre dans un nouvel onglet.
Au survol, le lien passe en RED et en GRAS et en souligné.

Corrigé

Note

rel="noopener noreferrer" est recommandé pour des raisons de sécurité, mais pas obligatoire. Si le lien pointe vers une source fiable comme Google, vous pouvez le simplifier en omettant cet attribut.

Lien sur une image

<div class="center-container">
    <a href="https://www.google.fr" target="_blank" class="image-link">
        <img src="https://picsum.photos/id/10/300/200" alt="Image Placeholder">
    </a>
</div>

/* Style pour centrer le div */
.center-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100vh; /* Hauteur de la page pour centrer verticalement */
}

/* Style de l'image */
.image-link img {
    width: 300px;
    height: 200px;
    border: 2px solid #ddd;
    transition: transform 0.3s, border-color 0.3s;
}

.image-link img:hover {
    transform: scale(1.1);
    border-color: red;
}

HTML :

Le lien <a> contient l’image.
La classe image-link est utilisée pour cibler le lien et son contenu dans le fichier CSS.

CSS :

Les styles par défaut définissent la taille de l’image et sa bordure.
Le pseudo-classe :hover ajoute un effet de zoom et change la couleur de la bordure au survol.

Précision

En HTML, tout élément contenu dans une balise <a> devient cliquable. Cela signifie que non seulement le texte d’un lien, mais également des éléments comme une image, un <div>, ou tout autre élément HTML placé à l’intérieur du <a> peut agir comme un lien.

Exemple avec une image :

<a href="https://www.google.fr" target="_blank" class="image-link">
    <img src="https://picsum.photos/id/10/300/200" alt="Image Placeholder">
</a>

Explication : Ici, l’image <img> est contenue dans la balise <a>, donc elle est entièrement cliquable. Lorsque vous cliquez sur l’image, le lien défini dans href sera activé.

Exemple avec un `<div>` :

<a href="https://www.google.fr" target="_blank" class="block-link">
    <div style="width: 300px; height: 200px; background: lightblue; display: flex; align-items: center; justify-content: center;">
        Cliquez ici
    </div>
</a>

Explication : Dans cet exemple, un <div> stylisé est contenu dans le <a>. Cela rend tout le bloc <div> cliquable, comme un bouton.

Points importants :

Accessibilité : Envelopper des éléments comme une image ou un bloc dans une balise <a> rend l’expérience utilisateur intuitive : cliquer sur l’image ou le bloc déclenche l’action de lien.
Bonne pratique : S’assurer que l’élément cliquable est suffisamment grand pour une interaction facile, surtout sur les écrans tactiles.

Exercice

Faites un essai from scratch en rendant un DIV cliquable puis analysez cet exemple de corrigé.

Chapitre 180 | Les liens Hypertexte

Objectifs pédagogiques

Structure du projet

1. Fichier CSS : css/style.css

Contenu de style.css :

2. Page principale : index.html

Contenu de index.html :

3. Première page secondaire : page1.html

Contenu de page1.html :

4. Seconde page secondaire : page2.html

Contenu de page2.html :

5. Explication des états des liens en CSS

Conclusion

Corrigé

Comment ouvrir une page dans un nouvel onglet ?

Explications :

Exercice

Note

Lien sur une image

Précision

Exemple avec une image :

Exemple avec un <div> :

Points importants :

Exercice

1. Fichier CSS : `css/style.css`

Contenu de `style.css` :

2. Page principale : `index.html`

Contenu de `index.html` :

3. Première page secondaire : `page1.html`

Contenu de `page1.html` :

4. Seconde page secondaire : `page2.html`

Contenu de `page2.html` :

Exemple avec un `<div>` :