Le langage HTML/Liens

Le langage HTML

• Introduction
• Structure de base
• Bien commencer le HTML
• L'en-tête
• Caractères spéciaux et entités
• Titre et paragraphes
• Style de texte
• Placement des objets
• Liens
• Images
• Listes
• Tableaux
• Formulaires
• Cadres
• Multimédia
• Internationalisation
• Autres balises
• Zones de mise en forme
• XML et XHTML
• HTML5
• Conclusion
• Mots réservés

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 (.txt 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 (.bmp, .gif, .jpg, .png, .tif, 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 <a> et </a> (de l'anglais anchor signifiant « ancre ») pour encadrer le contenu du lien (qui peut être du texte, une image, etc). La balise <a> dispose de trois attributs possibles :

• href : permet d'indiquer l'adresse du lien ;
• name : permet de définir une ancre (voir #Liens vers une ancre, obsolète en HTML5) ;
• target : permet de définir la cible du lien (voir #Comment ouvrir un lien dans une nouvelle fenêtre ?).

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 https:// à 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 /images 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 « / » 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 « .. ».

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 ».

Cette syntaxe est obsolète en HTML5.

Pour créer une ancre, il faut utiliser la balise <a> avec l'attribut name, 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 <a name="section_5" />, 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 name, la syntaxe compatible HTML4 et HTML5 utilise l'attribut id 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 #ce_titre de la page actuelle mais vers celle de la page définie dans la base. (Donc ici vers www.monsite.com/#ce_titre)

Comment ouvrir un lien dans une nouvelle fenêtre ?

L'attribut target 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 _blank à l'attribut target.

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 href 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 href peut faire référence à des ressources disponibles par un autre protocole que le HTTP :

• transfert de fichier (protocole FTP) : par exemple href="ftp://ftp.gnu.org/".
• forum usenet (protocole NNTP) : par exemple href="news:fr.comp.infosystemes.www.auteurs".
• adresse de courriel (protocole SMTP) : par exemple href="mailto:jeveuxduspam@monfournisseur.fr".
• adresse de messagerie instantanée (protocole XMPP/Jabber) : href="xmpp:jeveuxduspim@monserveurjabber.fr".