ARTICLE DU TUTORIEL

Débutant

5 min

Création d'un hyperlien

Apprenez à créer des hyperliens en HTML vers des sites externes, vers d'autres pages de votre site web ou vers du contenu d'une page.

Avant de commencer

Téléchargez et enregistrez les fichiers du projet. Ouvrez center-hyperlinks.html dans Dreamweaver et affichez le code source en mode Fractionner.

Choisissez Affichage et désélectionnez Fractionner verticalement. Vous superposez ainsi l'affichage du code et l'affichage en direct afin de faciliter la lecture du code HTML.

1. Lien vers une page web externe

Faites défiler jusqu'à la mention et localisez le premier élément de menu, intitulé ABOUT.

Insérez d'abord des balises d'ancrage () de part et d'autre du terme ABOUT. Ajoutez ensuite l'attribut href=" " à la balise ouvrante. Saisissez l'URL web complète http://www.nasa.gov entre les guillemets (" ").

Lorsque vous créez un lien vers une page web externe, vous pouvez faire en sorte qu'elle s'ouvre dans une fenêtre distincte pour éviter que l'utilisateur quitte votre site. Pour ce faire, ajoutez l'attribut target="_blank".

HTML

ABOUT

2. Lien vers une autre page de votre site web

Un site web type comprend plusieurs pages ou documents. Les utilisateurs accèderont vraisemblablement à ces pages en cliquant sur des liens depuis le menu principal ou d'autres endroits de la page. Ici, nous allons créer un lien vers gallery.html qui figure parmi les fichiers du projet.

Ajoutez les balises de part et d'autre du mot IMAGES. Saisissez ensuite href=" dans la balise ouvrante et accédez à gallery.html. Cliquez sur le bouton Ouvrir.

HTML

IMAGES

3. Lien vers une section de votre page

Le contenu de certaines des pages d'un site web peut être particulièrement dense, ce qui nécessite de le faire défiler. Les liens d'appel renvoient les internautes cliquant dessus vers d'autres sections de la même page. Pour en créer, procédez comme suit.

Commencez par identifier la section qui vous intéresse sur la page cible. Dans le fichier d'exemple, un id section2A est déjà défini au niveau de la balise

à la ligne 42.

Insérez ensuite des balises de part et d'autre du mot ARTICLES dans le menu de navigation, puis ajoutez l'attribut href=" ". Spécifiez l'intitulé exact de l'id ci-dessus précédé du symbole dièse (#) entre les guillemets (" ").

HTML

ARTICLES

Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez tester vos hyperliens.

Vous devrez enregistrer vos fichiers pour voir les modifications.


22 juillet 2022

Essayez ces tutoriels avec Dreamweaver

Créez des pages web modernes en responsive design.