Les liens

Le sommaire :

Les liens internes vers une étiquette.
Les liens externes.
Les liens externes vers une étiquette.
Les liens de messageries électroniques.
Les liens SKYPE.
Un lien avec l’attribut href vide.

Les liens internes vers une étiquette

Dans une page HTML, vous pouvez créer un lien qui renvoie vers une étiquette.

Une étiquette est donc le repaire d’un point précis dans une page.

Vous devez donc placer votre étiquette par l’intermédiaire de la syntaxe suivante :

Dans la balise <A>, nous utilisons l’attribut NAME pour définir le nom de l’étiquette qui est encadré par des guillemets.

Lorsque vous souhaiterez créer le lien qui pointera sur cette étiquette, vous utiliserez la syntaxe suivante :

<A Href=»#NomEtiquette»>Texte du lien</A>

L’attribut Href contient le nom de l’étiquette, placé entre guillemets et précédé du signe « # » (dièse.)

Ensuite, vient le texte qui deviendra le lien et défini par le marqueur de fin de balise </A>.

Dans l’exemple qui suit, le texte contient le lien intitulé « Revenir » qui pointe sur l’étiquette intitulé « HautDeLaPage » :

<HTML>

<HEAD>

<TITLE>Le système solaire</TITLE>

</HEAD>

<BODY>

<H1>Les planètes du système solaire</H1>

Bonjour, je vous souhaite la bienvenue sur la page de la présentation des planètes du système solaire.

Eh oui, notre système solaire est composé d'une étoile et de 9 planètes qui gravitent autour d'elle. Cette étoile est le noyau central du système, c'est le Soleil...

Nous vous souhaitons un excellent voyage.

Mais si vous avez peur de la visite qui suit, vous pouvez <A HRef="#HautDeLaPage">revenir</A> en haut de cette page.

</BODY>

</HTML>

Toutefois, vous pouvez utiliser les attributs NAME et HRef dans la même ancre.

Ce procédé peut permettre de créer des liens de type, « va et vient », entre 2 parties de texte.

Vous pouvez par exemple créer, dans un texe, un lien qui pointe vers une note en bas de page, et inversement, dans la note, un lien pour revenir dans le texte de départ.

Voici un exemple qui affiche un texte. Dans ce texte, vous trouverez 3 notes de bas de page. Chaque note de bas de page contient à son tour, un lien pour remonter à l’emplacement initial.

<HTML>

<HEAD>

<TITLE>Bienvenue dans le département 17</TITLE>

</HEAD>

<BODY>

<H1>LA CHARENTE-MARITIME</H1>

Le département de LA CHARENTE-MARITIME est un département de sept cent mille habitants situé dans le sud-ouest de LA FRANCE<A HRef="#note1" NAME="retour1">(1)</A>.

Vous pouvez visiter le vieux port de LA ROCHELLE<A HRef="#note2" NAME="retour2">(2)</A>, n'oubliez pas de rendre visite à son magnifique aquarium !

Vous en profiterez pour déguster les excellentes fines de claires<A HRef="#note3" NAME="retour3">(3)</A> car LA ROCHELLE ne manque pas de restaurants...

Alors à très bientôt j'espère...

<A HRef="#retour1" NAME="note1">Retour(1)</A> LA FRANCE : Pays de soixante millions d'habitants de l'EUROPE occidentale.

<A HRef="#retour2" NAME="note2">Retour(2)</A> LA ROCHELLE : Chef lieu du département. Ville implantée sur le littoral ATLANTIQUE et connue pour son vieux port.

<A HRef="#retour3" NAME="note3">Retour(3)</A> Fines de claires : Excellentes huîtres élevées dans le bassin de Marennes oléron. Après avoir poussées dans l'océan, les huîtres sont déplacées dans des bassins marécageux appelés les claires.

</BODY>

</HTML>

Les liens externes

Pour créer un lien, il faut encadrer le texte qui doit devenir le lien par les balises <A Href=…> et </A>.

La syntaxe :

<A Href=»PageWeb»>Texte</A>

La description :

PageWEB est le chemin et le nom de la page WEB hyperliée.

Texte est le texte qui doit devenir le lien.

Ci-après, un exemple contenant un texte. Dans ce texte, le mot « visiter » sera un lien et il pointera sur la page Visiter.HTM.

<HTML>

<HEAD>

<TITLE>Ma première page</TITLE>

</HEAD>

<BODY>

Bonjour, je viens vous présenter mon musé.

Si vous souhaiter le <A HRef="Visiter.htm">visiter</A>, ne vous gêner pas !

Bonne visite.

</BODY>

</HTML>

Les liens externes vers une étiquette

Vous pouvez créer un lien qui pointe vers une étiquette d’une autre page.

Dans la page pointée, vous devez déclarer l’étiquette comme suit :

Dans la balise <A>, nous utilisons l’attribut NAME pour définir le nom de l’étiquette qui est d’ailleurs placé entre guillemets.

Ensuite, lorsque vous souhaiterez créer le lien qui pointera sur cette étiquette, et ce, à partir d’une autre page HTML, vous utiliserez la syntaxe suivante :

<A Href=»NomPage#NomEtiquette »>Texte du lien</A>

L’attribut Href contient le nom de la page HTML ainsi que le nom de l’étiquette, placé entre guillemets et séparés par le signe « # » (dièse.)

Ensuite, vient le texte qui deviendra le lien et défini par le marqueur de fin de balise </A>.

Dans l’exemple qui suit, la page HTML intitulée « Page d’accueil » contiendra 2 liens qui pointront sur 2 étiquettes différentes d’une même page HTML intitulée « conjugaison ».

Voici le code de la page HTML « Page d’accueil » :

<HTML>

<HEAD>

<TITLE>Bienvenue dans la page d'accueil</TITLE>

</HEAD>

<BODY>

<H1>Faites votre choix</H1>

Que désirez-vous apprendre ?

<A HRef="conjugaison.htm#avoir">Apprendre l'auxiliaire avoir</A>

<A HRef="conjugaison.htm#etre">Apprendre l'auxiliaire être</A>

Je vous souhaite une bonne conjugaison !

</BODY>

</HTML>

Voici le code de la page HTML « conjugaison » :

<HTML>

<HEAD>

<TITLE>Conjugaison</TITLE>

</HEAD>

<BODY>

<A NAME="#avoir"><H1>Auxiliaire avoir</H1>

J'ai,

Tu as,

Il ou elle a,

nous avons,

Vous avez,

Ils ou elles ont.

<A NAME="etre"><H1>Auxiliaire être</H1>

Je suis,

Tu es,

Il ou elle est,

Nous sommes,

Vous êtes,

Ils ou elles sont.

<A Href="Accueil.htm">Revenir à la page d'accueil</A>

Fin de la page...

</BODY>

</HTML>

Les liens de messageries électroniques

En HTML, vous pouvez créer un lien de type « Envoyer courrier « de la façon suivante :

<A Href=»mailto:Adresse_électronique »>Texte à afficher</A>

Description :

Dans l’attribut hRef, vous devez spécifier l’adresse électronique juste après Mailto et le séparateur « deux points ».

Le texte devant devenir le lien doit être placé entre les balises <A> et </A>.

Voici un exemple :

<HTML>

<HEAD>

<TITLE>Contactez-nous</TITLE>

</HEAD>

<BODY>

Bonjour, si vous souhaitez me faire part de vos observations, vous pouvez m'écrire ici :

<A HRef="mailto:philippeboulanger2@wanadoo.fr">Vite vos observations</A>

</BODY>

</HTML>

L’objet du courrier :

Toutefois, juste après l’adresse de messagerie que vous avez spécifiée, donc dans la valeur de Mailto, vous pouvez préciser l’objet du courrier électronique par l’intermédiaire de la propriété Subject.

Voici la syntaxe :

<a href=»mailto:adresse?subject=objet»>le texte</a>

La description :

Adresse est l’adresse de messagerie,

Objet est l’objet du courrier,

Texte est le texte qui doit devenir le lien.

Voici un exemple :

<html>

<head>

<title>Me contacter</title>

</head>

<body>

Bonjour, <A Href="mailto:philippeboulanger2@wanadoo.fr?subject=coucou">écrivez-moi vite</a>, j'attends de vos nouvelles.

</body>

</html>

Les liens SKYPE

En HTML, vous pouvez créer un lien pointant sur un contact SKYPE.

Voici la syntaxe :

<A Href=»callto:pseudo_skype»>Texte à afficher</A>

description :

L’attribut Href doit contenir Callto et le pseudo de SKYPE, ces deux informations devant être séparées par le signe « deux points ».

Le texte devant devenir le lien doit être placé entre les balises <A> et </A>.

Voici un exemple :

<HTML>

<HEAD>

<TITLE>Contactez-moi</TITLE>

</HEAD>

<BODY>

Bonjour, si vous souhaitez me faire part de vos observations, vous pouvez m'appeler sur SKYPE :

<A HRef="callto:phiphi-17">Mon SKYPE</A>

</BODY>

</HTML>

Un lien avec l’attribut Href vide

L’attribut « href » de la balise « A » permet bien sûr de préciser la page à ouvrir ou le fichier à télécharger.

Seulement, si vous ne précisez aucun fichier à l’attribut « Href », un clic sur le lien aura pour conséquence d’ouvrir le dossier contenant la page en cours d’affichage.

Le FTP concerné devra être paramétré pour accepter l’affichage virtuel du dossier concerné.

Par contre, sur votre disque local, aucun paramétrage n’est nécessaire…

Cette solution peut être intéressante lorsque vous désirez mettre à disposition des OnLoad et UpLoad depuis un dossier FTP.

Je rappelle donc que vous devez impérativement placer la page WEB contenant le lien à l’intérieure même du dossier à partager !

Voici un exemple.

Ici, nous allons placer la page intitulée « bonjour.html » dans le dossier contenant des fichiers à partager.

Le code HTML de la page est :

<html>

<head>

</head>

<body>

<h1>Bienvenue</h1>

En cliquant sur le lien <a href="">accéder au FTP</a>, vous accèderez à l'intégralité des fichiers que nous avons mis à votre disposition.

Merci de votre visite et à très bientôt !

</body>

</html>

Philippe BOULANGER