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

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Titre de la page</title>
</head>
<body>
  <h1>Bonjour le Web!</h1>
</body>
</html>

<!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.

<body>
  <section>
    <h2>Section 1</h2>
    <p>Paragraphe dans la section</p>
  </section>
</body>

Le <body> est parent de <section>, qui est parent de <h2> et <p>. Indentation

Balises¶

Certaines balises sont autofermante d'autre ne le sont pas. Par exemple :

Un paragraph est une balise normale, c'est à dire qu'on doit spécifier une balise d'ouverture (<p>) et une balise de fermeture (</p>)

<p>Le contenu du paragraph</p>

La balise image elle est autofermante. C'est à dire qu'elle s'ouvre et se ferme dans la même balise (<img />).

<img src="..." />

Balises sémantiques¶

Balise	Rôle
`<header>`	En-tête du site ou d’une section
`<nav>`	Zone de navigation
`<main>`	Contenu principal unique
`<section>`	Regroupement logique de contenu
`<article>`	Contenu autonome (ex. : blogue)
`<aside>`	Contenu secondaire (infos connexes, pub)
`<footer>`	Pied de page

DEMO: faire un site avec ca.

Attributs¶

https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Global_attributes

@todo

Classe

Id (un seul par page)

data-machintruc

Exercices¶

index.html

,