<< Retour au sommaire

 

HTML 5, les liens hypertextes

 

 

 

Table des matières

  1. Introduction ;
  2. La syntaxe de la balise <a> ;
  3. La balise <a> est bien une balise inline ;
  4. L’info bulle avec l’attribut title ;
  5. L’attribut « target » ;
  6. Un lien « envoyer courrier » ;
  7. Un lien sur la même page par le biais d’une ancre ;
  8. Cibler une ancre dans une autre page.

 

 

Introduction

 

Qu’est-ce que c’est ?

Un lien est un objet de la page, un texte, une image par exemple, qui, par l’intermédiaire d’un simple clic gauche, permet les actions suivantes :

  1. D’atteindre une autre partie de la page actuellement ouverte dans le navigateur ;
  2. D’ouvrir une autre page ;
  3. De débuter un téléchargement ;
  4. D’envoyer un E-mail via le logiciel de messagerie installé sur l’ordinateur ;
  5. De déclencher un appel SKYPE ou WINDOWS MESSENGER.

 

Href, un attribut indispensable :

L’attribut « href » est obligatoire, il permet généralement de préciser l’adresse URL de la cible qu’il est possible  de noter, soit en absolu, soit en relatif.

En clair, lorsqu’aucun chemin n’est spécifié, c’est dans le dossier courant que la recherche de la page est réalisée.

Si la page cible est située dans un sous dossier du dossier courant, il suffit alors de débuter la destination du lien à partir du premier sous dossier impliqué par le chemin de destination.

Par exemple, si le lien doit ouvrir la page intitulée « suite.html » située dans le sous dossier « accueil » du dossier contenant la page du lien, le chemin relatif sera :

accueil/suite.html

Le caractère qui joue le rôle de séparateur entre les différents dossiers du chemin de destination est « / » le slash, en français, la barre oblique.

Lorsque vous souhaitez créer un lien relatif vers une page qui est située à un niveau hiérarchiquement supérieur dans l’arborescence des dossiers du site, vous devrez débuter l’écriture du chemin de destination par un double point suivi d’une barre oblique.

Par exemple, pour ouvrir la page « accueil.html » située dans la racine du site alors que la page contenant le lien relatif est située dans un sous dossier de la racine :

../accueil.html

 

Le comportement du lien :

Le navigateur déduit généralement tout seul l’exécution à réaliser selon le type du fichier spécifié dans le lien. S’il s’agit d’une page HTML, le navigateur ouvre la page, s’il s’agit par exemple d’un fichier compressé de type « archive » ou « zip », il lance le téléchargement…

 

Le caractère « & » « et commercial » dans une adresse URL :

Si vous devez spécifier une adresse URL contenant des « et commerciaux », vous devez remplacer ces caractères par « &amp », donc :

Et commercial, a m p point virgule.

  Par exemple :

http://www.achetevite/?clients&amp;magasin.pvhp 

 


La syntaxe de la balise <a>

 

La balise qui permet donc de créer un lien est la balise <a>.

Elle est de type inline, c’est-à-dire que son emploi en plein milieu d’un texte de paragraphe ne provoquera pas un passage à la ligne.

Comme indiqué dans le chapitre précédent, elle utilise l’attribut « href » qui permet de spécifier le chemin de destination ainsi que le nom du fichier cible.

 

La syntaxe :

<a href="FichierCible">texte ou image qui doit être le lien</a>

 

La description :

Voici un exemple :

 

Ici, dans le dossier intitulé « Dossier-principal », nous avons 2 pages, index.html et presentation.html.

Ce dossier contient également un sous dossier intitulé « Fichiers ».

Ce sous dossier contient 2 pages, informatique.html et braille.html.

 

La page index.html affiche 4 liens :

  1. Un lien relatif qui pointe sur la page presentation.html située dans le même dossier.
  2.  Un lien relatif qui pointe sur la page informatique.html située dans le sous dossier « Fichiers ».
  3.  Un lien relatif qui pointe sur la page braille.html située dans le sous dossier « fichiers ».
  4.  Un lien absolu qui pointe sur le site « JAWS actions ».

 

Tester les pages >>

< Télécharger l’exemple >

 

Voici le code de la page index.html située dans la racine :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Bienvenue sur mon site !</title>

</head>

<body>

<h1>Salut la compagnie</h1>

<p>Je vous souhaite la bienvenue !</p>

<p>Allez, sans plus attendre, commencez la visite de notre site...</p>

<!-- Voici un lien relatif qui pointe sur une page du même dossier -->

<p><a href="presentation.html">Qui sommes-nous ?</A></p>

<!-- Voici un lien relatif qui pointe sur une page située dans le sous dossier intitulé "fichiers" -->

<p><a href="fichiers/informatique.html">Découvrez l'informatique</a></p>

<!-- Voici un lien relatif qui pointe sur une autre page située dans le même sous dossier intitulé "fichiers" -->

<p><a href="fichiers/braille.html">découvrez le braille</a></p>

<!-- Voici maintenant un lien absolu qui ouvrira le site de JAWS actions -->

<p><a href="http://www.jaws-actions.fr">Visiter le site de JAWS ACTIONS</A></p>

</body>

</html>

 

Voici le code de la page presentation.html située dans la racine :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Présentation</title>

</head>

<body>

<h1>Qui sommes-nous ?</h1>

<p>Nous sommes des petits rigolos qui tentent e vous faire croire que nous connaissons le monde de l'informatique et du braille...</p>

<p>Un conseil, ne nous faites pas confiance !</p>

<p>Je sais à peine lire et écrire !</p>

<!-- Voici le lien relatif qui permet de revenir à l'index -->

<!-- Aucun chemin de destination n'est spécifié puisqu'il se trouve dans le même dossier que cette page -->

<p><a href="index.html">Revenir à la page d'accueil</a></p>

</body>

</html>

 

Voici le code de la page informatique.html située dans le sous dossier « Fichiers » :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>L'informatique</title>

</head>

<body>

<h1>Le monde de l'informatique</h1>

<p>Les personnes déficientes visuelles sont obligées de travailler en utilisant des adaptations.<br />

Pour les personnes malvoyantes, c'est bien souvent l'agrandisseur d'écran "ZoomText" qui est retenu.<br />

Pour les personnes non-voyantes, c'est bien souvent l'éditeur vocal JAWS !</p>

<!-- Voici le lien qui permet de revenir à la page d'accueil index.html -->

<!-- le lien est relatif, -->

<!-- il utilise une syntaxe qui permet de débuter le chemin de destination situé à un niveau hiérarchiquement supérieur -->

<p><a href="../index.html">Revenir à la page d'accueil</a></p>

</body>

</html>

 

Voici le code de la page braille.html située dans le sous dossier « fichiers » :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Le braille</title>

</head>

<body>

<h1>à la découverte du braille...</h1>

<p>Le braille est un ensemble de 6 points en reliefs qui permet à une personne aveugle de lire et d'écrire, le top !</p>

<!-- Voici le lien qui permet de revenir à la page d'accueil index.html -->

<!-- le lien est relatif, -->

<!-- il utilise une syntaxe qui permet de débuter le chemin de destination situé à un niveau hiérarchiquement supérieur -->

<p><a href="../index.html">Revenir à la page d'accueil</a></p>

</body>

</html>

 


La balise <a> est bien une balise inline

 

Et oui, comme la balise <a> est une balise inline, vous devez l’utiliser dans un bloc tel que le bloc <p>, voici un exemple :

 

<p>

Vous pouvez visiter le super site de <a href="http://www.handicapzero.org">HANDICAP ZERO</A> qui propose des outils et des infos pour les personnes déficientes visuelles...

</p>

 

D’où la possibilité de placer un lien à l’intérieur d’un texte sans qu’un saut de ligne soit réalisé, puisque les balises de type « inline » ne déclenchent pas de saut de ligne !

<p>

<a href="http://www.ville-rochefort.fr/accueil">La ville de ROCHEFORT</a> est située sur la rive nord de LA CHARENTE.

</p>

 

Tester les 2 exemples dans une page >>

 

Remarque :


L’info bulle avec l’attribut title

 

La balise <a> vous offre la possibilité d’afficher une info bulle lorsque le pointeur de la souris survole le lien.

Il vous suffit de rajouter l’attribut « title » à l’intérieure de la balise <a>.

 

Note :

 

Voici un exemple :

Lorsque le pointeur de la souris survolera le lien intitulé

« Rendez-vous à ROCHEFORT », une info bulle affichera :

« Site officiel de la ville ».

 

<h1>LA CHARENTE-MARITIME</h1>

<p>

pour votre curiosité, <a href="http://www.ville-rochefort.fr/accueil" title="Site officiel de la ville">

Rendez-vous à ROCHEFORT !</a>

</p>

 

Tester la page >>

 

L’attribut « target »

 

Cet attribut permet d’ouvrir la page hyper liée dans une nouvelle fenêtre du navigateur.

La propriété à utiliser ? « _blank ».

Voici un exemple, ici, le site de la ville de ROCHEFORT s’ouvrira dans une nouvelle fenêtre :

 

<h1>LA CHARENTE-MARITIME</h1>

<p>

pour votre curiosité,

<a target="_blank" href="http://www.ville-rochefort.fr/accueil" title="Site officiel de la ville">

Rendez-vous à ROCHEFORT !</a>

</p>

 

Tester la page >>

 

 

Note :

 

Un lien « envoyer courrier »

 

Il vous est possible de créer un lien de type « envoyer courrier ».

Lors d’un clic sur le lien, le logiciel de messagerie est automatiquement ouvert est l’adresse de messagerie spécifiée dans l’attribut « href » est insérée dans la zone destinataire de l’E-Mail.

Remarque :

 

Dans le lien, il vous suffit de précéder l’adresse de messagerie par « mailto : ».

 

La syntaxe :

<a href="mailto:AdresseDeMessagerie">le texte à afficher</a>

 

Un exemple qui affiche le lien « cliquer ici » et qui enverra un E-Mail à l’adresse de messagerie philippe.boulanger2@gmail.com :

 

<h1>Me contacter</h1>

<p>

N'hésitez pas à me contacter, il suffit juste de <a href="mailto:philippe.boulanger2@gmail.com">cliquer ici</a> !

</p>

 

Vous pouvez également ajouter le contenu de l’objet du courrier en spécifiant « ?subject= » juste après l’adresse de messagerie.

La syntaxe :

<a href="AdresseDeMessagerie?subject=l'objet">le texte à afficher</a>

 

Un exemple qui affichera automatiquement « coucou » dans l’objet :

 

<h1>Me contacter</h1>

<p>

N'hésitez pas à me contacter, il suffit juste de <a href="mailto:philippe.boulanger2@gmail.com?subject=coucou">cliquer ici</a> !

</p>

 

Tester les 2 exemples dans une page >>

 


Un lien sur la même page par le biais d’une ancre

 

L’ancre est un attribut qui joue le rôle de repère dans une page HTML, un signet en quelle que sorte.

Cet attribut est « id », et il peut être placé dans n’importe quelle balise, par exemple dans les balises <h1> ou <p>.

La syntaxe de l’utilisation de l’attribut « id ».

Ici, l’ancre se nomme « VenirIci » et nous avons inséré l’attribut dans la balise <h1> :

<h1 id="VenirIci">Mon Titre</h1>

 

Ainsi, à partir d’un lien situé dans la même page, nous pouvons réaliser un bond jusqu’à la position de l’ancre…

Dans le lien qui pointe sur l’ancre, nous devons spécifier le nom de l’ancre dans l’attribut « href » mais le nom de l’ancre doit toutefois être précédé par le signe « # » « dièse ».

Je rappelle que le signe dièse s’obtient par l’intermédiaire du raccourci clavier :

ALT GR +3 du pavé alphanumérique.

 

Voici donc le lien qui permet d’aller directement à l’ancre intitulée « VenirIci » :

<a href="#VenirIci">Aller au titre de l'exemple de tout à l'heure</a>

 

Maintenant voici un exemple concret…

Dans la page HTML qui suit, nous avons deux gros paragraphes.

  1. Un paragraphe sur une partie de l’histoire de LA France.
  2. Un paragraphe sur la ville de ROCHEFORT.

 

  1. Au début de la page, nous avons placé un lien sur la même page qui permet de réaliser un bond directement au titre du deuxième paragraphe ;
  2. A la fin de la page, on a placé un lien permettant de remonter en « haut de page », l’ancre ciblée cette fois se nomme « début ».

 

Tester la page >>

 

Voici le code :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Vive la FRANCE</title>

</head>

<body>

<!-- voici le lien qui pointe sur l'ancre intitulée "rochefort" -->

<p><a href="#rochefort">Aller directement au chapitre de ROCHEFORT</a></p>

<h1 id="début">LA FRANCE</h1>

<p>

La France actuelle, pays de langue romane mais de superstrat germanique,<br />

occupe la plus grande partie des anciennes Gaules celtiques<br />

, conquises par <strong>Jules César</strong>, mais elle tire son nom des Francs<br />

un peuple germanique, dont le nom signifie « hommes libres », qui se forma tardivement et s’installa sur une partie des terres de l’Empire romain.<br />

</p>

<h2>Évolution du nom « France » et du territoire</h2>

<p>

Le baptême de Clovis, Roi des Francs Francia<br />

 désigne à l’origine la région du nord de l’Europe,<br />

peuplée, ou plutôt dominée,<br /> 

par un peuple de guerriers germaniques qui se nomment eux-mêmes les Francs.<br />

Francia est une adaptation latine du IIIe siècle du terme Franko(n), nom que donnaient les

Francs<br />

 à leur domaine, alors situé probablement dans l'actuelle Flandre belge. En effet, dès les IIIe et IVe siècles les Romains avaient déjà des contacts avec

les Francs, qu'ils enrôlaient comme mercenaires dans leur armée, et ce, bien avant les

invasions germaniques proprement dites.<br />

Francia n’a alors pas une connotation politique mais plutôt géographique<br />

ou sociologique, comme le Maghreb<br />

 ou les Balkans au XXIe siècle<br />

. Le peuple franc est avant tout un peuple de guerriers qui élit

 un chef de guerre<br />

 nommé roi des Francs,<br />

et se place librement sous son autorité<br />

 pour les affaires militaires<br />

. La guerre étant considérée comme la valeur par excellence de l’homme libre, franc finit par devenir

synonyme de libre.<br /></p>

<!-- voici le paragraphe de ROCHEFORT -->

<!-- la balise h1 contient un attribut id pour marquer la position de l'ancre -->

<h1 id="rochefort">La situation de la ville de ROCHEFORT</h1>

<p>

France<br />  

Région Poitou-Charentes<br />    

Département Charente-Maritime<br />    

Arrondissement Rochefort<br />  

(sous-préfecture)<br />    

Canton<br />   

chef-lieu<br />  

 de 3 cantons<br />  

Rochefort-Centre<br />  

Rochefort-Nord<br />  

Rochefort-Sud<br />    

Code Insee 17299<br />    

Code postal 17300  <br />  

Maire<br />  

Mandat<br />  

 en cours <br />  

Bernard Grasset<br />  

2008-<br />  

2014  <br />  

Intercommunalité <br />  

Communauté d'agglomération du Pays Rochefortais  <br />  

Coordonnées géographiques <br />  

45° 56' 32? Nord          0° 57' 32? Ouest / 45.942111, -0.958786  <br />  

Altitudes <br />  

moyenne : 5 m<br />  

minimale : 0 m<br />  

maximale : 29 m  <br />  

Superficie <br />  

2 195 ha = 21,95 km²  <br />  

Population sans doubles comptes <br />  

27 544 hab.<br />  

(2007)  <br />  

Densité <br />  

1 255 hab./km²  <br />  

Gentilé <br />  

Rochefortais(es)  <br />  

Site <br />  

<a href="http://www.ville-rochefort.fr">Visiter le site de ROCHEFORT</a><br />  

</p>

<!-- voici le lien permettant d'atteindre l'ancre "début" -->

<p>

<a href="#début">Retour haut de page</a>

</p>

</body>

</html>

 


Cibler une ancre dans une autre page

 

Vous pouvez bien sûr cibler une ancre sur une page que vous ouvrez depuis un lien.

Dans l’attribut « href », il vous suffit de placer le nom de l’ancre juste après l’adresse de la page, l’adresse de la page et le nom de l’ancre devant être séparées par le signe dièse.

 

Par exemple, pour ouvrir la page qui a été proposée dans l’exemple du chapitre précédent, en ciblant l’ancre intitulée « rochefort » :

<a href="LaFrance.html#rochefort">En savoir davantage sur ROCHEFORT</a>

 

Tester les pages >>

 

Philippe BOULANGER