Les liens hypertextes

Les liens vers d'autres documents à l'aide du marqueur <A HREF>

Le grand avantage du langage HTML, c'est cette capacité qu'il possède de lier un document à d'autres documents: c'est le concept même de l'hypertexte. Un marqueur HTML, ou <A HREF>, lie les documents entre eux. Ce marqueur inclue les éléments suivants:

• le marqueur HTML<A HREF=
• le nom du fichier à rejoindre;
• le texte utilisé comme pointeur et
• le marqueur HTML de fermeture </A>

En réalité, ce n'est pas compliqué. Voici un exemple de lien hypertexte ou d'un marqueur HTML avec tous ses éléments:

<A HREF="http://CyberScol.cscs.qc.ca/"> La page d'entrée de CyberScol</A>

Comme vous pouvez le voir, le marqueur commence avec un <A, premier élément de tout marqueur HTML. Après un espace, le <A est suivi de HREF="http://CyberScol.cscs.qc.ca/">. La section HREF=" indique au logiciel de navigation que ce marqueur va lier le document à un autre document. L'information qui suit http//: CyberScol.cscs.qc.ca/">, c'est l'adresse du document à rejoindre. Dans le cas présent, c'est une page W3 à CyberScol.cscs.qc.ca. De telles adresses sont souvent nommées URL: (Uniform Resource Locators). Le "> indique la fin de l'adresse.

Par la suite, nous lisons: La page d'entrée de CyberScol. Cette information sera la seule à apparaître à l'écran: c'est le pointeur.
(Le pointeur est la dénomination du lien hypertexte. Il est généralement de couleur bleue: c'est la zone activable à l'écran. N.D.T.)
Lorsque vous cliquez dessus avec la souris, il vous connecte à l'adresse qui est dans notre cas: http://CyberScol.cscs.qc.ca.
</A> indique la la fin du lien hypertexte.
Voici ce que le navigateur affiche alors:

La page d'entrée de CyberScol

Dans un lien hypertexte, seuls le marqueur HTML et le marqueur de fermeture demeurent constants; les deux autres parties, l'adresse URL et le pointeur peuvent varier. Les adresses URL peuvent inclure pratiquement tous les fichiers dans Internet: un site W3, un serveur gopher, une adresse de courrier électronique, etc. Les fichiers les plus pointés sont des pages W3.
Les exemples ci-dessous portent sur différents fichiers à rejoindre et différentes adresse URL dans des lien hypertextes.

Un lien vers La francisation démystifiée du langage HTML 

<A HREF="http://www.cam.org/~mozart/fr_html.html"> 



Un lien vers un fichier situé dans le même répertoire,

en exemple, celui de la leçon précédente 

<A HREF="html-03.html"> 



Un lien vers le gopher de l'Université de Montréal 

<A HREF="gopher://Tornade.Ere.UMontreal.CA:7070/1"> 



Pour rejoindre un  groupe de discussion                    <AHREF="news:k12.chat.teacher"> 



Un lien vers un réseau extérieur 

<A HREF="telnet://ariane.ulaval.ca/">



Pour m'envoyer du courrier électronique

<A HREF="mailto:mephisto@qbc.clic.net"> 



Pour télécharger des logiciels, Netscape          

<A HREF="ftp://ftp.netscape.com/"> 

Comme vous pouvez le remarquer, chaque adresse URL inclut un protocole de transfert, parfois appelé méthode d'accès, qui identifie quel type de lien hypertexte sera créé. Pour télécharger un fichier, le protocole est ftp:// et pour atteindre un site gopher, c'est gopher://. Le seul protocole qui n'identifie pas clairement le type de lien est http:// qui vous fait accéder à une page W3. ( HTTP pour HyperText Transfer Protocol.) C'est le terme technique pour désigner le protocole de transfert qui permet de rejoindre un site W3. Tel qu'illustré par le deuxième exemple, un lien vers un fichier situé dans le même répertoire est utilisé lorsque vous créez plusieurs documents pour votre propre site W3. Si le fichier se trouve dans le même répertoire, vous n'avez qu'à inclure le nom du fichier Celui de cette page est html-04.html.

<A HREF="html-04.html">Le fichier de cette page</A>
Le navigateur affiche alors ce pointeur:

Le fichier de cette page

Cependant, pour retracer un fichier situé dans un autre répertoire de votre ordinateur Macintosh, vous devez spécifier le lien hypertexte en entier. Supposons que vous ayez un fichier dans un répertoire appelé ma.page.principale et que vous vouliez créer un lien vers la page personnelle de votre amie Jeanne dont le nom du fichier est jeanne.page.html. (Bien entendu, ce fichier est dans un autre répertoire nommé répertoire.jeanne et dans le même ordinateur dont l'identification est notre.ordinateur.com.) Vous devez alors écrire le lien comme si vous communiquiez avec un autre ordinateur. Il devrait ressembler à celui-ci:
<A HREF="http://notre.ordinateur.com
/jeanne.repertoire/jeanne.page.html">
Quand le navigateur examine ce lien, il se branche à l'ordinateur identifié notre.ordinateur.com, et se dirige vers le répertoire jeanne.repertoire dont le nom est précédé d'une barre oblique (/) dans l'adresse. Il rencontre ensuite une autre barre oblique précédant le nom jeanne.page.html, fichier contenant la page d'accueil de votre amie. Le navigateur ouvre cette page et affiche son contenu à l'écran. (N.B. La barre oblique indique qu'un répertoire ou un fichier doit être ouvert.)

(N.D.T. Bien organiser ses fichiers dans son propre ordinateur est primordial. Monsieur Carvin utilise un ordinateur Macintosh. Pour un compatible IBM, je vous propose cette façon de procéder qui vous facilitera les choses.

Sur votre disque dur, lecteur C: créez un répertoire que vous nommez public_html. Placez dans ce répertoire tous les fichiers de votre page principale. Avec votre logiciel de navigation, ouvrez l'un de ces fichiers. Si j'ouvre le fichier index.html, ma page principale, je vois apparaître file:///C|/public_html/index.html dans la barre de titre. Pour chaque nouvelle page, créez un nouveau répertoire. Pour la version française du cours de Andy Carvin, j'ai créé, dans le répertoire public_html, le répertoire carvin. Si j'ouvre la présente leçon que j'ai nommée html-04.html, je vois file:///C|/public_html/carvin/html-04.html. (Dépendant des logiciels d'application, il faut parfois nommer les fichiers *.htm)
Cette disposition des fichiers sera la même sur le serveur.)

Si vous voulez que les visiteurs de votre page W3 sachent où vos liens hypertexte conduisent, vous devez leur fournir quelques informations à leur sujet. Revoyons notre exemple:

<A HREF="http://www.cam.org/~mozart/fr_html.html"> La francisation démystifiée du langage HTML</A>

Entre
<A HREF="http://www.cam.org/~mozart/fr_html.html"> et </A>, nous avons les mots
La francisation démystifiée du langage HTML. C'est la dénomination du lien hypertexte. Si vous affichez ce document avec un navigateur, vous devriez voir:

La francisation démystifiée du langage HTML

C'est comme ça. Les informations qui n'apparaissent pas sont des instructions utilisées par votre logiciel de navigation. Lorsque avec votre souris ou votre curseur vous choisissez ce lien activable, votre logiciel exécute les instructions cachées et vous affiche la page à l'écran.

L'utilisation de liens à l'intérieur de documents

Parfois, vous créez une page W3 pleine d'informations. Il est pratique alors d'y faire des liens vers des endroit précis dans la même page ou dans tout autre document dans Internet. Supposons que vous offrez un dictionnaire en ligne et que l'un de vos mots définis est:

Lynx

Un logiciel de navigation qui fonctionne en mode non graphique utilisé pour accéder au Web.

C'est là une bien bonne idée, mais si votre visiteur ignore complètement ce qu'est le W3! Vous aimeriez sans doute le diriger vers une définition de ce mot. Les dictionnaires forment de bien longs fichiers et vous aurez donc à faire un lien vers une définition située plus bas à l'intérieur du document, quelque chose comme ceci:

W3

Une forme d'hypertexte multimédia en ligne.

Vous ajoutez donc un marqueur pour retrouver le mot W3 dans votre dictionnaire et vous utilisez à cette fin le marqueur local appelé
<A NAME>, comme ceci:
<A NAME="W3">Web</a>

A l'intérieur de votre définition de Lynx, prenez soin d'ajouter un lien vers "W3" pour que votre logiciel de navigation vous transporte vers la définition visée, comme ceci:

Lynx

Un logiciel de navigation qui fonctionne en mode non graphique utilisé pour accéder au
<A HREF="#W3">Web</a>.

Le résultat tel que visualisé par le navigateur:

Lynx

Un logiciel de navigation qui fonctionne en mode non graphique utilisé pour accéder au Web.

Le mot Web sert de pointeur vers le mot W3, auquel vous venez tout juste d'ajouter le signe #: ce qui permettra à votre navigateur de le trouver et de s'y ancrer à l'intérieur du document. Ainsi, si vous cliquez sur le mot Web dans votre définition de Lynx, votre logiciel de navigation va pour ainsi dire vous faire bondir sur la définition de W3.

Finalement, supposons que votre dictionnaire est vraiment gros et que les lettres de T à Z sont dans un fichier séparé appelé dic_t-z.html. Vous devez indiquer au logiciel de navigation où trouver ce fichier de même que la définition de W3. Vous utilisez le même marqueur
<A HREF> que ci-dessus, avec un nouvel ajout:

Un logiciel de navigation qui fonctionne en mode non graphique utilisé pour accéder au
<A HREF="dic_t-z.html#W3">Web</a>.

Il s'agit alors d'ajouter le nom du fichier juste avant le signe #. Maintenant le logiciel de navigation sait qu'il doit d'abord trouver ce fichier avant d'interpréter le lien.

Quiz interactif

Les marqueurs et les liens hypertextes, c'est l'essence même du langage HTML. Prenez soin de bien revoir la leçon et assurez-vous de bien la comprendre. Alors, vous serez prêt à participer au quiz interactif suivant sur l'hypertexte qui permettra de vous évaluer.

Quand vous l'aurez terminé, passez à la page suivante ou revoyez la présente leçon.

---