← 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
Cette évaluation sur « Langages HTML et CSS » en seconde permet de faire le point sur ses connaissances en sciences numériques et technologie (snt), comme lors d'un véritable contrôle. Elle suit le programme officiel de seconde et propose plusieurs exercices notés sur 20, avec un corrigé détaillé. Au programme : Qu'est-ce que le HTML ?, Structure d'une page HTML, Les principales balises HTML, Les hyperliens et les images. Travaille seul, chronomètre-toi, puis compare tes réponses au corrigé pour identifier les points à revoir. Parfait pour mesurer ses progrès et réviser efficacement. Évaluation gratuite conçue par un professeur particulier à Marseille pour aider les élèves de seconde en sciences numériques et technologie (snt).
Évaluation finale · Niveau difficile · Durée 50 min · Noté sur 20
50:00

Évaluation complète de fin de chapitre, tout en niveau difficile. Travaille seul et sans aide, puis vérifie tes réponses avec le corrigé détaillé dépliable en bas de page.

Exercice 1 — Structure d'une page HTML

/ 4 pts
  1. Donne la signification des acronymes HTML et CSS. (1 pt)
  2. Cite les quatre balises principales du squelette d'une page HTML5 et précise le rôle de chacune. (2 pts)
  3. Que doit-on écrire en tout premier dans un fichier HTML5 et pourquoi ? (1 pt)

Exercice 2 — Balises et attributs HTML

/ 5 pts
  1. Écris le code HTML d'un hyperlien affichant « Météo » et pointant vers https://www.meteo.fr, qui s'ouvre dans un nouvel onglet. (2 pts)
  2. Écris le code HTML pour insérer l'image soleil.jpg (dans le même dossier) avec le texte alternatif « Soleil d'été » et une largeur de 300 px. (2 pts)
  3. Quelle est la différence entre une liste <ul> et une liste <ol> ? (1 pt)

Exercice 3 — Règles CSS et sélecteurs

/ 5 pts
  1. Écris une règle CSS qui cible tous les éléments <h2> pour les afficher en violet (#800080) et en taille 22 px. (2 pts)
  2. Explique la différence entre un sélecteur de classe (.) et un sélecteur d'identifiant (#). (2 pts)
  3. Quelle propriété CSS utilise-t-on pour changer la police d'un élément ? Donne un exemple de valeur. (1 pt)

Exercice 4 — Modèle boîte et calculs

/ 4 pts
  1. Nomme les quatre couches du modèle boîte CSS, de l'intérieur vers l'extérieur. (2 pts)
  2. Un élément .encart a : width: 250px; padding: 10px; border: 5px solid; margin: 20px;. Calcule sa largeur totale en tenant compte du padding et de la bordure (sans les marges). Montre ton calcul. (2 pts)

Exercice 5 — HTML et CSS : séparation des rôles

/ 2 pts
  1. Explique en quelques lignes pourquoi on sépare le HTML et le CSS dans deux fichiers distincts plutôt que d'utiliser du CSS inline. Donne un avantage concret. (2 pts)
✓Corrigé détaillé

Exercice 1 — Structure d'une page HTML
Corrigé :
• HTML = HyperText Markup Language ; CSS = Cascading Style Sheets. (1 pt)
• <html> : racine du document | <head> : métadonnées (titre, encodage, liens CSS) | <body> : contenu visible | <title> : titre de l'onglet. (2 pts)
• On écrit <!DOCTYPE html> en première ligne pour indiquer au navigateur que le document utilise la version HTML5. (1 pt)

Exercice 2 — Balises et attributs HTML
Corrigé :
• <a href="https://www.meteo.fr" target="_blank">Météo</a> — 1 pt pour href correct, 1 pt pour target="_blank". (2 pts)
• <img src="soleil.jpg" alt="Soleil d'été" width="300"> — 1 pt pour src+alt corrects, 1 pt pour width. (2 pts)
• <ul> : liste non ordonnée (à puces) ; <ol> : liste ordonnée (numérotée). (1 pt)

Exercice 3 — Règles CSS et sélecteurs
Corrigé :
• h2 { color: #800080; font-size: 22px; } (2 pts)
• Un sélecteur de classe (.nom) peut s'appliquer à plusieurs éléments de la page ayant le même attribut class. Un sélecteur d'identifiant (#nom) est unique : il ne doit cibler qu'un seul élément dans la page. (2 pts)
• Propriété : font-family, ex. font-family: Arial, sans-serif;. (1 pt)

Exercice 4 — Modèle boîte et calculs
Corrigé :
• Les quatre couches : contenu (content) → padding → border → margin. (2 pts)
• Calcul : largeur = 250 + 2×10 + 2×5 = 250 + 20 + 10 = 280 px. (2 pts — 1 pt pour la méthode, 1 pt pour le résultat correct)

Exercice 5 — HTML et CSS : séparation des rôles
Corrigé :
Séparer HTML et CSS permet de modifier l'apparence de toutes les pages du site en ne changeant qu'un seul fichier CSS, sans toucher au contenu HTML. Cela facilite la maintenance, la lisibilité du code et la cohérence visuelle. Exemple concret : pour changer la couleur de tous les titres du site, il suffit de modifier une seule règle CSS au lieu de modifier chaque balise HTML individuellement. (2 pts — 1 pt pour l'idée de maintenance, 1 pt pour l'exemple ou la justification)

→Continuer ce chapitre
📖 Cours ✏️ Exercices 🧩 Problèmes ❓ QCM
↔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 1er cours → Voir les tarifs