Comment créer des liens
dans un document HTML

Le problème

Une des forces du WEB réside dans les liens hypertexte qui permettent de relier un mot, une phrase, une image à une autre page ou partie de page.
On parle d'Hypertexte.

Nous traiterons ici le principe, illustré par un exemple, avec KompoZer qui est le logiciel utilisé à la FAPSE.

Les liens hypertextes peuvent renvoyer vers une autre page, et le browser présentera alors le haut de la page, ou vers une partie particulière d'une page : une ancre. Ces ancres doivent avoir été préalablement créées

Comment créer des ancres dans une page HTML

A chaque endroit que l'on désire pouvoir rejoindre par un lien hypertexte, il faut créer une ancre. Typiquement chaque chapitre sera marqué par une ancre.
A l'endroit que l'on désire pouvoir atteindre par un lien (la cible) il faut introduire un code spécial avec le bouton ancre icône ancre un éditeur d'ancres apparaît ; introduire un nom pertinent.

fenêtre d'ancre

Quand toutes les ancres sont crées, on peut s'y référer par des liens.

 

Comment réaliser un lien Hypertexte dans la même page ?

Sélectionner le texte qui doit être rendu actif, puis dans le menu Insertion, choisir Lien... ou cliquer le bouton icône pour les liens : un éditeur de liens apparaît :

éditeur de liens

 

Comment réaliser un lien Hypertexte vers une autre page ?

Le principe est exactement le même, mais on spécifie une URL complète (contrairement aux browsers qui ajoutent souvent une partie manquante à l'URL) :

Avec la forme http://tecfa.unige.ch/welcome.html

On peut aussi directement retrouver les ancres déjà ouvertes en actionnant le menu déroulant dans la rubrique Emplacement du lien dans l'éditeur de liens :

liens sur une ancre

Liens relatifs ou absolus ?

Pour définir un lien on peut définir son adresse absolue ou relative :

L'avantage des liens relatifs est qu'ils restent valables si on déplace l'ensemble du site.

lien relatif

Dans la fenêtre des propriétés du liens, la case L'URL est relative à l'emplacement de la page doit être cochée pour que le lien soit effectivement relatif (lors de la définition du lien, NVU reconnaît la forme du type de lien - il est possible de vérifier en ouvrant la fenêtre de propriétés du lien lorsque le lien a été défini au préalable)

Autres conseils

N'oubliez pas de rassembler toutes les images : il est plus facile de gérer l'ensemble des fichiers du site en les classant par type, donc mettre toutes les images dans un dossier intitulé images, ce dossier étant lui-même dans le même dossier que le fichier HTML.


compteur - F.Lo - adapté par M.V

Retour à la page de fiches multimedia @ tecfa