Arborescence de site
Votre site est localisé dans un dossier du serveur qui le délivre aux navigateurs le sollicitant par Internet.
Le serveur, qui peut héberger plusieurs sites, isole et cantonne chaque site dans son dossier. De l’extérieur, à travers des URL, nous n’aurons accès qu’aux fichiers, on parle de ressources, présents dans ce dossier, directement ou dans un sous-dossier.
Imaginons votre site hébergé sur un serveur d’Internet dans le dossier C:\www (oui c’est un serveur Windows, on pourrait aussi bien prendre Linux). Son arborescence pourrait ressembler à ceci :
Imaginons aussi que son adresse sur Internet soit monsite.fr
Que se passe-t-il quand je sollicite le site par Internet en tapant
http://monsite.fr?
Le serveur reçoit la requête. Vous ne demandez aucune ressource en particulier. Le serveur vous renvoie la page par défaut index.html.
index.html à la racine du site comme page d’accueil qui sera affichée quand un utilisateur entre dans son navigateur l’adresse du site, sans préciser de sous-dossier ou de ressource.Si maintenant vous tapez http://monsite.fr/img/logo.png, le serveur vous renvoie l’image qui est situé dans c:\www\img, car il fait l’association entre le site monsite.fr et le stockage c:\www. Comme nous le verrons plus loin, nous utilisons dans ce cas des URL absolues.
Arborescence type
Il est préférable d’organiser tous les fichiers d’un site web dans une arborescence permettant un classement clair comme ceci :
Ressources
En construisant votre site, vous allez créer des pages bien sûr mais aussi utiliser des fichiers qui seront souvent intégrés dans les pages. On parle de ressources accessibles par le web.
Type de ressources
Les ressources typiques que nous pouvons utiliser sont :
- pages web évidemment, fichier
.html - feuilles de style, fichier
.css - code Javascript, fichier
.js - images, son et vidéos sous différents formats
- d’autres ressources téléchargeables comme des documents PDF
Fichiers texte
Tous les fichiers texte, hormis bien sûr une page .html, sont simplement affichés par le navigateur. En particulier pour les feuilles de styles .css et le code Javascript .js, le code est affiché on si tape directement son URL dans le navigateur. Tous ces fichiers sont normalement en UTF-8 mais certains navigateurs ont une auto-détection du codage de caractère.
Images
Les formats d’images reconnus en standard par tout navigateur qui supporte HTML 5 sont décrits dans ce tableau :
| format | extension | description |
| SVG | svg | Format d’image vectorielle (tracé qui peut être zoomé à l’infini sans perte de détails), objet qui peut aussi être décrit par la balise <svg> |
| JPEG | jpg | Image matricielle (bitmap, image faite d’une grille de pixels colorés ou en niveaux de gris) compressée avec destruction (des zones imprécises peuvent entacher l’image selon la force de compression), idéale pour une photo |
| PNG | png | De même nature que JPG mais comprimée sans perte (image intacte mais plus lourde) avec possibilité de transparence |
| GIF | gif | Image matricielle avec une palette de couleurs réduites, possibilité d’être animée (séquence d’images), pour de petits images décoratives en général |
Les navigateurs prennent en charge bien d’autres formats comme tiff ou bmp mais il est possible qu’un format inconnu nécessite l’installation d’une extension dans le navigateur. Cantonnons nous donc à ces quatre formats standards du web.
Son et vidéos
Là aussi quelques formats sont définis en standard dans le norme HTML 5. Pour les autres, une extension est souvent nécessaires.
| format | extension | description |
| Ogg Vorbis | ogg | Compression avec un format ouvert très efficace |
| MP3 | mp3 | Célèbre mp3, format « fermé » (propriété privée) et compressé |
| WAV | wav | Son brut sans compression (prend beaucoup de place) |
| H.264 MPEG-4 AVC | mp4 | Format fermé très utilisé dans la diffusion TV |
| Ogg Theora | ogg | Même conteneur ogg que pour le son mais avec une vidéo dans un format ouvert |
| WebM | webm | Le format ouvert associé à HTML 5, successeur de Theora |
La situation ainsi présentée est un peu simplifiée, comme sur le site w3schools.com qui est usuellement ma référence. En vérité, il y a quelques années, des controverses et batailles de brevet ont eu lieu, particulièrement au sujet du célèbre format H.264. Étant breveté, il est désormais payant pour tout site et navigateur diffusant des vidéos payantes. Il y a aussi des formats non nativement pris en charge par certains navigateurs qui nécessitent une extension (plugin). A ce sujet voir par exemple cet article.
Il faut retenir que même si les formats ouverts, non soumis à des brevets, sont légèrement moins performants que d’autres formats propriétaires, ils sont nativement pris en charge par tous les navigateurs. Je ne saurai trop vous recommander de les utiliser. Nous parlons de Ogg pour le son et WebM pour la vidéo.
Notez enfin, et si vous avez des connaissances en vidéo cela ne vous est pas inconnu, que le format désigne un conteneur, le fichier étant composé d’un ou plusieurs flux de son et d’un flux vidéo. Les formats de ceux-ci ne correspondent pas forcément au format du conteneur ! En clair, mp4 ne contient pas forcément une vidéo H.264 à l’intérieur. La situation est plus claire avec les formats ouverts.
Autres ressources
Avec d’autres types de ressources, le navigateur propose un téléchargement, à moins qu’une extension installée permettent d’afficher la ressource. C’est fréquent par exemple pour un fichier PDF ou une animation Flash.
Accès aux ressources
Quand vous allez intégrer une ressource, par exemple une image, dans une page, vous devez dire où elle se trouve. Nous le verrons en détail dans la leçon suivante, disons rapidement qu’une image s’écrit en HTML comme ceci : <img src="adresse de l'image"/>.
Premier cas de figure : l’image est sur un autre site
Là vous trichez un peu (vol de bande-passante diront certains) car vous l’utilisez l’hébergement d’un autre site pour ne pas intégrer dans le votre cette image, qui prend peut être de la place. Dans ce cas, votre URL sera absolue avec l’adresse du site et le chemin d’accès. Par exemple <img src="http://www.public.com/images/oiseau.jpg"/>.
Les fichiers sont hébergés dans un serveur et organisés dans des dossiers. Le serveur, qui peut héberger plusieurs sites, isole et cantonne chaque site dans son dossier. De l’extérieur, à travers des URL, nous n’aurons accès qu’au dossier du site et à ses sous-dossiers.
Deuxième cas de figure : l’image est chez vous
On ne mettra plus d’adresse ni de protocole « http ». Par exemple on pourra écrire <img src="/img/header.jpg"/> dans l’arborescence que nous avons vu plus haut. Ici aussi l’adresse est dite absolue car on part de la racine en écrivant « / ».
Dans une URL absolue, l’adresse de ressource peut prendre plusieurs formes :
/qui désigne la racine du site, c’est-à-dire son dossier d’hébergement/chemin/qui désigne un sous dossier en partant de la racine, par exemple/img/icones/(on peut aussi écrire/img/icones)/fichierou/chemin/fichierqui désigne une ressource sous la racine ou dans un sous-dossier, par exemple/img/icones/logo.icoou/accueil.html
URL relative
Il reste une dernière possibilité, toujours pour une image hébergée dans votre site. Vous pouvez écrire une URL relative, par rapport à l’endroit où se trouve la page d’insertion de l’image.
Reprenons le même exemple :
Vous voulez insérer l’image /img/logo.png dans la page /pages/info.html. Avec l’URL relative, vous naviguer dans l’arborescence. Vous partez de votre page qui est dans le dossier /pages. Vous remontez car il faut aller dans /img. Pour cela on écrit .. Ensuite on « descend » dans img soit ../img. Et enfin l’adresse relative de l’image est utilisée comme ceci : <img src="../img/logo.png"/>.
Le plus simple, si l’image était dans le même dossier, est <img src="logo.png"/>. Enfin dans un sous-dossier img, on écrirait <img src="img/logo.png"/>. La différence c’est l’absence de / au début.
Quel mode choisir ? Il n’y a pas de règle, mais il faut bien comprendre les conséquences.
L’URL absolue part de la racine du site web, cela ne marche que si votre site est hébergé par un serveur web. En phase de réalisation, il faut donc soit un serveur web, soit un éditeur qui simule un serveur web comme Brackets avec son aperçu pour pouvoir travailler. Je crois que c’est le mode privilégié par les pros car l’URL est plus claire et ne dépend pas de l’emplacement de la page dans laquelle le lien est inséré.
Avec l’URL relative, ça marche dans tout les cas, avec ou sans serveur web. Mais l’URL peut être moins claire, et dépend des deux emplacements.