Les liens internes
Particularités du fichier index.html
Le fichier index.html est un fichier particulier. En effet, lorsqu'on accède à un dossier sur un serveur web, le serveur va automatiquement chercher un fichier nommé index.html pour l'afficher. Par conséquent, si vous avez un fichier index.html dans votre dossier, vous pouvez accéder à ce dossier sans avoir à spécifier le nom du fichier dans l'URL. Par exemple, si votre site est hébergé à l'adresse www.mon-site.com et que vous avez un fichier index.html dans le dossier racine de votre site, vous pouvez simplement accéder à www.mon-site.com pour voir le contenu de ce fichier index.html.
La paire de balise <a>
Pour créer un lien en HTML, on utilise la paire de balise <a>. La balise <a> est utilisée pour créer des liens hypertextes vers d'autres pages web, des fichiers, des adresses e-mail, etc. La syntaxe de base pour créer un lien est la suivante :
<a href="URL">Texte du lien</a> Où URL est l'adresse vers laquelle le lien doit pointer, et Texte du lien est le texte cliquable qui sera affiché sur la page web.
Exemple
Voici un exemple de lien interne entre deux fichiers HTML :
<!-- Contenu de la balise body de index.html -->
<body>
<h1>Je suis la page index.html</h1>
<a href="toto.html">Cliquer ici pour aller sur toto.html</a>
</body>
<!-- Contenu de la balise body de toto.html -->
<body>
<h1>Je suis la page toto.html</h1>
<a href="index.html">Cliquer ici pour aller sur index.html</a>
</body>Fichiers exercices
Les fichiers exercice correspondant à cette section peuvent se télécharger ici :
Les liens internes complexes
Noms de dossiers et fichiers
La casse dans les liens
Lorsque vous créez des liens internes, il est important de faire attention aux noms de dossiers et de fichiers. En effet, les liens sont sensibles à la casse, ce qui signifie que toto.html et TOTO.html sont considérés comme deux fichiers différents. C'est pourquoi, il est recommandé d'utiliser des noms de fichiers et de dossiers en minuscules pour éviter toute confusion.
Par exemple, au lieu d'avoir un fichier nommé TOTO.html, il serait préférable de le nommer toto.html.
Les espaces dans les liens
De plus, il est recommandé d'utiliser des noms de fichiers et de dossiers sans espaces, en utilisant plutôt des tirets (-) ou des underscores (_) pour séparer les mots. Les tirets sont à privilégier car ils sont plus lisibles.
Par exemple, au lieu d'avoir un fichier nommé ma page.html, il serait préférable de le nommer ma-page.html ou ma_page.html.
Les caractères accentués et spéciaux dans les liens
Pour finir, il faut également éviter les caractères accentués ainsi que les caractères spéciaux dans les noms de fichiers et de dossiers, car cela peut causer des problèmes de compatibilité avec certains serveurs web ou navigateurs.
Par exemple, au lieu d'avoir un fichier nommé @-intégrer-liens-complexes.html, il serait préférable de le nommer at-integrer-liens-complexes.html.
Entrer dans un dossier avec un lien
Pour créer un lien vers un fichier qui se trouve dans un dossier, il suffit d'ajouter le nom du dossier suivi d'un slash (/) avant le nom du fichier dans l'attribut href de la balise <a>.
Par exemple, si vous avez un fichier nommé index.html qui se trouve dans un dossier nommé mon-dossier, vous pouvez créer un lien vers ce fichier en utilisant la syntaxe suivante :
<a href="mon-dossier/index.html">
Cliquer ici pour aller dans le dossier "mon-dossier"
</a>Sortir d'un dossier avec un lien
Pour créer un lien vers un fichier qui se trouve dans le dossier parent du dossier actuel, il suffit d'ajouter deux points (..) suivi d'un slash (/) avant le nom du fichier dans l'attribut href de la balise <a>.
Par exemple, si vous êtes dans un fichier qui se trouve dans le dossier mon-dossier et que vous voulez créer un lien vers un fichier nommé toto.html qui se trouve dans le dossier parent, vous pouvez utiliser la syntaxe suivante :
<a href="../toto.html">
Cliquer ici pour aller sur toto.html
</a> Pour sortir d'un dossier et accéder à un fichier index.html, il est également possible d'utiliser la syntaxe suivante :
<a href="../">
Revenir à la racine du site
</a> Attention :
Cette méthode fonctionne uniquement si le fichier cible est nommé index.html ET que le fichier est consulté à l'aide d'un serveur (par exemple le plugin Live Server ou le local host de Eleventy). Si le fichier cible a un autre nom, il faudra utiliser la syntaxe précédente en spécifiant le nom du fichier.
Erreur 404
Si vous essayez d'accéder à un fichier qui n'existe pas ou si le chemin vers le fichier est incorrect, vous obtiendrez une erreur 404. Cette erreur signifie que la page demandée n'a pas été trouvée sur le serveur. Pour éviter cette erreur, assurez-vous que les noms de fichiers et de dossiers sont corrects et que les chemins dans vos liens sont bien formés.
Fichiers exercices
Les fichiers exercice correspondant à cette section peuvent se télécharger ici :
Les liens externes
Les liens externes sont des liens qui pointent vers des ressources situées sur d'autres sites web. Pour créer un lien externe, il suffit d'utiliser la même syntaxe que pour les liens internes, mais en spécifiant l'URL complète de la ressource cible dans l'attribut href de la balise <a>.
Par exemple :
<a href="https://www.alphorm.com">
Aller sur Alphorm
</a>Attribut target="_blank"
Il est également possible d'ouvrir le lien dans un nouvel onglet en ajoutant l'attribut target="_blank" à la balise <a>.
Par exemple :
<a href="https://www.alphorm.com/formations/categorie/opensource" target="_blank">
Aller sur une page du site Alphorm
</a>Attribut rel="noopener noreferrer"
Lorsque vous créez des liens externes, il est recommandé d'ajouter l'attribut rel="noopener noreferrer" à la balise <a> pour des raisons de sécurité. Cet attribut empêche la page cible d'accéder à la page d'origine via l'objet window.opener, ce qui peut aider à prévenir certaines attaques de type "tabnabbing".
Par exemple :
<a href="https://www.alphorm.com" target="_blank" rel="noopener noreferrer">
Aller sur Alphorm
</a>Valeur "noopener"
La valeur noopener de l'attribut rel empêche la page cible d'accéder à la page d'origine via l'objet window.opener. Cela signifie que si un utilisateur clique sur un lien avec target="_blank" et que le lien contient rel="noopener", la page cible ne pourra pas manipuler la page d'origine, ce qui peut aider à prévenir certaines attaques de type "tabnabbing".
Valeur "noreferrer"
La valeur noreferrer de l'attribut rel empêche le navigateur d'envoyer des informations de référence (referrer) à la page cible lorsque l'utilisateur clique sur le lien. Cela signifie que la page cible ne saura pas d'où provient le trafic, ce qui peut aider à protéger la vie privée de l'utilisateur.
Définition "tabnabbing"
Le tabnabbing est une technique d'attaque de phishing qui exploite la capacité d'une page web à ouvrir des liens dans de nouveaux onglets ou fenêtres. L'attaquant crée une page web malveillante qui ressemble à une page de connexion légitime (par exemple, une page de connexion à un service en ligne).
Lorsque l'utilisateur clique sur un lien vers cette page malveillante, elle s'ouvre dans un nouvel onglet ou une nouvelle fenêtre. Ensuite, l'attaquant peut utiliser du code JavaScript pour rediriger l'utilisateur vers la page de connexion légitime après un certain délai, ce qui peut amener l'utilisateur à entrer ses informations d'identification sur la page malveillante sans se rendre compte de la supercherie.
Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : index.html
Les liens ancres
Il est possible d'utiliser l'attribut name pour créer des ancres dans une page HTML. Une ancre permet de créer un point de référence dans la page vers lequel un lien peut diriger l'utilisateur.
Par exemple :
<a name="haut"></a>
<a href="#haut">Revenir en haut</a> Dans cet exemple, la balise <a name="haut"> crée une ancre nommée "haut" dans la page. Ensuite, le lien <a href="#haut"> permet à l'utilisateur de revenir en haut de la page lorsqu'il clique dessus.
Attention :
L'utilisation de l'attribut name pour créer des ancres est obsolète. Il est recommandé d'utiliser l'attribut id à la place.
Par exemple :
<h1 id="haut">Je suis la page index.html</h1>
<a href="#haut">Revenir en haut</a> Dans cet exemple, la balise <h1 id="haut"> crée une ancre nommée "haut" dans la page. Ensuite, le lien <a href="#haut"> permet à l'utilisateur de revenir en haut de la page lorsqu'il clique dessus.
Il est également possible de créer des liens vers des ancres situées dans d'autres pages en utilisant la syntaxe suivante :
<a href="page.html#ancre">
Aller à la section "ancre" de la page "page.html"
</a>Fichiers exercices
Les fichiers exercice correspondant à cette section peuvent se télécharger ici :
Autres types de lien
Lien mailto
Il est possible de créer un lien qui permet d'envoyer un email en utilisant le protocole mailto:. Pour ce faire, il suffit d'utiliser la syntaxe suivante :
<a href="mailto:exemple@example.com">Ecrivez-moi</a>Lorsque l'utilisateur clique sur ce lien, son client de messagerie par défaut s'ouvrira avec une nouvelle fenêtre de composition d'email, et l'adresse email spécifiée dans le lien sera automatiquement remplie dans le champ "A".
Lien vers un PDF
Il est également possible de créer un lien vers un fichier PDF en utilisant la syntaxe suivante :
<a href="recettes/banana-bread-healthy-500g.pdf" target="_blank" rel="noopener noreferrer">
Recette d'un <strong>Banana Bread healthy selon ChatGPT</strong>
</a>Lorsque l'utilisateur clique sur ce lien, le fichier PDF spécifié dans le lien s'ouvrira dans un nouvel onglet ou une nouvelle fenêtre de son navigateur, en fonction de la configuration de son navigateur.
Fichiers exercices
Les fichiers exercice correspondant à cette section peuvent se télécharger ici :