cours1 min de lecture

HTML et CSS — le contenu et la présentation

Une page Web est un fichier texte qui décrit d'abord son contenu (HTML), puis son apparence (CSS). Cette séparation entre fond et forme est l'une des idées-clés du Web.

programme

Introduction

Quand votre navigateur affiche une page Web, il ne « voit » pas une image toute prête. Il reçoit du texte : du texte qui décrit la structure (les titres, les paragraphes, les images) et d'autres textes qui décrivent l'apparence (les couleurs, les tailles, les marges). Le navigateur lit ces textes, les assemble et dessine la page à l'écran.

Deux langages travaillent ensemble pour produire ce résultat :

HTML (HyperText Markup Language) décrit le contenu et la structure.
CSS (Cascading Style Sheets) décrit l'apparence.

Cette séparation entre fond et forme est l'une des décisions de conception les plus importantes du Web : on peut changer entièrement le look d'un site sans toucher à son contenu, et inversement.

HTML : la structure du contenu

HTML est un langage de balisage — il marque le contenu avec des étiquettes, appelées balises, pour indiquer ce qu'est chaque morceau : « ceci est un titre », « ceci est un paragraphe », « ceci est une image », etc.

Une balise, ça ressemble à quoi ?

Une balise s'écrit entre chevrons < et >. La plupart vont par paires — une balise ouvrante et une balise fermante :

<p>Ceci est un paragraphe.</p>

<p> : balise ouvrante (ici, p pour paragraph).
</p> : balise fermante (le / indique la fermeture).
Le contenu entre les deux est ce que vous voyez à l'écran.

Quelques balises n'ont pas de contenu entre une ouvrante et une fermante. On les appelle balises auto-fermantes. Exemple :

<img src="photo.jpg" alt="Photo de classe" />

Les balises essentielles à connaître

Balise	Rôle
`<h1>` à `<h6>`	Titres, du plus important (h1) au moins important (h6)
`<p>`	Paragraphe
`<a href="…">`	Lien hypertexte
`<img src="…" alt="…" />`	Image
`<ul>` / `<ol>` / `<li>`	Liste non ordonnée / ordonnée / élément de liste
`<div>`	Bloc générique sans signification particulière
`<span>`	Portion de texte sans signification particulière

Zoom sur la balise du lien : `<a>`

Au cours précédent, vous avez vu le concept d'hypertexte : un mot cliquable qui mène à une autre ressource. Maintenant que vous savez ce qu'est une balise, voici comment on fabrique un lien en HTML :

<a href="https://fr.wikipedia.org/wiki/Web">Article Wikipédia sur le Web</a>

<a> est la balise du lien (le a vient de l'anglais anchor, ancre).
L'attribut href (pour hypertext reference) contient l'URL de destination — celle que le navigateur chargera au clic.
Le texte entre <a> et </a> est ce que vous lisez et cliquez sur la page.

Quelques exemples concrets selon le type de lien :

<a href="https://wikipedia.org">Lien externe (autre site)</a>
<a href="/cours/sb-web">Lien interne (même site)</a>
<a href="#histoire">Lien d'ancre (descend dans la page)</a>

Que veut dire l'attribut href d'une balise

Une page HTML minimale

<!DOCTYPE html>
<html>
  <head>
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue sur ma page</h1>
    <p>Ceci est mon premier paragraphe.</p>
    <p>Et voici un <a href="https://nsi.rocks">lien vers nsi.rocks</a>.</p>
  </body>
</html>

Lecture du document, balise par balise :

<!DOCTYPE html> : indique au navigateur qu'on utilise du HTML moderne.
<html> : la racine de toute la page.
<head> : la « tête » du document — informations invisibles à l'écran (titre de l'onglet, métadonnées, liens vers les feuilles de style).
<body> : le « corps » du document — tout ce qui s'affiche à l'écran.

Outil pédagogique : sur n'importe quelle page Web, faites un clic droit puis « Inspecter » ou « Code source de la page ». Le navigateur vous montre le HTML réel qu'il a reçu. C'est exactement ce qu'on demande quand le programme dit « étudier et modifier une page HTML simple ».

Quelle balise HTML sert à afficher un titre principal ?

CSS : la présentation

Sans CSS, une page HTML s'affiche en noir sur blanc, avec une police par défaut et aucune mise en forme particulière. CSS permet de styliser la page : couleurs, polices, tailles, marges, alignements, mise en page complète.

Une règle CSS, comment ça s'écrit

Une règle CSS associe un sélecteur (à qui s'applique le style) et un bloc de propriétés (quel style appliquer) :

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

Lecture : « Tous les éléments <h1> de la page seront bleus, en taille 32 pixels, et centrés horizontalement. »

Chaque ligne du bloc s'écrit propriété: valeur;. Les propriétés sont nombreuses (color, background-color, font-size, margin, padding, border, etc.) — on en apprend quelques-unes au fil de l'usage.

Trois façons d'attacher du CSS à une page HTML

<!-- 1. Fichier CSS séparé (recommandé) -->
<link rel="stylesheet" href="style.css">

<!-- 2. Balise <style> dans le head -->
<style>
  h1 { color: red; }
</style>

<!-- 3. Attribut style direct sur la balise (rapide mais à éviter en production) -->
<h1 style="color: green;">Titre vert</h1>

La séparation est meilleure quand le CSS est dans un fichier à part : le HTML reste lisible, et plusieurs pages peuvent partager la même feuille de style.

Exemple complet, HTML + CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Ma page stylisée</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Bienvenue !</h1>
    <p>Ceci est mon premier paragraphe.</p>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
  margin: 40px;
}

h1 {
  color: #1e3a8a;
  text-align: center;
}

p {
  color: #333;
  line-height: 1.6;
}

Dans la règle CSS p , à quoi correspond p ?

Pourquoi séparer le contenu et la présentation ?

Une idée puissante

Le même HTML peut être affiché de mille façons selon le CSS — ordinateur de bureau, mobile, mode sombre, mode imprimable, lecteur d'écran pour personnes malvoyantes. La séparation rend le Web adaptatif et accessible.

Avantages concrets :

Une seule feuille CSS peut habiller un site entier de 100 pages.
Pour changer la couleur de tous les titres, on modifie une ligne, pas 100 pages.
Le même contenu HTML peut être présenté différemment sur mobile et sur ordinateur — c'est le responsive design.
Les outils d'accessibilité (lecteurs d'écran) lisent le HTML brut sans être perturbés par la mise en forme visuelle.

Cas particuliers et pièges

Une balise mal fermée peut casser tout le rendu de la suite de la page. Toujours fermer ce qu'on ouvre.
HTML n'est pas un langage de programmation : pas de calcul, pas de condition, pas de boucle. C'est un langage de description.
CSS n'est pas non plus un langage de programmation : c'est un langage de présentation. Pour rendre une page interactive, il faut un troisième langage : JavaScript (que vous découvrirez en NSI Première).

Beaucoup d'élèves confondent <h1> (gros titre) avec <title> (titre de l'onglet, dans <head>). Ce sont deux choses différentes.

À retenir

HTML décrit ce qu'il y a sur la page (sa structure) ; CSS décrit à quoi ça ressemble (sa présentation). Cette séparation rend le Web flexible et adaptable. En HTML, on encadre le contenu avec des balises <…>…</…>. En CSS, on associe un sélecteur à un bloc de propriétés propriété: valeur;.