patrickgross.org
| Home Back Google Microsoft | ||
| Contact Documentation Cours Favoris Utilitaires Musique Divers | ||
Vous venez d'apprendre:
Rappelez-vous le début de ce cours.
Je racontais que le HT de HTML signifie HyperTexte. Un hypertexte ressemble à d'autres textes. On y trouve du ...texte, on peut aussi y trouver des tableaux, des listes, des images, nous avons vu comment procéder.
Mais ce qui différencie l'hypertexte sur texte classique, ce sont les hyperliens. Plus personne de dit "hyperlien", on dit juste "lien".
Les liens sont le mécanisme qui permet de naviguer.
Naviguer d'une page web à une autre de votre site, mais aussi naviguer d'une page web de votre site vers une page d'un autre site, et aussi, naviguer d'un endroit d'une page Web vers un autre endroit de la même page Web.
Nous allons voir comment se font ces liens. Et nous allons parler de l'organisation de la navigation dans votre site Web.
En HTML, tous les éléments se définissent à l'aide de balises. Les liens aussi, évidemment!
La balise pour définir un lien est <a>.
Le lien se termine, évidemment à l'endroit où vous fermerez la balise, avec </a>.
Vous vous doutez bien que ceci ne suffit pas à créer un lien qui fonctionne!
N'importe quel élément visible de votre page peut servir de lien.
Cela peut être un mot, comme "Retour", ou plusieurs mots, comme "Cliquez ici pour voir la suite".
Cela peut aussi être une image, comme par exemple une image d'une flèche vers la droite pour signifier "par ici la suite", ou une photo de votre grand-mère pour signifier "un clic sur la photo et vous verrez la page Web sur ma grand-mère".
Cela peut être une image et un texte:
Le visiteur pourra aussi bien cliquer sur l'image de la flèche vers le haut, que sur les mots "Remonter en haut de la page". Ces deux éléments sont tous deux "à l'intérieur" du <a> et du </a>.
Cliquer sur un lien doit vous emmener "quelque part". Encore faut-il préciser où!
Cela se fait avec l'attribut href:
Ce lien va à une page Web appelée page2.htm.
Ce lien va au site web google.
Ce lien va sur le liste www.champignons.com et à une page "introduction.htm" de ce site.
Ce lien dirige sur le site Web www.champignons.com et à une page Web nommée chanterelle.htm de ce site, page qui se trouve dans le dossier comestibles de ce site.
(Si je dois expliquer plus en détail: Ce lien, lorsque le visiteur clique dessus, demande au logiciel de navigation d'utiliser le système du Web ("http://" soit Hyper Text Transfer Protocol) pour aller sur le domaine com, lequel doit alors vous diriger vers son sous-domaine champignons, lequel doit vous diriger vers son sous-domaine www, lequel doit vous renvoyer vers son dossier comestibles, y trouver une page Web chanterelle.htm et afficher cette page. On dit que "http://www.champignons.com/comestibles/chanterelle.htm" est l'URL de la page vers laquelle le lien pointe.)
Donc, ce qu'il faut retenir est:
<a href="OU-IL-FAUT-ALLER">ELEMENT-A-CLIQUER-POUR-Y-ALLER</a>
Voici des liens relatifs:
Ce sont des liens vers des pages de votre propre site.
Il n'y a dès lors pas besoin de donner l'URL complète de votre site. Le logiciel de navigation cherchera les pages relativement à la page où se trouve le lien.
Par exemple, il cherchera "page2.htm" dans le même dossier. Il cherchera "introduction.htm" dans son sous-dossier "aviation". Il cherchera "debuts.htm" dans le sous-dossier "histoire" du dossier "aviation" qui est un sous-dossier de celui où se trouve la page avec le lien. Pour "index.htm", il remontera au dossier parent, puis ira dans le dossier "html".
Voici des liens absolus:
Les liens absolus s'utilisent pour diriger vers d'autres sites que le votre. Il faut bien préciser où se trouvent ces sites!
Donc, on en donne l'URL complète.
Quelques explications à propos de la paresse ambiante:
On voit parfois des liens absolus qui ne semblent pas complets. Par exemple, il manque le "http://" au début. Et pourtant cela fionctionne comme si ce "http://" y était! C'est tout simplement que le logiciel de navigation complète automatiquement. Pratique! Mais pas garanti, donc, évitez.
J'ai montré un lien absolu "http://www.google.fr". Mais dans ce lien, si on dit bien sur quel site aller, la page où aller n'est pas précisée! Et pourtant cela fonctionne, on arrive bien sur une page, c'est même la page d'acceuil du site Google. Cette fois, c'est le serveur Web Google, l'ordinateur où se trouve le site Google qui a complété. Vous n'avez pas demandé de page précise, alors le serveur vous renvoie automatiquement sur la page d'accueil. Ecrire l'URL ainsi est donc plutôt intéressant, dans ce cas: si un jour le nom de la page d'acceuil de google change, aucune importance!
Les adresses de sites commencent souvent pas "www." mais lorsque l'on ne le donne pas, la plupart du temps, le site est trouvé tout de même. "google.fr" donne le même résultat que "www.google.fr". C'est tout simplement que lorsque vous appelez "google.fr", ce "google.fr" vous renvoie automatiquement vers "www.google.fr". Conclusion: utilisez plutôt "www.google.fr", l'URL correcte, cela sera tout simplement plus rapide.
Où comment faire un lien qui renvoie à un autre endroit de la même page.
Vous avez peut-être des pages longues, très longues. Cela peut être utile de placer en bas de page un lien du genre "Remonter en haut de la page".
Pour cela, il faut d'abord mettre une balise en haut de la page, qui définira ainsi le "point d'arrivée":
Cela se fait avec la balise <a>, mais au lieu d'avoir un attribut href, elle a un attribut name, auquel vous donnez la valeur que vous voulez. On appelle cela une ancre nommée.
Lorsque j'indique qu'il faut la mettre en haut de la page, entendons-nous bien: elle doit être tout de même dans la partie affichée de la page, donc jamais avant la balise <body> - ni évidemment après la balise </body>!
Ensuite, en bas de votre page, il faudra placer le lien vers cette ancre nommée:
Lorsque le visiteur cliquera sur "Remonter en haut de la page", le navigateur verra que l'attribut href de ce lien commence par #. Il saura alors qu'il faut chercher, dans la page même, une ancre nommée. Il verra que href se poursuit par le mot "haut", il cherchera une ancre nommée "haut", il la trouvera en haut de la page et il y ammènera le visiteur.
Une application bien connue de ce système d'ancres nommées est celle de la table des matières d'une page Web, où les sections de la page peuvent être cliquées par le visiteur, ce qui l'amène au texte correspondant.
Voici comment pourrait être conçue une page Web avec une "table des matières cliquable":
Et voilà pour les titres. Tout est dit! Aucune complication...
Voyons maintenant .
Précédent
Haut