L
e développement web avancé repose sur une compréhension fine des mécanismes de mise en forme et de structuration des pages.
HTML et CSS ne servent pas uniquement à afficher du contenu, mais permettent aussi de créer des interfaces précises, accessibles et adaptées aux usages modernes.
Pour les étudiants, les développeurs en formation ou les candidats à des examens techniques, maîtriser ces notions constitue un véritable atout.
Cette page s’intéresse aux concepts plus approfondis du design web, notamment les sélecteurs complexes, les pseudo-éléments, la gestion de l’ordre visuel et les unités relatives.
Ces notions jouent un rôle essentiel dans la création d’interfaces claires et ergonomiques.
L’objectif est d’aider l’apprenant à dépasser les bases et à comprendre comment les navigateurs interprètent et organisent le contenu, afin de produire des pages professionnelles et bien structurées.
Le développement web avancé repose sur une compréhension fine des mécanismes de mise en forme et de structuration des pages.
HTML et CSS ne servent pas uniquement à afficher du contenu, mais permettent aussi de créer des interfaces précises, accessibles et adaptées aux usages modernes.
Pour les étudiants, les développeurs en formation ou les candidats à des examens techniques, maîtriser ces notions constitue un véritable atout.
Cette page s’intéresse aux concepts plus approfondis du design web, notamment les sélecteurs complexes, les pseudo-éléments, la gestion de l’ordre visuel et les unités relatives.
Ces notions jouent un rôle essentiel dans la création d’interfaces claires et ergonomiques.
L’objectif est d’aider l’apprenant à dépasser les bases et à comprendre comment les navigateurs interprètent et organisent le contenu, afin de produire des pages professionnelles et bien structurées.
QCM
1
Corrigé
Quel sélecteur cible tous les éléments <p> qui suivent immédiatement un élément <h2> ?
A. h2 p
B. h2 > p
C. h2 + p
D. h2 ~ p
Afficher la réponse
Cliquez pour voir la correction
Quelle propriété CSS permet de définir l'ordre d'affichage d'un élément dans un conteneur Flex ou Grid ?
A. z-index
B. order
C. flex-index
D. display-order
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La propriété 'order' permet de réorganiser visuellement les éléments sans modifier le HTML.
QCM
3
Corrigé
Quel pseudo-élément CSS est utilisé pour insérer du contenu avant le contenu d'un élément ?
A. ::first-line
B. ::after
C. ::before
D. ::marker
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
::before est utilisé avec la propriété 'content' pour ajouter du style ou du texte décoratif.
QCM
4
Corrigé
Que fait la propriété CSS 'box-shadow: 5px 10px 8px #888888;' ?
A. Ajoute une bordure de 5px
B. Ajoute une ombre portée à l'élément
C. Définit le rayon des coins
D. Change l'opacité du bloc
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle définit les décalages horizontal/vertical, le flou et la couleur de l'ombre.
QCM
5
Corrigé
Quelle balise HTML est utilisée pour définir une liste de termes et leurs descriptions ?
A. <ul>
B. <ol>
C. <dl>
D. <list>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<dl> signifie 'Description List', utilisée avec <dt> (terme) et <dd> (description).
QCM
6
Corrigé
Quelle unité CSS est relative à la taille de la police de l'élément parent ?
A. rem
B. px
C. em
D. vh
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Contrairement au 'rem' (racine), le 'em' est relatif à la taille de police du parent direct.
QCM
7
Corrigé
Comment forcer un texte à rester sur une seule ligne sans jamais revenir à la ligne ?
A. text-wrap: none;
B. white-space: nowrap;
C. line-break: forbidden;
D. overflow: hidden;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'white-space: nowrap' empêche le texte de s'adapter à la largeur du conteneur.
QCM
8
Corrigé
Quelle propriété CSS permet de lisser les polices sur certains navigateurs ?
A. text-rendering
B. font-smoothing
C. font-style
D. smooth-text
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'text-rendering: optimizeLegibility' aide à améliorer le rendu visuel des caractères.
QCM
9
Corrigé
Quel attribut HTML est utilisé pour spécifier la langue d'un document ou d'un élément ?
A. language
B. lang
C. xml:lang
D. locale
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'lang' est crucial pour l'accessibilité et les moteurs de recherche.
QCM
10
Corrigé
Quel sélecteur CSS cible les éléments qui n'ont pas d'enfants (ni texte, ni balise) ?
A. :no-child
B. :void
C. :empty
D. :blank
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La pseudo-classe ':empty' cible les éléments totalement vides.
QCM
11
Corrigé
Quelle est la fonction de la balise <abbr> en HTML ?
A. Mettre un texte en gras
B. Définir une abréviation ou un acronyme
C. Créer un lien hypertexte
D. Insérer une citation
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle permet de donner la signification complète via l'attribut 'title'.
QCM
12
Corrigé
Quelle propriété CSS permet de contrôler l'aspect visuel des bordures d'un tableau vide ?
A. empty-cells
B. border-empty
C. table-layout
D. visibility
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'empty-cells: hide;' permet de masquer les bordures des cellules sans contenu.
QCM
13
Corrigé
Quel type d'input HTML5 permet de restreindre la saisie à un nombre ?
A. <input type='digit'>
B. <input type='number'>
C. <input type='integer'>
D. <input type='tel'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'input 'number' permet aussi d'utiliser les attributs min, max et step.
QCM
14
Corrigé
En CSS, que fait 'background-attachment: fixed;' ?
A. L'image d'arrière-plan ne bouge pas pendant le défilement
B. L'image couvre tout l'écran
C. L'image se répète à l'infini
D. L'image est centrée horizontalement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cela crée un effet de parallaxe simple où le contenu défile sur une image fixe.
QCM
15
Corrigé
Quelle est la valeur par défaut de 'flex-direction' ?
A. column
B. row-reverse
C. row
D. stacked
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, les éléments d'un conteneur flex se placent horizontalement (en ligne).
QCM
16
Corrigé
Quelle balise HTML est utilisée pour spécifier des ressources d'images alternatives ?
A. <source>
B. <picture>
C. <imgset>
D. <media>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<picture> permet de charger différentes images selon la taille de l'écran (Art Direction).
QCM
17
Corrigé
Quelle propriété CSS permet de définir si le texte est coupé avec des points de suspension ?
A. text-overflow: ellipsis;
B. text-cut: true;
C. overflow-style: dots;
D. word-clip: ellipsis;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Utilisé avec 'overflow: hidden' et 'white-space: nowrap', il ajoute '...' en fin de ligne.
QCM
18
Corrigé
Que signifie la valeur 'pointer-events: none;' en CSS ?
A. L'élément est invisible
B. L'élément ne répond plus aux clics de souris
C. Le curseur devient une main
D. L'élément est désactivé dans le formulaire
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'élément devient 'transparent' pour les interactions souris (on clique à travers).
QCM
19
Corrigé
Quelle propriété CSS permet de créer des colonnes de texte comme dans un journal ?
A. column-count
B. text-columns
C. flex-columns
D. grid-template-columns
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'column-count' divise automatiquement un bloc de texte en plusieurs colonnes fluides.
QCM
20
Corrigé
En HTML5, quel attribut est utilisé pour stocker des données personnalisées ?
A. custom-*
B. data-*
C. id-*
D. meta-*
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les attributs 'data-nom' permettent de stocker des infos récupérables en JS ou CSS.
Mots & Définitions
Consultez les définitions des termes importants.
Le sélecteur adjacent permet de cibler un élément qui suit immédiatement un autre élément spécifique. Il est utilisé pour appliquer un style précis dans un contexte très ciblé. Cela aide à structurer finement l’apparence d’une page.
La propriété order permet de modifier l’ordre visuel des éléments dans un conteneur flex ou grid. Elle agit uniquement sur l’affichage, sans changer la structure HTML. C’est un outil puissant pour organiser une interface de manière flexible.
Les pseudo-éléments permettent de styliser des parties spécifiques d’un élément ou d’insérer du contenu décoratif. Ils sont souvent utilisés pour enrichir l’interface sans modifier le HTML. Cela améliore la séparation entre contenu et présentation.
Box-shadow permet d’ajouter une ombre portée autour d’un élément. Elle contribue à créer une hiérarchie visuelle et un effet de profondeur. Cette propriété améliore l’esthétique et la lisibilité des interfaces.
Une liste de définition est utilisée pour associer des termes à leurs descriptions. Elle est adaptée aux glossaires et contenus explicatifs. Elle apporte une structure sémantique claire au document.
L’unité em est relative à la taille de la police de l’élément parent. Elle permet des mises en page flexibles et cohérentes. Son utilisation favorise l’adaptabilité du design.
La propriété white-space contrôle la gestion des espaces et des retours à la ligne dans un texte. Elle permet de forcer ou d’empêcher le passage à la ligne. C’est un réglage important pour l’affichage du contenu textuel.
L’attribut lang indique la langue d’un document ou d’un élément. Il améliore l’accessibilité et l’interprétation par les navigateurs et lecteurs d’écran. C’est un élément clé pour les sites multilingues.
Le DOM représente la structure hiérarchique d’une page web. Il permet d’accéder et de manipuler les éléments via des scripts ou des styles. Comprendre le DOM est essentiel pour le développement web moderne.
Les attributs data-* permettent de stocker des données personnalisées dans le HTML. Ces données peuvent être utilisées par le CSS ou le JavaScript. Ils facilitent la communication entre structure et comportement.
À propos de ce QCM
L
es QCM proposés abordent des notions avancées du HTML et du CSS, indispensables pour concevoir des interfaces web modernes et efficaces.
Les sélecteurs CSS, qu’ils soient adjacents ou conditionnels, permettent de cibler précisément les éléments selon leur position ou leur état.
Cette précision offre un contrôle fin sur l’apparence sans alourdir la structure HTML.
Les pseudo-éléments et propriétés visuelles, comme les ombres portées ou la gestion du débordement, contribuent à enrichir l’interface tout en respectant les bonnes pratiques.
Ils permettent d’ajouter des détails graphiques sans compromettre la lisibilité du code.
Les propriétés liées au texte, telles que la gestion des espaces ou des coupures, jouent un rôle clé dans le confort de lecture.
La mise en page flexible est également au cœur de ces QCM.
Les propriétés liées à Flexbox et aux unités relatives permettent d’organiser les éléments de manière dynamique, indépendamment de l’ordre du code.
Cette logique est essentielle pour créer des designs adaptables à différentes tailles d’écran et contextes d’utilisation.
Les balises et attributs HTML abordés renforcent la dimension sémantique et interactive des pages.
Ils améliorent l’accessibilité, la structuration du contenu et la communication entre HTML, CSS et scripts.
Enfin, la compréhension du DOM et des données personnalisées prépare l’apprenant à des usages plus avancés du développement front-end.
Ces QCM favorisent ainsi une montée en compétence progressive, une auto-évaluation efficace et une préparation solide aux examens ou projets professionnels.
Conclusion
C
ette série de QCM offre une approche approfondie des concepts avancés du HTML et du CSS.
Elle permet de consolider les connaissances techniques tout en développant une vision plus structurée du design web.
En s’entraînant régulièrement, l’apprenant affine son raisonnement, améliore sa maîtrise des outils et gagne en autonomie.
Ces compétences sont essentielles pour réussir des évaluations, concevoir des interfaces modernes et évoluer vers des projets web plus complexes.
La compréhension de ces notions constitue une base solide pour tout parcours en développement front-end.
