Cours Complet HTML & CSS - Contenu Détaillé

Séance 1Les Bases du HTML

🎯 Objectifs

Comprendre ce qu'est le HTML et son rôle dans le web
Maîtriser la structure de base d'une page HTML
Créer sa première page web fonctionnelle

📖 Contenu Théorique

Qu'est-ce que le HTML ?

HTML = HyperText Markup Language
Langage de balisage pour structurer le contenu web
Créé en 1991 par Tim Berners-Lee
Version actuelle : HTML5 (standard depuis 2014)

Anatomie d'une balise HTML

<balise attribut="valeur">Contenu</balise>

Balise ouvrante : <balise>
Balise fermante : </balise>
Balises auto-fermantes : <img />, <br />
Attributs : informations supplémentaires sur l'élément

Structure de base d'une page HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
</head>
<body>
    <h1>Bonjour le monde !</h1>
    <p>Ceci est ma première page web.</p>
</body>
</html>

Explication ligne par ligne :

<!DOCTYPE html> : Déclare le type de document (HTML5)
<html lang="fr"> : Élément racine, lang définit la langue
<head> : Métadonnées de la page (non visibles)
<meta charset="UTF-8"> : Encodage des caractères
<meta name="viewport"...> : Responsive design
<title> : Titre dans l'onglet du navigateur
<body> : Contenu visible de la page

Commentaires HTML

💡 Exemple Complet

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Site Personnel</title>
    <!-- Les styles CSS seront ajoutés ici plus tard -->
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Je suis étudiant en génie informatique.</p>
</body>
</html>

💻 TP Pratique : Créer sa première page web

Consignes :

Créer un fichier index.html
Écrire la structure de base HTML5
Ajouter un titre "Ma Première Page"
Créer un titre principal (h1) et 3 paragraphes
Ajouter des commentaires pour organiser le code
Ouvrir le fichier dans un navigateur

Durée : 30 minutes

💡 Astuce : Dans VS Code, tapez ! puis Tab pour générer automatiquement la structure HTML de base.

Séance 2Contenu Textuel et Sémantique

🎯 Objectifs

Maîtriser les balises de titres et leur hiérarchie
Formater du texte de manière sémantique
Créer différents types de listes

📖 Les Titres (Headings)

<h1>Titre principal</h1>
<h2>Sous-titre niveau 2</h2>
<h3>Sous-titre niveau 3</h3>
<h4>Sous-titre niveau 4</h4>
<h5>Sous-titre niveau 5</h5>
<h6>Sous-titre niveau 6</h6>

⚠️ Important : Un seul <h1> par page pour le SEO. Respecter la hiérarchie (ne pas passer de h2 à h4).

📖 Paragraphes et Sauts de Ligne

<p>Ceci est un paragraphe. Le texte s'adapte automatiquement 
à la largeur de la fenêtre.</p>

<p>Premier vers d'un poème<br>
Deuxième vers du même paragraphe</p>

📖 Formatage du Texte

<strong>Texte important (gras)</strong>
<em>Texte avec emphase (italique)</em>
<mark>Texte surligné</mark>
<small>Texte en petit</small>
<del>Texte barré</del>
<ins>Texte inséré (souligné)</ins>
<sub>Indice</sub> H<sub>2</sub>O
<sup>Exposant</sup> E=mc<sup>2</sup>

💡 Différence importante :
- <strong> = importance sémantique (SEO)
- <b> = juste visuel (à éviter)
- <em> = emphase sémantique
- <i> = juste visuel (à éviter)

📖 Listes Non Ordonnées (ul)

<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ul>

📖 Listes Ordonnées (ol)

<ol>
    <li>Première étape</li>
    <li>Deuxième étape</li>
    <li>Troisième étape</li>
</ol>

<!-- Liste avec type spécifique -->
<ol type="A"> <!-- A, a, I, i, 1 -->
    <li>Élément A</li>
    <li>Élément B</li>
</ol>

📖 Listes de Définition (dl)

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

📖 Listes Imbriquées

<ul>
    <li>Langages Front-end
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Langages Back-end
        <ul>
            <li>PHP</li>
            <li>Python</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

💻 TP Pratique : Page CV Personnel

Créer un CV en HTML avec :

Un titre h1 avec votre nom
Section "À propos" (h2 + paragraphe)
Section "Formation" (h2 + liste ordonnée)
Section "Compétences" (h2 + liste non ordonnée)
Section "Langues" (h2 + liste de définition)
Utiliser strong, em, mark pour mettre en valeur

Durée : 45 minutes

Séance 3Liens et Navigation

🎯 Objectifs

Créer des liens hypertextes internes et externes
Utiliser les ancres pour la navigation interne
Construire un menu de navigation

📖 La Balise <a> (Anchor)

<a href="https://www.example.com">Cliquez ici</a>

📖 Types de Liens

1. Lien Externe (absolu)

<a href="https://www.google.com">Aller sur Google</a>

2. Lien Interne Relatif

<!-- Fichier dans le même dossier -->
<a href="contact.html">Contact</a>

<!-- Fichier dans un sous-dossier -->
<a href="pages/about.html">À propos</a>

<!-- Revenir au dossier parent -->
<a href="../index.html">Accueil</a>

3. Ancres (Liens vers une section)

<!-- Créer l'ancre -->
<h2 id="services">Nos Services</h2>

<!-- Lien vers l'ancre -->
<a href="#services">Voir les services</a>

<!-- Lien vers ancre sur autre page -->
<a href="page.html#section2">Aller à la section 2</a>

4. Lien Email

<a href="mailto:contact@example.com">Nous contacter</a>

<!-- Avec sujet prédéfini -->
<a href="mailto:contact@example.com?subject=Demande d'information">
    Envoyer un email
</a>

5. Lien Téléphone

<a href="tel:+1234567890">Appelez-nous</a>

📖 Attributs Importants

<!-- Ouvrir dans nouvel onglet -->
<a href="https://example.com" target="_blank">Lien externe</a>

<!-- Info-bulle au survol -->
<a href="page.html" title="En savoir plus">Cliquez ici</a>

<!-- Télécharger un fichier -->
<a href="document.pdf" download>Télécharger PDF</a>

<!-- Lien sans référent (sécurité) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Lien sécurisé
</a>

📖 Menu de Navigation

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

📖 Navigation avec Sous-menu

<nav>
    <ul>
        <li><a href="#">Produits</a>
            <ul>
                <li><a href="web.html">Développement Web</a></li>
                <li><a href="mobile.html">Applications Mobile</a></li>
                <li><a href="design.html">Design</a></li>
            </ul>
        </li>
    </ul>
</nav>

💡 Exemple : Navigation Complète

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Site</title>
</head>
<body>
    <header>
        <h1>Mon Site Web</h1>
        <nav>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="accueil">
        <h2>Bienvenue</h2>
        <p>Contenu de la section accueil</p>
    </section>

    <section id="services">
        <h2>Nos Services</h2>
        <p>Contenu des services</p>
    </section>

    <section id="contact">
        <h2>Contact</h2>
        <p>Email : <a href="mailto:contact@site.com">contact@site.com</a></p>
    </section>
</body>
</html>

💻 TP Pratique : Site Multi-pages avec Navigation

Créer un site avec 4 pages :

index.html : Page d'accueil avec menu de navigation
about.html : Page "À propos"
portfolio.html : Page avec 3 projets (utiliser ancres)
contact.html : Page contact avec liens email et téléphone

Chaque page doit avoir :

Menu de navigation identique
Page active mise en évidence (ajouter classe ou attribut)
Bouton "Retour en haut" sur les longues pages
Footer avec liens vers réseaux sociaux (même si fictifs)

Durée : 60 minutes

💡 Bonnes Pratiques :
- Toujours ajouter rel="noopener noreferrer" avec target="_blank"
- Texte du lien doit être explicite (éviter "cliquez ici")
- Tester tous les liens avant publication

Séance 4Images et Médias

🎯 Objectifs

Intégrer des images dans une page web
Maîtriser les formats d'images optimaux
Ajouter de l'audio et de la vidéo
Comprendre l'importance de l'attribut alt

📖 La Balise <img>

<img src="chemin/image.jpg" alt="Description de l'image">

Attributs essentiels :

src : chemin vers l'image (obligatoire)
alt : texte alternatif (obligatoire pour accessibilité)
width : largeur en pixels
height : hauteur en pixels
title : info-bulle au survol

📖 Chemins d'Images

<!-- Image dans le même dossier -->
<img src="photo.jpg" alt="Photo">

<!-- Image dans un sous-dossier -->
<img src="images/photo.jpg" alt="Photo">

<!-- Image dans dossier parent -->
<img src="../images/photo.jpg" alt="Photo">

<!-- Image en ligne (URL absolue) -->
<img src="https://example.com/image.jpg" alt="Photo">

📖 Formats d'Images

JPEG (.jpg) : Photos, images complexes (compression avec perte)
PNG (.png) : Images avec transparence, logos, icônes
GIF (.gif) : Animations simples (256 couleurs max)
SVG (.svg) : Graphiques vectoriels, logos (scalables)
WebP (.webp) : Format moderne, meilleure compression

📖 Figure et Figcaption

<figure>
    <img src="photo.jpg" alt="Paysage de montagne">
    <figcaption>Vue panoramique des Alpes en été</figcaption>
</figure>

📖 Images Responsives

<!-- Méthode simple avec CSS -->
<img src="photo.jpg" alt="Photo" style="max-width: 100%; height: auto;">

<!-- Balise picture pour différentes sources -->
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Image responsive">
</picture>

📖 Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Votre navigateur ne supporte pas l'élément audio.
</audio>

<!-- Attributs utiles -->
<audio controls autoplay loop muted>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

📖 Vidéo

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Votre navigateur ne supporte pas la vidéo.
</video>

<!-- Avec poster (image avant lecture) -->
<video width="640" height="360" controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

📖 YouTube/Vidéos Externes (iframe)

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

⚠️ Accessibilité : L'attribut alt est crucial pour :

Les lecteurs d'écran (personnes malvoyantes)
Le SEO (référencement)
L'affichage si l'image ne charge pas

Exemple : <img src="logo.png" alt="Logo de l'entreprise XYZ">

💻 TP Pratique : Galerie d'Images

Créer une page de galerie photos avec :

Un titre principal "Ma Galerie"
6 images organisées en 2 rangées de 3 (utiliser figure/figcaption)
Chaque image doit avoir une description pertinente
Ajouter une vidéo YouTube intégrée
Section audio avec 2 fichiers sons différents
Organiser le code avec des commentaires clairs

Bonus : Créer un logo en SVG simple

Durée : 45 minutes

💡 Optimisation :
- Compresser les images avant de les uploader (TinyPNG, Squoosh)
- Dimensionner les images à la taille réelle d'affichage
- Utiliser le lazy loading : <img loading="lazy" src="...">

Séance 5Tableaux

🎯 Objectifs

Créer des tableaux structurés
Utiliser thead, tbody, tfoot
Maîtriser colspan et rowspan
Rendre les tableaux accessibles

📖 Structure de Base

<table>
    <tr>  <!-- Table Row = ligne -->
        <th>En-tête 1</th>  <!-- Table Header = en-tête -->
        <th>En-tête 2</th>
    </tr>
    <tr>
        <td>Donnée 1</td>  <!-- Table Data = cellule -->
        <td>Donnée 2</td>
    </tr>
    <tr>
        <td>Donnée 3</td>
        <td>Donnée 4</td>
    </tr>
</table>

📖 Tableau Complet avec Sections

<table>
    <thead>  <!-- En-tête du tableau -->
        <tr>
            <th>Produit</th>
            <th>Prix</th>
            <th>Quantité</th>
        </tr>
    </thead>
    
    <tbody>  <!-- Corps du tableau -->
        <tr>
            <td>Ordinateur</td>
            <td>800€</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Souris</td>
            <td>25€</td>
            <td>5</td>
        </tr>
    </tbody>
    
    <tfoot>  <!-- Pied du tableau -->
        <tr>
            <td colspan="2">Total</td>
            <td>1725€</td>
        </tr>
    </tfoot>
</table>

📖 Fusion de Cellules

colspan : Fusionner des colonnes horizontalement

<table>
    <tr>
        <th colspan="3">Titre sur 3 colonnes</th>
    </tr>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
        <td>Cellule 3</td>
    </tr>
</table>

rowspan : Fusionner des lignes verticalement

<table>
    <tr>
        <td rowspan="2">Fusionne 2 lignes</td>
        <td>Cellule A</td>
    </tr>
    <tr>
        <td>Cellule B</td>
    </tr>
</table>

Combinaison colspan et rowspan

<table>
    <tr>
        <th rowspan="2">Jour</th>
        <th colspan="2">Horaires</th>
    </tr>
    <tr>
        <th>Matin</th>
        <th>Après-midi</th>
    </tr>
    <tr>
        <td>Lundi</td>
        <td>9h-12h</td>
        <td>14h-17h</td>
    </tr>
</table>

📖 Accessibilité des Tableaux

<table>
    <caption>Résultats des examens - Semestre 1</caption>
    <thead>
        <tr>
            <th scope="col">Étudiant</th>
            <th scope="col">Note</th>
            <th scope="col">Mention</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Jean Dupont</th>
            <td>15/20</td>
            <td>Bien</td>
        </tr>
    </tbody>
</table>

<caption> : Titre du tableau
scope="col" : En-tête de colonne
scope="row" : En-tête de ligne

📖 Attributs Utiles

<table border="1" cellpadding="10" cellspacing="0">
    <!-- border: bordure -->
    <!-- cellpadding: espacement interne -->
    <!-- cellspacing: espacement entre cellules -->
</table>

💡 Note : Ces attributs sont maintenant gérés par CSS, mais il est important de les connaître pour lire du code ancien.

💡 Exemple : Emploi du Temps

<table>
    <caption>Emploi du Temps - Semaine du 20 Janvier</caption>
    <thead>
        <tr>
            <th>Heure</th>
            <th>Lundi</th>
            <th>Mardi</th>
            <th>Mercredi</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">8h-10h</th>
            <td>HTML/CSS</td>
            <td>JavaScript</td>
            <td rowspan="2">Projet</td>
        </tr>
        <tr>
            <th scope="row">10h-12h</th>
            <td colspan="2">Algorithmique</td>
        </tr>
    </tbody>
</table>

💻 TP Pratique : Tableau de Données Complexe

Créer un tableau HTML représentant :

Un emploi du temps hebdomadaire (5 jours × 4 créneaux horaires)
Utiliser caption pour le titre
Sections thead, tbody, tfoot
Au moins 2 utilisations de colspan
Au moins 2 utilisations de rowspan
Attributs scope pour l'accessibilité
Ajouter un tableau de notes avec calcul de moyenne dans tfoot

Durée : 50 minutes

⚠️ Attention : Les tableaux sont pour les données tabulaires uniquement, PAS pour la mise en page du site (utiliser CSS Grid/Flexbox pour ça).

Séance 6Formulaires (Partie 1)

🎯 Objectifs

Comprendre la structure d'un formulaire
Maîtriser les différents types d'input
Associer labels et champs correctement
Créer des boutons fonctionnels

📖 Structure de Base d'un Formulaire

<form action="traitement.php" method="post">
    <!-- Champs du formulaire ici -->
</form>

Attributs de <form> :

action : URL où envoyer les données
method : GET (URL visible) ou POST (données cachées)
enctype : Type d'encodage (pour upload de fichiers)

📖 Champs Input Texte

<!-- Texte simple -->
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Votre nom">

<!-- Email avec validation -->
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>

<!-- Mot de passe -->
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password" minlength="8">

<!-- Numéro de téléphone -->
<label for="tel">Téléphone :</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{10}">

📖 Types d'Input Numériques

<!-- Nombre -->
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="18" max="100" step="1">

<!-- Range (curseur) -->
<label for="volume">Volume :</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

📖 Types d'Input Date et Temps

<!-- Date -->
<label for="birthday">Date de naissance :</label>
<input type="date" id="birthday" name="birthday">

<!-- Date et heure -->
<label for="rdv">Rendez-vous :</label>
<input type="datetime-local" id="rdv" name="rdv">

<!-- Heure -->
<label for="heure">Heure :</label>
<input type="time" id="heure" name="heure">

<!-- Mois -->
<label for="mois">Mois :</label>
<input type="month" id="mois" name="mois">

<!-- Semaine -->
<label for="semaine">Semaine :</label>
<input type="week" id="semaine" name="semaine">

📖 Autres Types d'Input

<!-- URL -->
<label for="site">Site web :</label>
<input type="url" id="site" name="site" placeholder="https://...">

<!-- Recherche -->
<label for="search">Rechercher :</label>
<input type="search" id="search" name="search">

<!-- Couleur -->
<label for="couleur">Couleur préférée :</label>
<input type="color" id="couleur" name="couleur" value="#ff0000">

📖 Labels et Association

<!-- Méthode 1 : avec for et id (recommandée) -->
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">

<!-- Méthode 2 : label englobant -->
<label>
    Nom :
    <input type="text" name="nom">
</label>

⚠️ Important : Toujours associer un label à chaque input pour l'accessibilité. L'attribut for du label doit correspondre à l'id de l'input.

📖 Boutons

<!-- Bouton de soumission -->
<button type="submit">Envoyer</button>
<input type="submit" value="Envoyer">

<!-- Bouton de réinitialisation -->
<button type="reset">Réinitialiser</button>

<!-- Bouton simple (JavaScript) -->
<button type="button">Cliquez-moi</button>

📖 Attributs Importants des Inputs

<input type="text" 
    name="username"          <!-- Nom pour traitement serveur -->
    id="username"            <!-- ID unique pour label -->
    value="Valeur par défaut" <!-- Valeur pré-remplie -->
    placeholder="Texte d'aide" <!-- Indication dans le champ -->
    required                 <!-- Champ obligatoire -->
    readonly                 <!-- Lecture seule -->
    disabled                 <!-- Désactivé -->
    maxlength="50"           <!-- Longueur max -->
    minlength="3"            <!-- Longueur min -->
    pattern="[A-Za-z]{3,}"   <!-- Expression régulière -->
    autocomplete="on"        <!-- Autocomplétion -->
>

💡 Exemple : Formulaire d'Inscription

<form action="inscription.php" method="post">
    <h2>Inscription</h2>
    
    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" name="prenom" required>
    
    <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" required>
    
    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" 
           minlength="8" required>
    
    <label for="birthday">Date de naissance :</label>
    <input type="date" id="birthday" name="birthday" required>
    
    <button type="submit">S'inscrire</button>
</form>

💻 TP Pratique : Formulaire d'Inscription

Créer un formulaire d'inscription complet avec :

Champs : Prénom, Nom, Email, Mot de passe, Confirmation mot de passe
Date de naissance avec validation (18 ans minimum)
Numéro de téléphone avec pattern
Site web personnel (optionnel)
Age avec input number (min 18, max 100)
Tous les labels correctement associés
Validation HTML5 (required, pattern, etc.)
Boutons Submit et Reset
Organiser avec des sections logiques

Durée : 45 minutes

💡 Bonnes Pratiques :
- Utiliser autocomplete pour améliorer l'UX
- Toujours valider côté serveur aussi (la validation HTML peut être contournée)
- Placeholder ≠ Label (toujours avoir un label visible)

Séance 7Formulaires (Partie 2)

🎯 Objectifs

Maîtriser <textarea>, <select> et <option>
Utiliser les cases à cocher (checkbox) et les boutons radio
Gérer l'upload de fichiers avec <input type="file">
Implémenter la validation HTML5 sur ces champs

📖 Textarea (Zone de texte multiligne)

<label for="message">Message :</label>
<textarea id="message" name="message" rows="4" cols="50"
          placeholder="Écrivez votre message ici..."></textarea>

<textarea> : zone de texte sur plusieurs lignes
rows : nombre de lignes visibles
cols : largeur approximative (en caractères)
On peut aussi contrôler la taille avec le CSS : width, height

📖 Liste déroulante : <select> et <option>

<label for="pays">Pays :</label>
<select id="pays" name="pays">
    <option value="">-- Sélectionnez un pays --</option>
    <option value="td">Tchad</option>
    <option value="cm">Cameroun</option>
    <option value="sn">Sénégal</option>
    <option value="fr">France</option>
</select>

Liste déroulante avec sélection multiple :

<label for="langages">Langages préférés :</label>
<select id="langages" name="langages[]" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="python">Python</option>
</select>

multiple : permet de sélectionner plusieurs options (Ctrl + clic)
size : nombre d’options visibles
name="langages[]" : côté serveur, on récupère un tableau de valeurs

📖 Cases à cocher (Checkbox)

<p>Centres d'intérêt :</p>

<label>
    <input type="checkbox" name="interets" value="informatique">
    Informatique
</label>

<label>
    <input type="checkbox" name="interets" value="sport">
    Sport
</label>

<label>
    <input type="checkbox" name="interets" value="lecture">
    Lecture
</label>

type="checkbox" : case à cocher
Permet de sélectionner 0, 1 ou plusieurs options
Plusieurs cases peuvent partager le même name

📖 Boutons radio (Radio buttons)

<p>Genre :</p>

<label>
    <input type="radio" name="genre" value="homme">
    Homme
</label>

<label>
    <input type="radio" name="genre" value="femme">
    Femme
</label>

<label>
    <input type="radio" name="genre" value="autre">
    Autre
</label>

Tous les boutons radio d’un même groupe ont le même name
On ne peut sélectionner qu’une seule valeur par groupe
Différence : checkbox = multi-choix, radio = un seul choix

📖 Upload de fichiers

<form action="upload.php" method="post" enctype="multipart/form-data">
    <label for="cv">Votre CV (PDF) :</label>
    <input type="file" id="cv" name="cv" accept=".pdf">

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

type="file" : permet de sélectionner un fichier
enctype="multipart/form-data" : obligatoire pour l’upload
accept=".pdf,.docx,image/*" : filtre les types de fichiers

📖 Validation HTML5 (complément)

<input type="text" 
       name="username" 
       required
       minlength="3"
       maxlength="20"
       pattern="[A-Za-z0-9_]+"
       title="3 à 20 caractères, lettres, chiffres ou underscore">

required : champ obligatoire
minlength / maxlength : longueur min/max
pattern : expression régulière (regex)
title : message d’aide affiché lors de la validation

💡 Exemple : Formulaire de Contact Complet

<form action="contact.php" method="post">
    <h2>Formulaire de Contact</h2>

    <label for="nom">Nom complet :</label>
    <input type="text" id="nom" name="nom" required>

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

    <label for="sujet">Sujet :</label>
    <input type="text" id="sujet" name="sujet" required>

    <label for="type">Type de demande :</label>
    <select id="type" name="type" required>
        <option value="">-- Sélectionnez --</option>
        <option value="info">Informations</option>
        <option value="support">Support technique</option>
        <option value="autre">Autre</option>
    </select>

    <p>Souhaitez-vous recevoir une copie par email ?</p>
    <label>
        <input type="checkbox" name="copie" value="oui">
        Oui, envoyer une copie
    </label>

    <label for="message">Message :</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <label for="fichier">Pièce jointe (optionnel) :</label>
    <input type="file" id="fichier" name="fichier" accept=".pdf,.jpg,.png">

    <button type="submit">Envoyer</button>
    <button type="reset">Réinitialiser</button>
</form>

💻 TP Pratique : Formulaire de Demande d’Inscription

Créer un formulaire complet contenant :

Informations personnelles : Prénom, Nom, Email, Téléphone
Genre (boutons radio)
Formation demandée (select avec au moins 4 options)
Centres d’intérêt (checkbox multiples)
Champ « Motivations » avec <textarea>
Upload de fichier pour le CV (PDF uniquement)
Validation HTML5 sur les champs (required, pattern, min/max...)
Boutons « Envoyer » et « Réinitialiser »

Durée : 45 minutes

💡 Bonnes Pratiques :
- Toujours associer un <label> à chaque <input>
- Ne pas utiliser uniquement le placeholder : le label doit rester visible
- Grouper les champs par sections logiques (informations perso, contact, etc.)
- Utiliser la validation HTML5, mais toujours valider aussi côté serveur
- Tester le formulaire dans plusieurs navigateurs

Séance 8HTML Sémantique et Structure

🎯 Objectifs

Comprendre l’intérêt du HTML sémantique
Utiliser les balises modernes : <header>, <main>, <section>, <article>, <aside>, <footer>
Construire la structure type d’une page web moderne
Préparer le terrain pour le CSS et le responsive design

📖 Qu’est-ce que le HTML Sémantique ?

Utilisation de balises qui ont un sens pour le contenu
Aide les navigateurs, moteurs de recherche et lecteurs d’écran
Améliore le SEO, l’accessibilité et la maintenabilité du code

📖 Principales Balises Sémantiques

<header> : en-tête de page ou de section (logo, menu, titre)
<nav> : zone de navigation (menu principal, liens importants)
<main> : contenu principal unique de la page
<section> : grande section thématique du document
<article> : contenu autonome (article de blog, carte, post)
<aside> : contenu secondaire (barre latérale, pub, infos complémentaires)
<footer> : pied de page (copyright, liens légaux, contacts)

📖 Exemple : Structure Globale d’une Page

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site d'exemple</title>
</head>
<body>
    <header>
        <h1>Mon Site Web</h1>
        <nav>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="accueil">
            <h2>Bienvenue</h2>
            <p>Texte de présentation du site.</p>
        </section>

        <section id="blog">
            <h2>Derniers Articles</h2>

            <article>
                <h3>Article 1</h3>
                <p>Contenu du premier article...</p>
            </article>

            <article>
                <h3>Article 2</h3>
                <p>Contenu du deuxième article...</p>
            </article>
        </section>

        <aside>
            <h2>Informations</h2>
            <p>Lien vers les réseaux sociaux, newsletter, etc.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 - Mon Site Web</p>
    </footer>
</body>
</html>

📖 Différence entre <div> et Balises Sémantiques

<div> : conteneur générique, sans signification particulière
Balises sémantiques : décrivent le rôle du contenu
On peut toujours utiliser des <div> à l’intérieur des sections sémantiques pour la mise en page

⚠️ Important :
- Toujours utiliser au moins : <header>, <main>, <footer> dans une page moderne.
- Éviter les pages avec uniquement des <div> (code difficile à lire et à maintenir).

📖 Exemple : Page "Portfolio" Sémantique

<main>
    <section id="presentation">
        <h2>À propos de moi</h2>
        <p>Étudiant en Génie Informatique, passionné par le web.</p>
    </section>

    <section id="projets">
        <h2>Mes Projets</h2>

        <article>
            <h3>Projet 1 : Site de préinscription</h3>
            <p>Description du projet...</p>
        </article>

        <article>
            <h3>Projet 2 : Application de gestion</h3>
            <p>Description du projet...</p>
        </article>
    </section>
</main>

💻 TP Pratique : Restructurer une Page avec HTML5 Sémantique

Consignes :

Prendre une ancienne page HTML (faite avec beaucoup de <div>) ou créer une page simple
Identifier les zones : en-tête, menu, contenu principal, sections, pied de page
Remplacer les <div> génériques par :
- <header> pour le haut de page
- <nav> pour le menu
- <main> pour le contenu principal
- <section> pour les grandes parties
- <article> pour chaque bloc de contenu autonome
- <aside> pour les informations secondaires
- <footer> pour le bas de page
Ajouter des id pertinents pour permettre la navigation interne (ancres)
Vérifier la lisibilité du code (indentation, commentaires, noms de sections)

Durée : 45 minutes

💡 Astuce :
- Pensez votre page comme un document : titre, chapitres, sous-chapitres.
- Utilisez les balises sémantiques pour refléter cette structure dans le code.
- Cela vous aidera énormément quand vous attaquerez le CSS (layouts, responsive, etc.).

Séance 9Introduction au CSS

🎯 Objectifs

Comprendre ce qu'est le CSS et son rôle
Découvrir les trois méthodes d’intégration du CSS
Maîtriser la syntaxe de base : sélecteurs, propriétés, valeurs
Savoir écrire et commenter ses premières règles CSS

📖 Qu’est-ce que le CSS ?

CSS = Cascading Style Sheets (Feuilles de style en cascade)
Langage utilisé pour styliser les pages HTML (couleurs, polices, positions…)
Sépare le contenu (HTML) de la présentation (CSS)
Permet de réutiliser les mêmes styles sur plusieurs pages

📖 Rôle du CSS dans le Web

Rendre les sites plus lisibles et plus attractifs
Adapter l’affichage sur différents écrans (ordinateur, mobile, tablette)
Faciliter la maintenance : changer un style dans un fichier = impact sur tout le site

📖 Les Trois Méthodes d’Intégration du CSS

1. CSS en ligne (inline)

<h1 style="color: blue; font-size: 24px;">
    Titre en bleu
</h1>

Utilise l’attribut style directement sur la balise HTML
À éviter pour des projets sérieux (code difficile à maintenir)

2. CSS interne (dans <style>)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>CSS Interne</title>
    <style>
        h1 {
            color: darkred;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Titre stylisé avec CSS interne</h1>
</body>
</html>

Les styles sont écrits dans la balise <style> du <head>
Utile pour de petites pages ou des tests rapides

3. CSS externe (fichier .css séparé)

<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>CSS Externe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Titre avec CSS externe</h1>
    <p>Paragraphe stylisé.</p>
</body>
</html>

/* style.css */
h1 {
    color: #2c3e50;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

Méthode recommandée pour les vrais projets
Permet de partager la même feuille de style entre plusieurs pages
Meilleure organisation et maintenabilité

📖 Syntaxe de Base d’une Règle CSS

sélecteur {
    propriété: valeur;
    autre-propriété: autre-valeur;
}

Exemple :

p {
    color: green;
    font-size: 18px;
}

Sélecteur : indique sur quel(s) élément(s) HTML la règle s’applique (ici p)
Propriété : ce qu’on veut modifier (couleur, taille de police…)
Valeur : nouvelle valeur appliquée
Chaque ligne se termine par un ;

📖 Commentaires en CSS

/* Ceci est un commentaire en CSS */
h1 {
    color: blue;  /* Commentaire sur la même ligne */
}

Les commentaires ne sont pas interprétés par le navigateur
Servent à documenter le code, expliquer des choix, séparer des sections

⚠️ Important :
- Toujours séparer HTML (structure) et CSS (style) dans des fichiers différents sur les vrais projets.
- Éviter autant que possible le CSS en ligne.
- Toujours finir les déclarations par ; pour éviter des erreurs.

💡 Exemple Complet : Première Page avec CSS Externe

Fichier : index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur mon site</h1>
        <p>Étudiant en Génie Informatique.</p>
    </header>

    <main>
        <h2>Section principale</h2>
        <p>Ceci est un paragraphe stylisé avec CSS.</p>
    </main>
</body>
</html>

Fichier : style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f6f8;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #2c3e50;
    text-align: center;
}

h2 {
    color: #34495e;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

💻 TP Pratique : Styliser sa Première Page

Consignes :

Créer un fichier index.html avec une structure HTML5 correcte.
Créer un fichier style.css dans le même dossier.
Lier le fichier CSS dans le <head> avec <link rel="stylesheet" href="style.css">.
Dans style.css, définir :
- Une couleur de fond pour la page (background-color)
- Une police globale pour le texte (font-family)
- Un style spécial pour les titres (couleur, alignement)
- Un style pour les paragraphes (taille, interligne)
Tester la page dans le navigateur et modifier les valeurs pour voir l’effet.

Durée : 30–40 minutes

💡 Astuce :
- Utilise l’extension Live Server dans VS Code pour rafraîchir automatiquement la page.
- Change souvent une valeur (couleur, taille…) pour comprendre visuellement l’effet du CSS.
- Garde ton CSS bien indenté et commenté pour ne pas te perdre quand le fichier va grandir.

Séance 10Sélecteurs CSS

🎯 Objectifs

Comprendre les sélecteurs de base : élément, classe, id
Utiliser les sélecteurs combinés : descendant, enfant, adjacent…
Découvrir les pseudo-classes : :hover, :focus, :first-child, :nth-child()
Utiliser les pseudo-éléments : ::before, ::after, ::first-letter
Apprendre à cibler précisément les éléments HTML pour mieux styliser

📖 Rappel : Structure d’une règle CSS

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

📖 Sélecteurs de Base

1. Sélecteur par élément (type selector)

p {
    color: blue;
}

h1 {
    text-align: center;
}

S’applique à toutes les balises du même type (p, h1, ul…)
Pratique pour définir un style global

2. Sélecteur par classe (class selector)

<p class="important">Texte important</p>
<p class="important">Autre texte important</p>

.important {
    font-weight: bold;
    color: red;
}

On utilise . suivi du nom de la classe : .important
Peut être utilisé sur plusieurs éléments
Permet de réutiliser le même style partout

3. Sélecteur par id (id selector)

<h1 id="titre-principal">Bienvenue</h1>

#titre-principal {
    font-size: 32px;
    text-transform: uppercase;
}

On utilise # suivi de l’id : #titre-principal
L’id doit être unique dans la page
À réserver pour des éléments vraiment uniques (header principal, section spéciale…)

4. Combiner type + classe

p.important {
    color: darkred;
}

S’applique uniquement aux <p> qui ont la classe important

📖 Sélecteurs Combinés (Combinators)

1. Descendant : espace

article p {
    color: #333;
}

Sélectionne tous les <p> qui sont à l’intérieur de <article> (à n’importe quel niveau)

2. Enfant direct : >

ul > li {
    list-style-type: square;
}

Sélectionne uniquement les <li> qui sont des enfants directs de <ul>

3. Frère adjacent : +

h2 + p {
    margin-top: 0;
}

Sélectionne le <p> qui vient juste après un <h2>

4. Frères généraux : ~

h2 ~ p {
    color: gray;
}

Sélectionne tous les <p> qui se trouvent après un <h2> au même niveau

📖 Pseudo-classes

Une pseudo-classe cible un état particulier d’un élément.

1. :hover (au survol)

a {
    color: blue;
}

a:hover {
    color: red;
    text-decoration: underline;
}

:hover : style appliqué quand la souris survole l’élément

2. :focus (élément focalisé)

input:focus {
    outline: 2px solid #3498db;
    background-color: #ecf7ff;
}

:focus : quand le champ est actif (cliqué ou sélectionné au clavier)

3. :first-child

ul li:first-child {
    font-weight: bold;
}

S’applique au premier enfant <li> de chaque <ul>

4. :nth-child()

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #ffffff;
}

odd = lignes impaires, even = lignes paires
On peut aussi utiliser une formule : nth-child(3), nth-child(2n)…

📖 Pseudo-éléments

Un pseudo-élément permet de styliser une partie d’un élément.

1. ::first-letter

p::first-letter {
    font-size: 200%;
    font-weight: bold;
}

2. ::before et ::after

h2::before {
    content: "★ ";
    color: gold;
}

h2::after {
    content: " ★";
    color: gold;
}

content est obligatoire avec ::before et ::after
Très utilisés pour ajouter des icônes, décorations, etc.

⚠️ Important :
- Utiliser les class pour réutiliser les styles sur plusieurs éléments.
- Utiliser les id pour des éléments uniques (ne pas en abuser).
- Préférer les sélecteurs simples et lisibles plutôt que des combinaisons trop complexes.

💡 Exemple : Carte de Profil Stylisée avec Sélecteurs

HTML :

<div class="carte-profil">
    <h2>Mahamat Ali</h2>
    <p class="role">Étudiant en Génie Informatique</p>
    <ul class="infos">
        <li>Ville : Abéché</li>
        <li>Spécialité : Développement Web</li>
        <li>Passion : Open Source</li>
    </ul>
    <a href="#" class="btn">Voir le portfolio</a>
</div>

CSS :

.carte-profil {
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 8px;
    max-width: 300px;
    background-color: #ffffff;
}

.carte-profil h2 {
    margin-top: 0;
}

.carte-profil .role {
    color: #555;
    font-style: italic;
}

.carte-profil .infos li:first-child {
    font-weight: bold;
}

.carte-profil .infos li:nth-child(odd) {
    background-color: #f7f7f7;
}

.carte-profil .btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    text-decoration: none;
    background-color: #3498db;
    color: #fff;
    border-radius: 4px;
}

.carte-profil .btn:hover {
    background-color: #2980b9;
}

💻 TP Pratique : Jeu de Sélecteurs CSS

Consignes :

Créer une page HTML avec :
- Un titre principal <h1>
- Deux sections avec des <h2> et plusieurs <p>
- Deux listes (<ul>) avec au moins 4 éléments chacune
- Quelques liens <a> (internes et externes)
Dans le fichier CSS :
- Appliquer un style global aux paragraphes (p)
- Créer une classe .important et l’appliquer à certains paragraphes
- Styliser un élément unique avec un id (par ex. #intro)
- Utiliser un sélecteur descendant (par ex. section p)
- Styliser le premier élément de chaque liste avec :first-child
- Alterner la couleur de fond des éléments de liste avec :nth-child(odd) et :nth-child(even)
- Changer la couleur des liens au survol avec :hover

Durée : 45 minutes

💡 Astuce :
- Utilise l’inspecteur (DevTools) du navigateur pour voir quels sélecteurs s’appliquent sur un élément.
- Commence par des sélecteurs simples, puis complexifie seulement si nécessaire.
- Donne des noms de classes clairs : .btn-primary, .carte-profil, .texte-important, etc.

Séance 11Propriétés de Texte et Police

🎯 Objectifs

Maîtriser les propriétés de police : font-family, font-size, font-weight, font-style
Utiliser les Google Fonts et polices personnalisées
Contrôler l’apparence du texte : color, text-align, text-decoration, line-height, letter-spacing
Créer des effets typographiques avec text-shadow

📖 Propriétés de Police (font-*)

1. font-family (famille de police)

body {
    font-family: Arial, Helvetica, sans-serif;
}

.titre-special {
    font-family: "Times New Roman", serif;
}

On indique une liste de polices : la première disponible sera utilisée
Toujours finir par une famille générique : serif, sans-serif, monospace

2. font-size (taille de police)

p {
    font-size: 16px;
}

h1 {
    font-size: 32px;
}

Unités courantes : px, em, rem, %
1em = taille de la police de l’élément parent
1rem = taille de la police de la racine (html)

3. font-weight (graisse / épaisseur)

.gras {
    font-weight: bold;     /* ou 700 */
}

.fin {
    font-weight: 300;
}

Valeurs possibles : normal, bold, ou nombres (100 → 900)

4. font-style (style de police)

.italique {
    font-style: italic;
}

5. Raccourci font

p {
    font: italic 16px/1.5 "Roboto", Arial, sans-serif;
}

Syntaxe : font: font-style font-size/line-height font-family;

📖 Utiliser Google Fonts

1️⃣ Aller sur Google Fonts, choisir une police (ex : Poppins), copier le lien :

<!-- Dans <head> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap">

2️⃣ Utiliser dans le CSS :

body {
    font-family: "Poppins", sans-serif;
}

📖 Propriétés de Texte

1. color (couleur du texte)

p {
    color: #333333;
}

2. text-align (alignement)

h1 {
    text-align: center;   /* left, right, center, justify */
}

3. text-decoration

a {
    text-decoration: none;
}

.ligne {
    text-decoration: underline;
}

Valeurs : none, underline, line-through, etc.

4. line-height (interligne)

p {
    line-height: 1.6;
}

Améliore la lisibilité des paragraphes

5. letter-spacing (espacement des lettres)

.titre-large {
    letter-spacing: 2px;
}

6. text-transform (transformation du texte)

.majuscule {
    text-transform: uppercase;   /* lowercase, capitalize */
}

📖 Ombres de Texte (text-shadow)

.titre-ombre {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Syntaxe : text-shadow: décalage-x décalage-y flou couleur;

⚠️ Important :
- Ne pas utiliser trop de polices différentes sur un même site (2–3 max).
- Assurer un bon contraste entre la couleur du texte et le fond pour garder la lisibilité.
- Utiliser des tailles cohérentes pour les titres et paragraphes.

💡 Exemple : Section Typographique

HTML :

<section class="presentation">
    <h1>Bienvenue sur mon Portfolio</h1>
    <p class="sous-titre">
        Étudiant en Génie Informatique, passionné par le Web.
    </p>
    <p>
        Je développe des applications modernes avec une attention particulière
        à l'ergonomie, la performance et la qualité du code.
    </p>
</section>

CSS :

body {
    font-family: "Poppins", Arial, sans-serif;
    color: #2c3e50;
}

.presentation h1 {
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.presentation .sous-titre {
    font-size: 18px;
    font-style: italic;
    text-align: center;
    color: #7f8c8d;
}

.presentation p {
    line-height: 1.7;
}

💻 TP Pratique : Typographie de Page de Présentation

Consignes :

Créer une page « Présentation » avec :
- Un titre principal <h1>
- Un sous-titre <h2> ou paragraphe de description
- Au moins 2 paragraphes de texte
Intégrer une police Google Fonts (ex : Poppins, Roboto, etc.).
Définir une typographie cohérente :
- Taille différente pour titres et paragraphes
- Interligne confortable avec line-height
- Une classe pour un texte important (.important)
Ajouter un effet avec text-shadow sur le titre principal.

Durée : 45 minutes

💡 Astuce :
- Compare la page avec et sans line-height pour voir la différence de confort de lecture.
- Teste différentes polices Google Fonts et choisis-en une qui correspond au thème de ton site (sérieux, fun, tech…).
- N’oublie pas de vérifier la lisibilité sur mobile.

Séance 12Couleurs et Arrière-plans

🎯 Objectifs

Comprendre les différents formats de couleur : noms, HEX, RGB, RGBA, HSL
Utiliser background-color et background-image
Contrôler la position, la taille et la répétition des images d’arrière-plan
Créer des dégradés avec linear-gradient() et radial-gradient()

📖 Formats de Couleurs

1. Noms de couleurs

h1 {
    color: red;       /* blue, green, orange, purple... */
}

2. Hexadécimal (HEX)

p {
    color: #3498db;   /* #RRGGBB */
}

Chaque paire représente le Rouge, Vert, Bleu (00 → FF)

3. RGB

.texte {
    color: rgb(52, 152, 219);   /* rgb(r, g, b) entre 0 et 255 */
}

4. RGBA (avec transparence)

.fond-transparent {
    background-color: rgba(0, 0, 0, 0.5);  /* 0 = transparent, 1 = opaque */
}

5. HSL (Teinte, Saturation, Luminosité)

.titre {
    color: hsl(200, 70%, 50%);
}

📖 Arrière-plan uni (background-color)

body {
    background-color: #f5f5f5;
}

.entete {
    background-color: #2c3e50;
    color: white;
}

📖 Image d’Arrière-plan (background-image)

.hero {
    background-image: url("images/banniere.jpg");
}

Contrôler la taille : background-size

.hero {
    background-image: url("images/banniere.jpg");
    background-size: cover;   /* cover, contain ou valeurs (100px, 50%) */
}

cover : couvre toute la zone, l’image peut être coupée
contain : l’image est entièrement visible (peut laisser des espaces)

Contrôler la répétition : background-repeat

.motif {
    background-image: url("images/motif.png");
    background-repeat: repeat;        /* no-repeat, repeat-x, repeat-y */
}

Contrôler la position : background-position

.hero {
    background-image: url("images/banniere.jpg");
    background-position: center center;  /* left, right, top, bottom */
}

Propriété raccourcie : background

.hero {
    background: url("images/banniere.jpg") no-repeat center center / cover;
}

📖 Dégradés (Gradients)

1. linear-gradient()

.banniere {
    background: linear-gradient(90deg, #2980b9, #8e44ad);
}

Création d’un dégradé entre plusieurs couleurs
Angle (90deg, 180deg…) ou mots-clés (to right, to bottom…)

2. radial-gradient()

.cercle {
    background: radial-gradient(circle, #ffffff, #bdc3c7);
}

📖 Arrière-plan Fixe (Effet Parallaxe simple)

.section-fond {
    background-image: url("images/fond.jpg");
    background-size: cover;
    background-attachment: fixed;   /* l’image reste fixe au scroll */
}

⚠️ Important :
- Les grandes images d’arrière-plan peuvent ralentir le site : toujours les compresser.
- Vérifier le contraste entre le texte et le fond (accessibilité).
- Éviter les fonds trop chargés derrière de longs textes.

💡 Exemple : Section « Hero » avec Dégradé

HTML :

<section class="hero-section">
    <h1>Numérisation d'Abéché</h1>
    <p>Connectons notre ville grâce au numérique.</p>
    <a href="#projets" class="btn-hero">Découvrir les projets</a>
</section>

CSS :

.hero-section {
    padding: 80px 20px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, #2980b9, #8e44ad);
}

.hero-section h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

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

.btn-hero {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.2);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.btn-hero:hover {
    background-color: rgba(0,0,0,0.4);
}

💻 TP Pratique : Page avec Thème de Couleurs

Consignes :

Créer une page avec :
- Une section « hero » en haut
- Une section de contenu avec texte
- Un footer
Définir une palette de couleurs cohérente (3–4 couleurs max).
Appliquer :
- Un dégradé de fond sur la section hero
- Une couleur de fond différente pour la section de contenu
- Un fond sombre pour le footer avec texte clair
Tester différents formats de couleur : HEX, RGB, HSL.

Durée : 45 minutes

💡 Astuce :
- Utilise des sites comme « Coolors » ou « Color Hunt » pour choisir une bonne palette de couleurs.
- Vérifie le contraste avec un outil de contraste (pour respecter l’accessibilité).
- Garde les fonds simples derrière les textes pour ne pas fatiguer les yeux.

Séance 13Le Modèle de Boîte (Box Model)

🎯 Objectifs

Comprendre la structure d’une boîte CSS : contenu, padding, border, margin
Maîtriser les propriétés width, height, padding, border, margin
Comprendre la différence entre box-sizing: content-box et box-sizing: border-box
Voir la fusion de marges (margin collapsing) et les marges négatives

📖 Le Modèle de Boîte

En CSS, tout élément est une boîte composée de :

Content : le contenu (texte, image…)
Padding : espace entre le contenu et la bordure
Border : bordure autour du padding
Margin : espace extérieur, entre la bordure et les autres éléments

📖 width et height

.boite {
    width: 300px;
    height: 150px;
}

Par défaut, ces valeurs s’appliquent au content uniquement (sans padding, border…)

📖 Padding (espacement interne)

.boite {
    padding: 20px;              /* tous les côtés */
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
}

Raccourcis :

padding: 10px 20px;           /* haut/bas | gauche/droite */
padding: 10px 20px 15px 5px; /* haut | droite | bas | gauche */

📖 Margin (espacement externe)

.boite {
    margin: 20px;
}

Centrer horizontalement un bloc :

.boite {
    width: 400px;
    margin: 0 auto;  /* haut/bas = 0, gauche/droite = auto */
}

📖 Bordure (border)

.boite {
    border: 2px solid #2c3e50;  /* width style color */
}

📖 box-sizing

1. content-box (valeur par défaut)

.boite {
    box-sizing: content-box;
}

width = seulement le contenu (content)
La taille totale = width + padding + border

2. border-box

.boite {
    box-sizing: border-box;
}

width inclut le contenu + padding + border
Plus facile pour construire des layouts

Bonne pratique globale :

*,
*::before,
*::after {
    box-sizing: border-box;
}

📖 Marges négatives et fusion des marges

Marges négatives :

.boite {
    margin-top: -10px;  /* remonte l’élément vers le haut */
}

Fusion des marges (margin collapsing) :

Deux marges verticales adjacentes peuvent se fusionner en une seule
Exemple : marge bas d’un élément + marge haut du suivant → on garde la plus grande

⚠️ Important :
- Toujours penser en termes de boîte : contenu + padding + bordure + marge.
- Utiliser box-sizing: border-box pour simplifier le calcul des largeurs.
- Éviter d’utiliser trop de marges négatives au début (peut rendre le layout difficile à comprendre).

💡 Exemple : Carte avec Box Model

HTML :

<div class="carte">
    <h2>Titre de la carte</h2>
    <p>
        Ceci est une petite carte de contenu avec un padding,
        une bordure et une marge externe.
    </p>
</div>

CSS :

*,
*::before,
*::after {
    box-sizing: border-box;
}

.carte {
    width: 300px;
    padding: 20px;
    margin: 20px auto;
    border: 1px solid #ccc;
    background-color: #ffffff;
}

💻 TP Pratique : Visualiser le Box Model

Consignes :

Créer plusieurs <div> avec des classes différentes (.box1, .box2, .box3).
Pour chaque boîte, varier :
- width / height
- padding
- border
- margin
Tester la différence entre box-sizing: content-box et border-box.
Utiliser l’inspecteur du navigateur pour voir le modèle de boîte (onglet « Layout » ou « Box Model »).

Durée : 40 minutes

💡 Astuce :
- Active les bordures de debug (par ex. * { outline: 1px solid red; }) pour bien voir les boîtes.
- Utilise les DevTools pour vérifier les marges, padding, etc. sur chaque élément.
- Pense à l’espace interne (padding) vs l’espace externe (margin).

Séance 14Bordures et Ombres

🎯 Objectifs

Utiliser les propriétés de bordure : border-width, border-style, border-color, border-radius
Maîtriser les bordures individuelles : border-top, border-right, etc.
Créer des ombres de boîte avec box-shadow
Comprendre la différence entre border et outline

📖 Bordures (border)

1. Propriétés de base

.bloc {
    border-width: 2px;
    border-style: solid;      /* solid, dashed, dotted, double... */
    border-color: #2c3e50;
}

2. Propriété raccourcie

.bloc {
    border: 2px solid #2c3e50;
}

3. Bordures individuelles

.bloc {
    border-top: 2px solid red;
    border-right: 2px dashed green;
    border-bottom: 2px dotted blue;
    border-left: 4px solid black;
}

📖 Coins arrondis (border-radius)

.bouton {
    border-radius: 8px;
}

.cercle {
    width: 100px;
    height: 100px;
    border-radius: 50%;  /* cercle parfait */
}

Valeurs en px, % ou autres unités
Permet de créer des cartes, badges, pastilles, cercles…

Coins individuels :

.carte {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

📖 Ombres de Boîte (box-shadow)

.carte {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Syntaxe : box-shadow: offset-x offset-y flou étendue couleur;
offset-x : déplacement horizontal
offset-y : déplacement vertical
flou : adoucit l’ombre
étendue (spread) : agrandit/réduit la zone de l’ombre (optionnel)

Exemples :

.carte-leger {
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.carte-forte {
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

📖 Outline (contour)

.focus {
    outline: 2px solid #3498db;
}

outline ne prend pas de place dans le box model (ne décale pas les autres éléments)
Très utilisé pour l’accessibilité (focus clavier)

📖 Cartes (Cards) Stylisées

Combiner bordures, radius et ombres pour créer des composants modernes.

⚠️ Important :
- Éviter les ombres trop fortes et trop nombreuses (impact sur la lisibilité et la performance).
- Garder des bordures fines et discrètes pour un design moderne.
- Ne jamais supprimer totalement les outlines de focus sans alternative (accessibilité).

💡 Exemple : Carte (Card) Moderne

HTML :

<div class="card-projet">
    <h3>Projet : NaibiAfrica</h3>
    <p>
        Plateforme de préinscription en ligne pour les établissements
        d'enseignement supérieur au Tchad.
    </p>
    <a href="#" class="btn-card">Voir les détails</a>
</div>

CSS :

.card-projet {
    max-width: 320px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    background-color: #ffffff;
}

.card-projet h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.card-projet p {
    margin-bottom: 15px;
}

.btn-card {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
}

.btn-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

💻 TP Pratique : Galerie de Cartes

Consignes :

Créer une section contenant au moins 3 « cartes » (projet, service, membre d’équipe…).
Pour chaque carte, appliquer :
- Une bordure unie légère
- Un border-radius pour arrondir les coins
- Une ombre box-shadow légère
Ajouter un bouton dans chaque carte avec un style différent (fond coloré, ombre au survol).
Tester plusieurs styles d’ombre (faible, moyenne, forte) et choisir la plus agréable visuellement.

Durée : 45 minutes

💡 Astuce :
- Utilise les DevTools pour jouer avec les valeurs de box-shadow en direct.
- Inspire-toi des cartes de sites modernes (Dribbble, Behance, etc.).
- Combine ombres + dégradés de fond pour créer des composants vraiment attractifs.

Séance 15Display et Positionnement (Partie 1)

🎯 Objectifs

Comprendre les différents types d’affichage (display)
Maîtriser les positionnements CSS : static, relative, absolute, fixed, sticky
Utiliser les propriétés top, right, bottom, left
Comprendre le concept de stacking avec z-index

📖 Display (affichage des éléments)

1. display: block

.bloc {
    display: block;
}

Prend toute la largeur disponible (100%)
Passe toujours à la ligne suivante
Exemples : <div>, <p>, <h1>

2. display: inline

.inline {
    display: inline;
}

N’occupe que la largeur du contenu
Ne permet pas width / height
Exemples : <span>, <a>

3. display: inline-block

.carte {
    display: inline-block;
}

Se comporte comme inline mais accepte width/height
Très utilisé avant Flexbox

4. display: none

.cacher {
    display: none;
}

L’élément disparaît totalement (comme s’il n’existait pas)

📖 Positionnement CSS

1. position: static (par défaut)

.elt {
    position: static;
}

L’élément suit le flux normal
Impossible d’utiliser top/left/right/bottom

2. position: relative

.boite {
    position: relative;
    top: 10px;   /* décalage par rapport à sa position normale */
}

L’élément reste dans le flux normal
Permet de déplacer légèrement l’élément
Crée un “contexte de positionnement” pour absolute

3. position: absolute

.menu {
    position: absolute;
    top: 20px;
    right: 20px;
}

Se positionne par rapport au **premier parent positionné**
Sinon → par rapport au document entier
Sort du flux normal

4. position: fixed

.barre-haut {
    position: fixed;
    top: 0;
    width: 100%;
}

Fixé à la fenêtre, même au scroll
Très utilisé pour les menus fixes

5. position: sticky

.titre {
    position: sticky;
    top: 10px;
}

Mi-chemin entre relative et fixed
Devient fixe lorsqu’on atteint sa position top

📖 Propriétés top / left / right / bottom

.elt {
    position: absolute;
    top: 50px;
    left: 30px;
}

Ne fonctionnent qu’avec relative / absolute / fixed / sticky

📖 z-index (ordre d’empilement)

.avant {
    position: relative;
    z-index: 10;
}

.arriere {
    position: relative;
    z-index: 0;
}

Permet de placer un élément devant ou derrière un autre
Ne fonctionne qu’avec un élément positionné

⚠️ Important :
- Pour centrer un élément → utiliser margin: 0 auto; ou Flexbox.
- position: absolute se base toujours sur le premier parent positionné.
- Ne jamais abuser de absolute pour construire une page entière.

💡 Exemple : Menu Fixe

HTML :

<nav class="menu-fixe">
    <a href="#">Accueil</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

CSS :

.menu-fixe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #34495e;
    padding: 10px;
}

.menu-fixe a {
    color: white;
    margin-right: 20px;
}

💻 TP Pratique : Barre de Navigation Fixe

Créer une barre en haut de la page avec position: fixed
Prévoir quelques sections longues pour tester le scroll
Ajouter un bouton "Retour en haut" positionné en absolute ou fixed

Durée : 45 minutes

💡 Astuce :
- Utilise DevTools → Onglet « Layout » pour voir comment les éléments se positionnent.
- sticky fonctionne mieux dans les conteneurs ayant une hauteur suffisante.
- Teste le comportement au défilement (scroll) pour bien comprendre fixed vs sticky.

Séance 16Display et Positionnement (Partie 2)

🎯 Objectifs

Comprendre les floats et le comportement de clear
Savoir gérer overflow : visible, hidden, scroll, auto
Créer des layouts basiques à deux colonnes
Apprendre à centrer un élément horizontalement et verticalement

📖 Float (ancien système de mise en page)

.gauche {
    float: left;
    width: 50%;
}

.droite {
    float: right;
    width: 50%;
}

Avant Flexbox, on utilisait float pour créer des colonnes
Sort l’élément du flux normal (semblable à inline-block)

📖 Clear (annuler les floats)

.cleaner {
    clear: both;
}

Empêche un élément de monter à côté d’un float

📖 Overflow (débordement)

.bloc {
    width: 200px;
    height: 100px;
    overflow: auto;     /* visible, hidden, scroll, auto */
}

hidden = coupe ce qui dépasse
scroll = ajoute toujours des barres de défilement
auto = ajoute des barres si nécessaire

📖 Centrage horizontal

.bloc {
    width: 300px;
    margin: 0 auto;
}

📖 Centrage vertical (méthodes classiques)

Méthode 1 : line-height (pour du texte)

.texte {
    height: 100px;
    line-height: 100px;
}

Méthode 2 : position + transform

.centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

📖 Layout simple à deux colonnes (float)

.col {
    width: 50%;
    float: left;
    padding: 10px;
}

<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="cleaner"></div>

⚠️ Important :
- Les floats ne sont plus recommandés pour le layout (utiliser Flexbox).
- Overflow peut couper des éléments importants → à utiliser avec attention.
- Centrage vertical est beaucoup plus simple avec Flexbox (vu au Module 3).

💡 Exemple : Layout à Deux Colonnes

HTML :

<div class="colonne gauche">
    <h2>Colonne 1</h2>
    <p>Contenu colonne gauche</p>
</div>

<div class="colonne droite">
    <h2>Colonne 2</h2>
    <p>Contenu colonne droite</p>
</div>

<div class="cleaner"></div>

CSS :

.colonne {
    width: 50%;
    float: left;
    padding: 10px;
}

.cleaner {
    clear: both;
}

.colonne h2 {
    margin-top: 0;
}

💻 TP Pratique : Mise en Page à Deux Colonnes

Créer une page avec deux colonnes côte à côte (float ou inline-block).
Ajouter une bordure et un padding à chaque colonne.
Ajouter un cleaner pour corriger le layout.
Créer un bloc de contenu avec overflow: auto; pour tester le défilement.

Durée : 40 minutes

💡 Astuce :
- Observe comment les floats affectent les éléments suivants.
- Utilise des couleurs de fond différentes pour mieux visualiser les colonnes.
- Compare cette méthode avec Flexbox (bien meilleure !).

Séance 17Flexbox (Partie 1)

🎯 Objectifs

Comprendre le principe de Flexbox et quand l’utiliser
Maîtriser les propriétés du conteneur flex : display: flex, flex-direction, flex-wrap
Aligner les éléments sur l’axe principal avec justify-content
Aligner les éléments sur l’axe secondaire avec align-items et align-content

📖 Introduction à Flexbox

Flexbox = Flexible Box Layout
Conçu pour aligner et distribuer l’espace entre les éléments dans un conteneur
Idéal pour :
- Menus horizontaux
- Cartes alignées
- Layouts responsives simples

📖 Activer Flexbox

.container {
    display: flex;   /* active le mode flex */
}

Les enfants directs de .container deviennent des flex-items.

📖 flex-direction (direction de l’axe principal)

.container {
    display: flex;
    flex-direction: row;        /* row, row-reverse, column, column-reverse */
}

row : de gauche à droite (par défaut)
column : de haut en bas

📖 flex-wrap (retour à la ligne)

.container {
    display: flex;
    flex-wrap: wrap;           /* nowrap (défaut), wrap, wrap-reverse */
}

Combinaison utile :

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* équivalent à flex-flow: row wrap; */
}

📖 justify-content (alignement sur l’axe principal)

.container {
    justify-content: flex-start;   /* flex-start, flex-end, center, space-between, space-around, space-evenly */
}

flex-start : éléments alignés au début
center : centrés
space-between : premier collé au début, dernier à la fin, espace égal entre
space-around : espace autour de chaque élément

📖 align-items (alignement sur l’axe secondaire)

.container {
    align-items: stretch;  /* stretch, flex-start, flex-end, center, baseline */
}

center : centre verticalement (si row)
flex-start : en haut
flex-end : en bas

📖 align-content (quand plusieurs lignes)

.container {
    flex-wrap: wrap;
    align-content: center; /* space-between, space-around, flex-start, flex-end, stretch */
}

⚠️ Important :
- Flexbox travaille par défaut sur une seule dimension (ligne ou colonne).
- Toujours commencer par définir l’axe principal avec flex-direction.
- Pour des grilles complexes → utiliser Grid (Séances 19–20).

💡 Exemple : Menu Horizontal avec Flexbox

HTML :

<nav class="menu-flex">
    <a href="#">Accueil</a>
    <a href="#">À propos</a>
    <a href="#">Projets</a>
    <a href="#">Contact</a>
</nav>

CSS :

.menu-flex {
    display: flex;
    justify-content: center;
    gap: 20px;
    background-color: #2c3e50;
    padding: 10px;
}

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

💻 TP Pratique : Barre de Navigation Responsive Simple

Créer un conteneur .nav avec plusieurs liens.
Utiliser display: flex et justify-content pour centrer ou espacer les liens.
Changer flex-direction en column dans une media query pour l’affichage mobile.

Durée : 45 minutes

💡 Astuce :
- Utilise DevTools → onglet « Layout » pour visualiser les conteneurs Flex.
- Joue avec justify-content et align-items pour bien comprendre les axes.
- Commence avec un petit nombre d’éléments puis augmente progressivement.

Séance 18Flexbox (Partie 2)

🎯 Objectifs

Maîtriser les propriétés des items flex : flex-grow, flex-shrink, flex-basis
Utiliser la propriété raccourcie flex
Changer l’ordre des éléments avec order
Aligner un item individuellement avec align-self
Construire un layout de page simple avec Flexbox

📖 Propriétés des Items Flex

1. flex-grow (croissance)

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

Détermine la capacité de l’élément à grandir pour occuper l’espace libre
Ici, .item2 prendra 2x plus d’espace que .item1

2. flex-shrink (rétrécissement)

.item {
    flex-shrink: 0;   /* par défaut : 1 */
}

Contrôle la capacité de l’élément à se réduire si l’espace manque
0 = ne se rétrécit pas

3. flex-basis (base de calcul)

.item {
    flex-basis: 200px;
}

Définit la taille de base de l’élément (avant distribution de l’espace)

4. Propriété raccourcie flex

.item {
    flex: 1 0 200px;   /* flex-grow flex-shrink flex-basis */
}

Cas fréquents :

.item {
    flex: 1;           /* flex: 1 1 0 */
}

.item-auto {
    flex: 0 0 auto;
}

📖 order (ordre des éléments)

.item1 { order: 2; }
.item2 { order: 1; }

Permet de changer l’ordre visuel sans modifier le HTML
Utile en responsive (mobile vs desktop)

📖 align-self (alignement individuel)

.item-special {
    align-self: center;   /* auto, flex-start, flex-end, center, stretch */
}

📖 Exemple de Layout de Page avec Flexbox

.layout {
    display: flex;
}

.sidebar {
    flex: 0 0 250px;   /* largeur fixe */
}

.content {
    flex: 1;           /* prend tout l’espace restant */
}

⚠️ Important :
- Ne pas abuser de order pour ne pas perdre la logique du HTML.
- flex: 1 est très pratique pour des éléments qui doivent se répartir l’espace également.
- Toujours tester le comportement du layout quand la fenêtre est redimensionnée.

💡 Exemple : Trois Cartes avec Flexbox

HTML :

<section class="row-cartes">
    <div class="carte">Carte 1</div>
    <div class="carte">Carte 2</div>
    <div class="carte">Carte 3</div>
</section>

CSS :

.row-cartes {
    display: flex;
    gap: 20px;
}

.carte {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    background-color: #ecf0f1;
}

💻 TP Pratique : Layout de Page avec Flexbox

Consignes :

Créer une page avec :
- Un header
- Une zone principale avec sidebar + contenu
- Un footer
Utiliser Flexbox pour :
- Mettre la sidebar à gauche et le contenu à droite
- Rendre le contenu plus large que la sidebar
Optionnel : inverser l’ordre sur mobile (contenu avant sidebar) avec order.

Durée : 50 minutes

💡 Astuce :
- Teste différentes valeurs de flex (0, 1, 2…) pour voir comment l’espace se répartit.
- Utilise Flexbox pour les composants (menus, cartes, sections) avant de l’utiliser pour toute la page.
- Combine Flexbox + media queries pour une base de responsive design simple.

Séance 19CSS Grid (Partie 1)

🎯 Objectifs

Comprendre le concept de CSS Grid (grille 2D)
Définir des colonnes et des lignes avec grid-template-columns et grid-template-rows
Utiliser les unités fr et les fonctions repeat(), minmax()
Gérer les espacements avec gap, row-gap, column-gap
Créer une galerie d’images simple avec Grid

📖 Introduction à CSS Grid

Grid = système de mise en page à deux dimensions (lignes + colonnes)
Idéal pour :
- Galeries d’images
- Layouts de pages complexes
- Tableaux de cartes, dashboards…

📖 Activer Grid

.grid {
    display: grid;
}

📖 Définir les Colonnes et Lignes

.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* 3 colonnes */
    grid-template-rows: 150px 150px;          /* 2 lignes */
}

Utiliser des unités flexibles :

.grid {
    grid-template-columns: 1fr 1fr 1fr;       /* 3 colonnes égales */
}

repeat()

.grid {
    grid-template-columns: repeat(3, 1fr);   /* 3 colonnes de 1fr */
}

minmax()

.grid {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

📖 Espacements : gap

.grid {
    display: grid;
    gap: 20px;          /* espace lignes + colonnes */
    /* row-gap: 20px;  column-gap: 10px; */
}

⚠️ Important :
- Grid s’utilise généralement au niveau des mises en page globales.
- Flexbox est meilleur pour l’alignement dans une dimension (ligne/colonne), Grid pour des grilles complètes.

💡 Exemple : Galerie d’Images avec Grid

HTML :

<section class="galerie">
    <img src="img1.jpg" alt="Photo 1">
    <img src="img2.jpg" alt="Photo 2">
    <img src="img3.jpg" alt="Photo 3">
    <img src="img4.jpg" alt="Photo 4">
    <img src="img5.jpg" alt="Photo 5">
    <img src="img6.jpg" alt="Photo 6">
</section>

CSS :

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

.galerie img {
    width: 100%;
    height: auto;
    display: block;
}

💻 TP Pratique : Galerie d’Images

Créer une section avec au moins 6 images.
Utiliser Grid pour afficher les images en 3 colonnes.
Ajouter un gap entre les images.
Rendre les images responsives avec width: 100%.

Durée : 45 minutes

💡 Astuce :
- Utilise DevTools pour voir les lignes/colonnes Grid (option « Display grid overlays »).
- Commence simple : 2 ou 3 colonnes, puis complexifie avec minmax() et repeat().

Séance 20CSS Grid (Partie 2)

🎯 Objectifs

Positionner les items avec grid-column et grid-row
Utiliser les zones nommées avec grid-template-areas
Aligner les éléments dans la grille
Comprendre la différence entre Grid explicite et implicite
Créer un layout de blog avec Grid

📖 Placement des Items

.item1 {
    grid-column: 1 / 3;   /* de la colonne 1 à 3 (s'étend sur 2 colonnes) */
    grid-row: 1 / 2;      /* première ligne */
}

Numérotation simplifiée :

.item2 {
    grid-column: 2 / span 2;  /* commence à 2, occupe 2 colonnes */
}

📖 Zones Nommées (grid-template-areas)

.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

HTML :

<div class="layout">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Contenu</main>
    <footer class="footer">Footer</footer>
</div>

📖 Alignement dans la Grille

Aligner tout le contenu :

.layout {
    justify-items: stretch;  /* start, end, center, stretch */
    align-items: stretch;
}

Aligner la grille elle-même :

.layout {
    justify-content: center; /* start, end, center, space-between... */
    align-content: center;
}

📖 Grid Explicite vs Implicite

Grid explicite : défini par grid-template-rows/columns
Grid implicite : lignes/colonnes créées automatiquement quand il y a plus d’items que prévu

⚠️ Important :
- grid-template-areas est très pratique pour visualiser la structure globale.
- Toujours garder un HTML logique (ne pas penser uniquement en “cases”).
- Grid + media queries = très puissant pour des pages responsives.

💡 Exemple : Layout de Blog

HTML :

<div class="blog-layout">
    <header class="blog-header">Mon Blog</header>
    <aside class="blog-sidebar">Catégories</aside>
    <main class="blog-content">Articles</main>
    <footer class="blog-footer">© 2025</footer>
</div>

CSS :

.blog-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    min-height: 100vh;
}

.blog-header  { grid-area: header;  }
.blog-sidebar { grid-area: sidebar; background-color: #ecf0f1; }
.blog-content { grid-area: content; }
.blog-footer  { grid-area: footer;  }

💻 TP Pratique : Layout de Blog avec Grid

Consignes :

Créer un layout de blog avec :
- Header
- Sidebar
- Zone de contenu principal
- Footer
Utiliser grid-template-areas pour définir la structure.
Ajouter du contenu fictif dans chaque zone.
Optionnel : modifier la grille en une seule colonne sur mobile (via media queries).

Durée : 50 minutes

💡 Astuce :
- Dessine d’abord ta grille sur papier (header, sidebar, content, footer), puis traduisez-la en grid-template-areas.
- Combine Flexbox à l’intérieur des zones (ex : Flex pour les articles dans .blog-content).

Séance 21Responsive Design (Partie 1)

🎯 Objectifs

Comprendre le concept du responsive design
Configurer la balise meta viewport
Utiliser les unités relatives : %, em, rem, vw, vh
Écrire les premières media queries
Découvrir les stratégies mobile-first et desktop-first

📖 Qu’est-ce que le Responsive Design ?

Adapter l’affichage du site aux différentes tailles d’écran
Objectif : lisible et utilisable sur :
- Ordinateur
- Tablette
- Smartphone
Évite le zoom manuel, les barres de scroll horizontales, etc.

📖 Balise Meta Viewport

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Responsive</title>
</head>

width=device-width : la largeur de la page = largeur de l’écran
initial-scale=1.0 : niveau de zoom initial (1 = 100%)

📖 Unités relatives

Pour les largeurs :

.container {
    width: 90%;     /* 90% de la largeur de l’élément parent */
    max-width: 1200px;
}

em et rem (texte, marges, etc.)

html {
    font-size: 16px;  /* base */
}

p {
    font-size: 1rem;  /* = 16px */
}

.small-text {
    font-size: 0.875rem; /* ~14px */
}

vw et vh (viewport width / height)

.hero {
    height: 100vh;   /* 100% de la hauteur de la fenêtre */
}

📖 Media Queries (introduction)

@media (max-width: 768px) {
    /* Styles pour les écrans <= 768px */
    body {
        background-color: #f0f0f0;
    }
}

max-width : s’applique aux écrans plus petits que la valeur
min-width : s’applique aux écrans plus grands que la valeur

📖 Mobile-first vs Desktop-first

Mobile-first :
- Styles de base pour mobile
- On ajoute des media queries avec min-width pour les grands écrans
Desktop-first :
- Styles de base pour grand écran
- On ajoute des media queries avec max-width pour les petits écrans

⚠️ Important :
- Ne jamais oublier la balise meta viewport pour les sites mobiles.
- Éviter d’utiliser uniquement des tailles fixes en px pour les largeurs.
- Penser au confort de lecture : marges, tailles de texte, espaces.

💡 Exemple : Container Responsive

CSS :

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
}

/* Sur petits écrans */
@media (max-width: 600px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

💻 TP Pratique : Page de Base Responsive

Consignes :

Créer une page avec :
- Un header
- Un contenu principal
- Un footer
Appliquer un container centré avec width: 90% et max-width.
Ajouter une media query pour les écrans <= 600px :
- Réduire les paddings
- Augmenter légèrement la taille du texte pour la lecture mobile

Durée : 40 minutes

💡 Astuce :
- Utilise les outils de développement du navigateur (mode mobile) pour tester différentes tailles d’écran.
- Commence par un design simple et améliore progressivement l’adaptation.

Séance 22Responsive Design (Partie 2)

🎯 Objectifs

Rendre les images responsives
Créer une navigation responsive (menu burger simple)
Utiliser clamp() et calc() pour une typographie fluide
Tester l’affichage sur différents appareils

📖 Images Responsives

img {
    max-width: 100%;
    height: auto;
    display: block;
}

max-width: 100% : l’image ne dépasse jamais de son conteneur
height: auto : conserve les proportions

📖 Balise <picture> (introduction)

<picture>
    <source media="(min-width: 800px)" srcset="image-large.jpg">
    <source media="(min-width: 400px)" srcset="image-medium.jpg">
    <img src="image-small.jpg" alt="Image responsive">
</picture>

📖 Typographie Responsive avec clamp()

h1 {
    font-size: clamp(24px, 5vw, 40px);
}

clamp(min, valeur idéale, max)
La taille varie avec la largeur de l’écran mais reste entre min et max

📖 calc()

.bloc {
    width: calc(100% - 40px);
}

📖 Navigation Responsive (menu burger simple – structure HTML)

<header class="header">
    <div class="logo">MonSite</div>
    <button class="btn-menu">☰</button>
    <nav class="nav-links">
        <a href="#">Accueil</a>
        <a href="#">À propos</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
</header>

CSS de base (desktop) :

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-menu {
    display: none;  /* caché sur grand écran */
}

CSS (mobile) :

@media (max-width: 768px) {
    .nav-links {
        display: none;   /* caché par défaut sur mobile (on pourrait l’ouvrir avec JS) */
    }

    .btn-menu {
        display: block;
    }
}

⚠️ Important :
- Même si on ne code pas tout le JavaScript ici, la structure HTML/CSS doit déjà être pensée pour le responsive.
- Toujours tester les largeurs critiques : 320px, 768px, 1024px…

💡 Exemple : Section Responsive avec Images

HTML :

<section class="services">
    <article class="service">
        <img src="service1.jpg" alt="Service 1">
        <h3>Service 1</h3>
        <p>Description du service 1.</p>
    </article>
    <article class="service">
        <img src="service2.jpg" alt="Service 2">
        <h3>Service 2</h3>
        <p>Description du service 2.</p>
    </article>
</section>

CSS :

.services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.service img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile */
@media (max-width: 600px) {
    .services {
        grid-template-columns: 1fr;
    }
}

💻 TP Pratique : Mini Landing Page Responsive

Consignes :

Créer une mini landing page avec :
- Section hero (titre + texte + bouton)
- Section services (3 blocs avec icône/image + texte)
Rendre le tout responsive :
- Sur desktop : les services sont en 3 colonnes
- Sur mobile : les services sont en 1 colonne
Utiliser clamp() pour la taille du titre principal.

Durée : 50 minutes

💡 Astuce :
- Conçois toujours tes pages en te demandant : "Qu’est-ce que ça donne sur un petit écran ?".
- Tu peux commencer le design en mobile-first, puis l’enrichir pour les grands écrans.

Séance 23Transitions et Animations

🎯 Objectifs

Comprendre et utiliser les transitions CSS
Maîtriser transition-property, transition-duration, transition-timing-function
Créer des animations avec @keyframes
Utiliser animation-name, animation-duration, animation-iteration-count
Appliquer des effets sur les boutons et cartes

📖 Transitions CSS

Déclaration simple :

.btn {
    background-color: #3498db;
    transition: background-color 0.3s;
}

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

transition: propriété durée;
Crée une animation douce lorsque la propriété change

Plusieurs propriétés :

.carte {
    transition: transform 0.3s, box-shadow 0.3s;
}

📖 transition-timing-function

.btn {
    transition: background-color 0.3s ease-in-out;
}

Valeurs : linear, ease, ease-in, ease-out, ease-in-out

📖 Animations avec @keyframes

Exemple : effet de "pulse"

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.btn-pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

📖 Propriété raccourcie animation

.btn-pulse {
    animation: pulse 1s infinite ease-in-out;
}

Options :

animation-delay : délai avant le début
animation-direction : normal, reverse, alternate
animation-fill-mode : forwards, backwards, both

⚠️ Important :
- Ne pas abuser des animations partout (risque de gêner l’utilisateur et de fatiguer les yeux).
- Garder des durées courtes (0.2s → 0.5s) pour les transitions d’interface.
- Les animations infinies doivent rester discrètes.

💡 Exemple : Carte Animée au Survol

HTML :

<div class="card-anim">
    <h3>Titre de la carte</h3>
    <p>Contenu de la carte.</p>
</div>

CSS :

.card-anim {
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-anim:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

💻 TP Pratique : Boutons et Cartes Animés

Consignes :

Créer au moins deux styles de boutons :
- Un bouton avec changement de couleur au survol
- Un bouton avec léger agrandissement (scale)
Créer une carte avec ombre plus forte au survol (comme l’exemple).
Ajouter une animation simple sur un texte (par ex. titre qui clignote légèrement).

Durée : 45 minutes

💡 Astuce :
- Utilise des durées différentes pour voir l’impact sur l’expérience utilisateur.
- Combine transitions + transformations pour obtenir des effets modernes sans JavaScript.

Séance 24Transformations CSS

🎯 Objectifs

Utiliser les transformations 2D : translate(), rotate(), scale(), skew()
Comprendre transform-origin
Découvrir les transformations 3D : rotateX(), rotateY(), perspective
Créer des effets de survol avancés

📖 Transformations 2D

1. translate() (déplacement)

.box {
    transform: translate(10px, 20px);  /* x, y */
}

2. rotate() (rotation)

.box {
    transform: rotate(15deg);
}

3. scale() (agrandissement/réduction)

.box {
    transform: scale(1.2);    /* 120% */
}

4. skew() (inclinaison)

.box {
    transform: skew(10deg, 0deg);  /* x, y */
}

Combiner plusieurs transformations :

.box {
    transform: translateY(-5px) scale(1.05);
}

📖 transform-origin

.box {
    transform-origin: center center;  /* par défaut */
}

.box-coin {
    transform-origin: left top;
}

Définit le point de référence de la transformation (centre, coin, etc.)

📖 Transformations 3D (introduction)

rotateX() / rotateY()

.box3d {
    transform: rotateY(20deg);
}

perspective

.scene {
    perspective: 800px;
}

.scene .box3d {
    transform: rotateY(25deg);
}

⚠️ Important :
- Les transformations n’affectent pas le flux des éléments (la place occupée reste la même).
- Combine toujours transformations + transitions pour des effets fluides.
- Ne pas exagérer les rotations ou inclinaisons : garder des valeurs raisonnables.

💡 Exemple : Effet Hover Avancé sur Carte

HTML :

<div class="card-3d">
    <h3>Projet Numérique</h3>
    <p>Description du projet.</p>
</div>

CSS :

.card-3d {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center;
}

.card-3d:hover {
    transform: translateY(-5px) scale(1.02) rotateX(3deg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

💻 TP Pratique : Effets de Survol Avancés

Consignes :

Créer au moins 3 cartes différentes avec des effets de survol :
- Carte qui se soulève avec translateY()
- Carte qui s’agrandit légèrement avec scale()
- Carte avec légère rotation ou inclinaison
Combiner ces transformations avec des transitions (durée 0.2–0.4s).

Durée : 45 minutes

💡 Astuce :
- Commence avec des petites valeurs (ex : scale(1.03), translateY(-3px)) pour garder un design subtil.
- Observe comment les grandes plateformes (Dribbble, GitHub, etc.) utilisent les transformations discrètes.

📚 Cours Complet HTML & CSS

Module 1 : Introduction et Fondamentaux HTML

Séance 1Les Bases du HTML

🎯 Objectifs

📖 Contenu Théorique

💡 Exemple Complet

💻 TP Pratique : Créer sa première page web

Séance 2Contenu Textuel et Sémantique

🎯 Objectifs

📖 Les Titres (Headings)

📖 Paragraphes et Sauts de Ligne

📖 Formatage du Texte

📖 Listes Non Ordonnées (ul)

📖 Listes Ordonnées (ol)

📖 Listes de Définition (dl)

📖 Listes Imbriquées

💻 TP Pratique : Page CV Personnel

Séance 3Liens et Navigation

🎯 Objectifs

📖 La Balise <a> (Anchor)

📖 Types de Liens

📖 Attributs Importants

📖 Menu de Navigation

📖 Navigation avec Sous-menu

💡 Exemple : Navigation Complète

💻 TP Pratique : Site Multi-pages avec Navigation

Séance 4Images et Médias

🎯 Objectifs

📖 La Balise <img>

📖 Chemins d'Images

📖 Formats d'Images

📖 Figure et Figcaption

📖 Images Responsives

📖 Audio

📖 Vidéo

📖 YouTube/Vidéos Externes (iframe)

💻 TP Pratique : Galerie d'Images

Séance 5Tableaux

🎯 Objectifs

📖 Structure de Base

📖 Tableau Complet avec Sections

📖 Fusion de Cellules

📖 Accessibilité des Tableaux

📖 Attributs Utiles

💡 Exemple : Emploi du Temps

💻 TP Pratique : Tableau de Données Complexe

Séance 6Formulaires (Partie 1)

🎯 Objectifs

📖 Structure de Base d'un Formulaire

📖 Champs Input Texte

📖 Types d'Input Numériques

📖 Types d'Input Date et Temps

📖 Autres Types d'Input

📖 Labels et Association

📖 Boutons

📖 Attributs Importants des Inputs

💡 Exemple : Formulaire d'Inscription

💻 TP Pratique : Formulaire d'Inscription

Séance 7Formulaires (Partie 2)

🎯 Objectifs

📖 Textarea (Zone de texte multiligne)

📖 Liste déroulante : <select> et <option>

📖 Cases à cocher (Checkbox)

📖 Boutons radio (Radio buttons)

📖 Upload de fichiers

📖 Validation HTML5 (complément)

💡 Exemple : Formulaire de Contact Complet

💻 TP Pratique : Formulaire de Demande d’Inscription

Séance 8HTML Sémantique et Structure

🎯 Objectifs

📖 Qu’est-ce que le HTML Sémantique ?

📖 Principales Balises Sémantiques

📖 Exemple : Structure Globale d’une Page

📖 Différence entre <div> et Balises Sémantiques

📖 Exemple : Page "Portfolio" Sémantique

💻 TP Pratique : Restructurer une Page avec HTML5 Sémantique

Module 2 : Fondamentaux CSS

Séance 9Introduction au CSS

🎯 Objectifs

📖 Qu’est-ce que le CSS ?