Les exercices précédents vous ont conduit à regrouper de nombreux fichiers «en vrac» dans le dossier [Mon-Site] :

Une feuille Css : style.css ;
Cinq pages web : dilophosaure.html, pteranodon.html, tyrannosaure.html, velociraptor.html et indominus.html ;
Cinq images : Dilophosaure.png, Indominus.png, Pteranodon.png, T_Rex.png et Velociraptor.png.

Il est temps de mettre de l'ordre dans tout ça...

De manière générale, un site internet (voire le web dans son intégralité) peut être représenté comme un répertoire (un dossier) contenant des fichiers et/ou des dossiers :

Pour «passer» d'une page web à une autre, pour afficher des images sur ces pages ou pour télécharger des documents à partir d'un site, il faut créer des liens hypertextes entre ces fichiers en déclarant leur URL (Uniform Resource Locator).

Vous connaissez deux des trois balises les plus utiles en Html qui prennent pour attribut des URL :

Afficher une image

On utilise <img> qui est une balise marqueur de type en-ligne. La syntaxe est :

Lien vers le fichier `.css`

On importe un fichier (de mise en forme) .css en se plaçant entre les balises <head> et </head>. Pour cela, on utilise la balise marqueur <link> en respectant la syntaxe :

Lien hypertexte pour se déplacer vers une autre page

<a> désigne une ancre, c'est-à-dire un lien vers une cible de destination et/ou la cible nommée d'un autre lien. Cette balise entoure généralement un mot (une image, un paragraphe, un titre, ...) «ancre», support du lien hypertexte. La syntaxe est :

Naviguer hors de son site

Un chemin absolu décrit l'emplacement exact d'un fichier dans une arborescence. Ce chemin est affiché dans un navigateur.

Par exemple, l'adresse absolue de cette page sur mon ordinateur personnel est affichée ci-dessous. Lit-on le même chemin dans la barre d'adresse (en haut) du navigateur ?

Utilisez le navigateur internet pour vous rendre sur le site du Lycée.
Copiez l'adresse URL du site présente dans la barre d'adresse du navigateur.
Complétez le code Html ci-dessous en remplaçant le point d'interrogation par cette adresse.
Cliquez sur le lien dans la partie d'affichage pour vérifier qu'il conduit bien vers le site du Lycée. Que constate-t-on ?
Pour éviter ces désagréments, et uniquement lorsqu'un lien pointe en dehors de son propre site, on peut rajouter l'attribut target="_blank" à la balise <a> afin que la page ciblée s'ouvre dans un nouvel onglet du navigateur.

Affichage à obtenir
Une solution

Naviguer dans son propre site

Un chemin relatif est une description de l'emplacement d'un fichier à atteindre depuis l'emplacement du fichier actuel.

Pour naviguer dans son propre site, il faut utiliser une URL relative. En organisant correctement ses dossiers et ses fichiers, on peut être certain que les liens hypertext créés resteront valables quel que soit le serveur sur lequel le site internet est hébergé.

L'image ci-contre présente un extrait de l'arborescence du présent site. La page actuelle est 08_Arborescence.html.

Compléter le code Html ci-dessous afin que les images dont le nom commence par «Liens_internes» s'affichent les unes à côté des autres.

Attention à la casse (minuscules/majuscules).

Affichage à obtenir
Une solution

Ranger ses affaires

Dans cet exercice, nous allons mieux organiser les fichier présents dans le dossier [Mon_Site]. Pour cela :

Allez dans le répertoire [Mon_Site].
Créez trois nouveaux répertoires intitulés [images], [css] et [pages_du_site].
Déplacez les fichiers nécessaires pour que l'arborescence à l'intérieur du répertoire [Mon_Site] soit celle représentée sur l'image ci-contre.
Allez dans le dossier [pages_du_site] puis double-cliquez sur le fichier dilophosaure.html. Normalement, vous avez obtenu le résultat suivant :
Cet affichage est absolument normal : en déplaçant les fichiers précédents, les liens vers le fichier .css et vers les images ne sont plus valables puisque les fichiers-cibles ont été déplacés.
Réparez ces liens pour chacune des cinq pages .html.

Une solution

Voici le contenu de la page dilophosaure.html. Il fallait réparer les liens des lignes 6 et 26 en remontant d'un dossier (../) puis en redescendant dans le dossier correspondant ([css] pour la feuille de style et [images] pour les images).