Ces attributs spécifient un nom ou un identifiant pour l’ancre, de façon à ce que celle-ci puisse être ciblée par un autre lien. Ils partagent le même espace de noms, ce qui signifie qu’ils ne peuvent pas tous deux définir
Figure 3.10: La plupart de navigateurs signalent un lien, et l’affichent de façon différente lorsqu’il a déjà été visité (ici, Logiciels en téléchargement).
une ancre avec le même nom dans le même document. Quand les deux attributs sont utilisés sur un même élément, leurs valeurs doivent être identiques.
Voici une ancre nommée :
<A name="intro">Introduction</A>
Pour y faire référence depuis une autre ancre, vous procédez comme suit :
<A href="#intro">Introduction</A>
Ce qui pourrait être mis en œuvre comme suit :
<H1>Sommaire</H1>
<P><A href="#intro">Introduction</A><BR>
<A href="#historique">Historique</A><BR>
<A href="#chap1">Chapitre 1 </A><BR>
...le reste du tableau des matières...
...le corps du document...
<H2><A name="intro">Introduction</A></H2>
...contenu...
<H2><A name="historique">Historique</A></H2>
...contenu...
<H3><A name="histo1">Au commencement</A></H3>
...contenu...
Nous présentons ici l’attribut nameemployé avec un élément a, mais une ancre sert en réalité rarement de cible à une autre ancre. L’attribut name n’est employé que pour relativement peu d’éléments. L’attribut idjoue en revanche un rôle analogue et peut être employé avec tous les éléments sauf BASE, HEAD, HTML, META, SCRIPT, STYLE et TITLE. L’exemple précédent serait ainsi plus probablement écrit :
<H1>Sommaire</H1>
<P><A href="#intro">Introduction</A><BR>
<A href="#historique">Historique</A><BR>
<A href="#chap1">Chapitre 1 </A><BR>
...le reste de la table des matières...
...le corps du document...
<H2 id="intro">Introduction</H2>
...contenu...
<H2 id="historique">Historique</H2>
...contenu...
<H3 id="histo1">Au commencement</H3>
...contenu...
Notez qu’une ancre (ou lien) ainsi employée porte fréquemment le nom designet, pour la différencier d’un lien menant vers une autre page Web.
Il est également possible de concevoir un lien hypertexte qui déclenche l’envoi d’un courrier électronique lorsqu’un utilisateur clique dessus. Au lieu de http://, utilisez mailto: suivi de l’adresse électronique de destination :
<A "mailto:mon_nom@monFAI.fr">
Remarquez, pour un lien de message électronique, l’absence de barre oblique.
Ajoutez maintenant des ancres à votre page d’accueil.
1 Ouvrez le Bloc-Notes, puis le fichier précédemment créé (pageacc1_0.html).
2 Vous allez modifier la version en entrant comme suit la balise META stipulant la version :
<META name="version" content="1.3.2">
Convention sur les numéros de version
Traditionnellement, un numéro de version comporte deux ou trois nombres séparés par des points. Le premier nombre, à gauche,
correspond au numéro de version majeur : il reste identique tant que des modifications radicales n’ont pas été apportées. Le second numéro correspond au numéro de version mineur : des modifications plus secondaires. Le troisième nombre, s’il est présent, correspond généralement à des modifications très secondaires, souvent liées à l’éradication de bogues ou la correction d’erreurs.
Dans le cadre de ce livre, nous employons la convention suivante, très proche de la convention académique :
j le premier nombre correspond à la version majeure ;
j le second correspond au chapitre concerné ;
j le troisième, à l’ordre d’apparition du code dans le chapitre.
La nouvelle version de notre page d’accueil est donc la 1.3.2.
Vous allez maintenant créer des ancres. Celles-ci vont pour le moment pointer vers des pages inexistantes, mais cela n’a pas encore d’importance.
3 Insérez l’élément lien hypertexte avant le mot ou la phrase et n’oubliez pas de fermer l’élémentAaprès le mot servant de lien :
<P>Vous trouverez sur ce site des informations sur ma
<A href="region.html">région</A>, ma <A href="famille.html">
famille</A> ; et mes <A href="passions.html">passions</A>.</P>
j Remarquez qu’il est employé ici un lien relatif : les fichiers region.html, famille.html et passions.html seront placés dans le même dossier que la page d’accueil.
4 Ajoutez un nouveau lien permettant de vous envoyer un message.
Placez-vous après la balise</P>, appuyez sur[Ä]et saisissez sur la nouvelle ligne :
<P align="center"><A href="mailto:votre_nom@votre_FAI">
Ecrivez-moi !</A>.</P>
j votre_nom@votre_FAI correspond bien sûr à votre adresse électronique.
5 Enregistrez votre fichier sous le nompageacc1_3_2.html, mais ne fermez pas le Bloc-Notes. Le code complet de cette page est présenté dans le listing qui suit.
Listing 3-4 : Page d’accueil modifiée (version 1.3.2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>"Ma page d’accueil"</TITLE>
<META name="author" content="mon nom">
<META name="version" content="1.3.2">
</HEAD>
<BODY>
<H1>Ma page d’accueil</H1>
<H2>Bienvenue sur mon site.</H2>
<P>Vous trouverez sur ce site des informations sur ma
<A href="region.html">région</A>, ma <A href="famille.html">
famille</A> et mes <A href="passions.html">passions</A>.</P>
<P><A href="mailto:votre_nom@votre_FAI">Ecrivez-moi !</A>.</P>
</BODY>
</HTML>
Examinez cette nouvelle page dans votre navigateur. Ouvrez celui-ci, puis naviguez jusqu’au fichier pageacc1_3_2.html. Vous devriez voir quelque chose de similaire à ce qui est présenté dans la figure suivante.
Essayez de cliquer sur un des liens : vous obtenez un message d’erreur, variable selon le navigateur. C’est normal : les pages secondaires n’existent pas encore ! Vous y remédierez sous peu.