les liens et les balises de référencement en XHTML

Les balises de référencement

Ce sont ces balises qui permettent de faire le lien entre la page XHTML est tout autre document mais également d'inclure dans cette page toute sortes d'informations et de données.

balise de description de lien
balisetypedescriptionattributs utiles
balisetypedescriptionattributs utiles
<meta />ligne permet d'inclure une des informations dans la partie entête de la page.http-equiv, name, content
<a>ligne permet de définir un lien.href

<meta />

définition

Bien que généralement oubliée , cette balise qui n'apparaît que dans la balise <head> d'un document XHTML est trè importante car elle transmet à votre navigateur des informations supplémentaires pour lui permettre de traduire de la façon la plus fidéle votre contenu.

C'est grâce à la balise <meta /> que l'on peut indiquer par exemple :

  • le type de caractère utilisée dans votre fichier (iso-8859-1, iso-8859-15, utf-8 ,etc...);
  • la date de dernière modification de votre fichier;
  • des informations pour les robots qui indexent les document sur l'Internet;
name :
permet d'indiquer le nom de la valeur soumise. name prend souvent des noms anglais et aide à l'indexation sur l'Internet avec des valeurs comme keywords, robots, revisit-after ;
http-equiv :
permet d'envoyer et/ou de changer les entêtes HTTP du fichier. De ce fait il est recommandé d'utiliser avec parcimonie cette attribut.
content :
permet d'indiquer le contenu de la balise. l'attribut content doit toujours être associé à un http-equiv ou un name.

Toutes ses données ne sont pas visibles directement sur l'écran de votre navigateur, c'est d'ailleurs une des raison de leurs omissions.

exemples

<meta http-equiv="content-type"        content="text/html; charset:iso-8859-15" />
<meta http-equiv="last-modified"       content="Wed, 27 Apr 2005 05:15:45 GMT" />
<meta http-equiv="expires"             content="Mon, 26 Jul 1997 05:00:00 GMT" />
<meta http-equiv="pragma"              content="no-cache" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type"  content="text/css" />
<meta http-equiv="window-target"       content="_top" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="robots"                    content="index, follow" />
<meta name="revisit-after"             content="12 days" />

<a>

définition

C'est de loin la balise la plus utilisée. Son importance vient du fait qu'elle sert à faire des liens :

  • entre le document XHTML et tout autre document ;
  • entre différentes parties du même document XHTML;

Pour cela, la balise utilise l'attribut href. La valeur de href permettra de pointer soit vers un document distant soit vers une partie interne du document courant. Bien sûr le contenu de la balise sert à expliquer le lien. nous aurons donc une contruction du type :

<a href="destination">explication</a>

liens externes à votre document

Pour les liens distants, il existe 3 types de liens que je citerais par ordre d'importance, du moins important , au plus important :

les liens relatives :

Si la page que vous désigner ( ex :dest.html) se trouve dans un dossier adjacent (ex : ouca) à celui qui contient votre fichier et votre balise <a> vous pouvez pointer vers dest.html en écrivant :

<a href="../ouca/dest.html">explication</a>

La limitation de cette méthode et que si vous changer votre page courante de dossier, le lien risque fort de ne plus fonctionner.

les liens absolues :

C'est pour contourner cette difficulté que l'on préfèrera utiliser les liens absolues car il parte de la racine de votre site. ainsi si l'on reprend l'exemple ci-dessous et que vaut 2 pages se trouve dans un dossier predici, lui-même compris dans le dossier principal de votre site on aura pour le même lien la valeur suivante :

<a href="/predici/ouca/dest.html">explication</a>

Les liens absolues sont de ce fait les plus utilisés pour pointer vers des documents intra-sites.

liens universels :

Si le document que vous rechercher n'est pas dans votre site mais sur le site de votre voisin vous devrez alors utiliser l'URL complet du fichier de destination.

<a href="http://www.saintexnet.org/who/">les fondateurs du saintexnet</a>

liens internes à votre document

Pour faire sauter votre visiteur d'une partie à l'autre de votre document, il faut en fait utiliser 2 balises et l'attribut id. la balise <a> bien sûr mais également une autre balise incluse dans le corps de votre document XHTML, la balise <body> incluse.

Comment cela fonctionne ? Comme nous l'avons vue, l'attribut id peut-être associé à n'importe qu'elle balise mais sa valeur doit être unique. De fait si on fait référence à la valeur de id on est sur de ne retrouver qu'une et une seule balise avec cette valeur dans le document.

Pour indiquer à l'attribut href que l'on souhaite pointer vers une partie interne du document il suffit de faire précéder la valeur de l'attribut id d'un # comme suit :

<a href="#top">le haut du document</a>

Pour aller plus loin

Rien ne vous empêche de combiner liens externes et liens internes pour obtenir un lien du type :

<a href="http://www.saintexnet.org/who/#top">le haut du document des fondateurs</a>

l'accessibilité...

Mais de quoi suis-je en train de parler, on parle structure , présentation et le voila avec un nouveau mot à la bouche accessibilité. Déjà avec les tableaux, le concept d'accessibilité a été mis en avant avec l'attribut summary. Ici encore, avec les liens il en sera question. Comment rendre un lien accessible à une personne qui ne vois pas ou qui ne peut pas utiliser une souris. Simple le XHTML met à notre disposition un attribut accesskey qui permet de désigner un lien avec une lettre de l'alphabet. En cliquant sur cette lettre et du moment que votre navigateur le supporte, tous se passe comme si vous avait cliquer sur le lien...super non, je conseille d'utiliser cette attribut pour tous ce qui est navigation. Et d'indiquer la lettre choisie parmi le mot et/ou la phrase du lien ainsi la personne peut la trouver plus facilement, nous aurons donc par exemple un lien de ce type:

<a href="http://www.saintexnet.org/who/#top" accesskey="h">le <em>h</em>aut du document des fondateurs</a>

Et Fulgence dans tous ça...

Hé bien grâce à tous ce que je viens d'expliquer il peut maintenant définir, le type de caractères à utiliser par le navigateur et peut créer des tonnes de liens sur sa page web...bref Fulgence est aux anges...sans jeu de mot!!!

Hélas pour moi, Fulgence et vite redescendu en protestant que je n'avait toujours pas mis sa photo sur le site, alors n'écoutant que mon courage et redoutant sa vindicative... je me suis mis en quête d'une photo potable de Fulgence...mais ça c'est une autre histoire.

Catérogies : Tutoriels