Dans les leçons précédentes, au cours de nos études étaient essentiellement axés sur la préparation d'un document, sa structuration et sa présentation que nous avions étudié jusqu'à présent. Nous arrivons maintenant au chapitre de cette leçon essentielle sur les liens hypertextuels du Web.
Les Internautes explorent un document sur le Web, en cliquant sur des zones actives, faisant ainsi apparaître de nouveaux documents. Dans HTML, une zone active peut correspondre à un caractère, un mot ou un groupe de mots, une image ou une portion d'image. Le principe sera toujours identique : associer à cette zone active, l'URL est le protocole d'adressage des documents qui se substitueront au document affiché lorsque l'on cliquera sur cette zone.
Prenons un exemple de la figure 1, lorsque l'on clique sur le mot tableaux, le système va rechercher le document à l'adresse qui est associée à ce mot, http://.../aide/tableaux.html, la page Aide s'efface pour être remplacée par la page tableaux. On dit couramment que le mot tableaux dans la page aide.html est un pointeur sur la page tableaux.html.
Un pointeur peut être placé n'importe où dans le texte. Ce peut être un élément d'une liste, ou du texte courant ; il peut être enrichi d'attributs de style physique, logique ou de paragraphe. Cependant, il n'est pas nécessaire de lui affecter un attribut pour le faire reconnaître en tant que tel : sans paramétrage spécial du browser par l'utilisateur, les liens activables sont automatiquement mis en relief (couleur et soulignement le cas échéant).
Le langage HTML définit la notion importante d'ancre pour spécifier le départ et l'arrivée d'un lien hypertexte.
L'ancre de départ est la zone active sur laquelle vont cliquer les Internautes pour appeler une nouvelle page. Dans l'exemple de la figure 2, les mots textes, tableaux, équations, graphiques, électroniques, informatiques et impressions sont des ancres de départ.
L'ancre d'arrivée est une zone inactive spécifiant le point d'arrivée d'un lien hypertexte. C'est donc une adresse de destination. Dans l'exemple de la figure 2, http://www./aide/tableaux.html est l'ancre d'arrivée de la zone cliquable tableaux. Dans ce cas, la destination est le fichier tableaux.html et il s'agit d'un lien externe, car "l'ancre de départ et l'ancre d'arrivée appartiennent à des fichiers différents".
Il existe un autre type d'ancre d'arrivée, lorsque la zone cliquable d'un document provoque un déplacement dans le même fichier, on parle alors de microtexte, car l'ancre de départ et l'ancre d'arrivée se situent dans le même fichier. Sur la figure 2, tableaux représente toujours une ancre de départ et Faire des tableaux est une ancre d'arrivée. Cette ancre d'arrivée ne comporte pas d'attributs visuels et n'est évidemment pas une zone cliquable, d'où son nom ancre inactive.
Les liens internes sont très intéressants lorsqu'un document est trop long pour tenir totalement dans la fenêtre du browser. Cela permet de se déplacer d'autant plus rapidement dans le document que celui-ci, lu en une seule fois, se trouve dans la mémoire de l'ordinateur.
Pour spécifier une ancre de départ ou une ancre d'arrivée, on utilisera la même balise.
Définition d'une ancre.
<A> :
Cette balise ne sera jamais utilisée seule.
L'attribut HREF, ancre de départ vers un lien externe :
Il s'agit ici de créer un lien vers un serveur situé quelque part sur l'Internet, ou sur un document proposé par ce serveur. Par exemple, dans une page du serveur de la ville de Nanterre, on trouvera un lien sur le fichier du serveur de chez Daniel ROBERT proposant des leçons d'électroniques et informatiques totalement gratuites.
La balise <A> spécifie l'attribut HREF dont la valeur précise l'URL du document à atteindre :
<p> <font face="Arial" size="3" color="#000000"> Tout courant électrique dans un conducteur est dû à un déplacement d'électrons.<A HREF="http://www.electronique-et-informatique.fr/Electronique-et-Informatique/index.php">Durant leur déplacement</A>, ces électrons rencontrent des obstacles dû aux atomes du conducteur . . . </font></p>
Concernant l'ancre, "Durant leur déplacement", sera mise en évidence par les attributs visuels en vigueur sur le browser, et, lorsque l'on cliquera dessus, on effectuera une connexion vers le serveur Web.
Dans l'exemple ci-dessus, l'URL précise un sommaire particulier ou un fichier du serveur ; si l'on souhaite arriver directement sur la home page d'un serveur (qui n'est autre qu'un fichier HTML pris par défaut, généralement index.html ou index.htm), l'URL sera alors composée uniquement du nom du serveur ou encore le nom du Domaine :
Exemple d'utilisation :
<HTML>
<HEAD>
<TITLE> Électronique-Informatique </TITLE>
</HEAD>
<BODY>
<p> <font face="Arial" size="3" color="#000000">Le <A HREF="http://www.electronique-et-informatique.fr/">centre</A> est le laboratoire d'électronique de chez Daniel qui essaye d'apporter des solutions à tous problèmes de certains Internautes dans le domaine d'informatique ainsi que l'électronique également.</font></p>
Nous attirons votre attention que HTTP est le nom d'un protocole, tandis que electronique-et-informatique.fr est le nom d'un Domaine à laquelle que le fichier index.html ou index.htm est inséré dans ce Domaine, c'est pourquoi que, lorsque l'on clique sur le lien hypertextuel que l'on va directement sur la page d'accueil ou home page.
A noter : dans l'URL, il ne faut en aucun cas, pas d'espaces ni de ponctuations, ce qui pourrait provoquer un dysfonctionnement de cette dernière pour accéder à la page concernée, par exemple, home page.
Par lien hypertexte externe, on entend un lien vers un fichier autre que celui couramment en exécution.
Dans un même serveur se trouvent les fichiers aide.html et graphique.html. Dans le fichier aide.html, on trouve un lien vers le fichier graphique.html et un lien vers https://www.google.fr et un autre lien vers http://www.microsoft.com. Ces trois liens sont considérés comme externes.
L'attribut HREF, ancre de départ vers un lien interne :
Dans ce cas, on se propose de mettre un lien hypertexte vers un point précis du fichier en cours d'exécution : par exemple, à la ligne 40 du fichier, on propose un lien pour sauter directement à la ligne 90. Il faut donc placer une ancre active (ancre de départ) à la ligne 40 et une ancre inactive (ancre d'arrivée) à la ligne 90.
<p> <font face="Arial" size="3" color="#000000">Le <A HREF="http://electronique-et-informatique.fr/Electronique-et-Informatique/Digit/Proc_ordi/Complements_Micros/Glossaire_de_A_a_H.php#B">centre est le laboratoire d'électronique de chez Daniel</A> qui essaye d'apporter des solutions à tous problèmes de certains Internautes dans le domaine d'informatique ainsi que l'électronique également.</font></p>
Définit l'ancre d'arrivée, lieu que l'on atteindra, en cliquant sur une ancre de départ.
On notera dans l'ancre de départ, le caractère # (dièse) qui indique que la référence hypertexte n'est pas une URL, mais une étiquette.
L'attribut HREF et NAME sur une même ancre ;
Application concernant la note de bas de page :
Une ancre peut admettre simultanément plusieurs attributs. Nous allons utiliser l'analogie avec une note de bas de page dans un texte imprimé pour étudier l'utilisation des attributs <HREF> et NAME spécifiés sur le même ancre.
La note de bas de page est indiquée par un petit chiffre en exposant, invitant les Internautes à déplacer ses yeux vers le bas de la page pour lire une explication complémentaire ; ensuite, il faut retrouver ce petit chiffre dans la page pour poursuivre la lecture.
A l'inverse d'un document papier, une page HTML peut être très longue et par conséquent ne pas être complètement affichée dans l'espace du browser. Si l'on souhaite simuler un type d'annotation comme la note de bas de page dans une page Web, on peut placer à la fin du document cette "note" précédée d'une ancre passive (attribut NAME), et au fil du texte, y faire référence en plaçant une ancre active (attribut HREF). Cette méthode fonctionnera très bien et les Internautes, lorsqu'ils cliqueront sur l'ancre active, provoqueront bien le saut vers la note.
Il reste maintenant à lui assurer un retour aisé vers le point d'interruption de sa lecture de chacun de nous, car ce point n'est plus affiché à l'écran du moniteur si la page HTML est longue.
Nous coderons le document de la façon suivante :
dans le texte courant, on place une ancre active et passive de la forme ci-après :
de même en-tête du bloc de texte composant la note :
<A HREF="retour_1" NAME="note_1"> (2) </A> Texte de la note . . .
Ainsi, les Internautes peuvent cliquer sur l'ancre (1), vont lire l'annotation, puis ils peuvent cliquer sur l'ancre (2) et retrouvent le fil de leur lecture.
Remarquez bien, entre les ancres (1) et (2) sont totalement inversées par rapport au note_1 et au retour_1 concernant les A HREF et NAME.
Exemple d'utilisation :
<HTML>
<HEAD>
<TITLE> Note de bas de page </TITLE>
</HEAD>
<BODY>
<p> <font face="Arial" size="3" color="#000000"> Pour illustrer le fonctionnement de la note de bas de page <A HREF="#note_1" NAME="retour_1"> <b> (1) </b> </A> il est nécessaire, comme le document est <b> court </b> de réduire la taille de la fenêtre du browser à quelques lignes et à quelques colonnes. (5 ou 6 lignes de 40 caractères mais, nous allons quand même mettre un peu plus de textes et interparagraphes seront plus long et plus espacés entre eux, et nous mettons également une image ou un schéma électronique, afin de provoquer un ascenseur sur certains de vos browsers pour que le programme fonctionne correctement. </font> </p>
<p> <font face="Arial" size="3" color="#000000"> Convertir des signaux analogiques en signaux numériques, c'est transposer le code des signaux, sans modifier les informations qu'ils renferment. Ce qui veut dire, bien évidemment, qu'un signal ayant subi deux conversions inverses successives retrouvera exactement sa forme initiale. </font> </p>
<p> <font face="Arial" size="3" color="#000000"> La conversion analogique / numérique (A / N) encore appelée P.C.M. (Pulses Codes Modulation) ou en français M.I.C. (Modulation par Impulsions Codés) est illustrée figure 5. </font></p>
<p> <font face="Arial" size="3" color="#000000"> L'onde analogique (a), est échantillonnée (b), c'est-à-dire mesurée à intervalles réguliers suffisamment rapprochés. La fréquence d'échantillonnage est très grande par rapport à celle du signal analogique et particulièrement par rapport à la composante de fréquence la plus élevée dans le cas de signaux composites. </font> </p>
<p> <font face="Arial" size="3" color="#000000"> <A HREF="#retour_1" NAME="note_1"> <b> (2) </b></A> <i> Nous sommes ici dans la zone de texte de la note simulée dans une page HTML. </i> </font> </p> <br> <br> <br> <br>
Dans cet exemple, on a très fortement augmenté la taille du browser car avec un texte très court, et, sans schéma ou une image quelconque, on aurait pas pu voir le bon fonctionnement des ancres, de cette façon, on peut tester l'effet recherché.
Les différentes ressources pointées par un lien :
L'extrémité d'un lien peut être n'importe quel type de document :
un fichier HTML.
On distingue deux cas, lorsque l'on définit un pointeur vers une URL externe :
Le document pointé appartient à un ensemble de documents homogènes dont on a la maîtrise. Dans ce cas, on pourra prévoir, dans le document pointé, une ancre de retour facilitant la navigation dans cet ensemble de documents. Des images représentant un bonton avec une flèche vers la gauche sont souvent utilisées comme pointeur de retour.
Il faut cependant être prudent lorsque l'on décide de gérer ainsi sa propre navigation ; on ne pourra plus utiliser le document dans un autre contexte, sous peine de proposer des choix de navigation qui égareront les Internautes.
Dans la figure 3 ci-dessus, on trouve deux ensembles distincts de documents, l'un nommé Alpha et l'autre nommé Bêta. Dans le document 2 de l'ensemble Alpha, a été posé un lien vers le document B de l'ensemble Bêta. L'Internaute partit de la page Menu de l'ensemble Alpha trouve à la page 2, un lien qui l'emmène vers le document B de l'ensemble Bêta. S'il utilise depuis cette page le bouton , il reviendra vers le Sommaire des documents Bêta et non vers le Menu des documents Alpha comme il pouvait l'espérer !
Le document pointé se situe sur un serveur ou une zone de serveur indépendant du document en cours de réalisation ; après avoir cliqué sur le lien, l'Internaute reviendra au document de départ à l'aide du bouton back proposé par le browser.
JavaScript et les liens :
Avec JavaScript, les liens d'une page HTML deviennent des objets que l'on peut manipuler. Les objets liens sont relativement simples : trois événements y sont associés, aucune méthode particulière ne s'y applique et la seule propriété qui peut être manipulée est la propriété target qui permet de spécifier la fenêtre, ou la frame dans laquelle s'affiche un document que l'on verra plus tard dans nos études.
Si le lien devient un objet au sens de JavaScript, il est stocké au niveau du document dans un tableau, et on peut ainsi le référencer. Le mot clé pour accéder à un lien est links. Ainsi, dans la nomenclature des objets JavaScript, document.links[0] référence le premier lien décrit dans la page, document.links[1], le second, etc. ...
Comme tout tableau, il est possible de connaître le nombre d'éléments qui le composent (donc le nombre de liens dans la page) par document.links.length. On verra le JavaScript un peu plus tard ainsi que le PHP, au cours de nos leçons ...
Les événements associés aux liens :
Revenons sur le principe de la programmation événementielle : lorsque le concepteur de la page HTML décrit un lien (<A HREF= . . . </A>), il peut souhaiter au moment où l'Internaute fait glisser d'un mouvement de souris le curseur sur cette ancre hypertexte, que quelque chose d'exceptionnel survienne. Dans l'exemple suivant, une puce ou un rectangle de couleur rouge apparaît lorsque le curseur entre sur le lien et disparaît lorsqu'il en sort.
Le concepteur de la page doit donc positionner sur la balise l'événement qu'il veut intercepter et décrire son traitement. Dans la balise HTML, on dispose de nouveaux attributs, les événements auxquels sont associés comme valeur le nom de la fonction JavaScript avec d'éventuels paramètres.
Si la fonction n'a pas de paramètres, les parenthèses sont cependant obligatoires.
L'événement onMouseOver apparaît lorsque le curseur arrive sur la zone du lien hypertexte.
L'événement onMouseOut apparaît lorsque le curseur quitte la zone du lien hypertexte.
L'événement onClick apparaît lorsqu'on clique sur le lien.
Exemple d'utilisation des événements onMouseOver et onMouseOut :
Dans l'exemple suivant, on voit comment sont positionnés les événements permettant d'intercepter l'entrée (onMouseOver) ou la sortie (onMouseOut) du curseur sur le lien. On utilise une même fonction (survol) pour traiter cet événement. Si le curseur entre sur le lien, on passera en paramètre la valeur "entree", s'il quitte le lien, on passera en paramètre la valeur "sortie". Le traitement ne fait ensuite que changer la ressource d'une image. Ce traitement sera abordé dans Réalisation d'une carte cliquable animée, que l'on verra au cours de nos études.
Exemple d'utilisation :
<HTML>
<HEAD>
<TITLE> Événement sur les liens </TITLE>
Cet exemple a pour but de montrer une utilisation de l'événement onClick sur un lien. Le fonctionnement est le suivant : lorsque l'on clique sur le lien "Visiter la ville de la Russie", on exécute d'abord la fonction "creerFenetreImage" qui crée une nouvelle fenêtre du browser, dont le nom sera "fenetreImage". Cette fenêtre a une largeur de 640 pixels sur une hauteur de 480 pixels (width=640, height=480) ; elle est dépourvue du décor habituel de la fenêtre d'un browser : pas d'affichage des boutons, de l'adresse de l'URL en cours ni de la zone de status (toolbar, location, directories, status).
Lorsque cette fenêtre est créée, le lien demandé (Ville_Russie.jpg) est chargé dans la fenêtre spécifiée ("fenetreImage") par l'attribut target.
Exemple de lecture et modification de la destination d'un lien (target) :
L'exemple fonctionne de la manière suivante : lorsqu'on clique sur "dans une nouvelle fenêtre", on effectue la fonction images/Ville_Russie.jpg "bidouille". Celle-ci ouvre une nouvelle fenêtre pour le lien numéro 2 (Ville_Russie.jpg), une destination de l'affichage (un target) égale à "fenetreImage". Si l'on clique sur "celle-ci", on effectue la fonction images/Vacances.JPG "vite" qui affecte une chaîne nulle au lien numéro 2 ; la chaîne nulle indique que l'on ne change pas la destination d'affichage. Maintenant, si l'on clique sur "voir l'image", on effectue la fonction "creerFenetreImage" ; cette fonction teste le target du lien numéro 2, et si celui-ci est égal à "fenetreImage", la fenêtre correspondante est créée, permettant à l'image de s'afficher dans cette nouvelle fenêtre. Si, en revanche, le résultat du test est nul, il n'y a pas de création de fenêtre et l'image s'affiche de façon standard, dans la fenêtre d'origine ainsi le document initial.
Ne vous inquiétez pas si vous ne comprenez pas ce principe, on reviendra plus tard sur les fonctions au cours de nos études. Pour l'instant, admettez la théorie.
Nous résumons cette sixième leçon ci-après :
Nous avons appris que la balise <A> permet de décrire les liens hypertexte dans un document. On distingue :
Les liens définissant un accès vers un document. L'attribut utilisé dans ce cas est HREF, qui permet de définir l'adresse du document ou d'une page HTML à atteindre. Cette adresse peut être :
Une URL standard :<A HREF="URL"> . . .</A>
Une étiquette vers un point précis du document :<A HREF="#LABEL">. . .</A>
La combinaison des deux seront :<A HREF="URL#LABEL">. . .</A>
Le texte situé entre les balises <A> et </A> s'appelle l'ancre ; il sera mis en évidence par le browser car, c'est une zone cliquable (soulignement, couleur, etc.).
Les liens définissant un point d'entrée dans un document. L'attribut utilisé ici est NAME, qui définit un label (une sous-adresse) dans le document :<A NAME="LABEL">. . .</A>
Le texte situé entre les balises <A> et </A> n'a aucun attribut visuel, ce n'est pas une zone cliquable.
L'extrémité d'un lien peut être : un fichier HTML, une image, un film ou un texte.
Il est possible de décrire des liens vers d'autres services de l'Internet comme : FTP, NEWS, MAILTO, TELNET, JAVASCRIPT, etc.
Dans un contexte JavaScript, chaque lien est rangé dans un tableau et on peut accéder à un lien par son indice : document.links[indice]
Le nombre de liens d'une page HTML peut être connu par la valeur document.links.length.
La seule propriété d'un lien pouvant être lue ou modifiée est document.links[i].target.
Enfin, il existe trois événements associés au lien :
onMouseOver
onMouseOut
onClick
Fin de cette sixième leçon, la prochaine sera consacrée aux Inclusions d'images concernant le langage HTML.
Leçons suivantes
Leçons précédentes
Bas de page
, il reviendra vers le Sommaire des documents Bêta et non vers le Menu des documents Alpha comme il pouvait l'espérer !
Haut de page