Vous savez que le HTML est un fichier texte hyper puissant.
La balise a est hyper importante !

Raison pour laquelle, nous y revenons. Et, en particulier, sur les valeurs de son attribut href.

La connaissance des valeurs de cet attribut permet d'aller partout ! Dans le fichier lui-même jusqu'au bout du monde.

Les types de liens

Ce qui est appelé par le lien se trouve :

dans la page elle-même (lien interne)
- lien bidon
hors de la page (lien externe)

Lien interne

Il est possible de pointer directement vers une partie de la même page. Ce qui est très utile lorsque la page ou la note est longue. La valeur de l'attribut href commence alors par # (dièse) suivi de la valeur de l'attribut id de la balise visée.

Toute balise HTML peut être identifiée. Un ID est une chaîne de caractères (sans espace) qui identifie de manière unique une balise (ouvrante).

Une balise fermante ne contient jamais d'attribut.

Le nom de l'attribut qui permet d'identifier une balise est id.

Exemple

<h1 id="partie7">Partie 7 : Conclusion</h1>

La valeur de cet attribut peut être quelconque mais doit être unique.
Aucun autre "id" ne peut avoir cette valeur (cependant cette valeur peut se retrouver dans le texte)

Un ID ne peut contenir ni espace, ni tabulation, ni caractères accentués, ni caractères spéciaux. Bref, il est recommandé de construire un ID qu'avec des chiffres, des lettres majuscules ou minuscules (non accentuées) ou le caractère _ (underscore)

Un ID est sensible aux majuscules/minuscules : "fin" est différent de "fiN".

ID valables : 12345, debut, ID_987, ...
ID non valables : #?&!", début, ID 987, ...

Toutefois, cette valeur sert aussi aux moteurs de recherche ...
Il convient d'être encore plus strict (pour s'assurer d'un bon référencement).

Les 37 caractères recommandés sont les 26 minuscules, les 10 chiffres et le trait d'union :

abcdefghijklmnopqrstuvwxyz0123456789-

Le trait d'union et le signe moins ont un code ASCII identique : 45

Comme un fichier pourrait être mis sur internet, le nom d'un dossier ou celui (sans extension) d'un fichier devrait être constitué que par ces 37 caractères.

Et, pour un bon référencement, ce nom devrait être constitué de mots-clés.

Et, comme un lien concis et clair vous aide à obtenir la confiance des internautes contrairement aux liens longs avec des chiffres, la longueur d'une URL devrait être limitée à 80 caractères ... (la longueur d'une ligne sur une page A4).

Exemples :

https://www.coupdoeil.eu/longueur-maximale-url
https://www.agence-churchill.fr/blog/bonnes-pratiques-optimisation-url

Et, pour aller directement à la partie 7 de la page, on écrira, par exemple, le lien suivant :

... <a href="#partie7">cliquez ici pour atteindre la partie 7 de cette page</a> ...

Le fait de pouvoir surfer dans la page elle-même permet de créer un menu (un ensemble de liens vers des parties de la page) et des retours (des liens) vers le menu.

Ci-dessous, un exemple de menu (navigation interne) :

Surfez sur cette page, puis regardez le code-source de cette page à la recherche des href="# et des id="

Le menu se trouve normalement en haut de page (pas comme ici)

Lien bidon

Un lien bidon est un lien dont la valeur de l'attribut href commence par # suivi de rien. Lorsqu'on clique sur ce lien s'affiche le début de la page.

... <a href="#">lien bidon 1</a> ...

Exemple : lien bidon 1

Eviter l'affichage du haut de page

Pour éviter qu'un lien bidon pointe vers le haut de la page, il faut ajouter un peu de JavaScript (qui sera étudié dans un autre mini-cours)

... <a href="#" onclick="return false;">lien bidon 2</a> ...

Exemple : lien bidon 2

Le lien bidon est souvent utilisé lorsque la page web est en cours de développement.

Retour au menu

Lien externe

Le fichier lié au fichier HTML :

se trouve sur le même disque dur (adresse relative)
ne se trouve pas sur le même disque dur, son adresse commence alors par http:// (adresse absolue)

Adresse relative

L'adresse relative vers un fichier situé sur le même disque dur (même espace) correspond au cas "classique". Et le cas le plus simple est lorsque le fichier appelé se trouve dans le même dossier. Dans ce cas, l'adresse est réduite à son seul nom. Exemple

Sur un serveur ou un ordinateur partagé par plusieurs utilisateurs, un disque dur est souvent découpé en espaces cloisonnés. Chaque espace requiert alors généralement un nom d'utilisateur et un mot de passe pour y déposer des fichiers, mais pas pour les consulter.

En principe, lorsqu'on rédige des notes en HTML, tous les fichiers sont situés dans le même dossier. Les informations suivantes ne sont données que pour être complet.

Si le fichier se trouve dans le dossier parent, l'adresse commence par ../

En supposant que tous les pages d'un cours se trouvent dans un dossier, et que tous les cours sont regroupés dans un dossier parent, et que ce dossier contient le fichier index.htm, on pourrait écrire :

... <a href="../index.htm">cliquez ici pour atteindre la liste de tous les cours</a> ...

Et si le fichier visé se trouve dans le dossier parent du dossier parent, le nom du fichier sera précédé par ../../

Si le fichier se trouve dans le dossier fils, l'adresse commence par nom_du_dossier_fils/ suivi du nom du fichier.

En supposant que toutes les illustrations d'un cours se trouvent dans un dossier fils, appelé images, et que le fichier visé s'appelle ma_photo.jpg, on pourrait écrire :

... <a href="images/ma_photo.jpg">cliquez ici pour voir ma photo</a> ...

Et si le fichier visé se trouve dans le dossier "2010" du dossier "images", l'adresse sera images/2010/ma_photo.jpg

Il est ainsi possible de cibler tout fichier par rapport à la position du fichier appelant dans l'arborescence du disque dur.
Exemple : ../../../images/2010/fevrier/ma_photo.jpg
Ici, on descend de trois niveaux, qui contient le dossier images qui contient le dossier 2010 puis contient le dossier fevrier qui contient le fichier ma_photo.jpg

Même si Windows l'autorise, il est fortement recommandé de suivre nommer les dossiers et les fichiers comme les ID; et fuir comme la peste : le caractère espace, les caractères accentués et spéciaux. En effet, il ne faut pas oublier que le fichier pourrait un jour être placé sur internet. Or, sur internet, Linux règne en maître ...

Adresse absolue

L'adresse absolue commence par http:// (ou https://, si le site est sécurisé) et indique l'adresse d'un fichier situé hors du disque dur du fichier appelant.

Rappel : Entre votre ordinateur et le serveur appelé, les données transitent par de nombreux serveurs ... Entre une banque et vous, tout le monde peut lire la communication ! (cfr le mini-cours Comprendre le web) Le site est sécurisé si la communication entre votre ordinateur et le serveur est cryptée. L'adresse commence alors par "https://". Votre navigateur et le serveur se mettent d'accord automatiquement sur une clé de cryptage unique. Ensuite, chacun crypte ce qu'il envoie à l'autre qui le décrypte.

Exemple

Lien vers le site chocoloup.be

www.chocoloup.be n'est pas l'adresse d'un fichier mais d'un dossier (ici le dossier racine du site). On aurait pu ajouter un / (slash). Taper http://www.chocoloup.be ou http://www.chocoloup.be/ revient strictement au même.

En realité, lorsque le serveur reçoit un appel qui ne concerne pas un fichier, il cherche le fichier par défaut du dossier, choisi par le gestionnaire du site (index.htm ou index.html ou index.php ou index.asp ou ...). Ici, index.php. Au final, taper http://www.chocoloup.be ou http://www.chocoloup.be/index.php revient au même. Toutefois la première adresse est plus facile à retenir (et plus sûre, le gestionnaire du site pouvant décider que le fichier par défaut sera dorénavant index.html ...). Mieux vaut donc donner l'adresse du site que l'adresse de la page d'accueil du site.

Souvent, taper le nom du site avec ou sans www. revient au même.
Mais, il faudra toujours taper http:// (ou https:// si le site est sécurisé)

<a href="http://www.chocoloup.be">chocoloup.be</a>

Le lien ne fonctionne que si le fichier existe !
(Et, si vous êtes connecté, que s'il se trouve sur internet)

Vers des fichiers spéciaux

Lorsque le navigateur ne sait pas ouvrir le fichier visé, il propose de le télécharger ou de l'ouvrir dans un autre logiciel.

Exemples :

<a href="http://.../mon_programme.exe">Télécharger mon nouveau programme</a>
<a href="ia.py" type="text/html">Code Python</a>

Media Types

Retour au menu

En résumé,

Le lien pointe vers une partie de la page en cours (lien interne) ou vers une autre page (lien externe).
Toute balise possède l'attribut id.
Un ID est une valeur qui identifie une balise de manière unique.
L'adresse du lien interne commence par # suivi de la valeur de l'attribut id de la balise visée.
L'adresse d'un lien externe absolu commence toujours par http:// (ou https:// si le site est sécurisé).
Lorsque le fichier ciblé se trouve sur le même disque dur, on peut utiliser une adresse relative.
L'adresse relative est relative à la position du dossier de la page web (fichier HTML) en cours dans l'arborescence du disque dur.
Chaque dossier-parent s'indique par ../
Le dossier-fils s'indique par / suivi de son nom

Les 27 balises différentes, utilisées sur cette page, sont : ['html', 'head', 'meta', 'link', 'title', 'body', 'div', 'header', 'p', 'a', 'article', 'br', 'strong', 'em', 'h1', 'ul', 'li', 'h2', 'mark', 'abbr', 'pre', 'aside', 'h3', 'details', 'summary', 'footer', 'script']