Cours 2¶

Arborescence et structure d’un site Web¶

L’arborescence est la structure hiérarchique des dossiers et fichiers dans un projet Web.

📂 mon-site-web
├── index.html
└── 📂 assets
    ├── 📂 img
    │   ├── main-background.jpg
    │   └── logo.png
    └── 📂 css
        └── styles.js

Arborescence ≠ navigation

Convention de nommage¶

Il existe 4 grandes conventions pour nommer des fichiers, des dossiers et même pour écrire du code en programmation.

On appelle ça des notations.

Notation	Exemple	Explication
🧮 Pascal¹	`MonNomDeFichier`	Chaque mot commence par une majuscule
🐫 Chameau²	`monNomDeFichier`	Chaque mot commence par une majuscule sauf le premier
🐍 Serpent³	`mon_nom_de_fichier`	Chaque mot est séparé par une barre de soulignement
🌯 Kébab⁴	`mon-nom-de-fichier`	Chaque mot est séparé par un tiret

Celui qui nous intéresse en Web, c’est le kébab (miam miam).

Notation Kébab¶

Alors, en quoi consiste cette fameuse notation kebab case ?

Il suffit d'écrire des mots en minuscule séparé par un tiret !

En général, voici ce qui doit être évité :

❌ Espace
❌ Accents
❌ Caractères spéciaux. Ex. : $, #, ?, %.

Pourquoi ?

Si vous nommez un fichier ou un dossier avec les éléments ci-dessus, l'URL pour accéder à votre site peut être simplement brisé

Pourquoi on nomme les dossiers et les fichiers en kebab-case ?¶

Parce qu’en Web, la nomenclature a un impact direct sur l’URL dans le navigateur.

Exemple :
Un fichier nommé ma-page-contact.html devient :
https://monsite.com/ma-page-contact.html

Extensions de fichiers : .html, .css, .js, .jpg, etc.

HTML¶

C'est quoi ça ?

À quoi ça sert ?

VS Code¶

Créer une structure dans vscode Extension “Live Server” (aperçu en temps réel).

Anatomie d’un document HTML

Titre de la page

Bonjour le Web!

•   <!DOCTYPE html> : indique que c’est du HTML5.
•   <html> : racine du document.
•   <head> : métadonnées, titre, liens vers CSS ou JS.
•   <body> : contenu visible de la page.

Modèle parent-enfant (DOM)

HTML = un arbre. Chaque balise contient (ou non) d’autres balises.

Section 1

Paragraphe dans la section

Le

est parent de

, qui est parent de

et

. Indentation

Balises sémantiques¶

Balise Rôle

En-tête du site ou d’une section