Comprendre les fondamentaux
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Le cycle requête/réponse HTTP
Comment les navigateurs communiquent
2. Le pipeline de rendu
Du code HTML à l'écran
3. HTML5 sémantique
Structurer le contenu intelligemment
4. Formulaires accessibles
Créer des formulaires pour tous
5. Les DevTools
Explorer et déboguer les pages web
HyperText Transfer Protocol
Analogie : Le facteur qui livre des lettres
Rôle : Communication entre navigateur et serveur
Le navigateur = client qui envoie des requêtes
Le serveur = ordinateur qui répond aux requêtes
L'utilisateur tape une URL dans le navigateur
Le navigateur résout l'adresse IP via DNS
Connexion TCP établie avec le serveur
Envoi de la requête HTTP
Le serveur traite la requête
Réponse renvoyée avec un code de statut
Le navigateur affiche le résultat
GET
Récupérer des données
Ex: Charger une page web
POST
Envoyer des données
Ex: Soumettre un formulaire
PUT
Modifier une ressource
Ex: Mettre à jour un profil
DELETE
Supprimer une ressource
Ex: Supprimer un compte
2xx - Succès
200 OK - Requête réussie
201 Created - Ressource créée
3xx - Redirection
301 - Déplacement permanent
302 - Déplacement temporaire
4xx - Erreur client
404 Not Found - Page introuvable
403 Forbidden - Accès refusé
5xx - Erreur serveur
500 - Erreur interne
503 - Service indisponible
De la réponse HTML à l'affichage
Le navigateur ne montre pas le HTML directement
Il doit le transformer en pixels à l'écran
Document Object Model
• Arbre de tous les éléments HTML
• Chaque balise devient un "nœud"
• Structure hiérarchique du document
<html>
<head>...</head>
<body>
<h1>Titre</h1>
<p>Paragraphe</p>
</body>
</html>
CSS Object Model
• Le navigateur lit le CSS
• Crée un arbre des styles
• Associe chaque règle aux éléments
body {
font-family: Arial;
background: white;
}
h1 {
color: purple;
font-size: 2rem;
}
Caractéristiques :
• Fusion du DOM et CSSOM
• Contient uniquement ce qui est visible
• Les éléments cachés (display: none) sont exclus
Calcul de la position de chaque élément
• Détermine la taille de chaque élément
• Calcule la position sur l'écran
• Prend en compte les dimensions du viewport
Le navigateur répond aux questions :
Remplissage des pixels à l'écran
🎨
Couleurs
📐
Bordures
🖼️
Images
C'est à cette étape que vous voyez enfin la page s'afficher !
↓
↓
↓
↓
↓
↓
Signification
Le contenu a du sens pour les machines
Accessibilité
Les lecteurs d'écran comprennent mieux
SEO
Les moteurs de recherche indexent mieux
Maintenance
Le code est plus lisible pour les développeurs
<header>
En-tête de la page ou section
<nav>
Navigation principale
<main>
Contenu principal de la page
<article>
Contenu autonome et réutilisable
<section>
Regroupement thématique
<footer>
Pied de page ou de section
<header>
<nav>
<a href="/">Accueil</a>
<a href="/about">À propos</a>
</nav>
</header>
<main>
<article>
<section>
<h1>Titre de l'article</h1>
<p>Contenu...</p>
</section>
</article>
</main>
<footer>
<p>© 2024 Mon site</p>
</footer>
Utiliser les bonnes balises au bon endroit
Une navigation dans <nav>, un article dans <article>
Ne pas tout mettre dans des <div>
Les div n'ont aucune signification sémantique
Respecter la hiérarchie des titres
<h1> → <h2> → <h3> (un seul h1 par page)
Pour que tout le monde puisse les utiliser
👁️
Handicap visuel
Lecteurs d'écran
⌨️
Navigation clavier
Tabulation
🎯
Étiquettes claires
Instructions précises
<input>
text, email, password, number...
<label>
Obligatoire pour l'accessibilité !
<button>
Bouton de soumission
<textarea>
Texte multiligne
<select> + <option>
Liste déroulante
required
Champ obligatoire
type="email"
Validation du format email
minlength / maxlength
Longueur minimale / maximale
pattern="[0-9]{5}"
Expression régulière personnalisée
type="number" min="0" max="100"
Valeur numérique dans une plage
Accessible Rich Internet Applications
aria-label
Ajoute une description accessible
<button aria-label="Fermer">×</button>
aria-describedby
Lie un champ à sa description
role
Définit le rôle sémantique d'un élément
<div role="alert">Erreur!</div>
<form action="/contact" method="POST">
<label for="name">Nom complet *</label>
<input type="text" id="name" name="name"
required
aria-describedby="name-hint">
<small id="name-hint">Ex: Jean Dupont</small>
<label for="email">Email *</label>
<input type="email" id="email" required>
<label for="message">Message *</label>
<textarea id="message" required
minlength="10"></textarea>
<button type="submit">Envoyer</button>
</form>
Outils de développement intégrés
Chrome
Firefox
Safari
Edge
Raccourci : F12 ou Cmd+Option+I
Voir le DOM en direct
Explorer la structure HTML de la page
Modifier le HTML et CSS
Tester des changements en temps réel
Trouver les styles appliqués
Voir quelles règles CSS s'appliquent à un élément
Voir toutes les requêtes
Images, scripts, styles, API calls...
Temps de chargement
Waterfall montrant la durée de chaque ressource
En-têtes et réponses
Inspecter les détails de chaque requête HTTP
1. Inspecter une page
Clic droit → "Inspecter" sur n'importe quel élément
2. Modifier un élément
Double-cliquer sur le HTML ou CSS pour éditer
3. Observer les requêtes réseau
Ouvrir l'onglet Network puis recharger la page
Console
Messages d'erreur JavaScript
Exécuter du code JS
Application
Cookies, localStorage
Service Workers
Performance
Analyse de rendu
Optimisation
HTTP
Communication client-serveur
Pipeline de rendu
HTML → DOM → CSSOM → Affichage
HTML sémantique
Accessibilité et SEO
Formulaires
Validation et accessibilité
DevTools
Explorer et déboguer vos pages
Questions ?
Merci pour votre attention !