Fiche de révision - Interactions homme-machine sur le Web

---

1. HTML - Structure d'une page Web

• HTML (HyperText Markup Language) : langage de balisage pour structurer le contenu
• Structure minimale : <!DOCTYPE html>, <html>, <head>, <body>
• Balises essentielles :

Balise	Rôle
<h1> à <h6>	Titres (du plus important au moins important)
<p>	Paragraphe
<a href="...">	Lien hypertexte
<img src="..." alt="...">	Image
<ul>, <ol>, <li>	Listes (non ordonnée / ordonnée)
<table>, <tr>, <th>, <td>	Tableau
<div>, <span>	Conteneurs (bloc / en ligne)
<header>, <nav>, <main>, <footer>	Balises sémantiques HTML5

• Attributs courants : id (unique), class (multiple), href, src, alt, name

---

2. CSS - Mise en forme

• CSS (Cascading Style Sheets) : mise en forme du HTML
• Trois méthodes : en ligne (style="..."), interne (<style>), externe (<link>, recommandé)

Syntaxe :

selecteur { propriete: valeur; }

Sélecteurs :

Sélecteur	Cible
p	Toutes les balises <p>
.classe	Éléments avec class="classe"
#id	L'élément avec id="id"
div p	Les <p> dans un <div>

Modèle de boîte : margin (extérieur) → border → padding (intérieur) → contenu

---

3. JavaScript - Interactivité

• S'exécute côté client (dans le navigateur)
• Variables : let (modifiable), const (constante)
• Comparaison stricte : === (pas ==)
• Affichage : console.log() (pas print())

Python → JavaScript :

Python	JavaScript
and, or, not	&&, ||, !
Indentation	Accolades { }
print()	console.log()
True / False	true / false

---

4. Le DOM (Document Object Model)

• Représentation arborescente de la page HTML en mémoire
• Accéder aux éléments :

document.getElementById("id")           // par id
document.querySelector(".classe")        // premier élément
document.querySelectorAll("p")           // tous les éléments

• Modifier :

element.textContent = "nouveau texte";   // texte brut
element.innerHTML = "<em>HTML</em>";     // contenu HTML
element.style.color = "red";             // style CSS
element.classList.add("visible");        // ajouter une classe
element.classList.toggle("actif");       // basculer une classe

---

5. Événements

• Événement = action de l'utilisateur ou du navigateur
• Méthode recommandée : addEventListener

element.addEventListener("click", function(e) {
    // traitement
});

Événements principaux :

Événement	Déclencheur
click	Clic gauche
mouseover / mouseout	Entrée / sortie souris
keydown / keyup	Touche enfoncée / relâchée
input	Modification d'un champ
submit	Soumission d'un formulaire

Objet événement : e.target (élément ciblé), e.key (touche), e.preventDefault() (empêcher l'action par défaut)

---

6. Formulaires HTML

• Balise <form action="URL" method="get|post">
• L'attribut name est indispensable pour transmettre les données
• Types de champs : text, email, password, number, date, checkbox, radio, select
• Boutons : submit (envoyer), reset (réinitialiser), button (JavaScript)

---

7. Requêtes HTTP

Structure d'une requête : ligne de requête + en-têtes + corps

Structure d'une réponse : code de statut + en-têtes + corps

Code	Signification
200	OK
404	Non trouvé
403	Interdit
500	Erreur serveur

GET vs POST

	GET	POST
Paramètres	Dans l'URL (?q=...&p=...)	Dans le corps de la requête
Visibilité	Visibles dans la barre d'adresse	Non visibles dans l'URL
Favori/partage	Oui	Non
Taille	Limitée (~2 000 car.)	Pas de limite
Usage	Lecture (recherche)	Modification (connexion, inscription)

---

8. Schéma récapitulatif

         INTERACTION HOMME-MACHINE SUR LE WEB
         ─────────────────────────────────────

   ┌─────────────────────────────────────────────────┐
   │                  NAVIGATEUR                     │
   │                                                 │
   │  HTML ──► Structure        ┌──────────────┐     │
   │  CSS  ──► Apparence        │  Événements  │     │
   │  JS   ──► Comportement ◄──│  click, input │     │
   │                            │  keydown...  │     │
   │           DOM              └──────────────┘     │
   │     (arbre en mémoire)                          │
   └──────────────┬──────────────────────────────────┘
                  │
         Requêtes HTTP (GET / POST)
                  │
   ┌──────────────▼──────────────────────────────────┐
   │                  SERVEUR                        │
   │                                                 │
   │  Reçoit les données du formulaire               │
   │  Traite la requête (Python, PHP...)             │
   │  Renvoie une réponse HTTP (code + HTML)         │
   └─────────────────────────────────────────────────┘