Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les ancres, liens de messagerie et liens de téléchargement

Les ancres, liens de messagerie et liens de téléchargement

Cette partie va vous permettre de vous approfondir dans la notion des liens On va y voir en gros d'autres types de liens, qui se différencient un petit peu de ce que vous avez vu dans le chapitre précédent.

Les ancres (signets) ancres-signets-liens

Introduction aux ancres (signets)

Les ancres permettent de créer des liens pointant vers un endroit spécifique dans une page web, cet endroit peut être matérialisé par n'importe quel élément : une balise de type bloc (block), une balise de type en-ligne remplacé ou non remplacé. Dans les exemples précédents on a ouvert seulement une nouvelle page mais comment faire pour se rendre à tel ou tel paragraphe ou bien à tel ou tel titre c'est ce que permettent les ancres.

On peut par exemple créer un sommaire sous forme de liens et lorsqu'on clique sur l'un de ces liens on se rend à la partie correspondante (le sommaire qui se trouve tout en haut de la page est une bonne illustration du travail des ancres).

Exemple d'un lien pointant vers une ancre (signet)

Si on veut se rendre à un élément bien déterminé (un titre, un paragraphe, une image etc.) on doit lui ajouter l'attribut "id", et dans l'URL du lien vous devez mettre en premier lieu le chemin d'accès à la page contenant l'ancre (l'élément qui a reçu l'attribut id) puis mettez le signe dièse "#" enfin la valeur de l'id : href="adresse-page#valeur-id".

Maintenant on va se livrer à un exemple plus concret. Supposons qu'on a les deux pages "origine.html" et "destination.html" dans le même dossier et au même niveau :

ancres-signets-liens-anchors

Notre objectif consiste à faire un lien depuis la page "origine.html" vers une ancre bien déterminée dans la page "destination.html" par exemple le troisième en-tête de premier niveau qui à reçu l'identifiant "titre3" (la 3ème balise <h1> a qui on a attribué l'id "titre3").

On va mettre dans un endroit du code xhtml de la page destination.html, l'en-tête suivant :

<h1 id="titre3">La troisième astuce pour améliorer le référencement</h1>

Pour créer un lien pointant directement vers l'en-tête "titre3" on doit taper le code suivant :

  <h1 id="destination.html#titre3" >La troisième astuce pour améliorer le référencement</h1> 

Génial cette fois-ci le lecteur sera transporté tout droit vers l'en-tête "titre3", le visiteur n'aura pas à fouiller dans la page "destination" pour trouver le titre "La troisième astuce pour améliorer le référencement".

Lien vers une ancre dans la même page

On peut aussi créer un lien pointant vers un endroit bien précis dans la même page (l'ancre et le lien se trouvent dans la même page). Cette fois-ci vous pouvez omettre l'adresse de la page (mais rien ne vous interdit à la mettre) et vous contentez uniquement de la notation "#valeur-id". On va créer une ancre vide (une balise vide) tout en haut de la page par exemple :

<p id="top"></p> ou bien <span id="top"></span> (ce que vous voulez)

Et tout en bas de la page mettre un lien qui permet au lecteur de se rendre en haut (top) par exemple lorsqu'il a finit la lecture de la page :

<a href="#top">Remonter en haut de la page</a> 

Vous pouvez faire le raisonnement inverse (un lien en haut de la page qui permet de se rendre en pied de page) ou créer un petit sommaire de la page, il y a beaucoup d'idées, il faut juste employer un petit peu la matière grise ancre Notez bien qu'une ancre peut être vide comme c'est le cas dans cet exemple ou contient des données comme c'est le cas dans le premier exemple.

Remarques à propos des ancres (signets)

Un lien vers une messagerie (mailto)

On peut créer un lien vers une messagerie en procédant ainsi :

<a href="mailto:adresse-email">texte du lien</a>
<a href="mailto:tonyhawk.66@hotmail.com">Toutes vos remarques, suggestions et critiques seront les bienvenues</a>
      

Notez qu'au lieu de l'URL d'une page on insère une adresse email précédée par la notation : "mailto:". Lorsqu'on clique sur le lien le navigateur va ouvrir Outlook express ou tout autre logiciel de messagerie contenant par défaut le nom de l'adresse email spécifiée dans l'attribut "href".

Les liens de téléchargement

Lorsque le lien pointe vers une ressource autre qu'une page xhtml (*.html), le navigateur va ouvrir une fenêtre et vous demandez d'entreprendre l'une des trois actions suivantes :

Parmi ces ressources on peut citer : pdf, doc (word 2003), docx (word 2007), ppt (PowerPoint 2003), ptx (PowerPoint 2007), xls (Excel 2003), xlsx (Excel 2007), zip ou rar (fichiers compressés), mp3, flv, txt (fichier ASCII), fichier BitTorrent, chm (fichier d'aide), mdb (access 2003), accdb (Access 2007), mpeg, etc.

Pour chacune de ces ressources le navigateur fera appel au logiciel adéquat pour sa lecture, car le navigateur ne peut lire que les fichiers xhtml donc la ressource sera lue à l'extérieur du navigateur.

Mais parfois le browser lit d'autres formats (sans passer à un logiciel) comme "FLV" et les vidéos "Flash" grâce à un plug-in téléchargeable dans la toile, c'est-à-dire un module complémentaire qui permet d'étendre les capacités du navigateur. En "youtube" par exemple le navigateur charge une vidéo FLV dans le plug-in sans changer de page. Si vous n'avez pas ce plug-in, le navigateur vous propose automatiquement de le télécharger.

Dans le prochain chapitre. On va évoquer une fois de plus la notion de l'accessibilité : améliorer l'accessibilité du Web par les liens d'évitement.

Comment créer une page Web ? Editeurs ASCII et éditeurs WYSIWYG.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau