WayToLearnX

WayToLearnX

qcm-html-css-min
QCM HTML / CSS 

QCM HTML / CSS – Partie 47

Thomas Aucun commentaire

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 balise HTML est idéale pour afficher un fichier PDF directement dans une page web ?

A <embed>

B <object>

C <iframe>

D <pdf>

B
La balise <object> peut être utilisée pour intégrer un fichier externe dans une page, comme un PDF. Cette balise permet de spécifier un type de fichier (comme application/pdf) et de rendre l’objet interactif sur la page. Exemple:

<object data="file.pdf" type="application/pdf" width="600" height="400">  
  <p>Votre navigateur ne prend pas en charge les fichiers PDF. Vous pouvez <a href="example.pdf">télécharger le PDF ici</a></p>  
</object>

 

 

2. Quelle balise HTML est utilisée pour spécifier une section de code informatique sur une page web ?

A <code>

B <script>

C <pre>

D <program>

A
La balise <code> est utilisée pour marquer du code informatique dans un document HTML. Elle est souvent accompagnée de la balise <pre> pour préserver l’indentation et les sauts de ligne du code.

 

 

3. Quelle balise permet de mettre en évidence un texte en italique ?

A <i>

B <em>

C <italic>

D <span>

B
La balise <em> est utilisée pour indiquer que le texte qu’elle contient doit être mis en valeur, généralement en italique. Contrairement à <i>, qui est purement stylistique, <em> a une signification sémantique et peut être utilisée pour insister sur un mot ou une phrase.

 

 
 

4. Tu veux appliquer un style à tous les éléments <h1>, <h2>, et <h3> en même temps. Quelle est la bonne syntaxe CSS ?

A h1, h2, h3 { color: red; }

B h1 + h2 + h3 { color: red; }

C h1 h2 h3 { color: red; }

D h1:h2:h3 { color: red; }

A
La syntaxe correcte pour appliquer un style à plusieurs éléments en même temps est de les séparer par des virgules, comme dans h1, h2, h3. Cela appliquera le style à tous les éléments <h1>, <h2>, et <h3>. Les autres options sont soit incorrectes, soit appliquent un style basé sur une relation de sélection qui n’est pas ce que tu cherches.

 

 

5. Tu veux appliquer un style uniquement au dernier élément <li> dans une liste, sans savoir combien d’éléments la liste contient. Quel sélecteur CSS utiliserais-tu ?

A li:last-of-type

B li:last-child

C li:nth-last-child(1)

D li:last

B
Le sélecteur li:last-child permet de cibler le dernier élément <li> d’un parent, quelle que soit la structure de la liste. Si tu veux cibler spécifiquement le dernier <li> parmi d’autres types d’éléments dans un parent, tu pourrais utiliser li:last-of-type.

 

 

6. Tu veux appliquer un style à tous les éléments <div> sauf ceux qui ont la classe .selected. Quel sélecteur CSS utiliserais-tu ?

A div:not(.selected)

B div.selected

C div:not.selected

D div :not(.selected)

A
Le sélecteur div:not(.selected) permet de cibler tous les éléments <div> qui n’ont pas la classe .selected. Cela exclut les éléments <div> avec cette classe de la sélection, en appliquant un style à tous les autres.

 

 
 

7. Quel sélecteur CSS permet de cibler tous les éléments <div> qui sont cachés (par exemple, avec display: none) ?

A div:hidden

B div[hidden]

C div:visible

D Il n’existe pas de sélecteur CSS pour cela

B
Le sélecteur div[hidden] cible tous les éléments <div> qui ont l’attribut hidden, ce qui indique qu’ils sont cachés par le navigateur. Il n’existe pas de sélecteur CSS qui cible directement les éléments cachés par display: none, mais tu peux utiliser JavaScript pour détecter cette condition.

 

 

8. Tu souhaites appliquer un style à un champ de formulaire uniquement lorsqu’il a un focus et que son contenu est vide. Quel sélecteur CSS utiliserais-tu ?

A input:focus:empty

B input:focus

C input:empty:focus

D input:focus:not(:empty)

A
Le sélecteur input:focus:empty permet de cibler un champ de formulaire <input> qui est à la fois en focus et vide. Cela fonctionne bien pour des champs comme des zones de texte ou des champs de saisie où tu veux appliquer un style si le champ est vide et en focus.

 

 

9. Imaginons que tu aies plusieurs boutons, certains ayant la classe btn-primary et d’autres la classe btn-secondary. Tu souhaites appliquer un style uniquement aux boutons qui ont les deux classes. Quel sélecteur CSS utiliserais-tu ?

A .btn-primary .btn-secondary

B .btn-primary + .btn-secondary

C .btn-primary.btn-secondary

D .btn-primary, .btn-secondary

C
Le sélecteur .btn-primary.btn-secondary cible les éléments qui ont les deux classes (btn-primary et btn-secondary) en même temps. Contrairement à un simple , qui sélectionne les éléments avec une classe ou l’autre, ce sélecteur cible spécifiquement les éléments qui possèdent ces deux classes.

 

 
 

10. Quelle balise est utilisée pour ajouter un encadré autour d’une image, avec une légende ?

A <figure>

B <image>

C <caption>

D <frame>

A
La balise <figure> est utilisée pour regrouper une image avec sa légende, qui est définie à l’intérieur de la balise <figcaption>. Cela permet de semantiquement structurer l’image et la légende ensemble, tout en offrant des options de style supplémentaires. Exemple:

<figure>  
  <img src="image.jpg" width="600" height="400">  
  <figcaption>Voici la légende de l'image : Une belle vue de la mer.</figcaption>  
</figure>

 

 
QCMs qui pourraient vous intéresser :

Vous pourrez aussi aimer

qcm-html-css-min

QCM HTML / CSS – Partie 32

Thomas 0
qcm-html-css-min

QCM HTML / CSS – Partie 51

Thomas 0
qcm-html-css-min

QCM HTML / CSS – Partie 26

Thomas 0

Laisser un commentaire

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