LIENS HYPERTEXTE


Ce sujet est traité de manière exhaustive par de nombreux sites internet. Nous indiquerons l'essentiel et quelques commentaires pratiques.


LIEN DANS RÉPERTOIRE DIFFÉRENT

Imaginons que le fichier que nous créons se trovue dans un répertoire nommé rep1 et que la page à laquelle on veut accéder mapage.htm) par lien se trouve dans le répertoire rep2, ces 2 répertoires se trouvant eux-mêmes dans un même répertoire. Voilà le lien menant vers mapage.htm

<a href=".. /rep2/mapage_suivante.htm">mon lien</a>

Les 2 points .. indiquent que l'on remonte dans l'arborescence, le / indique un sous-répertoire.

Répétons qu'il est généraleemnt peu judicieux de créer des sous-répertoires et sous-sous-répertoires. La complication au niveau des liens apparai déjà évidente. Autant que possible, mettre les fichiers dans un même répertoire.


LIEN INTERNE

Le lien interne permet d'accéder à un point différent de la page où on se trouve. Le procédé consiste à créer une ancre au point où l'on veut arriver. L'activation du lien permettra d'afficher l'ancre en haut de l'écran.

<a name="monancre"></a>

Le lien vers cette ancre s'écrit:

<a href="#monancre">mon lien</a>

On peut utiliser les liens internes pour revenir en haut de la page à partir de différents points de cette page.

Traquenard Il est préférable de vérifier si les ancres sont bien reconnues par les wiever par défaut des mobiles dont on dispose.

Traquenard Si l'ancre se trouve quelque part dans le dernier écran de la page, elle ne pourra pas s'afficher en haut d'écran, ce qui peut perturber l'utilisateur, voire le programmeur néophyte qui ne comprend pas au premier abord cette anomalie.

Les liens internes évitent de créer des pages différentes pour chaque partie d'un article. Ils permettent également de reporter à des notes en fin de page. On préfèrera ce système aux infobulles qui peuvent poser problème sur les écrans tactiles.


LIEN EXTERNE

<a href="http://www.monsite.com">mon lien</a>


LIEN OUVRANT VERS UNE NOUVELLE FENÊTRE

Il est possible de permettre l'ouverture du lien externe sur un onglet différent du navigateur, notamment por un lien externe. Néanmoins, il est souvent préférable de laisser cette initiativeé à l'utilisateur (par un clic droit de la souvais). Signalons que cette fonctionnalité est inopérante sur une tablette ou un smartphone.

<a href="http://www.monsite.com" target="_blank">mon lien</a>


LIEN VERS UNE ADRESSE ÉLECTRONIQUE

<a href="mailto:mon_mail@gmail.com?subject=mon_objet">lien vers mail</a>

Pas toujours conseillé car le lien peut ouvrir un client de messagerie qui n'est pas paramétré. Il est plutôt conseillé d'indiquer dans le texte du lien l'adresse électronique elle-même afin qu'elle soit visible.


COULEURS DU LIEN ET MODIFICATIONS

Il est possible de donner à tous les liens d'un site une coloration spécifique pour le lien inactif, actif, visité en indiquant les styles css suivants (dans la page css ou dans la partie style du fichier en cours).

a:link { color: #000080 ; text-decoration: none }
a:visited { color: #000080 ; text-decoration: none }
a:active { color: #996699 ; text-decoration: none}
a:hover { color: #996699 ; text-decoration: none }

Ces liens plus esthétiques ont l'inconvénient de ne pas indiquer par eux-mêmes leur nature de lien, ce qui est notamment préjudiciable sur mobile où il est exclut de passer la souris pour voir apparaître les liens. Au contraire, les liens par défaut (en bleu soulignés) ont l'avantage d'indiquer clairement leur nature et d'éviter toute confusion. Malgré leur aspect inesthétique, le lien par défaut est encore le meilleur, on le préfèrera pour un document professionnel de travail.

Traquenard Le lien souligné par défaut possède cependant l'inconvénient, dans un document imprimé d'oblitérer un éventuel underscore.


ASPECT DU LIEN

Un lien peut être mis sur une image sur une boîte div. C'est souvent plus avantageux dans le cas des écrans tactiles où les liens doivent présenter une certaien surface.

<a href="mapage.htm"> <img src="mafleur.png" alt="fleur" style="border:0;"></a>


fleur

Remarque: la commande de style border:0 permet d'éviter un ligne autour de l'image à la couleur du lien. Certains navigateurs par défaut l'évitent même si l'annumation n'est pas indiquée, mais pas obligatoirement tous.

<a href="mapage.htm"> <div style="width:100px;background-color:green;line-height:40px;text-align:center;">mon lien</div> </a>


mon lien


DISTRIBUTION DES LIENS DANS LA PAGE

Une page web bien contruite doit considérer en priorité cet aspect, particulièrement pour les tablettes et smartphones. La manipulation tactile entraîne la nécessité de liens suffisamment espacés pour permettre le touch. Et Google risque de pénaliser votre site dans ses requêtes si vous ne satisfaites pas à ce critère. Le lien lui-même doit correspondre à une surface suffisamment importante, toujours pour facilier le touch. Ensuite, de nobmreux smartphones et minitablettes présentent l'inconvénient d'une certaine volatilité de leur contenu par suite d'un simple effleurement maladroit ou d'une prise en main de l'appareil. En effet, ces manœuvres entraînent l'ouverture intempestive d'un lien quelconque et la perte de la page sur laquelle on se trouvait. C'est le cas notamment lorsqu'on veut passer de main en main un smartphone pour montrer une page web. Cette instabilité de l'affichage est due souvent à une trop grande concentration des liens hypertexte et surtout leur mauvaise distribution dans la page. L'inconvénient se trouverait supprimé ou largement minimisée si les constructeurs prévoyaient un "isolement de l'écran: par une structure adéquate de l'appareili, notamment:

-l'existence dune marge physique suffisamment large autour de l'écran (au minimum 1 cm), de manière à ce que les doigts, sur le bord, ne déclenchent pas des actions intempestives

-une proéminence de l'encadrement par rapport à l'écran (au moins 5 mm) empêchant les doigts de déborder directement sur l'écran

Ces spécifications ne sont pas toujours respectées par les constructeurs qui cherchent à tirer parti au maximum de la dimension de l'appareil pour offrir l'écran le plus large possible. On peut considérer qu'ils ont raison dans la mesure où c'est au développeur d'éviter la trop grande proximité des liens avec le bord du document.

En résumé, on tentera le plus possible de prendre les précautions suivantes:

-séparer les liens verticalement de manière à ce qu'ils soient espacés sur l'écran d'une dimention de 1cm au minimum (cela correspond généralement à 2 balises ľt;br> entre les 2 titres, soit donc par trois balises <br> après le titre.

-veiller à ce que la surface des liens soit suffisante: éviter des liens sur des titres en minuscule, privilégier les liens sur boîte div ou icône gif d'une dimensiion avoisinant 1cm carré.

-ne mettre aucun lien à moins de 0,5 cm du bord droit et gauche de la page. Pour une page de texte dans un conteneur avec un width:90%, ceci est respecté

-Autant que possible, ne pas trop bourrer la page avec des liens, laisser des surfaces neutres non-réactives où les doigts peuvent se poser sans interagir avec un lien.

SOMMAIRE    SUITE