HTML; les liens: Les liens internes

  1. Les liens internes
  2. Exemples
  3. Exercices
  4. Erreurs fréquentes
  5. Corrigés des exercices
  6. Les connaissances avancées

Les liens internes

Un lien interne permet de se déplacer dans un même document ou alors de se déplacer dans un point précis d'un autre document ( à condition qu'il est une ancre interne). Voici le marqueur de ce lien: <a href="#name"> texte visible pour le lien interne </a>
il s'agit de la même syntaxe que pour les liens externes à part que là on va donner un nom ("name" qui sera choisi arbitrairement et ce nom sera précédé du symbole "#". Voici un exemple : <a href="#fin"> fin du texte </a>
Pour que lien interne face référence à un point précis du document il faut définir un endroit et lui donner le même nom que dans l'adresse: <a name="name"> texte sur lequel on pointe </a>
Si l'on reprend l'exemple précédent, on aurait un endroit à la fin du texte: <a name="fin"> texte sur lequel on pointe </a>
Exemple:
<a href="#bas">lien sur le texte plus bas </a>
bla bla bla
bla bla bla
bla bla bla
<a name="bas"> ancre interne oú pointe le lien interne </a>
texte texte texte texte

Il est essentiel que le nom soit identique dans le tag du lien (a href) et dans celui indiquant l'endroit en donnant un nom (a name). Cette dernière partie est ce que l'on appelle une ancre interne, c'est sur cette ancre que pointera le lien interne.

Il est aussi possible de faire un lien externe pointant sur une ancre interne de ce document, pour cela il faut faire un lien externe et rajouter à la fin le symbole "#" et le nom de l'ancre interne:
<a href="URL#ancre interne" > le texte qui servira de lien </a>
ou encore plus concrètement:
<a href="htmlintro.html#quatre" > lien sur les exemples du fichier Introduction à HTML </a>
Il faut bien entendu que le fichier ait une ancre interne, autrement cela ne marchera pas.

En ce qui concerne les images, il est aussi possible qu'une ancre interne soit une image, ou alors d'utiliser une image comme lien, exactement comme pour les liens externes.

Exemples

Voici quelques exemples de liens internes:

Exercices

A vous de faire quelques liens internes:
  1. Exercice:
    Créez un fichier html que vous enregistrerez sous le nom lienex4.html. Dans ce fichier vous mettrez une grande quantité de texte (faites par exemple un copié-collé d'un texte que vous avez). Faites un lien interne au début du document qui pointera sur le milieu du texte. Pour vérifier si votre lien marche, une fois votre fichier browsé en cliquant sur le lien, l'ancre interne (endroit sur lequel votre lien pointe) devrait apparaître en haut de votre écran.

  2. Exercice:
    Créez un fichier html nommé lienex5.html dans lequel vous mettrez un lien pointant sur l'ancre interne du fichier lienex4.html. Pour voir si votre lien marche, il suffit que dans votre fichier lienex5.html en cliquant sur le lien que vous avez fait, le browser charge le fichier lienex4.html avec la partie délimitée par l'ancre apparaissant en haut de l'écran.

  3. Exercice:
    Reprenez le fichier lienex4.html, et cette fois au lieu d'un texte pour le lien, utilisez une image de votre choix. Si votre lien fonctionne, alors en cliquant sur l'image dans votre page browsée devrait apparaître la partie du texte correspondant à l'ancre interne.

  4. Exercice:
    Prenez à nouveau le fichier lienex4.html et changez votre ancre interne pour que le lien interne pointe sur une image de votre choix. Pour vérifier si votre lien fonctionne, en cliquant dans votre browser sur l'image qui est le lien interne, votre deuxième image (l'ancre interne) devrait apparaître en haut de l'écran.

Erreurs fréquentes

Corrigés des exercices

Voici des corrigés des exercices ci-dessus
  1. Exercice:
    Fichier lienex4.html
    <html>
    <head>
    <title>lienex4.html </title>
    </head>
    <a href="#fin"> lien interne pointant sur la fin du document </a>
    .......
    .......
    votre texte
    .......
    <a name="fin"> texte texte</a>
    texte texte
    </body>
    </html>

  2. Exercice:
    Fichier lienex4.html Fichier lienex5.html
    <html>
    <head>
    <title>lienex4.html </title>
    </head>
    <a href="#fin"> lien interne pointant sur la fin du document </a>
    .......
    .......
    votre texte
    .......
    <a name="fin"> texte texte</a>
    texte texte
    </body>
    </html>
    		 <html>
    <head>
    <title>lienex5.html </title>
    </head>
    <a href="lienex4.html#fin"> lien externe pointant sur la fin du document lienex4.html </a>
    </body>
    </html>

  3. Exercice:
    Fichier lienex4.html
    <html>
    <head>
    <title>lienex4.html </title>
    </head>
    <a href="#fin"> <img src="mickey.gif"> </a>
    .......
    .......
    votre texte
    .......
    <a name="fin"> texte texte</a>
    texte texte
    </body>
    </html>

  4. Exercice:
    Fichier lienex4.html
    <html>
    <head>
    <title>lienex4.html </title>
    </head>
    <a href="#fin"> <img src="mickey.gif"> </a>
    .......
    .......
    votre texte
    .......
    <a name="fin"> <img src="minnie.jpg"></a>
    texte texte
    </body>
    </html>

Les Connaissances avancées

Pour en savoir plus sur les connaissances avancées, on se réfera au fichier:
Connaissances avancées sur les liens

Retour à la page d'introduction des liens en HTML
Retour à la page d'introduction des liens externes en HTML

Y.P.S