L
a conception d’interfaces web modernes repose sur une compréhension approfondie du HTML5 et du CSS.
Ces technologies ne se limitent plus à structurer et styliser des pages simples : elles permettent aujourd’hui de créer des expériences utilisateur riches, dynamiques et adaptées à tous les écrans.
Pour les étudiants, les autodidactes ou les candidats à des examens en développement web, la maîtrise de ces notions avancées est devenue incontournable.
Cette page propose un entraînement pédagogique axé sur les propriétés CSS et les balises HTML essentielles à la création de mises en page professionnelles.
Elle aborde notamment la gestion des tableaux, des formulaires, des médias, des espacements et des animations.
L’objectif est d’aider l’apprenant à comprendre comment chaque règle influence l’affichage final, tout en développant des réflexes solides pour écrire un code clair, structuré et efficace.
La conception d’interfaces web modernes repose sur une compréhension approfondie du HTML5 et du CSS.
Ces technologies ne se limitent plus à structurer et styliser des pages simples : elles permettent aujourd’hui de créer des expériences utilisateur riches, dynamiques et adaptées à tous les écrans.
Pour les étudiants, les autodidactes ou les candidats à des examens en développement web, la maîtrise de ces notions avancées est devenue incontournable.
Cette page propose un entraînement pédagogique axé sur les propriétés CSS et les balises HTML essentielles à la création de mises en page professionnelles.
Elle aborde notamment la gestion des tableaux, des formulaires, des médias, des espacements et des animations.
L’objectif est d’aider l’apprenant à comprendre comment chaque règle influence l’affichage final, tout en développant des réflexes solides pour écrire un code clair, structuré et efficace.
QCM
1
Corrigé
Quelle propriété CSS est utilisée pour fusionner les bordures d'un tableau ?
A. border-spacing
B. border-collapse
C. border-style
D. table-border: merge;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'border-collapse: collapse;' permet d'avoir des bordures simples et nettes entre les cellules.
QCM
2
Corrigé
Quelle unité CSS est basée sur 1% de la largeur de la fenêtre du navigateur ?
A. vh
B. rem
C. vw
D. %
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'vw' signifie 'viewport width'. 100vw équivaut à la largeur totale de l'écran.
QCM
3
Corrigé
Quelle balise HTML5 est utilisée pour intégrer un fichier audio ?
A. <sound>
B. <music>
C. <audio>
D. <mp3>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <audio> permet de lire des fichiers sonores directement dans le navigateur.
QCM
4
Corrigé
Comment s'appelle l'espace situé à l'extérieur de la bordure d'un élément ?
A. Padding
B. Margin
C. Outline
D. Spacing
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La marge (margin) crée de l'espace autour de l'élément, au-delà de sa bordure.
QCM
5
Corrigé
Quelle propriété permet d'animer le changement d'une valeur CSS sur une durée ?
A. animation-delay
B. transform
C. transition
D. speed
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'transition' définit comment une propriété change d'un état à un autre de façon fluide.
QCM
6
Corrigé
Quelle valeur de 'position' permet de fixer un élément par rapport à la fenêtre, même au scroll ?
A. relative
B. absolute
C. fixed
D. sticky
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Un élément 'fixed' reste immobile à l'écran quel que soit le défilement de la page.
QCM
7
Corrigé
Quel attribut HTML permet de lier un bouton à un identifiant de formulaire spécifique ?
A. action
B. form
C. target
D. method
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'form' permet de placer un bouton de validation n'importe où, même hors du bloc <form>.
QCM
8
Corrigé
Quelle propriété CSS est utilisée pour changer l'épaisseur d'une bordure ?
A. border-weight
B. border-width
C. border-size
D. thickness
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'border-width' définit la largeur (fine, moyenne, épaisse ou en pixels) de la bordure.
QCM
9
Corrigé
En CSS, que signifie 'list-style-type: none;' ?
A. Affiche les puces en carré
B. Supprime les puces d'une liste
C. Met la liste sur une seule ligne
D. Numérote automatiquement la liste
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cette propriété retire les symboles (points ou numéros) par défaut des éléments <li>.
QCM
10
Corrigé
Quel type d'input HTML5 permet de choisir une date via un calendrier ?
A. <input type='calendar'>
B. <input type='time'>
C. <input type='date'>
D. <input type='day'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'input 'date' affiche une interface de sélection de date native.
QCM
11
Corrigé
Quelle propriété CSS définit l'alignement vertical des éléments dans un conteneur Flexbox ?
A. justify-content
B. align-items
C. vertical-align
D. text-align
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'align-items' gère l'alignement sur l'axe secondaire (vertical par défaut en ligne).
QCM
12
Corrigé
Quelle balise est utilisée pour regrouper un ensemble de champs de formulaire ?
A. <group>
B. <fieldset>
C. <section>
D. <box>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<fieldset> permet de regrouper logiquement des éléments de formulaire, souvent avec une légende (<legend>).
QCM
13
Corrigé
Quelle propriété CSS permet de modifier l'espace entre les lettres ?
A. word-spacing
B. line-height
C. letter-spacing
D. text-indent
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'letter-spacing' ajuste l'espacement entre les caractères d'un mot.
QCM
14
Corrigé
Quelle est la fonction de la balise HTML <mark> ?
A. Mettre un texte en italique
B. Surligner du texte
C. Afficher une erreur
D. Créer un lien interne
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<mark> est utilisé pour mettre en évidence un texte (effet surligneur jaune par défaut).
QCM
15
Corrigé
Quel sélecteur CSS cible un élément seulement lorsqu'il a le focus (clic ou tabulation) ?
A. :active
B. :visited
C. :focus
D. :hover
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
':focus' est essentiel pour l'accessibilité au clavier.
QCM
16
Corrigé
Quelle propriété CSS permet d'incliner ou de faire pivoter un élément ?
A. rotate
B. skew
C. transform
D. turn
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La propriété 'transform' accepte des fonctions comme rotate(), scale() ou skew().
QCM
17
Corrigé
Comment appelle-t-on le sélecteur '*' en CSS ?
A. Sélecteur global
B. Sélecteur d'identifiant
C. Sélecteur universel
D. Sélecteur de classe
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le sélecteur universel '*' cible absolument tous les éléments HTML de la page.
QCM
18
Corrigé
En CSS, à quoi sert 'overflow: scroll;' ?
A. À agrandir l'élément à l'infini
B. À ajouter des barres de défilement si le contenu dépasse
C. À cacher le contenu qui dépasse
D. À empêcher le défilement de la page
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'overflow' gère le comportement du contenu qui excède les dimensions de son conteneur.
QCM
19
Corrigé
Quelle balise HTML5 est utilisée pour les légendes d'images ou de figures ?
A. <caption>
B. <label>
C. <figcaption>
D. <summary>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<figcaption> s'utilise à l'intérieur d'une balise <figure> pour décrire l'image.
QCM
20
Corrigé
Quelle propriété CSS contrôle la hauteur d'une ligne de texte ?
A. text-height
B. font-size
C. line-height
D. spacing-top
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'line-height' permet d'ajuster l'interligne pour améliorer la lisibilité.
Mots & Définitions
Consultez les définitions des termes importants.
Border-collapse est une propriété CSS utilisée avec les tableaux HTML. Elle permet de fusionner les bordures des cellules adjacentes pour obtenir un affichage plus propre. C’est un réglage courant pour améliorer la lisibilité des tableaux.
L’unité vw représente un pourcentage de la largeur de la fenêtre d’affichage. Elle permet de créer des mises en page adaptatives qui s’ajustent automatiquement à la taille de l’écran. Elle est très utilisée dans le design responsive.
La balise audio permet d’intégrer un fichier sonore directement dans une page web. Elle offre des contrôles de lecture sans recourir à des plugins externes. C’est une fonctionnalité native du HTML5.
La marge correspond à l’espace situé à l’extérieur de la bordure d’un élément. Elle sert à séparer visuellement les éléments entre eux. Une bonne gestion des marges améliore la clarté de la mise en page.
Une transition CSS permet d’animer progressivement le changement d’une propriété visuelle. Elle rend les interactions plus fluides et agréables pour l’utilisateur. Elle est souvent utilisée lors des survols ou des changements d’état.
La position fixed permet de fixer un élément par rapport à la fenêtre du navigateur. L’élément reste visible même lors du défilement de la page. Elle est souvent utilisée pour les menus ou barres d’information.
Flexbox est un modèle de mise en page CSS conçu pour organiser les éléments de manière flexible. Il facilite l’alignement, la distribution de l’espace et l’adaptation aux écrans. C’est un outil essentiel du développement front-end moderne.
Letter-spacing contrôle l’espace horizontal entre les lettres d’un texte. Cette propriété permet d’améliorer la lisibilité ou de créer un effet graphique particulier. Elle agit uniquement sur l’apparence visuelle.
Le sélecteur universel cible tous les éléments d’une page web. Il est souvent utilisé pour appliquer des styles globaux. Son usage doit rester modéré pour éviter des effets indésirables.
La propriété overflow définit la façon dont le contenu dépassant un conteneur est affiché. Elle permet d’ajouter des barres de défilement ou de masquer le débordement. C’est un outil important pour gérer les zones de contenu.
À propos de ce QCM
L
es QCM présentés couvrent des notions fondamentales et avancées du HTML5 et du CSS, indispensables pour concevoir des pages web lisibles et fonctionnelles.
La gestion des tableaux, par exemple, permet d’organiser efficacement des données grâce à des propriétés comme la fusion des bordures ou l’espacement des cellules.
Ces réglages améliorent à la fois l’esthétique et la compréhension de l’information affichée.
Les unités relatives et basées sur le viewport jouent un rôle clé dans le design responsive.
Elles permettent d’adapter automatiquement la taille des éléments à la fenêtre du navigateur, garantissant une expérience cohérente sur ordinateur, tablette ou mobile.
Cette approche est aujourd’hui incontournable dans le développement web professionnel.
Les QCM abordent également l’intégration de contenus multimédias, tels que l’audio, qui enrichissent les pages sans dépendre de solutions externes.
La gestion des marges, des bordures et des espacements internes permet de structurer visuellement les éléments et d’éviter les interfaces surchargées.
Les propriétés liées aux animations et aux transitions contribuent à rendre les interactions plus fluides et intuitives.
Elles améliorent l’ergonomie sans complexifier le code.
Par ailleurs, la maîtrise du positionnement, notamment avec des éléments fixés à l’écran, est essentielle pour créer des menus ou des éléments persistants.
Enfin, les notions liées à Flexbox, aux formulaires et aux propriétés typographiques renforcent la capacité à construire des interfaces modernes, accessibles et bien organisées.
Ces QCM favorisent la compréhension théorique, l’entraînement ciblé et l’auto-évaluation, tout en préparant efficacement aux examens et projets pratiques.
Conclusion
C
ette série de QCM constitue un excellent support pour consolider les bases avancées du HTML5 et du CSS.
Elle permet de mieux comprendre les mécanismes de mise en page, de typographie et d’interaction qui influencent directement l’expérience utilisateur.
En s’exerçant régulièrement, l’apprenant développe des automatismes, gagne en précision et renforce sa confiance.
Ces compétences sont essentielles pour réussir des évaluations, concevoir des interfaces modernes et évoluer vers des projets web plus ambitieux, avec un code structuré, lisible et professionnel.
