Les liens Html
Les liens sont des parties d'un document HTML
qui pointent vers d'autres ressources - d'autres documents HTML, fichiers
texte, fichiers PDF, etc. Certains liens sont suivis automatiquement par le
navigateur, créés à l'aide d'éléments <link> (vous avez déjà rencontré
certains d'entre eux dans Des articles antérieurs, comme lorsqu'ils ont été
utilisés pour importer des fichiers CSS dans un document HTML). Mais généralement,
quand nous parlons de liens, nous voulons dire ceux qui sont créés par l'auteur
de la page et sont facultatifs pour l'utilisateur à activer. Ceux-ci sont
appelés ancres, et vous les ajoutez au document HTML en utilisant l'élément
<a>.
Vous pouvez transformer n'importe quel
élément en ligne ou texte en un lien HTML en ajoutant un élément <a>
autour d'elle. Par exemple, dans le document HTML suivant, le texte "Google"
est un lien.
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Exemple des liens </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Lien vers google </h1>
<p><a href="http://www.google.com">Google</a></p>
</body>
</html>
Les visiteurs qui
activent ce lien (soit en cliquant dessus avec une souris, en l'activant avec
le clavier, soit même par voix dans certains cas) quitteront la page en cours
et accéderont à la page d'accueil Google. Il y a plus de changements qui se
produisent sur le lien lui-même, et nous allons regarder ceux plus tard quand
nous parlons de style de lien.
La balise d'ancrage
comporte plusieurs attributs que vous pouvez ajouter:
Href - la ressource à
laquelle le lien pointe (soit un fichier externe soit un ID d'ancre).
Id - un identifiant
unique pour le lien, utile pour styliser un lien avec CSS ou le référençant
avec JavaScript. Vous pouvez également utiliser un attribut id pour créer un
lien vers un ancrage de page et le lier à d'autres éléments <a>.
Class - un nom de classe
CSS à appliquer au lien, utile si, par exemple, si vous souhaitez définir
certains liens sur la page, mais pas d'autres.
Titre - des informations
supplémentaires sur le lien que le navigateur doit afficher sur le vol
stationnaire.
Examinons d'abord
les attributs les plus importants et ensuite nous parlons de ce que vous pouvez
faire pour établir des liens pour rendre les choses plus faciles pour vos
visiteurs.
L'attribut href
Un élément
<a> peut jouer plusieurs rôles, selon les attributs définis. L'attribut
le plus courant que vous utiliserez est l'attribut href,
qui définit la ressource à laquelle le lien pointe. Cet attribut peut contenir
différentes valeurs:
1-Une URL relative
au dossier en cours, par exemple "../../help/help.html"
(deux points signifient "remonter d'un niveau dans la
hiérarchie des dossiers de site")
2-Une URL absolue à
la racine du serveur, par exemple , "/help/help.html"
(une barre oblique au début de l'URL signifie que l'adresse commence à la
racine de la hiérarchie de dossiers sur laquelle se trouve la page active).
3-Une URL sur un
serveur différent, par exemple "ftp://ftp.monsite.com/"
ou "http://developer.yahoo.com/yui".
4-Un identificateur
de fragment ou un identifiant précédé d'un signe de hachage, par exemple "#menu". Cela indique une cible dans le
document actuel plutôt qu'une URL externe.
5-Un mélange d'URL
et d'identificateurs de fragments. C'est-à-dire, vous pouvez lier directement à
une section d'un document différent en pointant l'attribut href à une URL
suivie d'un identifiant de fragment, par exemple "http://dev.google.com/articles/view/new-structural-elements
-in-html5 / # de côté ".
Création d'une navigation
intra-page avec des attributs id
Vous pouvez
également mettre un attribut id sur un élément <a> pour en faire une
ancre de page. Les ancres de pages sont des cibles intra-page pour d'autres
liens sur cette page. Vous y reliez en mettant l'ID dans l'attribut href d'un autre lien. Par exemple, voici un
ancrage codé pour être une cible de lien: Création d'une navigation intra-page
avec des attributs id
Vous pouvez
également mettre un attribut id sur un
élément <a> pour en faire une ancre de
page. Les ancres de pages sont des cibles intra-page pour d'autres liens sur
cette page. Vous y reliez en mettant l'ID dans l'attribut href d'un autre lien. Par exemple, voici une
ancre codée pour être une cible de lien:
<h2><a id="sec1">Section #1</a></h2>
Cette cible
pourrait être liée par ce lien:
<a href="#sec1">Section I</a>
la plupart des
navigateurs aujourd'hui vous permettent d'écrire ceci en
"sténographie" en mettant l'ID directement sur l'élément que vous
voulez lier à, comme ceci:
<h2 id="sec1">Section #1</h2>
C'est beaucoup plus
simple, et nous vous recommandons de le faire de cette façon chaque fois que
possible.
Le HTML suivant
contient des exemples des différents types de liens:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Différents exemples des liens</title>
<link rel="stylesheet" href="Exemplelienstyle.css">
</head>
<body>
<h1> Différents liens</h1>
<h2> Exemple de navigation dans la page avec des identificateurs de fragments, des liens et des ancres </h2>
<div id="nav">
<ul id="toc"> <!--Table of Contents-->
<li><a href="#sec1">Section I</a></li>
<li><a href="#sec2">Section II</a></li>
<li><a href="#sec3">Section III</a></li>
<li><a href="#sec4">Section IV</a></li>
<li><a href="#sec5">Section V</a></li>
</ul>
</div>
<div id="content">
<div>
<h2 id="sec1">Section #1</h2>
<p><a href="#toc">Retour au menu</a></p>
</div>
<div>
<h2 id="sec2">Section #2</h2>
<p><a href="#toc"> Retour au menu </a></p>
</div>
<div>
<h2 id="sec3">Section #3</h2>
<p><a href="#toc"> Retour au menu </a></p>
</div>
<div>
<h2 id="sec4">Section #4</h2>
<p><a href="#toc"> Retour au menu </a></p>
</div>
<div>
<h2 id="sec5">Section #5</h2>
<p><a href="#toc"> Retour au menu </a></p>
</div>
</div>
<h2> Quelques autres exemples de liens </h2>
<ul>
<li><a href="http://concept-economique.blogspot.com/">conceptions économiques</a></p></li>
<li>
<a href="https://drive.google.com/file/d/0BykWF_TWXIQlYXpUQmNXa1dJNVk/view">Voir le livre toute la function finance</a></p></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Télécharger les différentes versions opéra</a></li>
<li><a href="https://cdn.pixabay.com/photo/2014/10/23/10/10/dollar-499481_640.jpg">Photo des dollars</a></li>
</ul>
</body>
</html>
Une chose
importante à retenir sur les liens est qu'ils sont une partie importante de
votre relation avec vos visiteurs. Les lecteurs croient que lorsque vous leur
offrez un lien, ils peuvent le suivre et obtenir de bonnes informations
pertinentes. Si vos liens ne fonctionnent pas parce que la ressource liée n'est
pas disponible ou est dans un format que le navigateur du visiteur ne peut pas
consommer, vous allez trahir cette confiance et perdre crédibilité. Ne laissez
pas cela se produire.
Fournir des
informations supplémentaires avec un attribut title
Comme pour la
plupart des autres éléments HTML, vous pouvez ajouter un attribut title à un
élément <a> pour inclure des informations supplémentaires. Les
navigateurs afficheront une info-bulle lorsque les visiteurs placent le curseur
de la souris sur le lien. L'info-bulle leur indique généralement de quoi il
s'agit. Par exemple, vous pouvez donner une petite introduction au contenu et à
l'emplacement du document lié:
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title> Ajout d'informations supplémentaires avec un attribut de titre </title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1> Ajout d'informations supplémentaires avec un attribut de titre </h1>
<ul>
<li> Pour plus d'informations sur <a title=" Le Yahoo Developer Network est le centre des outils de développement de Yahoo "
href="http://developer.yahoo.com"> Réseau de développeurs Yahoo </a>.</li>
</ul>
</body>
</html>
Cependant, vous ne
pouvez pas vous attendre à ce que les visiteurs aient suffisamment de patience
et de coordination main-oeil pour s'appuyer sur cette information cruciale. Les
utilisateurs malvoyants, qui ne peuvent pas bien voir la page (ou peut-être du
tout), sont très susceptibles de ne pas pouvoir accéder à cette information.
Bien que les lecteurs d'écran aient la possibilité de lire les attributs de
titre pour l'utilisateur final, cette fonctionnalité est généralement
désactivée par défaut. C'est pourquoi vous ne devez jamais utiliser l'attribut
title pour des informations cruciales sur le lien.
Les informations
cruciales pourraient être:
-Lien vers des
ressources non HTML telles que des fichiers PDF, des images, des vidéos, des
fichiers audio ou des téléchargements.
-Quitter le site
actuel et lier à un autre serveur (liens externes).
-Lien vers un
document qui s'ouvre dans un cadre différent ou un pop-up.
Style de lien
Le traitement
complet du style de lien est au-delà de la portée de cet article (mais vous
pouvez trouver plus d'informations dans les guides / Styling listes et liens). Néanmoins,
il est important de se rappeler que la façon dont les liens apparaissent est
très important et qu'il y a plusieurs différents états de lien à considérer. Les
états de liaison (appelés sélecteurs de classe pseudo CSS) sont:
: Link (default) - définit
le style des liens non visités en général. Par défaut, les liens non visités
sont bleus.
: Visited - définit le style
des liens qui ont déjà été cliqués (visités). Par défaut, les liens déjà
visités sont violets.
: Hover - définit le style
d'un lien pendant que le curseur de la souris plancule dessus.
: Focus: définit le style
d'un lien lorsqu'il est focalisé (ou mis en surbrillance) par un clic de souris
ou via un autre mécanisme de contrôle alternatif tel que le clavier.
: Active - définit le style
du lien pendant qu'il est activé; C'est-à-dire que la connexion à sa cible est
en cours. C'est aussi le style du dernier lien activé lorsque vous arrivez à un
document en utilisant la fonction Retour du navigateur.
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment