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)         │
   └─────────────────────────────────────────────────┘