UA 4 : PROGRAMMATION EN HTML (partie 1/2)

## Objectifs et prérequis **Objectifs** : à la fin de ce chapitre l’élève sera capable de - insérer un tableau HTML avec fusion de cellules ; - intégrer des images, des fichiers audio et vidéo dans une page web ; - créer un formulaire HTML5 comportant différents types de champs et appliquer une validation côté client ; - mettre en forme une page web à l’aide de CSS (sélecteurs, modèle de boîte, polices, couleurs, disposition simple). **Prérequis** : connaître la structure de base d’un document HTML (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`), savoir écrire et enregistrer un fichier `.html`, maîtriser les balises ouvrantes/fermantes et les attributs simples (comme `id` ou `class`). --- ## Introduction contextualisée Le web moderne repose sur trois langages complémentaires : HTML pour la structure, CSS pour la présentation et JavaScript pour le comportement. Au niveau du Probatoire, l’accent est mis sur la maîtrise d’HTML et de CSS afin que l’élève puisse produire des pages statiques lisibles, accessibles et agréables à consulter. Les tableaux permettent d’organiser des données (emplois du temps, résultats, comparatifs) ; les éléments multimédias enrichissent le contenu (illustrations, podcasts, tutoriels vidéo) ; les formulaires sont l’interface principale de collecte d’informations (inscription, recherche, retour d’expérience) ; enfin, le CSS assure une mise en forme cohérente et adaptable aux différents supports. --- ## I. Insertion des tableaux et des fichiers multimédias dans une page web ### A. Tableaux HTML > **Définition** : un tableau HTML est constitué de la balise `<table>` qui contient une ou plusieurs lignes (`<tr>`) ; chaque ligne comporte des cellules d’en-tête (`<th>`) ou de données (`<td>`). **Propriétés essentielles** - `border` (en CSS) : épaisseur du trait entourant le tableau et ses cellules. - `colspan` : nombre de colonnes qu’une cellule occupe. - `rowspan` : nombre de lignes qu’une cellule occupe. - `cellpadding` et `cellspacing` sont obsolètes en HTML5 ; on utilise désormais le `padding` des cellules (`td`, `th`) pour l’espacement intérieur et la propriété `border-spacing` du tableau pour l’espacement entre les cellules. **Démonstration** : l’espace horizontal total occupé par une cellule se calcule ainsi : $$ \text{espace total}= \text{width}+ \text{padding‑left}+ \text{padding‑right}+ \text{border‑left}+ \text{border‑right}+ \text{margin‑left}+ \text{margin‑right} $$ où `width` désigne la largeur de la zone de contenu (valeur par défaut `content-box`). Cette formule sera utile lorsqu’on veut contrôler précisément l’alignement des cellules. #### Exemple 1 – Tableau simple de notes ```html <table> <tr> <th>Matière</th> <th>Devoir</th> <th>Examen</th> </tr> <tr> <td>Mathématiques</td> <td>12</td> <td>14</td> </tr> <tr> <td>Physique</td> <td>10</td> <td>13</td> </tr> </table> ``` *Résultat* : un tableau à trois colonnes et trois lignes, sans bordure visible (il faut ajouter du CSS pour voir les traits). #### Exemple 2 – Tableau avec fusion de cellules ```html <table style="border-collapse:collapse;"> <tr> <th>Jour</th> <th colspan="2">Matin</th> <th>Après‑midi</th> </tr> <tr> <td>Lundi</td> <td>Maths</td> <td>Français</td> <td>EPS</td> </tr> <tr> <td>Mardi</td> <td colspan="2">Sortie scolaire</td> <td>Étude</td> </tr> </table> ``` *Explication* : la deuxième cellule de la première ligne occupe deux colonnes grâce à `colspan="2"` ; de même, la deuxième ligne fusionne les deux cellules du matin pour indiquer une activité unique. --- ### B. Images > **Définition** : la balise `<img>` est un élément vide qui incorpore une image grâce à l’attribut `src` (source) ; l’attribut `alt` fournit un texte alternatif indispensable à l’accessibilité. **Attributs courants** - `src` : chemin relatif ou absolu vers le fichier image. - `alt` : description texte (lu par les lecteurs d’écran). - `width` / `height` : dimensions en pixels ou en pourcentage ; il est recommandé de ne spécifier qu’une seule dimension pour préserver le ratio. - `title` : info‑bulle au survol. **Formats supportés** : JPEG (`.jpg`, `.jpeg`) pour les photos, PNG (`.png`) pour les images avec transparence, GIF (`.gif`) pour les animations simples, SVG (`.svg`) pour les vecteurs. #### Exemple 1 – Image locale ```html <img src="images/logo.png" alt="Logo de l'établissement" width="150"> ``` *Résultat* : l’image `logo.png` située dans le sous‑dossier `images` s’affiche avec une largeur de 150 px, la hauteur s’ajuste automatiquement. #### Exemple 2 – Image cliquable avec dimensions en pourcentage ```html <a href="https://www.example.com" target="_blank"> <img src="photos/paysage.jpg" alt="Paysage montagneux" width="60%" style="display:block; margin:auto;"> </a> ``` *Explication* : l’image occupe 60 % de la largeur de son conteneur parent, est centrée grâce à `margin:auto;` et ouvre un nouvel onglet lorsqu’on clique dessus. --- ### C. Audio et vidéo > **Définition** : les balises `<audio>` et `<video>` permettent d’intégrer des flux multimédias directement dans la page, sans recours à des plugins externes. **Attributs principaux** - `controls` : affiche les boutons de lecture/pause, volume, etc. - `autoplay` : démarre la lecture dès le chargement (à utiliser avec parcimonie). - `loop` : répète indéfiniment. - `muted` : coupe le son par défaut. - `preload` : indique comment le navigateur doit précharger le média (`none`, `metadata`, `auto`). **Formats audio** : MP3 (`.mp3`), OGG (`.ogg`), WAV (`.wav`). **Formats vidéo** : MP4 (`.mp4`), WebM (`.webm`), OGG (`.ogv`). #### Exemple 1 – Lecteur audio simple ```html <audio controls preload="metadata"> <source src="media/chanson.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas l'élément audio. </audio> ``` *Résultat* : un lecteur avec barre de progression, bouton play/pause et volume ; le navigateur choisit le premier format reconnu. #### Exemple 2 – Vidéo avec poster, sous‑titres et boucle ```html <video controls width="480" poster="media/vignette.jpg"> <source src="media/tutoriel.webm" type="video/webm"> <source src="media/tutoriel.mp4" type="video/mp4"> <track kind="subtitles" label="Français" srclang="fr" src="media/subtitles_fr.vtt" default> Votre navigateur ne supporte pas la balise vidéo. </video> ``` *Explication* : - `poster` affiche une image avant le démarrage de la vidéo. - Deux `<source>` permettent de fournir plusieurs formats pour une meilleure compatibilité. - `<track>` ajoute un fichier de sous‑titres au format WebVTT. - La largeur est fixée à 480 px ; la hauteur s’ajuste pour conserver le ratio. --- ## II. Création des formulaires ### A. Structure du formulaire > **Définition** : un formulaire HTML est délimité par la balise `<form>` ; il regroupe des champs de saisie et définit comment les données seront transmises au serveur. **Attributs essentiels** - `action` : URL du script qui traitera les données (peut être laissé vide pour un traitement côté client). - `method` : `GET` (données visibles dans l’URL) ou `POST` (données dans le corps de la requête, plus sécurisé pour de grandes quantités). - `enctype` : type d’encodage (`application/x-www-form-urlencoded` par défaut, `multipart/form-data` obligatoire pour les fichiers). #### Exemple 1 – Formulaire de contact simple (GET) ```html <form action="traitement.php" method="get"> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom" required> <br><br> <label for="mail">Courriel :</label> <input type="email" id="mail" name="mail" required> <br><br> <input type="submit" value="Envoyer"> </form> ``` *Résultat* : après validation, l’URL ressemble à `traitement.php?nom=Dupont&mail=dupont%40example.com`. #### Exemple 2 – Formulaire d’inscription avec validation HTML5 (POST) ```html <form action="inscription.php" method="post" enctype="multipart/form-data"> <fieldset> <legend>Informations personnelles</legend> <label> Nom : <input type="text" name="nom" pattern="[A-Za-z\-]+" title="Lettres et tiret uniquement" required> </label><br><br> <label> Âge : <input type="number" name="age" min="13" max="100" required> </label><br><br> <label> Photo de profil : <input type="file" name="photo" accept="image/*" required> </label> </fieldset><br> <input type="submit" value="S'inscrire"> </form> ``` *Explication* : - `pattern` impose une expression régulière pour le nom. - `min`/`max` limitent l’âge. - `accept` restreint le choix de fichier aux images. - Les données seront envoyées en `POST` avec encodage `multipart/form-data` nécessaire au transfert du fichier. --- ### B. Champs de saisie | Type d’`<input>` | Usage courant | Attributs spécifiques | |------------------|---------------|-----------------------| | `text` | texte court | `placeholder`, `maxlength` | | `password` | mot de passe | `minlength` | | `email` | adresse mail | validation automatique | | `number` | valeur numérique | `min`, `max`, `step` | | `date` | sélection date | `min`, `max` | | `checkbox` | choix multiple | `value`, `checked` | | `radio` | choix exclusif | `name` commun, `value` | | `file` | envoi de fichier | `accept`, `multiple` | | `textarea` | texte long | `rows`, `cols` | | `select` + `<option>` | liste déroulante | `selected`, `value` | | `button` | bouton générique | `type` (`submit`, `reset`, `button`) | > **Règle** : chaque champ doit posséder un attribut `name` (pas nécessairement unique) ; pour les groupes de radio ou de cases à cocher, le même `name` permet de regrouper les valeurs ; le serveur reçoit alors toutes les valeurs associées à ce `name`. #### Exemple 1 – Champ e‑mail avec aide et validation ```html <label for="courriel">Adresse e‑mail :</label> <input type="email" id="courriel" name="courriel" placeholder="nom@domaine.com" required> ``` *Résultat* : le navigateur vérifie que la valeur contient un `@` et un domaine ; le texte d’aide apparaît dans le champ lorsqu’il est vide. #### Exemple 2 – Groupe de radio avec `<fieldset>` et `<legend>` ```html <fieldset> <legend>Sexe :</legend> <label> <input type="radio" name="sexe" value="H" checked> Homme </label><br> <label> <input type="radio" name="sexe" value="F"> Femme </label><br> <label> <input type="radio" name="sexe" value="A"> Autre </label> </fieldset> ``` *Explication* : tous les `<input>` partagent le même `name="sexe"` ; seule la valeur du bouton sélectionné sera transmise. --- ### C. Boutons et envoi - `<input type="submit">` crée un bouton d’envoi lié au formulaire le plus proche. - `<button type="submit">` permet d’inclure du contenu HTML (texte, image) à l’intérieur du bouton. - `<button type="reset">` remet le formulaire à ses valeurs initiales. #### Exemple complet – Formulaire avec divers champs et affichage des données en GET ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Formulaire d'inscription</title> </head> <body> <form action="resultat.html" method="get"> <p> <label>Nom : <input type="text" name="nom" required></label> </p> <p> <label>Prénom : <input type="text" name="prenom" required></label> </p> <p> <label>Date de naissance : <input type="date" name="naissance" max="2008-12-31"> </label> </p> <p> <label>Genre : <input type="radio" name="genre" value="M" checked> Masculin <input type="radio" name="genre" value="F"> Féminin <input type="radio" name="genre" value="A"> Autre </label> </p> <p> <label>Compétences : <input type="checkbox" name="skill" value="HTML"> HTML <input type="checkbox" name="skill" value="CSS"> CSS <input type="checkbox" name="skill" value="JS"> JavaScript </label> </p> <p> <label>Message : <textarea name="message" rows="4" cols="30" placeholder="Votre avis..."></textarea> </label> </p> <p> <button type="submit">Envoyer</button> <button type="reset">Effacer</button> </p> </form> </body> </html> ``` *Résultat* : après validation, l’URL de `resultat.html` contiendra toutes les paires `nom=…&prenom=…&naissance=…&genre=…&skill=HTML&skill=CSS&message=…`. --- ## III. Mise en forme d’une page web avec le CSS ### A. Syntaxe CSS et modes d’inclusion > **Définition** : une règle CSS se compose d’un sélecteur, d’une accolade ouvrante, d’une liste de déclarations (propriété : valeur;) et d’une accolade fermante. **Trois façons d’appliquer du CSS** 1. **En ligne** : attribut `style` directement sur la balise HTML. 2. **Internal** : balise `<style>` dans la section `<head>`. 3. **External** : fichier `.css` lié par `<link rel="stylesheet" href="styles.css">`. #### Exemple 1 – CSS interne (couleur de fond et taille de police) ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Page stylisée</title> <style> body { background-color: #f0f8ff; /* AliceBlue */ font-family: Arial, sans-serif; font-size: 1.2em; margin: 2rem; } h1 { color: #2c3e50; text-align: center; } </style> </head> <body> <h1>Bienvenue sur notre site</h1> <p>Ceci est un paragraphe de démonstration.</p> </body> </html> ``` *Résultat* : fond bleu clair, texte centré, taille de police 1,2 × la taille de base du navigateur. #### Exemple 2 – CSS externe *Fichier `styles.css`* ```css /* styles.css */ body { background: #fff8e1; /* Amber clair */ color: #333; font-family: 'Georgia', serif; } .container { width: 80%; max-width: 960px; margin: 0 auto; padding: 1rem; } .navbar { background: #4caf50; padding: 0.5rem; } .navbar a { color: white; text-decoration: none; margin: 0 1rem; } ``` *Fichier HTML* ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Site avec CSS externe</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="navbar"> <a href="#">Accueil</a> <a href="#">À propos</a> <a href="#">Contact</a> </div> <div class="container"> <h1>Mon portfolio</h1> <p>Voici une présentation courte.</p> </div> </body> </html> ``` *Résultat* : une barre de navigation verte, un contenu centré avec une largeur maximale de 960 px, et une police élégante. --- ### B. Modèle de boîte (Box Model) > **Règle** : la largeur totale d’un élément bloc se calcule ainsi : $$ \text{largeur totale}= \text{width}+ \text{padding‑left}+ \text{padding‑right}+ \text{border‑left}+ \text{border‑right}+ \text{margin‑left}+ \text{margin‑right} $$ Le même principe s’applique à la hauteur. **Propriété clé** : `box-sizing` - `content-box` (valeur par défaut) : seules les valeurs de `width`/`height` définissent la zone de contenu. - `border-box` : la largeur spécifiée inclut le padding et la bordure ; très utile pour des layouts prévisibles. #### Exemple 1 – Calcul de dimensions avec `box-sizing:border-box` ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Box model</title> <style> .box { width: 200px; padding: 20px; border: 5px solid #333; margin: 10px; background: #ffeb3b; box-sizing: border-box; /* la largeur totale reste 200px */ } </style> </head> <body> <div class="box">Cette div fait exactement 200 px de large, padding et bordure inclus.</div> </body> </html> ``` *Résultat* : malgré un padding de 20 px et une bordure de 5 px, la largeur affichée reste 200 px grâce à `box-sizing:border-box`. #### Exemple 2 – Deux colonnes côte à côte avec `float` (méthode classique) ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Deux colonnes</title> <style> .col { width: 48%; padding: 1%; margin: 0 1%; background: #e0f7fa; box-sizing: border-box; float: left; } .clearfix::after { content: ""; display: table; clear: both; } </style> </head> <body> <div class="clearfix"> <div class="col">Colonne gauche – texte de remplissage.</div> <div class="col">Colonne droite – autre texte.</div> </div> </body> </html> ``` *Explication* : chaque colonne occupe 48 % de la largeur du conteneur plus 1 % de padding de chaque côté ; le `float:left` les place côte à côte ; le pseudo‑élément `::after` avec `clear:both` évite que le conteneur ne perde sa hauteur. --- ### C. Polices, couleurs et effets **Couleurs** - Nomées : `red`, `blue`, `green`, … - Hexadécimale : $\#RRGGBB$ où chaque paire représente l’intensité du rouge, vert, bleu sur 256 niveaux. - Fonctionnelle : `rgb(255,99,71)`, `rgba(255,99,71,0.5)` (alpha pour la transparence), `hsl(120,100%,50%)`. **Polices** - `font-family` : liste de polices de secours, ex. `"Helvetica Neue", Arial, sans-serif`. - `font-size` : unités `px`, `em`, `rem`, `%`. - `font-weight` : `normal`, `bold`, valeurs numériques 100‑900. - `font-style` : `normal`, `italic`, `oblique`. > **Astuce** : utiliser une police Google Fonts permet d’enrichir le design sans héberger les fichiers soi‑même. #### Exemple 1 – Police Google Fonts ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Google Fonts</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; background: #fafafa; color: #212121; margin: 2rem; } h1 { font-weight: 700; color: #1976d2; } </style> </head> <body> <h1>Titre avec Roboto Bold</h1> <p>Paragraphe en Roboto Regular.</p> </body> </html> ``` *Résultat* : la page utilise la police Roboto chargée depuis Google, avec un titre en gras et un corps régulier. #### Exemple 2 – Dégradé de fond ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Dégradé</title> <style> body { height: 100vh; margin: 0; background: linear-gradient(to bottom right, #ff9a9e, #fad0c4); font-family: Verdana, sans-serif; color: #333; display: flex; align-items: center; justify-content: center; } .card { background: rgba(255,255,255,0.8); padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } </style> </head> <body> <div class="card"> <h2>Bienvenue</h2> <p>Ce texte apparaît sur un fond dégradé avec une carte semi‑transparente.</p> </div> </body> </html> ``` *Résultat* : un dégradé allant du rose pâle au pêche, avec une carte blanche légèrement transparente centrée verticalement et horizontalement. --- ### D. Disposition simple avec Flexbox (optionnelle mais utile) > **Définition** : Flexbox permet d’aligner et de distribuer de l’espace parmi des éléments dans un conteneur flexible, même lorsque leur taille est inconnue ou dynamique. **Propriétés du conteneur** (`display:flex;`) - `flex-direction` : `row` (par défaut), `column`, `row-reverse`, `column-reverse`. - `justify-content` : alignement sur l’axe principal (`flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`). - `align-items` : alignement sur l’axe transversal (`stretch` par défaut, `flex-start`, `center`, `flex-end`, `baseline`). #### Exemple – Barre de navigation horizontale avec Flexbox ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Navbar Flexbox</title> <style> .navbar { display: flex; justify-content: space-around; align-items: center; background: #3f51b5; padding: 0.5rem; } .navbar a { color: white; text-decoration: none; font-weight: 500; } .navbar a:hover { text-decoration: underline; } </style> </head> <body> <div class="navbar"> <a href="#">Accueil</a> <a href="#">Programmes</a> <a href="#">Actualités</a> <a href="#">Contact</a> </div> </body> </html> ``` *Résultat* : les liens sont répartis uniformément sur la largeur de la barre, centrés verticalement, et changent d’apparence au survol. --- ## Synthèse du chapitre - **Tableaux** : `<table>`, `<tr>`, `<th>`, `<td>` ; attributs `colspan`, `rowspan` ; mise en forme via CSS (`border-collapse`, `padding`, `border-spacing`). - **Multimédia** : `<img src="" alt="">` ; `<audio controls><source src="" type=""></audio>` ; `<video controls><source src="" type=""></video><track kind="subtitles" src="" srclang="" label="">`. - **Formulaires** : `<form action="" method="GET|POST">` ; champs `<input type="text|email|password|number|date|checkbox|radio|file">` ; `<textarea>` ; `<select><option>` ; attributs de validation (`required`, `pattern`, `min`, `max`). - **CSS** : sélecteur `{propriété: valeur;}` ; trois modes d’inclusion (inline, internal, external) ; modèle de boîte (`width`, `padding`, `border`, `margin`, `box-sizing`) ; propriétés de texte (`font-family`, `font-size`, `color`) ; unités de longueur (`px`, `em`, `rem`, `%`) ; couleurs (`#RRGGBB`, `rgb()`, `hsl()`) ; Flexbox pour mise en page simple. > **À retenir** : toujours fournir un texte alternatif (`alt`) pour les images afin de garantir l’accessibilité. > **À retenir** : utiliser `method="POST"` avec `enctype="multipart/form-data"` dès qu’un fichier est transmis. > **À retenir** : privilégier `box-sizing:border-box` pour éviter les surprises de dimensionnement. > **À retenir** : valider les champs côté client avec les attributs HTML5 (`required`, `type="email"`, `pattern`, `min`, `max`) avant d’envisager du JavaScript. --- ## Glossaire | Terme | Définition | |-------|------------| | Balise | Élément HTML entouré de `<` et `>` (ex. `<p>`). | | Attribut | Information supplémentaire placée dans la balise ouvrante (ex. `src="image.jpg"`). | | DOCTYPE | Déclaration qui indique la version du HTML utilisée (`<!DOCTYPE html>`). | | Modèle de boîte | Concept CSS qui définit comment les dimensions d’un élément sont calculées (content, padding, border, margin). | | Pseudo‑élément | Mot-clé ajouté à un sélecteur pour styler une partie spécifique (`::before`, `::after`). | | Flexbox | Modèle de disposition CSS unidimensionnel permettant d’aligner et d’espace entre éléments. | | Validation HTML5 | Vérification automatique du contenu d’un champ grâce à des attributs comme `type`, `pattern`, `required`. | | Texte alternatif | Attribut `alt` décrivant le contenu d’une image pour les technologies d’assistance. | | Encodage multipart/form-data | Type d’envoi de formulaire nécessaire lorsqu’il contient des fichiers. | | Gradient | Transition progressive entre deux ou plusieurs couleurs, définie avec `linear-gradient()` ou `radial-gradient()`. | --- ## Exercices d'application corrigés ### Exercice 1 – Tableau simple **Consigne** : Créez un tableau HTML présentant les notes de trois élèves en Mathématiques et Physique. Le tableau doit contenir une ligne d’en‑tête et trois lignes de données. **Corrigé** ```html <table> <tr> <th>Élève</th> <th>Mathématiques</th> <th>Physique</th> </tr> <tr> <td>Alice</td> <td>14</td> <td>12</td> </tr> <tr> <td>Bob</td> <td>10</td> <td>13</td> </tr> <tr> <td>Clara</td> <td>16</td> <td>11</td> </tr> </table> ``` *Justification* : chaque `<tr>` représente une ligne ; la première ligne utilise `<th>` pour les titres ; les suivantes utilisent `<td>` pour les données. Aucun attribut de fusion n’est nécessaire ici. --- ### Exercice 2 – Image avec lien et dimensions en pourcentage **Consigne** : Insérez une image `photos/logo.png` qui fait 40 % de la largeur de son conteneur, qui est cliquable et redirige vers `https://www.example.com` dans un nouvel onglet, avec un texte alternatif « Logo du site ». **Corrigé** ```html <a href="https://www.example.com" target="_blank"> <img src="photos/logo.png" alt="Logo du site" width="40%"> </a> ``` *Justification* : l’attribut `width="40%"` définit la largeur relative ; l’encapsulation dans `<a>` rend l’image cliquable ; `target="_blank"` ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre. --- ### Exercice 3 – Formulaire de connexion **Consigne** : Réalisez un formulaire permettant à un utilisateur de saisir son identifiant (texte) et son mot de passe (password). Le formulaire doit envoyer les données en méthode POST vers `login.php`. Le champ mot de passe doit contenir un texte d’aide « Au moins 8 caractères ». **Corrigé** ```html <form action="login.php" method="post"> <label> Identifiant : <input type="text" name="identifiant" required> </label><br><br> <label> Mot de passe : <input type="password" name="mdp" placeholder="Au moins 8 caractères" minlength="8" required> </label><br><br> <input type="submit" value="Se connecter"> </form> ``` *Justification* : `method="post"` garantit que les données ne sont pas visibles dans l’URL ; `required` oblige l’utilisateur à remplir les deux champs ; `minlength="8"` impose la longueur minimale du mot de passe ; le `placeholder` fournit l’indication demandée. --- ### Exercice 4 – CSS : couleur de fond et police personnalisée **Consigne** : À l’aide d’une feuille de style externe `style.css`, donnez à la page un fond de couleur `#e8f5e9` (vert très clair) et utilisez la police « Courier New » avec une taille de 1,1 em pour tout le texte. **Corrigé** *Fichier `style.css`* ```css body { background-color: #e8f5e9; font-family: 'Courier New', monospace; font-size: 1.1em; margin: 2rem; } ``` *Fichier HTML* ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Page stylisée</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Titre de la page</h1> <p>Ceci est un paragraphe de démonstration.</p> </body> </html> ``` *Justification* : la règle `background-color` applique la couleur souhaitée ; `font-family` spécifie la police avec une famille de secours `monospace` ; `font-size:1.1em` augmente la taille relativement à la taille de base du navigateur. --- ### Exercice 5 – Formulaire avec liste déroulante et case à cocher **Consigne** : Créez un formulaire permettant à l’utilisateur de choisir sa catégorie d’âge (liste déroulante : « Moins de 18 », « 18‑35 », « 36‑60 », « Plus de 60 ») et d’indiquer s’il possède un permis de conduire (case à cocher). Le formulaire doit envoyer les données en méthode GET vers `resultat.html`. **Corrigé** ```html <form action="resultat.html" method="get"> <label> Tranche d'âge : <select name="age"> <option value="<18">Moins de 18</option> <option value="18-35">18-35</option> <option value="36-60">36-60</option> <option value=">60">Plus de 60</option> </select> </label><br><br> <label> <input type="checkbox" name="permis" value="oui"> Je possède un permis de conduire </label><br><br> <input type="submit" value="Envoyer"> </form> ``` *Justification* : le `<select>` contient plusieurs `<option>` chacune avec une `value` qui sera transmise ; la case à cocher possède un `name` et une `value` qui n’apparaîtront dans la requête que si elle est cochée ; `method="get"` place les paramètres dans l’URL de `resultat.html`. --- ### Exercice 6 – Disposition Flexbox : trois blocs égaux **Consigne** : À l’aide de Flexbox, créez un conteneur contenant trois `<div>` de même hauteur, chacune avec un fond différent (`#ffebee`, `#e8f5e9`, `#e3f2fd`). Les blocs doivent être répartis uniformément sur la largeur de la page, avec un espace de 1 % entre eux. **Corrigé** ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Trois blocs Flexbox</title> <style> .container { display: flex; justify-content: space-between; /* espace égal entre les éléments */ gap: 1%; /* espace de 1% entre les blocs */ } .block { flex: 1; /* chaque bloc prend une part égale */ height: 200px; /* hauteur fixe pour l’exemple */ } .b1 { background:#ffebee; } .b2 { background:#e8f5e9; } .b3 { background:#e3f2fd; } </style> </head> <body> <div class="container"> <div class="block b1"></div> <div class="block b2"></div> <div class="block b3"></div> </div> </body> </html> ``` *Justification* : `display:flex` active le modèle Flexbox sur le conteneur ; `justify-content:space-between` répartit les blocs avec des espaces égaux entre eux ; `gap:1%` ajoute un espace supplémentaire de 1 % entre les éléments ; `flex:1` sur chaque bloc leur donne une part égale de l’espace restant, assurant ainsi la même largeur. La hauteur fixe de 200 px permet de visualiser clairement le résultat. --- ## Erreurs fréquentes | Erreur fréquente | Pourquoi elle se produit | Comment l’éviter | |------------------|--------------------------|------------------| | Oublier l’attribut `alt` sur `<img>` | On pense que l’image est suffisamment explicite ou on copie‑colle sans vérifier. | Toujours ajouter un texte alternatif descriptif ; si l’image est purement décorative, utiliser `alt=""` (vide) pour être ignoré par les lecteurs d’écran. | | Utiliser `method="GET"` pour un formulaire contenant un fichier | Les données d’un fichier ne peuvent pas être transmises dans l’URL (limite de taille et de caractères). | Dès qu’un `<input type="file">` est présent, passer à `method="POST"` et ajouter `enctype="multipart/form-data"`. | | Confondre `padding` et `margin` | Les deux créent de l’espace extérieur, mais leurs effets sur le fond et le positionnement diffèrent. | Retenir que `padding` agit **à l’intérieur** de la bordure (affecte le fond), tandis que `margin` agit **à l’extérieur** (influe sur l’écart avec les autres éléments). | | Omettre l’unité dans une valeur CSS (ex. `width:200`) | Sans unité, le navigateur ignore la propriété ou applique une valeur par défaut inattendue. | Toujours spécifier une unité (`px`, `%`, `em`, `rem`, `vh`, `vw`) sauf pour les valeurs nulles (`0` peut être sans unité). | | Utiliser des balises de fermeture manquantes (`</p>`, `</div>`) | Le HTML reste valide pour le navigateur mais le DOM devient imprévisible, surtout avec CSS ou JavaScript. | Valider le code avec un validateur (W3C Validator) ou un éditeur qui souligne les balises non fermées. | | Appliquer `float` sans nettoyer le conteneur | Les éléments flottants sortent du flux normal, provoquant un effondrement de la hauteur du conteneur parent. | Utiliser une méthode de clearfix (`.clearfix::after{content:"";display:table;clear:both;}`) ou passer à Flexbox/Grid pour les mises en page modernes. | --- *Fin du cours.*