Quelle est la différence entre HTML et CSS ?

HTML (HyperText Markup Language) définit la structure et le contenu d'une page web (titres, paragraphes, liens…). CSS (Cascading Style Sheets) définit la mise en forme et l'apparence (couleurs, polices, disposition).

Comment fonctionne une balise HTML ?

Une balise HTML est un mot-clé entre chevrons qui délimite un élément. Elle s'écrit en général avec une balise ouvrante et une balise fermante . Ex : Mon texte .

Qu'est-ce que le modèle boîte en CSS ?

Chaque élément HTML est représenté comme une boîte rectangulaire avec un contenu, un espacement interne (padding), une bordure (border) et une marge externe (margin).

← Retour aux ressources

Sciences numériques et technologie (SNT) · Classe de 2ⁿᵈᵉ

Langages HTML et CSS

Créer et mettre en forme des pages web — thème « Le Web » (programme SNT 2nde)

À propos de cette page

Ce cours de sciences numériques et technologie (snt) en seconde sur « Langages HTML et CSS » suit le programme officiel de sciences numériques et technologie (snt) de seconde. Il présente les définitions, les propriétés et les méthodes essentielles, accompagnées d'exemples résolus pour bien comprendre. Au programme : Qu'est-ce que le HTML ?, Structure d'une page HTML, Les principales balises HTML, Les hyperliens et les images. Chaque notion est expliquée pas à pas, puis mise en pratique grâce à des exercices interactifs, un QCM et une évaluation corrigée. Idéal pour réviser à son rythme, combler ses lacunes et progresser, en autonomie ou avec un professeur. Cours rédigé par un professeur particulier à Marseille pour aider les élèves de seconde à réussir en sciences numériques et technologie (snt).

Au programme

1 · Qu'est-ce que le HTML ?

2 · Structure d'une page HTML

3 · Les principales balises HTML

4 · Les hyperliens et les images

5 · Introduction au CSS

6 · Sélecteurs et propriétés CSS

7 · Le modèle boîte (box model)

8 · HTML et CSS : séparation des rôles

1Qu'est-ce que le HTML ?

Le Web (World Wide Web) repose sur des pages web affichées par un navigateur. Ces pages sont écrites dans un langage appelé HTML.

Définition. HTML (HyperText Markup Language) est un langage de balisage qui décrit la structure et le contenu d'une page web. Il utilise des balises pour indiquer au navigateur comment interpréter chaque partie du document.

HTML n'est pas un langage de programmation : il ne contient pas de boucles ni de conditions. C'est un langage de description de contenu.

Historique. HTML a été inventé par Tim Berners-Lee au CERN en 1991. La version actuelle est HTML5 (standard depuis 2014). Il est géré par le consortium W3C (World Wide Web Consortium).

2Structure d'une page HTML

Tout fichier HTML respecte une structure minimale obligatoire. Voici le squelette de base :

Exemple de squelette HTML5.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Ma page</title>
  </head>
  <body>
    <h1>Bonjour</h1>
    <p>Bienvenue sur ma page.</p>
  </body>
</html>

Balise	Rôle
`<!DOCTYPE html>`	Déclare la version HTML5 (pas une balise, une directive)
`<html>`	Racine du document
`<head>`	En-tête invisible : métadonnées, titre, liens CSS
`<meta charset>`	Encodage des caractères (UTF-8 pour les accents)
`<title>`	Titre affiché dans l'onglet du navigateur
`<body>`	Corps visible de la page

Attention ! La distinction <head> / <body> est fondamentale. Tout ce que l'utilisateur voit se trouve dans le <body>. Le <head> contient des informations pour le navigateur, non affichées directement.

3Les principales balises HTML

Une balise HTML s'écrit entre chevrons. La plupart existent en paire : une balise ouvrante et une balise fermante (avec un /).

Syntaxe générale. <balise attribut="valeur">contenu</balise>

Balise	Rôle	Exemple
`<h1>…<h6>`	Titres (1 = le plus important)	`<h1>Mon site</h1>`
`<p>`	Paragraphe	`<p>Du texte.</p>`
`<ul>` / `<li>`	Liste non ordonnée / élément	`<ul><li>Item</li></ul>`
`<ol>` / `<li>`	Liste ordonnée / élément	`<ol><li>Étape 1</li></ol>`
`<strong>`	Texte important (gras)	`<strong>Important</strong>`
`<em>`	Emphase (italique)	`<em>Accentué</em>`
`<br>`	Saut de ligne (balise orpheline)	`Ligne 1<br>Ligne 2`
`<div>`	Bloc générique (conteneur)	`<div>…</div>`
`<span>`	Inline générique	`<span>mot</span>`

Balises orphelines. Certaines balises n'ont pas de contenu et s'écrivent sans balise fermante : <br>, <hr>, <img>, <meta>.

4Les hyperliens et les images

Deux éléments essentiels du Web : les liens hypertextes et les images.

Hyperlien. La balise <a> (anchor) crée un lien vers une autre page ou ressource. L'attribut href (Hypertext REFerence) indique l'adresse de destination.

Exemple de lien.
<a href="https://www.education.gouv.fr">Ministère de l'Éducation</a>

Il existe deux types d'URL :

URL absolue : adresse complète, ex. https://exemple.com/page.html
URL relative : chemin par rapport au fichier courant, ex. ../images/photo.jpg

Image. La balise <img> insère une image. Elle est orpheline (pas de balise fermante). Attributs principaux :
• src : chemin de l'image
• alt : texte alternatif (accessibilité, obligatoire)
• width / height : dimensions en pixels

Exemple d'image.
<img src="photo.jpg" alt="Paysage de montagne" width="400">

Attention ! L'attribut alt est indispensable pour l'accessibilité (lecteurs d'écran pour les malvoyants) et le référencement (SEO). Ne jamais l'omettre.

5Introduction au CSS

Le CSS (Cascading Style Sheets, feuilles de style en cascade) est le langage qui définit l'apparence visuelle d'une page HTML : couleurs, polices, tailles, marges, etc.

Règle CSS. Une règle CSS se compose d'un sélecteur (qui désigne les éléments HTML à styliser) et d'un bloc de déclarations entre accolades. Chaque déclaration est une paire propriété : valeur ;

Exemple de règle CSS.

p {
  color: red;
  font-size: 16px;
}

→ Tous les paragraphes auront le texte rouge, taille 16 pixels.

Il y a trois façons d'intégrer du CSS dans une page HTML :

CSS externe (recommandé) : fichier .css séparé, lié avec <link rel="stylesheet" href="style.css"> dans le <head>.
CSS interne : dans une balise <style> dans le <head>.
CSS inline : directement dans l'attribut style d'une balise. Déconseillé car difficile à maintenir.

Bonne pratique. Séparer le HTML (structure) du CSS (apparence) dans deux fichiers distincts facilite la maintenance et la lisibilité du code.

6Sélecteurs et propriétés CSS

Les sélecteurs CSS permettent de cibler précisément quels éléments HTML on veut styliser.

Sélecteur	Cible	Exemple
Balise	Tous les éléments de ce type	`h1 { color: blue; }`
Classe (`.`)	Éléments ayant cet attribut `class`	`.important { font-weight: bold; }`
Identifiant (`#`)	L'élément unique ayant cet `id`	`#menu { background: gray; }`
Universel (`*`)	Tous les éléments	`* { margin: 0; }`

Principales propriétés CSS :

Propriété	Rôle	Exemple de valeur
`color`	Couleur du texte	`red`, `#ff0000`, `rgb(255,0,0)`
`background-color`	Couleur de fond	`lightblue`, `#aae`
`font-size`	Taille de police	`16px`, `1.2em`
`font-family`	Police	`Arial, sans-serif`
`text-align`	Alignement du texte	`left`, `center`, `right`
`width` / `height`	Largeur / Hauteur	`200px`, `50%`
`border`	Bordure	`2px solid black`

Exemple complet.

.titre-principal {
  color: #2c3e50;
  font-size: 28px;
  font-family: Georgia, serif;
  text-align: center;
}

7Le modèle boîte (box model)

En CSS, chaque élément HTML est représenté comme une boîte rectangulaire. Le modèle boîte (box model) décrit l'espace occupé par un élément.

Modèle boîte CSS. De l'intérieur vers l'extérieur :
1. Content (contenu) : le texte ou l'image à l'intérieur
2. Padding (rembourrage) : espace entre le contenu et la bordure
3. Border (bordure) : le contour de l'élément
4. Margin (marge) : espace entre la bordure et les éléments voisins

Exemple.

div {
  width: 200px;
  padding: 10px;
  border: 2px solid blue;
  margin: 20px;
}

→ La largeur totale occupée est : 200 + 2×10 + 2×2 = 224 px (sans compter la marge).

Propriété	Signification
`padding`	Espace interne (contenu ↔ bordure)
`border`	Épaisseur, style, couleur de la bordure
`margin`	Espace externe (bordure ↔ autres éléments)
`margin: auto`	Centre horizontalement un bloc de largeur fixe

Astuce. Pour centrer un bloc : donner une width fixe et mettre margin: 0 auto;. Cette technique est très utilisée pour centrer le contenu principal d'une page.

8HTML et CSS : séparation des rôles

Un principe fondamental du développement web moderne est la séparation des responsabilités :

Langage	Rôle	Question à laquelle il répond
HTML	Structure et contenu	Qu'est-ce que c'est ? (titre, paragraphe, liste…)
CSS	Présentation et mise en forme	À quoi ça ressemble ? (couleur, taille, position…)
JavaScript	Comportement et interactivité	Que se passe-t-il quand on clique ?

Avantage de la séparation. En modifiant uniquement le fichier CSS, on peut changer entièrement l'apparence d'un site sans toucher à son contenu HTML. C'est la base du web design responsive et des thèmes graphiques.

Attention ! On déconseille d'utiliser des attributs HTML anciens comme bgcolor, align ou font pour la mise en forme. Ces attributs sont obsolètes en HTML5 : on utilise toujours CSS à la place.

Résumé pratique. Pour créer un site web minimal : (1) créer index.html avec la structure HTML, (2) créer style.css avec les règles CSS, (3) lier les deux avec <link rel="stylesheet" href="style.css"> dans le <head> du fichier HTML.

★À retenir

En bref :
• HTML structure le contenu (balises ouvrantes/fermantes, attributs).
• Squelette minimal : <!DOCTYPE html>, <html>, <head> (métadonnées, titre), <body> (contenu visible).
• Balises essentielles : <h1>…<h6>, <p>, <ul>/<li>, <a href>, <img src alt>.
• CSS met en forme : règle = sélecteur + { propriété: valeur; }.
• Sélecteurs : balise, .classe, #id.
• Propriétés clés : color, background-color, font-size, border, margin, padding.
• Modèle boîte : contenu → padding → border → margin.
• HTML = structure ; CSS = apparence ; JavaScript = comportement.

→Continuer ce chapitre

✏️ Exercices 🧩 Problèmes ❓ QCM 🎯 Évaluation

↔Autres chapitres

← Le Web Réseaux sociaux →

Bloqué sur ce chapitre ?

Cours particuliers de sciences numériques et technologie (snt) à Marseille, en présentiel ou à distance — un prof qui s'adapte à ton rythme et reprend ce qui coince.

Réserver un 1^er cours → Voir les tarifs