C
ette série de QCM est dédiée aux fondements du développement web front-end, en particulier à l’utilisation conjointe du HTML et du CSS.
Ces deux langages constituent la base de toute page web moderne : le HTML structure le contenu, tandis que le CSS contrôle son apparence visuelle et sa mise en page.
Maîtriser ces notions est indispensable pour les étudiants, les autodidactes et les candidats aux examens ou concours liés à l’informatique et au web.
À travers ces questions, l’apprenant est amené à consolider des notions essentielles telles que la structuration sémantique des pages, la gestion des styles, l’organisation des contenus, ainsi que les mécanismes d’affichage et d’alignement.
L’objectif n’est pas seulement de reconnaître des balises ou des propriétés, mais de comprendre leur rôle réel dans la construction d’interfaces claires, accessibles et cohérentes.
Cette approche progressive permet d’acquérir des bases solides, indispensables pour évoluer vers des projets web plus avancés.
Cette série de QCM est dédiée aux fondements du développement web front-end, en particulier à l’utilisation conjointe du HTML et du CSS.
Ces deux langages constituent la base de toute page web moderne : le HTML structure le contenu, tandis que le CSS contrôle son apparence visuelle et sa mise en page.
Maîtriser ces notions est indispensable pour les étudiants, les autodidactes et les candidats aux examens ou concours liés à l’informatique et au web.
À travers ces questions, l’apprenant est amené à consolider des notions essentielles telles que la structuration sémantique des pages, la gestion des styles, l’organisation des contenus, ainsi que les mécanismes d’affichage et d’alignement.
L’objectif n’est pas seulement de reconnaître des balises ou des propriétés, mais de comprendre leur rôle réel dans la construction d’interfaces claires, accessibles et cohérentes.
Cette approche progressive permet d’acquérir des bases solides, indispensables pour évoluer vers des projets web plus avancés.
QCM
1
Corrigé
Quel attribut HTML définit la langue du document ?
A. charset
B. lang
C. type
D. dir
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L’attribut lang précise la langue principale du document.
QCM
2
Corrigé
Quelle balise HTML permet de regrouper du contenu en bloc ?
A. <span>
B. <section>
C. <div>
D. <article>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<div> est une balise générique de type bloc.
QCM
3
Corrigé
Quelle propriété CSS gère la transparence ?
A. display
B. opacity
C. visibility
D. filter
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
opacity contrôle le niveau de transparence.
QCM
4
Corrigé
Quelle balise HTML est utilisée pour un bouton ?
A. <input>
B. <submit>
C. <btn>
D. <button>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<button> permet de créer un bouton cliquable.
QCM
5
Corrigé
Quelle propriété CSS définit la hauteur d’un élément ?
A. width
B. size
C. height
D. line-height
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
height définit la hauteur d’un élément.
QCM
6
Corrigé
Quelle balise HTML est utilisée pour un champ de saisie ?
A. <input>
B. <textarea>
C. <form>
D. <label>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
<input> permet la saisie de données utilisateur.
QCM
7
Corrigé
Quelle propriété CSS permet d’afficher ou masquer un élément ?
A. visibility
B. opacity
C. display
D. z-index
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
display peut masquer ou afficher complètement un élément.
QCM
8
Corrigé
Quelle balise HTML définit l’en-tête d’une page ou section ?
A. <head>
B. <top>
C. <nav>
D. <header>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<header> est une balise sémantique d’en-tête.
QCM
9
Corrigé
Quelle propriété CSS permet de superposer des éléments ?
A. position
B. float
C. z-index
D. overflow
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
z-index gère l’ordre d’empilement des éléments.
QCM
10
Corrigé
Quelle balise HTML est utilisée pour une liste ordonnée ?
A. <ul>
B. <li>
C. <ol>
D. <list>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<ol> crée une liste ordonnée numérotée.
QCM
11
Corrigé
Quelle propriété CSS définit l’espace intérieur d’un élément ?
A. margin
B. padding
C. border
D. spacing
Afficher la réponse
Cliquez pour voir la correction
Quelle balise HTML est utilisée pour inclure une feuille CSS externe ?
A. <style>
B. <script>
C. <css>
D. <link>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<link> permet de lier un fichier CSS externe.
QCM
13
Corrigé
Quelle propriété CSS permet de gérer le débordement du contenu ?
A. overflow
B. display
C. float
D. clear
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
overflow contrôle le contenu qui dépasse.
QCM
14
Corrigé
Quelle balise HTML représente un pied de page ?
A. <bottom>
B. <footer>
C. <end>
D. <section>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<footer> est utilisée pour le pied de page.
QCM
15
Corrigé
Quelle propriété CSS transforme le texte en majuscules ?
A. font-style
B. text-align
C. text-transform
D. letter-spacing
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
text-transform permet de modifier la casse du texte.
QCM
16
Corrigé
Quelle balise HTML est utilisée pour intégrer une vidéo ?
A. <media>
B. <movie>
C. <video>
D. <iframe>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<video> permet d’intégrer des vidéos HTML5.
QCM
17
Corrigé
Quelle propriété CSS permet d’utiliser Flexbox ?
A. display
B. position
C. float
D. align
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
display: flex active le modèle Flexbox.
QCM
18
Corrigé
Quelle balise HTML est utilisée pour un texte important ?
A. <b>
B. <strong>
C. <i>
D. <mark>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<strong> indique une importance sémantique.
QCM
19
Corrigé
Quelle propriété CSS permet d’aligner les éléments en Flexbox ?
A. text-align
B. justify-content
C. vertical-align
D. float
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
justify-content aligne les éléments sur l’axe principal.
QCM
20
Corrigé
Quelle balise HTML est utilisée pour intégrer une page externe ?
A. <embed>
B. <object>
C. <frame>
D. <iframe>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<iframe> permet d’intégrer une page externe.
Mots & Définitions
Consultez les définitions des termes importants.
L’attribut lang permet d’indiquer la langue principale d’un document ou d’un élément HTML. Il aide les navigateurs, les lecteurs d’écran et les moteurs de recherche à interpréter correctement le contenu. C’est un élément important pour l’accessibilité et le référencement.
La balise div est un conteneur HTML utilisé pour regrouper du contenu en bloc. Elle n’a pas de sens sémantique propre, mais sert à structurer la page et à appliquer des styles CSS. Elle est très utilisée dans la mise en page.
La propriété opacity permet de gérer la transparence d’un élément. Elle s’exprime par une valeur comprise entre 0 et 1. Plus la valeur est faible, plus l’élément devient transparent.
La balise button permet de créer un bouton cliquable dans une page web. Elle peut contenir du texte ou d’autres éléments HTML. Elle est souvent utilisée pour déclencher des actions dans les formulaires ou via JavaScript.
La propriété height définit la hauteur d’un élément HTML. Elle permet de contrôler la taille verticale d’un bloc. Elle est fréquemment utilisée pour structurer les mises en page.
La balise input sert à créer un champ de saisie dans un formulaire. Elle permet à l’utilisateur d’entrer des données comme du texte, des nombres ou des dates. Son comportement dépend de son type.
La propriété display contrôle la manière dont un élément est affiché dans la page. Elle peut rendre un élément visible, masqué ou changer son comportement de mise en page. C’est une propriété centrale en CSS.
La balise header représente l’en-tête d’une page ou d’une section. Elle contient généralement des titres, des logos ou des éléments de navigation. Elle apporte une structure sémantique claire au document.
La propriété z-index permet de gérer l’empilement des éléments qui se superposent. Plus sa valeur est élevée, plus l’élément apparaît au premier plan. Elle fonctionne uniquement avec des éléments positionnés.
Une liste ordonnée est une liste dont les éléments sont numérotés automatiquement. Elle est utilisée lorsque l’ordre des éléments a une importance logique. En HTML, elle structure des étapes ou des classements.
Le padding correspond à l’espace intérieur entre le contenu d’un élément et sa bordure. Il permet d’aérer le contenu et d’améliorer la lisibilité. Contrairement à la marge, il fait partie de l’élément.
La balise link est utilisée pour lier des ressources externes à une page HTML. Elle sert notamment à inclure des feuilles de style CSS. Elle se place généralement dans l’en-tête du document.
La propriété overflow gère l’affichage du contenu qui dépasse les dimensions d’un élément. Elle permet de masquer ce contenu ou d’ajouter des barres de défilement. Elle est essentielle pour contrôler les zones limitées.
La balise footer représente le pied de page d’un document ou d’une section. Elle contient souvent des informations complémentaires comme les mentions légales ou les liens secondaires. Elle améliore la structure sémantique du HTML.
La propriété text-transform permet de modifier l’apparence des lettres d’un texte. Elle peut transformer le texte en majuscules, minuscules ou capitales. Elle agit uniquement sur l’affichage.
La balise video permet d’intégrer une vidéo directement dans une page web. Elle offre des contrôles natifs comme la lecture ou la pause. Elle fait partie des fonctionnalités multimédias du HTML5.
Flexbox est un modèle de mise en page CSS conçu pour aligner et répartir des éléments dans un conteneur. Il facilite la création de mises en page flexibles et adaptatives. Il est très utilisé dans le design moderne.
La balise strong sert à indiquer qu’un texte a une importance particulière. Elle donne un sens sémantique fort au contenu, au-delà de l’aspect visuel. Les navigateurs l’affichent généralement en gras.
La propriété justify-content permet d’aligner les éléments le long de l’axe principal en Flexbox. Elle contrôle la répartition de l’espace entre les éléments. Elle est essentielle pour structurer les alignements horizontaux.
La balise iframe permet d’intégrer une page web externe dans une autre page. Elle est souvent utilisée pour afficher des vidéos, des cartes ou des contenus tiers. Elle fonctionne comme une fenêtre intégrée.
À propos de ce QCM
L
es QCM proposés couvrent un ensemble cohérent de notions fondamentales en HTML et CSS, essentielles à la création et à la mise en forme de pages web.
Du côté du HTML, l’accent est mis sur les balises structurantes utilisées pour organiser le contenu, définir les zones principales d’une page, intégrer des éléments interactifs ou multimédias, et améliorer la sémantique du document.
Ces notions permettent de concevoir des pages lisibles, bien hiérarchisées et compatibles avec les standards du web.
En CSS, les questions abordent les propriétés clés liées à l’affichage, à la visibilité et à l’agencement des éléments.
L’apprenant est invité à comprendre comment contrôler les dimensions, l’espacement interne et externe, la superposition des blocs, ainsi que la gestion du débordement du contenu.
Une attention particulière est également portée aux mécanismes modernes de mise en page, comme Flexbox, qui facilitent l’alignement et la distribution des éléments dans des interfaces responsives.
Ces QCM développent des compétences essentielles telles que l’analyse du rendu visuel d’une page, la capacité à corriger des problèmes d’affichage et la compréhension des interactions entre structure et style.
Ils constituent un excellent outil d’auto-évaluation et d’entraînement ciblé, permettant de renforcer progressivement les acquis.
Cette démarche pédagogique aide l’utilisateur à gagner en assurance et à poser des bases solides pour la poursuite de son apprentissage ou la préparation à des évaluations officielles.
Conclusion
D
ans l’ensemble, ces QCM offrent une approche structurée et pédagogique des bases du HTML et du CSS.
Ils permettent de consolider des connaissances indispensables à toute personne souhaitant comprendre ou créer des pages web fonctionnelles et bien présentées.
En s’entraînant régulièrement, l’utilisateur renforce sa maîtrise des concepts clés, améliore sa logique de raisonnement et développe une meilleure compréhension des bonnes pratiques du web.
Cette progression graduelle favorise la confiance, la rigueur et l’autonomie, tout en préparant efficacement aux examens, concours ou projets concrets.
Le travail régulier sur ce type de contenu est un véritable levier pour transformer des notions théoriques en compétences durables et opérationnelles.
