DEVENIR-WEBMASTER.COM Log In
 15
close

Coder les liens en HTML et en CSS

Visiter ma chaine Youtube

# Coder les liens en HTML close

Pour faire un lien vous écrivez le texte sur lequel vous voulez cliquer puis vous l’encadrez avec les balises de l’élément a, a c’est le nom de l’élément qui sert à faire des liens.

Encadrer le texte pour faire un lien

Le principe du lien hypertexte est le suivant : lorsque le visiteur clique sur le texte du lien le navigateur charge une nouvelle page. Il faut donc mettre l’adresse de cette nouvelle page quelque part.

Vous devez utiliser l'attribut href pour mettre l'adresse de cette page.

Un exemple de lien

Ce que vous pouvez remarquer ici c'est que je n'ai pas mis le nom de la page. Le principe c'est d'aller vers une page mais je ne mets pas le nom de la page. Ça nécessite une petite explication. Et là il faut le savoir c'est le serveur http qui va choisir le fichier. De notre côté on lui propose un répertoire.

Comment va se faire ce choix au niveau du serveur http ? Et bien le serveur va choisir en fonction de ce qu'il a dans le répertoire et de sa configuration. Il choisit entre le fichier index.php ou index.html.

Le navigateur ne nous dit pas dans la barre d'adresse lequel des deux est choisi et c'est normal. Il ne le sait pas.

# Utiliser l'attribut target close

Si vous voulez que la nouvelle page soit chargée dans un nouvel onglet vous devez utiliser l'attribut target.

Ouvrir un lien dans un nouvel onglet

# Utiliser l'attribut title close

Si vous voulez avoir une info bulle au survol vous devez utiliser l'attribut title.

Avoir une info bulle au survol

# Faire un lien vers une partie précise d'une page close

Un exemple concret, dans cette page j'ai fait un lien vers urlmapping.html. Les informations vers lesquelles je veux vous renvoyer sont dans la partie "Racine des documents". Alors je regarde le source et je vois qu'il y a un identificateur sur lequel je peux en quelque sorte m'accrocher. Je vais donc mettre cet identificateur dans l'Url.

Et voilà ce que ça va donner urlmapping.html.

Une Url avec un identificateur

# Faire un lien de téléchargement close

Pour faire un lien de téléchargement le mieux est d'encapsuler au préalable ce que vous voulez mettre à disposition dans un fichier compressé .zip. Vous devez faire ça notamment si vous voulez proposer un fichier html parce que là le clic sur le fichier provoquerait sa visualisation. Avec l'extension .zip c'est le téléchargement qui va s'enclencher.

Ensuite vous proposer le lien tel quel et un téléchargement s'enclenchera au moment du clic de l'utilisateur.

Ici vous avez le fichier compressé .zip et ici le .html

# Styler les liens en CSS close

Déjà on peut regarder comment se présente les liens par défaut.

  1. Un lien qui n'est pas visité est bleu.
  2. Un lien qui est visité c'est à dire présent dans l'historique du navigateur est mauve.
  3. Si vous cliquez et que vous gardez le clic enfoncé le lien devient rouge.
  4. Tous les liens sont soulignés et restent soulignés.

Avec le CSS vous pouvez changer ce comportement par défaut. Vous pouvez le changer état par état ou pour tous les états.

Par exemple vous pouvez supprimer le soulignement pour tous les états.

Vous pouvez sélectionner chaque état en utilisant ce que l'on appelle des pseudo-classes.

Ici je vais mettre une couleur verte pour les liens non visités et une couleur orange pour ceux visités.

Maintenant je vais rajouter le soulignement lorsque le lien est survolé.

On a le résultat ici

Attention car l'ordre doit être respecté. Vous pouvez voir ici que si l'ordre n'est pas le "bon" ça ne fonctionne pas. Je vous mets ci dessous les principaux états qui peuvent être gérés en CSS ainsi que l'ordre que vous devez respecter.

# Comment agrandir la zone de clic ? close

Il peut être intéressant d'agrandir la zone de clic pour donner plus de confort à un utilisateur notamment lorsque le site est visité sur smartphone.

Les liens sont des éléments HTML de type inline et ne peuvent pas être redimensionnés. Heureusement vous pouvez changer de type pour modifier ce comportement. Une solution est d'utiliser le type inline-block.