Quiz et Exercices — HTML & CSS

Partie 1 : Introduction au HTML et CSS

Quiz 1.1 — 10 questions

Question 1 : Que signifie HTML ?

A. HyperText Markdown Language
B. HyperText Markup Language
C. HighTech Modern Language
D. HyperTransfer Markup Language

✅ Solution

Réponse : B — HTML = HyperText Markup Language

Question 2 : Que signifie CSS ?

A. Cascading Style Sheets
B. Creative Styling System
C. Computer Style Sheets
D. Cascading System Styles

✅ Solution

Réponse : A — CSS = Cascading Style Sheets

Question 3 : Quel est le rôle du HTML ?

A. Définir l'apparence visuelle de la page
B. Définir la structure et le contenu de la page
C. Gérer les interactions utilisateur
D. Styliser les éléments

✅ Solution

Réponse : B — HTML définit la structure et le contenu

Question 4 : Quel est le rôle du CSS ?

A. Définir la structure de la page
B. Définir le contenu de la page
C. Définir l'apparence visuelle de la page
D. Gérer les données de la page

✅ Solution

Réponse : C — CSS définit l'apparence visuelle

Question 5 : Quelle est la bonne analogie pour HTML ?

A. La peinture d'une maison
B. Les fondations et l'ossature d'une maison
C. La décoration intérieure d'une maison
D. Les meubles d'une maison

✅ Solution

Réponse : B — HTML = fondations/ossature d'une maison

Question 6 : Quelle est la bonne analogie pour CSS ?

A. Les fondations d'une maison
B. Le squelette d'un corps humain
C. Les vêtements et l'apparence d'un corps humain
D. Le cerveau d'un corps humain

✅ Solution

Réponse : C — CSS = vêtements/apparence d'un corps

Question 7 : Comment le navigateur interprète-t-il votre code ?

A. Il exécute le code comme un programme
B. Il lit le HTML et CSS pour afficher le résultat visuel
C. Il compile le code en binaire
D. Il ignore le CSS et n'affiche que le HTML

✅ Solution

Réponse : B — Le navigateur lit et affiche le code

Question 8 : Quelle est l'extension d'un fichier HTML ?

A. .css
B. .js
C. .html
D. .txt

✅ Solution

Réponse : C — .html est l'extension des fichiers HTML

Question 9 : Quelle est l'extension d'un fichier CSS ?

A. .html
B. .css
C. .js
D. .sty

✅ Solution

Réponse : B — .css est l'extension des fichiers CSS

Question 10 : Quel est l'outil recommandé pour écrire du code HTML et CSS ?

A. Microsoft Word
B. Visual Studio Code
C. Adobe Photoshop
D. Google Docs

✅ Solution

Réponse : B — Visual Studio Code est l'éditeur recommandé

Partie 2 : Créer des éléments de texte en HTML

Quiz 2.1 — 10 questions QCM

Question 1 : Quelle balise utilisez-vous pour le titre le plus important ?

A. <h6>
B. <title>
C. <h1>
D. <header>

✅ Solution

Réponse : C — <h1> est le titre le plus important

Question 2 : Quelle balise crée un paragraphe ?

A. <text>
B. <paragraph>
C. <p>
D. <txt>

✅ Solution

Réponse : C — <p> crée un paragraphe

Question 3 : Quelle balise met du texte en gras avec une signification sémantique ?

A. <b>
B. <strong>
C. <bold>
D. <em>

✅ Solution

Réponse : B — <strong> = importance sémantique (gras)

Question 4 : Quelle balise met du texte en italique avec une signification sémantique ?

A. <i>
B. <italic>
C. <em>
D. <emph>

✅ Solution

Réponse : C — <em> = emphase sémantique (italique)

Question 5 : Quelle balise crée un lien hypertexte ?

A. <link>
B. <a>
C. <href>
D. <url>

✅ Solution

Réponse : B — <a> crée un lien hypertexte

Question 6 : Quel attribut définit la destination d'un lien ?

A. src
B. dest
C. href
D. link

✅ Solution

Réponse : C — href définit la destination du lien

Question 7 : Quelle balise est utilisée pour une liste non ordonnée ?

A. <ol>
B. <ul>
C. <li>
D. <list>

✅ Solution

Réponse : B — <ul> = Unordered List (non ordonnée)

Question 8 : Quelle balise est utilisée pour une liste ordonnée ?

A. <ul>
B. <ol>
C. <li>
D. <list>

✅ Solution

Réponse : B — <ol> = Ordered List (ordonnée)

Question 9 : Quel attribut est obligatoire sur une image ?

A. src uniquement
B. alt uniquement
C. src et alt
D. width et height

✅ Solution

Réponse : C — src et alt sont tous deux obligatoires

Question 10 : Quel attribut permet d'ouvrir un lien dans un nouvel onglet ?

A. target="_new"
B. target="_blank"
C. target="_self"
D. target="_top"

✅ Solution

Réponse : B — target="_blank" ouvre dans un nouvel onglet

Quiz 2.2 — 5 questions pratiques

Question 11 : Écrivez le code HTML pour créer un titre de niveau 2 et un paragraphe.

✅ Solution

<h2>Titre de niveau 2</h2>
<p>Ceci est un paragraphe de texte.</p>

Question 12 : Écrivez le code HTML pour créer une liste non ordonnée de 3 fruits.

✅ Solution

<ul>
    <li>Pomme</li>
    <li>Banane</li>
    <li>Orange</li>
</ul>

Question 13 : Écrivez le code HTML pour créer un lien vers "https://openclassrooms.com" qui s'ouvre dans un nouvel onglet.

✅ Solution

<a href="https://openclassrooms.com" target="_blank">OpenClassrooms</a>

Question 14 : Écrivez le code HTML pour insérer une image nommée "photo.jpg" avec un texte alternatif "Photo de paysage".

✅ Solution

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

Question 15 : Écrivez le code HTML pour créer une liste ordonnée de 3 étapes.

✅ Solution

<ol>
    <li>Étape 1</li>
    <li>Étape 2</li>
    <li>Étape 3</li>
</ol>

Partie 3 : Structure d'une page entière

Quiz 3.1 — 10 questions QCM

Question 1 : Quelle balise représente l'en-tête d'une page ?

A. <head>
B. <header>
C. <heading>
D. <top>

✅ Solution

Réponse : B — <header> représente l'en-tête d'une page

Question 2 : Quelle balise représente le contenu principal d'une page ?

A. <content>
B. <main>
C. <principal>
D. <body>

✅ Solution

Réponse : B — <main> contient le contenu principal

Question 3 : Quelle balise représente un pied de page ?

A. <footer>
B. <bottom>
C. <foot>
D. <end>

✅ Solution

Réponse : A — <footer> représente le pied de page

Question 4 : Quelle balise est utilisée pour la navigation ?

A. <navigation>
B. <nav>
C. <menu>
D. <navigate>

✅ Solution

Réponse : B — <nav> est utilisé pour la navigation

Question 5 : Quelle balise est un élément en bloc ?

A. <span>
B. <a>
C. <div>
D. <strong>

✅ Solution

Réponse : C — <div> est un élément en bloc

Question 6 : Quelle balise est un élément en ligne ?

A. <div>
B. <p>
C. <span>
D. <section>

✅ Solution

Réponse : C — <span> est un élément en ligne

Question 7 : Quelle est la différence principale entre un élément bloc et un élément en ligne ?

A. Un bloc prend toute la largeur, un en ligne prend seulement son contenu
B. Un bloc est en gras, un en ligne est en italique
C. Un bloc est visible, un en ligne est invisible
D. Il n'y a pas de différence

✅ Solution

Réponse : A — Un bloc prend toute la largeur, un en ligne prend seulement son contenu

Question 8 : Que signifie l'attribut class ?

A. Identifie un élément unique
B. Identifie un groupe d'éléments
C. Définit le style en ligne
D. Crée un lien

✅ Solution

Réponse : B — class identifie un groupe d'éléments

Question 9 : Que signifie l'attribut id ?

A. Identifie un groupe d'éléments
B. Identifie un élément unique
C. Définit le style en ligne
D. Crée un lien

✅ Solution

Réponse : B — id identifie un élément unique

Question 10 : Quelle balise crée un saut de ligne ?

A. <hr>
B. <break>
C. <br>
D. <nl>

✅ Solution

Réponse : C — <br> crée un saut de ligne

Quiz 3.2 — 5 questions pratiques

Question 11 : Écrivez la structure de base d'une page HTML avec un en-tête, un contenu principal et un pied de page.

✅ Solution

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
</head>
<body>
    <header>
        <h1>Mon Site</h1>
    </header>

    <main>
        <p>Contenu principal</p>
    </main>

    <footer>
        <p>&copy; 2026</p>
    </footer>
</body>
</html>

Question 12 : Écrivez le code HTML pour créer une section avec un titre et un paragraphe.

✅ Solution

<section>
    <h2>Ma section</h2>
    <p>Ceci est un paragraphe dans une section.</p>
</section>

Question 13 : Écrivez le code HTML pour créer un conteneur avec la classe "carte" et un ID "carte-1".

✅ Solution

<div class="carte" id="carte-1">
    <p>Contenu de la carte</p>
</div>

Question 14 : Écrivez le code HTML pour créer une barre de navigation avec 3 liens.

✅ Solution

<nav>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Question 15 : Écrivez le code HTML pour ajouter une ligne de séparation horizontale.

✅ Solution

<hr>

Partie 4 : Styliser avec CSS

Quiz 4.1 — 15 questions QCM

Question 1 : Quelle est la syntaxe correcte d'une règle CSS ?

A. propriété: valeur { sélecteur }
B. sélecteur { propriété: valeur }
C. sélecteur { propriété = valeur }
D. { sélecteur } propriété: valeur

✅ Solution

Réponse : B — sélecteur { propriété: valeur } est la syntaxe correcte

Question 2 : Comment cible-t-on tous les paragraphes en CSS ?

A. #p
B. .p
C. p
D. *p

✅ Solution

Réponse : C — p cible tous les paragraphes

Question 3 : Comment cible-t-on un élément avec la classe "intro" ?

A. #intro
B. .intro
C. intro
D. *intro

✅ Solution

Réponse : B — .intro cible la classe "intro"

Question 4 : Comment cible-t-on un élément avec l'ID "titre" ?

A. .titre
B. #titre
C. titre
D. *titre

✅ Solution

Réponse : B — #titre cible l'ID "titre"

Question 5 : Quelle propriété CSS définit la couleur du texte ?

A. background-color
B. text-color
C. color
D. font-color

✅ Solution

Réponse : C — color définit la couleur du texte

Question 6 : Quelle propriété CSS définit la couleur de fond ?

A. background-color
B. color
C. bg-color
D. background

✅ Solution

Réponse : A — background-color définit la couleur de fond

Question 7 : Quelle est la meilleure pratique pour écrire du CSS ?

A. En ligne (attribut style)
B. Dans une feuille de style externe
C. Dans le <head> avec <style>
D. Dans le <body> avec <style>

✅ Solution

Réponse : B — La feuille externe est la meilleure pratique

Question 8 : Quelle unité est recommandée pour les tailles de police ?

A. px
B. pt
C. rem
D. em

✅ Solution

Réponse : C — rem est recommandé pour les polices

Question 9 : Quelle propriété CSS définit la police d'écriture ?

A. font-style
B. font-family
C. font-size
D. font-weight

✅ Solution

Réponse : B — font-family définit la police

Question 10 : Quelle propriété CSS définit la taille de la police ?

A. font-weight
B. font-style
C. font-size
D. font-family

✅ Solution

Réponse : C — font-size définit la taille de la police

Question 11 : Quelle propriété CSS définit l'espacement entre les lettres ?

A. word-spacing
B. letter-spacing
C. text-spacing
D. font-spacing

✅ Solution

Réponse : B — letter-spacing définit l'espacement entre les lettres

Question 12 : Quelle propriété CSS définit la hauteur de ligne (interlignage) ?

A. line-height
B. text-height
C. font-height
D. height

✅ Solution

Réponse : A — line-height définit la hauteur de ligne

Question 13 : Comment cible-t-on un lien au survol de la souris ?

A. a:active
B. a:visited
C. a:hover
D. a:focus

✅ Solution

Réponse : C — a:hover cible les liens au survol

Question 14 : Quelle propriété CSS crée une ombre portée sur le texte ?

A. box-shadow
B. text-shadow
C. shadow
D. font-shadow

✅ Solution

Réponse : B — text-shadow crée une ombre sur le texte

Question 15 : Quelle propriété CSS définit l'alignement du texte ?

A. text-align
B. text-justify
C. align-text
D. text-position

✅ Solution

Réponse : A — text-align définit l'alignement du texte

Quiz 4.2 — 5 questions pratiques

Question 16 : Écrivez le CSS pour rendre tous les paragraphes en bleu et en taille 18px.

✅ Solution

p {
    color: blue;
    font-size: 18px;
}

Question 17 : Écrivez le CSS pour styliser un élément avec la classe "titre" en rouge et en gras.

✅ Solution

.titre {
    color: red;
    font-weight: bold;
}

Question 18 : Écrivez le CSS pour centrer le texte d'un élément avec l'ID "accueil".

✅ Solution

#accueil {
    text-align: center;
}

Question 19 : Écrivez le CSS pour appliquer une police "Arial" à toute la page.

✅ Solution

body {
    font-family: Arial, sans-serif;
}

Question 20 : Écrivez le CSS pour ajouter un fond gris clair à un élément avec la classe "carte".

✅ Solution

.carte {
    background-color: #f0f0f0;
}

Quiz 4.3 — 5 questions avancées

Question 21 : Quelle est la valeur hexadécimale pour le blanc ?

A. #000000
B. #FFFFFF
C. #FF0000
D. #00FF00

✅ Solution

Réponse : B — #FFFFFF = blanc (le plus clair)

Question 22 : Quelle est la valeur hexadécimale pour le noir ?

A. #FFFFFF
B. #000000
C. #FF0000
D. #00FF00

✅ Solution

Réponse : B — #000000 = noir (le plus sombre)

Question 23 : Quelle propriété CSS transforme le texte en majuscules ?

A. text-transform: uppercase
B. text-transform: capitalize
C. text-transform: lowercase
D. text-transform: bold

✅ Solution

Réponse : A — text-transform: uppercase met en majuscules

Question 24 : Comment cible-t-on la première lettre d'un paragraphe ?

A. p::first-line
B. p::first-letter
C. p:first-letter
D. p:first-line

✅ Solution

Réponse : B — ::first-letter cible la première lettre

Question 25 : Quelle propriété CSS définit le soulignement d'un texte ?

A. text-decoration: underline
B. text-style: underline
C. font-decoration: underline
D. text-underline: true

✅ Solution

Réponse : A — text-decoration: underline souligne le texte

Quiz Final — 30 questions

Question 1 : Que signifie HTML ?

A. HyperText Markdown Language
B. HyperText Markup Language
C. HighTech Modern Language
D. HyperTransfer Markup Language

✅ Solution

Réponse : B — HTML = HyperText Markup Language

Question 2 : Que signifie CSS ?

A. Cascading Style Sheets
B. Creative Styling System
C. Computer Style Sheets
D. Cascading System Styles

✅ Solution

Réponse : A — CSS = Cascading Style Sheets

Question 3 : Quelle balise est utilisée pour le titre le plus important ?

A. <h6>
B. <title>
C. <h1>
D. <header>

✅ Solution

Réponse : C — <h1> est le titre le plus important

Question 4 : Quelle balise crée un paragraphe ?

A. <text>
B. <paragraph>
C. <p>
D. <txt>

✅ Solution

Réponse : C — <p> crée un paragraphe

Question 5 : Quelle balise crée un lien hypertexte ?

A. <link>
B. <a>
C. <href>
D. <url>

✅ Solution

Réponse : B — <a> crée un lien hypertexte

Question 6 : Quel attribut définit la destination d'un lien ?

A. src
B. dest
C. href
D. link

✅ Solution

Réponse : C — href définit la destination du lien

Question 7 : Quelle balise est utilisée pour une liste non ordonnée ?

A. <ol>
B. <ul>
C. <li>
D. <list>

✅ Solution

Réponse : B — <ul> = Unordered List (non ordonnée)

Question 8 : Quel attribut est obligatoire sur une image ?

A. src uniquement
B. alt uniquement
C. src et alt
D. width et height

✅ Solution

Réponse : C — src et alt sont tous deux obligatoires

Question 9 : Quelle balise représente l'en-tête d'une page ?

A. <head>
B. <header>
C. <heading>
D. <top>

✅ Solution

Réponse : B — <header> représente l'en-tête d'une page

Question 10 : Quelle balise représente le contenu principal d'une page ?

A. <content>
B. <main>
C. <principal>
D. <body>

✅ Solution

Réponse : B — <main> contient le contenu principal

Question 11 : Quelle balise est un élément en bloc ?

A. <span>
B. <a>
C. <div>
D. <strong>

✅ Solution

Réponse : C — <div> est un élément en bloc

Question 12 : Quelle balise est un élément en ligne ?

A. <div>
B. <p>
C. <span>
D. <section>

✅ Solution

Réponse : C — <span> est un élément en ligne

Question 13 : Que signifie l'attribut class ?

A. Identifie un élément unique
B. Identifie un groupe d'éléments
C. Définit le style en ligne
D. Crée un lien

✅ Solution

Réponse : B — class identifie un groupe d'éléments

Question 14 : Que signifie l'attribut id ?

A. Identifie un groupe d'éléments
B. Identifie un élément unique
C. Définit le style en ligne
D. Crée un lien

✅ Solution

Réponse : B — id identifie un élément unique

Question 15 : Quelle est la syntaxe correcte d'une règle CSS ?

A. propriété: valeur { sélecteur }
B. sélecteur { propriété: valeur }
C. sélecteur { propriété = valeur }
D. { sélecteur } propriété: valeur

✅ Solution

Réponse : B — sélecteur { propriété: valeur } est la syntaxe correcte

Question 16 : Comment cible-t-on tous les paragraphes en CSS ?

A. #p
B. .p
C. p
D. *p

✅ Solution

Réponse : C — p cible tous les paragraphes

Question 17 : Comment cible-t-on un élément avec la classe "intro" ?

A. #intro
B. .intro
C. intro
D. *intro

✅ Solution

Réponse : B — .intro cible la classe "intro"

Question 18 : Comment cible-t-on un élément avec l'ID "titre" ?

A. .titre
B. #titre
C. titre
D. *titre

✅ Solution

Réponse : B — #titre cible l'ID "titre"

Question 19 : Quelle propriété CSS définit la couleur du texte ?

A. background-color
B. text-color
C. color
D. font-color

✅ Solution

Réponse : C — color définit la couleur du texte

Question 20 : Quelle propriété CSS définit la couleur de fond ?

A. background-color
B. color
C. bg-color
D. background

✅ Solution

Réponse : A — background-color définit la couleur de fond

Question 21 : Quelle propriété CSS définit la police d'écriture ?

A. font-style
B. font-family
C. font-size
D. font-weight

✅ Solution

Réponse : B — font-family définit la police

Question 22 : Quelle unité est recommandée pour les tailles de police ?

A. px
B. pt
C. rem
D. em

✅ Solution

Réponse : C — rem est recommandé pour les polices

Question 23 : Quelle propriété CSS définit la taille de la police ?

A. font-weight
B. font-style
C. font-size
D. font-family

✅ Solution

Réponse : C — font-size définit la taille de la police

Question 24 : Comment cible-t-on un lien au survol de la souris ?

A. a:active
B. a:visited
C. a:hover
D. a:focus

✅ Solution

Réponse : C — a:hover cible les liens au survol

Question 25 : Quelle est la meilleure pratique pour écrire du CSS ?

A. En ligne (attribut style)
B. Dans une feuille de style externe
C. Dans le <head> avec <style>
D. Dans le <body> avec <style>

✅ Solution

Réponse : B — La feuille externe est la meilleure pratique

Question 26 : Quelle propriété CSS définit l'alignement du texte ?

A. text-align
B. text-justify
C. align-text
D. text-position

✅ Solution

Réponse : A — text-align définit l'alignement du texte

Question 27 : Quelle balise crée un saut de ligne ?

A. <hr>
B. <break>
C. <br>
D. <nl>

✅ Solution

Réponse : C — <br> crée un saut de ligne

Question 28 : Quelle propriété CSS définit l'espacement entre les lettres ?

A. word-spacing
B. letter-spacing
C. text-spacing
D. font-spacing

✅ Solution

Réponse : B — letter-spacing définit l'espacement entre les lettres

Question 29 : Quelle propriété CSS définit la hauteur de ligne ?

A. line-height
B. text-height
C. font-height
D. height

✅ Solution

Réponse : A — line-height définit la hauteur de ligne

Question 30 : Quelle est la valeur hexadécimale pour le blanc ?

A. #000000
B. #FFFFFF
C. #FF0000
D. #00FF00

✅ Solution

Réponse : B — #FFFFFF = blanc (le plus clair)

Modifié le: samedi 8 août 2026, 16:45