04-07-2008 : 1h55 min - non connecté
Dernière modification le 19 décembre 2007

 

Créer un lien hypertexte

 

Après avoir vu la mise en page dans le cours précédent, voyons maintenant l'élément essentiel d'une page web : le lien hypertexte.

Créer un lien simple

Dans Nvu, vous pouvez créer un lien de deux façons. Soit vous écrivez un texte, vous le sélectionnez, puis vous cliquez sur l'icône "Lien". Soit vous cliquez directement sur l'icône "Lien" sans écrire de texte. Vous obtenez suivant les cas les fenêtres suivantes (vous pouvez avoir une fenêtre légèrement différente suivant la version de Nvu/Kompozer):

Image 1

Image 2

 

Regardez l'image 1. Comme le texte était sélectionné, celui-ci apparaît dans la boîte de dialogue. Dans l'image 2, le texte n'était pas sélectionné, donc on a un champ en plus à remplir.

Dans la partie "Lier à" (ou "Emplacement du lien" suivant la version de Nvu/Mozilla) vous devez mettre la cible de votre lien. Cette cible peut être différentes choses que nous allons détailler :

  • une autre page de votre site. Dans ce cas il suffit de mettre le nom de la page ainsi que son sous-dossier si nécessaire. Exemples : ma_page2.htm ou dossier/ma_page3.htm.
  • un autre site que le votre. Vous mettez alors l'adresse complète du site dans la zone "lier à". Exemple : http://www.cdprof.com
  • une page d'un autre site : http://www.cdprof.com/contact.php
  • un fichier. Si vous faites un lien vers un fichier celui-ci sera téléchargé quand l'utilisateur cliquera sur le lien. Exemple : mon_fichier.zip ou telecharger/mon_fichier.zip si le fichier se trouve dans le dossier "telecharger".
  • un fichier lisible. Vous pouvez directement faire un lien vers un fichier Word ou pdf ou Star Office... Dans ce cas, si le logiciel en question est présent sur l'ordinateur de l'internaute, le fichier sera directement ouvert. Exemple : aide.pdf s'ouvrira dans Acrobat Reader.
  • une image. Un lien vers une image l'ouvrira dans le navigateur.
  • un endroit précis d'une autre page. Ce point sera abordé un peu plus loin, il mérite de plus amples explications.
  • une en-tête de la page. Voir aussi un peu plus loin.
  • une adresse électronique. En cliquant sur le lien c'est le logiciel de courrier électronique qui s'ouvre. La syntaxe est la suivante : mailto:adresse@fai.fr

Vous cliquez sur "Ok" et le lien est créé.

Exercice 1 :

Créez deux pages nommées index.htm et chat.htm. Mettez quelques mots dans chat.htm.

Dans index.htm créez un lien intitulé "La vie de mon chat" et pointant sur chat.htm.

Dans index.htm créez un lien intitulé "une belle image" et pointant vers une image quelconque située sur votre disque dur. Ensuite, créez un lien intitulé "Télécharger" pointant vers un fichier exécutable (par exemple vers c:\windows\sol.exe).

Pour finir, créez un lien vers un autre site Internet : http://www.cdprof.com (par exemple :-) )

 

Créer un lien qui s'ouvre dans une nouvelle fenêtre

Par défaut, lorsqu'on met en place un lien, la cible de ce lien s'ouvrira dans la même fenêtre. Cela convient la plupart du temps. Mais il peut arriver qu'on veuille créer un lien dont la cible s'ouvre dans une nouvelle fenêtre. Pour cela, on recommence la création du lien comme dans le paragraphe précédent mais avant de valider on passe par la case "Plus de propriétés".

Exercice 2 :

Dans les pages créées à l'exercice 1, modifiez le lien pointant vers le site Internet pour que celui-ci s'ouvre dans une nouvelle page.

Solution

 

Créer un lien dont la cible est à l'intérieur de la même page

On effectue alors un lien vers une ancre. L'ancre est un marqueur invisible pour le lecteur de votre page. Pour créer une ancre dans Nvu il suffit de se placer à l'endroit voulu de la page, de cliquer sur "Insertion", "ancre" puis de lui donner un nom.

Un lien vers une ancre commence toujours par le symbole dièse (#) suivi du nom de l'ancre. Pour créer votre lien il suffit donc de taper #nom_de_l_ancre dans la zone "lier à" et le lien sera créé. Nvu vous permet d'insérer le lien vers une ancre encore plus facilement puisqu'il détecte toutes les ancres de la page. Il suffit de la choisir dans le menu déroulant de la boîte "Lien".

Pour voir un intérêt que peut avoir une ancre, cliquez ici.

Cas particulier de Nvu :

Si vous utilisez les en-têtes pour les titres de vos paragraphes, Nvu permet de créer un lien vers ces en-têtes en créant automatiquement une ancre.

Exercice 3 :

Reprenez les pages précédentes. Tapez quelques lignes dans les deux pages pour qu'elles soient assez longues pour ne pas tenir dans un écran.

Créez une ancre en haut de chaque page et une autre en bas de chaque page.

Créez un lien en bas de index.htm vers le haut de index.htm.

Créez un lien en haut de index.htm qui pointent vers le bas de chat.htm.

Créer un lien dont la cible est à l'intérieur d'une autre page

Il suffit de créer un lien combinant les méthodes vu ci-dessus. Si je veux créer un lien vers la page toto.htm et aller directement au paragraphe marqué par l'ancre "titi", la syntaxe sera la suivante : toto.htm#titi

Créer un lien vers une adresse électronique

Nous avons déjà évoqué cette possibilité un peu plus haut. Voyons un peu plus en détails.

Je veux créer un lien qui ouvrira le logiciel de courrier électronique du visiteur afin qu'il puisse m'écrire à l'adresse alain.bolli@toto.com.

Dans le champ "Lier à", on inscrit : mailto:alain.bolli@toto.com

On peut aussi préremplir l'objet du mail : mailto:alain.bolli@toto.com?subject=commentaire sur ce cours

Et pour aller encore plus loin, on peut aussi préremplir le corps du message :
mailto:alain.bolli@toto.com?subject=commentaire sur ce cours&body=Vous pouvez mettre un commentaire ici sur la formation html

Il y a quand même un bémol à l'utilisation de cette technique pour permettre à vos visiteurs de vous envoyer des messages. Si ceux-ci n'ont pas de logiciel de courrier électronique, dans le meilleur des cas il ne se passera rien. Dans le pire des cas, un logiciel non configuré va se lancer et votre visiteur sera complètement perdu. Les internautes n'ayant pas de logiciel de courrier électronique sont nombreux. Ils utilisent souvent des webmails, surtout sur les réseaux des établissements scolaires. Si vous ne voulez oublier personne il vaut mieux utiliser un formulaire (voir le chapitre qui concerne ce sujet).

A savoir

Voyons maintenant les pièges à éviter et les règles d'utilisation des liens.

1) Liens relatifs et liens absolus :

Exemple 1 :

Voici la principale cause d'erreur du débutant. Prenons l'exemple suivant : dans un dossier "mon_site" j'ai deux pages, index.htm et toto.htm. Dans la page index.htm je veux faire un lien vers toto.htm.

Un lien absolu pointe sur le fichier en le repérant par rapport à sa position sur le disque dur. Par exemple si je crée dans index.htm le lien c:\mon_site\toto.htm, c'est un lien absolu.

Un lien relatif repère un fichier par rapport à la page où est le lien. Dans la page index.htm si je crée le lien toto.htm, c'est un lien relatif. Comme il n'y a aucune information dans ce lien concernant le dossier où se trouve toto.htm, le navigateur considère que la page se trouve dans le même dossier que index.htm.

Exemple 2 :

Je rajoute dans le dossier "mon_site" un sous dossier "chat". Celui-ci contient une page appelée vie.htm.

Je veux créer dans index.htm un lien vers chat.htm.

Avec un lien absolu ce sera : c:/mon_site/chat/vie.htm

Avec un lien relatif ce sera : chat/vie.htm

Le lien relatif est relatif à la page de départ. Le lien ci-dessus signifie : aller dans le sous-dossier chat et ouvrir la page vie.htm

Autres exemples :

Pour ouvrir une page dans le dossier supérieur à la page où est le lien : ../page.htm

Dans un autre dossier situé au même niveau que celui où je suis : ../autre_dossier/page.htm

Liens absolus ou relatifs ?

On peut se demander ce qui est mieux. Sans hésiter, il faut absolument éviter les liens absolus car ils sont à la source de nombreux problèmes. On les utilise très rarement. Explication :

Reprenons le cas de l'exemple 1 où nous avions fait un lien vers le fichier toto.htm. Avec un lien absolu cela donnait c:/mon_site/toto.htm. En faisant un test en local cela fonctionne très bien alors pourquoi changer ? Il suffit de transférer les pages vers le serveur de l'hébergeur et plus rien ne fonctionnera. Tout simplement parce qu'il n'y a aucune raison que vos pages chez l'hébergeur soient sur c:. D'ailleurs la plupart du temps les serveurs sont sous linux qui ne sait pas ce qu'est c: !

Règle d'or : toujours utiliser des liens relatifs !

 

2) Quand faire des liens vers une nouvelle page ?

On a vu plus haut comment faire un lien vers une nouvelle page. Mais dans quel cas fait-on cela ?

Pendant longtemps la règle était la suivante : tant que vous faites un lien vers une page de votre site, les liens doivent tous s'ouvrir dans la même fenêtre. Si vous faites un lien vers un autre site que le votre, faite le s'ouvrir dans une nouvelle fenêtre.

Mais le W3C a annoncé de nouvelles recommendations : c'est l'internaute qui doit pouvoir choisir s'il ouvre la page dans une nouvelle fenêtre ou dans la même fenêtre. Le webmaster ne doit pas choisir pour l'internaute et donc toujours ouvrir une page dans la même fenêtre. L'internaute utilisera les fonctionnalités de son navigateur (bouton du milieu, touche "control" + clic, ...) pour ouvrir la page dans une nouvelle fenêtre s'il le désire. C'est pourquoi le W3C a tout simplement supprimé l'attribut "target" (un mot clé du code HTML qui permettait l'ouverture d'une page dans une nouvelle fenêtre).

Cas particulier :

Si vous utilisez des cadres (qui sont aussi obsolètes pour le W3C, voir le chapitre sur les cadres) l'attribut "target" reste obligatoire. Il vous faudra l'utiliser pour ouvrir les pages dans une nouvelle fenêtre. Ainsi vous ferez une bonne séparation entre les sites. Vous éviterez que les internautes pensent qu'ils sont sur votre site alors qu'ils sont ailleurs. En ouvrant dans une nouvelle fenêtre, vous éviterez aussi qu'on pense que vous essayez de vous approprier le contenu du site d'un autre.

Cours suivant : transférer les pages sur un serveur