terminal-media.fr
icon icon facebook icon icon icon icon
cross

 
rss
 
SERVICES


Les liens en HTML

Dans le corps de vore document HTML5 pour naviguer, il vous faut des liens avec des destinations. Voici quelques types de liens différends mais ayant tous en commun, le fait de pouvoir naviguer à l'intérieur ou à l'extérieur d'un autre document.


Dans le même document html
Soit; à l'intérieur de votre document HTML5
Il faut le déclarer au préalable.
C'est très simple. Préciser par exemple dans une balise paragraphe <p>, une ancre.

Exemple
<p id="cible-document"> C'est le document que je souhaitais vous transmettre docteur, il me semble très intéressant... </p>

Puis, le lien dans la même page, vers lequel vous voulez le dirigez

<a href="mon-document.html#cible-ancre" title="Vers mon document">Si vous cliquez sur ce lien vous vous dirigerez vers un endroit précis dans ce même document</a>

Notez que toujours, il y a dans la balise de lien "a href" le fichier en question qui contient le document, "mon-document.html" avec le caractère dièse suivit de la cible "mon-document.html"; Ici: "cible-ancre". Puis après la balise d'ouverture, il y a un contenu (ici : (Si vous cliquez sur ce lien...dans ce document) Puis une fermeture </a>

Ce qui nous donne comme instruction, si on la traduisait en français.

<a href="mon-document.html#cible-ancre" title="Vers mon document">

Balise lien ="mon-document.html#cible-ancre" infobulle ="vers mon document">Cliquez sur ce lien</a>

Précision
Quand une balise lien est présenté, le contenu peut être un texte ou une image et quand c'est un texte, le contenu est souligné.

Sinon, vers un autre fichier html
Soit avec le lien dans un fichier index.html qui dirige vers un autre fichier.html

<a href="fichier-b.html" title="Mon document">Si vous cliquez sur ce lien, vous vous dirigerez vers la page b du site</a>

Vous remarquerez la propriété title="Mon document" qui affiche une étiquette au passage de la souris sur le lien. Par ailleurs, la balise de fermeture est, comme nouns l'avons déjà vu: </a>.

Endroit précis dans un autre fichier html
soit le lien qui vous permet de cibler un point précis dans votre document dans une autre page

Au préalable le fichier cible comme nous l'avons vu, il faut le déclarer

<p id="#cible-document"> C'est le document que je souhaitais vous transmettre docteur, il me semble très intéressant... </p>

Puis, le lien dans la page index.html par exemple, avec lequel vous voulez vous dirigez vers la cible en l'occurence ci-dessus : #cible-document.
Puis
<a href="fichier-b.html#cible-document" title="Mon document">Si vous cliquez sur ce lien vous vous dirigerez dans l'endroit précis du document cible de la page B du site</a>

Ou sinon dans un site externe
<a href="http://www.terminal-media.fr/index.html" title="liens vers terminal-media.fr sur le world wide web avec le protocole http">Le lien en externe du site</a>

Soit avec un téléchargement de fichier
Si vous désirez faire télécharger auprès de votre utilisateur un fichier texte et qu'au lieu de se pésenter dans votre navigateur vous voulez l'acheminer. Il vous suffit de :

Le lien dans un document stocker sur votre serveur sur votre page vers l'utilisateur se code ainsi:

<a href="ma_musique.mp3" title="Mon document sonore">Si vous cliquez sur ce lien vous téléchargerer (rapatrier ) mon fichier Sonore au format mp3</a>

Pour une boite email
Pour se diriger vers une boite email, qui permet d'envoyer d'envoyer des messages, la syntaxe est la suivante:

<a href="mailto:mon_email@fournisseur.fr" title="Votre boite mail">En cliquant sur ce lien vous pourrez m'envoyer un email></a>

Les pseudos-styles de liens
Les peudos classe de liens sont un classique
Nous avons vu que le contenu des balises sont par défaut souligné. Pour les décorer à votre guise, voici quelques pistes.

a:link { text-decoration: none; color: green; } Elles permettent avec le sélecteur <a> de déclarer pour link (lien), aucune décoration de texte et de la couleur verte.

a:visited { text-decoration: line-trought; color: red; }

Elles permettent avec le sélecteur <a> et visited de déclarer (le lien visité) avec une décoration de texte barré et de la couleur rouge.

a:hover { text-decoration: underline;
font-weight: bold;
font-style: italic;
font-size: 18px ; }
Elles permettent avec le sélecteur <a> et hover de déclarer (au survol de la souris) une décoration de texte gras, en italique avec une taille de caractère de 18 pixels.



Page précédente Revenir à la rubrique Page suivante
 
météo
contact
Carte de france et plus loin