Règles d'écriture des pages web

Nous avons vu jusqu'à maintenant quelques règles et standards à suivre dans la création de nos pages web.

Voici un récapitulatif de ce qui est demandé dans le cours d'Interfaces Web.

Arborescence de dossiers d'un projet web

Un projet web doit suivre une logique dans le classement des différents fichiers nécessaires au bon fonctionnement des pages. Cette pratique facilite grandement la maintenance du site lorsque ce dernier est constitué de centaines de fichiers.

Pour le cours d'Interfaces web, voici les règles à suivre :

1. Un dossier parent identifié correctement
2. Dans le dossier parent, on retrouve au premier niveau, les pages HTML
3. Au même niveau que les pages HTML, on retrouve des sous-dossiers : css, images, scripts

Ainsi, on aura une arborescence comme la suivante :

Règles de nommenclature

En web, il y a des règles d'écriture des noms de fichiers et du code en tant que tel. Ainsi, pour le cours, nous adopterons les standards suivants :

tous les noms de fichiers et de sous-dossiers sont toujours écrits en minuscules
les noms de fichiers et de sous-dossiers ne contiennent aucun espace, aucun accent, aucun caractère spécial

Écriture du code HTML

Le code HTML doit suivre des règles d'écriture qui rendent le code lisible et aéré. Ainsi, on doit :

toujours écrire le code HTML en minuscules
indenter les balises enfant d'une tabulation à l'intérieur d'une balise parent
suivre l'ordre de fermeture des balises : dernier ouvert, premier fermé
espacer les blocs d'une ligne vide
séparer les blocs principaux (header, nav, main, footer) d'un commentaire
une instruction par ligne de code (une image, un lien, un paragraphe, etc.)

Écriture du code CSS

Le code CSS doit aussi suivre des règles qui sont standardisées. Dans le cours, on vous demande :

toujours écrire le code CSS en minuscules
indenter les propriétés CSS d'une tabulation à l'intérieur des accolades
fermer l'accolade après la définition des propriétés
espacer chaque déclaration de style d'une ligne vide
séparer les styles des blocs principaux d'un commentaire
donner un nom significatif aux classes et aux identifiants
dans les noms de classe et d'identifiants, séparer les mots d'un tiret

Ordre de définition des styles dans le CSS

Afin que la feuille de styles soit compréhensible, il y a un ordre à suivre dans la définition des styles :

les styles généraux à toute la page web sont déclarés en premier dans une section
les styles propres à chaque bloc principal de la page sont déclarés dans l'ordre d'utilisation sur la page

Séparation du CSS

Le CSS sera divisé en plusieurs feuilles CSS, en suivant les règlges suivantes :

Une feuille de styles pour les styles répétés sur toutes les pages

On facilite ainsi la modification des éléments répétitifs tels que l'en-tête, le menu, le pied de page et les éléments du thème

une feuille de style pour les styles spécifiques à une page web

On facilite ainsi la mise à jour d'une page, sans se soucier de "casser" les autres pages