HTML, les liens: les liens externes

  1. Introduction
  2. Les liens externes
  3. Exemples
  4. Exercices
  5. Erreurs fréquentes
  6. Les liens internes
  7. Les connaissances avancées

1. Introduction

Le lien externe est essentiel a connaitre, le lien interne est utile mais moins nécessaire. Il est aussi important aussi de savoir comment écrire un URL, une adresse.
Le tag pour le lien est:
<a href="URL " > le texte qui servira de lien </a>
l'URL (Universal Ressource Locator), l'adresse de la pagesur laquelle on veut pointer s'écrit entre les guillemets du tag <a avec le paramètre href=" URL">. Ce tag est le tag de début du lien. Puis on écrit le texte qui sera le lien visible de par sa couleur et le changement de curseur dessus, puis on met le tag de fin de lien. Il peut se mettre ou l'on veut après le tag <a href=" " >. Ainsi le lien peut etre constitué d'un texte de longueur variable, de une lettre à à plusieurs lignes, ou encore le lien peut être constitué d'une image. Dans ce dernier cas il suffit de mettre a la place du texte, le tag qui permet de mettre une image. Il suffira de cliquer sur le lien pour accéder à la page désirée.

2 .Les liens externes

Un lien externe est un lien entre une page et une autre. Cette dernière peut se trouver n'importe oú, dans le même répertoire, sur le même serveur, sur un serveur aux Etats-Unis, en Chine, bref n'importe oú dans le monde. Ce qui est essentiel c'est de connaître l'adresse exacte, en effet la moindre imprécision, inexactitude dans l'adresse et le lien ne marchera pas. Une adresse peut être constituée d'un chemin soit relative soit absolue.

Exemples

Voici quelques exemples de liens externes pour vous permettre de mieux comprendre:

Exercices

A votre tour maintenant! Voici quelques exercices à faire:
  1. Exercice:
    Créez deux fichiers html, lienex1.html et lienex1b.html avec un lien allant de lienex1.html à lienex1b.html, le chemin que vous donnerez sera absolu. Le texte du lien que vous écrirez et qui sera visible, sera "mon premier lien".
    Pour ce premier exercice, nous allons décrire la procédure pas à pas. Dans un premier temps, vous allez ouvrir le logiciel "Bloc-note" (Notepad). Vous allez vous trouvez face à une feuille vierge sur laquelle vous allez écrire les marqueurs de la structure de base d'une page HTML (pour plus de détails). Vous donnez comme titre (title) lienex1b et vous enregistrez votre fichier sous le nom lienex1b.html dans un répertoire. Dans la partie "body" de votre document, écrivez "bla bla bla" afin d'avoir du texte sur votre page. Puis refaites la même procédure pour créer votre fichier lienex1.html, enregistrez le dans un répertoire en-dessus. Ecrivez dans la partie "body" de ce fichier le lien avec le marqueur vu précédemment, comme adresse mettez celle du fichier lienex1b.html avec les noms des différents répertoires dans lesquels se trouve le fichier (vous donnez ainsi le chemin absolu depuis la base de votre disque dur). Maintenant pour vérifier si votre lien fonctionne, ouvrez un client Web (par exemple Netscape), puis pour ouvrir votre fichier dans le browser allez à la rubrique "Open file in browser". Si cela marche, vous devriez voir votre fichier à l'écran avec comme titre dans la barre du haut, lienex1 et le texte visible de votre lien en couleur et souligné. Si votre lien fonctionne, en cliquant dessus, votre deuxième fichier devrait s'ouvrir, être chargé par le browser, avec le titre du fichier en haut et "blabla" comme texte.
  2. Exercice:
    Reprenez les fichiers de l'exercice précédent et utilisez cette fois pour votre lien un chemin relatif ( si vos fichiers sont dans des répertoires trop éloignés déplacez-les).

  3. Exercice:
    Reprenez les fichiers de l'exercice 2 et faites un lien sur le fichier lienex1b.html pointant sur le fichier lienex1.html avec comme texte "retour". Vous devriez ainsi avoir un lien pointant sur l'autre fichier sur chacun des fichiers, et donc passez de l'un à l'autre sans utiliser les boutons du browser.

  4. Exercice:
    Créez un fichier html lienex3.html qui aura un lien pointant sur une image (de votre choix), le texte visible sera le nom de cette image. De nouveau si vous avez réussi en cliquant sur le nom dans le fichier lienex3.html browsé, votre browser devrait charger l'image que vous avez choisie.

  5. Exercice:
    Reprenez les fichiers de l'exercice 2, et cette fois comme lien visible au lieu de mettre du texte, vous allez mettre l'image que vous avez choisi dans l'exercice précédent. Si cela marche, dans votre fichier lienex1.html browsé, en cliquant sur l'image, votre browser devrait charger le fichier lienex1b.html.

4. Erreurs fréquentes et corrigés

Il y a plusieurs d'erreurs relativement fréquentes lors de la création de liens.

Corrigés des exercices:


Exercices sur les liens externes:
  1. Exercice:
    Fichier1: lienex1.htmlFichier2:lienex1b.html
    <html>
    <head>
    <title>lienex1.html </title>
    </head>
    <body>
    <a href="/html/lien/exercices/lienex1b.html"> mon premier lien </a>
    </body>
    </html>     		<html>
    <head>
    <title>lienex1b.html </title>
    </head>
    <body>
    bla bla bla bla
    </body>
    </html>

  2. Exercice:
    Fichier1: lienex1.htmlFichier2:lienex1b.html
    <html>
    <head>
    <title>lienex1.html </title>
    </head>
    <body>
    <a href="lienex1b.html"> mon premier lien </a>
    </body>
    </html>     		<html>
    <head>
    <title>lienex1b.html </title>
    </head>
    <body>
    bla bla bla bla
    </body>
    </html>

  3. Exercice:
    Fichier1: lienex1.htmlFichier2:lienex1b.html
    <html>
    <head>
    <title>lienex1.html </title>
    </head>
    <body>
    <a href="lienex1b.html"> mon premier lien </a>
    </body>
    </html>     		<html>
    <head>
    <title>lienexb1.html </title>
    </head>
    <body>
    <a href="lienex1.html"> retour </a>
    </body>
    </html>

  4. Exercice:
    Fichier1: lienex3.htmlFichier2:eclps97.jpg
    <html>
    <head>
    <title>lienex1.html </title>
    </head>
    <body>
    <a href="eclps97.jpg"> éclipse du soleil </a>
    </body>
    </html>

  5. Exercice:
    Fichier1: lienex1.htmlFichier2:lienex1b.html
    <html>
    <head>
    <title>lienex1.html </title>
    </head>
    <body>
    <a href="lienex1b.html"> <img src="eclps96.jpg"> </a>
    </body>
    </html>     		<html>
    <head>
    <title>lienexb1.html </title>
    </head>
    <body>
    bla bla bla bla
    </body>
    </html>

Les liens internes

Pour en savoir plus sur les liens internes, on se réfera au fichier:
Connaissances de base sur les liens internes

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

Y.P.S