HTML & CSS — Cours Complet

Les fondamentaux et la maîtrise de la mise en page
Avec des exemples mathématiques en MathML

📑 Sommaire

  • Partie 1 : Les fondamentaux du HTML et CSS
    • 1. Distinguer HTML et CSS
    • 2. Éléments HTML et attributs
    • 3. Balises sémantiques
    • 4. Éléments bloc vs inline
    • 5. Identifier les informations clés
    • 6. Syntaxe CSS
    • 7. Appliquer le CSS
  • Partie 2 : Maîtrise de la mise en page
    • 8. Le modèle de boîte (Box Model)
    • 9. Flexbox
    • 10. CSS Grid
    • 11. Styliser liens, listes et formulaires
    • 12. Responsive design
    • 13. Animations et transitions
  • Partie 3 : Exercice pratique complet

Partie 1 : Les fondamentaux du HTML et CSS

1. Distinguer HTML et CSS et identifier leurs usages respectifs

1.1. Qu'est-ce que le HTML ?

HTML (HyperText Markup Language) est le langage de structure d'une page web. Il sert à définir le contenu et sa hiérarchie.

Analogies :
  • HTML = Les fondations, les murs, l'ossature d'une maison.
  • HTML = Le squelette d'un corps humain.

Ce que fait le HTML :

  • Il crée des titres, des paragraphes, des listes, des liens, des images.
  • Il dit : "Ceci est un titre", "Ceci est un paragraphe", "Ceci est un lien".

1.2. Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) est le langage de présentation d'une page web. Il sert à définir l'apparence visuelle du contenu.

Analogies :
  • CSS = La peinture, la déco, l'aménagement intérieur de la maison.
  • CSS = La peau, les vêtements, la coiffure du corps humain.

Ce que fait le CSS :

  • Il change les couleurs, les polices, les tailles, les marges, les positions.
  • Il dit : "Ce titre doit être en bleu", "Ce paragraphe doit être en gras".

1.3. Résumé de la distinction

Critère HTML CSS
Rôle Structure / Contenu Style / Apparence
Question "Qu'est-ce que c'est ?" "À quoi ça ressemble ?"
Fichier .html .css

2. Reconnaître les éléments HTML courants et leurs attributs

2.1. La structure de base d'une page HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon premier site</title>
</head>
<body>
    <!-- Le contenu visible de la page va ici -->
</body>
</html>
  • <!DOCTYPE html> : Indique au navigateur qu'il s'agit de HTML5.
  • <html> : La racine du document.
  • <head> : Contient des informations sur la page (titre, encodage).
  • <body> : Contient tout ce qui est visible par l'utilisateur.

2.2. Les éléments HTML courants

Balise Utilité Exemple
<h1> à <h6> Titres <h1>Bienvenue</h1>
<p> Paragraphe <p>Texte</p>
<a> Lien <a href="#">Cliquez</a>
<img> Image <img src="photo.jpg" alt="Description">
<ul> / <ol> Listes <ul><li>Item</li></ul>
<div> Conteneur bloc <div>...</div>
<span> Conteneur inline <span>...</span>

2.3. Les attributs HTML

Attribut Utilisé sur Utilité
href <a> Destination du lien
src <img> Source de l'image
alt <img> Texte alternatif
class Toutes Cible un groupe en CSS
id Toutes Cible un élément unique en CSS

3. Expliquer comment les balises sémantiques structurent une page web

Avant HTML5, on utilisait des <div> pour tout. Les balises sémantiques donnent du sens à la structure.

Balise Signification Utilisation
<header> En-tête Logo, titre, navigation
<nav> Navigation Menu principal
<main> Contenu principal Contenu central unique
<section> Section Regroupe un thème
<article> Article Contenu indépendant
<aside> À côté Contenu secondaire
<footer> Pied de page Mentions légales, copyright 
<body>
    <header>
        <h1>Mon Site</h1>
        <nav>
            <a href="#">Accueil</a>
            <a href="#">Blog</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>Articles</h2>
            <article>
                <h3>Article 1</h3>
                <p>Contenu...</p>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2026</p>
    </footer>
</body>
Pourquoi c'est important ?
  • Accessibilité : Les lecteurs d'écran comprennent mieux la page.
  • SEO : Google comprend mieux le contenu.
  • Maintenance : Le code est plus lisible.

4. Distinguer les éléments en bloc des éléments en ligne

4.1. Les éléments en bloc (block elements)

  • Prennent toute la largeur disponible.
  • Provoquent un retour à la ligne.
  • Peuvent avoir width et height.

Exemples : <div>, <p>, <h1>, <section>, <header>.

4.2. Les éléments en ligne (inline elements)

  • Prennent uniquement la largeur de leur contenu.
  • Ne provoquent pas de retour à la ligne.
  • Ne peuvent pas avoir width ou height.

Exemples : <a>, <span>, <img>, <strong>.

Élément bloc Élément en ligne
Occupe toute la largeur Occupe seulement sa largeur
Retour à la ligne Pas de retour à la ligne
Peut avoir width/height Ne peut pas avoir width/height
Ex: <div>, <p> Ex: <span>, <a>

5. Utiliser des balises et attributs pour identifier les informations clés

5.1. Utiliser les attributs class et id

  • class : Identifie un groupe d'éléments.
  • id : Identifie un élément unique.
<h1 id="titre-principal">Bienvenue</h1>
<p class="intro">Introduction 1</p>
<p class="intro">Introduction 2</p>

5.2. Les attributs ARIA (accessibilité)

<nav role="navigation" aria-label="Menu principal">...</nav>
<button aria-label="Fermer">X</button>

5.3. Micro-données Schema.org

<div itemscope itemtype="http://schema.org/Product">
    <h2 itemprop="name">Casque audio</h2>
    <span itemprop="price" content="99.99">99.99 €</span>
</div>

6. Identifier et utiliser la syntaxe CSS correcte

6.1. La syntaxe de base

selecteur {
    propriete: valeur;
}

6.2. Les sélecteurs CSS

Sélecteur Syntaxe Exemple
Élément balise p { color: red; }
Classe .nomClasse .intro { font-weight: bold; }
ID #nomId #titre { font-size: 40px; }
Universel * * { margin: 0; }

6.3. Où écrire le CSS ?

  1. Externe (recommandé) : <link rel="stylesheet" href="style.css">
  2. Interne : <style> p { color: blue; } </style>
  3. En ligne (à éviter) : <p style="color: blue;">

7. Appliquer le CSS aux éléments HTML

7.1. Exemple : Carte de visite

<div class="carte">
    <h1 id="nom">Jean Dupont</h1>
    <p class="titre">Développeur Web</p>
    <a class="bouton" href="#">Me contacter</a>
</div>
.carte {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 30px;
    text-align: center;
    width: 300px;
}

#nom {
    color: #2c3e50;
    font-size: 24px;
}

.titre {
    color: #3498db;
    font-weight: bold;
}

.bouton {
    background: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s;
}

.bouton:hover {
    background: #2980b9;
}

Partie 2 : Maîtrise de la mise en page

8. Comprendre le modèle de boîte (Box Model)

8.1. Qu'est-ce que le Box Model ?

Largeur totale = largeur du contenu + padding gauche + padding droit + bordure gauche + bordure droite

L t o t a l = L c o n t e n t + p a d d i n g _ l e f t + p a d d i n g _ r i g h t + b o r d e r _ l e f t + b o r d e r _ r i g h t

Avec box-sizing: border-box, le padding et la bordure sont inclus dans la largeur :

L t o t a l = L c o n t e n t + p a d d i n g + b o r d e r = L c o n t e n t  avec  b o r d e r - b o x
/* Règle universelle recommandée */
* {
    box-sizing: border-box;
}

9. Utiliser Flexbox pour des mises en page flexibles

9.1. Qu'est-ce que Flexbox ?

Flexbox permet de répartir l'espace et d'aligner les éléments sur un seul axe.

.conteneur {
    display: flex;
}

9.2. Propriétés du conteneur Flex

Propriété Valeurs courantes Effet
flex-direction row, column Axe principal
justify-content center, space-between Alignement axe principal
align-items center, stretch Alignement axe secondaire
flex-wrap wrap, nowrap Retour à la ligne

9.3. Exemple : Barre de navigation

<nav class="navbar">
    <div class="logo">MonSite</div>
    <ul class="menu">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
    </ul>
    <div class="auth"><a href="#">Connexion</a></div>
</nav>
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2c3e50;
    padding: 15px 30px;
}

.menu {
    display: flex;
    list-style: none;
    gap: 20px;
}

.menu a { color: white; text-decoration: none; }

10. Utiliser CSS Grid pour des mises en page en 2 dimensions

10.1. Qu'est-ce que CSS Grid ?

CSS Grid permet de créer des grilles en 2 dimensions (lignes ET colonnes).

.grille {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
}

Répartition de l'espace avec les unités fr

E s p a c e _ t o t a l = 1 f r + 2 f r + 1 f r = 4 f r

Chaque 1fr = 14 de l'espace total

10.2. Exemple : Galerie d'images

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

10.3. Flexbox vs Grid

Flexbox (1D) Grid (2D)
Alignement sur un axe Mise en page complète
Navigation, cartes, boutons Structure globale, galeries

11. Styliser les liens, les listes et les formulaires

11.1. Styliser les liens

a { color: #3498db; text-decoration: none; }
a:hover { color: #e74c3c; }
a:visited { color: #8e44ad; }
a:active { color: #2c3e50; }

11.2. Styliser les listes

ul { list-style: none; padding: 0; }
ul.horizontal { display: flex; gap: 20px; }

11.3. Styliser les formulaires

<form class="contact-form">
    <div class="form-group">
        <label for="nom">Nom :</label>
        <input type="text" id="nom" placeholder="Votre nom">
    </div>
    <div class="form-group">
        <label for="email">Email :</label>
        <input type="email" id="email" placeholder="votre@email.com">
    </div>
    <button type="submit">Envoyer</button>
</form>
.form-group { margin-bottom: 20px; }
input, textarea {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s;
}
input:focus { border-color: #3498db; }

12. Comprendre les bases du responsive design

12.1. La balise viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

12.2. Les unités relatives

Unité Description Exemple
% Pourcentage du parent width: 50%;
em Relatif à la police du parent font-size: 2em;
rem Relatif à la police racine font-size: 1.5rem;
vw 1% de la largeur de la fenêtre width: 50vw;
vh 1% de la hauteur de la fenêtre height: 100vh;

Conversion des unités relatives

1 r e m = t a i l l e _ p o l i c e _ r a c i n e  (généralement 16px) 1 v w = 1 100 × l a r g e u r _ f e n e t r e

12.3. Les media queries

/* Mobile first */
body { font-size: 16px; }

/* Tablette */
@media (min-width: 768px) {
    body { font-size: 18px; }
}

/* Ordinateur */
@media (min-width: 1024px) {
    body { font-size: 20px; }
}

Règle des points de rupture (breakpoints) :

B r e a k p o i n t s = { 480 p x , 768 p x , 1024 p x , 1440 p x }

13. Ajouter des animations et transitions

13.1. Les transitions

.bouton {
    background: #3498db;
    transition: background 0.3s ease, transform 0.2s ease;
}
.bouton:hover {
    background: #e74c3c;
    transform: scale(1.1);
}

Fonction de transition :

t r a n s i t i o n = p r o p r i e t e + d u r e e + f o n c t i o n + d e l a i

13.2. Les animations keyframes

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}

.animation-bounce {
    animation: bounce 1s infinite;
}

Modélisation d'un rebond :

y ( t ) = A × sin ( ω t )

où A = amplitude, ω = pulsation

Partie 3 : Exercice pratique complet

Objectif

Créer une page de présentation de services avec :

  • Une navigation responsive (Flexbox + media query).
  • Une grille de services (CSS Grid).
  • Des cartes animées au survol.
  • Un formulaire de contact stylisé.

Structure souhaitée

┌──────────────────────────────────────────┐
│  Logo    Accueil  Services  Contact      │  ← Navbar
├──────────────────────────────────────────┤
│                                          │
│    [Grand titre de bienvenue]            │
│    [Sous-titre]                          │  ← Hero section
│    [Bouton CTA]                          │
│                                          │
├──────────────────────────────────────────┤
│  ┌──────┐  ┌──────┐  ┌──────┐          │
│  │Service│  │Service│  │Service│          │  ← Grid 3 colonnes
│  │   1   │  │   2   │  │   3   │          │
│  └──────┘  └──────┘  └──────┘          │
├──────────────────────────────────────────┤
│  Formulaire de contact                   │  ← Formulaire
│  [Nom] [Email] [Message] [Envoyer]      │
├──────────────────────────────────────────┤
│  © 2026 - Mentions légales              │  ← Footer
└──────────────────────────────────────────┘

Correction complète

HTML (index.html)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mes Services</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="logo">MonAgence</div>
        <ul class="menu">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <!-- Hero -->
    <header class="hero">
        <h1>Des solutions sur mesure</h1>
        <p>Nous vous accompagnons dans la création de votre projet digital.</p>
        <a href="#" class="btn-cta">Commencer</a>
    </header>

    <!-- Services -->
    <section class="services">
        <h2>Nos services</h2>
        <div class="grille-services">
            <div class="service-card">
                <div class="icone">💻</div>
                <h3>Développement web</h3>
                <p>Création de sites vitrines et applications sur mesure.</p>
            </div>
            <div class="service-card">
                <div class="icone">📱</div>
                <h3>Mobile</h3>
                <p>Applications mobiles natives et hybrides.</p>
            </div>
            <div class="service-card">
                <div class="icone">🎨</div>
                <h3>Design UX/UI</h3>
                <p>Interfaces modernes et expériences utilisateur optimisées.</p>
            </div>
        </div>
    </section>

    <!-- Contact -->
    <section class="contact">
        <h2>Contactez-nous</h2>
        <form>
            <div class="form-group">
                <label for="name">Nom</label>
                <input type="text" id="name" placeholder="Votre nom" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="votre@email.com" required>
            </div>
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" rows="4" placeholder="Votre message..."></textarea>
            </div>
            <button type="submit" class="btn-submit">Envoyer</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2026 MonAgence - Tous droits réservés.</p>
    </footer>
</body>
</html>

CSS (style.css)

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: #2c3e50;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.menu a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.menu a:hover {
    color: #3498db;
}

/* Hero */
.hero {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: white;
    text-align: center;
    padding: 80px 20px;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

.btn-cta {
    display: inline-block;
    padding: 15px 40px;
    background: white;
    color: #2c3e50;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Services */
.services {
    padding: 60px 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.services h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: #2c3e50;
}

.grille-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.icone {
    font-size: 48px;
    margin-bottom: 15px;
}

/* Contact */
.contact {
    background: #ecf0f1;
    padding: 60px 30px;
}

.contact h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: #2c3e50;
}

.contact form {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #3498db;
    outline: none;
}

.btn-submit {
    width: 100%;
    padding: 12px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.btn-submit:hover {
    background: #2980b9;
}

.btn-submit:active {
    transform: scale(0.98);
}

/* Footer */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }
    .menu {
        gap: 15px;
    }
    .hero h1 {
        font-size: 32px;
    }
    .grille-services {
        grid-template-columns: 1fr;
    }
}

 

Cours n°1 — Fondamentaux

Étape Compétence acquise
1 HTML = structure, CSS = style
2 Balises et attributs de base
3 Structure sémantique
4 Bloc vs inline
5 class et id
6 Syntaxe CSS
7 Appliquer le CSS
Prochaine étape conseillée :
  • ✅ JavaScript — pour rendre vos pages interactives
  • ✅ SASS/LESS — pour des CSS plus puissants
  • ✅ Bootstrap/Tailwind — pour des frameworks CSS rapides
آخر تعديل: السبت، 8 أغسطس 2026، 3:33 PM