Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Tout ce que vous devez savoir sur les liens

Par celynette (celine moulard), le 25 mai 2011

Faire un site internet avec une page c'est bien, avec deux c'est mieux! Dans ce tutoriel, nous allons passer en revue tout ce qu'il faut savoir pour créer et modifier des liens.

Il faut tout d'abord savoir qu'il existe deux types de liens: les liens absolus et les relatifs.

Le lien absolu est de la forme:

http://www.monsite.com

il commence par

 http://

et redirige vers un lien le plus souvent EXTERNE au site propre. Il peut également cibler une page en particulier sur un site. (exemple: http://www.mediabox.fr/formateurs.html )

Le lien relatif est un lien INTERNE à votre propre site. Il sera de la forme:

mon_dossier\fichier_cible.php

ou

...\mon_dossier\fichier_cible.php

Créer un lien vers une autre page

Pour créer un lien en html, on utilise la balise

<a></a>

Pour créer le lien on doit ajouter à cette balise, l'attribut href, dans lequel on notera l'adresse de la cible.

Exemple:

Dans l'exemple ci-dessus, la balise

<a></a>

encadre « cette page», il s'agit donc du lien cliquable de la page internet. Le lien renvoie vers un site appelé www.pageexemples.fr.

Créer un lien vers une ancre

Qu'est-ce qu'une ancre?

Une ancre est un point précis dans la page. Grâce à cette ancre, le visiteur peut être redirigé à n'importe quel endroit de la page, là où se situe l'ancre.

Comment créer une ancre dans une page?

Regardez l'exemple suivant:

Pour créer une ancre dans le code html, il suffit de créer des attributs id contenants le nom de l'ancre en question. Pour faire pointer un lien vers une ancre, l'attribut href doit renvoyer vers le nom de l'id, ici, ancre1 et ancre2.

Lien vers un e-mail

Lorsqu'on crée un site internet on a souvent besoin de créer une page de contact, on peut le faire grâce à un formulaire en ligne, ou par e-mail.

Voici comment faire un lien vers un mail:

Reprenons l'exemple du début et ajoutons un lien vers un mail:

On utilise « mailto:adressemail » dans l'attribut href. Notez qu'une nouvelle page contenant un formulaire s'ouvre ;)

Une nouvelle fenêtre?

Pour ouvrir un lien dans une nouvelle fenêtre, deux choix s'offrent à nous: soit le visiteur active cette fonctionnalité et chaque lien ouvre une nouvelle fenêtre, soit on utilise le « target » pour n'ouvrir que certains liens dans une nouvelle fenêtre du navigateur. Cette fonction peut être utile notamment pour les fichiers consultables en ligne.

Il suffit donc de rajouter

target="_blank"

dans l'attribut href.

Exemple:

Nous avons fini avec la partie html, nous allons maintenant voir toute la partie personnalisation ;)

Des liens pas comme les autres grâce au css

Pour le moment les liens apparaissent en bleu foncé et surlignés comme ceci:

Mais grâce au css, on peut changer tout cela !!

De la couleur svp!

Voici comment changer la couleur des liens:

On garde le code html:

A présent, on ne travaille que sur la page css:

On peut aussi remplacer le nom (anglais!) de la couleur par la notation hexadécimale ou la méthode RGB.

On change de style!

On peut également changer le style de la police, sa taille, le fait de surligner ou non le lien … comme un texte normal! Voilà ce que cela donne en css:

Ce qui donne:

Voici quelques idées pour customiser vos liens:

  • color: pour changer la couleur du texte du lien.
  • background-color, change la couleur du fond.
  • text-decoration : permet de changer l'aspect, la position du soulignage.
  • Avec text-decoration:none , on peut le retirer!
  • letter-spacing : jouer sur l'espacement des lettres.
  • text-transform: pour les majuscules/minuscules …

Faites marcher votre imagination pour créer des liens uniques!

Et si on mettait toute cette liste à profit pour animer un peu nos liens?

Un peu d'animation …

On s'intéresse ici aux effets que l'on peut donner avec du css, au passage de la souris, lorsque le lien est cliqué, lorsque le lien a déjà été visité.

Le pseudo-format :link

Il est utilisé pour définir un lien qui n'a pas encore été visité.

Exemple:

Le pseudo-format :hover

Le pseudo-format utile est :hover , il agit sur le lien au passage de la souris.

Exemple:

Le lien devient donc noir au passage de la souris. A noter aussi que la police change.

Le pseudo-format :active

Le pseudo-format :active permet d'appliquer un style particulier au moment du clic.

Le pseudo-format :focus

On utilise le pseudo-format :focus lorsque le lien est sélectionné. Ce pseudo-format est similaire au précédent car il agit au moment du clic.

Exemple:

J'ai mis un changement de couleur au moment du clic mais on aurait très bien pu changer l'espacement des lettres ou souligner le lien ;)

Le pseudo-format :visited

On utilise le pseudo-format :visited quand la page a déjà été vue.

L'ordre n'a d'habitude aucune importance en définitions CSS, on peut très bien définir la couleur avant la taille et vice versa, mais ici c'est très important de veiller à placer les définitions a:hover et a:active en dernier, dans la cas contraire elles risqueraient de ne pas fonctionner.