Un site web codé sur une base HTML est composé de nombreuses dépendances. Chacune de ces dépendances (images, vidéos, sons, feuilles de style CSS, typographies, scripts…) permet à l’internaute de profiter au mieux de sa navigation et des informations que nous souhaitons lui transmettre. Si les liaisons entre les pages HTML et ces dépendances se rompent ou ne sont pas correctement spécifiées, le site s’en trouvera pénalisé. Pour bien structurer son site, quelques règles s’imposent !

Choisir les noms de fichier

Tout d’abord, il faut savoir que le Web est plus strict et n’autorise pas les mêmes caractères que les ordinateurs Windows ou Mac (OS) pour les noms de fichiers. Voici 3 erreurs à éviter :

Les espaces : Si vos noms de fichiers contiennent des espaces, il est possible que vous vous retrouviez avec un message d’erreur au moment de les afficher ou de les importer sur votre site internet
Les accents : Une autre erreur récurrente est l’utilisation de l’accent aigu, l’accent grave, l’accent circonflexe, le tréma ou la cédille. (à, â, é, è, ê, ë, î, ï, ô, ù, û, ç, etc.)
Les caractères spéciaux : il faut absolument éviter l’emploi de caractères spéciaux tels que le point d’exclamation (!), le point d’interrogation (?), l’apostrophe (‘), le signe de dollar ($), le slash (/)…

Structurer son site web

Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d’un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu’ils puissent interagir les uns avec les autres et que le contenu s’affiche correctement. Une fois que c’est fait, vous pourrez alors téléverser ces fichiers sur un serveur ou simplement le transférer sur un autre poste sans perdre de liaisons.

Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur.

L’illustration ci-dessous présente un modèle de structure de site web, celui que nous appliquerons à l’ensemble de nos créations cette année. Les noms de fichier ou de dossier marqués en italique correspondent aux noms libres, ceux écrits en gras correspondent aux noms imposés ou normalisés.

**Le dossier racine ( mon_site ) :**

il s’agit du dossier contenant l’ensemble de votre site (pages et dépendances). Son nom est libre et correspond au sujet, client, commanditaire du site.

Les pages HTML :

placées à la racine du site (directement dans le dossier « mon_site« ) elles correspondent à l’ensemble des pages contenues dans l’arborescence du site. Leur nom est libre à l’exception de la page d’accueil qui devra impérativement être nommée index.html, Il s’agit d’une normalisation et nous ne pouvons y déroger. Pour les autres pages, il sera important de veiller à la bonne écriture de leur nom (pas d’espace, pas d’accent, pas de caractères spéciaux) et bien veiller à ajouter l’extension .html

Le dossier images :

Le dossier image présent à la racine du site sera utilisé pour les images intégrées aux pages HTML à l’aide de la balise auto-fermante <img>. Il s’agit ici d’images de type informatif, elles apportent un complément au contenu textuel de la page et ne sont pas là pour décorer. Ces images seront enregistrée aux format .jpg, .png, .gif ou .svg. Excepté le format .svg vectoriel, elles devront être affichées en mode colorimétrique RVB (Rouge Vert Bleu) et sous une résolution de 72 DPI (Dot Per Inch). Leur poids devra être optimisé, elles ne dépassent que très rarement 1 Mo.

Le dossier styles :

Ce dossier, lui aussi présent à la racine du site, contiendra l‘ensemble des éléments dédiés au traitement graphique des page HTML. En premier lieu nous y placerons la (ou les) feuille(s) de style .css de notre site. Il est aussi recommandé d’y placé un dossier image. Ce dernier, contrairement au dossier image présent à la racine du site, est destiné aux images décoratives. Elles n’apportent aucune information, ne sont pas traités par les algorithmes d’indexation (Google®). Il s’agit strictement d’images d’arrière-plan appelées par la feuille de style. Malgré cette différence, elles correspondent aux normes du web de la même façon que les images infratives (.jpg, .gif, .svg, .png, résolution 72dpi et mode RVB).

Le dossier script :

Le dossier script, est comme son nom l’indique dédié à stocker les éléments JavaScript de la page. Ces scripts sont des éléments de programmation qui permettent d’implémenter des mécanismes complexes sur une page web. À chaque fois qu’une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, etc… — JavaScript a de bonnes chances d’être impliqué.

Écrire ses liaisons entre documents

Les liaisons entre les différents éléments (les URL) peuvent êtres écrites de 2 façons différentes. Soit nous spécifierons l’adresse d’une dépendance de façon absolue soit de façon relative. Le choix de l’une ou l’autre de l’autre aura une sérieuse impact sur le bon fonctionnement du site lors du déplacement du dossier racine.

URL absolu :

Les chemins absolus contiennent l’URL complète, incluant le protocole, le nom de domaine du site Web et éventuellement un fichier, sous-dossier ou nom de page spécifique. Par exemple :

https://labo.weasywyg.com/wp-content/uploads/2020/09/balises-1.jpg

L’URL ici, « https://labo.weasywyg.com/wp-content/uploads/2020/09/balises-1.jpg» peut être entrée dans la barre URL d’un navigateur, et vous serez conduit là où vous voulez aller. Les liens absolus sont le plus souvent utilisés pour créer les liens entre des sites Web distincts.

URL relatif :

Un lien relatif quant à lui n’inclut que le nom d’un fichier ou d’une page spécifique, qui est relatif au chemin courant. Si vous conservez tous les fichiers de votre site Web dans un seul dossier. Pour le cas d’une liaison entre une page HTML et la feuille de style en se basant sur la structure de dossier présentée plus haut, nous obtiendrons une URL comme ceci :

styles/mon-style.css

Cette structure d’URL correspond à une descente dans la structure des fichiers. Nous partons de notre page HTML, nous entrons dans le dossier styles, puis nous ciblons le document mon-style.css

De temps à autres, il peut être nécessaire de remonter dans notre structure de dossier. Par exemple, depuis notre feuille de style, il peut être utile d’aller chercher une image dans le dossier dédié aux images informatives (à la racine du site). Dans ce cas, nous écrirons l’URL de la façon suivante :

../images/mon-image.jpg

Le parcours que nous opérons ici est l’inverse du précédent. Nous partons de mon-style.css, nous sortons du dossier styles à l’aide de ../ nous entrons dans le dossier images présent à la racine du site et allons chercher le document mon-image.jpg.

L’écriture d’URL relatifs est privilégiée pour les liaisons internes au sites (images, feuilles de style, scripts…). Elles permet le déplacement du dossier racine sans rupture des liaisons puisqu’elle s’appuie sur le point de départ (ici notre page HTML) de la liaison et non sur environnement personnel dans lequel nous travaillons (notre ordinateur).

Cette article vous a t'il été utile ?

( 1 )