Aller au contenu principal

Module HTML.1 – Introduction au Web

Objectif​

Comprendre comment fonctionne le Web, le rôle du HTML dans le développement web, et la différence entre HTML, CSS et JavaScript pour poser des bases solides.

Théorie​

Comment fonctionne le Web​

Le Web fonctionne sur un modèle client-serveur :

┌─────────┐         HTTP Request          ┌─────────┐
│ Client  │ ────────────────────────────> │ Serveur │
│(Navigateur)                              │  (Web)  │
│         │ <──────────────────────────── │         │
└─────────┘      HTTP Response (HTML)     └─────────┘

Processus :

  1. Client (navigateur) : L'utilisateur tape une URL (ex: https://example.com)
  2. Requête HTTP : Le navigateur envoie une requête au serveur
  3. Serveur : Traite la requête et renvoie du HTML
  4. Réponse HTTP : Le navigateur reçoit le HTML
  5. Rendu : Le navigateur parse le HTML et affiche la page

Client / Serveur​

Client (navigateur) :

  • Chrome, Firefox, Safari, Edge
  • Parse et affiche le HTML
  • Exécute le JavaScript
  • Applique le CSS

Serveur :

  • Stocke les fichiers (HTML, CSS, JS, images)
  • Peut générer du HTML dynamiquement (PHP, Node.js, etc.)
  • Gère les bases de données
  • Traite les requêtes

Communication :

  • HTTP (HyperText Transfer Protocol) : Protocole de communication
  • HTTPS : HTTP sécurisé (chiffré)
  • URL (Uniform Resource Locator) : Adresse d'une ressource

Rôle du HTML​

HTML (HyperText Markup Language) est le langage de balisage qui structure le contenu d'une page web.

Rôle :

  • ✅ Structure : Organise le contenu (titres, paragraphes, listes)
  • ✅ Sémantique : Donne du sens au contenu
  • ✅ Accessibilité : Permet aux screen readers de comprendre
  • ✅ SEO : Aide les moteurs de recherche à indexer

Ce que HTML n'est PAS :

  • ❌ HTML ne gère pas le style (c'est le rôle du CSS)
  • ❌ HTML ne gère pas l'interactivité (c'est le rôle du JavaScript)
  • ❌ HTML n'est pas un langage de programmation

HTML vs CSS vs JavaScript​

HTML (Structure) :

<h1>Mon titre</h1>
<p>Mon paragraphe</p>

→ Définit QUOI afficher

CSS (Style) :

h1 { color: blue; }
p { font-size: 16px; }

→ Définit COMMENT afficher

JavaScript (Comportement) :

document.querySelector('h1').addEventListener('click', function() {
    alert('Clic !');
});

→ Définit COMMENT interagir

Analogie :

  • HTML = La structure d'une maison (murs, portes, fenêtres)
  • CSS = La décoration (couleurs, meubles, style)
  • JavaScript = L'électricité (interrupteurs, automatismes)

Le processus de rendu dans le navigateur​

Étapes :

  1. Parsing HTML : Le navigateur lit le HTML et crée le DOM (Document Object Model)
  2. Parsing CSS : Le navigateur lit le CSS et crée le CSSOM (CSS Object Model)
  3. Render Tree : Combine DOM + CSSOM
  4. Layout : Calcule les positions et tailles
  5. Paint : Dessine les pixels à l'écran

Performance :

  • Le HTML doit être optimisé pour un parsing rapide
  • Le CSS doit être chargé tôt (dans le <head>)
  • Le JavaScript peut bloquer le rendu (charger en fin de page ou en async)

Versions du HTML​

HTML5 (actuel) :

  • Standard depuis 2014
  • Balises sémantiques (<header>, <nav>, <main>, etc.)
  • Support natif audio/vidéo
  • Formulaires améliorés
  • Canvas et SVG

Historique :

  • HTML 1.0 (1991) : Première version
  • HTML 2.0 (1995) : Standardisation
  • HTML 4.0 (1997) : CSS intégré
  • XHTML (2000) : XML strict
  • HTML5 (2014) : Moderne et flexible

Outils du développeur​

DevTools du navigateur :

  • Inspecteur : Voir et modifier le HTML/CSS
  • Console : Voir les erreurs JavaScript
  • Network : Voir les requêtes HTTP
  • Performance : Analyser les performances

Ouvrir DevTools :

  • Chrome/Edge : F12 ou Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
  • Firefox : F12 ou Ctrl+Shift+I / Cmd+Option+I
  • Safari : Cmd+Option+I (activer d'abord dans Préférences)

Exercices guidés​

Exercice 1 : Comprendre le client-serveur​

  1. Ouvrez votre navigateur
  2. Allez sur https://example.com
  3. Ouvrez les DevTools (F12)
  4. Allez dans l'onglet "Network"
  5. Rechargez la page
  6. Observez la requête HTTP et la réponse HTML

Questions :

  • Quel est le code de statut HTTP ?
  • Combien de temps a pris le chargement ?
  • Quelle est la taille du fichier HTML reçu ?

Exercice 2 : Inspecter le HTML​

  1. Sur n'importe quel site web
  2. Clic droit → "Inspecter" ou "Examiner l'élément"
  3. Explorez le HTML dans l'inspecteur
  4. Modifiez du texte dans l'inspecteur (c'est temporaire)

Objectif : Comprendre que le HTML est la structure visible.

Exercice 3 : Séparer HTML, CSS, JS​

Créez un fichier test.html :

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        h1 { color: blue; }
    </style>
</head>
<body>
    <h1>Mon titre</h1>
    <script>
        console.log('JavaScript chargé');
    </script>
</body>
</html>

Ouvrez-le dans le navigateur et identifiez :

  • Le HTML (structure)
  • Le CSS (style dans <style>)
  • Le JavaScript (comportement dans <script>)

Exercice 4 : Voir le processus de rendu​

  1. Ouvrez les DevTools
  2. Allez dans "Performance"
  3. Enregistrez le chargement d'une page
  4. Observez les étapes : Parsing → Layout → Paint

Exercice 5 : Comparer les versions HTML​

  1. Recherchez "HTML4 vs HTML5" sur le web
  2. Identifiez 3 différences principales
  3. Notez les nouvelles balises HTML5

❌ Erreurs fréquentes​

Erreur 1 : Confondre HTML, CSS et JavaScript​

❌ Mauvais :

<h1 style="color: blue; onclick='alert()'">Titre</h1>

✅ Bon :

<!-- HTML -->
<h1 id="titre">Titre</h1>

<!-- CSS -->
<style>
#titre { color: blue; }
</style>

<!-- JavaScript -->
<script>
document.getElementById('titre').addEventListener('click', function() {
    alert('Clic !');
});
</script>

Pourquoi : Séparation des responsabilités = code maintenable.

Erreur 2 : Penser que HTML est un langage de programmation​

❌ Mauvais : "Je programme en HTML"

✅ Bon : "Je structure une page en HTML" ou "Je code en HTML"

Pourquoi : HTML est un langage de balisage, pas de programmation.

Erreur 3 : Ignorer le processus de rendu​

❌ Mauvais : Charger tout le JavaScript en haut de page

✅ Bon : Charger le JavaScript en fin de page ou en async

Pourquoi : Le JavaScript bloque le rendu. Le charger en fin permet d'afficher le contenu plus vite.

Erreur 4 : Ne pas utiliser les DevTools​

❌ Mauvais : Deviner pourquoi ça ne marche pas

✅ Bon : Ouvrir les DevTools, voir les erreurs dans la Console

Pourquoi : Les DevTools sont votre meilleur ami pour débugger.

🚀 Mini-projet​

Mission : Créer votre première page web

Créez un fichier index.html avec :

Contenu :

  1. Un titre principal (<h1>) : "Ma première page web"
  2. Un paragraphe (<p>) : Présentez-vous en 2-3 phrases
  3. Une liste (<ul>) : 3 choses que vous voulez apprendre
  4. Un lien (<a>) : Vers votre site préféré

Structure :

  • Utilisez la structure HTML5 de base
  • Ajoutez un <title> dans le <head>
  • Utilisez des balises sémantiques si vous les connaissez

Validation :

  1. Ouvrez le fichier dans le navigateur
  2. Vérifiez qu'il s'affiche correctement
  3. Ouvrez les DevTools et inspectez votre HTML
  4. Vérifiez qu'il n'y a pas d'erreurs dans la Console

Critères :

  • ✅ Structure HTML valide
  • ✅ Contenu cohérent
  • ✅ Aucune erreur dans la Console
  • ✅ Page s'affiche correctement

Objectif : Créer votre première page web et comprendre le rôle du HTML.

Validation : Vous pouvez passer au module suivant quand vous comprenez le rôle du HTML, la différence avec CSS/JS, et avez créé votre première page web.