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
Choisis ton niveau. Questions et réponses mélangées à chaque partie. Bonne chance !
Les 24 questions du QCM en version texte
Pour réviser sans écran ou imprimer : chaque question avec ses propositions ; la bonne réponse et son explication se déplient.
Niveau facile — 8 questions
Que signifie le sigle HTML ?
- A. HyperText Transfer Protocol
- B. HyperText Markup Language
- C. High Tech Modern Language
- D. Home Tool Markup Language
Réponse
B. HyperText Markup Language — HTML est un langage de balisage (markup) de l'hypertexte. HyperText Transfer Protocol désigne HTTP, le protocole d'échange entre navigateur et serveur.
Quel langage fixe la couleur et la police d'une page web ?
- A. HTML
- B. Python
- C. HTTP
- D. CSS
Réponse
D. CSS — CSS décrit la présentation (couleurs, polices, tailles) ; HTML décrit le contenu et la structure.
Quelle balise crée un lien hypertexte ?
- A. <a>
- B. <link>
- C. <href>
- D. <url>
Réponse
A. <a> — La balise a, avec l'attribut href, crée un lien cliquable. La balise link sert à relier une feuille de style, dans le head.
Où se trouve le contenu affiché par le navigateur ?
- A. Dans <head>
- B. Dans <title>
- C. Dans <body>
- D. Dans <meta>
Réponse
C. Dans <body> — Le corps body contient tout ce qui s'affiche ; le head contient des informations non affichées dans la page.
Dans <img src="phare.jpg" alt="Phare breton">, que contient l'attribut alt ?
- A. L'adresse du fichier image
- B. La largeur de l'image en pixels
- C. Un texte décrivant l'image
- D. La légende affichée sous l'image
Réponse
C. Un texte décrivant l'image — alt est le texte de remplacement, lu par les lecteurs d'écran et affiché si l'image ne se charge pas ; le fichier est donné par src.
Quelle balise affiche un titre de premier niveau dans la page ?
- A. <h1>
- B. <p>
- C. <title>
- D. <head>
Réponse
A. <h1> — h1 est le titre principal affiché. title donne seulement le texte de l'onglet.
Dans la règle CSS p { color: teal; }, comment s'appelle p ?
- A. La propriété
- B. La valeur
- C. La déclaration
- D. Le sélecteur
Réponse
D. Le sélecteur — p est le sélecteur (il désigne les éléments visés), color la propriété, teal la valeur ; color: teal; forme une déclaration.
Laquelle de ces balises est orpheline (sans balise fermante) ?
- A. <p>
- B. <br>
- C. <ul>
- D. <em>
Réponse
B. <br> — br (retour à la ligne) n'encadre aucun contenu : elle n'a pas de balise fermante. p, ul et em se ferment.
Niveau moyen — 8 questions
Quel code marque le mot « Soldes » comme important (affiché en gras) ?
- A. <em>Soldes</em>
- B. <bold>Soldes</bold>
- C. <strong>Soldes</strong>
- D. <big>Soldes</big>
Réponse
C. <strong>Soldes</strong> — strong marque un mot important, affiché en gras par défaut. em met en italique ; bold n'est pas une balise HTML.
La page tarifs.html est dans le même dossier que la page en cours. Quel lien est correct ?
- A. <a href="tarifs.html">Tarifs</a>
- B. <a src="tarifs.html">Tarifs</a>
- C. <link href="tarifs.html">Tarifs</link>
- D. <a alt="tarifs.html">Tarifs</a>
Réponse
A. <a href="tarifs.html">Tarifs</a> — Un lien utilise la balise a et l'attribut href ; dans le même dossier, le nom du fichier suffit.
Quelle couleur correspond au code #00FF00 ?
- A. Rouge
- B. Bleu
- C. Noir
- D. Vert
Réponse
D. Vert — Rouge 00, vert FF (255, le maximum), bleu 00 : seule la composante verte est présente.
Quel sélecteur vise tous les éléments qui ont l'attribut class="note" ?
- A. #note
- B. .note
- C. note
- D. <note>
Réponse
B. .note — Le point vise une classe ; le dièse vise un identifiant ; note seul viserait une balise note, qui n'existe pas.
Quelle règle écrit les titres h2 en 24 pixels ?
- A. h2 { font-size: 24px; }
- B. h2 { font: 24px size; }
- C. h2 { size: 24px; }
- D. h2 = { font-size: 24px }
Réponse
A. h2 { font-size: 24px; } — La taille se règle avec la propriété font-size ; la syntaxe est sélecteur { propriété: valeur; }.
Depuis la page musique/concert.html, quel chemin mène à plan.html placé dans le dossier parent ?
- A. plan.html
- B. /musique/plan.html
- C. ../plan.html
- D. musique/plan.html
Réponse
C. ../plan.html — La page est dans musique ; ../ remonte d'un dossier, où se trouve plan.html.
Que vaut en décimal la composante FF d'une couleur hexadécimale ?
- A. 16
- B. 255
- C. 256
- D. 100
Réponse
B. 255 — F vaut 15, donc FF = 15 × 16 + 15 = 255, la valeur maximale d'une composante.
Où faut-il écrire <link rel="stylesheet" href="theme.css"> ?
- A. Dans <body>, en fin de page
- B. Dans le fichier theme.css
- C. Dans une balise <p>
- D. Dans <head>
Réponse
D. Dans <head> — Le lien vers la feuille de style est une information pour le navigateur : il se place dans l'en-tête head.
Niveau difficile — 8 questions
Avec h3 { color: olive; } et .rubrique { color: maroon; }, quelle est la couleur de <h3 class="rubrique"> ?
- A. Olive : la règle h3 vise la balise
- B. Un mélange des deux couleurs
- C. Olive : h3 est écrit en premier
- D. Maroon : la classe l'emporte
Réponse
D. Maroon : la classe l'emporte — Une classe est plus spécifique qu'un nom de balise : maroon s'applique, quel que soit l'ordre des règles.
La feuille contient p { color: gray; } puis, plus bas, p { color: black; }. Couleur des paragraphes ?
- A. Gris : la première règle lue
- B. Noir : la dernière règle
- C. Gris foncé : un mélange
- D. Rien : le navigateur bloque
Réponse
B. Noir : la dernière règle — Les deux sélecteurs ont la même spécificité : c'est la règle écrite en dernier qui l'emporte.
Un élève écrit <p>Texte <em>important</p></em>. Quel est le problème ?
- A. La balise em n'existe pas
- B. Il manque un attribut à p
- C. Les balises sont mal imbriquées
- D. Un paragraphe ne peut contenir em
Réponse
C. Les balises sont mal imbriquées — em est ouverte dans p : elle doit être fermée avant p. Il faut écrire </em></p>.
À quoi sert principalement l'attribut alt d'une image ?
- A. Lecteurs d'écran, image non chargée
- B. Fixer la taille de l'image affichée
- C. Transformer l'image en lien cliquable
- D. Accélérer le chargement de l'image
Réponse
A. Lecteurs d'écran, image non chargée — alt fournit un texte de remplacement : accessibilité pour les personnes malvoyantes et affichage si l'image manque.
Quelle affirmation est vraie ?
- A. HTML est un langage de programmation
- B. Un même id ne sert qu'une fois par page
- C. Une classe s'applique à un seul élément
- D. CSS définit la structure du document
Réponse
B. Un même id ne sert qu'une fois par page — Un identifiant est unique dans une page ; une classe peut être donnée à plusieurs éléments. HTML ne calcule rien et CSS gère la présentation.
La feuille contient body { color: sienna; } et aucune règle pour li. Couleur d'un élément <li> ?
- A. Noir, couleur par défaut du navigateur
- B. Aucune : le texte est invisible
- C. Bleu, couleur réservée aux listes
- D. Sienna, par héritage du body
Réponse
D. Sienna, par héritage du body — La propriété color s'hérite : li est un descendant de body et prend sa couleur faute de règle plus précise.
Dans la page a/b/c/page.html, le lien href="../../index.html" mène à :
- A. a/index.html
- B. a/b/index.html
- C. a/b/c/index.html
- D. index.html à la racine du disque
Réponse
A. a/index.html — La page est dans a/b/c ; un premier ../ remonte dans a/b, le second dans a.
Avec <p style="color: coral"> et p { color: plum; } dans le fichier CSS, quelle couleur s'affiche ?
- A. Plum : le fichier externe prime
- B. Un mélange de coral et de plum
- C. Coral : l'attribut style prime
- D. Aucune : les règles s'annulent
Réponse
C. Coral : l'attribut style prime — Un style écrit dans l'attribut style de l'élément est le plus spécifique : il l'emporte sur la règle de balise.
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