RM Partie 1 : Introduction au Web et au HTML

Partie 1 — Introduction au Web et au HTML

1) Objectifs pédagogiques

distinguer Internet, le Web, l’hypertexte, HTTP/HTTPS et les URL ;
expliquer ce qu’est HTML et ce que signifie « langage de balisage sémantique » ;
différencier clairement les rôles de HTML, CSS et JavaScript ;
situer les grandes étapes de l’évolution d’HTML jusqu’au « Living Standard » ;
écrire une page HTML minimale valide avec <!DOCTYPE html>, <html>, <head>, <body>.

2) Pré-requis et environnement

Un navigateur récent (Firefox, Chrome, Edge …).
Un éditeur de texte (VS Code/VSCodium, Notepad++, nano/vim…).
Aucune installation serveur nécessaire pour cette séance : on ouvrira le fichier directement dans le navigateur.

3) Internet, Web, hypertexte : définitions essentielles

Internet vs World Wide Web

Internet : réseau mondial d’ordinateurs interconnectés (l’infrastructure).
World Wide Web (Web) : un service qui fonctionne sur Internet, fondé sur l’hypertexte, les URL et le protocole HTTP/HTTPS.

URL : identifier et localiser une ressource

Anatomie typique d’une URL :

https://www.exemple.org:443/articles/42?tri=recent#comment-5
|____|  |____________|  |__| \_________/ \_________/ \_________/
  |           |          |       |            |           |
schéma     nom d’hôte    port    chemin       requête     fragment

Schéma : http, https, mailto, ftp, data, etc.
Nom d’hôte (domaine) : www.exemple.org.
Port : optionnel (implicite 80 pour http, 443 pour https).
Chemin : emplacement de la ressource sur le serveur.
Requête (query string) : paires clé=valeur après ?.
Fragment : ancre côté client après # (ne part pas au serveur).

Absolue vs relative

URL absolue : contient schéma + hôte (ex. https://…).
URL relative : relative au document courant (ex. ./images/logo.png).

HTTP et HTTPS : transporter les documents

HTTP : protocole de communication client–serveur. Le client (navigateur) envoie une requête, le serveur répond avec un statut, des en-têtes et un corps (HTML, image, JSON…).
HTTPS : HTTP chiffré via TLS. Garantit confidentialité et intégrité.

Éléments essentiels :

Méthodes : GET (lecture), POST (envoi de données), PUT, PATCH, DELETE, HEAD, OPTIONS.
Codes de statut :
- 200–299 : succès (ex. 200 OK)
- 300–399 : redirections (ex. 301, 302)
- 400–499 : erreurs côté client (ex. 404, 400, 401, 403)
- 500–599 : erreurs côté serveur (ex. 500)
En-têtes : Content-Type, Cache-Control, Set-Cookie, Location, etc.
Stateless : HTTP ne retient pas l’état entre deux requêtes ; on utilise cookies, sessions ou tokens pour la persistance applicative.
Types MIME : text/html, text/css, application/javascript, image/png, application/json, etc.

Hypertexte

Hypertexte : documents reliés par des liens; en HTML, c’est la balise <a>.
La navigation de page en page constitue « la toile » (web).

4) HTML : un langage de balisage sémantique

Qu’est-ce qu’un « langage de balisage » ?

Un document HTML est un texte enrichi de balises (tags) qui structurent et décrivent son contenu.
Les balises sont entourées de chevrons : <p>, <h1>, <a>, <img>, etc.
La plupart des balises ont une balise ouvrante et une balise fermante :
- Exemple : <p>Bonjour</p>
Certaines balises sont vides (pas de contenu texte) et ne nécessitent pas de balise fermante : br, hr, img, meta, link… En HTML5, on écrit simplement <br> plutôt que <br />.

Sémantique : donner du sens

HTML décrit le rôle du contenu, pas sa présentation : <h1> pour un titre principal, <nav> pour une navigation, <article> pour un article, <em> pour une emphase…
Un code sémantique :
- améliore l’accessibilité (lecteurs d’écran, navigation clavier) ;
- aide le référencement (SEO) ;
- facilite la maintenance.

Syntaxe et règles utiles

Casse : les noms de balises et d’attributs ne sont pas sensibles à la casse en HTML5 ; la convention professionnelle est minuscule.
Attributs :
- Forme générale : nom="valeur".
- Certains attributs sont booléens : leur présence suffit (disabled, checked, required).
- Les attributs globaux (communs à presque toutes les balises) : id, class, title, hidden, style, data-*, etc.
Imbrication : respecter la hiérarchie des balises (balises bien emboîtées).
Catégories d’éléments (aperçu) :
- Bloc (occuper toute la largeur, commence sur une nouvelle ligne) : div, p, section, article, header, footer, ul, ol, li, h1…
- En ligne : a, em, strong, span, img, code, kbd…

5) HTML, CSS, JavaScript : rôles et séparation des responsabilités

HTML : structure et sens du contenu. Exemples : titres, paragraphes, listes, liens, images, formulaires.
CSS : présentation et mise en page. Exemples : couleurs, polices, marges, grilles, flexbox, responsive.
JavaScript : comportement et interactions. Exemples : menus dynamiques, formulaires interactifs, requêtes réseau, mises à jour de l’interface.

Principes clefs :

Séparation des préoccupations : HTML (structure) / CSS (style) / JS (comportement).
Progressive enhancement : une page doit rester utile sans JS ni CSS.
Accessibilité : la sémantique HTML est la base ; CSS/JS viennent ensuite.

6) Historique d’HTML (très condensé mais exact)

Début des années 1990 : premières versions par Tim Berners-Lee au CERN.
HTML 2.0 (1995) : première normalisation large.
HTML 3.2 (1997), HTML 4.01 (1999) : enrichissements majeurs.
XHTML 1.0 (2000) : reformulation XML d’HTML 4.01 (syntaxe plus stricte).
XHTML 1.1 (2001).
HTML5 : travaux lancés par le WHATWG au milieu des années 2000 ; Recommandation W3C 2014. Puis HTML 5.1 (2016) et 5.2 (2017).
Depuis 2019 : accord W3C/WHATWG. La référence unique est l’HTML Living Standard du WHATWG, mis à jour en continu. En pratique, on parle encore d’« HTML5 » dans un sens pédagogique.

Points à retenir :

XHTML a renforcé la rigueur de la syntaxe, mais le Web a surtout convergé vers HTML5 puis vers le standard vivant maintenu en continu.
Les balises de présentation historiques (<font>, etc.) ont disparu au profit du CSS.

7) Squelette d’un document HTML : les quatre briques minimales

Pour cette première séance, on vise le strict minimum demandé : <!DOCTYPE html>, <html>, <head>, <body>.

Version minimale stricte :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Version minimale recommandée en pratique (toujours simple, mais exploitable) :

on précise la langue du document (lang) pour l’accessibilité et le SEO ;
on déclare l’encodage UTF-8 pour éviter les problèmes d’accents ;
on donne un titre d’onglet.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma première page</title>
  </head>
  <body>
    Contenu de ma première page.
  </body>
</html>

Remarques importantes :

<!DOCTYPE html> informe le navigateur qu’il doit interpréter le document en mode standard HTML5.
L’attribut lang aide les technologies d’assistance (synthèse vocale, etc.).
meta charset="utf-8" évite les caractères « bizarres » pour les accents.

8) Pièges fréquents à éviter dès le départ

Oublier <!DOCTYPE html> et se retrouver en mode « quirks ».
Ne pas définir l’encodage UTF-8 et voir des caractères accentués mal affichés.
Oublier la fermeture d’une balise et créer une structure mal emboîtée.
Multiplier les <div> sans sémantique alors qu’il existe <header>, <nav>, <main>, <section>, <article>, <footer>.
Confondre présentation et structure (ex. mettre du style en attribut style partout au lieu d’utiliser une feuille CSS).

9) Exercice guidé : créer une première page minimale

Consigne

Créer un fichier HTML valide contenant au minimum <!DOCTYPE html>, <html>, <head>, <body>. Puis l’enrichir avec l’encodage UTF-8, la langue et un titre.

Étapes

Ouvre ton éditeur de texte.
Crée un fichier nommé index.html.
Colle d’abord la version minimale stricte (pour constater que c’est accepté).
Ouvre index.html dans ton navigateur (double-clic ou glisser-déposer).
Remplace ensuite le contenu par la version minimale recommandée ci-dessous.
Recharge la page dans le navigateur.
Vérifie que l’onglet affiche bien le titre choisi.

Correction attendue (version recommandée)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Bonjour Web</title>
  </head>
  <body>
    <h1>Premiers pas</h1>
    <p>Voici ma première page HTML valide.</p>
  </body>
</html>

Optionnel (pour aller un tout petit peu plus loin)

Ajoute un second paragraphe.
Mets quelques mots en emphase avec <em> et en importance forte avec <strong>.
Ajoute un lien externe avec <a href="https://www.example.org">Lien</a>.

10) Mini-quiz de fin de séance

Quelle est la différence entre Internet et le Web ?
Dans l’URL https://site.exemple.com/articles/10?tri=recent#top, que représentent ?tri=recent et #top ?
Cite deux méthodes HTTP et leur usage principal.
À quoi sert <!DOCTYPE html> ?
Pourquoi lang="fr" et <meta charset="utf-8"> sont-ils recommandés ?
Donne le rôle principal de chacun : HTML, CSS, JavaScript.
Quelle est aujourd’hui la référence officielle du standard HTML ?

Corrigé

Internet est l’infrastructure réseau ; le Web est un service d’hypertexte qui fonctionne dessus (via HTTP/HTTPS).
?tri=recent est la chaîne de requête (query string) ; #top est le fragment (ancre côté client).
Exemples : GET (récupérer une ressource), POST (envoyer des données), PUT (remplacer), DELETE (supprimer), HEAD, OPTIONS.
Indiquer au navigateur d’interpréter la page en mode standard HTML5.
lang="fr" aide accessibilité et SEO ; charset="utf-8" évite les problèmes d’accents et caractères spéciaux.
HTML structure le contenu ; CSS gère la présentation ; JavaScript gère le comportement/interaction.
L’HTML Living Standard maintenu par le WHATWG.

11) Fiche-mémo (récapitulatif rapide)

URL = schéma + hôte + port (optionnel) + chemin + requête (optionnel) + fragment (optionnel).
HTTP : client–serveur, méthodes (GET, POST, …), statuts (200, 301, 404, 500), en-têtes, stateless.
HTTPS : HTTP chiffré (TLS).
Hypertexte : documents reliés par des liens (<a>).
HTML : structure et sémantique ; balises, attributs, imbrication correcte.
CSS : style et mise en page.
JavaScript : interactions et logique côté client.
Doctype : <!DOCTYPE html> obligatoire.
Langue : <html lang="fr">.
Encodage : <meta charset="utf-8">.
Titre : <title>…</title> dans <head>.