QCM HTML / CSS – Partie 49

mars 2, 2025mars 2, 2025 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. Si vous voulez créer une section où le contenu peut être modifié en temps réel par l’utilisateur, quelle balise serait la plus appropriée ?

A <div contenteditable="true">

B <input type="text">

C <textarea>

D <editable>

L’attribut contenteditable="true" permet à un élément HTML (comme un <div>) de devenir éditable. L’utilisateur peut alors modifier le contenu de cette section directement sur la page, ce qui est utile pour les applications qui nécessitent des mises à jour en temps réel.

2. Quelle est la différence principale entre les balises `<strong>` et `<b>` ?

A Aucune, ce sont deux balises identiques.

B <strong> marque le texte avec une signification forte, tandis que <b> applique juste un style gras.

C <strong> est utilisée pour les liens et <b> pour les images.

D <strong> met le texte en italique et <b> le met en gras.

La balise <strong> est utilisée pour indiquer une importance ou une emphase sémantique, tandis que <b> est purement stylistique et sert simplement à rendre le texte gras. Cela fait une différence dans la compréhension par les moteurs de recherche.

3. Tu veux appliquer un style à tous les éléments <section> qui contiennent au moins un élément <h3>. Quel sélecteur CSS utiliserais-tu ?

A section > h3

B section h3

C section:has(h3)

D section h3 + section

Le sélecteur section:has(h3) permet de cibler tous les éléments <section> qui contiennent au moins un élément <h3>. Le sélecteur :has() est très puissant mais encore en développement dans certains navigateurs. Si ton projet doit être compatible avec tous les navigateurs, tu devras utiliser JavaScript pour obtenir ce comportement.

4. Imaginons que tu souhaites cibler tous les éléments <h1> dans une page, mais uniquement si chaque <h1> est précédé d’un élément <p> contenant un certain texte. Quel sélecteur utiliserais-tu ?

A p:contains("texte") + h1

B p + h1:contains("texte")

C h1:preceding(p:contains("texte"))

D p:contains("texte") ~ h1

p:contains("texte") ~ h1 permet de cibler tous les éléments <h1> qui sont précédés d’un <p> contenant le texte « texte ». Le ~ est un sélecteur de frère général et permet de sélectionner tous les éléments <h1> qui suivent un <p> avec le texte spécifié, indépendamment du nombre d’éléments entre eux.

5. Tu as une liste de produits avec des éléments <div>, mais tu veux cibler seulement le deuxième <div> dans une série d’éléments frères. Quel sélecteur CSS utiliserais-tu ?

A div:nth-child(2)

B div:nth-of-type(2)

C div:first-child + div

D div + div:nth-child(2)

Le sélecteur div:nth-of-type(2) permet de cibler le deuxième élément <div> parmi une série d’éléments du même type, même si d’autres éléments sont présents avant lui. Le nth-child pourrait ne pas fonctionner si d’autres types d’éléments existent entre les <div>, tandis que nth-of-type ignore le type d’éléments intercalés.

6. Tu veux appliquer un style à tous les éléments <li> d’une liste, mais uniquement à ceux qui occupent les positions impaires (1er, 3e, 5e, etc.). Quel sélecteur CSS utiliserais-tu ?

A li:nth-child(odd)

B li:nth-of-type(odd)

C li:nth-child(2n+1)

D li:nth-child(2n)

Le sélecteur li:nth-child(2n+1) sélectionne les éléments <li> qui occupent une position impair dans la liste. Le terme 2n+1 signifie qu’il sélectionne tous les éléments pour lesquels l’index est un nombre impair, à commencer par le premier élément (n=0).

7. Quelle est la différence principale entre les balises <div> et <section> ?

A <div> est un conteneur générique sans signification sémantique, tandis que <section> marque une section de contenu thématique avec une signification sémantique.

B <div> est utilisée uniquement pour les images, tandis que <section> est pour les textes.

C <div> est une balise interactive, tandis que <section> est statique.

D Il n’y a aucune différence, les deux balises font exactement la même chose.

La balise <div> est utilisée pour regrouper des éléments sans indiquer de signification particulière. En revanche, la balise <section> a une signification sémantique et est utilisée pour structurer un document en différentes sections logiques de contenu, comme un chapitre, une page d’articles, etc. Cela aide à l’accessibilité et au référencement.

8. Tu as plusieurs boutons sur une page avec les classes .btn et certaines ont un attribut disabled. Tu veux cibler tous les boutons désactivés qui possèdent la classe .btn. Quel sélecteur CSS utiliserais-tu ?

A .btn:disabled

B .btn[disabled]

C button.btn:disabled

D button:disabled.btn

Le sélecteur .btn:disabled cible tous les éléments ayant à la fois la classe .btn et l’attribut disabled. La combinaison de la classe et de l’attribut permet de cibler précisément les boutons qui sont désactivés.

9. Tu souhaites appliquer un style à tous les éléments <h2> qui sont suivis immédiatement par un élément <p>. Quel sélecteur CSS utiliserais-tu ?

A h2 + p

B h2 > p

C h2 ~ p

D h2 + p:after

Le sélecteur h2 + p sélectionne un élément <p> qui suit immédiatement un <h2>. C’est un sélecteur de frère immédiat. Cela signifie que pour que le style soit appliqué, le <p> doit être le premier élément frère immédiatement après le <h2>.

10. Tu veux cibler tous les éléments <div> qui contiennent un seul élément <span> à l’intérieur. Quel sélecteur CSS utiliserais-tu ?

A div:has(span)

B div > span

C div > span:only-child

D div:only-child span

Le sélecteur div > span:only-child permet de cibler un <span> qui est l’unique enfant direct d’un élément <div>. Cela te permet de cibler spécifiquement les <div> qui contiennent uniquement un <span>. Le sélecteur :only-child s’assure que le <span> est l’enfant exclusif du parent.

QCMs qui pourraient vous intéresser :

1. Si vous voulez créer une section où le contenu peut être modifié en temps réel par l’utilisateur, quelle balise serait la plus appropriée ?

2. Quelle est la différence principale entre les balises <strong> et <b> ?

3. Tu veux appliquer un style à tous les éléments <section> qui contiennent au moins un élément <h3>. Quel sélecteur CSS utiliserais-tu ?

4. Imaginons que tu souhaites cibler tous les éléments <h1> dans une page, mais uniquement si chaque <h1> est précédé d’un élément <p> contenant un certain texte. Quel sélecteur utiliserais-tu ?

5. Tu as une liste de produits avec des éléments <div>, mais tu veux cibler seulement le deuxième <div> dans une série d’éléments frères. Quel sélecteur CSS utiliserais-tu ?

6. Tu veux appliquer un style à tous les éléments <li> d’une liste, mais uniquement à ceux qui occupent les positions impaires (1er, 3e, 5e, etc.). Quel sélecteur CSS utiliserais-tu ?

7. Quelle est la différence principale entre les balises <div> et <section> ?

8. Tu as plusieurs boutons sur une page avec les classes .btn et certaines ont un attribut disabled. Tu veux cibler tous les boutons désactivés qui possèdent la classe .btn. Quel sélecteur CSS utiliserais-tu ?

9. Tu souhaites appliquer un style à tous les éléments <h2> qui sont suivis immédiatement par un élément <p>. Quel sélecteur CSS utiliserais-tu ?

10. Tu veux cibler tous les éléments <div> qui contiennent un seul élément <span> à l’intérieur. Quel sélecteur CSS utiliserais-tu ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 53

QCM HTML / CSS – Partie 23

QCM HTML / CSS – Partie 13

Laisser un commentaire Annuler la réponse

2. Quelle est la différence principale entre les balises `<strong>` et `<b>` ?