Le principe même d'un document HTML (HyperText Markup Language), est de présenter des informations de différentes sources et de permettre au visiteur de naviguer entre ces informations de façon simple et le plus clairement possible. Pour cela, nous disposons de la balise <a>, </a> pour anchor ou ancre.

Il existe plusieurs types de liens qui utilisent tous cette balise.

• Liens entre les différentes pages d'un site
• Liens entre différentes parties d'une même page
• Liens vers des pages d'autres sites sur Internet
• Liens pour télécharger des fichiers (photos, vidéos programmes etc.)
• Liens pour envoyer des courriels

Les liens entre les pages d'un site sont les plus fréquents. Plus votre site prendra du volume et plus vous aurez de liens de ce type. La syntaxe est simple: <a href="page3.html">Page numéro 3</a>.

La partie rouge est obligatoire et présente quel que soit le type de lien. Elle indique le fichier que vous voulez télécharger. La présentation est super simple; Un texte bleu souligné qui, lorsque le curseur de la souris passe dessus, celui-ci se tarnsforme en main. Cliquez. Bien que la partie en bleu ne soit pas obligatoire, elle est fortement recommandée. Son absence interdirait au visiteur de faire quoi que ce soit.

Sur certains sites on trouve de nombreux liens vers des sites extérieurs. En général, il est intéressant d'ouvrir ces sites dans des onglets ou des pages différents de la page courante. Pour cela on utilise un attribut de la balise <a>: target="nom". Nom représente la cible dans laquelle s'ouvrira la nouvelle page. <a href="http://www.sncf.com" target="_blank">SNCF</a> SNCF. _blank oblige votre navigateur à ouvrir un nouvel onglet dans lequel viendra le site. Dans le cas d'un site comme celui que vous regardez, les liens sont sur le menu à gauche et les pages s'ouvrent sur la page principale car la fenêtre principale (frame) a reçu un nom et c'est ce nom qui est indiqué dans l'attribut target.

Sur la page "Tableaux et listes" vous avez un lien qui permet d'aller directement sur les listes et un autre qui revient en haut de la page. Pour faire cela, j'ai créé une référence interne appelée listes à l'endroit qui deviendra le haut de ma page à l'écran. La syntaxe de cette référence est: <a name="listes"></a>. Cette référence doit être collée contre la marge gauche de votre page de code. Le lien pour aller à la référence listes est : <a href="#listes">Listes</a>. Il ne faut pas oublier le signe # dans le lien si vous voulez que ça fonctionne.

Si vous voulez permettre à vos visiteurs de télécharger une ressource quelconque comme une vidéo par exemple, le lien doit comporter le nom et le chemin complets de la ressource. <a href="../video/2016/Versailles.mov">Château de Versailles</a>.

Un lien pour un courriel est un peu plus complexe mais ne pose pas de réelle difficulté. <a href="mailto:fnauche@free.fr?subject=Mon site gratuit"><b>M</b>'écrire</a>. Ce type de lien ouvre le client de messagerie de votre visiteur et remplit automatiquement la zone A: ou Pour: et la zone Object: ou Sujet:. mailto: est obligatoire sinon votre lien n'aurait aucun sens. Si vous ne voulez pas de sujet, supprimez la partie bleue de l'adresse. C'est sympa mais peut mieux faire. Vous pouvez, en plus, remplir les zones CC et CCi. Pour ces deux dernière zones utilisez : "&cc=" et "&bcc=" suivis de la ou des adresses concernées. En cas de plusieurs adresses sur la même zone, séparez les par des virgules. A partir du moment ou vous mettez des arguments après votre adresse, le point d'interrogation devient obligatoire.

Il reste encore une zone qui n'a pas été renseignée, c'est le corps du message. La solution c'est "&body=" suivi du message. Si vous voulez un passage à la ligne, remplacez le par les caractères "%0D%0A"; pour un saut de ligne, doublez ces caractères. Il est à noter que ce type de lien ne fonctionne pas si aucun client de messagerie n'est installé sur la machine de votre visiteur. C'est pourquoi j'ai noté mon adresse mail sous le lien. Si vous-même n'avez pas de client de messagerie, il faudra que vous en installiez un ne serait-ce que pour tester votre lien sur votre site. On en trouve des gratuits sur Internet. Je vous mets l'adresse de celui que j'utilise.

 https://www.mozilla.org/fr/thunderbird/ 
D'une façon générale, testez systématiquement vos pages, ça vous évitera des surprises. Nous reviendrons sur les liens sur la page suivante dédiée aux photos.

Il existe des sélecteurs pour la balise <a> qui permettent en particulier de savoir quelles pages ont été visitées. Le fait de mettre en évidence les pages visitées peut être embêtant pour les personnes qui visitent des sites légers. Je vous donne tout de même le sélecteur, il s'agit de a:selected. Nous n'allons utiliser que a et a:hover. a est le lien "au repos" et a:hover est le lien lorsque le curseur de la souris est positionné dessus. Nous allons modifié leur apparence dans une feuille de style.


 SNCF 

Le a.lien représente l'ensemble des liens du site déclarés avec class="lien" et a.lien:hover décrit les mêmes liens lorsque le curseur de la souris passe dessus. text-decoration: none supprime le trait de soulignement des liens dont la classe est "lien". Il vaut mieux, si votre site comporte plusieurs pages, mettre la description du style dans la feuille de style. Votre site est maintenant prêt pour la navigation.

 Photos