Le lien externe est essentiel a connaitre, le lien interne est utile mais moins nécessaire. Il est important aussi de savoir comment écrire 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 page à laquelle on veut être lié 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 a des lignes, ou encore le lien peut etre 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.
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.
- adresse absolue:
Une adresse absolue est l'adresse en entier de l'endroit oú se trouve le fichier qui sera lié. On donnera le protocole ( pour un fichier normale, http, voir les connaissances avancées pour plus de détails concernant les différents protocoles), le nom du serveur, puis les différents dossiers dans lesquel le fichier se trouve et enfin le nom du fichier.
Exemple: l'adresse absolu de ce fichier est:
http://tecfa.unige.ch/~shubber/stafs/staf17/htmllienconnbase.html
Ainsi si l'on voulait faire un lien sur cette page en donnant l'adresse absolue, cela donnerait ceci
<a href="http://tecfa.unige.ch/~shubber/stafs/staf17/htmllienconnbase.html">lien sur les connaissances de base </a>
- adresse relative:
une adresse relative est une adresse plus courte, on l'utilise lorsque le fichier visé se trouve soit par exemple dans le même répertoire que le fichier que vous faites, ou quelques répertoires au-dessus ou en-dessous dans l'arborescence du serveur.
Exemple: si votre fichier se trouvait dans le même répertoire que celui-ci, l'adresse de ce fichier-ci serait alors simplement son nom
htmllienconnbase.html
un lien entre votre fichier et celui-ci donnerait:
<a href="htmllienconnbase.html">lien sur les connaissances de base </a>
Si votre fichier se trouvait un répertoire au-dessus, il suffirait d'écrire comme adresse "../htmllienconnbase.html", les deux points signifiant que l'on remonte d'un niveau dans l'arborescence, donc un répertoire au-dessus, un point signifie le répertoire courant.
Si votre fichier se trouve dans un répertoire différent mais au même niveau, il faudra alors écrire une adresse oú l'on remonte d'un niveau, puis le nom du répertoire et enfin le nom du fichier:
<a href="../staf17/htmllienconnbase.html">lien sur les connaissances de base </a>
L'intérêt de ce chemin relatif est que si l'on déplace des fichiers d'un même répertoire, on n'aura pas besoin de changer l'adresse des liens pour qu'ils fonctionnent toujours. Ainsi si vous avez plusieurs fichiers dans le même répertoire ou à proximité, vous avez meilleur temps d'utiliser un chemin relatif.
- Image
Pour faire un lien à partir d'une image, il suffit d'écrire à la place du texte visible le tag correspondant à celui d'une image.
Par exemple:
<a href="htmllienconnbase.html"><img src="bluenose2.jpg"> </a>
Si vous voulez faire un lien sur une image, il suffit de donner l'adresse et de terminer avec le nom de l'image.
Par exemple: <a href="calvin_surp.gif">lien sur une image de Calvin </a>
Voici quelques exemples de liens externes pour vous permettre de mieux comprendre:
A votre tour maintenant! Voici quelques exercices à faire:
- Exercice:
Créez deux fichiers, lienex1.html et lienex1b.html avec un lien allant de lienex1.html à lienex1b.html, le chemin que vous donnerez sera absolu. Le texte que vous écrirez et qui sera visible, sera "mon premier lien". Pour vérifier si votre lien fonctionne, il suffira que vous cliquiez sur le texte de votre fichier browsé et votre browser devrait charger votre fichier lienex1b.html.
- 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).
- 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.
- Exercice:
Créez un fichier 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.
- 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.
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.
Voici quelques exemples de liens internes:
A vous de faire quelques liens internes:
- Exercice:
Il y a plusieurs d'erreurs relativement fréquentes lors de la création de liens.
- La première chose à vérifier si votre lien ne marche pas est l'adresse et le nom du fichier. Il faut être très précis en écrivant le nom et l'adresse, si il y a la moindre imprécision, erreur le lien ne marchera pas.
- Une erreur fréquente est que le fichier soit enregistré sous le format htm et que vous ayez écrit html ou l'inverse. Il se peut que vous ayez écrit le nom du fichier en minuscule, qu'il apparaisse en minuscule dans votre éditeur, alors dans ce cas ouvrez le gestionnaire de fichier et vérifier le nom, il se peut qu'alors il apparaisse en majuscule. Dans ce cas, changez son nom dans le gestionnaire en minuscule.
- Lorsque vous écrivez le nom du fichier dans le lien, s'il y a des accents ou des symboles particuliers, il est important de les écrire "normalement" c'est-à-dire sans utiliser les symboles spéciaux utilisés en language html: par exemple
Juste <a href="début.html">
Faux <a href="début.html">
- Un autre problème pourrait être l'adresse, peut être que votre fichier ne se trouve pas dans ces répertoire-là, vérifiez.
- Si vous voulez faire une ancre interne et quelle ne marche pas, vérifiez pas que le nom de l'ancre est le même dans le tag du lien (a href) et celui définissant l'ancre (a name). Vérifiez que vous avez bien mis "#" dans le tag du lien (a href) et non dans celui de l'ancre (a name).
- Si pour une ancre interne il n'y a pas une grande distance entre le lien et l'ancre, vous ne verrez pas de déplacement.
Corrigés des exercices:
Exercices sur les liens externes:
- Exercice:
| Fichier1: lienex1.html | Fichier2: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>lienexb1.html </title>
</head>
<body>
bla bla bla bla
</body>
</html>
|
- Exercice:
| Fichier1: lienex1.html | Fichier2: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>
bla bla bla bla
</body>
</html>
|
- Exercice:
| Fichier1: lienex1.html | Fichier2: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>
|
- Exercice:
| Fichier1: lienex3.html | Fichier2:eclps97.jpg
|
|---|
<html>
<head>
<title>lienex1.html </title>
</head>
<body>
<a href="eclps97.jpg"> éclipse du soleil </a>
</body>
</html>
| 
|
- Exercice:
| Fichier1: lienex1.html | Fichier2: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>
|
Corrigés des exercices sur les liens internes
Y.P.S
