Ressources · 2ⁿᵈᵉ · Sciences numériques et technologie (SNT)
Langages HTML et CSS
Structure d'une page, balises, liens hypertextes, feuilles de style : écrire et modifier une page web (SNT de 2nde)
À propos de cette page
Sujet et corrigé prêts à imprimer.
Devoir surveillé – Langages HTML et CSS
Durée : 60 min – Sans document – Sur 20 points · Sciences numériques et technologie (SNT) 2ⁿᵈᵉ
Les réponses doivent être rédigées et justifiées. Soigne l'orthographe et la présentation.
Exercice 1 – Vocabulaire (4 points)
(4 pts)- a)Expliquer en une phrase le rôle de HTML et celui de CSS.
- b)Dans
<a href="menu.html">Menu</a>, nommer la balise, l'attribut, la valeur de l'attribut et le texte cliquable. - c)Quelle balise, placée dans
head, donne le texte de l'onglet du navigateur ? - d)Donner un exemple de balise orpheline et expliquer pourquoi elle n'a pas de balise fermante.
Exercice 2 – Lire et modifier une page (4 points)
(4 pts)On considère le code : <h2>Horaires de la piscine</h2><ol><li>Lundi : 12 h – 13 h 30</li><li>Mercredi : 14 h – 18 h</li></ol><p>Tarif <strong>réduit</strong> pour les lycéens.</p>
- a)Combien d'éléments la liste contient-elle ? Sont-ils numérotés ou précédés de puces ?
- b)Quel mot est affiché en gras ? Pourquoi ?
- c)Quelle modification transforme cette liste en liste à puces ?
- d)Écrire le code qui fait du mot « Tarif » un lien vers la page
abonnement.htmldu même dossier.
Exercice 3 – Chemins relatifs (4 points)
(4 pts)Le site d'un festival est organisé ainsi : dossier festival contenant programme.html, un dossier groupes (avec rock.html et jazz.html) et un dossier img (avec affiche.png).
- a)Dans
programme.html, écrire le chemin versjazz.html. - b)Dans
rock.html, écrire le chemin versjazz.html. - c)Dans
jazz.html, écrire le chemin versprogramme.html. - d)Dans
rock.html, écrire la balise complète qui afficheaffiche.pngavec un texte alternatif.
Exercice 4 – Écrire du CSS (4 points)
(4 pts)- a)Écrire la règle qui met tous les titres
h1en couleur#FFD700et les centre. - b)Écrire la règle qui met en gras, sur fond jaune pâle
#FFFFE0, les éléments de classealerte. - c)Écrire la règle qui donne une taille de 13 pixels à l'élément d'identifiant
pied. - d)Écrire la couleur
rgb(0, 128, 255)en hexadécimal, en détaillant la conversion.
Exercice 5 – Cascade et erreurs (4 points)
(4 pts)La feuille de style contient li { color: tomato; } puis .fini { color: silver; text-decoration: line-through; } ; la page contient <ul><li class="fini">Réviser</li><li>Ranger</li></ul>.
- a)Quelle est la couleur de « Ranger » ? Justifier.
- b)Quelle est la couleur de « Réviser » ? Justifier.
- c)Un élève ajoute la règle
h2 { colour: blue; }; ses titres restent noirs. Expliquer l'erreur. - d)Pour un site de 15 pages, expliquer pourquoi on place ces règles dans un fichier CSS externe plutôt que dans chaque page.
Bon courage !
Ce document est la propriété intellectuelle de Ben, professeur particulier (benprofparticulier.fr), protégée par le Code de la propriété intellectuelle (art. L. 111-1 et L. 122-4). Il est mis à disposition pour un usage personnel de révision. Toute reproduction, diffusion, mise en ligne ou revente, totale ou partielle, sans autorisation écrite est interdite et constitue une contrefaçon (art. L. 335-2).
Voir le corrigé et le barème
Corrigé et barème – Langages HTML et CSS
Durée : 60 min – Sans document – Sur 20 points · Sciences numériques et technologie (SNT) 2ⁿᵈᵉ
Exercice 1 – Vocabulaire (4 points)
(4 pts)- a)HTML décrit le contenu et la structure de la page ; CSS décrit sa présentation (couleurs, polices, tailles). (1)
- b)Balise
a; attributhref; valeurmenu.html; texte cliquable « Menu ». (1) - c)La balise
<title>. (1) - d)
<img>(ou<br>) : elle n'encadre aucun texte, ses informations sont dans ses attributs. (1)
Erreur fréquente — Confondre title (texte de l'onglet, non affiché dans la page) et h1 (titre affiché).
Exercice 2 – Lire et modifier une page (4 points)
(4 pts)- a)Deux éléments
li; la baliseolles numérote (1., 2.). (1) - b)« réduit », car il est encadré par
strong(mot important, gras par défaut). (1) - c)Remplacer
<ol>et</ol>par<ul>et</ul>. (1) - d)
<a href="abonnement.html">Tarif</a>, à l'intérieur du paragraphe. (1)
À retenir — ol numérote, ul met des puces : les éléments li sont identiques dans les deux cas.
Exercice 3 – Chemins relatifs (4 points)
(4 pts)- a)
groupes/jazz.html(on descend dansgroupes). (1) - b)
jazz.html(même dossier). (1) - c)
../programme.html(on remonte degroupesversfestival). (1) - d)
<img src="../img/affiche.png" alt="Affiche du festival">(1)
Repère — Un chemin relatif part toujours du dossier de la page qui contient le lien, et ../ remonte d'un dossier.
Exercice 4 – Écrire du CSS (4 points)
(4 pts)- a)
h1 { color: #FFD700; text-align: center; }(1) - b)
.alerte { font-weight: bold; background-color: #FFFFE0; }(1) - c)
#pied { font-size: 13px; }(1) - d)0 → 00 ; 128 = 8 × 16 + 0 → 80 ; 255 = 15 × 16 + 15 → FF ; donc #0080FF. (1)
Le point clé — Le point vise une classe, le dièse un identifiant, et chaque déclaration s'écrit propriété: valeur; avec deux-points.
Exercice 5 – Cascade et erreurs (4 points)
(4 pts)- a)Tomato : seule la règle
lile vise. (1) - b)Silver (et barré) : les règles
liet.finile visent, la classe est plus spécifique que la balise. (1) - c)La propriété s'écrit
color;colourest inconnue, donc ignorée sans message d'erreur. (1) - d)Une seule modification change les 15 pages, le code est plus court et le fichier est gardé en cache par le navigateur. (1)
Attention — Une classe l'emporte sur un nom de balise quel que soit l'ordre des règles ; l'ordre ne départage que des sélecteurs de même spécificité.
Ce document est la propriété intellectuelle de Ben, professeur particulier (benprofparticulier.fr), protégée par le Code de la propriété intellectuelle (art. L. 111-1 et L. 122-4). Il est mis à disposition pour un usage personnel de révision. Toute reproduction, diffusion, mise en ligne ou revente, totale ou partielle, sans autorisation écrite est interdite et constitue une contrefaçon (art. L. 335-2).
Ce contrôle de sciences numériques et technologie (SNT) 2ⁿᵈᵉ en bref
Un devoir surveillé type contrôle en classe sur « Langages HTML et CSS » : 5 exercices, 60 minutes, noté sur 20. Le sujet et le corrigé sont téléchargeables en PDF, prêts à imprimer, pour travailler comme en classe.
- Exercice 1 — Vocabulaire (4 points)/ 4 pts
- Exercice 2 — Lire et modifier une page (4 points)/ 4 pts
- Exercice 3 — Chemins relatifs (4 points)/ 4 pts
- Exercice 4 — Écrire du CSS (4 points)/ 4 pts
- Exercice 5 — Cascade et erreurs (4 points)/ 4 pts
Notions évaluées
L'essentiel : HTML, CSS, balises et attributs, Structure d'une page HTML, Balises courantes et liens hypertextes, Feuilles de style CSS, Méthodes, Pièges et erreurs classiques.
Pour préparer ce contrôle
- Relire le cours.
- Refaire les exercices corrigés.
- Se tester avec le QCM (24 questions).
- Faire ce sujet en conditions réelles — 60 min, sans le cours — puis se corriger et noter les points à revoir.
Voir tous les contrôles de sciences numériques et technologie (SNT) 2ⁿᵈᵉ · tous les devoirs surveillés corrigés
Questions fréquentes sur ce sujet
- Combien de temps dure ce contrôle sur « Langages HTML et CSS » ?
- 60 minutes pour 5 exercices notés sur 20. Prévois le double si tu enchaînes avec la correction.
- Le corrigé est-il fourni ?
- Oui : le corrigé complet est fourni en PDF (bouton « Télécharger le corrigé »), avec le barème exercice par exercice.
- Ce sujet peut-il servir de DS, de contrôle ou d'interrogation ?
- Oui : c'est un devoir surveillé complet de 60 minutes. Pour une interrogation courte, garde un ou deux exercices ; pour un DS ou un contrôle de fin de chapitre, fais le sujet entier en temps limité.
- Ce sujet suit-il le programme de sciences numériques et technologie (SNT) de seconde ?
- Oui : il évalue uniquement les notions du chapitre « Langages HTML et CSS » du programme officiel de sciences numériques et technologie (SNT) en seconde, soit L'essentiel : HTML, CSS, balises et attributs, Structure d'une page HTML, Balises courantes et liens hypertextes, Feuilles de style CSS.
Moi c'est Ben, j'ai créé ce site pour aider le plus d'élèves possible, partout en France. Je peux aussi reprendre avec toi ce qui coince en cours particulier : en visio, ou à domicile si tu es à Marseille.
Soutien scolaire à Marseille · Cours particuliers au lycée · Aide aux devoirs