• Article
  • Discussion
  • Modifier
  • Historique

Liens internes et externes

Un article de Eric Bruyndonckx.

Sommaire

[modifier] Thèmes

Connaître les techniques d'établissement de liens hypertextes pointant vers une autre page HTML, ou à un endroit précis à l'intérieur d'une page. Usage d'URL de différents types (http, mailto, ftp, news, telnet, etc.)

[modifier] Liens hypertextes

[modifier] Définir un lien 

<a href="URL">Texte explicite du lien</a>

Pour URL mentionnez une adresse Web ou la cible avec ou sans chemin du fichier ou de la source devant être reliée.

URL peut être :

  • une ancre dans le même fichier (par exemple #nom d'ancre)
  • un autre fichier (par exemple fichier.htm)
  • un autre fichier dans un autre répertoire (par exemple ../répertoire/fichier.htm)
  • une ancre dans un autre fichier (par exemple fichier.htm#nom d'ancre)
  • une adresse WWW (http://...)
  • une adresse Gopher (gopher://...)
  • une adresse FTP (ftp://...)
  • une adresse Telnet (telnet://...)
  • une adresse de groupe de nouvelles (news:...)
  • une adresse locale absolue (file://...)

[modifier] Définir une ancre 

<a name="nom">Texte explicite du lien</a>

Pour nom notez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).


[modifier] Atteindre une ancre 

<a href="URL#nom">Texte explicite du lien</a>

Pour URL#nom faites attention au caractère # séparant l'élément URL de l'élément nom.

[modifier] Fenêtre-cible pour les liens 

<a href="URL" target="fenêtreCible">Texte explicite du lien</a>

Pour fenêtreCible mentionner le nom d'une fenêtre-cadre définie ou l'un des noms réservés suivants :

  • _blank = ouvrir le lien dans une nouvelle fenêtre,
  • _self = ouvrir le lien dans la même fenêtre,
  • _parent = terminer le jeu de cadres actuel lors de l'exécution du lien,
  • _top = terminer tous les jeux de cadres lors de l'exécution du lien.

[modifier] Articles intéressants

[modifier] Liens à des adresses électroniques

Attention !! L'ajout d'éléments (aprés le ?) ne fonctionne que si vous avez un client de messagerie électronique configuré sur votre ordinateur (exemple : Microsoft Outlook). 

<a href="mailto:nom@domaine.xy">Texte explicite du lien</a>
<a href="mailto:nom@domaine.xy?subject=Thema">Texte explicite du lien</a>
<a href="mailto:nom@domaine.xy?cc=nom2@domaine.xy">Texte explicite du lien</a>
<a href="mailto:nom@domaine.xy?bcc=nom2@domaine.xy">Texte explicite du lien</a>
<a href="mailto:nom@domaine.xy?body=Texte">Texte explicite du lien</a>
<a href="mailto:nom@domaine.xy?complement1&complement2">Texte explicite du lien</a>

Mentionnez au choix un objet par défaut (subject=), des destinataires de copie visibles (cc=), des destinataires de copie invisibles (bcc=) ou un texte par défaut (body=). Plusieurs de ces mentions peuvent être combinées comme dans l'exemple avec complement1&complement2.

Masquez dans les mentions les caractères dont les valeurs de caractères sont supérieures à 127 en hexadécimal, par exemple %E7 pour 135 ("ç"). De la même façon, certains signes standard qui peuvent avoir une signification dans l'URL sont à masquer.

[modifier] Raccourcis claviers 

<a href="URL" accesskey="valeur">Texte explicite du lien</a>

Pour valeur entrez des valeurs (1-99), pas des lettres. Exécutable la plupart du temps avec la touche [Alt] et la valeur mentionnée.

[modifier] Recherche par tabulateur 

<a href="URL" tabindex="numéroIndex">Texte explicite du lien</a>

Avec l'attribut tabindex dans le repère d'ouverture du lien, vous pouvez faire mention de l'ordre de recherche par tabulateur. Notez la mention pour tous les liens et attribuez lui un nombre. En passant d'un lien à l'autre avec la touche de tabulation, le premier lien sera celui avec le plus petit numéro de tabindex, puis le deuxième plus petit etc. et à la fin celui avec le plus grand numéro tabindex.

Les nombres compris entre 0 et 32767 sont permis.

[modifier] Exercice

[modifier] Exercice 1

1. Ajoutez au début de la première page (juste sous le titre de premier niveau "Prénom Nom") une table des matières hypertexte pointant vers des "cibles" identifiées ci-dessous :

    a. Mes coordonnées
    b. Mon curriculum vitae
    c. Mes hobbies

2. Mettez en place les "cibles ou ancres" juste avant les titres de chapitre, puis testez que vos renvois hypertextes fonctionnent.

3. Ajoutez à votre page HTML le chapitre Mes sites préférés contenant des liens pointant vers des sites externes, puis testez que vos renvois hypertextes fonctionnent.

    a. Site 1 :URL 1
    b. Site 2 :URL 2
    c. Site 3 :URL 3

Puis rajouter les différents attibuts vus plus haut afin que vos liens s'ouvrent dans une nouvelle fenêtre, soient accessibles par clavier et tabulation. Testez dans Internet Explorer et FireFox, notez les différences.

4. Puis modifiez votre pied de page de façon que si l'on clique sur votre nom cela génère automatiquement la rédaction d'un E-mail à votre attention avec le sujet "Feed-back Home-page". Attention à la validation W3C...

[modifier] Corrigé

[modifier] Exercice 1 

<!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>
  <title>Texte préformaté</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body>
   <h1 align="center">Prénom et nom</h1>
   <ul>
     <li><a href="MonPremierDocument.html#mesCoordonnees">Mes coordonnées</a></li>
     <li><a href="MonPremierDocument.html#monCurriculumVitae">Mon curriculum vitae</a></li>
     <li><a href="MonPremierDocument.html#mesHobbies">Mes hobbies</a></li>
   </ul>
   <hr />
   <h2><a name="mesCoordonnees">Mes coordonnées</a></h2>
   Nom et prénom<br />
   Ligne adresse 1<br />
   Ligne adresse 2<br />
   NPA et localité<br />
   Pays
   <hr />
   <h2><a name="monCurriculumVitae">Mon curiculum Vitae</a></h2>
   <p>Expériences professionnelles</p>
   <p>Formations suivies</p>
   <hr />
   <h2><a name="mesHobbies">Mes hobbies</a></h2>
	<!-- A remplir -->
   <hr />
   <h2><a name="mesSitesPreferes">Mes sites Web préférés</a></h2>
   HEIG-VD : <a href="http://www.heig-vd.ch" target="_blank" accesskey="4" tabindex="1">URL 1</a><br />
   B2S : <a href="http://www.b2s.ch" target="_blank" accesskey="5" tabindex="2">URL 2</a><br />
   ESVIG : <a href="http://www.esvig.ch" target="_blank" accesskey="6" tabindex="3">URL 3</a><br />
   <hr />
   <i>Nom et prénom / mise à jour, le jj.mm.aaaa</i>
 </body>
</html>

[modifier] Voir aussi

Récupérée de « http://www.ebx.ch/mediawiki1/index.php/Liens_internes_et_externes »