U.A.6 : PROGRAMMATION HTML (partie 2/2)

## Objectifs et prérequis **Objectifs** : à la fin de ce chapitre l’élève sera capable de - insérer une image dans une page web en maîtrisant les attributs `src`, `alt`, `width`, `height` et `title` ; - créer des liens hypertextes externes, internes et des ancres avec les attributs `href`, `target`, `rel` et `title` ; - concevoir des listes ordonnées, non ordonnées et de définition, en utilisant les attributs `type`, `start` et `reversed` ; - élaborer un formulaire HTML complet, choisir le type de champ adapté (`text`, `email`, `number`, `date`, `checkbox`, `radio`, `file`, `textarea`, `select`) et appliquer les attributs de validation HTML5 (`required`, `min`, `max`, `step`, `pattern`) ; - interpréter le résultat d’un formulaire soumis (méthode GET/POST) et connaître les bonnes pratiques d’accessibilité. **Prérequis** : connaître la structure de base d’un document HTML (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`), savoir écrire des balises ouvrantes/fermantes et utiliser des attributs simples (`id`, `class`). --- ## Introduction contextualisée Dans le monde actuel, chaque interaction avec un service en ligne passe par une page web. Que ce soit pour consulter un cours, remplir une inscription ou acheter un produit, l’utilisateur interagit avec des éléments tels que des images, des liens, des listes et des formulaires. Maîtriser l’insertion de ces composants permet non seulement de rendre une page attractive et fonctionnelle, mais aussi de respecter les normes d’accessibilité (WCAG) et de préparer l’élève aux épreuves du Probatoire où la création d’une page web complète est souvent demandée. --- ## I. Leçon 17 : Insertion des images, liens et listes dans une page web ### A. Images > Une image HTML s’insère avec la balise **`<img>`** qui est vide (pas de balise fermante) et nécessite obligatoirement l’attribut `src` indiquant l’URL de la ressource. **Attributs essentiels** - `src` : URL de l’image (relative ou absolue). - `alt` : texte alternatif, lu par les lecteurs d’écran et affiché si l’image ne charge pas. - `width` / `height` : dimensions en pixels ou en pourcentage ; permettent d’éviter le reflow du layout. - `title` : info‑bulle affichée au survol. **Exemple 1 – Image simple** ```html <img src="images/logo.png" alt="Logo de l'établissement" width="150" height="50" title="Cliquez pour revenir à l'accueil"> ``` *Résultat* : une image de 150 px de large, 50 px de haut, avec un texte alternatif et une info‑bulle. **Exemple 2 – Image cliquable** ```html <a href="https://www.example.com" target="_blank" rel="noopener"> <img src="images/banniere.jpg" alt="Banner publicitaire" width="600" height="200"> </a> ``` *Résultat* : l’image agit comme un lien ouvrant le site exemple dans un nouvel onglet, l’attribut `rel="noopener"` prévient les vulnérabilités de sécurité. ### B. Liens > Un lien hypertexte s’insère avec la balise **`<a>`** (anchor) dont l’attribut `href` spécifie la destination. **Attributs fréquents** - `href` : URL cible (peut être une ancre `#section`). - `target` : `_self` (même onglet, défaut), `_blank` (nouvel onglet), `_parent`, `_top`. - `rel` : décrit la relation (`noopener`, `nofollow`, `external`). - `title` : texte d’info‑bulle. **Exemple 1 – Lien externe** ```html <a href="https://www.minec.gov.cm" target="_blank" rel="noopener external" title="Visiter le site du MINEC">Ministère de l'Éducation nationale</a> ``` *Résultat* : texte cliquable ouvrant le site du MINEC dans un nouvel onglet. **Exemple 2 – Lien interne (ancre)** ```html <!-- Dans le même document --> <h2 id="contact">Nous contacter</h2> <p>Pour toute question, <a href="#contact" title="Aller à la section contact">cliquez ici</a>.</p> ``` *Résultat* : le clic fait défiler la page jusqu’à l’élément dont l’`id` vaut `"contact"`. ### C. Listes > Une liste HTML se crée avec les balises **`<ul>`** (non ordonnée), **`<ol>`** (ordonnée) ou **`<dl>`** (définition). Chaque élément de liste utilise `<li>` ; pour les définitions, `<dt>` (terme) et `<dd>` (description). **Attributs utiles** - `type` (pour `<ol>`) : `1`, `A`, `a`, `I`, `i`. - `start` : numéro de départ. - `reversed` : ordre décroissant (HTML5). **Exemple 1 – Liste non ordonnée** ```html <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> ``` *Résultat* : trois puces classiques. **Exemple 2 – Liste ordonnée personnalisée et imbriquée** ```html <ol type="A" start="3" reversed> <li>Première étape <ul> <li>Sous‑étape A</li> <li>Sous‑étape B</li> </ul> </li> <li>Deuxième étape</li> <li>Troisième étape</li> </ol> ``` *Résultat* : la liste commence à « C », compte à rebours (C, B, A) et contient une sous‑liste à puces sous le premier élément. --- ## II. Leçon 18 : Insertion d’un formulaire dans une page web ### A. Structure du formulaire > Un formulaire HTML est délimité par la balise **`<form>`** qui regroupe les champs et définit comment les données seront envoyées au serveur. **Attributs principaux** - `action` : URL du script de traitement (peut être vide pour soumettre à la même page). - `method` : `GET` (données dans l’URL, adapté aux recherches) ou `POST` (données dans le corps de la requête, adapté aux données sensibles). - `enctype` : type d’encodage du corps (`application/x-www-form-urlencoded` par défaut, `multipart/form-data` obligatoire pour les fichiers). ### B. Champs de saisie Le cœur du formulaire repose sur l’élément **`<input>`** dont le type varie selon la donnée attendue. | Type d’input | Usage | Attributs spécifiques fréquents | |--------------|-------|---------------------------------| | `text` | ligne de texte simple | `placeholder`, `required`, `minlength`, `maxlength` | | `password` | saisie masquée | identique à `text` | | `email` | adresse e‑mail (validation HTML5) | `placeholder`, `required` | | `number` | valeur numérique | `min`, `max`, `step` | | `date` | sélection de date | `min`, `max` | | `checkbox` | case à cocher (0/1) | `value`, `checked` | | `radio` | bouton radio (choix unique) | `name` commun, `value`, `checked` | | `file` | téléchargement de fichier | `accept`, `multiple` | | `submit` | bouton d’envoi | `value` (texte du bouton) | | `reset` | bouton de réinitialisation | `value` | | `textarea` | zone de texte multiligne | `rows`, `cols`, `placeholder`, `required` | | `select` + `option` | liste déroulante | `multiple`, `size` | **Attributs de validation HTML5** - `required` : champ obligatoire. - `pattern` : expression régulière JavaScript que la valeur doit respecter. - `min` / `max` / `step` : bornes et pas pour les champs numériques/date. - `minlength` / `maxlength` : limites de longueur pour les chaînes. ### C. Exemple complet – Formulaire de contact ```html <form action="traitement.php" method="post" enctype="multipart/form-data"> <fieldset> <legend>Coordonnées</legend> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom" required placeholder="Dupont" minlength="2" maxlength="50"><br><br> <label for="mail">E‑mail :</label> <input type="email" id="mail" name="mail" required placeholder="exemple@domain.cm"><br><br> <label for="tel">Téléphone :</label> <input type="tel" id="tel" name="tel" pattern="[0-9]{9}" placeholder="222 33 44 55"><br><br> </fieldset> <fieldset> <legend>Message</legend> <label for="sujet">Sujet :</label> <input type="text" id="sujet" name="sujet" required><br><br> <label for="msg">Message :</label> <textarea id="msg" name="msg" rows="5" cols="40" required placeholder="Votre demande..."></textarea><br><br> <label for="pj">Pièce jointe (facultatif) :</label> <input type="file" id="pj" name="pj" accept=".pdf,.jpg,.png"><br><br> </fieldset> <p> <input type="submit" value="Envoyer"> <input type="reset" value="Effacer"> </p> </form> ``` *Explication* : - Le formulaire envoie les données en `POST` vers `traitement.php`. - Chaque champ possède un `<label>` associé via l’attribut `for`/`id` pour l’accessibilité. - Les attributs `required`, `pattern`, `minlength`, `maxlength` assurent une validation côté navigateur avant l’envoi. - Le champ `file` accepte uniquement PDF, JPG ou PNG grâce à `accept`. ### D. Traitement côté client (HTML5) Lorsque le navigateur rencontre un champ avec `required` ou `pattern`, il bloque l’envoi tant que la condition n’est pas remplie et affiche une bulle d’erreur native. Aucun code JavaScript n’est nécessaire pour ces validations de base, ce qui simplifie le développement et garantit une expérience uniforme. --- ## III. Synthèse du chapitre - **Images** : `<img src="…" alt="…" width="…" height="…" title="…">`. - **Liens** : `<a href="…" target="…" rel="…" title="…">texte</a>`. Ancres avec `#id`. - **Listes** : `<ul><li>…</li></ul>` (non ordonnée), `<ol type="A" start="3" reversed><li>…</li></ol>` (ordonnée), `<dl><dt>…</dt><dd>…</dd></dl>` (définition). - **Formulaires** : `<form action="…" method="GET|POST" enctype="…">` contenant `<input type="…">`, `<textarea>`, `<select>`. - **Attributs clés** : `src`, `alt`, `href`, `target`, `rel`, `name`, `value`, `placeholder`, `required`, `pattern`, `min`, `max`, `step`. - **Bonnes pratiques** : toujours fournir un texte alternatif (`alt`), associer chaque champ à un `<label>`, utiliser `rel="noopener"` avec `target="_blank"`, privilégier `POST` pour les données sensibles, valider côté HTML5 avant de recourir à JavaScript. --- ## Glossaire | Terme | Définition | |-------|------------| | **Balise** | Élément HTML délimité par `<` et `>` (ex. `<img>`). | | **Attribut** | Propriété d’une balise qui modifie son comportement ou son apparence (ex. `src`). | | **Alt** | Texte alternatif d’une image, lu par les lecteurs d’écran. | | **Ancre** | Point d’arrivée d’un lien interne, identifié par l’attribut `id`. | | **Méthode GET** | Envoie les données du formulaire dans l’URL (visible, limité en taille). | | **Méthode POST** | Envoie les données dans le corps de la requête (invisible, adapté aux fichiers). | | **Enctype** | Type d’encodage des données du formulaire (`application/x-www-form-urlencoded`, `multipart/form-data`). | | **Placeholder** | Texte d’exemple affiché dans un champ vide jusqu’à la saisie. | | **Required** | Attribut booléen rendant un champ obligatoire avant soumission. | | **Pattern** | Expression régulière que la valeur du champ doit respecter pour être valide. | | **Radio** | Type d’input permettant un choix unique parmi plusieurs options. | | **Checkbox** | Type d’input permettant zéro ou plusieurs choix. | | **Textarea** | Zone de texte multiligne. | | **Select/Option** | Liste déroulante où chaque `<option>` définit une valeur possible. | | **Fieldset/Legend** | Regroupe sémantiquement des champs liés (`<fieldset>`) avec un titre (`<legend>`). | --- ## Exercices d'application corrigés ### Exercice 1 – Image et lien simple **Consigne** : Écrire le code HTML qui affiche une image `logo.png` située dans le dossier `images`, avec un texte alternatif « Logo de l’école », une largeur de 200 px, et qui renvoie vers la page d’accueil `index.html` lorsqu’on clique dessus. **Corrigé** ```html <a href="index.html"> <img src="images/logo.png" alt="Logo de l’école" width="200"> </a> ``` *Justification* : La balise `<a>` enveloppe `<img>` pour rendre l’image cliquable. L’attribut `href` pointe vers `index.html`. L’image possède les attributs requis `src`, `alt` et `width`. --- ### Exercice 2 – Liste de définition **Consigne** : Créer une liste de définition contenant les termes « HTML », « CSS » et « JavaScript » avec leurs descriptions respectives : « Langage de balisage pour structurer le contenu », « Feuille de style pour la présentation », « Langage de programmation côté client ». **Corrigé** ```html <dl> <dt>HTML</dt> <dd>Langage de balisage pour structurer le contenu</dd> <dt>CSS</dt> <dd>Feuille de style pour la présentation</dd> <dt>JavaScript</dt> <dd>Langage de programmation côté client</dd> </dl> ``` *Justification* : Chaque terme est placé dans `<dt>`, sa définition dans `<dd>`. La balise englobante `<dl>` indique une liste de définition. --- ### Exercice 3 – Formulaire de connexion **Consigne** : Réaliser un formulaire permettant de saisir un identifiant (texte) et un mot de passe (password). Le formulaire doit envoyer les données en `POST` vers `login.php`. Le champ identifiant doit être obligatoire et contenir au moins 3 caractères. Le champ mot de passe doit être obligatoire. Ajouter un bouton de soumission intitulé « Se connecter ». **Corrigé** ```html <form action="login.php" method="post"> <label for="id">Identifiant :</label> <input type="text" id="id" name="identifiant" required minlength="3" placeholder="ex: utilisateur1"><br><br> <label for="pwd">Mot de passe :</label> <input type="password" id="pwd" name="motdepasse" required><br><br> <input type="submit" value="Se connecter"> </form> ``` *Justification* : - `method="post"` envoie les données dans le corps de la requête. - `required` rend les deux champs obligatoires. - `minlength="3"` impose une longueur minimale pour l’identifiant. - Les `<label>` sont associés via `for`/`id` pour l’accessibilité. --- ### Exercice 4 – Formulaire d’inscription avec liste déroulante et case à cocher **Consigne** : Élaborer un formulaire d’inscription contenant : - Un champ `nom` (texte, obligatoire). - Un champ `email` (type email, obligatoire). - Une liste déroulante `filière` avec les options « Sciences », « Lettres », « Technique » (obligatoire). - Une case à cocher `newsletter` (non obligatoire) pour recevoir des infos. - Un bouton « Envoyer ». Le formulaire doit utiliser la méthode `POST` et pointer vers `inscription.php`. **Corrigé** ```html <form action="inscription.php" method="post"> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom" required><br><br> <label for="mail">E‑mail :</label> <input type="email" id="mail" name="email" required><br><br> <label for="fil">Filière :</label> <select id="fil" name="filiere" required> <option value="">-- Choisissez une filière --</option> <option value="sciences">Sciences</option> <option value="lettres">Lettres</option> <option value="technique">Technique</option> </select><br><br> <label for="news"> <input type="checkbox" id="news" name="newsletter" value="oui"> Je souhaite recevoir la newsletter </label><br><br> <input type="submit" value="Envoyer"> </form> ``` *Justification* : - Chaque champ possède un `<label>` associé. - Le `<select>` contient une première option vide pour forcer un choix réel (obligatoire grâce à `required`). - La case à cocher possède un `value` qui sera envoyé uniquement si elle est cochée. - Tous les champs obligatoires utilisent `required`. --- ### Exercice 5 – Tableau d’images avec légendes (défi) **Consigne** : Créer une galerie de trois images situées dans le dossier `photos` (`img1.jpg`, `img2.jpg`, `img3.jpg`). Chaque image doit avoir une largeur de 150 px, un texte alternatif décrivant brièvement l’image, et être entourée d’une légende placée dessous dans un paragraphe `<p class="legend">`. Le tout doit être présenté dans une liste non ordonnée où chaque `<li>` contient l’image et sa légende. **Corrigé** ```html <ul style="list-style:none; padding:0; display:flex; gap:20px;"> <li> <figure> <img src="photos/img1.jpg" alt="Paysage montagneux" width="150"> <figcaption class="legend">Paysage montagneux</figcaption> </figure> </li> <li> <figure> <img src="photos/img2.jpg" alt="Fleur rouge" width="150"> <figcaption class="legend">Fleur rouge</figcaption> </figure> </li> <li> <figure> <img src="photos/img3.jpg" alt="Chaton jouant" width="150"> <figcaption class="legend">Chatons jouant</figcaption> </figure> </li> </ul> ``` *Justification* : - La liste `<ul>` est stylisée en ligne grâce au CSS en ligne (flex) pour éviter les puces et espacer les éléments. - Chaque image est encapsulée dans un `<figure>` afin d’associer sémantiquement l’image (`<img>`) à sa légende (`<figcaption>`). - Les attributs `src`, `alt` et `width` sont présents. - La classe `legend` permet de mettre en forme les légendes si besoin. --- ## Erreurs fréquentes | Erreur fréquente | Pourquoi c’est un problème | Comment l’éviter | |------------------|----------------------------|------------------| | **Oublier l’attribut `alt` sur les images** | Les lecteurs d’écran ne peuvent pas décrire l’image ; cela nuit à l’accessibilité et peut être pénalisé lors de l’évaluation. | Toujours fournir un `alt` descriptif, même si l’image est décorative (dans ce cas, utiliser `alt=""`). | | **Utiliser `target="_blank"` sans `rel="noopener"`** | Ouvre une vulnérabilité de type « reverse tabnabbing » permettant à la page ouverte de manipuler la fenêtre d’origine. | Ajouter systématiquement `rel="noopener"` (ou `rel="noopener noreferrer"` quand on veut aussi masquer le référent). | | **Ne pas associer un `<label>` à un champ de formulaire** | L’utilisateur ne peut pas cliquer sur le texte pour activer le champ ; cela réduit l’ergonomie et l’accessibilité. | Utiliser l’attribut `for` sur le `<label>` qui correspond à l’`id` du champ, ou envelopper le champ dans le `<label>`. | | **Spécifier une largeur/ hauteur en pourcentage sans définir la taille du conteneur** | L’image peut devenir déformée ou ne pas s’afficher comme attendu. | Définir une largeur fixe en pixels ou garantir que l’élément parent possède une largeur explicite. | | **Employer la méthode `GET` pour transmettre des mots de passe ou des données sensibles** | Les données apparaissent dans l’URL, visibles dans l’historique du navigateur et les logs serveur. | Utiliser `POST` pour toute donnée confidentielle ou de taille importante. | | **Omettre l’attribut `name` sur un champ de formulaire** | Le champ n’est pas envoyé au serveur ; la valeur est perdue. | Chaque contrôle destiné à être soumis doit posséder un attribut `name` unique et significatif. | --- *Fin du cours.*