UA7 : Programmation en HTML

# UA7 : Programmation en HTML ## Objectifs et prérequis Ce chapitre vise à initier l’élève à la création de pages web statiques en langage HTML (HyperText Markup Language). À l’issue de ce chapitre, l’élève sera capable de : - Définir ce qu’est une page web et son rôle dans le fonctionnement d’Internet ; - Expliquer la notion de balise HTML, sa syntaxe et son rôle dans la structuration du contenu ; - Identifier et utiliser correctement les balises de mise en forme les plus courantes en HTML ; - Construire une page web simple comportant du texte formaté (titres, paragraphes, listes, gras, italique, souligné) ; - Déboguer une page HTML en identifiant les erreurs de syntaxe courantes (balises non fermées, imbrication incorrecte) ; - Respecter les bonnes pratiques d’écriture du code HTML (indentation, minuscules, fermeture des balises). **Prérequis** : - Maîtrise de l’utilisation d’un navigateur web (Chrome, Firefox, Edge) pour afficher une page locale ; - Notions de base en arborescence de fichiers (dossiers, fichiers, extensions) ; - Capacité à éditer un fichier texte avec un éditeur simple (Bloc-notes, Notepad++, VS Code) ; - Compréhension de la différence entre un fichier texte brut et un fichier interprété par une application (ici, le navigateur). --- ## I. Notion de page Web ### Définition et rôle d’une page web > Une page web est un document texte interprété par un navigateur web, rédigé principalement en langage HTML, pouvant contenir du texte, des images, des liens et d’autres ressources, et accessible via une adresse URL (Uniform Resource Locator). Une page web n’est pas un programme exécutable comme un logiciel installé sur un ordinateur. Elle est un fichier texte (généralement avec l’extension `.html` ou `.htm`) qui décrit, à l’aide de balises, comment le contenu doit être affiché à l’écran. Le navigateur lit ce fichier, interprète les balises, et rend le résultat visuel selon les règles du HTML et du CSS (qui sera étudié plus tard). Lorsque l’on tape une adresse comme `http://exemple.com/page.html` dans la barre d’adresse du navigateur, celui-ci : 1. Contacte le serveur associé au nom de domaine `exemple.com` ; 2. Demande le fichier `page.html` ; 3. Reçoit le contenu du fichier sous forme de texte ; 4. Analyse ce texte pour en extraire la structure HTML ; 5. Affiche le rendu visuel à l’écran. Une page web peut être statique (contenu fixe, comme ici) ou dynamique (contenu généré en temps réel par un serveur, avec PHP, JavaScript, etc.). Dans ce chapitre, nous nous limitons aux pages statiques. ### Structure minimale d’une page web HTML Toute page web HTML valide doit respecter une structure de base composée de trois parties essentielles : 1. Le doctype (`<!DOCTYPE html>`) : indique au navigateur que le document est en HTML5 ; 2. L’élément racine `<html>` : englobe tout le contenu de la page ; 3. Deux sections principales : `<head>` (en-tête, métadonnées) et `<body>` (corps, contenu visible). Exemple de structure minimale : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma première page web</title> </head> <body> <h1>Bonjour, monde !</h1> <p>Ceci est ma première page web en HTML.</p> </body> </html> ``` **Explication ligne par ligne :** - `<!DOCTYPE html>` : déclaration obligatoire pour HTML5. Sans elle, le navigateur peut afficher la page en mode "quirks", ce qui entraîne des rendus imprévisibles. - `<html lang="fr">` : l’attribut `lang="fr"` précise que la langue principale du contenu est le français. Cela aide les lecteurs d’écran et les moteurs de recherche. - `<head>` : contient des informations non affichées directement à l’écran, mais essentielles : - `<meta charset="UTF-8">` : définit l’encodage des caractères. UTF-8 permet d’afficher correctement tous les caractères latins, accentués, et même les caractères non latins (arabe, chinois, etc.). Sans cela, les accents peuvent apparaître sous forme de � ou de caractères étranges. - `<title>` : définit le titre de la page, affiché dans l’onglet du navigateur et utilisé pour les favoris et le référencement. - `<body>` : contient tout ce qui est visible à l’écran : titres, paragraphes, images, liens, etc. > Une page web HTML doit toujours commencer par `<!DOCTYPE html>` et contenir exactement un élément `<html>` englobant un `<head>` et un `<body>`. L’omission du doctype ou d’une balise de fermeture rend la page non valide. ### Exercices d’application corrigés **Exercice 1** : Écrire le code HTML minimal d’une page web intitulée « Mon CV » en français, avec l’encodage UTF-8, et contenant dans le corps un titre de niveau 1 : « Curriculum Vitae de Jean Dupont ». **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mon CV</title> </head> <body> <h1>Curriculum Vitae de Jean Dupont</h1> </body> </html> ``` **Exercice 2** : Une élève écrit le code suivant : ```html <html> <head> <title>Test</title> </head> <body> <p>Hello world</p> </body> ``` Quel est le problème ? Comment le corriger ? **Corrigé** : Le code manque la déclaration `<!DOCTYPE html>` en première ligne. Sans elle, le navigateur peut interpréter la page en mode de compatibilité ancienne (quirks mode), ce qui peut entraîner des affichages incohérents selon les navigateurs. **Correction** : ajouter `<!DOCTYPE html>` en première ligne : ```html <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <p>Hello world</p> </body> </html> ``` > Remarque : bien que l’attribut `lang` ne soit pas obligatoire pour que la page fonctionne, il est fortement recommandé pour l’accessibilité et le référencement. On pourrait l’ajouter : `<html lang="fr">`. --- ## II. Notions de balises en HTML ### Définition et syntaxe d’une balise HTML > Une balise HTML est un marqueur entouré de chevrons `<` et `>` qui indique au navigateur comment interpréter ou afficher une partie du contenu. Elle peut être d’ouverture (`<nom>`), de fermeture (`</nom>`), ou auto-fermante (`<nom />` en XHTML, mais en HTML5, la forme `<nom>` suffit pour les éléments vides). Les balises permettent de structurer le contenu sémantiquement (ex. : `<h1>` pour un titre principal, `<p>` pour un paragraphe) ou de lui appliquer une mise en forme (ex. : `<b>` pour du gras, `<i>` pour de l’italique). **Syntaxe générale d’un élément HTML** : - Un élément HTML est composé d’une balise d’ouverture, d’un contenu optionnel, et d’une balise de fermeture. - Syntaxe : `<nom_attribut>contenu</nom_attribut>` - Les attributs (optionnels) sont placés dans la balise d’ouverture : `<nom attribut1="valeur1" attribut2="valeur2">contenu</nom>` **Exemples** : - `<p>Ceci est un paragraphe.</p>` → élément `<p>` avec contenu texte. - `<br>` → balise auto-fermante (saut de ligne). En HTML5, on écrit simplement `<br>` (pas besoin de `/>`). - `<img src="image.jpg" alt="Description">` → élément `<img>` avec deux attributs : `src` (source) et `alt` (texte alternatif). > Toute balise d’ouverture doit avoir une balise de fermeture correspondante, sauf pour les éléments vides (comme `<br>`, `<hr>`, `<img>`, `<input>`). L’oubli d’une balise de fermeture est une des erreurs les plus fréquentes en HTML débutant. ### Règles d’imbrication (nesting) et de fermeture > Les balises doivent être correctement imbriquées : si une balise A est ouverte à l’intérieur d’une balise B, alors B doit être fermée après A. On ne peut pas croiser les balises. **Correct** : ```html <p>Ceci est un <strong>texte en gras</strong> dans un paragraphe.</p> ``` Ici, `<strong>` est ouvert et fermé à l’intérieur de `<p>` : imbrication valide. **Incorrect** : ```html <p>Ceci est un <strong>texte en gras</p></strong> ``` Ici, `<p>` est fermé avant `<strong>` : les balises sont croisées → erreur de syntaxe. Le navigateur tentera de corriger automatiquement, mais le résultat peut être imprévisible. > En cas de doute, utilisez l’indentation pour visualiser la hiérarchie : ```html <p> Ceci est un <strong>texte en gras</strong> dans un paragraphe. </p> ``` ### Sensibilité à la casse et bonnes pratiques > En HTML5, les noms de balises et d’attributs ne sont pas sensibles à la casse : `<P>`, `<p>`, `<P>` sont équivalents. Cependant, par convention et pour la lisibilité, on utilise exclusivement des minuscules. **Bonnes pratiques à respecter** : - Toujours utiliser des minuscules pour les balises et les attributs (`<div>`, pas `<DIV>`). - Toujours fermer les balises non vides (`</p>`, pas `<p>` seul). - Utiliser des guillemets doubles autour des valeurs d’attributs (`alt="image"` pas `alt=image`). - Indenter le code pour améliorer la lisibilité (2 ou 4 espaces par niveau). - Éviter les espaces inutiles autour du `=` dans les attributs : `<img src="img.jpg">` est préférable à `<img src = "img.jpg">`. ### Exercices d’application corrigés **Exercice 1** : Identifier les erreurs dans le code suivant et les corriger : ```html <P>Ceci est un <B>texte en gras<I> et italique</B></I></P> ``` **Corrigé** : Erreurs : 1. Balises en majuscules → non conforme à la convention (doit être minuscules). 2. Imbrication incorrecte : `<B>` ouvert, puis `<I>` ouvert, puis `</B>` fermé avant `</I>` → les balises sont croisées. **Correction** : ```html <p>Ceci est un <b>texte en gras</b> et <i>italique</i></p> ``` Ou, si l’on veut mettre en gras et italique le même texte : ```html <p>Ceci est un <b><i>texte en gras et italique</i></b></p> ``` Dans ce dernier cas, l’imbrication est correcte : `<i>` est ouvert et fermé à l’intérieur de `<b>`. **Exercice 2** : Écrire le code HTML d’une phrase contenant : - Le mot « Cameroun » en gras ; - Le mot « Yaoundé » en italique ; - Le mot « éducation » souligné. **Corrigé** : ```html <p>Le <b>Cameroun</b> a pour capitale <i>Yaoundé</i>, où l’<u>éducation</u> est une priorité nationale.</p> ``` > Remarque : la balise `<u>` pour souligner est déconseillée en pratique réelle car elle peut être confondue avec un lien hypertexte. En CSS moderne, on préfère utiliser `text-decoration: underline;`. Cependant, dans le cadre du programme officiel de Seconde, `<u>` est encore mentionné comme balise de mise en forme, donc elle est autorisée ici. --- ## III. Balises de mise en forme en HTML ### Balises de titre : `<h1>` à `<h6>` > Les balises de titre `<h1>` à `<h6>` définissent des niveaux de hiérarchie dans le contenu, avec `<h1>` comme titre le plus important et `<h6>` comme le moins important. Elles sont utilisées pour structurer le texte comme dans un document scientifique ou un rapport. **Propriétés** : - Chaque titre ajoute un saut de ligne avant et après (comportement de niveau bloc). - La taille du texte diminue de `<h1>` à `<h6>` (par défaut dans le navigateur). - Un seul `<h1>` par page est recommandé pour le référencement (SEO), bien que plusieurs soient techniquement autorisés. - Les titres doivent suivre un ordre logique : on ne passe pas directement de `<h2>` à `<h4>` sans `<h3>` intermédiaire (pour l’accessibilité). **Exemple** : ```html <h1>Programmation en HTML</h1> <h2>Notion de page web</h2> <h3>Structure minimale</h3> <h4>Le doctype</h4> <h5>Exemple de code</h5> <h6>Remarque importante</h6> ``` > Un titre `<h1>` doit résumer le sujet principal de la page. Les `<h2>` sont des sections principales, les `<h3>` des sous-sections, etc. ### Balise de paragraphe : `<p>` > La balise `<p>` définit un paragraphe de texte. Elle ajoute automatiquement un espace vertical (marge) avant et après son contenu, ce qui sépare visuellement les blocs de texte. **Propriétés** : - Élément de niveau bloc : occupe toute la largeur disponible et provoque un retour à la ligne avant et après. - Ignore les sauts de ligne multiples dans le code source : plusieurs lignes consécutives dans le HTML sont rendues comme un seul espace, sauf si on utilise `<br>` ou `<pre>`. - Ne peut pas contenir d’autres éléments de niveau bloc (comme un autre `<p>` ou un `<div>`) selon les règles strictes, mais peut contenir des éléments en ligne (`<strong>`, `<em>`, `<a>`, etc.). **Exemple** : ```html <p>Ceci est le premier paragraphe.</p> <p>Ceci est le deuxième paragraphe. Il contient un saut de ligne dans le code source, mais il sera affiché comme une seule ligne sauf si on utilise <br>.</p> ``` Affichage : ``` Ceci est le premier paragraphe. Ceci est le deuxième paragraphe. Il contient un saut de ligne dans le code source, mais il sera affiché comme une seule ligne sauf si on utilise <br>. ``` > Pour forcer un saut de ligne sans créer un nouveau paragraphe, utiliser la balise `<br>` (break line). ### Balise de saut de ligne : `<br>` > La balise `<br>` (break line) insère un saut de ligne simple dans le texte, sans ajouter d’espace vertical supplémentaire comme un paragraphe. **Propriétés** : - Élément vide : pas de contenu, pas de balise de fermeture. - Ne doit pas être utilisée pour créer des espaces entre paragraphes : privilégier `<p>` ou des marges en CSS. - Utile pour les adresses, les poèmes, ou les lignes de code où le saut de ligne est sémantique. **Exemple** : ```html <p> Ligne 1<br> Ligne 2<br> Ligne 3 </p> ``` Affichage : ``` Ligne 1 Ligne 2 Ligne 3 ``` > Ne pas confondre `<br>` avec `<p>` : `<br>` est pour un saut de ligne interne à un bloc ; `<p>` définit un nouveau bloc de texte. ### Balises de mise en forme du texte : `<b>`, `<i>`, `<u>`, `<strong>`, `<em>` > Les balises `<b>`, `<i>`, `<u>` appliquent une mise en forme visuelle (gras, italique, souligné) sans implication sémantique. Les balises `<strong>` et `<em>` transmettent une importance ou une emphase sémantique, ce qui est préféré pour l’accessibilité (lecteurs d’écran) et le référencement. | Balise | Type | Effet visuel | Sémantique | Recommandation | |--------|------|--------------|------------|----------------| | `<b>` | Mise en forme | Gras | Aucune | À éviter si possible ; privilégier `<strong>` | | `<i>` | Mise en forme | Italique | Aucune | À éviter si possible ; privilégier `<em>` | | `<u>` | Mise en forme | Souligné | Aucune | Déconseillé (risque de confusion avec un lien) ; utiliser CSS | | `<strong>` | Sémantique | Gras (par défaut) | Importance forte | Préféré pour mettre en avant un contenu crucial | | `<em>` | Sémantique | Italique (par défaut) | Emphase | Préféré pour souligner une partie du texte à lire avec insistance | > Bien que `<b>`, `<i>`, `<u>` soient encore reconnus par les navigateurs et autorisés dans le programme officiel, leur usage est déconseillé en développement web moderne au profit de `<strong>` et `<em>` pour des raisons d’accessibilité et de séparation du contenu (HTML) et de la présentation (CSS). **Exemples** : ```html <p><b>Ce texte est en gras mais sans importance particulière.</b></p> <p><strong>Ce texte est en gras et indique une information cruciale.</strong></p> <p><i>Ce texte est en italique pour un effet stylistique.</i></p> <p><em>Ce texte est en italique et doit être lu avec insistance.</em></p> <p><u>Ce texte est souligné mais risque d’être confondu avec un lien.</u></p> ``` ### Listes à puces : `<ul>` et `<li>` > Une liste à puces (ou liste non ordonnée) est définie par la balise `<ul>` (unordered list), contenant un ou plusieurs éléments `<li>` (list item). Chaque élément est précédé d’une puce (disque, cercle, carré, etc., selon le style CSS par défaut). **Propriétés** : - `<ul>` est un élément de niveau bloc. - `<li>` peut contenir du texte, des balises en ligne (`<strong>`, `<em>`, `<a>`), ou même d’autres listes (listes imbriquées). - Par défaut, les navigateurs affichent une puce ronde noire (`disc`) pour chaque `<li>` dans un `<ul>`. **Exemple** : ```html <ul> <li>Yaoundé</li> <li>Douala</li> <li>Garoua</li> </ul> ``` Affichage : - Yaoundé - Douala - Garoua **Listes imbriquées** : ```html <ul> <li>Régions du Cameroun <ul> <li>Centre</li> <li>Littoral</li> <li>Nord</li> </ul> </li> <li>Produits agricoles <ul> <li>Cacao</li> <li>Café</li> <li>Bananes</li> </ul> </li> </ul> ``` > Les listes à puces sont idéales pour présenter des éléments sans ordre hiérarchique prédéfini (ex. : caractéristiques, ingrédients, options). ### Listes ordonnées : `<ol>` et `<li>` > Une liste ordonnée (ou liste numérotée) est définie par la balise `<ol>` (ordered list), contenant des éléments `<li>`. Chaque élément est précédé d’un nombre ou d’une lettre, selon le type spécifié. **Attribut `type` de `<ol>`** (facultatif, valeurs courantes) : - `type="1"` : nombres arabes (1, 2, 3, ...) → valeur par défaut - `type="A"` : lettres majuscules (A, B, C, ...) - `type="a"` : lettres minuscules (a, b, c, ...) - `type="I"` : chiffres romains majuscules (I, II, III, ...) - `type="i"` : chiffres romains minuscules (i, ii, iii, ...) **Exemple** : ```html <ol type="A"> <li>Lire la consigne</li> <li>Écrire le code HTML</li> <li>Tester dans le navigateur</li> <li>Corriger les erreurs</li> </ol> ``` Affichage : A. Lire la consigne B. Écrire le code HTML C. Tester dans le navigateur D. Corriger les erreurs > On peut aussi spécifier un numéro de départ avec l’attribut `start` : `<ol start="5">` commence la numérotation à 5. ### Ligne horizontale : `<hr>` > La balise `<hr>` (horizontal rule) insère une ligne horizontale thématique pour séparer des sections de contenu. Elle est un élément de niveau bloc et vide. **Propriétés** : - Par défaut, affiche une ligne fine, grise, avec un léger relief (3D) dans les anciens navigateurs ; aujourd’hui, souvent une ligne plate. - Peut être stylisée avec CSS (couleur, épaisseur, style) mais en HTML pur, on accepte l’apparence par défaut. - Ne doit pas être utilisée pour des fins purement décoratives : privilégier CSS pour les séparateurs visuels. **Exemple** : ```html <h1>Introduction</h1> <p>Ceci est une introduction générale.</p> <hr> <h2>Développement</h2> <p>Ceci est le corps du sujet.</p> ``` > `<hr>` indique un changement de thème ou de sujet, pas simplement une séparation visuelle arbitraire. ### Exercices d’application corrigés **Exercice 1** : Écrire le code HTML d’une page présentant les informations suivantes : - Titre principal : « Géographie du Cameroun » - Sous-titre : « Régions et villes principales » - Liste à puces des régions : Centre, Littoral, Ouest, Nord, Sud-Est - Liste ordonnée (lettres majuscules) des étapes pour visiter le Cameroun : obtenir un visa, réserver un vol, choisir un hébergement, planifier les visites - Une ligne horizontale entre l’introduction et la liste des régions - Le mot « Cameroun » en gras partout où il apparaît - Le mot « visa » en italique **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Géographie du Cameroun</title> </head> <body> <h1>Géographie du <b>Cameroun</b></h1> <h2>Régions et villes principales</h2> <hr> <ul> <li>Centre</li> <li>Littoral</li> <li>Ouest</li> <li>Nord</li> <li>Sud-Est</li> </ul> <h2>Étapes pour visiter le <b>Cameroun</b></h2> <ol type="A"> <li>Obtenir un <i>visa</i></li> <li>Réserver un vol</li> <li>Choisir un hébergement</li> <li>Planifier les visites</li> </ol> </body> </html> ``` **Exercice 2** : Corriger le code suivant : ```html <h1>Mon titre</h1> <p>Ceci est un paragraphe avec <b>du gras et <i>de l'italique</b></i></p> <hr> <ul> <li>Premier élément <li>Deuxième élément </ul> ``` **Corrigé** : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Correction</title> </head> <body> <h1>Mon titre</h1> <p>Ceci est un paragraphe avec <b>du gras et <i>de l'italique</i></b></p> <hr> <ul> <li>Premier élément</li> <li>Deuxième élément</li> </ul> </body> </html> ``` **Erreurs corrigées** : 1. Imbrication incorrecte dans le paragraphe : `<b>` ouvert, puis `<i>` ouvert, puis `</b>` fermé avant `</i>` → corrigé en fermant `<i>` avant `</b>`. 2. Balises `<li>` non fermées → ajout de `</li>` après chaque élément. 3. Ajout du doctype et de la structure minimale manquante (obligatoire pour une page valide). --- ## Synthèse du chapitre - Une page web est un fichier texte interprété par un navigateur, structuré en HTML avec une structure minimale : `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`. - Le `<!DOCTYPE html>` déclare la version HTML5 et évite le mode de compatibilité. - L’attribut `lang="fr"` dans `<html>` améliore l’accessibilité et le référencement. - Le `<meta charset="UTF-8">` garantit l’affichage correct de tous les caractères, y compris les accents. - Une balise HTML est un marqueur entouré de `<` et `>` qui définit la structure ou la mise en forme du contenu. - Les balises doivent être correctement imbriquées et fermées (sauf pour les éléments vides comme `<br>`, `<hr>`, `<img>`). - En HTML5, la casse des balises et attributs est ignorée, mais l’usage des minuscules est fortement recommandé. - Les balises de titre `<h1>` à `<h6>` structurent hiérarchiquement le contenu ; un seul `<h1>` par page est conseillé. - La balise `<p>` définit un paragraphe et ajoute un espace vertical automatique. - La balise `<br>` insère un saut de ligne simple sans créer un nouveau bloc. - Les balises `<b>`, `<i>`, `<u>` appliquent une mise en forme visuelle sans sens sémantique ; `<strong>` et `<em>` sont préférés pour transmettre importance ou emphase. - Les listes à puces (`<ul>`) et ordonnées (`<ol>`) permettent de présenter des éléments de manière structurée ; elles utilisent des éléments `<li>`. - La balise `<hr>` insère une ligne de séparation thématique, pas seulement décorative. - Une page web valide respecte la syntaxe, l’imbrication, la fermeture des balises, et utilise des attributs correctement formatés (guillemets, minuscules). --- ## Glossaire - **Balise** : Marqueur entouré de chevrons `<` et `>` qui définit la structure ou la mise en forme d’une partie du contenu HTML. - **Élément HTML** : Combinaison d’une balise d’ouverture, d’un contenu optionnel, et d’une balise de fermeture (ex. : `<p>texte</p>`). - **Attribut** : Information supplémentaire placée dans une balise d’ouverture sous la forme `nom="valeur"` (ex. : `src="image.jpg"`). - **Doctype** : Déclaration `<!DOCTYPE html>` qui indique la version du langage utilisée (ici, HTML5). - **Niveau bloc** : Type d’élément qui occupe toute la largeur disponible et provoque un retour à la ligne avant et après (ex. : `<p>`, `<div>`, `<h1>`). - **Niveau en ligne** : Type d’élément qui ne provoque pas de retour à la ligne et ne prend que l’espace nécessaire (ex. : `<b>`, `<span>`, `<a>`). - **Imbrication** : Règle selon laquelle les balises doivent être ouvertes et fermées dans un ordre hiérarchique correct, sans croisement. - **UTF-8** : Standard d’encodage des caractères qui permet de représenter pratiquement tous les caractères utilisés dans les langues humaines. - **Sémantique** : Propriété d’une balise qui indique le sens ou le rôle du contenu qu’elle entoure (ex. : `<strong>` indique une importance forte). - **Liste non ordonnée** : Liste à puces définie par `<ul>`, où l’ordre des éléments n’a pas d’importance. - **Liste ordonnée** : Liste numérotée définie par `<ol>`, où l’ordre des éléments est significatif. - **Saut de ligne** : Insersion d’un retour à la ligne simple dans le texte, réalisée par la balise `<br>`. - **Ligne horizontale** : Élément `<hr>` qui marque une séparation thématique entre des sections de contenu.