QCM HTML / CSS – Partie 34

Questions pratiques pour testez vos connaissances sur le langage HTML à savoir l’utilisation du code HTML, structurer une page web en HTML, organiser les éléments d’une page Web, etc. Testez votre connaissance et travaillez sur les questions que vous trompez le plus souvent.
 
 

1. Quelle méthode permet de charger un fichier JavaScript de manière asynchrone pour ne pas bloquer le rendu de la page ?

A async

B defer

C onload

D lazyload

A
L’attribut async est utilisé dans la balise <script> pour charger le fichier JavaScript de manière asynchrone. Cela permet de ne pas bloquer le rendu de la page pendant le chargement du script.

 

 

2. Quelle propriété CSS permet de faire un zoom sur un élément au survol ?

A transform: scale()

B zoom: 1.5;

C hover: zoom-in;

D transform: enlarge()

A
La propriété transform: scale() permet d’agrandir ou de réduire un élément. Par exemple, transform: scale(1.1); permet de zoomer légèrement l’élément lors du survol.

 

 

3. Quelle propriété CSS permet de rendre une image responsive et de la faire s’adapter à la taille de son conteneur ?

A max-width: 100%;

B width: auto;

C img-responsive: true;

D flex-size: 100%;

A
La propriété max-width: 100%; permet de rendre une image responsive en s’assurant qu’elle ne dépasse jamais la largeur de son conteneur tout en préservant ses proportions.

 

 
 

4. Quelle balise HTML permet de créer un champ de formulaire permettant de saisir un nombre décimal avec une validation automatique ?

A <input type="decimal">

B <input type="number" step="any">

C <input type="float">

D <input type="range" step="0.01">

B
L’attribut step="any" permet à l’élément <input type="number"> d’accepter n’importe quel nombre décimal, avec une validation intégrée qui assure que la valeur entrée est un nombre valide.

 

 

5. Quelle propriété CSS permet d’ajouter des styles uniquement sur les écrans de petite taille (mobile-first) ?

A @media screen and (max-width: 1000px)

B @media (min-width: 600px)

C @media (max-width: 600px)

D @media screen and (min-width: 100px)

C
La règle @media (max-width: 600px) permet d’appliquer des styles uniquement sur les écrans de taille inférieure ou égale à 600px, ce qui est typiquement utilisé pour les designs responsives mobile-first.

 

 

6. Quelle syntaxe HTML est utilisée pour créer un lien qui permet d’appeler un numéro de téléphone directement depuis un appareil mobile ?

A <a href="tel:1234567890">Appeler</a>

B <a href="call:1234567890">Appeler</a>

C <a href="phone:1234567890">Appeler</a>

D <a href="tel:+1234567890">Appelez-nous</a>

A
L’attribut href="tel:1234567890" crée un lien qui, lorsqu’il est cliqué sur un appareil mobile, ouvre l’application téléphone pour appeler le numéro spécifié.

 

 

7. Quelle est la balise HTML qui permet de structurer du texte en tant que citation longue ?

A <quote>

B <q>

C <cite>

D <blockquote>

D
La balise <blockquote> est utilisée pour indiquer une citation longue, généralement incluse avec un retrait visuel dans le texte. Exemple:

Albert Einstein a dit :

La vie, c’est comme une bicyclette, il faut avancer pour ne pas perdre l’équilibre.

 

 
 

8. Quelle propriété CSS permet de créer une grille à 3 colonnes égales ?

A grid-columns: 3;

B grid-template-columns: 1fr 1fr 1fr;

C grid-layout: 3 columns;

D grid-template-columns: 33% 33% 33%;

B
grid-template-columns: 1fr 1fr 1fr; crée trois colonnes de largeur égale dans un conteneur CSS Grid, où fr signifie une fraction de l’espace disponible. Voir un exemple complet.

 

 

9. Quelle balise HTML permet d’ajouter un fichier audio avec des contrôles (lecture, pause, volume) sur la page ?

A <audio controls>

B <media controls>

C <sound controls>

D <music controls>

A
La balise <audio controls> permet d’inclure un fichier audio sur la page, avec des contrôles natifs comme lecture, pause, et volume.

 

 

10. Quelle balise HTML permet d’ajouter un texte d’indication dans un champ de saisie de texte ?

A placeholder

B label

C hint

D prompt

A
L’attribut placeholder dans un champ de formulaire <input> affiche un texte d’indication à l’intérieur du champ jusqu’à ce que l’utilisateur saisisse quelque chose. Exemple:

<input type="email" placeholder="Entrez votre adresse email">

Sortie:

 

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *