Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Syntaxe des liens (links)

Syntaxe des liens (links)

Les liens XHTML constituent les vaisseaux du Web. En fait c'est eux qui nourrissent la notion de l'hypertexte. Qu'est-ce qu'un lien ? Comment peut-on créer un lien ? Quels sont les types des liens ? Hmm... J'ai encore d'autres questions qui me viennent à l'esprit...Pas de panique les gars. Le présent chapitre répondra à toutes vos questions.

Introduction aux liens

Un lien est un mot, une phrase ou une image (Image sous forme de lien ou image cliquable) qui lorsqu'on clique sur lui on se rend généralement dans une autre page. La balise qui permet de créer des liens est <a>, "a" veut dire "anchor" en français c'est "ancre" liens-ancre et comme vous le savez une ancre et un instrument en métal doté de deux dents et qui sert à fixer les navires.

Lorsque vous cliquez sur un lien, vous serez transporté dans le début ou à un endroit bien déterminé dans une page, c'est ce qui représente une ancre c'est-à-dire l'endroit où le lien est ancré ou si vous voulez l'endroit où le lien pointe. Les liens sont au cœur du système web car c'est eux qui alimentent la notion de l'hypertexte (méthode qui permet de joindre une un mot ou une image à une autre page pour faciliter l'accès à la documentation) et c'est eux qui permettent d'interconnecter toutes les ressources mises dans la toile d'où leur importance impérative.

La balise des liens "<a>" doit impérativement avoir l'attribut "href" (href = hyper référence = référence hypertexte) qui détermine l'URL (Uniform Resource Locator) : le chemin d'accès à la ressource qui constitue la destination du lien. Grosso modo en XHTML, un lien ressemble à ceci :

<a href="URL ou adresse du fichier" > le texte du lien sur lequel on va cliquer </a>

La balise <a> est une balise en-ligne (inline : éléments incorporés) non remplacée, ceci dit qu'il doit être placée dans une balise de type bloc (block) comme un paragraphe (<p>), une citation, un tableau etc. autrement dit elle ne doit pas être placée directement dans le corps entre les deux balises <body></body> sinon votre document ne sera pas validé pour les variantes "strict".

Je vous invite à consulter les deux articles "DTD ou doctype" et "le validateur w3c et la validation des documents html, xhtml et css" (cette règle est valable pour tous les autres éléments en-ligne).

Un lien peut contenir du texte (PCDATA) ou des éléments en-ligne (éléments incorporés) à part la balise <a> (un lien ne doit pas avoir un autre lien enfant ou un lien parent).
Un lien peut être placé dans des éléments de type bloc ou en-ligne (à part <button> et <a>).
Voici deux lignes de commentaires extraites du DTD strict :
<!-- a elements use %Inline; excluding a --> : l'élément a ne doit pas contenir un autre élément a.
<!-- button uses %Flow; but excludes a, form and form controls --> : l'élément button ne doit pas contenir : a, form et les contrôles de formulaire (input, textarea, select etc.).
(consultez : les imbrications interdites aux éléments a et button en xhtml 1.0)

Liens relatifs et liens absolus

Il y a deux types de liens, relatifs et absolus :

Remarque : dans l'adressage en Windows on peut se servir soit du slash "/" ou antislash "\", mais sur internet (les langages du web : xhtml, css, JavaScript, PHP etc.) et les autres systèmes d'exploitation (linux, mac os etc.) seulement le slash "/" qui est autorisé.

Exemple d'un lien

On va créer deux pages "origine.html" et "destination.html", en premier lieu on va les mettre dans le même répertoire (un répertoire est un alias du mot dossier), supposons que ce répertoire se situe dans le bureau.

liens hypertextes en xhtml

J'ai crée deux fichiers et je les ai mis dans le même répertoire "repertoire1", notez bien l'adresse marquée par la couleur jaune, à titre de rappel Windows se sert des antislashs "\" pour séparer les dossiers, mais dans la toile on utilise le slash "/". J'ai crée un lien dans la page "origine.html" qui pointe vers la page "destination.html".
Voici le lien :

<a href="destination.html"> lien pour se rendre à la page destination.html </a>

L'attribut href (qui indique l'URL de la page où on va se rendre) comporte seulement le nom du fichier "destination.html", car les deux fichiers se trouvent dans le même répertoire et au même niveau.

Code source de la page "origine.html"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>essai lien</title>
</head>
<body>
<h1>Page d'origine</h1>
<a href="destination.html"> lien pour se rendre à la page destination.html </a>
</body>
</html>

liens (links) hypertextes en html

Code source de la page "destination.html"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>essai lien</title>
</head>
<body>
<h1>Page de destination </h1>
</body>
</html>

liens-xhtml

Explication

Lorsqu'on va cliquer sur ce lien, la page "destination.html" va s'ouvrir dans la page "origine.html" ce qui aura pour effet de l'écraser, pour forcer le navigateur à ouvrir la page "destination.html" dans une nouvelle fenêtre (ou un nouveau onglet) tout en gardant l'ancienne, on doit ajouter l'attribut "target" qui signifie "cible" et on va lui donner pour valeur "_blank" (lien ouvrant une nouvelle fenêtre grâce à l'attribut target).

Par défaut les liens apparaissent avec une couleur bleue et soulignés, lorsqu'un lien est survolé le curseur prend la forme d'une main liens et lorsqu'il est visité (cliquer sur le lien et revenir à la page du lien) il prend une couleur violette et demeure souligné (consultez les propriétés css de formatage du texte : "color" et "text-decoration", ainsi que les pseudo-classes :link (lien), :active (lien activé), :visited (lien visité), :hover (lien survolé).

Si les deux fichiers se trouvent dans des dossiers différents, on va changer d'URL (adresse), supposons que pour cette fois la page "destination.html" se trouve dans un sous-dossier "repertoire2".

liens-xhtml

Le lien va devenir :

<a href="repertoire2/destination.html" >. 

On va ajouter le nom du sous-dossier "repertoire3". Si notre fichier se trouve dans un dossier "repertoire3" lui même se trouvant dans le sous-dossier "repertoire2". Le lien va devenir :

<a href="repertoire3/repertoire2/destination.html" >.

Inutile de vous donner plus d'exemples, je parie que vous avez compris le principe. Si le fichier d'arrivée se trouve en bas (dans des sous-dossiers) vous devez ajouter les noms des répertoires séparés par des slash "/" et enfin mettez le nom du fichier de destination.

Dans le cas contraire, si le fichier de départ se trouve en bas c'est-à-dire dans des sous-dossiers et que le fichier de destination se trouve en haut. Dans ce cas pour chaque sous-dossier mettez deux points juxtaposés ".." dans l'URL.

liens-xhtml

Pour cet exemple le lien sera :

<a href="../destination.html"> lien pour se rendre à la page destination.html </a>.

Si notre fichier de départ se trouve dans un sous-dossier lui aussi compris dans un autre sous-dossier l'URL va devenir "../../destination.html". Pour résumer ; dans le cas où le fichier de destination se trouve dans un rang supérieur à celui du fichier d'origine comportant le lien, vous devez mettre ".." séparés par des slashs "/" pour chaque dossier englobant le fichier d'origine avant de mettre son nom.

Dans le chapitre suivant on va aborder une notion vachement importante (comme d'hab. ). On fait j'estime que certains d'entre vous, vont trouver le sujet un peu endormant Mais croyez-moi, le spectacle est garanti Tuto suivant : des liens accessibles.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau