QCMUP.COM

Liste QCM HTML/CSS Corrigé – Partie 7

Entraînez-vous avec des questions corrigées, progressez étape par étape, puis consolidez vos notions grâce aux définitions et explications.

20 questions Réponses expliquées Réviser → Pratiquer
Liste QCM HTML/CSS Corrigé – Partie 7 – HTML/CSS

L e développement web repose sur deux piliers essentiels : la structure du contenu et sa présentation visuelle.

HTML et CSS jouent un rôle central dans cette construction, en permettant de créer des pages claires, accessibles et agréables à consulter.

Maîtriser ces technologies est indispensable pour toute personne souhaitant concevoir des sites web modernes, qu’il s’agisse d’étudiants, de candidats à des examens techniques ou de futurs développeurs.

À travers ces QCM, les notions fondamentales du balisage HTML et de la mise en forme CSS sont abordées de manière progressive et cohérente.

On y retrouve les principes de structuration des pages, l’utilisation correcte des balises sémantiques, ainsi que les mécanismes de mise en page et d’interaction visuelle.

Cette approche permet au lecteur de consolider ses bases tout en comprenant la logique globale du fonctionnement d’une page web.

L’objectif est d’accompagner l’apprenant avec méthode, en l’aidant à gagner en rigueur et en confiance dans sa pratique du web.

Le développement web repose sur deux piliers essentiels : la structure du contenu et sa présentation visuelle.

HTML et CSS jouent un rôle central dans cette construction, en permettant de créer des pages claires, accessibles et agréables à consulter.

Maîtriser ces technologies est indispensable pour toute personne souhaitant concevoir des sites web modernes, qu’il s’agisse d’étudiants, de candidats à des examens techniques ou de futurs développeurs.

À travers ces QCM, les notions fondamentales du balisage HTML et de la mise en forme CSS sont abordées de manière progressive et cohérente.

On y retrouve les principes de structuration des pages, l’utilisation correcte des balises sémantiques, ainsi que les mécanismes de mise en page et d’interaction visuelle.

Cette approche permet au lecteur de consolider ses bases tout en comprenant la logique globale du fonctionnement d’une page web.

L’objectif est d’accompagner l’apprenant avec méthode, en l’aidant à gagner en rigueur et en confiance dans sa pratique du web.

QCM 1 Corrigé

Quelle balise HTML est utilisée pour définir une barre de navigation ?

A. <navigation>
B. <nav>
C. <menu>
D. <bar>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
La balise sémantique <nav> est spécifiquement conçue pour contenir des liens de navigation.

QCM 2 Corrigé

Quelle propriété CSS permet de changer le curseur de la souris ?

A. mouse-style
B. pointer
C. cursor
D. event-cursor
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
La propriété 'cursor' permet d'afficher une main (pointer), une croix, ou d'autres symboles.

QCM 3 Corrigé

Quelle est la fonction du sélecteur 'a:hover' ?

A. Cibler les liens déjà visités
B. Cibler un lien lors du passage de la souris
C. Cibler le lien actif au clic
D. Cibler tous les liens d'une page
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
':hover' est une pseudo-classe déclenchée quand l'utilisateur survole l'élément.

QCM 4 Corrigé

En HTML, à quoi sert l'attribut 'alt' dans une balise <img> ?

A. Afficher une légende sous l'image
B. Améliorer la résolution de l'image
C. Fournir un texte alternatif pour l'accessibilité
D. Définir la bordure de l'image
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
L'attribut 'alt' décrit l'image pour les lecteurs d'écran et si le fichier ne charge pas.

QCM 5 Corrigé

Quelle propriété CSS permet d'arrondir les coins d'un élément ?

A. corner-style
B. border-radius
C. border-round
D. radius-clip
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'border-radius' définit le rayon des coins d'un bloc.

QCM 6 Corrigé

Quelle balise HTML contient les métadonnées de la page (non visibles) ?

A. <body>
B. <html>
C. <head>
D. <header>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
Le <head> contient le titre, les scripts, les styles et les balises meta.

QCM 7 Corrigé

Quel est l'effet de 'z-index' en CSS ?

A. Agrandir un élément sur l'axe Z
B. Gérer l'ordre d'empilement vertical des éléments
C. Modifier l'opacité d'un calque
D. Définir la vitesse d'une animation
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Le 'z-index' détermine quel élément apparaît devant ou derrière les autres.

QCM 8 Corrigé

Quelle balise est utilisée pour regrouper des options dans une liste déroulante ?

A. <group>
B. <optgroup>
C. <listgroup>
D. <select-group>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
<optgroup> permet de créer des sections labellisées dans un élément <select>.

QCM 9 Corrigé

Comment mettre tout le texte d'un élément en majuscules en CSS ?

A. text-transform: uppercase;
B. font-style: capitalize;
C. text-decoration: big;
D. case: upper;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
'text-transform: uppercase' transforme tous les caractères en majuscules.

QCM 10 Corrigé

Quel attribut lie un label à son champ de formulaire ?

A. id
B. name
C. for
D. link
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
L'attribut 'for' du <label> doit correspondre à l'ID de l'input associé.

QCM 11 Corrigé

Quel modèle de boîte CSS inclut le padding et la bordure dans la largeur totale ?

A. box-sizing: content-box;
B. box-sizing: border-box;
C. display: flex-box;
D. overflow: visible;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Avec 'border-box', 'width' définit la largeur totale (bordure et padding inclus).

QCM 12 Corrigé

Quel sélecteur CSS cible les éléments impairs d'une liste ?

A. li:nth-child(even)
B. li:nth-child(odd)
C. li:nth-child(first)
D. li:only-child
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'odd' signifie 'impair' en anglais, utilisé pour les styles alternés.

QCM 13 Corrigé

En HTML5, quelle balise définit le pied de page d'un document ?

A. <bottom>
B. <end>
C. <footer>
D. <section-end>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
La balise <footer> est utilisée pour les informations de bas de page.

QCM 14 Corrigé

Quelle propriété CSS permet de rendre un élément flexible ?

A. align: flex;
B. display: flex;
C. flex: true;
D. position: flex;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'display: flex' active le mode Flexbox pour les enfants directs de l'élément.

QCM 15 Corrigé

Quelle balise est utilisée pour insérer une vidéo en HTML5 ?

A. <media>
B. <movie>
C. <video>
D. <embed>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
<video> est la balise native introduite en HTML5 pour le contenu vidéo.

QCM 16 Corrigé

Comment enlever le soulignement par défaut des liens ?

A. text-decoration: none;
B. underline: false;
C. link-style: none;
D. text-style: plain;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
'text-decoration: none' supprime le trait de soulignement des balises <a>.

QCM 17 Corrigé

Quelle valeur de 'display' permet de cacher un élément du DOM ?

A. hidden
B. invisible
C. none
D. collapse
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
'display: none' retire l'élément du flux de la page comme s'il n'existait pas.

QCM 18 Corrigé

Quelle balise HTML définit une cellule d'en-tête de tableau ?

A. <td>
B. <head-cell>
C. <th>
D. <tr>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
<th> signifie 'Table Header' et centre/met en gras le texte par défaut.

QCM 19 Corrigé

Quel sélecteur CSS permet de cibler le premier enfant d'un parent ?

A. :first-child
B. :start
C. :initial-child
D. :child(1)
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
La pseudo-classe ':first-child' cible spécifiquement le premier élément enfant.

QCM 20 Corrigé

Quelle propriété définit l'ordre de priorité des polices de secours ?

A. font-backup
B. font-stack
C. font-family
D. text-font
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
Dans 'font-family', on liste les polices de la plus préférée à la moins préférée.

Mots & Définitions
Consultez les définitions des termes importants.

La balise nav est un élément sémantique HTML utilisé pour regrouper les liens de navigation principaux d’un site. Elle permet de structurer clairement les menus et d’améliorer l’accessibilité ainsi que la compréhension de la page par les moteurs de recherche.

La propriété CSS cursor permet de modifier l’apparence du pointeur de la souris lorsqu’il survole un élément. Elle est souvent utilisée pour indiquer qu’un élément est cliquable ou interactif.

La pseudo-classe :hover s’applique lorsqu’un utilisateur survole un élément avec la souris. Elle est couramment utilisée pour créer des effets visuels dynamiques sur les liens ou les boutons.

L’attribut alt fournit une description textuelle d’une image lorsque celle-ci ne peut pas être affichée. Il est essentiel pour l’accessibilité et permet aux lecteurs d’écran de décrire l’image aux utilisateurs.

La propriété border-radius permet d’arrondir les coins d’un élément HTML. Elle contribue à une présentation visuelle plus moderne et plus agréable des interfaces.

La propriété z-index contrôle l’ordre d’empilement des éléments positionnés sur l’axe vertical. Elle détermine quel élément apparaît au-dessus ou en dessous des autres.

La balise optgroup est utilisée pour regrouper des options similaires dans une liste déroulante. Elle améliore la lisibilité et l’organisation des menus de sélection.

La propriété text-transform permet de modifier la casse du texte, comme l’affichage en majuscules ou en minuscules. Elle est utile pour harmoniser l’apparence du contenu sans modifier le texte source.

La propriété box-sizing définit la manière dont la largeur et la hauteur d’un élément sont calculées. Avec la valeur border-box, le padding et la bordure sont inclus dans les dimensions totales.

Flexbox est un modèle de mise en page CSS conçu pour organiser facilement les éléments sur un axe principal. Il permet d’aligner, de répartir et d’adapter les composants de manière flexible.

Le sélecteur :first-child cible le premier élément enfant d’un parent donné. Il est utilisé pour appliquer un style spécifique au premier élément d’une liste ou d’un groupe.

La propriété font-family permet de définir une liste de polices de caractères par ordre de priorité. Elle assure une apparence cohérente du texte même si certaines polices ne sont pas disponibles.

À propos de ce QCM

C es QCM couvrent les notions essentielles nécessaires pour comprendre et utiliser efficacement HTML et CSS dans un contexte professionnel ou académique.

Côté HTML, l’accent est mis sur la structure du document, l’usage des balises sémantiques et l’organisation logique du contenu.

Comprendre le rôle des balises dédiées à la navigation, aux sections, aux formulaires ou aux médias permet de créer des pages plus lisibles, accessibles et conformes aux standards du web.

Du côté de CSS, les questions abordent les principes de mise en forme, de positionnement et d’interaction visuelle.

Les propriétés liées à l’affichage, à l’alignement, à la gestion des dimensions ou à l’empilement des éléments sont essentielles pour maîtriser la présentation d’une interface.

Les notions de Flexbox, de gestion des états interactifs et de hiérarchie visuelle permettent d’aller au-delà d’un simple habillage graphique et de concevoir des mises en page adaptables et cohérentes.

En travaillant ces QCM, l’utilisateur développe une compréhension théorique solide tout en renforçant sa capacité à analyser et corriger du code existant.

L’entraînement favorise l’autonomie, l’auto-évaluation et la préparation efficace aux examens ou aux tests techniques.

Chaque thème abordé contribue à une vision globale du développement front-end, en reliant la structure du contenu à son rendu visuel et à l’expérience utilisateur.

Conclusion

C es QCM constituent un excellent support pour consolider les bases du HTML et du CSS, deux compétences incontournables dans le développement web.

Ils permettent de revoir les concepts clés, d’identifier les points à renforcer et de progresser de manière structurée.

En s’exerçant régulièrement, l’apprenant améliore sa compréhension des mécanismes du web et gagne en assurance dans la lecture et l’écriture du code.

Cette pratique régulière favorise une montée en compétence durable et prépare efficacement aux examens, aux projets personnels ou aux exigences du monde professionnel.