Introduction au Web : HTML, CSS et JavaScript

1. Le Web en une image : client, navigateur et serveur

Quand vous consultez un site, deux ordinateurs dialoguent : le vôtre, appelé client, et une machine distante qui héberge le site, appelée serveur. Sur le client, c’est un logiciel précis qui travaille pour vous : le navigateur web.

Acteur	Ce que c’est	Son rôle
Client	Votre ordinateur, téléphone, tablette	Demande les pages
Navigateur	Firefox, Chrome, Edge, Safari…	Envoie les requêtes, reçoit les fichiers, les assemble et les affiche
Serveur web	Un ordinateur allumé en permanence avec un logiciel serveur (Apache, Nginx…)	Stocke les fichiers du site et les envoie à qui les demande
Serveur DNS	L’« annuaire » d’Internet	Traduit un nom (www.exemple.fr) en adresse IP (203.0.113.10)

1.1 Une adresse web décortiquée

Une adresse web s’appelle une URL (Uniform Resource Locator). Elle indique au navigateur comment et où aller chercher une ressource :

https://www.exemple.fr:443/cours/index.html

Partie	Nom	Signification
https://	Protocole	La « langue » utilisée : HTTP sécurisé (chiffré)
www.exemple.fr	Nom de domaine	Le nom du serveur, facile à retenir pour un humain
:443	Port	La « porte » du serveur (443 pour HTTPS, 80 pour HTTP). Facultatif : quand il est absent, le navigateur utilise le port par défaut du protocole.
/cours/index.html	Chemin	Le fichier demandé, rangé dans le dossier cours du serveur

1.2 Le voyage d’une page, étape par étape

1. Résolution DNS. Le navigateur ne connaît que le nom www.exemple.fr. Il demande au serveur DNS : « Quelle est l’adresse IP de ce nom ? »
2. Réponse DNS. Le DNS répond : 203.0.113.10. Le navigateur sait maintenant où frapper.
3. Connexion. Le navigateur ouvre une connexion TCP vers le port 443 du serveur, puis négocie le chiffrement TLS (c’est le « S » de HTTPS) : le serveur présente un certificat qui prouve son identité.
4. Requête HTTP. Le navigateur envoie sa demande. L’adresse tapée ne précise pas de fichier : il demande la racine du site, GET /, et le serveur lui renvoie sa page d’accueil, le plus souvent le fichier index.html (le schéma écrit directement GET /index.html).
5. Réponse HTTP. Le serveur web retrouve le fichier sur son disque et le renvoie, précédé d’un code d’état (200 OK = tout va bien).
6. Ressources liées. En lisant le HTML, le navigateur découvre qu’il a aussi besoin de style.css, script.js, d’images… Il envoie une nouvelle requête pour chaque fichier.
7. Affichage. Le navigateur assemble le tout : il construit la structure (HTML), applique la mise en forme (CSS), exécute les scripts (JavaScript) et dessine la page à l’écran.

1.3 À quoi ressemblent une requête et une réponse ?

HTTP est un protocole texte : on peut lire les messages échangés. Voici une requête envoyée par le navigateur :

Requête (client → serveur) :

GET /index.html HTTP/1.1
Host: www.exemple.fr
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0
Accept: text/html
Accept-Language: fr-FR

Et la réponse du serveur : une ligne d’état, des en-têtes (des informations sur le contenu), une ligne vide, puis le corps (le fichier lui-même) :

Réponse (serveur → client) :

HTTP/1.1 200 OK
Date: Thu, 22 Oct 2026 08:00:00 GMT
Server: Apache
Content-Type: text/html; charset=UTF-8
Content-Length: 1250

<!DOCTYPE html>
<html lang="fr">
  ...

L’en-tête Content-Type est essentiel : il dit au navigateur quel genre de fichier il reçoit (text/html, text/css, text/javascript, image/png…), donc comment le traiter.

Code	Signification	Exemple de situation
200 OK	Succès	La page est trouvée et envoyée
301 / 302	Redirection	La page a déménagé, le navigateur suit la nouvelle adresse
403 Forbidden	Accès interdit	Le fichier existe mais vous n’avez pas le droit de le voir
404 Not Found	Introuvable	Faute de frappe dans l’URL, page supprimée
500 Internal Server Error	Erreur du serveur	Un programme côté serveur a planté

1.4 Site statique ou site dynamique ?

• Site statique : le serveur envoie les fichiers tels qu’ils sont sur son disque. Tout le monde reçoit la même chose. C’est le cas des exemples de ce cours.
• Site dynamique : le serveur fabrique la page à la demande avec un langage côté serveur (PHP, Python, Node.js…), souvent à partir d’une base de données. Exemple : votre page de notes sur l’ENT est différente de celle de votre voisin. Mais au final, ce qui part vers le navigateur reste… du HTML, du CSS et du JavaScript.

2. Trois langages, trois rôles

Une page web repose sur trois langages complémentaires. On les sépare volontairement dans des fichiers différents : c’est plus clair, plus facile à maintenir et à réutiliser.

2.1 Qui fait quoi, et surtout… où ?

C’est la question à bien comprendre. Les fichiers HTML, CSS et JavaScript sont stockés sur le serveur, mais ils ne sont pas exécutés par lui : le serveur les envoie tels quels, et c’est le navigateur qui les lit et les fait fonctionner.

Langage	Stocké où ?	Lu / exécuté par qui ?	Rôle
HTML	Sur le serveur	Le navigateur (moteur de rendu)	Structure et contenu
CSS	Sur le serveur	Le navigateur (moteur de rendu)	Apparence
JavaScript (côté client)	Sur le serveur	Le navigateur (moteur JavaScript)	Interactivité
PHP, Python, JavaScript avec Node.js (côté serveur)	Sur le serveur	Le serveur	Fabriquer les pages, interroger une base de données

Conséquence	Pourquoi c’est important
Le code HTML, CSS et JS est visible par tous	Clic droit → « Code source de la page » (Ctrl+U) ou F12 : n’importe qui peut le lire.
Le JavaScript s’exécute chez le visiteur	Il utilise la puissance de son appareil ; il peut être désactivé ou modifié par lui.
Le serveur ne sait pas ce qui se passe dans la page	Un clic qui ne déclenche pas de requête reste invisible pour lui.

3. HTML : la structure de la page

HTML (HyperText Markup Language) n’est pas un langage de programmation : c’est un langage de balisage. On « étiquette » chaque morceau de contenu pour dire au navigateur ce que c’est : un titre, un paragraphe, un lien, une image…

3.1 Balises, éléments et attributs

<p>Bonjour tout le monde !</p>
<a href="https://developer.mozilla.org/fr/" title="Documentation">Le site MDN</a>
<img src="images/logo.png" alt="Logo du lycée">

• <p> est une balise ouvrante, </p> la balise fermante ; l’ensemble avec son contenu forme un élément.
• href, title, src, alt sont des attributs : des précisions écrites dans la balise ouvrante, sous la forme nom="valeur".
• Certaines balises n’ont pas de contenu, donc pas de balise fermante : <img>, <br>, <input>, <meta>…

3.2 Le squelette de toute page HTML

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ma première page</title>
</head>
<body>
  <h1>Bienvenue !</h1>
  <p>Ceci est ma première page web.</p>
</body>
</html>

Ligne	Rôle
<!DOCTYPE html>	Indique au navigateur qu’il s’agit de HTML moderne (HTML5)
<html lang="fr">	Racine de la page ; lang aide les lecteurs d’écran et les traducteurs
<head>	L’en-tête invisible : informations sur la page, liens vers le CSS et le JS
<meta charset="UTF-8">	L’encodage des caractères (sans lui, les accents s’affichent mal)
<meta name="viewport" …>	Adapte l’affichage aux écrans de téléphone
<title>	Le texte de l’onglet du navigateur et des résultats de recherche
<body>	Le contenu visible de la page

3.3 Les balises essentielles

Balise	Usage	Exemple
<h1> à <h6>	Titres, du plus important au moins important	<h1>Mon site</h1>
<p>	Paragraphe	<p>Du texte.</p>
<a>	Lien hypertexte	<a href="contact.html">Contact</a>
<img>	Image (avec texte alternatif)	<img src="chat.jpg" alt="Un chat">
<ul>, <ol>, <li>	Liste à puces, liste numérotée, élément de liste	<ul><li>Un</li></ul>
<strong>, <em>	Texte important, texte mis en valeur	<strong>Attention</strong>
<header>, <nav>, <main>, <footer>	Zones de la page : en-tête, menu, contenu principal, pied	<nav>…</nav>
<section>, <div>, <span>	Regrouper des éléments (pour la mise en forme notamment)	<div class="carte">…</div>
<form>, <label>, <input>, <button>	Formulaire et ses champs	voir § 3.5

3.4 Bien imbriquer et bien choisir ses balises

Les éléments s’emboîtent comme des poupées russes : le dernier ouvert est le premier fermé.

<p>Ceci est <strong>important</strong>.</p>   <!-- correct -->
<p>Ceci est <strong>important</p></strong>.   <!-- FAUX : croisé -->

Choisissez la balise selon le sens du contenu, pas selon son apparence : un titre se met dans <h2>, pas dans un <p> écrit en gros. C’est ce qu’on appelle le HTML sémantique : il aide les moteurs de recherche et les personnes qui naviguent avec un lecteur d’écran (accessibilité). C’est aussi pour cela que l’attribut alt des images est obligatoire.

3.5 Un formulaire : quand la page parle au serveur

<form action="/inscription" method="post">
  <label for="email">Adresse e-mail</label>
  <input type="email" id="email" name="email" required>

  <label for="mdp">Mot de passe</label>
  <input type="password" id="mdp" name="mdp" minlength="12" required>

  <button type="submit">S'inscrire</button>
</form>

Quand on clique sur « S’inscrire », le navigateur envoie une nouvelle requête HTTP (POST /inscription) contenant les champs saisis. C’est un programme côté serveur (PHP par exemple) qui les recevra et les traitera. On retrouve bien la relation client → serveur du chapitre 1.

4. CSS : la présentation

CSS (Cascading Style Sheets, « feuilles de style en cascade ») décrit l’apparence des éléments HTML : couleurs, polices, tailles, espacements, disposition. Le HTML dit « ceci est un titre », le CSS dit « les titres sont bleu marine, centrés, en 32 pixels ».

4.1 Anatomie d’une règle CSS

h1 {                       /* sélecteur : À QUI s'applique la règle */
  color: #21295c;          /* propriété : valeur ;  → couleur du texte */
  font-size: 32px;         /* taille du texte */
  text-align: center;      /* alignement */
}

Une règle = un sélecteur + un bloc de déclarations entre accolades. Chaque déclaration associe une propriété à une valeur et se termine par un point-virgule.

4.2 Comment le navigateur obtient le CSS

Méthode	Exemple	Avis
Attribut style	<p style="color: red;">	À éviter : mélange contenu et présentation
Balise <style> dans le <head>	<style> p { color: red; } </style>	Acceptable pour une page isolée
Fichier externe (recommandé)	<link rel="stylesheet" href="style.css">	Une seule feuille pour tout le site

Avec un fichier externe, en lisant la balise <link>, le navigateur envoie une requête GET /style.css ; le serveur répond avec Content-Type: text/css. Bonus : le navigateur garde ce fichier en cache et ne le retélécharge pas à chaque page du site. Le serveur, lui, n’a fait que transmettre le fichier : il ne l’a jamais « appliqué ».

4.3 Les sélecteurs de base

Sélecteur	Cible	Côté HTML
p	Tous les paragraphes	<p>
.carte	Tous les éléments de classe « carte » (réutilisable)	<div class="carte">
#menu	L’élément d’identifiant « menu » (unique dans la page)	<nav id="menu">
nav a	Les liens situés à l’intérieur d’un <nav>	<nav><a>…</a></nav>
a:hover	Les liens survolés par la souris	—

4.4 La cascade : qui gagne en cas de conflit ?

p        { color: black; }
.alerte  { color: orange; }
#urgent  { color: red; }

Pour <p class="alerte" id="urgent">, le texte sera rouge. Règle simplifiée : la règle la plus précise l’emporte (identifiant > classe > balise). À précision égale, c’est la dernière écrite qui gagne.

4.5 Le modèle de boîte

Pour le navigateur, chaque élément est une boîte rectangulaire composée de quatre couches :

.carte {
  width: 400px;
  padding: 20px;               /* espace intérieur */
  border: 2px solid #1c7293;   /* épaisseur, style, couleur */
  margin: 30px auto;           /* 30px en haut/bas, centré horizontalement */
  border-radius: 10px;         /* coins arrondis */
}

4.6 Unités et couleurs utiles

Notation	Signification
px	Pixels : taille fixe
%	Pourcentage de l’élément parent
rem	Multiple de la taille de texte de base de la page (16 px par défaut) : respecte le réglage de taille de texte choisi par le visiteur, pratique pour l’accessibilité
red, #ff0000, rgb(255, 0, 0)	Trois façons d’écrire la même couleur (nom, hexadécimal, rouge/vert/bleu)

Pour adapter la page aux petits écrans, on utilise une media query : un bloc de règles qui ne s’applique que sous certaines conditions.

@media (max-width: 600px) {     /* uniquement sur les écrans étroits */
  h1 { font-size: 24px; }
}

5. JavaScript : le comportement

JavaScript est un vrai langage de programmation : variables, conditions, boucles, fonctions. Dans une page web, il sert à la rendre vivante sans la recharger : réagir à un clic, vérifier un formulaire, afficher ou masquer un élément, faire un calcul, charger des données…

5.1 Où et quand s’exécute le JavaScript ?

Le fichier script.js est stocké sur le serveur. Le navigateur le télécharge (GET /script.js, réponse Content-Type: text/javascript), puis son moteur JavaScript l’exécute sur l’ordinateur du visiteur. On le relie à la page dans le <head> :

<script src="script.js" defer></script>

L’attribut defer demande au navigateur d’exécuter le script une fois tout le HTML lu. Sans lui, le script pourrait chercher un bouton qui n’existe pas encore dans la page.

5.2 Premiers pas dans la console

Appuyez sur F12, onglet Console, et tapez ces lignes une par une (Entrée après chacune) :

console.log("Bonjour !");   // affiche un message dans la console
2 + 3                       // la console calcule : 5
"Root" + " & " + "Code"     // on peut coller du texte : "Root & Code"
alert("Coucou");            // une fenêtre s'ouvre dans la page

5.3 Les bases du langage

const prenom = "Camille";    // const : valeur qui ne changera pas
let age = 19;                // let : valeur qui peut changer
age = age + 1;               // age vaut maintenant 20

if (age >= 18) {             // condition
  console.log(prenom + " est majeure.");
} else {
  console.log(prenom + " est mineure.");
}

function direBonjour(nom) {  // fonction : un bloc réutilisable
  return "Bonjour " + nom + " !";
}
console.log(direBonjour("Lina"));   // Bonjour Lina !

5.4 Le DOM : la page vue par JavaScript

En lisant le HTML, le navigateur construit en mémoire un arbre d’objets : le DOM (Document Object Model). JavaScript ne modifie pas le fichier HTML du serveur : il agit sur cet arbre, dans la mémoire du navigateur, et l’écran se met à jour aussitôt.

const titre = document.querySelector("h1");   // on attrape le premier <h1>
titre.textContent = "Nouveau titre";          // on change son texte
titre.style.color = "crimson";                // on change sa couleur

5.5 Réagir aux actions de l’utilisateur : les événements

Un événement est quelque chose qui se produit dans la page : un clic, une touche pressée, une saisie… On demande au navigateur d’écouter un événement et de lancer une fonction quand il survient.

Extrait de index.html

<input type="text" id="prenom" placeholder="Votre prénom">
<button id="btn">Valider</button>
<p id="resultat"></p>

script.js

const bouton = document.getElementById("btn");

bouton.addEventListener("click", function () {
  const saisie = document.getElementById("prenom").value.trim();
  const resultat = document.getElementById("resultat");

  if (saisie === "") {
    resultat.textContent = "Merci de saisir un prénom.";
  } else {
    resultat.textContent = "Bienvenue " + saisie + " !";
  }
});

Remarquez qu’aucune requête n’est envoyée au serveur : tout se passe dans le navigateur, instantanément.

6. Tout assembler : une carte de visite en trois fichiers

Voici un petit site complet. Les trois fichiers sont placés dans le même dossier, sur votre ordinateur pour tester, puis sur le serveur pour publier.

mon-site/          (sur le serveur : /var/www/html/ ou dossier www)
├── index.html            la structure
├── style.css             la présentation
└── script.js             le comportement

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carte de visite</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header>
    <h1>Camille Martin</h1>
    <p class="metier">Étudiante en BTS SIO</p>
  </header>
  <main>
    <section class="carte">
      <h2>À propos</h2>
      <p>J'apprends à créer des sites web.</p>
      <ul>
        <li>HTML : la structure</li>
        <li>CSS : la présentation</li>
        <li>JavaScript : l'interactivité</li>
      </ul>
      <button id="btn-theme">Changer de thème</button>
      <p id="message"></p>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 Camille Martin</p>
  </footer>
</body>
</html>

style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f5f7f9;
  color: #222222;
}
header {
  background-color: #21295c;
  color: white;
  text-align: center;
  padding: 20px;
}
.metier { font-style: italic; }
.carte {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
button { padding: 8px 16px; cursor: pointer; }
footer { text-align: center; font-size: 0.8rem; }

/* Thème sombre : activé par JavaScript en ajoutant la classe "sombre" */
body.sombre { background-color: #1a1a1a; color: #eeeeee; }
body.sombre .carte { background-color: #333333; }

script.js

const bouton = document.getElementById("btn-theme");
const message = document.getElementById("message");
let compteur = 0;

bouton.addEventListener("click", function () {
  document.body.classList.toggle("sombre");   // ajoute ou retire la classe
  compteur = compteur + 1;
  message.textContent = "Thème changé " + compteur + " fois.";
});

6.1 Ce qui se passe à l’ouverture de la page

N°	Le navigateur…	Le serveur…
1	demande GET / (ou /index.html)	renvoie index.html — text/html
2	lit le <head>, trouve <link> → demande GET /style.css	renvoie style.css — text/css
3	trouve <script> → demande GET /script.js	renvoie script.js — text/javascript
4	construit le DOM, applique le CSS, affiche la page	ne fait plus rien : il attend la prochaine requête
5	exécute script.js (grâce à defer, après lecture du HTML) et attend un clic	—
6	au clic : JavaScript ajoute la classe sombre, le CSS correspondant s’applique	rien : aucune requête n’est envoyée

6.2 Tester avec un vrai serveur web

En double-cliquant sur index.html, l’adresse commence par file:// : le navigateur lit directement votre disque, sans serveur ni HTTP. Pour observer de vraies requêtes, lancez un mini-serveur web dans le dossier du site (Python doit être installé) :

cd mon-site
python -m http.server 8000 --bind 127.0.0.1    # sous Linux : python3 -m http.server …

Ouvrez http://localhost:8000 : la console où tourne Python affiche chaque requête reçue, avec son code d’état. Vous voyez le serveur travailler ! L’option --bind 127.0.0.1 réserve le serveur à votre propre machine. Arrêtez-le avec Ctrl+C.

Vous verrez sans doute aussi une requête GET /favicon.ico terminée par un code 404 : le navigateur cherche automatiquement la petite icône de l’onglet, que notre site n’a pas.

7. Synthèse cybersécurité

Risque	Bon réflexe
Interception des données (Wi-Fi public…)	Toujours publier en HTTPS ; ne jamais saisir d’identifiants sur une page en HTTP
Hameçonnage (faux site avec cadenas)	Le cadenas ne prouve pas l’honnêteté : lire le nom de domaine
Secrets visibles dans le code	Rien de confidentiel dans le HTML, les commentaires, le CSS ou le JavaScript
Contrôles contournés	Vérifier côté serveur tout ce qui vient du navigateur
Injection de code (XSS)	Afficher les saisies avec textContent, jamais avec innerHTML
Ressources tierces (CDN, polices)	Héberger ses fichiers soi-même ; limiter les dépendances externes
Serveur de test exposé	Le lancer dans le bon dossier, l’arrêter après usage

8. À retenir

9. Lexique

Terme	Définition
Client	Machine (et logiciel) qui demande une ressource
Serveur web	Machine et logiciel (Apache, Nginx…) qui stocke et distribue les fichiers d’un site
Navigateur	Logiciel client qui envoie les requêtes et affiche les pages
URL	Adresse complète d’une ressource : protocole, domaine, chemin
DNS	Système qui associe un nom de domaine à une adresse IP
HTTP / HTTPS	Protocole d’échange entre client et serveur ; HTTPS = HTTP chiffré par TLS
Requête / réponse	Message envoyé par le client / message renvoyé par le serveur
Code d’état	Nombre indiquant le résultat d’une requête (200, 404, 500…)
Balise / élément / attribut	Étiquette HTML / balise + contenu / précision dans la balise
Sélecteur	Partie d’une règle CSS qui désigne les éléments ciblés
DOM	Représentation de la page en arbre d’objets, manipulable en JavaScript
Événement	Action détectée dans la page (clic, saisie…) à laquelle un script peut réagir
XSS	Attaque qui consiste à faire exécuter un script malveillant dans la page d’un autre visiteur