Les bases du développement web reposent essentiellement sur deux piliers complémentaires : la structure et la présentation des pages.
Maîtriser ces fondements est indispensable pour toute personne souhaitant créer, comprendre ou améliorer un site web, que ce soit dans un cadre académique, professionnel ou personnel.
Ces QCM abordent les notions essentielles liées à la construction des pages, à l’organisation du contenu et à sa mise en forme visuelle.
On y retrouve les éléments fondamentaux utilisés pour créer des liens, afficher des images, structurer des textes ou encore gérer les formulaires.
La mise en page, l’alignement, les couleurs, les dimensions et le positionnement des éléments occupent également une place centrale.
En travaillant ces concepts, l’apprenant développe une compréhension claire du fonctionnement des pages web modernes et acquiert des réflexes indispensables pour analyser ou produire un code propre, lisible et efficace.
Cette approche progressive permet d’ancrer des bases solides, essentielles pour évoluer ensuite vers des notions plus avancées du développement front-end.
Les bases du développement web reposent essentiellement sur deux piliers complémentaires : la structure et la présentation des pages.
Maîtriser ces fondements est indispensable pour toute personne souhaitant créer, comprendre ou améliorer un site web, que ce soit dans un cadre académique, professionnel ou personnel.
Ces QCM abordent les notions essentielles liées à la construction des pages, à l’organisation du contenu et à sa mise en forme visuelle.
On y retrouve les éléments fondamentaux utilisés pour créer des liens, afficher des images, structurer des textes ou encore gérer les formulaires.
La mise en page, l’alignement, les couleurs, les dimensions et le positionnement des éléments occupent également une place centrale.
En travaillant ces concepts, l’apprenant développe une compréhension claire du fonctionnement des pages web modernes et acquiert des réflexes indispensables pour analyser ou produire un code propre, lisible et efficace.
Cette approche progressive permet d’ancrer des bases solides, essentielles pour évoluer ensuite vers des notions plus avancées du développement front-end.
QCM
1
Corrigé
À quoi sert principalement HTML ?
A. Créer la structure des pages web
B. Gérer la base de données
C. Programmer la logique serveur
D. Ajouter des animations complexes
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
HTML permet de structurer le contenu d’une page web.
QCM
2
Corrigé
Quel est le rôle principal de CSS ?
A. Créer des formulaires
B. Structurer le contenu
C. Styliser et mettre en forme les pages
D. Gérer les requêtes HTTP
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
CSS contrôle l’apparence visuelle des pages HTML.
QCM
3
Corrigé
Quelle balise HTML est utilisée pour créer un lien ?
A. <link>
B. <a>
C. <href>
D. <url>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La balise <a> permet de créer des liens hypertextes.
QCM
4
Corrigé
Quelle propriété CSS change la couleur du texte ?
A. background-color
B. font-style
C. text-decoration
D. color
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La propriété color définit la couleur du texte.
QCM
5
Corrigé
Quelle balise HTML est utilisée pour une image ?
A. <picture>
B. <img>
C. <image>
D. <src>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La balise <img> permet d’afficher une image.
QCM
6
Corrigé
Quelle unité CSS est relative à la taille de la police parente ?
A. px
B. %
C. em
D. cm
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L’unité em dépend de la taille de police de l’élément parent.
QCM
7
Corrigé
Quelle balise HTML représente une liste non ordonnée ?
A. <ol>
B. <ul>
C. <li>
D. <list>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<ul> définit une liste non ordonnée.
QCM
8
Corrigé
Quelle propriété CSS permet de centrer un texte ?
A. align
B. float
C. text-align
D. position
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
text-align permet d’aligner le texte horizontalement.
QCM
9
Corrigé
Quel attribut HTML est obligatoire pour la balise <img> ?
A. href
B. alt
C. title
D. src
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L’attribut src indique le chemin de l’image.
QCM
10
Corrigé
Quelle propriété CSS contrôle l’espace extérieur d’un élément ?
A. padding
B. margin
C. border
D. outline
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
margin définit l’espace extérieur autour d’un élément.
QCM
11
Corrigé
Quelle balise HTML est utilisée pour un titre principal ?
A. <title>
B. <head>
C. <h1>
D. <header>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<h1> représente le titre le plus important.
QCM
12
Corrigé
Quelle propriété CSS permet de changer la police ?
A. font-style
B. font-family
C. font-weight
D. text-transform
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
font-family définit la police utilisée.
QCM
13
Corrigé
Quelle balise HTML est utilisée pour un formulaire ?
A. <input>
B. <label>
C. <form>
D. <fieldset>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <form> regroupe les champs de formulaire.
QCM
14
Corrigé
Quelle propriété CSS permet de masquer un élément ?
A. opacity
B. display
C. visibility
D. overflow
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
visibility: hidden masque l’élément sans modifier la mise en page.
QCM
15
Corrigé
Quelle balise HTML est utilisée pour un paragraphe ?
A. <div>
B. <span>
C. <p>
D. <section>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<p> sert à définir un paragraphe.
QCM
16
Corrigé
Quelle propriété CSS définit la largeur d’un élément ?
A. height
B. size
C. width
D. max
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
width contrôle la largeur d’un élément.
QCM
17
Corrigé
Quelle balise HTML est sémantique ?
A. <div>
B. <span>
C. <section>
D. <b>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<section> apporte une signification au contenu.
QCM
18
Corrigé
Quelle propriété CSS permet de positionner un élément ?
A. float
B. position
C. display
D. align-items
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
position définit le mode de positionnement d’un élément.
QCM
19
Corrigé
Quelle balise HTML est utilisée pour inclure du CSS interne ?
A. <css>
B. <link>
C. <script>
D. <style>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La balise <style> permet d’écrire du CSS interne.
QCM
20
Corrigé
Quelle propriété CSS permet de créer des coins arrondis ?
A. border-style
B. border-radius
C. outline-radius
D. corner
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
border-radius arrondit les coins des éléments.
QCM
21
Corrigé
Quelle est l'utilité de la propriété 'font-size-adjust' ?
A. Augmenter la taille de la police sur les écrans Retina.
B. Préserver la lisibilité du texte en cas de basculement vers une police de secours (fallback) en ajustant l'aspect ratio.
C. Forcer toutes les polices à la même hauteur de ligne (line-height).
D. Désactiver l'ajustement automatique du texte sur mobile.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle permet de conserver la hauteur d'x (x-height) d'une police si la police principale ne charge pas, évitant que le texte ne devienne illisible.
QCM
22
Corrigé
En CSS Grid, que permet de faire la propriété 'grid-auto-flow: dense' ?
A. Augmenter la densité de pixels des images de la grille.
B. Empêcher le débordement des éléments hors de la grille.
C. Remplir les trous dans la grille si des éléments plus petits peuvent s'y insérer plus tard.
D. Forcer tous les éléments à avoir la même taille.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'algorithme 'dense' tente de boucher les espaces vides laissés par des éléments plus larges, optimisant ainsi l'espace visuel.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément <details> lorsqu'il est déroulé ?
A. details:active
B. details:checked
C. details[open]
D. details:expanded
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'état ouvert d'un élément <details> est géré par la présence de l'attribut booléen 'open'.
QCM
24
Corrigé
Quelle est la fonction de la propriété 'text-underline-offset' ?
A. Définir la distance entre le soulignement et la ligne de base du texte.
B. Modifier l'épaisseur du trait de soulignement.
C. Changer la couleur du soulignement indépendamment du texte.
D. Supprimer le soulignement des liens hypertexte.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cette propriété offre un contrôle typographique précis sur la position verticale du soulignement.
QCM
25
Corrigé
À quoi sert la valeur 'isolate' pour la propriété 'isolation' ?
A. À empêcher un élément d'être sélectionné par la souris.
B. À créer un nouveau contexte d'empilement (stacking context) sans nécessiter de positionnement ou de z-index.
C. À bloquer l'héritage des variables CSS vers les enfants.
D. À séparer visuellement deux bordures adjacentes.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'isolation: isolate' est particulièrement utile pour confiner les effets de mix-blend-mode à un groupe d'éléments précis.
QCM
26
Corrigé
Quelle unité est calculée en fonction de la taille de police de l'élément racine (html) ?
A. em
B. vh
C. pt
D. rem
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'unité 'rem' (root em) est fixe par rapport à la racine, ce qui facilite la mise à l'échelle globale d'un site.
QCM
27
Corrigé
Quel sélecteur cible les éléments <li> qui sont des descendants directs d'un <ul> ?
A. ul li
B. ul > li
C. ul + li
D. ul ~ li
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le symbole '>' est le combinateur d'enfant direct, ignorant les niveaux d'imbrication plus profonds.
QCM
28
Corrigé
Quelle propriété permet de masquer un élément tout en le gardant accessible pour les lecteurs d'écran (via les techniques de 'screen-reader only') ?
A. display: none
B. visibility: hidden
C. clip-path: inset(50%)
D. opacity: 0
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Réduire la zone de rendu via clip-path ou utiliser une taille de 1px avec overflow: hidden sont des méthodes standards pour l'accessibilité.
QCM
29
Corrigé
Que signifie la valeur 'content' pour 'flex-basis' ?
A. L'élément occupe 100% de l'espace disponible.
B. La taille initiale est basée sur le contenu de l'élément, peu importe sa largeur définie.
C. L'élément est masqué s'il n'a pas de texte.
D. L'élément ignore les marges de ses voisins.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'flex-basis: content' indique que le calcul de taille démarre à partir de la taille intrinsèque du contenu.
QCM
30
Corrigé
Quelle propriété définit la forme du curseur de la souris lors du survol d'un élément ?
A. mouse-style
B. pointer-type
C. cursor
D. icon-pointer
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La propriété 'cursor' accepte des valeurs comme 'pointer', 'wait', 'crosshair' ou même une image personnalisée.
QCM
31
Corrigé
En CSS, quel est le rôle de la propriété 'column-span' ?
A. Définir le nombre de colonnes dans une grille.
B. Permettre à un élément de s'étendre sur toutes les colonnes d'un layout multi-colonnes.
C. Ajouter une bordure entre deux colonnes.
D. Mesurer la largeur totale d'une colonne.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'column-span: all' est souvent utilisé pour les titres qui doivent traverser plusieurs colonnes de texte.
QCM
32
Corrigé
Quelle fonction permet de définir une valeur de secours si une variable CSS n'est pas disponible ?
A. var(--ma-var, fallback)
B. get(--ma-var || fallback)
C. val(--ma-var / fallback)
D. env(--ma-var, fallback)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La fonction var() accepte un second paramètre qui sera utilisé si la variable personnalisée n'est pas définie.
QCM
33
Corrigé
Quelle propriété permet de gérer le 'débordement' de texte en ajoutant des points de suspension ?
A. text-wrap: ellipsis
B. word-break: dots
C. text-overflow: ellipsis
D. overflow: dots
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Pour fonctionner, elle nécessite généralement 'overflow: hidden' et 'white-space: nowrap' sur le même élément.
QCM
34
Corrigé
Que permet d'ajuster 'letter-spacing' ?
A. L'espace entre les mots.
B. L'espace entre les caractères (lettres).
C. Le retrait de la première ligne d'un paragraphe.
D. La hauteur totale d'un bloc de texte.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est l'équivalent CSS de l'approche typographique du 'tracking'.
QCM
35
Corrigé
Dans le modèle de boîte, qu'est-ce que le 'margin collapse' (fusion des marges) ?
A. Les marges s'additionnent toujours.
B. Les marges verticales adjacentes fusionnent pour ne former qu'une seule marge (la plus grande des deux).
C. Les marges horizontales s'annulent.
D. Les bordures remplacent les marges.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est un comportement classique en CSS où deux blocs l'un sur l'autre ne cumulent pas forcément leurs marges verticales.
QCM
36
Corrigé
Quelle propriété CSS est utilisée pour l'accessibilité afin de définir l'ordre de lecture des éléments ?
A. z-index
B. order
C. tabindex (attribut HTML, pas CSS)
D. direction
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Attention, bien que 'order' modifie le visuel, seul l'attribut HTML 'tabindex' influence réellement le focus clavier.
QCM
37
Corrigé
Quel sélecteur cible un lien <a> uniquement lorsqu'il est survolé ?
A. a:focus
B. a:visited
C. a:hover
D. a:link
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La pseudo-classe :hover s'active au passage du pointeur sur l'élément.
QCM
38
Corrigé
Quelle propriété permet de définir le comportement d'un arrière-plan lors du redimensionnement (étirer, contenir) ?
A. background-size
B. background-clip
C. background-origin
D. background-position
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Des valeurs comme 'cover' ou 'contain' permettent de gérer l'affichage responsive des images de fond.
QCM
39
Corrigé
À quoi sert la propriété 'scroll-behavior' ?
A. À définir la vitesse de la molette de la souris.
B. À rendre le défilement fluide lors d'un clic sur une ancre interne.
C. À bloquer le scroll sur mobile.
D. À changer la couleur de la scrollbar.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'scroll-behavior: smooth' anime le déplacement au lieu d'un saut instantané vers l'ancre cible.
QCM
40
Corrigé
Comment s'appelle l'algorithme qui détermine quels styles s'appliquent en cas de conflit ?
A. L'Héritage
B. La Spécificité
C. La Cascade
D. Le Rendu
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La Cascade (Cascading) prend en compte l'origine, la spécificité et l'ordre d'apparition des règles.
Mots & Définitions
Consultez les définitions des termes importants.
HTML est le langage de base utilisé pour structurer le contenu d’une page web. Il permet de définir les titres, paragraphes, liens, images et formulaires. Sans HTML, une page web n’aurait aucune structure logique.
CSS est le langage qui gère l’apparence visuelle des pages web. Il contrôle les couleurs, les polices, les espacements, les dimensions et la mise en page. Il permet de séparer le contenu de la présentation.
Une balise HTML sert à définir la nature d’un élément dans une page web. Elle indique au navigateur comment interpréter et afficher le contenu. Les balises structurent l’information de manière claire et cohérente.
Un sélecteur CSS permet de cibler un ou plusieurs éléments HTML afin de leur appliquer un style. Il peut se baser sur le type d’élément, une classe, un identifiant ou un état particulier. C’est le point de départ de toute règle CSS.
Une propriété CSS définit l’aspect précis d’un élément, comme sa couleur, sa taille ou son positionnement. Elle est associée à une valeur qui précise le rendu souhaité. Les propriétés permettent de personnaliser finement l’affichage.
Un lien hypertexte permet de naviguer d’une page à une autre ou vers une ressource externe. Il est essentiel pour la navigation sur le web. Les liens structurent la circulation de l’information.
Une image est un élément visuel intégré dans une page web pour illustrer ou enrichir le contenu. Elle améliore la compréhension et l’attractivité d’une page. Son affichage doit toujours être accompagné d’un texte alternatif.
L’accessibilité vise à rendre les pages web utilisables par tous, y compris les personnes en situation de handicap. Elle repose sur une bonne structure HTML et des attributs adaptés. Elle améliore aussi la qualité globale du site.
La mise en page correspond à l’organisation visuelle des éléments sur une page web. Elle influence la lisibilité, l’ergonomie et l’expérience utilisateur. Une bonne mise en page facilite la compréhension du contenu.
Un formulaire permet de collecter des informations saisies par l’utilisateur. Il est couramment utilisé pour l’inscription, la connexion ou la prise de contact. Sa structure doit être claire et facile à utiliser.
Un élément sémantique décrit clairement le rôle du contenu qu’il contient. Il améliore la compréhension du code par les navigateurs et les moteurs de recherche. Il rend les pages plus structurées et plus accessibles.
Le positionnement définit l’emplacement d’un élément dans une page web. Il permet de contrôler l’agencement visuel et les superpositions. Une bonne maîtrise du positionnement est essentielle pour des interfaces claires.
À propos de ce QCM
Les thèmes abordés dans ces QCM couvrent l’essentiel des compétences attendues en HTML et CSS.
La première dimension concerne la structuration du contenu.
Il s’agit de comprendre le rôle des balises servant à organiser une page, comme celles dédiées aux titres, paragraphes, listes, images ou formulaires.
Cette structuration logique est primordiale pour la lisibilité du code, l’accessibilité et le référencement naturel.
La seconde dimension porte sur la mise en forme visuelle grâce aux feuilles de style.
Les questions abordent la gestion des couleurs, des polices, des espacements internes et externes, ainsi que des dimensions des éléments.
Ces notions permettent de transformer un contenu brut en une interface claire, cohérente et agréable à consulter.
Le positionnement et l’alignement des éléments sont également des points clés, indispensables pour concevoir des mises en page équilibrées et adaptées aux différents écrans.
Un autre aspect important concerne l’interaction et l’ergonomie.
Les propriétés permettant de masquer des éléments, de gérer les formulaires ou d’améliorer l’accessibilité montrent comment rendre une page plus fonctionnelle et plus compréhensible pour l’utilisateur final.
L’utilisation d’éléments sémantiques renforce également la qualité globale du code et facilite son interprétation par les navigateurs et les outils d’assistance.
Travailler ces QCM permet ainsi de développer une compréhension théorique solide tout en s’entraînant à reconnaître les bonnes pratiques.
C’est un excellent moyen de s’auto-évaluer, de corriger ses erreurs et de se préparer efficacement à des examens, concours ou projets concrets liés au web.
Conclusion
Ces QCM constituent un support pédagogique complet pour consolider les bases du HTML et du CSS.
Ils permettent d’ancrer les notions essentielles liées à la structure, à la présentation et à l’organisation des pages web.
En s’entraînant régulièrement, l’apprenant renforce sa logique, gagne en précision et développe une vision plus claire du fonctionnement du web côté interface.
Cette progression graduelle favorise la confiance et prépare efficacement à des niveaux plus avancés du développement front-end.
Une pratique continue reste la clé pour transformer ces connaissances théoriques en compétences durables et opérationnelles.
