Liens hypertextes

Afin de favoriser la navigation parmi toutes les pages mises en ligne, le recours aux liens hypertextes (ou hyperlien) s'avère incontournable.

Cette programmation se fera par l'utilisation de la balise <a href="..." target="...">lien_hypertexte</a>.

Attributs

href pour indiquer le chemin vers la page visée

href="../Repertoire/Fichier.htm" pour une page interne au site
href="http://www.site.com" pour une page externe au site
href="mailto:nom@domaine.fr" pour envoyer un mail

target pour définir le nom de la fenêtre dans laquelle se chargera la page

target="_blank" pour ouvrir une nouvelle fenêtre (à utiliser surtout lorsqu'un lien est créé vers un autre site)
target="_top" pour ouvrir une fenêtre plein écran
target="nom_fenetre" pour nommer la fenêtre ouverte
target="_self" pour rester dans la même fenêtre (argument par défaut)

Code

Le code suivant est à placer dans le <body>

<a href="Fichier.htm">lien_hypertexte</a>

<a href="http://www.google.fr" target="lien">google</a>

Résultat

Lien au sein d'une page

Lorsqu'une page publiée est assez longue, il est préférable de fournir un petit sommaire en tête de page pour favoriser la navigation de l'internaute. Il faut pour cela placer des ancres au début de chaque partie (<a name="Chap1"></a>) représentées par les drapeaux rouges sur le schéma ci-dessous. Comme l'aller-retour est souvent proposé, une flèche ou le texte "haut de page" sera également inscrit à côté de l'ancre pour permettre de revenir aisément au sommaire (Voir schéma ci-dessous).

Code

Code à placer en haut de page

<a href="#Chap1">Chapitre 1</a>

Code à placer dans la page web

<h1>Chapitre 1</h1>

<p>... texte ...</p>

Dans le cas où le lien hypertexte vers l'ancre serait dans un autre fichier, le code change pour devenir :

<a href="Fichier.htm#Chap1">Chapitre 1</a>

Résultat

Flèche verte pour aller du sommaire aux différents chapitres, flèche orange pour revenir au sommaire grâce au lien sur l'expression "Haut de page".

Lien sur une image

Il est possible de créer un lien sur une image insérée dans une de vos pages. Pour cela, il suffit de remplacer l'expression définissant le lien lien_hypertexte par la balise <img .../>.

Pour éviter d'avoir une bordure bleue par défaut autour du "lien-image", il est préférable d'indiquer border="0" dans la liste des attributs de l'image.

Code

Zone active dans une image

Dans une image, on peut aussi créer plusieurs zones actives permettant d'accéder à autant de pages différentes de votre site.

Les zones peuvent avoir une forme :

rectangulaire : les coordonnées fournies seront celles du coin supérieur gauche et celles du coin inférieur droit,
circulaire : les coordonnées fournies seront celles du centre du cercle ainsi que le rayon de celui-ci,
ou polygonale : les coordonnées fournies seront celles des différents points définissant la forme polygonale. La forme la plus simple étant le triangle, un minimum de six valeurs pour les coordonnées seront nécessaires.

Un nouvel attribut usemap sera inséré dans la balise <img .../> tout en retirant les attributs dans la balise <a>

Code

Le code suivant va permettre d'accéder :

au fichier "fichier1.htm" lors du clic sur la zone rectangulaire
au fichier "fichier2.htm" lors du clic sur la zone circulaire
au fichier "fichier3.htm" lors du clic sur la zone polygonale (ici triangulaire)

</map>

Pensez généralement à déclarer la cartographie de l'image après le lien.
Pour définir avec précision les coordonnées des formes géométriques, l'utilisation d'un logiciel de traitement d'images sera nécessaire pour obtenir les positions en pixels.
Il faut veiller à ce que les différentes zones n'aient pas de parties communes. Dans le cas contraire et sur la zone commune à deux liens, ce sera le deuxième lien déclaré qui sera retenu.