Le langage HTML/Liens
Introduction.
Un lien (également appelé « lien hypertexte », d'où le nom d'HTML) est un mot ou groupe de mots permettant, après avoir cliqué dessus, d'ouvrir un fichier. Si ce fichier est une page HTML ou un fichier texte (codice_1 ou autre), il s'affichera dans le navigateur à la place ou en plus de la page actuelle. S'il s'agit d'un autre type de fichiers, le navigateur demandera généralement de sélectionner une application pour ouvrir le fichier ou d'enregistrer le fichier. Il est possible que l'utilisateur ait installé une extension "(plug-in)" pour pouvoir lire certains types de fichiers.
"Note" : certains formats sont devenus si courants que la plupart des navigateurs les supportent sans que l'on ne doive installer d'extension. C'est le cas "notamment" des formats d'images les plus courants (codice_2, codice_3, codice_4, codice_5, codice_6, etc). Cela dépend évidemment du navigateur utilisé et surtout de sa version. Les plus récents supportent généralement aussi XML.
"Note" : certains navigateurs sont livrés avec les extensions gérant les formats les plus courants, comme Java ou Flash.
"Note" : l'installation de certains logiciels entraîne le support de certains types de fichiers sur certains navigateurs. C'est le cas notamment d'Adobe Reader 6.0.
Balise.
Pour créer un lien en HTML, on utilise les balises codice_7 et codice_7 (de l'anglais "" signifiant « ancre ») pour encadrer le contenu du lien (qui peut être du texte, une image, etc). La balise codice_7 dispose de trois attributs possibles :
Exemples :
<a href="https://fr.wikibooks.org">Lien vers Wikilivres</a>
<h1 id="ce_titre">La section avec une ancre</h1>
<a href="https://fr.wikipedia.org" target="_blank">Lien ouvrant Wikipédia dans une nouvelle fenêtre</a>
<a href="#ce_titre">Lien vers la section avec une ancre<a>
Les URL.
Une URL ("uniform resource locator"), indique au navigateur l'adresse où aller chercher une ressource ; par ressource, on entend autre page Web, mais aussi autre type de fichier : image, son…
Si le fichier à aller chercher se trouve dans le même répertoire (dossier) que la page Web que l'on écrit, on se contente de donner le nom du fichier. On a ici deux types d'adresses : les adresses relatives et les adresses absolues.
Liens absolus.
Un lien absolu indique l'adresse complète du fichier lié (de codice_13 à l'extension ou à l'extension du domaine).
Il est généralement utilisé pour afficher une page d'un autre site.
Exemple :
<a href="https://fr.wikipedia.org">Une encyclopédie vraiment géniale</a>
L'adresse absolue peut être utilisée lorsque l'objet se trouve sur son propre site, à condition que l'on soit sûr qu'il ne bougera pas ; par exemple, toutes les images sont mises dans un répertoire codice_14 qui ne sera jamais déplacé.
Dans ce cas, on peut omettre le protocole et le nom de domaine, en donnant une adresse commençant par un slash :
<img src="/images/exemple.jpg"> Une belle image.
L'utilisation de l'adresse absolue est obligatoire lorsque l'on fait un lien vers un objet situé sur un autre site Web, ou lorsqu'un autre protocole que HTTP est utilisé :
<a href="ftp://ftp.download.dom/mysoftware/">Télécharger le logiciel par FTP</a>.
Liens relatifs.
Un lien relatif indique l'adresse du fichier par rapport à la page actuelle. Il est vivement conseillé de l'utiliser le plus souvent dans son site web, car cela permet de changer d'hébergeur sans devoir rééditer chaque lien.
Si le fichier se trouve dans le même répertoire que la page courante, il suffit d'indiquer le nom du fichier (avec son extension). Si le fichier se trouve dans un sous-répertoire du répertoire contenant la page courante, il suffit d'indiquer le nom du répertoire, suivi d'une barre oblique « codice_15 » et du nom du fichier.
Exemples :
<a href="exemple.html">Lien vers le fichier « exemple.html » se trouvant dans le même répertoire que la
page actuelle</a>
<a href="repertoire_exemple/exemple.html">Lien vers le fichier « exemple.html » se trouvant dans le
répertoire « repertoire_exemple » qui se trouve dans le même répertoire que la page actuelle</a>
Si le fichier se trouve dans le répertoire parent du répertoire actuel, ou dans un sous-répertoire du répertoire parent, il faut « remonter » à l'aide de deux points « codice_16 ».
Exemple :
<a href="../exemple.html">Lien vers le fichier « exemple.html » se trouvant dans le répertoire parent 
du répertoire dans lequel se trouve la page actuelle</a>
L'utilisation de l'adresse relative est intéressante si l'objet visé est situé dans une branche de l'arborescence qui restera toujours solidaire. Si l'on déplace la branche (donc la page Web courante "et" l'objet), l'adresse relative reste valable.
Par contre, si la page Web change de répertoire et pas l'objet cible, l'adresse relative devient erronée.
Liens vers une ancre.
Une ancre permet d'afficher une page web à partir d'un certain point (très utile dans les longues pages web). Ainsi, ce lien affiche le chapitre « Liens » du livre « HTML » à partir de la section « Liens vers une ancre ».
Pour créer une ancre, il faut utiliser la balise codice_7 avec l'attribut codice_11, comme ceci (Il n'est pas nécessaire d'inclure du texte entre les deux balises) :
<a name="ancre_1"></a>
Lorsque l'ancre est vide, elle ne doit cependant pas être écrite sous la forme codice_7, formellement valide en XML, mais déconseillée par les normes XHTML et XML pour des raisons de compatibilité avec différents navigateurs.
Au lieu d'utiliser l'attribut codice_11, la syntaxe compatible HTML4 et HTML5 utilise l'attribut codice_21 sur n'importe quel élément.
Par exemple pour une ancre sur un titre de section :
<h1 id="ce_titre">La section avec une ancre compatible HTML4 et HTML5</h1>
Pour créer un lien vers une ancre, il suffit de rajouter un croisillon (#) suivi du nom de l'ancre après l'adresse (absolue ou relative) de la page.
Si l'ancre se trouve sur la page actuelle, il ne faut pas noter l'adresse de la page.
Exemples :
<a href="exemple.html#ancre_1">Lien vers l'ancre n°1 de la page "exemple.html"</a>
<a href="#ce_titre">Lien vers la section avec une ancre compatible HTML4 et HTML5</a>
Il faut cependant faire attention car les ancres sont soumis à la balise base.
Si dans l'entête de la page se trouve une référence à la base :
<base href="www.monsite.com" />
Un lien tel que :
<a href="#ce_titre">Lien vers la section avec une ancre compatible HTML4 et HTML5</a>
Ne redirigera pas vers l'ancre codice_22 de la page actuelle mais vers celle de la page définie dans la base. (Donc ici vers codice_23)
Comment ouvrir un lien dans une nouvelle fenêtre ?
L'attribut codice_12 permet de définir la cible du lien, c'est-à-dire l'endroit où sera ouvert le fichier du lien. Pour ouvrir le fichier dans une nouvelle fenêtre, assigner la valeur codice_25 à l'attribut codice_12.
Exemple :
<a href="https://fr.wikibooks.org" target="_blank">Lien ouvrant Wikilivres dans une nouvelle fenêtre</a>
"Note" : Les valeurs que peut prendre l'attribut target seront détaillées dans le chapitre des cadres.
"Remarque" : target="_blank" n'est valide que dans les DTD HTML et XHTML1.0 "frameset" et "transitional", mais ne peut être utilisé dans une DTD "strict". Le besoin éventuel d'ouvrir des liens dans une nouvelle fenêtre du navigateur doit donc conduire à opter pour une DTD "transitional".
Autres types de liens.
Nous avons vu que l'attribut codice_10 peut contenir autre chose que l'adresse d'une page Web. S'il contient un nom de fichier autre que HTML, cela télécharge le fichier, ou éventuellement cela ouvre le fichier avec un programme dédié (par exemple Adobe Acrobat Reader pour un fichier PDF).
Mais l'attribut codice_10 peut faire référence à des ressources disponibles par un autre protocole que le HTTP :