Module 1 — Débutant

Initiation au
HTML & CSS

Découvrez les fondements du langage du web : structurer une page avec HTML, la mettre en forme avec CSS, et comprendre comment un navigateur interprète votre code.

20 minutes

3 leçons + quiz

Aucun prérequis

À l'issue de ce module, vous serez capable de…

1

Comprendre la structure d'un document HTML et le rôle des balises principales

2

Écrire des règles CSS pour styliser une page (couleurs, typographie, mise en page)

3

Distinguer la structure (HTML) de la présentation (CSS) — le principe de séparation des concerns

1

La structure HTML

Leçon 1 sur 3 — Fondamentaux

HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu d'une page web. Il ne s'agit pas d'un langage de programmation, mais d'un langage de description sémantique : il indique au navigateur ce qu'est chaque élément, pas comment il doit s'afficher.

HTML — Structure de base

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Métadonnées invisibles pour l'utilisateur -->
    <meta charset="UTF-8">
    <title>Ma première page</title>
  </head>
  <body>
    <!-- Contenu visible par l'utilisateur -->
    <h1>Bonjour, monde !</h1>
    <p>Ceci est un paragraphe.</p>
  </body>
</html>

        À retenir
        Chaque élément HTML est composé d'une balise ouvrante <tag>, d'un contenu, et d'une balise fermante </tag>. Certaines balises sont auto-fermantes (<meta>, <img>).
      

Un document HTML suit une hiérarchie stricte :

Le <head> contient les informations invisibles (titre, encodage, liens vers CSS). Le <body> contient tout le contenu affiché à l'écran. Les balises de titre vont de <h1> (titre principal, unique par page) à <h6>.

HTML5 a introduit des balises sémantiques qui décrivent le rôle du contenu :

HTML5 — Balises sémantiques

<header>  ← En-tête de page
<nav>     ← Navigation principale
<main>    ← Contenu principal (unique)
<article> ← Contenu autonome
<section> ← Section thématique
<footer>  ← Pied de page

Ces balises améliorent l'accessibilité (lecteurs d'écran) et le référencement naturel.

Les attributs enrichissent les balises d'informations supplémentaires. Ils s'écrivent dans la balise ouvrante :

Attributs courants

<a href="https://exemple.fr">Lien</a>
<img src="photo.jpg" alt="Description">
<div class="carte" id="hero">...</div>

2

Mettre en forme avec CSS

Leçon 2 sur 3 — Stylisation

CSS (Cascading Style Sheets) est le langage qui contrôle l'apparence visuelle d'un document HTML. Il fonctionne par règles : on cible un ou plusieurs éléments HTML (via un sélecteur), puis on leur applique des déclarations de style.

CSS — Syntaxe d'une règle

/* Sélecteur { propriété: valeur; } */

h1 {
  font-size: 2rem;
  color: #1a2f52;
  font-weight: 700;
}

.carte {                  /* classe */
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

        Le principe de cascade
        Plusieurs règles peuvent s'appliquer au même élément. CSS les résout selon la spécificité du sélecteur : un id l'emporte sur une class, qui l'emporte sur une balise.
      

Les trois façons de lier du CSS à votre HTML :

Intégration CSS

<!-- 1. Feuille de style externe (recommandé) -->
<link rel="stylesheet" href="style.css">

<!-- 2. Style inline (à éviter sauf exception) -->
<p style="color: red;">Texte rouge</p>

<!-- 3. Balise <style> dans le <head> -->
<style>
  p { color: blue; }
</style>

?

Quiz de validation

3 questions pour vérifier vos acquis

🎓

Module complété !

Score final : — / 3