Comment créer un lien hypertexte avec KompoZer

La possibilité de créer un lien dans un document menant à un autre document, peut-être sur un réseau à l'autre bout du monde, est sans doute la principale raison pour laquelle le World Wide Web a été inventé. Ces liens, appelés hyperliens, sont les «H» en HTML (HyperText Markup Language). Sans hyperliens, le Web ne serait pas très utile. Il n'y aurait pas de moteurs de recherche, de médias sociaux ou de bannières publicitaires (ok, la plupart d'entre nous pourraient supporter de les voir disparaître).

Lorsque vous créez vos propres pages Web, vous souhaiterez créer des liens hypertextes. KompoZer dispose d'outils facilitant l'ajout de liens de tous types. L'exemple de page illustré dans ce didacticiel contient des liens vers d'autres sites Web de quatre catégories, vers d'autres parties de la même page Web et permet de démarrer un message électronique. Je vais commencer par un titre et quatre

H3 rubriques pour chaque catégorie. Sur la page suivante, nous ajouterons des liens. 01 de 05

Créer un lien hypertexte avec KompoZer

Les hyperliens de KompoZer sont accessibles en cliquant sur le bouton Lien de la barre d’outils. Pour créer un lien hypertexte:

1. Placez votre curseur sur la page où vous souhaitez que votre lien hypertexte apparaisse.
2. Cliquez sur le bouton Lien dans la barre d'outils. La boîte de dialogue Propriétés du lien apparaîtra.
3. Le premier champ à renseigner est la zone de texte de lien. Tapez le texte que vous souhaitez voir apparaître sur la page de votre lien hypertexte.
4. Le deuxième champ que vous devez remplir est la zone Emplacement du lien. Tapez l'URL de la page que votre lien hypertexte prendra l'utilisateur lorsque l'utilisateur clique dessus. C’est une bonne idée de copier et coller l’URL à partir de la barre d’adresse de votre navigateur. Vous êtes beaucoup moins susceptible de faire une erreur de cette façon et vous savez, au moins au moment de la création de votre lien, que la page est active et que le lien n'est pas rompu.
5. Cliquez sur OK pour fermer la boîte de dialogue Propriétés du lien. Votre lien apparaîtra maintenant sur votre page.

Sur la plupart des navigateurs, le lien hypertexte apparaît par défaut en bleu souligné. Vous pouvez appliquer vos propres styles aux hyperliens avec KompoZer, mais pour le moment, nous allons nous en tenir à l'hyperlien de base. C’est une bonne idée de prévisualiser votre page dans un navigateur Web et de cliquer sur les liens pour s’assurer qu’ils fonctionnent.

02 de 05

Créer un lien d'ancrage avec KompoZer

Il existe un autre type de lien hypertexte qui vous emmène vers une autre partie de la même page Web lorsque vous cliquez dessus. Ce type de lien hypertexte s'appelle un lien d'ancrage et la zone de la page vers laquelle vous êtes dirigé lorsque vous cliquez sur ce lien s'appelle l'ancre. Si vous avez déjà utilisé le lien «haut de page» au bas d'une page Web, vous cliquez sur un lien vers une ancre.

KompoZer vous permet de créer des ancres auxquelles vous pouvez accéder en utilisant l’outil Ancre de la barre d’outils.

1. Cliquez sur la zone de votre page où vous voulez une ancre. C’est-à-dire où vous voulez que la visionneuse de page soit prise quand un lien d’ancre est cliqué. Pour cet exemple, j'ai cliqué juste avant le «F» dans l'en-tête Musique préférée.
2. Cliquez sur le bouton Ancre dans la barre d'outils. La boîte de dialogue Propriétés de l'ancre nommée apparaît.
3. Chaque ancre sur une page nécessite un nom unique. Pour cette ancre, j'ai utilisé le nom de «musique».
4. Cliquez sur OK et vous devriez voir apparaître le symbole d'ancre à l'endroit où vous avez voulu l'ancre. Ce symbole n'apparaîtra pas sur votre page Web, c'est simplement comme KompoZer vous indique où se trouvent vos ancres.
5. Répétez la procédure pour toutes les autres zones de la page vers lesquelles vous souhaitez que les utilisateurs puissent accéder. Si vous avez beaucoup de texte sur la page, séparé par des en-têtes ou un autre diviseur logique, les ancres sont un moyen facile de naviguer dans une page.

Ensuite, nous allons créer les liens qui mènent le lecteur aux ancres que vous avez créées.

03 de 05

Créer la navigation de page avec KompoZer

Maintenant que vous avez des ancres sur votre page, créons les liens qui seront utilisés comme raccourcis vers ces ancres. Pour ce tutoriel, j'ai créé un tableau de 1 ligne, 4 colonnes sous l'en-tête supérieur de la page. Chaque cellule de tableau contient le même texte que l'un des en-têtes de catégorie utilisés pour séparer les liens de la page. Nous allons faire en sorte que le texte de chacune de ces cellules soit un lien vers l’ancre correspondante.

04 de 05

Créer des hyperliens vers des ancres avec KompoZer

Maintenant que nos ancres sont en place et que le texte que nous allons utiliser pour naviguer dans les pages est entré, nous pouvons transformer ces fragments de texte brut en liens. Nous utiliserons à nouveau le bouton Lien, mais cette fois, cela fonctionnera un peu différemment.

1. Sélectionnez le texte que vous souhaitez transformer en lien. Dans cet exemple, j'ai sélectionné le texte «Musique préférée» qui se trouve dans la première cellule du tableau en haut de la page.
2. Cliquez sur le bouton Lien dans la barre d'outils. La boîte de dialogue Propriétés du lien s'ouvre.
3. Dans ce cas, nous avons sélectionné le texte avant de cliquer sur le bouton Lien. La section Lien texte de la fenêtre est déjà renseignée et ne peut pas être modifiée. Cliquez sur la flèche vers le bas dans la section Emplacement du lien. Vous verrez une liste des ancres que vous avez créées aux étapes précédentes. Pour cet exemple, je sélectionne l'ancre #music.
4. Cliquez sur OK. Le texte "Musique préférée" dans la barre de navigation se transforme en un lien qui amène le spectateur à accéder à cette section de la page lorsque l'utilisateur clique dessus.

Vous remarquerez que chaque ancre nommée dans le menu déroulant est précédée du signe «#». Voici comment créer un lien vers une ancre en HTML. Le «#» devant le nom de l'ancre indique au navigateur que ce lien vous emmène à un autre endroit de la même page.

05 de 05

Créer un lien hypertexte à partir d'une image avec KompoZer

Saviez-vous que vous pouvez créer un lien à partir d'images et de texte? KompoZer vous permet de le faire en quelques clics seulement. Ici, j'ai inséré une petite icône représentant une flèche pointant vers le haut et le texte «TOP» en bas de la page. Je vais utiliser cette image comme lien pour revenir en haut de la page.

1. Cliquez avec le bouton droit sur une image et choisissez Propriétés de l'image et du lien dans l'étiquette de contexte. La boîte de dialogue Propriétés de l'image s'ouvre.
2. Dans l'onglet Emplacement, vous verrez le nom de fichier de l'image et une vue miniature déjà renseignée. Vous devez entrer du texte dans la zone de texte Autre. C’est ce qui apparaît lorsque vous déplacez votre souris sur l’image, ainsi que ce qui est lu par un lecteur d’écran quand une personne malvoyante lit la page Web.
3. Cliquez sur l'onglet Lien. Ici, vous pouvez choisir une ancre dans le menu, comme nous l’avons fait avec les liens d’ancre. En fait, cette image est utilisée comme lien d'ancrage. J'ai sélectionné l'ancre #Links_Of_Interest qui nous ramènera au sommet.
4. Cliquez sur OK. L'image est maintenant liée au haut de la page lorsque vous cliquez dessus.