PROGRAMMATION HTML

## Objectifs et prérequis **Objectifs** : À la fin de ce chapitre, l’élève sera capable de - expliquer ce qu’est le HTML et son rôle dans le World Wide Web ; - rédiger la structure minimale d’une page HTML5 (doctype, `<html>`, `<head>`, `<body>`) ; - identifier et utiliser les balises sémantiques et de mise en forme de texte ; - insérer des images, créer des hyperliens et construire différents types de listes ; - concevoir un formulaire interactif avec les différents types de champs de saisie, gérer son envoi et appliquer des attributs de validation HTML5 ; - déboguer une page HTML en repérant les erreurs de syntaxe les plus fréquentes. **Prérequis** : - notions de base de l’informatique (système d’exploitation, navigateur web) ; - capacité à éditer un fichier texte avec un éditeur simple (Bloc‑notes, Notepad++, VS Code) ; - compréhension du concept de balise ouvrante/fermante et d’attribut (déjà vu en initiation au numérique). > **À retenir** : Le HTML (HyperText Markup Language) est un langage de balisage destiné à décrire la structure logique d’un document destiné à être affiché dans un navigateur web. --- ## Introduction contextualisée Depuis les débuts du Web au début des années 1990, le HTML constitue la langue universelle qui permet à tout navigateur de transformer un fichier texte en une page riche en contenu. Au Cameroun, le programme officiel de la série SH et AVC en classe de Première place le HTML au cœur du module « Informatique » afin d’initier les élèves aux technologies du Web, compétences indispensables pour les études supérieures et l’insertion professionnelle dans un monde de plus en plus numérique. Ce cours se veut autonome : chaque notion est définie, illustrée par des exemples complets, puis mise en pratique grâce à des exercices corrigés de type baccalauréat. --- ## I. Leçon 15 : Généralités sur le HTML ### A. Qu’est‑ce que le HTML ? Le HTML est un langage de balisage (markup) qui utilise des **balises** (tags) entourées de chevrons `<` et `>` pour indiquer la nature du contenu qu’elles encadrent. Il ne décrit pas la présentation visuelle (c’est le rôle du CSS) mais la **sémantique** du document : titres, paragraphes, listes, tableaux, formulaires, etc. > **À retenir** : Un document HTML est constitué d’une hiérarchie d’éléments imbriqués, racine étant l’élément `<html>`. ### B. Structure de base d’une page HTML5 ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Titre de la page</title> </head> <body> <!-- Contenu visible --> </body> </html> ``` - `<!DOCTYPE html>` indique au navigateur que le document respecte la spécification HTML5. - L’attribut `lang="fr"` précise la langue principale du contenu (utile pour l’accessibilité et le référencement). - `<meta charset="UTF-8">` définit l’encodage des caractères, indispensable pour afficher correctement les caractères accentués et les symboles africains. - `<title>` apparaît dans l’onglet du navigateur et est utilisé par les moteurs de recherche. - Tout le contenu visible se place entre les balises `<body>` et `</body>`. ### C. Les balises, éléments, attributs - **Balise ouvrante** : `<nom>` ; **balise fermante** : `</nom>` (certaines balises sont *void* : elles n’ont pas de fermante, ex. `<br>`, `<img>`, `<input>`). - **Élément** : combinaison d’une balise ouvrante, éventuellement du contenu, et d’une balise fermante. - **Attribut** : paire `nom="valeur"` placée dans la balise ouvrante, modifie le comportement ou l’apparence de l’élément. > **À retenir** : Les noms d’attributs sont insensibles à la casse en HTML, mais il est recommandé d’utiliser la minuscule pour la lisibilité. ### D. Exemples entièrement résolus #### Exemple 1 – Page minimale avec titre et paragraphe ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma première page</title> </head> <body> <h1>Bienvenue sur mon site</h1> <p>Ceci est un paragraphe d’introduction.</p> </body> </html> ``` **Étapes** : 1. Déclaration du doctype. 2. Ouverture de `<html>` avec attribut `lang`. 3. En-tête (`<head>`) contenant l’encodage et le titre. 4. Corps (`<body>`) contenant un titre de niveau 1 (`<h1>`) puis un paragraphe (`<p>`). **Résultat attendu** : Dans le navigateur, on voit le texte « Bienvenue sur mon site » en gros caractères gras, suivi de la phrase « Ceci est un paragraphe d’introduction. ». #### Exemple 2 – Utilisation d’attributs sur une image (anticipation) ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Test d’image</title> </head> <body> <img src="images/logo.png" alt="Logo de l’établissement" width="200" height="80"> </body> </html> ``` **Étapes** : 1. Le doctype et l’en‑tête sont identiques à l’exemple précédent. 2. Dans le corps, la balise `<img>` (void) possède quatre attributs : - `src` indique le chemin relatif du fichier image. - `alt` fournit une description textuelle (accessibilité). - `width` et `height` fixent la largeur et la hauteur en pixels (on évite de déformer l’image). **Résultat** : L’image apparaît avec une largeur de 200 px et une hauteur de 80 px ; si l’image ne charge pas, le texte « Logo de l’établissement » s’affiche à la place. --- ## II. Leçon 16 : Mise en forme d’un document HTML ### A. Balises de titre (`<h1>` à `<h6>`) Les six niveaux de titre permettent de structurer hiérarchiquement le contenu. `<h1>` est le plus important (souvent utilisé une seule fois par page) ; `<h6>` le moins important. > **À retenir** : Ne jamais sauter de niveau (ex. passer directement de `<h2>` à `<h4>`) afin de préserver la sémantique et l’accessibilité. ### B. Paragraphes et sauts de ligne - `<p>` définit un paragraphe ; le navigateur ajoute automatiquement un espacement vertical avant et après. - `<br>` insère un saut de ligne simple sans créer un nouveau paragraphe (utile pour les adresses ou les poèmes). ### C. Mise en forme du texte (gras, italique, souligné, etc.) | Balise | Effet | Exemple | |--------|-------|---------| | `<b>` | Gras sémantique faible (mise en évidence) | `<b>texte en gras</b>` | | `<strong>` | Gras fort (importance sémantique) | `<strong>texte important</strong>` | | `<i>` | Italique (voix différente, terme technique) | `<i>texte en italique</i>` | | `<em>` | Italique fort (accentuation) | `<em>texte accentué</em>` | | `<u>` | Souligné (souvent déconseillé pour éviter confusion avec lien) | `<u>texte souligné</u>` | | `<s>` | Barré (texte supprimé) | `<s>texte barré</s>` | | `<sup>` | Exposant | `x<sup>2</sup>` | | `<sub>` | Indice | `H<sub>2</sub>O` | | `<mark>` | Surbrillance (fond jaune) | `<mark>texte marqué</mark>` | | `<small>` | Texte plus petit (mentions légales) | `<small>texte petit</small>` | > **À retenir** : Privilégier `<strong>` et `<em>` plutôt que `<b>` et `<i>` pour véhiculer une signification sémantique. ### D. Couleurs et arrière‑plan (attributs obsolètes mais encore au programme) Dans le programme officiel du Cameroun, on rencontre encore les attributs `bgcolor` et `text` directement dans les balises `<body>`, `<table>`, `<td>`, etc. Ils acceptent soit un nom de couleur anglais (`red`, `blue`), soit une valeur hexadécimale `#RRGGBB`. ```html <body bgcolor="#f0f0f0" text="#000080"> <p>Texte sur fond gris clair.</p> </body> ``` > **À retenir** : En HTML5, la mise en forme couleur se fait préférablement avec CSS (`style="background-color:#f0f0f0; color:#000080;"`), mais connaître les attributs historiques est nécessaire pour l’examen. ### E. Exemples entièrement résolus #### Exemple 1 – Page avec titres, paragraphes, mise en forme du texte et couleur de fond ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mise en forme</title> </head> <body bgcolor="#e6f7ff"> <h1>Titre principal</h1> <h2>Sous‑titre</h2> <p> Ceci est un <strong>texte important</strong>, suivi d’un <em>texte accentué</em> et d’un <span style="text-decoration:underline;">texte souligné</span>. </p> <p> Formule chimique : H<sub>2</sub>O<sup>+</sup>.<br> Nombre de couleurs possibles : $2^{24}=16\,777\,216$. </p> </body> </html> ``` **Étapes** : 1. Déclaration doctype, en‑tête avec encodage UTF‑8. 2. `<body bgcolor="#e6f7ff">` applique un fond bleu très pâle. 3. `<h1>` et `<h2>` structurent la hiérarchie. 4. Dans le premier paragraphe, `<strong>` met en gras sémantique, `<em>` en italique accentué, et un `<span>` avec `style="text-decoration:underline;"` montre comment souligner via CSS (on peut aussi utiliser `<u>`). 5. Deuxième paragraphe montre les balises `<sub>` et `<sup>` pour l’indice et l’exposant, puis un saut de ligne `<br>` avant une formule LaTeX (affichée telle quelle dans le source, mais l’élève doit savoir qu’elle représente $2^{24}$). **Résultat** : Fond bleu clair, titre gros, sous‑titre légèrement plus petit, texte avec gras, italique, souligné, puis la formule chimique H₂O⁺ et la mention du nombre de couleurs. #### Exemple 2 – Utilisation des attributs `color` et `face` (police) sur un paragraphe ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Police et couleur</title> </head> <body> <font color="#ff0000" face="Arial, sans-serif"> Ce texte est rouge et utilise la police Arial. </font> </body> </html> ``` **Étapes** : 1. Le doctype et l’en‑tête sont standards. 2. Dans le corps, la balise `<font>` (obsolète mais au programme) possède deux attributs : - `color="#ff0000"` définit la couleur rouge en hexadécimal. - `face="Arial, sans-serif"` suggère d’utiliser la police Arial ; si elle n’est pas disponible, le navigateur recourt à une police sans empattement générique. **Résultat** : Le texte apparaît en rouge, avec la police Arial (ou une équivalente). > **À retenir** : Bien que `<font>` soit déprécié, il reste présent dans les sujets d’examen du Cameroun ; il faut savoir l’utiliser et comprendre qu’en pratique on privilégie CSS. --- ## III. Leçon 17 : Insertion des images, liens et listes dans une page web ### A. Images – balise `<img>` - **Attributs essentiels** : - `src` (source) : chemin relatif ou absolu vers le fichier image. - `alt` (texte alternatif) : description pour les lecteurs d’écran et quand l’image ne charge pas. - `width` / `height` : dimensions en pixels ou en pourcentage (éviter de déformer l’image). - `title` : info‑bulle au survol (facultatif). - `usemap` : associe une map côté client (au programme, mais rarement utilisé). > **À retenir** : L’attribut `alt` est obligatoire pour l’accessibilité ; il doit être concis mais descriptif. ### B. Liens – balise `<a>` - **Attributs principaux** : - `href` (hypertext reference) : URL cible (peut être absolue, relative, ou `mailto:`). - `target` : où ouvrir le lien (`_self` par défaut, `_blank` pour nouvel onglet/fenêtre, `_parent`, `_top`). - `title` : info‑bulle. - `download` : suggère le téléchargement du fichier lié (HTML5). > **À retenir** : Utiliser `target="_blank"` avec `rel="noopener noreferrer"` pour éviter les vulnérabilités de type « tabnabbing ». ### C. Listes 1. **Listes non ordonnées** (`<ul>`) : chaque élément `<li>` est précédé d’un point puce. 2. **Listes ordonnées** (`<ol>`) : chaque élément `<li>` est numéroté (type par défaut décimal ; attribut `type` peut prendre `A`, `a`, `I`, `i`). 3. **Listes de définition** (`<dl>`) : regroupe `<dt>` (terme) et `<dd>` (description). 4. **Listes imbriquées** : on peut placer une `<ul>` ou `<ol>` à l’intérieur d’un `<li>` pour créer des sous‑niveaux. > **À retenir** : Toujours fermer correctement chaque balise d’ouverture (`</ul>`, `</ol>`, `</dl>`, `</li>`) afin d’éviter des rendu inattendus. ### D. Exemples entièrement résolus #### Exemple 1 – Page avec image, lien externe, lien mail, et listes imbriquées ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Images, liens et listes</title> </head> <body> <h1>Galerie de photos</h1> <!-- Image avec attributs --> <img src="images/photo1.jpg" alt="Vue du mont Cameroun au coucher du soleil" width="400" height="300" title="Cliquez pour agrandir"> <p> Pour en savoir plus sur le mont Cameroun, visitez le site officiel : <a href="https://www.montcameroun.cm" target="_blank" rel="noopener noreferrer"> Mont Cameroun Officiel </a>. </p> <p> Vous pouvez également nous contacter par e‑mail : <a href="mailto:info@example.com?subject=Question%20sur%20le%20site"> info@example.com </a>. </p> <h2>Activités proposées</h2> <ul> <li>Randonnée <ol> <li>Départ tôt le matin</li> <li>Ascension du sommet</li> <li>Redescente et pique‑nique</li> </ol> </li> <li>Observation des oiseaux <ul> <li>Espèces endémiques</li> <li>Meilleures périodes : novembre‑février</li> </ul> </li> <li>Culture locale <dl> <dt>Dance traditionnelle</dt> <dd>Le « Bikutsi » accompagné de tambours.</dd> <dt>Artisanat</dt> <dd>Sculpture sur bois et tissage de raphia.</dd> </dl> </li> </ul> </body> </html> ``` **Étapes détaillées** : 1. **En‑tête** : doctype, encodage UTF‑8, titre. 2. **Titre principal** `<h1>`. 3. **Image** : - `src="images/photo1.jpg"` (chemin relatif). - `alt` décrit l’image pour l’accessibilité. - `width` et `height` fixent la taille affichée (400 × 300 px). - `title` montre une info‑bulle au survol. 4. **Lien externe** : - `href` pointe vers une URL absolue. - `target="_blank"` ouvre dans un nouvel onglet. - `rel="noopener noreferrer"` prévient les attaques de tabnabbing. 5. **Lien mailto** : - `mailto:info@example.com?subject=Question%20sur%20le%20site` prépare un e‑mail avec sujet pré‑rempli (les espaces sont encodés en `%20`). 6. **Liste non ordonnée** `<ul>` contenant trois `<li>`. - Premier `<li>` contient une liste ordonnée `<ol>` pour les étapes de la randonnée. - Deuxième `<li>` contient une liste non ordonnée imbriquée pour les points d’observation des oiseaux. - Troisième `<li>` utilise une liste de définition `<dl>` avec deux paires `<dt>`/`<dd>`. **Résultat attendu** : Une page montrant une image, deux liens (un externe ouvrant un nouvel onglet, un mailto), puis une liste structurée avec sous‑listes et une liste de définition. #### Exemple 2 – Utilisation des attributs `type` et `start` d’une liste ordonnée ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Listes ordonnées personnalisées</title> </head> <body> <h2>Étapes d’un expérimentation scientifique</h2> <ol type="I" start="5"> <li>Formuler l’hypothèse</li> <li>Élaborer le protocole</li> <li>Réaliser les mesures</li> <li>Analyser les résultats</li> <li>Rédiger le compte‑rendu</li> </ol> </body> </html> ``` **Étapes** : - `type="I"` indique que la numérotation utilise les chiffres romains majuscules (I, II, III…). - `start="5"` fait commencer la numérotation à V au lieu de I. Ainsi, les éléments seront affichés : V, VI, VII, VIII, IX. **Résultat** : Les cinq étapes seront précédées respectivement de V., VI., VII., VIII., IX. > **À retenir** : Les attributs `type` et `start` sont valables uniquement pour `<ol>` ; ils n’ont aucun effet sur `<ul>` ou `<dl>`. --- ## IV. Leçon 18 : Insertion d’un formulaire dans une page web ### A. Balise `<form>` - **Attributs essentiels** : - `action` : URL du script qui traitera les données (peut être laissé 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 modifications). - `enctype` : type d’encodage du corps de la requête ; valeurs usuelles : - `application/x-www-form-urlencoded` (défaut) - `multipart/form-data` (obligatoire lorsqu’on envoie des fichiers) - `text/plain` (rarement utilisé). > **À retenir** : Pour un formulaire contenant un champ `<input type="file">`, on doit absolument spécifier `enctype="multipart/form-data"`. ### B. Champs de saisie – `<input>` Le type d’un champ est déterminé par l’attribut `type`. Les types les plus courants au programme sont : | Type | Description | Exemple d’utilisation | |------|-------------|-----------------------| | `text` | Ligne de texte simple | `<input type="text" name="nom">` | | `password` | Masque la saisie | `<input type="password" name="mdp">` | | `email` | Valide le format e‑mail (HTML5) | `<input type="email" name="courriel">` | | `number` | Valeur numérique, accepte `min`, `max`, `step` | `<input type="number" name="age" min="0" max="120">` | | `date` | Sélecteur de date (jj/mm/aaaa) | `<input type="date" name="naissance">` | | `checkbox` | Case à cocher (valeur envoyée si cochée) | `<input type="checkbox" name="newsletter" value="oui">` | | `radio` | Bouton radio (un seul choix parmi un groupe) | `<input type="radio" name="sexe" value="M">` | | `submit` | Bouton d’envoi du formulaire | `<input type="submit" value="Envoyer">` | | `reset` | Bouton de réinitialisation | `<input type="reset" value="Effacer">` | | `button` | Bouton générique (souvent utilisé avec JavaScript) | `<input type="button" value="Calculer" onclick="calcul()">` | | `file` | Téléversement de fichier | `<input type="file" name="photo" accept="image/*">` | > **À retenir** : Chaque champ doit posséder un attribut `name` afin que les données soient identifiables côté serveur. ### C. Zone de texte multiligne – `<textarea>` - Attributs : `name`, `rows` (nombre de lignes visibles), `cols` (nombre de colonnes visibles). - Peut contenir du texte pré‑rempli entre les balises ouvrante et fermante. > **À retenir** : Contrairement à `<input>`, le `<textarea>` accepte des sauts de ligne naturels. ### D. Liste déroulante – `<select>` et `<option>` - `<select name="pays">` crée le contrôle. - Chaque `<option value=" cameroun ">Cameroun</option>` définit un choix. - L’attribut `selected` sur une `<option>` la pré‑sélectionne. - L’attribut `multiple` permet de sélectionner plusieurs options (nécessite alors une taille `size>1` ou l’utilisation de JavaScript). > **À retenir** : La valeur envoyée est celle de l’attribut `value` ; si `value` est absent, c’est le texte de l’option qui est envoyé. ### E. Bouton dédié – `<button>` - Peut contenir du HTML (texte, images, etc.). - Attribut `type` : `submit` (défaut), `reset`, `button`. > **À retenir** : `<button>` offre plus de flexibilité que `<input type="submit">` puisqu’on peut y mettre du contenu riche. ### F. Regroupement sémantique – `<fieldset>` et `<legend>` - `<fieldset>` dessine un cadre autour des champs liés. - `<legend>` fournit un titre décrivant le groupe. > **À retenir** : Améliore l’accessibilité et la lisibilité des formulaires longs. ### G. Validation HTML5 (attributs de contrôle) - `required` : le champ doit être rempli. - `pattern="expression régulière"` : impose un format spécifique. - `min`, `max` : bornes numériques ou de date. - `step` : pas d’incrémentation (ex. `step="0.01"` pour les monnaies). > **À retenir** : Ces attributs permettent une validation côté navigateur sans JavaScript, mais ils ne remplacent jamais une validation côté serveur. ### H. Exemples entièrement résolus #### Exemple 1 – Formulaire de contact complet (texte, e‑mail, numéro, case à cocher, liste déroulante, fichier, zone de texte, boutons) ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Formulaire de contact</title> </head> <body> <h1>Contactez-nous</h1> <form action="traitement.php" method="post" enctype="multipart/form-data"> <fieldset> <legend>Informations personnelles</legend> <p> <label for="nom">Nom :</label><br> <input type="text" id="nom" name="nom" required minlength="2" maxlength="50"> </p> <p> <label for="email">E‑mail :</label><br> <input type="email" id="email" name="email" required> </p> <p> <label for="tel">Téléphone :</label><br> <input type="tel" id="tel" name="tel" pattern="[0-9]{2,3}[0-9]{7,8}" placeholder="Ex. 222 12 34 56"> </p> </fieldset> <fieldset> <legend>Préférences</legend> <p> <label> <input type="checkbox" name="newsletter" value="oui"> Je souhaite recevoir la newsletter </label> </p> <p> <label for="pays">Pays :</label><br> <select id="pays" name="pays"> <option value="">-- Sélectionnez un pays --</option> <option value="CM">Cameroun</option> <option value="NG">Nigéria</option> <option value="GA">Gabon</option> </select> </p> </fieldset> <fieldset> <legend>Message</legend> <p> <label for="msg">Votre message :</label><br> <textarea id="msg" name="message" rows="5" cols="40" required></textarea> </p> <p> <label for="photo">Joindre une photo (facultatif) :</label><br> <input type="file" id="photo" name="photo" accept="image/jpeg,image/png"> </p> </fieldset> <p> <input type="submit" value="Envoyer le message"> <input type="reset" value="Effacer tout"> </p> </form> </body> </html> ``` **Étapes détaillées** : 1. **En‑tête** : doctype, encodage, titre. 2. **Balise `<form>`** : - `action="traitement.php"` indique le script serveur qui recevra les données. - `method="post"` envoie les données dans le corps de la requête (approprié pour un formulaire contenant un fichier). - `enctype="multipart/form-data"` obligatoire à cause du champ `<input type="file">`. 3. **Premier `<fieldset>`** : regroupe les champs d’identité (nom, e‑mail, téléphone). - Chaque champ possède un `<label>` associé via l’attribut `for` qui pointe vers l’`id` du champ, améliorant l’accessibilité. - Le champ `nom` possède `required`, `minlength="2"` et `maxlength="50"` pour garantir une saisie raisonnable. - Le champ `email` utilise le type `email` qui effectue une vérification de format basique. - Le champ `tel` utilise le type `tel` avec un attribut `pattern` exprimant une expression régulière simple pour un numéro de téléphone camerounais (2 ou 3 chiffres d’indicatif suivis de 7 à 8 chiffres). 4. **Deuxième `<fieldset>`** : préférences (case à cocher newsletter, liste déroulante pays). - La case à cocher possède un `value="oui"` ; si elle est cochée, la paire `newsletter=oui` sera envoyée. - Le `<select>` possède une première option vide avec `value=""` pour forcer l’utilisateur à faire un choix explicite. 5. **Troisième `<fieldset>`** : message et fichier joint. - `<textarea>` avec `rows="5"` et `cols="40"` définit la taille visible. - Le champ `photo` accepte uniquement les types MIME `image/jpeg` et `image/png` grâce à l’attribut `accept`. 6. **Boutons** : `<input type="submit">` envoie le formulaire ; `<input type="reset">` rétablit les valeurs initiales. **Résultat attendu** : Un formulaire présenté avec trois cadres visuels (fieldset), des libellés clairs, des contrôles de validation (required, pattern, minlength, maxlength), une liste déroulante, une case à cocher, un champ de fichier et une zone de texte multiligne. En cliquant sur « Envoyer le message », les données seront encodées en `multipart/form-data` et transmises à `traitement.php`. #### Exemple 2 – Formulaire de connexion simple avec validation HTML5 ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Connexion</title> </head> <body> <h1>Connexion à l’espace étudiant</h1> <form action="auth.php" method="post"> <p> <label for="login">Identifiant :</label><br> <input type="text" id="login" name="login" required minlength="3" maxlength="20"> </p> <p> <label for="pwd">Mot de passe :</label><br> <input type="password" id="pwd" name="pwd" required minlength="6"> </p> <p> <input type="submit" value="Se connecter"> <input type="reset" value="Annuler"> </p> </form> </body> </html> ``` **Étapes** : - Deux champs (`login` et `pwd`) sont marqués `required`. - `minlength` impose une longueur minimale (3 pour l’identifiant, 6 pour le mot de passe). - Le type `password` masque la saisie. **Résultat** : Si l’utilisateur tente d’envoyer le formulaire sans remplir un champ ou en entrant moins de caractères que le minimum, le navigateur affiche une bulle d’erreur et bloque l’envoi. > **À retenir** : La validation HTML5 est utile pour améliorer l’expérience utilisateur, mais le serveur doit toujours vérifier les données reçues. --- ## Synthèse du chapitre - **HTML** : langage de balisage décrivant la structure d’une page web. - **Squelette minimal** : `<!DOCTYPE html>`, `<html lang="fr">`, `<head>` (meta charset, title), `<body>`. - **Balises** : ouvrante `<nom>`, fermante `</nom>` (sauf les balises void). Attributs sous forme `nom="valeur"`. - **Mise en forme du texte** : titres `<h1>–<h6>`, paragraphes `<p>`, sauts de ligne `<br>`, mise en évidence (`<b>`, `<strong>`, `<i>`, `<em>`, `<u>`, `<s>`, `<sup>`, `<sub>`, `<mark>`, `<small>`). - **Couleurs et arrière‑plan** : attributs `bgcolor`, `text`, `face` (obsolètes mais au programme) ou CSS inline. - **Images** : `<img src="…" alt="…" width="…" height="…">`. - **Liens** : `<a href="…" target="_blank" rel="noopener noreferrer">…</a>` ; `mailto:` pour les e‑mails. - **Listes** : `<ul>` (non ordonnée), `<ol>` (ordonnée, attributs `type` et `start`), `<dl>` (définition). Possibilité d’imbrication. - **Formulaires** : `<form action="…" method="GET|POST" enctype="…">`. - Champs `<input>` : `text`, `password`, `email`, `number`, `date`, `checkbox`, `radio`, `submit`, `reset`, `button`, `file`. - Zone de texte `<textarea>`. - Liste déroulante `<select><option>…</option></select>`. - Regroupement `<fieldset><legend>…</legend></fieldset>`. - Validation HTML5 : `required`, `minlength`, `maxlength`, `pattern`, `min`, `max`, `step`. --- ## Glossaire | Terme | Définition | |-------|------------| | **Balise** | Mot-clé entouré de `<` et `>` qui indique le début ou la fin d’un élément HTML. | | **Élément** | Combinaison d’une balise ouvrante, éventuellement du contenu, et d’une balise fermante (ou une balise void). | | **Attribut** | Pair `nom="valeur"` placée dans une balise ouvrante pour modifier le comportement ou l’apparence de l’élément. | | **Doctype** | Déclaration `<!DOCTYPE html>` qui indique au navigateur la version du HTML utilisée (HTML5 ici). | | **Balise void** | Balise qui ne possède pas de contenu ni de balise fermante (ex. `<br>`, `<img>`, `<input>`). | | **Alt** | Texte alternatif d’une image, essentiel pour l’accessibilité et le référencement. | | **Hyperlien** | Élément `<a>` permettant de naviguer vers une autre ressource via l’attribut `href`. | | **Liste ordonnée** | Liste `<ol>` où chaque élément est précédé d’un numéro ou d’un symbole selon l’attribut `type`. | | **Liste de définition** | Structure `<dl>` regroupant des termes `<dt>` et leurs définitions `<dd>`. | | **Formulaire** | Bloc `<form>` qui collecte des données utilisateur et les envoie à un serveur selon `method` et `action`. | | **Champ de saisie** | Élément `<input>` dont le type (`text`, `password`, `email`, …) définit le genre de donnée attendu. | | **Zone de texte** | Élément `<textarea>` permettant la saisie de plusieurs lignes de texte. | | **Liste déroulante** | Élément `<select>` contenant une ou plusieurs options `<option>` pour choisir une valeur. | | **Fieldset** | Élément `<fieldset>` qui regroupe sémantiquement plusieurs contrôles de formulaire, souvent accompagné d’un `<legend>`. | | **Validation HTML5** | Ensemble d’attributs (`required`, `pattern`, `min`, `max`, …) permettant au navigateur de vérifier la conformité des données avant l’envoi. | --- ## Exercices d'application corrigés ### Exercice 1 – Structure de base **Consigne** : Écrire le code HTML d’une page comportant un titre de niveau 1 « Mon portfolio », un paragraphe de présentation, et une image `images/photo.jpg` avec un texte alternatif « Photo de moi », largeur 300 px, hauteur 200 px. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mon portfolio</title> </head> <body> <h1>Mon portfolio</h1> <p>Je suis étudiant en Première Série SH et je présente ici mes projets.</p> <img src="images/photo.jpg" alt="Photo de moi" width="300" height="200"> </body> </html> ``` **Justification** : - Le doctype indique HTML5. - `<html lang="fr">` précise la langue. - Dans `<head>`, l’encodage UTF‑8 et le titre sont définis. - Dans `<body>`, on place le titre `<h1>`, puis le paragraphe `<p>`, puis l’image `<img>` avec les attributs requis. --- ### Exercice 2 – Mise en forme du texte **Consigne** : Créer une page qui affiche la phrase suivante en appliquant les mises en forme demandées : - Le mot **important** en gras sémantique. - Le terme *technique* en italique. - Le chiffre 10² en exposant. - La formule H₂O en indice. - Le texte « À retenir » avec un fond jaune (utiliser la balise `<mark>`). **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mise en forme du texte</title> </head> <body> <p> Ce mot <strong>important</strong> doit être remarqué, tandis que ce terme <i>technique</i> désigne une notion spécifique. Le résultat de 10<sup>2</sup> est 100. L’eau se formule H<sub>2</sub>O. <mark>À retenir</mark> : toujours vérifier ses sources. </p> </body> </html> ``` **Justification** : - `<strong>` donne un gras sémantique (importance). - `<i>` donne une italique (usage typographique, pas d’accentuation forte). - `<sup>` et `<sub>` gèrent respectivement l’exposant et l’indice. - `<mark>` applique un fond jaune par défaut dans la plupart des navigateurs. --- ### Exercice 3 – Image, lien et liste **Consigne** : Réaliser une page contenant : 1. Une image `images/logo.png` avec alt « Logo de l’école », largeur 150 px. 2. Un lien vers `https://www.example.com` ouvrant dans un nouvel onglet, avec le texte « Visitez notre partenaire ». 3. Une liste non ordonnée de trois activités sportives : « Football », « Basket‑ball », « Athlétisme ». Chaque activité doit contenir une liste ordonnée de deux sous‑étapes : « Entraînement » et « Match ». **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Activités sportives</title> </head> <body> <h1>Activités sportives de l’école</h1> <img src="images/logo.png" alt="Logo de l’école" width="150"> <p> Pour en savoir plus sur nos partenaires, <a href="https://www.example.com" target="_blank" rel="noopener noreferrer"> Visitez notre partenaire </a>. </p> <h2>Liste des activités</h2> <ul> <li>Football <ol> <li>Entraînement</li> <li>Match</li> </ol> </li> <li>Basket‑ball <ol> <li>Entraînement</li> <li>Match</li> </ol> </li> <li>Athlétisme <ol> <li>Entraînement</li> <li>Match</li> </ol> </li> </ul> </body> </html> ``` **Justification** : - L’image possède les attributs `src`, `alt`, `width`. - Le lien utilise `target="_blank"` et `rel="noopener noreferrer"` pour la sécurité. - La liste principale `<ul>` contient trois `<li>`. Chaque `<li>` imbrique une `<ol>` de deux éléments, respectant la consigne d’imbrication. --- ### Exercice 4 – Formulaire d’inscription à un événement **Consigne** : Créer un formulaire permettant à un utilisateur de s’inscrire à un séminaire. Le formulaire doit recueillir : - Nom complet (texte obligatoire, min 3 caractères). - Adresse e‑mail (type email, obligatoire). - Date de naissance (type date, obligatoire, ne doit pas être postérieure à aujourd’hui – on utilisera l’attribut `max` avec la date du jour en format AAAA-MM-JJ, supposons 2025-09-26). - Sexe (radio : Homme, Femme, Autre). - Cases à cocher pour choisir les ateliers souhaités : « Atelier A », « Atelier B », « Atelier C » (au moins un obligatoire – on ne peut pas imposer cela uniquement avec HTML5, on ajoutera un petit script de vérification mais on laissera la consigne telle quelle). - Un champ de texte libre pour les remarques (textarea, 4 lignes, 40 colonnes). - Un bouton d’envoi et un bouton de réinitialisation. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Inscription au séminaire</title> </head> <body> <h1>Inscription au séminaire</h1> <form action="inscription.php" method="post"> <p> <label for="nom">Nom complet :</label><br> <input type="text" id="nom" name="nom" required minlength="3"> </p> <p> <label for="mail">Adresse e‑mail :</label><br> <input type="email" id="mail" name="mail" required> </p> <p> <label for="date">Date de naissance :</label><br> <input type="date" id="date" name="date" required max="2025-09-26"> </p> <fieldset> <legend>Sexe</legend> <p> <label> <input type="radio" name="sexe" value="H"> Homme </label> </p> <p> <label> <input type="radio" name="sexe" value="F"> Femme </label> </p> <p> <label> <input type="radio" name="sexe" value="A"> Autre </label> </p> </fieldset> <fieldset> <legend>Ateliers souhaités (choisissez au moins un)</legend> <p> <label> <input type="checkbox" name="atelier" value="A"> Atelier A </label> </p> <p> <label> <input type="checkbox" name="atelier" value="B"> Atelier B </label> </p> <p> <label> <input type="checkbox" name="atelier" value="C"> Atelier C </label> </p> </fieldset> <p> <label for="remarques">Remarques :</label><br> <textarea id="remarques" name="remarques" rows="4" cols="40"></textarea> </p> <p> <input type="submit" value="S’inscrire"> <input type="reset" value="Effacer"> </p> </form> </body> </html> ``` **Justification** : - Chaque champ possède un `<label>` lié par `for`/`id` pour l’accessibilité. - Le champ `nom` a `required` et `minlength="3"`. - Le champ `mail` utilise le type `email` et `required`. - Le champ `date` utilise le type `date` avec `max="2025-09-26"` (date du jour supposée). - Le groupe de radios utilise le même nom `sexe` afin qu’une seule option soit sélectionnable. - Les cases à cocher partagent le même nom `atelier` ; elles permettent plusieurs sélections. (La contrainte « au moins un » nécessiterait du JavaScript ou une validation serveur, ce qui dépasse le cadre purement HTML5 demandé.) - Le `<textarea>` possède `rows="4"` et `cols="40"`. - Les boutons `submit` et `reset` terminent le formulaire. --- ### Exercice 5 – Tableau simple (bonus, non au programme mais utile) **Consigne** : Créer un tableau présentant les notes de trois élèves en Mathématiques et Physique. Le tableau doit avoir une légende, un en-tête de colonne, et utiliser `border="1"` pour rendre les bordures visibles. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Tableau de notes</title> </head> <body> <h2>Notes des élèves</h2> <table border="1" cellpadding="5" cellspacing="0"> <caption>Notes en Mathématiques et Physique (sur 20)</caption> <thead> <tr> <th>Élève</th> <th>Mathématiques</th> <th>Physique</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>15</td> <td>13</td> </tr> <tr> <td>Bob</td> <td>11</td> <td>16</td> </tr> <tr> <td>Clara</td> <td>18</td> <td>14</td> </tr> </tbody> </table> </body> </html> ``` **Justification** : - La balise `<table>` crée le tableau ; `border="1"` ajoute une bordure visible (attribut obsolète mais accepté dans le cadre du programme). - `cellpadding` définit l’espace intérieur entre le contenu et la bordure de chaque cellule. - `cellspacing` définit l’espace entre les cellules (mis à 0 pour un rendu compact). - `<caption>` fournit une légende décrivant le tableau. - `<thead>` regroupe la ligne d’en‑tête (`<th>`). - `<tbody>` contient les lignes de données (`<td>`). --- ## Erreurs fréquentes | # | Erreur fréquente | Conséquence | Comment l’éviter | |---|------------------|-------------|------------------| | 1 | **Oublier la balise de fermeture** (ex. `<p>` sans `</p>`) | Le rendu peut fusionner plusieurs éléments ou produire un affichage inattendu selon le navigateur. | Toujours vérifier que chaque balise ouvrante possède sa fermante, sauf pour les balises void (`<br>`, `<img>`, `<input>`, …). | | 2 | **Confondre `name` et `id`** dans un formulaire | Les données ne sont pas envoyées correctement côté serveur parce que le serveur lit l’attribut `name`. | Utiliser `name` pour identifier les champs destinés à être soumis ; réserver `id` pour l’association avec `<label>` ou les scripts JavaScript. | | 3 | **Omettre l’attribut `alt` sur une image** | L’image n’est pas accessible aux utilisateurs de lecteurs d’écran ; pénalisation SEO. | Toujours fournir un `alt` descriptif, même si l’image est purement décorative (dans ce cas, `alt=""`). | | 4 | **Utiliser des attributs dépréciés sans s’en rendre compte** (ex. `bgcolor`, `face`) | Le code fonctionne mais n’est pas conforme aux standards modernes ; peut entraîner une perte de points à l’examen si la correction insiste sur la sémantique. | Connaître la liste des attributs autorisés en HTML5 ; préférer le CSS en style (`style="…"`) pour la mise en forme visuelle. | | 5 | **Mauvaise imbrication de listes** (ex. fermer `<ul>` avant d’avoir fermé tous les `<li>` internes) | Le navigateur interprète mal la hiérarchie, entraînant des puces ou des numéros absents ou décalés. | Respecter l’ordre d’ouverture/fermeture : ouvrir `<ul>`, puis `<li>`, éventuellement ouvrir une sous‑liste, refermer la sous‑liste, refermer le `<li>`, etc. | | 6 | **Oublier `enctype="multipart/form-data"` lorsqu’on envoie un fichier** | Le fichier n’est pas transmis ; le serveur reçoit un champ vide. | Toujours ajouter cet attribut dès qu’un `<input type="file">` est présent dans le formulaire. | | 7 | **Utiliser `target="_blank"` sans `rel="noopener noreferrer"`** | Risque de vulnérabilité de type « tabnabbing » où la page ouverte peut manipuler la page d’origine. | Toujours ajouter `rel="noopener noreferrer"` lorsqu’on ouvre un lien dans un nouvel onglet/fenêtre. | | 8 | **Confondre les types de `<input>`** (ex. utiliser `type="text"` pour une date) | La validation native du navigateur ne fonctionne pas ; l’utilisateur peut entrer n’importe quoi. | Choisir le type spécifique adapté (`date`, `email`, `number`, …) pour profiter de la validation et des contrôles natifs d’HTML5. | --- **Fin du cours**. Vous disposez maintenant d’une référence complète couvrant les quatre leçons du programme officiel de Première (SH, AVC) sur la programmation HTML. Étudiez chaque exemple, reproduisez-le dans votre éditeur, puis tentez les exercices sans regarder les corrigés avant de vérifier vos réponses. Bonne préparation pour l’épreuve du Probatoire !