📄 Le cours : la structure d'une page
HTML (*HyperText Markup Language*) n'est pas un langage de programmation : il décrit la structure d'une page (ceci est un titre, ceci un paragraphe, ceci un lien) à l'aide de balises. L'apparence est le travail du CSS, le comportement celui de JavaScript.
| Langage | Rôle | Exemple |
|---|
| HTML | structure et contenu | « ceci est un titre » |
| CSS | apparence | « les titres sont bleus et centrés » |
| JavaScript | comportement | « au clic, afficher un message » |
Anatomie d'un élément
<a href="page.html">Aller à la page</a>
└────────┬─────────┘└───────┬──────┘└┬─┘
balise ouvrante contenu balise fermante
(avec un attribut)
Une balise fermante reprend le nom de l'ouvrante précédé d'une barre oblique. Certains éléments n'ont pas de contenu et donc pas de balise fermante : <br> (retour à la ligne), <hr> (trait), <img> (image), <meta>, <input>. Les noms de balises sont insensibles à la casse, mais on écrit toujours en minuscules.
Le squelette expliqué
<!DOCTYPE html> indique au navigateur qu'il s'agit de HTML5. Sans lui, il passe en « mode de compatibilité » et affiche la page de façon imprévisible.<html lang="fr"> est la racine ; lang aide les lecteurs d'écran (prononciation) et les moteurs de recherche.<head> contient les informations sur la page, qui ne s'affichent pas : encodage, titre, feuille de style, scripts.<body> contient tout ce que l'utilisateur voit.
| Dans le head | Rôle |
|---|
<meta charset="UTF-8"> | encodage des caractères : sans lui, « é » s'affiche « é » |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | adapte la page à la largeur d'un téléphone |
<title>…</title> | texte de l'onglet, des favoris, des résultats de recherche |
<link rel="stylesheet" href="style.css"> | relie la feuille de style CSS |
<script src="app.js" defer></script> | relie un fichier JavaScript (defer : exécuté une fois la page lue) |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cours NSI</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<header><h1>Cours NSI</h1></header>
<main>
<p>Contenu de la page.</p>
</main>
<footer><p>© 2026</p></footer>
</body>
</html>
Imbrication et indentation
Les éléments s'emboîtent comme des boîtes : on ferme toujours le dernier ouvert en premier. On indente (2 espaces de plus à chaque niveau) pour voir cet emboîtement. Pour le navigateur, la page est un arbre :
html
├── head
│ ├── meta
│ └── title
└── body
├── header
│ └── h1
└── main
└── p
Cet arbre s'appelle le DOM (*Document Object Model*) : c'est lui que JavaScript manipule (voir DOM en JavaScript).
Commentaires et entités
Un commentaire <!-- … --> n'est jamais affiché. Les caractères <, > et & ont un sens pour HTML : pour les afficher, on écrit leur entité (<, >, &). est une espace insécable (le navigateur ne la coupe pas en fin de ligne), © donne ©.
<!-- Ce commentaire n'apparait pas à l'écran -->
<p>Pour afficher une balise, on écrit : <p></p>
<p>Prix : 5 € & livraison offerte</p>
RenduPour afficher une balise, on écrit : <p>
Prix : 5 € & livraison offerte
Créer et tester sa première page
- Crée un dossier, puis un fichier texte nommé
index.html avec un éditeur (VS Code, Notepad++ : pas un traitement de texte).
- Enregistre-le en UTF-8 et colle le squelette.
- Double-clique sur le fichier : il s'ouvre dans le navigateur. Après chaque modification, enregistre puis recharge avec
F5.
- Vérifie la validité du code sur le validateur du W3C (validator.w3.org).
Tu peux aussi copier n'importe quel exemple de cette page dans l'atelier (bouton « Atelier » de chaque fenêtre de code) pour voir le rendu tout de suite.
