L
es 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.
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
L
es 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
C
es 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.
