Cours HTML/CSS 2026

Introduction au HTML/CSS

Les langages fondamentaux du Web

DSP - USAL33

Quentin Fait
Cours HTML/CSS 2026

Objectifs du cours

  • Comprendre l'architecture et le fonctionnement du Web
  • Maîtriser le HTML pour structurer des pages web
  • Maîtriser le CSS pour mettre en forme des pages web
  • Adopter les bonnes pratiques de développement web
Quentin Fait
Cours HTML/CSS 2026

Planning détaillé (non définitif)

Date Horaire Programme Emplacement
03/02 13h30-17h Cours : Introduction + Fondamentaux + Structure sémantique 17.1.12
04/02 9h-12h30 Cours : Structure sémantique + Formulaires + Tableaux 61C.2.07
04/02 13h30-17h TP1 : Structure sémantique + Formulaires 61C.2.07
05/02 9h-12h30 TP2 : Formulaires + Tableaux 61C.2.07
Quentin Fait
Cours HTML/CSS 2026
Date Horaire Programme Emplacement
05/02 13h30-17h Cours : Médias + Attributs globaux + Sélecteurs CSS 61C.2.07
06/02 13h30-17h TP3 : Exercices de synthèse HTML 61.A.3.16
09/02 9h-12h30 Cours : Box Model + Positionnement
09/02 13h30-17h TP4 : Sélecteurs + Box Model + Positionnement
Quentin Fait
Cours HTML/CSS 2026
Date Horaire Programme Emplacement
11/02 9h-12h30 Cours : Flexbox + Grid Layout
11/02 13h30-17h TP5 : Flexbox + Grid
12/02 9h-12h30 Cours : Design responsive + Typographie + Couleurs
12/02 13h30-17h TP6 : Design responsive
Quentin Fait
Cours HTML/CSS 2026
Date Horaire Programme Emplacement
13/02 9h-12h30 Cours : Bonnes pratiques + Accessibilité + Performance
13/02 13h30-17h TP : Mini-Projet (conception + wireframe)
16/02 9h-12h30 TP : Mini-Projet (développement) + DS
Quentin Fait
Cours HTML/CSS 2026

Modalités d'évaluation

Évaluation continue (25% de la note finale)

  • Tous les TPs sont à rendre
  • La moyenne des TPs compte pour 25% de la note finale

Évaluation terminale (75% de la note finale)

  • Un DS
  • Un mini-projet
  • La moyenne de ces deux évaluations compte pour 75% de la note finale
Quentin Fait
Cours HTML/CSS 2026

Partie 1

Fondamentaux du Web

Quentin Fait
Cours HTML/CSS 2026

Qu'est-ce qu'une page web ?

« Une page web est une unité de consultation du World Wide Web. Conçue pour être consultée avec un navigateur web et identifiée par une adresse web, elle peut être statique ou dynamique. » (Wikipedia)

En pratique :
Une page web est simplement un fichier (ou un ensemble de fichiers) que le navigateur récupère via Internet et rend sous forme de texte, d'images, de vidéos ou d'interactions.

Quentin Fait
Cours HTML/CSS 2026

Architecture simplifiée du Web

Élément Rôle Exemple concret
Client Navigateur qui demande et affiche le contenu Firefox, Chrome, Safari, Edge
Serveur Machine qui héberge les fichiers et les renvoie Serveur web Apache, Nginx
URL Adresse unique qui identifie la ressource https://exemple.com/index.html
Quentin Fait
Cours HTML/CSS 2026

Statique ⟷ Dynamique

Type Description Fichiers
Statique Le contenu ne change pas sans intervention manuelle Un fichier index.html + style.css livrés tels quels
Dynamique Le contenu est généré à la volée Scripts côté serveur (PHP, Node.js, Python)

Pour ce cours :
Nous ne traiterons que le statique : uniquement HTML + CSS.

Quentin Fait
Cours HTML/CSS 2026

HTML / CSS = description de la page

Rôles complémentaires

  • HTML décrit la structure (titres, paragraphes, images...)
  • CSS décrit la présentation (couleurs, marges, polices...)

Le navigateur interprète ces fichiers

  1. Parse le HTML → crée le DOM (Document Object Model)
  2. Parse le CSS → crée le CSSOM (CSS Object Model)
  3. Combine DOM + CSSOM → Render Tree
  4. Calcule le layout → Paint → affichage
Quentin Fait
Cours HTML/CSS 2026

Le navigateur : un exécutant

Le navigateur agit comme un exécutant d'une description.

⚠️ Point important :
Il n'y a pas de contrôle de flux (boucles, conditions) comme dans un programme classique.

HTML et CSS sont des langages déclaratifs, pas impératifs.

Quentin Fait
Cours HTML/CSS 2026

Cycle de vie d'une page web

1. Utilisateur demande une page (URL)
   ↓
2. Navigateur contacte le serveur (DNS → IP)
   ↓
3. Requête HTTP envoyée
   ↓
4. Serveur renvoie la réponse (HTML)
   ↓
5. Téléchargement des ressources (CSS, images, JS)
   ↓
6. Construction du DOM et du CSSOM
   ↓
7. Création du Render Tree
   ↓
8. Calcul du layout (positions, tailles)
   ↓
9. Peinture (painting) → Affichage final
Quentin Fait
Cours HTML/CSS 2026

Langages du Web

Catégorie Langage(s) Rôle
Langage de balisage HTML Décrit la structure du document
Langage de feuille de style CSS Décrit la présentation
Langage de script côté client JavaScript Ajoute de la logique interactive
Langage de description de données JSON, XML Transporte des données structurées
Quentin Fait
Cours HTML/CSS 2026

Les standards du W3C

Qu'est-ce que le W3C ?

  • W3C = World Wide Web Consortium
  • Organisation internationale fondée en 1994 par Tim Berners-Lee
  • Mission : développer des standards ouverts pour le Web

Pourquoi respecter les standards ?

  • Compatibilité entre navigateurs
  • Pérennité du code
Quentin Fait
Cours HTML/CSS 2026
  • Accessibilité pour tous et toutes
  • SEO amélioré
  • Maintenance facilitée

Validation : https://validator.w3.org/

Quentin Fait
Cours HTML/CSS 2026

Historique rapide — HTML & CSS

HTML :

  • HTML 1.0 (1991) : 18 balises de base
  • HTML 4.01 (1999) : Séparation structure/présentation
  • HTML5 (2014) : Balises sémantiques, vidéo/audio natifs
  • HTML Living Standard (2019+) : Évolution continue
Quentin Fait
Cours HTML/CSS 2026

CSS :

  • CSS 1 (1996) : Propriétés de base
  • CSS 2 (1998) : Positionnement
  • CSS 3 (2011+) : Modules (Flexbox, Grid, animations)

💡 Aujourd'hui : Évolution modulaire et continue

Quentin Fait
Cours HTML/CSS 2026

Protocoles HTTP vs HTTPS

Caractéristique HTTP HTTPS
Sécurité Données en clair Données chiffrées (TLS/SSL)
Port 80 443
Certificat Aucun Certificat SSL/TLS requis
Usage ⚠️ Déprécié ✅ Standard actuel
Navigateur "Non sécurisé" Cadenas 🔒
Quentin Fait
Cours HTML/CSS 2026

Structure d'un document HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon titre</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Contenu visible -->
</body>
</html>
Quentin Fait
Cours HTML/CSS 2026

Décryptage de la structure HTML

  • <!DOCTYPE html> → indique le standard HTML5
  • <html lang="fr"> → conteneur racine, attribut de langue
  • <head> → regroupe les métadonnées, le titre, les liens CSS
  • <meta charset="UTF-8"> → encodage des caractères
  • <title> → titre affiché dans l'onglet du navigateur
  • <link rel="stylesheet"> → lien vers la feuille de style CSS
  • <body> → contient le contenu visible
Quentin Fait
Cours HTML/CSS 2026

Balises de base

Balise Usage Exemple
<h1> à <h6> Titres hiérarchisés <h1>Bienvenue</h1>
<p> Paragraphe <p>Texte...</p>
<ul> / <ol> Listes non ordonnées / ordonnées <ul><li>Item</li></ul>
<a> Lien hypertexte <a href="https://exemple.fr">Site</a>
<img> Image <img src="photo.jpg" alt="Description">
Quentin Fait
Cours HTML/CSS 2026

Règles importantes :

  • L'attribut alt de <img> est obligatoire
  • Respecter la hiérarchie des titres (h1 → h2 → h3)
Quentin Fait
Cours HTML/CSS 2026

Introduction au CSS

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    margin: 20px;
}

h1 {
    color: #2c3e50;
}

p {
    line-height: 1.5;
}
Quentin Fait
Cours HTML/CSS 2026

Structure d'une règle CSS

sélecteur {
    propriété: valeur;
}
  • Sélecteur : cible les éléments HTML (body, h1, p)
  • Propriété : aspect à modifier (color, margin)
  • Valeur : ce qu'on applique (#2c3e50, 20px)
Quentin Fait
Cours HTML/CSS 2026

Mise en forme simple

Propriété Exemple Effet
color color: #333; Couleur du texte
background-color background-color: #e0e0e0; Couleur de fond
margin margin: 10px; Espaces externes
padding padding: 10px; Espaces internes
text-align text-align: center; Alignement du texte

Différence margin / padding :

  • Margin : espace à l'extérieur de la bordure
  • Padding : espace à l'intérieur de la bordure
Quentin Fait
Cours HTML/CSS 2026

Fin de la Partie 1

Prochaine étape : HTML approfondi

Questions ?

Quentin Fait
Cours HTML/CSS 2026

Partie 2

HTML approfondi

Structure sémantique, formulaires, tableaux et médias

Quentin Fait
Cours HTML/CSS 2026

1. Structure sémantique HTML5

Quentin Fait
Cours HTML/CSS 2026

Pourquoi la sémantique ?

HTML sémantique = utiliser les balises pour leur signification et non pour leur apparence.

Avantages

Bénéfice Explication
Accessibilité Les lecteurs d'écran comprennent mieux la structure
SEO Les moteurs de recherche identifient les contenus importants
Maintenance Code plus lisible et compréhensible

⚠️ À éviter : <div> et <span> partout sans signification

Quentin Fait
Cours HTML/CSS 2026

Les balises structurelles HTML5

<body>
    <header>
        <!-- En-tête de page ou de section -->
    </header>
    
    <nav>
        <!-- Navigation principale -->
    </nav>
    
    <main>
        <!-- Contenu principal unique de la page -->
        
        <article>
            <!-- Contenu autonome réutilisable -->
        </article>
        
        <section>
            <!-- Section thématique -->
        </section>
        
        <aside>
            <!-- Contenu complémentaire/sidebar -->
        </aside>
    </main>
    
    <footer>
        <!-- Pied de page -->
    </footer>
</body>
Quentin Fait
Cours HTML/CSS 2026

<header> — En-tête

Rôle : Contient l'en-tête d'une page ou d'une section

Contenu typique :

  • Logo du site
  • Titre principal
  • Slogan
  • Navigation principale
<header>
    <img src="logo.png" alt="Logo MonSite">
    <h1>Bienvenue sur MonSite</h1>
</header>
Quentin Fait
Cours HTML/CSS 2026

<nav> — Navigation

Rôle : Contient les liens de navigation principaux

<nav>
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

⚠️ À éviter : Utiliser <nav> pour tous les groupes de liens

Quentin Fait
Cours HTML/CSS 2026

<main> — Contenu principal

Rôle : Contient le contenu principal unique de la page

Règles importantes :

  • Un seul <main> par page
  • Exclut le contenu répété (header, nav, footer, sidebar)
<main>
    <h1>Titre de la page</h1>
    <p>Contenu principal unique à cette page...</p>
</main>

💡 Accessibilité : Les lecteurs d'écran peuvent sauter directement au <main>

Quentin Fait
Cours HTML/CSS 2026

<article> — Contenu autonome

Rôle : Contenu autonome et réutilisable (article de blog, commentaire, widget)

<article>
    <h2>Titre de l'article</h2>
    <p>Auteur : Jean Dupont</p>
    <p>Contenu de l'article...</p>
</article>

💡 Astuce : Si vous pouvez publier ce contenu ailleurs tel quel, c'est un <article>

Quentin Fait
Cours HTML/CSS 2026

<section> — Section thématique

Rôle : Regroupe un contenu thématique cohérent

<section>
    <h2>Nos services</h2>
    <p>Description des services...</p>
</section>

<section>
    <h2>Notre équipe</h2>
    <p>Présentation de l'équipe...</p>
</section>

⚠️ Différence avec <div> : <section> a une signification thématique

Quentin Fait
Cours HTML/CSS 2026

<aside> — Contenu complémentaire

Rôle : Contenu indirectement lié au contenu principal

Contenu typique :

  • Barre latérale (sidebar)
  • Encadrés, citations
  • Liens connexes
<aside>
    <h3>Articles similaires</h3>
    <ul>
        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>
    </ul>
</aside>
Quentin Fait
Cours HTML/CSS 2026

<footer> — Pied de page

Rôle : Contient le pied de page d'une page ou d'une section

Contenu typique :

  • Licence : Copyright, CC...
  • Liens légaux (mentions légales, CGU)
  • Contact, liens réseaux sociaux...
<footer>
    <p>&copy; 2026 MonSite. Tous droits réservés.</p>
    <nav>
        <a href="mentions-legales.html">Mentions légales</a>
        <a href="contact.html">Contact</a>
    </nav>
</footer>
Quentin Fait
Cours HTML/CSS 2026

Exemple de structure complète

<body>
    <header>
        <h1>Mon Blog</h1>
        <nav>
            <a href="index.html">Accueil</a>
            <a href="about.html">À propos</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Premier article</h2>
            <p>Contenu...</p>
        </article>
        
        <aside>
            <h3>À propos de l'auteur</h3>
            <p>Bio...</p>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2026</p>
    </footer>
</body>
Quentin Fait