QCM : Développement d’interface web — 28 questions

Questions et réponses du QCM

1. Dans une règle CSS, quel est le rôle du bloc de déclaration associé au sélecteur ?

Il définit le style au moyen de paires propriété-valeur
Il détermine la priorité entre plusieurs feuilles de style
Il organise les éléments selon leur ordre dans le document
Il identifie les éléments auxquels appliquer la règle

Il définit le style au moyen de paires propriété-valeur

Explication

Le bloc de déclaration contient les paires propriété-valeur qui déterminent l’apparence de l’élément ciblé. Le sélecteur, en revanche, sert à identifier les éléments concernés par la règle.

2. Quelle contribution Tim Berners-Lee propose-t-il dans les années 1980 ?

Un serveur Web fondé sur le logiciel Nginx
Un réseau de smartphones consacré aux objets connectés
Un système de gestion de l’information qui deviendra le World Wide Web
Un langage de programmation destiné à remplacer le HTML

Un système de gestion de l’information qui deviendra le World Wide Web

Explication

Dans les années 1980, Tim Berners-Lee propose un système de gestion de l’information qui donnera naissance au World Wide Web. Nginx est un logiciel de serveur Web et ne correspond pas à cette contribution historique.

3. Que désigne l’acronyme WCAG dans le domaine de l’accessibilité Web ?

Un outil d’évaluation automatique des contrastes et des formulaires
Un langage de balisage destiné à structurer les pages accessibles
Un organisme chargé de normaliser les technologies du Web
Des directives pratiques et techniques pour rendre le contenu Web accessible

Des directives pratiques et techniques pour rendre le contenu Web accessible

Explication

Les WCAG sont des directives pratiques et techniques consacrées à l’accessibilité du contenu Web. Le W3C, en revanche, désigne l’organisme de normalisation souvent associé à ces recommandations.

4. Quels attributs faut-il associer à la balise img pour indiquer le chemin d’une image et fournir sa description ?

title pour le chemin et link pour la description
href pour le chemin et target pour la description
src pour le chemin et alt pour la description
path pour le chemin et label pour la description

src pour le chemin et alt pour la description

Explication

L’attribut src indique le chemin de l’image et alt fournit sa description textuelle. href et target concernent les liens, non les fonctions principales de la balise img.

5. Quelle écriture cible tous les éléments ayant la classe « important » en CSS ?

<important>
.important
#important
important

.important

Explication

Un point placé devant un nom désigne un sélecteur de classe en CSS. Le dièse cible un identifiant, tandis qu’un nom sans préfixe cible une balise HTML.

6. Quelle balise HTML sert à créer un hyperlien lorsqu’elle est associée à l’attribut href ?

p
a
img
li

a

Explication

La balise a transforme l’élément qu’elle enveloppe en lien, tandis que href précise l’adresse ciblée. La balise img sert à insérer une image et ne crée pas d’hyperlien par elle-même.

7. Dans une consultation d’une page Web, quel rôle distingue correctement le navigateur du serveur Web ?

Le navigateur interprète le code, tandis que le serveur peut utiliser Apache2 ou Nginx
Le navigateur héberge les fichiers, tandis que le serveur interprète les styles CSS
Le navigateur crée le réseau, tandis que le serveur transforme HTML en JavaScript
Le navigateur stocke les domaines, tandis que le serveur affiche les pages localement

Le navigateur interprète le code, tandis que le serveur peut utiliser Apache2 ou Nginx

Explication

Un navigateur comme Firefox interprète notamment le HTML, le CSS et le JavaScript, alors qu’un serveur Web peut reposer sur Apache2 ou Nginx. Le serveur n’est donc pas défini par l’affichage local de la page.

8. Quelle distinction entre les balises h1 à h6 et la balise p est correcte ?

h1 à h6 créent des liens, tandis que p indique leur destination
h1 à h6 insèrent des images, tandis que p définit leur description
h1 à h6 désignent des paragraphes hiérarchisés, tandis que p désigne un titre
h1 à h6 désignent des titres hiérarchisés, tandis que p désigne un paragraphe

h1 à h6 désignent des titres hiérarchisés, tandis que p désigne un paragraphe

Explication

Les balises h1 à h6 représentent des titres classés par importance décroissante, alors que p représente un paragraphe. La balise p n’est donc pas une balise de titre.

9. Quelle distinction décrit correctement jQuery par rapport à JavaScript ?

jQuery est une bibliothèque qui simplifie des opérations courantes en JavaScript.
jQuery est un format de stockage destiné à conserver des données dans le navigateur.
jQuery est un protocole réseau qui organise les échanges avec un serveur.
jQuery est un langage de programmation qui remplace JavaScript dans le navigateur.

jQuery est une bibliothèque qui simplifie des opérations courantes en JavaScript.

Explication

jQuery est une bibliothèque JavaScript conçue pour faciliter la manipulation du HTML, les événements, les animations et Ajax. La confondre avec le langage JavaScript sous-jacent constitue l’erreur principale.

10. Quel élément sémantique convient à un contenu autonome pouvant être compris indépendamment du reste de la page ?

nav
article
footer
aside

article

Explication

La balise article désigne un contenu autonome, comme une publication ou une fiche indépendante. Aside correspond plutôt à un contenu tangentiel associé au contenu principal.

11. Quels sont les quatre principes désignés par l’acronyme POUR en accessibilité Web ?

Perceptible, Orientable, Utilisable et Régulier
Précis, Organisé, Universel et Réactif
Protégé, Ouvert, Compréhensible et Réversible
Perceptible, Opérable, Compréhensible et Robuste

Perceptible, Opérable, Compréhensible et Robuste

Explication

POUR signifie Perceptible, Opérable, Compréhensible et Robuste, les quatre principes fondamentaux de l’accessibilité Web. Les autres combinaisons associent des qualités pertinentes mais ne correspondent pas à cet acronyme.

12. Un élément positionné doit être placé par rapport à la fenêtre du navigateur, même lors du défilement de la page. Quelle valeur faut-il utiliser ?

sticky
relative
absolute
fixed

fixed

Explication

La valeur fixed positionne l’élément par rapport au viewport, ce qui le rattache à la fenêtre du navigateur. La valeur absolute dépend plutôt de l’ancêtre positionné le plus proche.

13. Quelle fonction correspond principalement au CSS dans une page Web ?

Structurer le contenu au moyen de balises sémantiques
Transmettre les fichiers depuis un serveur Web
Exécuter la logique interactive de la page
Décrire la présentation des documents HTML ou XML

Décrire la présentation des documents HTML ou XML

Explication

Le CSS, créé en 1996, décrit la présentation des documents HTML ou XML. La structuration du contenu relève du HTML, tandis que l’exécution de scripts relève notamment de JavaScript.

14. Quelle balise définit un formulaire HTML destiné à collecter des données utilisateur ?

form
main
fieldset
article

form

Explication

La balise form définit le formulaire et son objectif général est de recueillir des données saisies par l’utilisateur. Main et article servent à structurer le contenu, tandis que fieldset regroupe des contrôles à l’intérieur d’un formulaire.

15. Quel est le rôle principal de JavaScript exécuté dans le navigateur ?

Fournir les ressources Web depuis le serveur
Organiser les colonnes et les lignes d’une page
Décrire la structure visuelle des pages Web
Ajouter de l’interactivité aux pages Web côté client

Ajouter de l’interactivité aux pages Web côté client

Explication

JavaScript s’exécute côté client dans le navigateur afin d’ajouter des comportements interactifs aux pages Web. La fourniture des ressources relève du serveur, tandis que la structure et la mise en page relèvent notamment du HTML et du CSS.

16. Un élément doit rester à sa place dans le flux tout en étant déplacé visuellement de quelques pixels. Quelle valeur de positionnement convient ?

static
relative
fixed
absolute

relative

Explication

La valeur relative conserve l’espace occupé par l’élément dans le flux tout en autorisant un décalage visuel. La valeur static correspond au positionnement normal et ne permet pas d’utiliser ce décalage de la même manière.

17. Quelle méthode permet d’enregistrer la valeur « sombre » sous la clé « thème » dans le stockage local ?

localStorage.clear('thème', 'sombre')
localStorage.setItem('thème', 'sombre')
localStorage.removeItem('thème', 'sombre')
localStorage.getItem('thème', 'sombre')

localStorage.setItem('thème', 'sombre')

Explication

La méthode setItem enregistre une valeur associée à une clé dans localStorage. getItem sert à lire une valeur, tandis que removeItem et clear servent à supprimer des données.

18. Comment se comporte un élément auquel la valeur sticky est appliquée pendant le défilement ?

Il conserve la position static pendant tout le défilement
Il reste fixed dès son apparition dans le document
Il est retiré du flux puis attaché à son parent
Il agit comme relative puis comme fixed après un seuil

Il agit comme relative puis comme fixed après un seuil

Explication

La position sticky se comporte d’abord comme relative, puis adopte un comportement comparable à fixed lorsqu’un seuil de défilement est atteint dans son conteneur. Elle ne devient donc pas fixe dès le chargement de la page.

19. Que signifie l’imbrication des éléments en HTML ?

Afficher un élément avant le document HTML
Placer un élément à l’intérieur d’un autre
Placer plusieurs éléments au même niveau
Répéter une balise dans une feuille de style

Placer un élément à l’intérieur d’un autre

Explication

L’imbrication consiste à placer des éléments HTML à l’intérieur d’autres éléments. Le fait de disposer des éléments au même niveau correspond plutôt à une juxtaposition.

20. Quelle distinction décrit correctement les opérateurs de comparaison et les opérateurs logiques en JavaScript ?

Les premiers calculent des valeurs, les seconds sélectionnent des éléments du DOM
Les premiers ajoutent des événements, les seconds exécutent les fonctions associées
Les premiers déclarent des variables, les seconds modifient leur portée
Les premiers testent une relation, les seconds combinent ou inversent des conditions

Les premiers testent une relation, les seconds combinent ou inversent des conditions

Explication

Les opérateurs de comparaison évaluent une relation entre des valeurs, alors que les opérateurs logiques combinent ou inversent des conditions. La déclaration des variables utilise notamment let, var et const, et ne définit pas ces deux familles d’opérateurs.

21. Que représente le DOM pour une page Web ?

Une collection de règles organisant les variables JavaScript
Un protocole chargé de transférer les ressources au navigateur
Un langage servant à définir les couleurs et les dimensions
Une représentation arborescente de sa structure HTML ou XML

Une représentation arborescente de sa structure HTML ou XML

Explication

Le DOM représente la structure HTML ou XML de la page sous forme d’un arbre que JavaScript peut parcourir et modifier. Il ne s’agit ni d’un langage de style ni d’un protocole de transfert.

22. Dans quel ordre faut-il généralement procéder pour réagir à un clic sur un élément avec JavaScript ?

Ajouter un écouteur, sélectionner l’élément, puis modifier le serveur
Exécuter le traitement, sélectionner l’élément, puis ajouter un écouteur
Sélectionner l’élément, ajouter un écouteur, puis exécuter le traitement
Modifier le DOM, exécuter le traitement, puis rechercher l’élément

Sélectionner l’élément, ajouter un écouteur, puis exécuter le traitement

Explication

Le script commence par sélectionner l’élément, lui associe ensuite un écouteur avec addEventListener, puis exécute le traitement lorsque le clic survient. Sans sélection préalable, l’écouteur ne peut pas être attaché à l’élément visé.

23. Dans quel ordre général apparaissent les grandes parties d’une page HTML fondamentale ?

DOCTYPE, head, body, puis html
head, DOCTYPE, body, puis html
html, body, DOCTYPE, puis head
DOCTYPE, html, head, puis body

DOCTYPE, html, head, puis body

Explication

Une page HTML fondamentale contient successivement la déclaration DOCTYPE, l’élément html, puis les éléments head et body. L’élément head ne remplace donc pas l’élément html et ne vient pas avant la déclaration initiale.

24. Comment faut-il caractériser le HTML dans le développement Web ?

Comme un langage de programmation qui exécute des scripts
Comme un langage de style qui règle les couleurs
Comme un langage de balisage qui encadre le contenu
Comme un logiciel serveur qui distribue les pages

Comme un langage de balisage qui encadre le contenu

Explication

Le HTML est un langage de balisage créé avec le Web en 1991 et ses balises encadrent le contenu. JavaScript correspond plutôt à un langage de programmation, tandis que le CSS décrit la présentation.

25. Quel niveau de conformité WCAG vise l’accessibilité maximale, mais peut être difficile à atteindre ?

AAA
POUR
AA
A

AAA

Explication

Le niveau AAA correspond au degré d’accessibilité maximal et peut être difficile à atteindre dans de nombreux contextes. Le niveau A concerne le socle de base, tandis qu'AA représente un niveau couramment recommandé pour les organisations.

26. Quelle technologie CSS convient pour organiser une mise en page selon des lignes et des colonnes ?

Une requête média
Le positionnement fixed
CSS Grid
Le positionnement sticky

CSS Grid

Explication

CSS Grid est conçu pour structurer une mise en page en lignes et en colonnes grâce à des propriétés comme grid-template-columns et gap. Les autres choix concernent le positionnement ou l’adaptation, pas la création d’une grille.

27. Quel élément des années 1960 et 1970 est considéré comme le précurseur de l’Internet ?

Le World Wide Web
Un navigateur Web
ARPANET
Le Web 2.0

ARPANET

Explication

ARPANET est le réseau précurseur de l’Internet développé dans les années 1960 et 1970. Le World Wide Web est apparu plus tard comme un système fonctionnant sur Internet.

28. Quelle différence de comportement distingue div de span en HTML ?

div crée un lien, tandis que span définit l’adresse ciblée
div est un conteneur de niveau bloc, tandis que span reste un conteneur en ligne
div collecte des données, tandis que span valide la soumission
div reste un conteneur en ligne, tandis que span commence sur une nouvelle ligne

div est un conteneur de niveau bloc, tandis que span reste un conteneur en ligne

Explication

La balise div est un conteneur générique de niveau bloc et commence sur une nouvelle ligne. Span est un conteneur en ligne, donc il ne provoque pas ce saut de ligne.

Révisez avec les flashcards

Mémorisez les réponses avec 64 flashcards sur Développement d’interface web.

Quel réseau des années 1960-1970 est le précurseur d'Internet ?

ARPANET

Qui a proposé le système qui deviendra le World Wide Web ?

Tim Berners-Lee

Dans quelle décennie Tim Berners-Lee a-t-il proposé le système du Web ?

Les années 1980

Voir les flashcards →

Approfondir avec la fiche

Consultez la fiche de révision complète sur Développement d’interface web.

Voir la fiche →

Cours similaires

Crée tes propres QCM

Importe ton cours et l'IA génère des QCM avec corrections en 30 secondes.

Générateur de QCM