HTML & CSS

01 — Introduction

Structure d'une page HTML

HTML (HyperText Markup Language) est le langage qui décrit le contenu et la structure d'une page web. CSS (Cascading Style Sheets) en gère l'apparence visuelle.

Le squelette minimal

index.html

<!-- Déclaration du type de document -->
<!DOCTYPE html>

<html lang="fr">

  <head>
    <!-- Métadonnées (invisibles à l'écran) -->
    <meta charset="UTF-8">
    <title>Ma première page</title>
  </head>

  <body>
    <!-- Contenu visible -->
    <h1>Bonjour monde !</h1>
  </body>

</html>

🔍 À retenir

<!DOCTYPE html> : déclare la version HTML5 (obligatoire en 1ère ligne)
<head> : informations sur la page (titre, encodage, styles…)
<body> : tout ce qui s'affiche dans le navigateur
charset="UTF-8" : permet les accents et caractères spéciaux

Notion de balise

Une balise HTML suit la syntaxe <nombalise>contenu</nombalise>. Certaines balises sont auto-fermantes (pas de contenu) : <br>, <img>, <input>, <meta>.

02 — Balises

Les balises essentielles

Titres et paragraphes

Balise	Rôle	Exemple
`<h1>` à `<h6>`	Titres (h1 = plus important)	`<h1>Titre principal</h1>`
`<p>`	Paragraphe	`<p>Texte...</p>`
`<br>`	Saut de ligne (auto-fermant)	`ligne1<br>ligne2`
`<hr>`	Ligne horizontale	`<hr>`

Mise en forme du texte

Balise	Rendu
`<strong>`	Texte en gras (important sémantiquement)
`<em>`	Texte en italique (emphase)
`<span>`	Conteneur inline générique (pour le CSS)
`<code>`	Code informatique (police monospace)

Listes

<!-- Liste non ordonnée (puces) -->
<ul>
  <li>Python</li>
  <li>JavaScript</li>
</ul>

<!-- Liste ordonnée (numérotée) -->
<ol>
  <li>Allumer l'ordinateur</li>
  <li>Ouvrir l'éditeur</li>
</ol>

Liens et images

<!-- Lien hypertexte -->
<a href="https://wikipedia.org" target="_blank">Wikipedia</a>

<!-- Image (balise auto-fermante) -->
<img src="photo.jpg" alt="Description de l'image" width="300">

⚠ Piège fréquent

L'attribut alt est obligatoire sur <img> (accessibilité). target="_blank" ouvre le lien dans un nouvel onglet.

Tableaux

<table>
  <tr>  <!-- Ligne -->
    <th>Nom</th>   <!-- Cellule d'en-tête -->
    <th>Note</th>
  </tr>
  <tr>
    <td>Alice</td>  <!-- Cellule normale -->
    <td>18</td>
  </tr>
</table>

Conteneurs structurels

Balise	Usage
`<div>`	Conteneur bloc générique (pour CSS/JS)
`<header>`	En-tête de la page ou d'une section
`<nav>`	Menu de navigation
`<main>`	Contenu principal
`<section>`	Section thématique
`<article>`	Contenu autonome (article de blog…)
`<footer>`	Pied de page

03 — Attributs

Attributs HTML importants

Les attributs se placent dans la balise ouvrante : <balise attribut="valeur">

Attribut	Balises	Rôle
`id`	toutes	Identifiant unique sur la page
`class`	toutes	Classe CSS (réutilisable)
`href`	`<a>`	URL du lien
`src`	`<img>, <script>`	Chemin du fichier source
`alt`	`<img>`	Texte alternatif
`type`	`<input>`	Type de champ (text, email…)
`name`	`<input>`	Nom du champ (envoi formulaire)
`style`	toutes	CSS inline (à éviter)
`rel`	`<link>`	Relation (ex: stylesheet)

Relier un fichier CSS externe

<head>
  <link rel="stylesheet" href="style.css">
</head>

04 — CSS Bases

CSS : syntaxe et propriétés

Syntaxe d'une règle CSS

style.css

sélecteur {
  propriété: valeur;
  propriété2: valeur2;
}

/* Exemple concret */
h1 {
  color: navy;
  font-size: 32px;
  text-align: center;
}

Où écrire le CSS ?

Méthode	Syntaxe	Recommandé ?
Fichier externe	`<link rel="stylesheet" href="style.css">`	✅ Oui (séparation)
Balise <style>	`<style> h1 { ... } </style>` dans <head>	⚠ Acceptable
Inline (style=)	`<p style="color:red">`	❌ À éviter

Propriétés texte et couleurs

Propriété	Exemple	Effet
`color`	`color: red;`	Couleur du texte
`background-color`	`background-color: #f0f0f0;`	Fond
`font-size`	`font-size: 18px;`	Taille du texte
`font-family`	`font-family: Arial, sans-serif;`	Police
`font-weight`	`font-weight: bold;`	Gras
`text-align`	`text-align: center;`	Alignement
`text-decoration`	`text-decoration: none;`	Soulignement

Couleurs CSS : 3 notations

p { color: red; }          /* Nom anglais */
p { color: #ff0000; }      /* Hexadécimal (RRGGBB) */
p { color: rgb(255, 0, 0); } /* RGB (0-255) */

05 — Sélecteurs

Les sélecteurs CSS

Sélecteur	Syntaxe CSS	Cible
Balise	`p { }`	Tous les `<p>`
Classe	`.important { }`	Éléments avec `class="important"`
Identifiant	`#menu { }`	L'élément avec `id="menu"`
Universel	`* { }`	Tous les éléments
Descendant	`div p { }`	Tous les `<p>` dans un `<div>`
Enfant direct	`ul > li { }`	Enfants directs seulement
Groupement	`h1, h2, h3 { }`	h1, h2 et h3 simultanément
Pseudo-classe	`a:hover { }`	Lien au survol de la souris

Exemples pratiques

/* Classe : peut s'appliquer à plusieurs éléments */
.rouge { color: red; }

/* ID : unique sur la page */
#titre-principal { font-size: 40px; }

/* Combinaison */
nav a:hover { text-decoration: underline; color: blue; }

/* Plusieurs classes sur un élément HTML */
<!-- <p class="rouge grand"> est ciblé par .rouge ET .grand -->

💡 Spécificité CSS

En cas de conflit, l'ordre de priorité est : inline style > ID > classe > balise. Plus le sélecteur est précis, plus il prend la priorité.

06 — Mise en forme

Le modèle de boîte (Box Model)

Chaque élément HTML est une boîte rectangulaire composée de 4 couches :

MARGIN (espace extérieur)
BORDER (bordure)
PADDING (espace intérieur)
CONTENT (contenu)

Propriété	Exemples de valeurs	Rôle
`width` / `height`	`200px`, `50%`, `auto`	Dimensions du contenu
`padding`	`10px`, `10px 20px`	Espacement intérieur (entre contenu et bordure)
`border`	`2px solid black`	Bordure (épaisseur style couleur)
`margin`	`10px`, `0 auto`	Espacement extérieur (entre éléments)
`border-radius`	`8px`, `50%`	Coins arrondis

Raccourcis padding/margin

/* 1 valeur = 4 côtés identiques */
.box { padding: 10px; }

/* 2 valeurs = haut/bas  gauche/droite */
.box { margin: 20px 10px; }

/* 4 valeurs = haut droite bas gauche (sens des aiguilles) */
.box { padding: 5px 10px 15px 20px; }

/* Centrer horizontalement un bloc */
.container { width: 800px; margin: 0 auto; }

display : comment l'élément occupe l'espace

Valeur	Comportement	Exemples par défaut
`block`	Prend toute la largeur, va à la ligne	`<div>, <p>, <h1>`
`inline`	S'intègre dans le texte, pas de width/height	`<span>, <a>, <strong>`
`inline-block`	Inline mais accepte width/height/margin	—
`none`	Cache l'élément (pas d'espace)	—

07 — Mise en page

Flexbox & Grid

Flexbox — mise en page en ligne

Flexbox aligne les éléments en ligne (ou colonne). On l'active sur le conteneur parent.

.conteneur {
  display: flex;
  flex-direction: row;         /* row | column */
  justify-content: space-between; /* alignement axe principal */
  align-items: center;        /* alignement axe secondaire */
  gap: 16px;                 /* espace entre items */
  flex-wrap: wrap;            /* retour à la ligne si besoin */
}

APERÇU — Flexbox avec justify-content: space-around

Item 1

Item 2

Item 3

CSS Grid — mise en page en grille

.grille {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 colonnes */
  grid-template-rows: auto;
  gap: 10px;
}

/* fr = fraction de l'espace disponible */
/* repeat(3, 1fr) = 3 colonnes égales */
.grille2 { grid-template-columns: repeat(3, 1fr); }

APERÇU — Grid avec 3 colonnes égales

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Positionnement CSS

Valeur	Comportement
`position: static`	Par défaut, suit le flux normal
`position: relative`	Décalage par rapport à sa position normale (top/left/…)
`position: absolute`	Positionné par rapport à son ancêtre positionné
`position: fixed`	Fixe dans la fenêtre (ne défile pas)

08 — Formulaires

Les formulaires HTML

Formulaire complet

<form action="traitement.php" method="post">

  <!-- Champ texte -->
  <label for="prenom">Prénom :</label>
  <input type="text" id="prenom" name="prenom" placeholder="Votre prénom">

  <!-- Email -->
  <input type="email" name="email" required>

  <!-- Mot de passe -->
  <input type="password" name="mdp">

  <!-- Menu déroulant -->
  <select name="classe">
    <option value="1ere">1ère</option>
    <option value="terminale">Terminale</option>
  </select>

  <!-- Cases à cocher -->
  <input type="checkbox" name="nsi" id="nsi">
  <label for="nsi">Spécialité NSI</label>

  <!-- Bouton d'envoi -->
  <button type="submit">Envoyer</button>

</form>

type=	Usage
`"text"`	Texte libre
`"email"`	Adresse email (validation auto)
`"password"`	Mot de passe (masqué)
`"number"`	Nombre
`"checkbox"`	Case à cocher
`"radio"`	Bouton radio (choix unique)
`"submit"`	Bouton d'envoi
`"hidden"`	Champ invisible

⚠ RÉVISION

Checklist pour le DST

Assure-toi de maîtriser chacun de ces points avant demain.

Structure & HTML

Écrire le squelette HTML5 complet (DOCTYPE, html, head, body)
Connaître les 6 niveaux de titres et les utiliser correctement
Créer une liste ordonnée et non ordonnée
Insérer un lien (href) et une image (src, alt)
Créer un tableau (table, tr, th, td)
Distinguer <div> (bloc) de <span> (inline)
Relier une feuille CSS externe avec <link>

CSS fondamental

Écrire une règle CSS valide (sélecteur, accolades, propriété: valeur;)
Utiliser les 3 types de sélecteurs (balise, .classe, #id)
Appliquer couleur de texte et de fond (color, background-color)
Modifier police, taille, alignement (font-family, font-size, text-align)
Comprendre le modèle de boîte (margin, padding, border)
Centrer un bloc horizontalement avec margin: 0 auto

Formulaires

Créer un formulaire avec <form>, action, method
Utiliser les types d'input : text, email, password, checkbox, submit
Lier un <label> à son <input> avec for/id

🚨 Erreurs classiques à éviter

Oublier de fermer une balise (surtout </div>, </ul>)
Confondre class (CSS = .nom) et id (CSS = #nom)
Mettre le <link> CSS dans le <body> au lieu du <head>
Oublier les guillemets autour des valeurs d'attributs HTML
Oublier le point-virgule en fin de déclaration CSS
Oublier l'attribut alt sur les images

09 — Exercices

Exercices pratiques progressifs

3 niveaux : débutant → intermédiaire → avancé. Pour chaque exercice, écris le code dans ton éditeur et vérifie le rendu dans ton navigateur.

⭐ Niveau 1 · Exercice 1

Ma première page de présentation

Crée une page HTML complète qui te présente. Elle doit contenir :

Le squelette HTML5 valide complet
Un titre <h1> avec ton prénom
Un paragraphe de présentation (<p>)
Une liste non ordonnée de 3 de tes hobbies
Un lien vers ton site préféré (qui s'ouvre dans un nouvel onglet)

💡 Coup de pouce

N'oublie pas : <!DOCTYPE html>, <html lang="fr">, <head> avec charset et title, puis <body>.

▶ Voir la solution

Solution

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Présentation</title>
</head>
<body>
  <h1>Alice</h1>
  <p>Je suis élève en 1ère spécialité NSI au lycée Victor Hugo.</p>
  <ul>
    <li>Programmation</li>
    <li>Musique</li>
    <li>Jeux vidéo</li>
  </ul>
  <a href="https://wikipedia.org" target="_blank">Mon site préféré</a>
</body>
</html>

⭐ Niveau 1 · Exercice 2

Mise en forme CSS basique

Reprends la page de l'exercice 1 et crée un fichier style.css lié à ta page. Applique ces styles :

Fond de page de couleur #f0f4f8
Titre <h1> : couleur navy, centré, taille 40px
Paragraphes : police Arial, taille 16px, couleur #333
Le lien : sans soulignement, couleur rouge ; au survol : souligné
La liste : fond blanc, padding 20px, bordure 1px solid grise

▶ Voir la solution

style.css

body {
  background-color: #f0f4f8;
}

h1 {
  color: navy;
  text-align: center;
  font-size: 40px;
}

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
}

a {
  text-decoration: none;
  color: red;
}

a:hover {
  text-decoration: underline;
}

ul {
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
}

Dans <head> du HTML

<link rel="stylesheet" href="style.css">

⭐⭐ Niveau 2 · Exercice 3

Tableau des élèves

Crée une page HTML avec un tableau de 4 élèves. Le tableau doit avoir :

Une ligne d'en-tête (<th>) : Nom, Prénom, Note /20, Mention
4 lignes de données avec des valeurs fictives
En CSS : l'en-tête en fond #2c3e50, texte blanc ; les lignes alternent entre blanc et #ecf0f1 ; une bordure sur toutes les cellules
Le tableau centré avec margin: 0 auto, largeur 80%

▶ Voir la solution

HTML

<table>
  <tr>
    <th>Nom</th><th>Prénom</th><th>Note /20</th><th>Mention</th>
  </tr>
  <tr><td>Dupont</td><td>Alice</td><td>18</td><td>TB</td></tr>
  <tr><td>Martin</td><td>Bob</td><td>14</td><td>B</td></tr>
  <tr><td>Bernard</td><td>Clara</td><td>11</td><td>AB</td></tr>
  <tr><td>Petit</td><td>David</td><td>16</td><td>TB</td></tr>
</table>

CSS

table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}
th {
  background-color: #2c3e50;
  color: white;
  padding: 10px;
}
td {
  border: 1px solid #ccc;
  padding: 8px;
}
tr:nth-child(even) td {
  background-color: #ecf0f1;
}

⭐⭐ Niveau 2 · Exercice 4

Formulaire d'inscription

Crée un formulaire d'inscription à un club NSI. Il doit contenir :

Un champ Nom (text, obligatoire)
Un champ Email (type email)
Un menu déroulant Classe : 2nde, 1ère, Terminale
Des cases à cocher : Python, Web, Réseaux
Un bouton Envoyer
En CSS : formulaire encadré, champs en pleine largeur, espacement agréable

▶ Voir la solution

HTML

<form action="#" method="post">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" required>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email">

  <label for="classe">Classe :</label>
  <select id="classe" name="classe">
    <option>2nde</option>
    <option>1ère</option>
    <option>Terminale</option>
  </select>

  <p>Centres d'intérêt :</p>
  <input type="checkbox" id="python" name="python">
  <label for="python">Python</label>
  <input type="checkbox" id="web" name="web">
  <label for="web">Web</label>
  <input type="checkbox" id="reseaux" name="reseaux">
  <label for="reseaux">Réseaux</label>

  <button type="submit">Envoyer</button>
</form>

CSS

form {
  max-width: 500px;
  margin: 30px auto;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
}
label {
  display: block;
  margin-top: 12px;
  font-weight: bold;
}
input[type="text"], input[type="email"], select {
  width: 100%;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  margin-top: 4px;
}
button {
  margin-top: 20px;
  padding: 10px 24px;
  background-color: #2c3e50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

⭐⭐⭐ Niveau 3 · Exercice 5

Mini-site : page d'accueil complète

Crée une page d'accueil complète pour un lycée fictif. Elle doit respecter cette structure sémantique :

<header> : nom du lycée + menu de navigation avec 3 liens
<main> : section d'accueil avec titre, texte de présentation et une image
<section> : 3 "cartes" alignées en Flexbox (Actualités, Agenda, Contact) avec un titre et texte chacune
<footer> : copyright centré
CSS : couleurs cohérentes, header fixe en haut, cartes avec ombre et bordure arrondie

🎯 Points clés évalués

Structure sémantique correcte · Flexbox fonctionnel · CSS propre et organisé · Sélecteurs variés (balise, classe, id, pseudo-classe)

▶ Voir la solution

HTML complet

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Lycée Victor Hugo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header id="top">
    <h1>Lycée Victor Hugo</h1>
    <nav>
      <a href="#">Accueil</a>
      <a href="#">Actualités</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <h2>Bienvenue dans notre lycée</h2>
    <p>Un établissement d'excellence depuis 1902.</p>
    <img src="lycee.jpg" alt="Photo du lycée" width="600">

    <section class="cartes">
      <div class="carte">
        <h3>Actualités</h3>
        <p>Journée portes ouvertes le 15 mars.</p>
      </div>
      <div class="carte">
        <h3>Agenda</h3>
        <p>Conseil de classe : 20 mars à 18h.</p>
      </div>
      <div class="carte">
        <h3>Contact</h3>
        <p>lycee@example.fr · 01 23 45 67 89</p>
      </div>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Lycée Victor Hugo</p>
  </footer>

</body>
</html>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }

header {
  background-color: #2c3e50;
  color: white;
  padding: 16px 32px;
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav a { color: white; margin-left: 20px; text-decoration: none; }
nav a:hover { text-decoration: underline; }

main {
  padding: 100px 40px 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.cartes {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}
.carte {
  flex: 1;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  padding: 20px;
  background: #ecf0f1;
  margin-top: 40px;
}

Structure d'une page HTML

Le squelette minimal

Notion de balise

Les balises essentielles

Titres et paragraphes

Mise en forme du texte

Listes

Liens et images

Tableaux

Conteneurs structurels

Attributs HTML importants

CSS : syntaxe et propriétés

Syntaxe d'une règle CSS

Où écrire le CSS ?

Propriétés texte et couleurs

Couleurs CSS : 3 notations

Les sélecteurs CSS

Le modèle de boîte (Box Model)

display : comment l'élément occupe l'espace

Flexbox & Grid

Flexbox — mise en page en ligne

CSS Grid — mise en page en grille

Positionnement CSS

Les formulaires HTML

Checklist pour le DST

Structure & HTML

CSS fondamental

Formulaires

Exercices pratiques progressifs

Ma première page de présentation

Mise en forme CSS basique

Tableau des élèves

Formulaire d'inscription

Mini-site : page d'accueil complète

Quiz HTML & CSS