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

## Objectifs et prérequis **Objectifs** : À la fin de ce chapitre, l’élève sera capable de : - expliquer ce qu’est le langage HTML et son rôle dans la création de pages web ; - distinguer les éléments de structure (balises) des éléments de contenu ; - écrire un document HTML valide en respectant la syntaxe de base ; - appliquer les balises de mise en forme (titres, paragraphes, listes, sauts de ligne, mise en gras/italique, couleur, arrière‑plan) ; - utiliser les attributs courants (`href`, `src`, `alt`, `width`, `height`, `style`) ; - valider rapidement une page avec un navigateur et détecter les erreurs de syntaxe les plus fréquentes. **Prérequis** : - notions de base de l’informatique (fichiers, dossiers, extension) ; - utilisation courante d’un navigateur web (Chrome, Firefox, Edge) ; - savoir éditer un fichier texte avec un éditeur simple (Bloc‑notes, Notepad++, VS Code). > **À retenir** : HTML (HyperText Markup Language) est un langage de balisage destiné à décrire la structure d’un document hypertexte. --- ## Introduction contextualisée Depuis les années 1990, le World Wide Web repose sur trois technologies fondamentales : HTML pour la structure, CSS pour la présentation et JavaScript pour le comportement. Au niveau de la Première, le programme MINESEC/IGE insiste sur la maîtrise d’HTML afin que l’élève puisse concevoir des pages statiques, comprendre le fonctionnement du web et préparer les bases du développement dynamique. Ce chapitre constitue la première partie de l’UA 6 « Programmation HTML » ; il pose les fondements syntaxiques et introduit les premières balises de mise en forme qui seront approfondies dans la seconde partie (tableaux, formulaires, multimédia). --- ## I. Généralités sur le HTML ### 1. Définition et historique HTML est un langage de balisage dérivé de SGML (Standard Generalized Markup Language). La première version, HTML 1.0, a été proposée par Tim Berners‑Lee en 1991. La version actuellement enseignée dans le secondaire camerounais est HTML 5, standardisée par le W3C en 2014. > **À retenir** : HTML 5 introduit de nouvelles balises sémantiques (`<header>`, `<article>`, `<section>`, `<footer>`, `<nav>`) qui améliorent l’accessibilité et le référencement. ### 2. Structure d’un document HTML Un document HTML se compose toujours de trois parties imbriquées : 1. Le **doctype** qui indique la version du langage. 2. L’élément racine `<html>` qui englobe tout le contenu. 3. Deux sections principales : `<head>` (en‑tête, métadonnées) et `<body>` (corps, contenu visible). ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma première page</title> </head> <body> <!-- Contenu visible --> </body> </html> ``` > **À retenir** : La déclaration `<!DOCTYPE html>` doit être la toute première ligne du fichier, sans espace préalable. ### 3. Syntaxe des balises - Une balise d’ouverture : `<nom>` ; une balise de fermeture : `</nom>`. - Certaines balises sont **auto‑fermantes** (void elements) : `<br>`, `<hr>`, `<img>`, `<input>`, `<meta>`, `<link>`. En HTML 5, le slash de fermeture (`/`) est optionnel mais accepté. - Les attributs se placent dans la balise d’ouverture sous la forme `nom="valeur"` (les guillemets sont obligatoires si la valeur contient des espaces). > **À retenir** : Les noms de balises et d’attributs sont insensibles à la casse en HTML, mais la convention est d’utiliser tout en minuscules. ### 4. Exemple complet – Page de présentation **Étape 1** : Créer le fichier `index.html`. **Étape 2** : Insérer le doctype et la structure de base. **Étape 3** : Dans `<head>`, ajouter le charset et un titre. **Étape 4** : Dans `<body>`, écrire un titre de niveau 1, un paragraphe et une image. ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Présentation de mon lycée</title> </head> <body> <h1>Lycée Technique de Yaoundé</h1> <p>Cet établissement forme les jeunes aux métiers de l’industrie et du numérique.</p> <img src="lycee.jpg" alt="Façade du lycée" width="400"> </body> </html> ``` **Résultat attendu** : Dans le navigateur, on voit un grand titre, un paragraphe et une image de 400 px de large, avec le texte alternatif affiché si l’image ne charge pas. ### 5. Validation rapide - Ouvrir le fichier avec un navigateur (double‑clic ou `Ctrl+O`). - Utiliser l’outil de développement (`F12`) → onglet **Console** pour repérer les erreurs de syntaxe (ex. balise non fermée). - En cas d’erreur, le navigateur tente de corriger automatiquement, mais le rendu peut diverger du attendu. > **À retenir** : Une page valide ne produit aucune erreur dans la console du navigateur lorsqu’on utilise le mode « strict » (HTML 5). --- ## II. Mise en forme d’un document HTML ### 1. Titres et paragraphes Les niveaux de titre vont de `<h1>` (le plus important) à `<h6>` (le moins important). Ils créent automatiquement des sauts de ligne avant et après. > **À retenir** : Un document bien structuré commence par un seul `<h1>` qui résume le sujet de la page. **Exemple** : ```html <h1>Programmation HTML</h1> <h2>Leçon 15 : Généralités</h2> <p>Cette leçon présente les bases du langage HTML.</p> ``` ### 2. Sauts de ligne et règles horizontales - `<br>` provoque un retour à la ligne sans créer un nouveau paragraphe. - `<hr>` insère une règle horizontale (séparateur thématique). **Exemple** : ```html <p>Première ligne<br>Deuxième ligne</p> <hr> <p>Après la séparation</p> ``` ### 3. Mise en forme du texte | Balise | Effet | Exemple | |--------|-------|---------| | `<b>` ou `<strong>` | Gras (sémantique forte) | `<strong>Important</strong>` | | `<i>` ou `<em>` | Italique (accentuation) | `<em>Note</em>` | | `<u>` | Souligné (déconseillé pour le texte) | `<u>Souligné</u>` | | `<small>` | Texte plus petit | `<small>Détails</small>` | | `<mark>` | Surbrillance (fond jaune) | `<mark>Mot clé</mark>` | | `<sup>` | Exposant | `x<sup>2</sup>` | | `<sub>` | Indice | `H<sub>2</sub>O` | > **À retenir** : Privilégier `<strong>` et `<em>` pour leur valeur sémantique plutôt que `<b>` et `<i>`. **Exemple complet** : ```html <p>Le résultat de <strong>5 + 3</strong> est <em>8</em>.</p> <p>Formule : E = mc<sup>2</sup></p> <p>Chimie : H<sub>2</sub>O</p> ``` ### 4. Listes - **Liste non ordonnée** (`<ul>`) avec des puces (`<li>`). - **Liste ordonnée** (`<ol>`) avec des chiffres ou des lettres. - **Liste de définition** (`<dl>`) avec `<dt>` (terme) et `<dd>` (description). **Exemple de liste ordonnée** : ```html <ol> <li>Ouvrir l'éditeur de texte.</li> <li>Écrire la structure de base.</li> <li>Enregistrer avec l'extension .html.</li> <li>Ouvrir le fichier dans un navigateur.</li> </ol> ``` > **À retenir** : L’attribut `type` de `<ol>` permet de choisir le style de numérotation (`"A"`, `"a"`, `"I"`, `"i"`). ### 5. Liens et ancres - Le lien hypertexte utilise la balise `<a>` avec l’attribut `href`. - Pour ouvrir dans un nouvel onglet : `target="_blank"`. - Ancre interne : `<a href="#section2">Aller à la section 2</a>` associée à un élément possédant `id="section2"`. **Exemple** : ```html <p>Consultez le <a href="https://www.minesec.gov.cm" target="_blank">site du MINESEC</a>.</p> <h2 id="conclusion">Conclusion</h2> <p>Pour revenir au début : <a href="#top">Retour en haut</a></p> ``` > **À retenir** : Toujours fournir un texte descriptif dans le lien (`<a>`) pour l’accessibilité. ### 6. Images - Balise `<img>` (auto‑fermante). - Attributs essentiels : `src` (chemin de l’image), `alt` (texte alternatif), `width` et/ou `height` (dimensions en pixels ou en pourcentage). - Formats supportés : JPEG, PNG, GIF, SVG, WebP. **Exemple** : ```html <img src="logo.png" alt="Logo du lycée" width="150" height="50"> ``` > **À retenir** : L’attribut `alt` est obligatoire pour l’accessibilité ; il décrit le contenu de l’image pour les lecteurs d’écran. ### 7. Couleurs et arrière‑plan HTML 5 permet de définir des couleurs via : - noms prédéfinis (`red`, `blue`, `green`) ; - valeurs hexadécimales (`#RRGGBB`) ; - notation RGB (`rgb(255,0,0)`) ; - notation HSL (`hsl(0,100%,50%)`). Ces valeurs peuvent être appliquées avec l’attribut `style` (CSS en ligne) ou via une feuille de style externe (à voir en UA 6‑2). **Exemple de couleur en ligne** : ```html <p style="color:#006400; background-color:#f0f8ff;"> Texte vert foncé sur fond bleu clair. </p> ``` > **À retenir** : La couleur en hexadécimal se compose de trois paires de chiffres hexadécimaux représentant respectivement le rouge, le vert et le bleu. Le nombre de couleurs possibles est $16^6 = 16\,777\,216$. ### 8. Tableaux simples (introduction) Bien que les tableaux soient étudiés plus en détail dans la seconde partie, voici la syntaxe de base : ```html <table border="1"> <tr> <th>Nom</th> <th>Âge</th> </tr> <tr> <td>Albert</td> <td>16</td> </tr> <tr> <td>Marie</td> <td>17</td> </tr> </table> ``` > **À retenir** : `<th>` définit une cellule d’en‑tête (gras et centré par défaut) ; `<td>` définit une donnée ordinaire. ### 9. Exemple complet – Page de cours ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Cours HTML – Leçon 16</title> <style> body {font-family: Arial, sans-serif; margin: 20px;} h1 {color: #2c3e50;} .highlight {background-color: #ffff99; padding: 2px;} </style> </head> <body> <h1>Mise en forme d’un document HTML</h1> <p>Cette page illustre les balises de mise en forme vues en <span class="highlight">Leçon 16</span>.</p> <h2>Titres et paragraphes</h2> <h3>Sous‑titre niveau 3</h3> <p>Un <strong>texte en gras</strong> et un <em>texte en italique</em>.</p> <h2>Listes</h2> <ol> <li>Écrire le code.</li> <li>Tester dans le navigateur.</li> <li>Corriger les erreurs.</li> </ol> <h2>Liens et images</h2> <p>Visitez le <a href="https://www.w3.org/TR/html52/" target="_blank">spécification HTML5</a>.</p> <p><img src="html5-logo.png" alt="Logo HTML5" width="200"></p> <hr> <p><small>© 2025 Lycée Technique de Yaoundé – Tous droits réservés.</small></p> </body> </html> ``` **Résultat attendu** : Un titre principal, des sous‑titres, du texte gras/italique, une liste ordonnée, un lien ouvrant un nouvel onglet, une image avec texte alternatif, une règle horizontale et un petit texte de bas de page. --- ## Synthèse du chapitre - **HTML** : langage de balisage pour structurer les pages web. - **Syntaxe** : `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>` ; balises d’ouverture/fermeture, attributs `nom="valeur"`. - **Titres** : `<h1>` à `<h6>` ; un seul `<h1>` recommandé. - **Paragraphes** : `<p>` ; saut de ligne avec `<br>` ; séparateur avec `<hr>`. - **Mise en forme du texte** : `<strong>/<b>`, `<em>/<i>`, `<u>`, `<small>`, `<mark>`, `<sup>`, `<sub>`. - **Listes** : `<ul>` (non ordonnée), `<ol>` (ordonnée), `<dl>` (définition). - **Liens** : `<a href="URL" target="_blank">texte</a>` ; ancres avec `id`. - **Images** : `<img src="chemin" alt="description" width="…" height="…">`. - **Couleurs** : noms, hexadécimal `#RRGGBB`, `rgb()`, `hsl()` ; appliquées via `style`. - **Tableaux de base** : `<table>`, `<tr>`, `<th>`, `<td>`. - **Bonnes pratiques** : fermer toutes les balises, utiliser des valeurs alt descriptives, valider avec la console du navigateur, respecter la casse minuscule. --- ## Glossaire | Terme | Définition | |-------|------------| | **Balise** | Marque encadrée par `<` et `>` qui indique le début ou la fin d’un élément HTML. | | **Attribut** | Propriété supplémentaire d’une balise, sous la forme `nom="valeur"`, qui modifie son comportement ou son apparence. | | **Doctype** | Déclaration qui informe le navigateur de la version du HTML utilisée (`<!DOCTYPE html>` pour HTML5). | | **Élément** | Combinaison d’une balise d’ouverture, éventuellement du contenu, et d’une balise de fermeture (ex. `<p>texte</p>`). | | **Void element** | Balise auto‑fermante qui ne peut contenir de contenu (`<br>`, `<img>`, `<input>`). | | **ID** | Attribut unique (`id="valeur"`) permettant d’identifier un élément pour un lien interne ou du CSS/JavaScript. | | **Classe** | Attribut pouvant être répété (`class="valeur"`) pour regrouper plusieurs éléments sous un même style. | | **Hexadécimal** | Système de numérotation en base 16 utilisé pour représenter les couleurs (`#RRGGBB`). | | **Accessibilité** | Ensemble de pratiques rendant le contenu utilisable par les personnes en situation de handicap (ex. texte alternatif). | | **Validation** | Vérification de la conformité d’un document HTML aux spécifications du W3C, souvent effectuée via les outils de développement du navigateur. | --- ## Exercices d'application corrigés ### Exercice 1 – Page de présentation personnelle **Consigne** : Créez un fichier `perso.html` contenant : - un titre de niveau 1 avec votre nom et prénom ; - un paragraphe décrivant votre série (ex. A1) et votre établissement ; - une image de votre choix (logo de l’établissement) avec largeur 200 px et texte alternatif décrivant l’image ; - un lien vers le site officiel du MINESEC ouvrant dans un nouvel onglet. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Présentation personnelle</title> </head> <body> <h1>Jean Dupont</h1> <p>Je suis élève en série A1 au Lycée Technique de Yaoundé.</p> <img src="logo-lycee.jpg" alt="Logo du Lycée Technique de Yaoundé" width="200"> <p>Consultez le <a href="https://www.minesec.gov.cm" target="_blank">site du MINESEC</a>.</p> </body> </html> ``` **Justification** : - Ligne 1 : doctype HTML5. - Ligne 2‑7 : structure minimale. - Ligne 9 : `<h1>` pour le nom. - Ligne 10 : `<p>` pour la description. - Ligne 11 : `<img>` avec `src`, `alt`, `width`. - Ligne 12‑13 : lien avec `target="_blank"` pour nouvel onglet. --- ### Exercice 2 – Liste de matières et mise en forme **Consigne** : Dans un fichier `matieres.html`, réalisez : - un titre de niveau 2 « Mes matières préférées » ; - une liste ordonnée contenant trois matières ; - pour chaque matière, mettre le nom en gras et le coefficient en italique entre parenthèses ; - ajouter une règle horizontale sous la liste. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mes matières</title> </head> <body> <h2>Mes matières préférées</h2> <ol> <li><strong>Mathématiques</strong> (<em>coeff. 4</em>)</li> <li><strong>Physique-Chimie</strong> (<em>coeff. 3</em>)</li> <li><strong>Informatique</strong> (<em>coeff. 2</em>)</li> </ol> <hr> </body> </html> ``` **Justification** : - `<h2>` pour le titre demandé. - `<ol>` crée une liste ordonnée ; chaque `<li>` contient `<strong>` pour le gras et `<em>` pour l’italique. - `<hr>` insère la règle horizontale après la liste. --- ### Exercice 3 – Tableau d’emploi du temps **Consigne** : Construire un tableau simple montrant l’emploi du temps d’une journée (lundi) avec deux colonnes : « Heure » et « Activité ». Trois lignes : 08h00‑09h30 – Mathématiques, 09h45‑11h15 – Physique, 11h30‑12h30 – Informatique. Utiliser `<th>` pour l’en‑tête du tableau. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Emploi du temps</title> </head> <body> <table border="1"> <tr> <th>Heure</th> <th>Activité</th> </tr> <tr> <td>08h00‑09h30</td> <td>Mathématiques</td> </tr> <tr> <td>09h45‑11h15</td> <td>Physique</td> </tr> <tr> <td>11h30‑12h30</td> <td>Informatique</td> </tr> </table> </body> </html> ``` **Justification** : - `<table border="1">` ajoute une bordure visible pour la visualisation. - Première `<tr>` contient deux `<th>` pour les titres de colonnes. - Chaque ligne suivante utilise `<td>` pour les données. --- ### Exercice 4 – Liens internes et ancres **Consigne** : Dans un fichier `chapitre.html`, créer : - un titre de niveau 1 « Chapitre 3 » ; - deux sections intitulées « 3.1 Définitions » et « 3.2 Exemples » chacune précédée d’un titre de niveau 2 ; - en haut de la page, un menu de navigation contenant deux liens : « Aller à 3.1 » et « Aller à 3.2 » qui pointent vers les sections correspondantes grâce à des ancres. **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Chapitre 3</title> </head> <body> <h1>Chapitre 3</h1> <nav> <p> <a href="#section31">Aller à 3.1</a> | <a href="#section32">Aller à 3.2</a> </p> </nav> <h2 id="section31">3.1 Définitions</h2> <p>Cette partie présente les notions de base du HTML.</p> <h2 id="section32">3.2 Exemples</h2> <p>Ici, nous illustrons les balises vues précédemment.</p> </body> </html> ``` **Justification** : - Les ancres sont créées avec l’attribut `id` sur les `<h2>` cibles. - Les liens utilisent la forme `<a href="#identifiant">texte</a>` pour pointer vers l’ancre interne. - Le `<nav>` regroupe les liens de navigation (bonne pratique sémantique). --- ### Exercice 5 – Couleurs et arrière‑plan **Consigne** : Réaliser une page `couleurs.html` contenant un paragraphe dont le texte est blanc sur un fond bleu marine (`#000080`). Le texte doit dire : « Bienvenue en informatique ». **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Couleurs</title> </head> <body> <p style="color:#ffffff; background-color:#000080; padding:10px;"> Bienvenue en informatique </p> </body> </html> ``` **Justification** : - `color:#ffffff` définit la couleur du texte en blanc. - `background-color:#000080` définit le fond en bleu marine. - `padding:10px` ajoute un espace intérieur pour améliorer la lisibilité. --- ## Erreurs fréquentes | Erreur fréquente | Pourquoi elle se produit | Comment l’éviter | |------------------|--------------------------|------------------| | **Oublier de fermer une balise** (ex. `<p>texte` sans `</p>`) | Le navigateur tente de fermer automatiquement, ce qui peut entraîner un rendu inattendu. | Toujours relire le code ou utiliser un éditeur qui souligne les balises non fermées. | | **Utiliser des majuscules dans les noms de balises** (`<DIV>`) | Bien que accepté, cela nuit à la lisibilité et peut créer des confusions avec le XML. | Adopter la convention minuscule pour toutes les balises et attributs. | | **Oublier l’attribut `alt` sur les images** | Rend la page inaccessible aux utilisateurs de lecteurs d’écran et pénalise le SEO. | Systématiquement décrire le contenu de l’image dans `alt`. | | **Confondre `<b>`/`<i>` avec `<strong>`/`<em>`** | Les premières sont purement de présentation ; les secondes portent une valeur sémantique (importance, accentuation). | Privilégier `<strong>` et `<em>` sauf si l’effet purement visuel est réellement voulu sans signification. | | **Placer du texte directement après un `<br>` sans espace** | Peut produire un collage de mots difficile à lire. | Insérer un espace ou revenir à la ligne clairement dans le code source. | | **Utiliser des attributs obsolètes** (`align`, `bgcolor`, `font`) | Ces attributs ont été déprigés en HTML5 ; leur usage peut conduire à un rendu incohérent selon les navigateurs. | Remplacer par du CSS en ligne (`style`) ou une feuille de style externe. | --- *Fin du cours.*