Creer des liens (des ancrages)

Dans ce post, nous allons parler des liens, ces derniers sont à la base de la navigation Internet, ils permettent de naviguer soit dans votre propre site, dans votre propre page ou vers d'autres sites.

Liens externes dit absolu

Ce sont des liens qui permettent de naviguer vers d'autres sites. Par exemple si j'ai envie de créer un lien vers le site web de l'université d'Evry, voici le code que je dois faire

<a href=" l'adresse du site web "> Le nom de votre lien </a>

<a href=" http://www.univ-evry.fr/ "> Université d'Evry </a>

Université d'Evry

Bulles d'aide

La bulle d'aide crée par l'attribut title permet de fournir une brève description du lien. Donc quand on passe la souris sur le lien, sans cliquer on voit apparaitre cette fameuse bulle d'aide.

<a href="L'adresse du site web" title="La bulle d'aide">Le nom de votre lien</a>

<a href="http://www.univ-evry.fr/" title="Vous allez visitez le site de l'Université d'Evry">Université d'Evry </a>

Université d'Evry

Liens internes dit relatif

Ce sont des liens qui permettent de naviguer dans un même site, de lier les pages de votre site.

<a href="chemin/chemin/chemin/fichier">Le nom du lien</a>

<a href="c:/documents/monsite/page4.html">Le nom du lien</a>

Le nom du lien

Lien pour envoyer un mail

Si vous souhaitez envoyez un mail à une personne, vous pouvez tout simplement créer un lien qui ouvrira directement votre boite mail.

<a href="mailto: L'adresse mail du destinataire ">Nom du lien</a>

<a href="mailto:fabdahustla@hotmail.fr">Me Contacter</a>

Me Contacter

Un lien vers une ancre

Une ancre c'est un lien interne à une même page, souvent quand on visite un site web et que l'on ai tout en bas de la page nous avons une sorte de fléche qui nous permet de remonter en haut de la page, c'est une ancre

<a href="#nom de l'ancre">Texte qui sera ciblé</a><span id="nom de l'ancre">Titre de la balise</span>

<a href="#dans">Allez en haut de la page</a>
<span id="dans">Dans</span>

Allez en haut de la page

Faire d'une image un lien

On commence a élever la difficulté, la on va créer un codage qui permet d'aller sur une autre page en cliquant sur une image

<a href="L'ADRESSE DU LIEN"><img src="ADRESSE DE L'IMAGE"></a>

<a href="http://www.nba.com/"><img src="http://img231.imageshack.us/img231/3456/7878925xi9.jpg"></a>

Cliquer sur l'image :-)

Styles et couleurs pour les liens

Ici nous allons voir comment mettre un peu de style, de couleurs a vos liens, nous verrons cette partie plus amplement lorsque nous traiterons du langage CSS, qui est le langage de la présentation, le HTML traitant plus du contenu.
Il y a 3 état pour un lien

• Le lien non visité : la couleur du lien par défaut à l'origine'
  a:link
  
• Lle lien visité : couleur après avoir cliqué dessus'
  a:visited
  
• Le lien activé c'est lorque l'on passe le pointeur de la souris dessus sans cliqué.
  a:hover
  

À placer entre les balises HEAD
<style>
A:link {text-decoration: none; color: #0000FF; font-size: 12pt}
A:visited {text-decoration: line-through; color: blue; font-size: 12pt}
A:active {text-decoration: none; color: #FF0000; font-size: 12pt}
A:hover {text-decoration: underline; color: #FF0000; font-size: 12pt}
</style>

- underline, soulignement.
- overline, surlignement.
- line-through, barrage.
- blink, clignotement (sauf ie).
- none, sans rien.

Combo

Nous allons dans ce post faire un mélange de tout ce que nous avons vu car nous pouvons additionner ces atttributs en l'occurence avoir une bulle d'aide et envoyer un email

<a href="mailto:ADRESSE MAIL DU DESTINATAIRE" title="NOM DE LA BULLE D'AIDE">NOM DU LIEN</a>

<a href="mailto:fabdahustla@hotmail.fr" title="La bulle d'aide" >Le nom de votre lien</a>

Me Contacter