Médiaforma

All posts tagged lien

Dans cette rubrique, je vais vous montrer comment modifier les caractéristiques d’un lien hypertexte lorsqu’il a été visité. Pour cela, nous allons utiliser la pseudo-classe visited. Voici le code utilisé :

Ce document contient deux liens hypertextes. Le premier de classe vnv (c’est l’abréviation de visité, non visité), et le deuxième sans classe.

Pour modifier les caractéristiques d’un lien lorsqu’il est visité, il suffit de définir la pseudo-classe-visited. Ici, les caractères seront de couleur verte et l’arrière-plan légèrement gris. Voici le résultat :

Attention :
Les propriétés utilisables dans la pseudo-classe visited sont très limitées. Par exemple, il n’est pas possible de modifier la propriété text-decoration pour, par exemple, supprimer le soulignement une fois que le lien est cliqué !
Vous devrez vous limiter aux propriétés color, background-color, border-color et outline-color. Et là encore, la prise en compte de ces propriétés dépend du navigateur utilisé !


Pour qu’une image renvoie vers une page quelconque, il suffit de l’entourer par une balise <a>.

Ici par exemple, l’image a pour nom excel2010.png et elle renvoie vers la page https://www.mediaforma.com.

Lorsque ce code est exécuté dans Firefox ou Chrome, il fonctionne à la perfection. Lorsqu’il est exécuté dans Internet Explorer, l’image est entourée d’un cadre dont la couleur varie selon si l’image a ou n’a pas été cliquée. Pour supprimer ce cadre, ajoutez l’attribut border=”0″ dans la balise <img>.


Lorsqu’une page s’étire en longueur, il peut être utile d’y insérer des ancres pour accéder à certaines parties stratégiques. Par exemple, le début du document et chacun des titre de niveau 2 du document.

Pour définir une ancre, il suffit d’insérer un attribut name dans une balise <a>. Ici par exemple, nous définissons l’ancre a1 au début du document, et l’ancre a2 à la fin du document. Pour faire référence à une ancre, insérez le signe # dans l’attribut href du lien. Ici, le texte Aller à la fin du document fait référence à l’ancre a2, et le lien Aller au début du document à l’ancre a1 :


Les liens peuvent également être utilisés pour envoyer des messages e-mail. Pour cela, il suffit d’insérer le mot “mailto” suivi du caractère “:” et de l’adresse e-mail du correspondant.

Dans cet exemple, la ligne 6 définit un lien sur le texte “Cliquez ici pour m’envoyer un message”. Lorsque ce texte est cliqué, un nouveau message est créé dans la messagerie par défaut. Le champ A est automatiquement rempli avec l’adresse e-mail qui suit le mot mailto. Il ne reste plus qu’à indiquer l’objet du message et à rédiger le message.

Si vous le souhaitez, il est également possible de remplir automatiquement un ou plusieurs autres champs en utilisant les paramètres suivants :

  • ?subject=, suivi de l’objet du message ;
  • &cc=, suivi du ou des destinataires secondaires du message ;
  • &bcc, suivi d’un ou de plusieurs destinataires secondaires. Chacun des destinataires du message ne verra pas le ou les destinataires spécifiés dans ce champ.
  • &body=, suivi du texte du message.

Dans cet exemple, un e-mail est envoyé à l’adresse prenom.nom@fai.com. L’objet du message est “Premier contact”. Le mail est également envoyé à admin@html5.com et le corps du message contient le mot Bonjour, suivi d’une virgule.


Les liens ne renvoient pas forcément vers des pages Web : ils peuvent également donner la possibilité de télécharger un fichier quelconque. Pour cela, il suffit de préciser le nom du fichier dans l’attribut href.

Dans cet exemple, en ligne 6, le texte “Cliquez ici” permet de télécharger (ou d’afficher dans le navigateur s’il dispose d’un plugin PDF) le fichier document.pdf qui se trouve dans le même dossier que la page en cours de visualisation.

En ligne 7, le fichier a pour nom application.exe. Il se trouve dans le dossier fichiers du serveur FTP d’adresse ftp.domaine.com. Le téléchargement se fait en cliquant sur le texte “Cliquez ici”.


L’attribut target de la balise <a> permet de préciser la fenêtre dans laquelle sera ouverte la page visée. Si cet attribut n’est pas spécifié, la cible remplace la page actuelle. Pour ouvrir la page visée dans une autre fenêtre du navigateur, affectez la valeur “_blank” à l’attribut target :

Voici le résultat :


Pour affecter un lien hypertexte à un mot ou un bloc de texte sélectionné, basculez sur l’onglet INSERTION dans le ruban, et cliquez sur l’icône Lien hypertexte dans le groupe Liens (vous pouvez également appuyer sur Ctrl + K pour obtenir le même résultat).

Sélectionnez le fichier ou entrez l’adresse de la page Web que vous voulez relier au bloc de texte sélectionné puis cliquez sur OK.

Le lien hypertexte est immédiatement inséré dans le document.

Pour accéder au document ainsi référencé, que ce soit sur votre PC, à travers un réseau local ou à partir d’Internet, il suffit de contrôle-cliquer (c’est-à-dire cliquer en maintenant la touche Ctrl enfoncée) sur le lien dans le document.

S’il s’agit d’un fichier Word, il est ouvert dans Word.

S’il s’agit d’un fichier de n’importe quel autre type, il est chargé dans l’application qui est reliée à son extension.