Liens hypertexte

Accueil des débutants


Les liens hypertexte sont l'âme même des pages Internet, en permettant d'aller d'une page à une autre par un simple clic de souris.

Préparation des exercices

Evidemment, un texte littéraire comme La chèvre de Monsieur Seguin a été conçu comme un tout, bien avant les microordinateurs, et il n'a pas besoin qu'on le truffe de liens qui casseraient le plaisir de la lecture. Nous allons respecter le texte, mais comme nous sommes là pour apprendre, nous allons imaginer que nous construisons un site, ou une partie de site, sur Les lettres de mon moulin. Il est alors logique qu'on trouve quelque part un menu qui conduise vers les autres contes de cet ouvrage, du moins ceux qui seraient retenus dans le site. Nous allons placer ce menu juste en dessous du titre général.

Recopiez le paragraphe en bleu ci-dessous (par copié-collé), juste entre nos titres en <H1> et en <H2> :
<h1 style="text-align: center; padding-top:2em;">LETTRES DE
  MON MOULIN, <br> d'Alphonse Daudet</h1>
<p style="font-size:80%">  
La chèvre de Monsieur Seguin - La mule du pape - Le curé de Cucugnan -
Les trois messes basses - Le secret de maître Cornille - 
L'Arlésienne - Le sous-préfet aux champs  
</p>
Sauvegardez et contrôlez sur le navigateur. Normalement, ces titres doivent apparaître juste en dessous du premier titre, sur la gauche de l'image de moulin à vent, et en petits caractères (à cause du font-size:80% qui donne des caractères à 80% de la taille générale).

(retour au menu)

Insertion des liens

arborescence

Nous allons évidemment mettre des liens sur ces titres pour aller sur les autres pages du site.

Encore faut-il que ces pages existent si on veut voir ces liens fonctionner. Pour aller plus vite, nous avons en esquissé deux, dans les fichiers suivants :
mule.html («La mule du pape»)
cucugnan.html («Le curé de Cucugnan»)
et nous les avons mises dans le sous-répertoire pages/, comme indiqué ci-contre. Nous nous limiterons à ces deux pages, mais le site réel devrait comporter des liens sur tous les titres cités.

Le lien s'obtient par une balise <a href="fichier_cible">...</a>fichier_cible doit être remplacé par le nom et l'adresse du fichier à charger.

Par exemple, dans notre exercice, ces liens se traduisent par les balises en bleu ci-dessous :
<h1 style="text-align: center; padding-top:2em;">LETTRES DE 
MON MOULIN, <br> d'Alphonse Daudet</h1>
<p style="font-size:80%">  
La chèvre de Monsieur Seguin - 
<a href="pages/mule.html">La mule du pape</a> - 
<a href="pages/cucugnan.html">Le curé de Cucugnan</a> -
Les trois messes basses - Le secret de maître Cornille - 
L'Arlésienne - Le sous-préfet aux champs  
</p>
Placez ces balises, sauvegardez et voyez le résultat. Les deux titres où on a placé un lien sont soulignés, et, si vous cliquez dessus, vous chargez l'une de nos deux autres pages, où vous trouverez le même menu pour revenir à chevre.html.
Si ça ne marchait pas, vérifiez bien que vous n'avez pas fait d'erreur (procédez par copié-collé, c'est plus sûr).

Vous avez le droit de trouver que ce soulignement en couleur des liens n'est pas très joli. Nous reviendrons sur ce point un peu plus loin.

A nouveau, il est beaucoup plus confortable de travailler avec un vrai éditeur HTML pour insérer des liens. On a juste à sélectionner les mots sur lesquels on va placer le lien, puis à chercher le bouton ou le menu «insérer un lien». La boîte de dialogue qui s'ouvre va proposer de chercher le fichier cible dans l'arborescence du disque dur et son adresse relative sera automatiquement reportée dans votre fichier HTML, sans risque d'erreur.

(retour au menu)

Lien vers l'extérieur

Si vous voulez charger une page en dehors de votre site, il faut donner son adresse absolue (c'est à dire http://etc...). Par exemple, pour inviter à aller sur le Coin des Experts, il faudrait coder
<a href="http://coin.des.experts.free.fr">pour aller au Coin</a>
Mais, ce faisant, le Coin s'ouvrirait dans la même fenêtre que votre site, comme s'il faisait partie de votre site. Par courtoisie — par modestie? — il est recommandé d'ouvrir une nouvelle fenêtre dans le navigateur, et cela s'obtient en ajoutant un attribut spécial dans la balise de lien
<a href="http://coin.des.experts.free.fr" 
      TARGET="_blank">pour aller au Coin</a>

Nous reparlerons de l'attribut TARGET quand nous en serons aux cadres.


(retour au menu)

Styles pour les liens (texte)

Les trois (ou quatre) états des liens
- les 4 états
- Pseudo-classes
- Suppression du
   soulignement

- Application
- Classes de liens

En principe, le navigateur peut donner par défaut trois couleurs aux liens

Ces couleurs par défaut sont définies par le visiteur dans les Préférences de son navigateur. Sinon, par défaut, le lien apparaît avec les mêmes caractères que le texte environnant, mais soulignés.

Les styles vont permettre de redéfinir entièrement le rendu des liens (la couleur, bien entendu, mais aussi toute la typographie, police, taille, etc...), transformant ainsi les trois couleurs précédentes en trois états du lien. Et, tant qu'à faire, on ajoutera un quatrième état, fort apprécié :

Les pseudo-classes de lien
menu local
Ces quatre états des liens sont évidemment contrôlés par la même balise <a>, et on peut bel et bien donner un style à cette balise. Par exemple, ajoutez
                     A {color:red}  
dans votre feuille de styles (interne ou externe), sauvegardez et regardez : tous les liens passent en rouge, et ils le restent, quel que soit leur état, visité ou non. Comme on tient à différentier ces états, il faut donc trouver mieux. La solution consiste à invoquer des pseudo-classes de liens, avec la syntaxe suivante:
                 A:link    {règle ; règle ; etc...} 
                 A:visited{règle ; règle ; etc...} 
                 A:active{règle ; règle ; etc...} 
                 A:hover{règle ; règle ; etc...}  

Le sélecteur de pseudo-classe ressemble à celui d'une classe sur A, à ceci près que le point est remplacé par un deux-points, et que vous ne pouvez pas choisir vous-même les noms après le deux-points. Les règles de style entre accolades sont ce que vous voudrez.

Il est toutefois déconseillé de mettre en oeuvre des styles «hover» qui changent la place occupée dans la page (changement de taille de la police, par exemple), car cela provoque une redistribution des éléments de toute la page que certains navigateurs se refusent à faire.
Suppression du soulignement
menu local
On veut souvent supprimer le soulignement des liens pour des raisons d'esthétique. La règle de style pour cela est
          text-decoration : none ;   

Attention, il faut que les liens restent immédiatement repérables car il n'est pas question d'explorer toute la page à leur recherche. Les liens qui sont noyés dans la masse du texte devront donc se singulariser d'une autre façon (écriture en couleur, italiques...), qui ne prête pas à confusion avec le procédé utilisé pour «souligner» du texte (au sens figuré). L'utilisation de l'état hover permettra au visiteur qu'il s'agit bien d'un lien.

Par contre, dans un menu, il est évident qu'il n'y a que des liens à peu près partout, et il est inutile de trop singulariser leur rendu. On pourra alors supprimer le soulignement sans hésiter et recourir à des couleurs de polices plus discrètes.

Application
menu local
A titre d'application, dans votre feuille de style, remplacez le A {color:red} précédent par les quatre lignes ci-dessous
                 A:link    {text-decoration:none; color:#800} 
                 A:visited{text-decoration:none; color:#080} 
                 A:active{text-decoration:none; color:#800} 
                 A:hover{text-decoration:none; color:red}  
Comme il est vraisemblable que vous avez déjà cliqué sur tous les liens, ajoutez un lien «bidon» dans chevre.html pour revoir l'état «link» (mais ne cliquez pas dessus)
    <a href="xxx.html">Le sous-préfet aux champs</a>  

Sauvegardez et observez l'effet. Les liens ne sont pas soulignés, mais il s'agit d'un menu, et l'effet hover permet de distinguer les liens actifs des entrées inertes. Nous avons choisi des couleurs sombres pour ne pas trop «jurer» par rapport au reste de la page, mais nous aurions pu shoisir encore plus sombre, voire du noir complet. Le contexte du menu et l'effet hover permettent immédiatement d'accéder aux liens.

En pratique, on peut se dispenser de remplir la ligne A:active, qui ne marche pratiquement jamais. En outre, si vous pouvez reggrouper les styles link et visited si vous renoncez à différentier ces deux états :
        A:link,A:visited {text-decoration:none; color:#800}
Quand on a un sélecteur multiple formé de plusieurs sélecteurs élémentaires séparés par des virgules, les règles s'appliquent à chacun de ceux-ci.
Classes de liens
menu local
Attention, ça se complique ! Pour une raison ou une autre, vous pouvez vouloir distinguer plusieurs catégories de liens dans votre page, chacune avec leur jeu de couleurs. Cela se fait en définissant des classes de liens, par exemple A.type1 pour une classe «type1» (vous prenez le nom que vous voudrez), puis en définissant nos trois ou quatre pseudo-classes sur cette classe :
                 A.type1:link    {règle ; règle ; etc...} 
                 A.type1:visited{règle ; règle ; etc...} 
                 A.type1:active{règle ; règle ; etc...} 
                 A.type1:hover{règle ; règle ; etc...}  
(En pratique, on peut sous-entendre le A initial, mais pas le point qui suit) Les liens de cette classe devront être appelés avec un attribut de classe:
   <a href="XX.html" class="type1">.... </a> 
Vous recommencez ensuite avec une autre classe «type2», etc...

(retour au menu)

Lien sur une image

On peut faire porter un lien aussi bien par une image que par du texte. Il suffit pour cela de mettre la balise <IMG> de l'image entre la balise ouvrante et la balise fermante du lien :
    <a href="page_cible"><img src=.... ></a> 
Cette possibilité est fondamentale pour tous les menus à base de boutons, boutons qui portent les liens et qui sont (généralement) autant d'images.

A titre d'exercice, nous allons placer un lien vers la page mule.html sur l'image de moulin à vent, juste pour voir ce qui se passe.

Placez les balises en bleu ci-dessous autour de l'image du début de la page (faites un copié-collé à partir des liens du menu juste après, que nous avons mis en italiques ci-dessous)
<body>
<a href="pages/mule.html"><img src="images/moulin.jpg"
    alt="moulin à vent"
    style="width:162px; height:248px; float:right;
    margin-right:30px; margin-bottom:20px; margin-left:8px;"></a>
<h1 style="text-align: center; padding-top:2em;">LETTRES DE MON 
MOULIN, <br> d'Alphonse Daudet</h1>

<p style="font-size:80%">   La chèvre de Monsieur Seguin - 
<a href="pages/mule.html">La mule du pape</a> - 
<a href="pages/cucugnan.html">Le curé de Cucugnan</a> -
Les trois messes basses - Le secret de maître Cornille - L'Arlésienne - 
Le sous-préfet aux champs</p>
copie ˇcran

Nous montrons à droite ce qui passe avec certains navigateurs (pas tous) et qu'il vaut mieux éviter, en général: l'image s'entoure d'un cadre aux couleurs retenues pour les liens. Avec Mozilla ou NN6, il présente même un effet hover si on a défini une pseudo-classe hover. A part cet effet fâcheux, le lien fonctionne : quand on passe sur l'image, le curseur se transforme en main, le signe qu'on survole un lien, et, si on clique, la page mule.html arrive, comme attendu.

Pour supprimer cette bordure indésirable, il suffit de préciser qu'on ne veut pas de bordure (border:none) dans le style de l'image.

Une variante plus sophistiquée consiste à utiliser un sélecteur descendant, une variante de sélecteur composite dans la feuille de style :
                    A IMG {border:none} 
ce qui veut dire que le style est appliqué à toute balise IMG se trouvant dans un bloc défini par une balise A, ce qui est bien le cas qui nous intéresse.

(retour au menu)

Ancres

On a souvent besoin d'ouvrir une page à un endroit précis, ou bien, en restant à l'intérieur d'une même page, d'aller d'un point à un autre sans jouer de l'ascenseur vertical. Par exemple, nous arrivons à la fin de notre histoire et nous voudrions revenir tout au début, par exemple pour retrouver le menu.

La manœuvre se fait en deux temps :

Application :
Nous allons ajouter un lien tout en bas de notre page cobaye chevre.html pour revenir au début.

1 - Pour cela, nous commençons par déposer une ancre «haut» sur le grand titre en H1 :
<h1 style="text-align: center; padding-top:2em;">
<a id="haut">LETTRES DE MON MOULIN</a>, 
<br>d'Alphonse Daudet</h1> 
2 - puis nous ajoutons les lignes ci-dessous tout à la fin de la page :
<br>
<a href="#haut"><I>Retour au début de la page</I></a>
</body>
</html>
Notez la balise <I>... </I> pour mettre ce lien en italiques, afin de le distinguer nettement du texte littéraire.

3 - Sauvegardez et observez : surprise ! (ou horreur!) Le lien est distendu sur toute la ligne. En effet ce lien hérite du style général text-align:justify défini pour le BODY et le navigateur ajoute autant d'espaces que nécessaire pour arriver au bout de la ligne avec les mots dont il dispose. Pour éviter cela, il faut terminer la ligne par un retour chariot <br> :
<br>
<a href="#haut"><I>Retour au début de la page</I></a><br>
</body>
</html>
4 - Cliquez sur le lien : la page remonte effectivement juste au titre, ce qui est bien ce que nous voulions... et qui coupe l'image de moulin à mi-hauteur, ce qui n'est pas très heureux sur le plan esthétique. Pour éviter ça, on déplacera l'ancre tout au début du document :
<body> 
<a id="haut"> </a>
<img src="images/moulin.jpg".... 
Notez qu'il n'y a plus rien entre les balises ouvrante et fermante pour l'ancre, mais ça doit marcher.
Dans les 4 étapes numérotées ci-dessus, seules les deux premières correspondent à la lettre à notre théorie générale des ancres. Les deux autres illustrent le type de surprise qui arrive constamment quand on bâtit un site. On pourrait souvent les éviter en réfléchissant un peu plus, mais cette démarche d'essais et d'erreurs fait partie du jeu :-))
Remarques

On voit donc qu'une «ancre» est tout simplement un identificateur ID. Nous avons déjà rencontré cet attribut, précisément pour caractériser un élément HTML arbitraire en vue de lui conférer un style.

Ici, on a créé une balise de lien inactive (c.à.d. sans attribut HREF ; le navigateur ne signale pas la présence de cette balise) pour placer cet identificateur, mais on pourrait le placer dans n'importe quelle balise déjà présente dans le code. Le lien de rappel vers l'ancre remettrait cette balise en haut de l'écran (du moins ce qui lui correspond dans la page affichée). Notamment, on peut placer cet identificateur dans un lien ordinaire :
      <a href="fichier.html" ID="point_de_retour">lien à cliquer</a>

Il existe un vieil attribut NAME qui rend les mêmes services que ID en tant qu'ancre. Un débutant peut l'oublier : un navigateur trop ancien pour comprendre les ancres avec ID ne sera pas pas capable de comprendre les styles sur lequel cet apprentissage est axé. Si toutefois vous ne voulez pas écarter ces antiquités, il faudra doubler vos attributs ID="identificateur" par des NAME="identificateur", avec exactement la même valeur.

(retour au menu)

Images «réactives» ou «à liens multiples»
ou «à zones sensibles»

Quand on met un lien ordinaire sur une image, toute l'image réagit au passage de la souris. Il est possible de découper des zones sensibles dans l'image avec des formes diverses (rectangles, cercles, polygones) qui porteront chacune un lien. Par exemple, sur une carte, on pourra transformer les noms des villes en autant de zones sensibles qui conduiront chacune vers une page appropriée.

Nous n'en dirons pas plus ici ; nous expliquons ailleurs le principe du codage de ces liens multiples [1]. Si on n'a pas un logiciel graphique spécialisé, la détermination des coordonnées des zones sensibles est un travail très fastidieux.


(retour au menu)

Ouverture d'un lien vers une nouvelle fenêtre :
l'attribut TARGET

Il arrive qu'on veuille ouvrir une nouvelle fenêtre pour charger la page pointée par le lien. C'est vivement conseillé quand on fait une référence à un site d'une autre personne, pour ne pas donner l'impression que vous annexez à votre propre site des pages qui ne vous appartiennent pas.

Cet effet s'obtient en plaçant un attribut TARGET="nom_de_fenêtre" dans votre lien, où nom_de_fenêtre est un nom arbitraire que vous attribuez à cette nouvelle fenêtre, par exemple
 <a href="..." TARGET="toto" >cliquez ici</a> 
La visite de vos pages se poursuit alors sur deux fenêtres indépendantes, la fenêtre mère et la fenêtre fille que vous avez appelée «toto». Chaque nouveau lien avec TARGET="toto" dans la fenêtre mère chargera la page correspondante dans la nouvelle fenêtre.
Au cas où vous vous demanderiez comment obtenir le comportement réciproque, c'est-à-dire comment charger une page dans la fenêtre mère à partir d'un lien dans la fenêtre fille, sachez que c'est faisable... mais fortement déconseillé à un débutant.

Si vous changez la valeur de l'attribut dans certains de vos liens, par exemple si vous passez à TARGET="tutu", vous ouvrirez une nouvelle fenêtre.

TARGET="_blank"

Enfin, la valeur _blank est tout à fait spéciale : elle ouvre automatiquement une nouvelle fenêtre à fois qu'on cliquera sur le lien. Il faut l'utiliser avec modération si on ne veut pas noyer le visiteur sous le nombre de fenêtres ouvertes en même temps (sans parler des risque de platage en cas de machine ancienne avec des ressources vidéo limitées).

Fenêtres « popup »

Pour anticiper une question probable de votre part, ne vous demandez pas comment on ouvre une nouvelle fenêtre avec des dimensions spécifiées, car ce serait nettement prématuré dans votre apprentissage. En jargon franglais, cela s'appelle des «popups» et cela demande un recours au javascript. Mais rassurez-vous, pour plus tard, nous avons tout un tutorial sur la question.


Retour en haut
Accueil des réponses
Page suivante :
les calques