Portée des URL

Des portées différentes

Les liens que l'on fait dans un document HTML ont une portée différente suivant l'emplacement sur le réseau de la ressource qu'ils référencient.

1	Un lien intra-page pointe à une partie de document dans la même page. Exemple : `<a href="#partie_1">Première partie</a>`
2	Un lien interne pointe sur une ressource située dans le même site (dans le même dossier ou dans un autre dossier). Exemple : `<a href="livres/promos/c.html">Nos promos livres</a>`
3	Un lien externe pointe sur une ressource située dans un autre site. Exemple : `<a href="http://www.amazon.fr/search.html">Rechercher des livres sur Amazon</a>`

Suivant l'endroit où se trouve la ressource que vous voulez lier à votre document il faut utiliser soit une URL absolue, soit une URL relative.

URL absolue

Pour pointer sur une ressource qui se trouve à l'extérieur de votre site (lien externe), vous DEVEZ utiliser une URL absolue.

Une URL absolue utiliser tu dois si un lien extérieur faire tu dois.

Une URL absolue décrit un chemin à partir de l'adresse d'un serveur sur le réseau. C'est une hiérarchie descendante composée :

du protocole (facultatif, http:// par défaut)
de l'adresse du serveur (ie nom de domaine)
du ou des noms des dossiers de la hiérarchie
du nom du fichier contenant la ressource

L'exemple suivant est une page avec un lien sur un document externe : la page d'accueil de Google.

L'exemple suivant est une page qui utilise une image externe : le logo HTML5 d'un absolu mauvais goût situé sur le site du W3C.

Vous ne devez jamais utiliser une URL absolue pour faire un lien sur une ressource se trouvant dans votre site.

URL relative

Pour pointer sur une ressource qui se trouve à l'intérieur de votre site (lien interne), vous DEVEZ utiliser une URL relative.

Une URL relative utiliser tu dois
si un lien à l'intérieur de ton site faire tu dois.

Une URL relative décrit un chemin à partir du document en cours. C'est une hiérarchie ascendante qui définit la cible par rapport à l'endroit où se trouve le document de départ du lien.

Une URL relative :

utilise les noms des dossiers pour descendre dans l'arborescence
utilise la syntaxe ../ pour remonter dans l'arborescence
ne peut pas "sortir" de l'arborescence du serveur du document en cours
a pour domaine implicite le domaine du document en cours
a pour protocole implicite le protocole du document en cours

Vous devez toujours utiliser une URL relative pour faire un lien sur une ressource se trouvant dans votre site.

Nous utiliserons l'arborescence suivante pour calculer quelques exemples d'URL.

Liens	URL
de a.html vers b.html	`b.html`
de a.html vers c.html	`promos/c.html`
de index.html vers e.html	`musiques/soldes/e.html`
de a.html vers index.html	`../index.html`
de e.html vers index.html	`../../index.html`
de d.html vers c.html	`../livres/promos/c.html`

Un anneau pour les lier tous

Un Anneau pour les gouverner tous, un Anneau pour les trouver, un Anneau pour les amener tous et dans les ténèbres les lier.

Vous devez forger non pas un anneau mais une page Web qui va lier différents personnages se trouvant sur le serveur de la Terre du Milieu dont l'arborescence est la suivante :

Complétez le code HTML ci-dessous pour afficher dans la page les images suivantes en utilisant des URLs relatives par rapport à la page ici.html.

aragorn.png (dossier anneaux)
boromir.png (dossier anneaux)
elrond.png (dossier elfes)
frodon.png (dossier hobbits)
gandalf.png (dossier html02)
gimli.png (dossier images)
gollum.png (dossier hobbits)
legolas.png (dossier elfes)

L'intégration des images se fait avec la balise img et son attribut src. Pas la peine de donner les dimensions des images.

Code à compléter

Une solution possible