QCM HTML / CSS – Partie 46

mars 1, 2025mars 1, 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. Quelle balise permet de grouper des éléments de formulaire ?

A <fieldset>

B <form-group>

C <group>

D <fieldset-group>

La balise <fieldset> en HTML est utilisée pour regrouper des éléments de formulaire afin de les organiser visuellement. Elle crée un conteneur qui peut être utilisé pour regrouper plusieurs champs de formulaire comme des champs de texte, des boutons radio, des cases à cocher, etc. Elle est souvent utilisée avec la balise <legend>, qui permet d’ajouter un titre ou une description au groupe d’éléments. Exemple:

<form>  
  <fieldset>    
    <legend>Informations personnelles</legend>    
    <label for="nom">Nom:</label>    
    <input type="text" id="nom" name="nom">        
    <label for="email">Email:</label>    
    <input type="email" id="email" name="email">  
  </fieldset>
</form>

2. Quelle balise HTML permet de définir une image cliquable ?

A <link>

B <a>

C <button>

D <img>

La balise <a> permet de définir un lien cliquable, et vous pouvez l’utiliser pour rendre une image cliquable en y imbriquant une balise <img>.

3. Quelle balise permet de définir une zone d’insertion de code source sur une page web ?

A <code>

B <pre>

C <script>

D <source>

La balise <pre> en HTML est utilisée pour afficher du texte préformaté. Le contenu à l’intérieur de cette balise est affiché tel quel, respectant les espaces, les sauts de ligne et l’indentation que vous avez utilisés dans votre code. Cela signifie que le texte à l’intérieur de <pre> est présenté exactement comme il apparaît dans le code source, ce qui est utile pour afficher du code, des poèmes, des tableaux de données ou toute autre information où l’espacement est important.

4. Quelle balise HTML permet d’afficher une barre de progression ?

A <progress>

B <meter>

C <bar>

D <indicator>

La balise <progress> permet de créer une barre de progression. Elle peut être utilisée pour afficher visuellement l’état d’une tâche en cours, par exemple, lors du téléchargement d’un fichier.

5. Quel sélecteur CSS permet de cibler tous les éléments de type <p> qui sont des enfants d’un <div> ?

A div + p

B div ~ p

C div > p

D div p

Le sélecteur div p sélectionne tous les éléments <p> à l’intérieur d’un élément <div>, que ce soit directement ou indirectement (ils peuvent être des enfants, petits-enfants, etc.). Si tu veux uniquement cibler les enfants directs, il faut utiliser div > p.

6. Tu as une liste d’articles, et tu veux appliquer un style spécial uniquement au premier article de la liste. Quel sélecteur CSS utiliserais-tu ?

A li:first-child

B li:first-of-type

C ul:first-child

D li:nth-child(1)

Le sélecteur li:first-of-type permet de cibler le premier élément <li> parmi les autres éléments de type li dans une liste, indépendamment de sa position dans la liste par rapport à d’autres types d’éléments. Si tu utilises :first-child, cela fonctionnerait uniquement si l’élément est aussi le premier enfant de son parent, ce qui peut ne pas être le cas dans des listes où il y a d’autres éléments avant les <li>.

7. Tu veux appliquer un style à tous les éléments qui ont un attribut data-status et que cet attribut a pour valeur « active ». Quel sélecteur CSS utiliserais-tu ?

A [data-status="active"]

B [data-status^="active"]

C [data-status*="active"]

D [data-status$="active"]

Le sélecteur [data-status="active"] permet de cibler tous les éléments ayant un attribut data-status avec la valeur exacte « active ». Les autres options (^, *, $) sont utilisées pour des correspondances partielles : ^ correspond au début de l’attribut, * correspond à n’importe où dans l’attribut, et $ correspond à la fin de l’attribut. Voir un exemple complet.

8. Imaginons que tu souhaites appliquer un style à tous les éléments <p> qui contiennent un texte entre parenthèses. Quel sélecteur CSS utiliserais-tu pour ce cas ?

A p:contains("(")

B p:has("(")

C p:empty

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

Il n’existe pas de sélecteur CSS natif qui permet de cibler des éléments contenant un texte spécifique comme « (« , et CSS ne permet pas de faire une recherche de texte dans son contenu. Cependant, tu peux utiliser JavaScript pour cette tâche. :contains() était une pseudo-classe jQuery et non un sélecteur CSS pur.

9. Tu veux appliquer un effet de couleur au survol de tous les éléments `<button>` sauf un bouton particulier, ayant un `id="special"`. Quelle combinaison de sélecteurs CSS utiliserais-tu ?

A button:hover, button#special:hover

B button:hover:not(#special)

C button:hover, #special

D button:not(#special):hover

Le sélecteur button:hover:not(#special) permet de cibler tous les éléments <button> en survol, sauf celui ayant l’id= »special ». :not() est un sélecteur négatif qui exclut les éléments ayant l’ID #special du style appliqué aux boutons en survol.

10. Quelle balise permet d’ajouter des informations sur l’auteur d’un document HTML, généralement placée dans le <footer> ?

A <author>

B <address>

C <footer>

D <info>

La balise <address> est utilisée pour définir les informations de contact ou l’auteur d’un document. Bien que souvent placée dans le <footer>, cette balise peut être utilisée n’importe où pour mentionner des coordonnées, un nom d’auteur, un lien vers un site, etc. Exemple:

<address>  
  <p>Contactez-nous à :</p>  
  <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>  
  <p>Téléphone : +123 456 7890</p>  
  <p>Adresse : 123 Rue Exemple, Paris, France</p>  
</address>

QCMs qui pourraient vous intéresser :

1. Quelle balise permet de grouper des éléments de formulaire ?

2. Quelle balise HTML permet de définir une image cliquable ?

3. Quelle balise permet de définir une zone d’insertion de code source sur une page web ?

4. Quelle balise HTML permet d’afficher une barre de progression ?

5. Quel sélecteur CSS permet de cibler tous les éléments de type <p> qui sont des enfants d’un <div> ?

6. Tu as une liste d’articles, et tu veux appliquer un style spécial uniquement au premier article de la liste. Quel sélecteur CSS utiliserais-tu ?

7. Tu veux appliquer un style à tous les éléments qui ont un attribut data-status et que cet attribut a pour valeur « active ». Quel sélecteur CSS utiliserais-tu ?

8. Imaginons que tu souhaites appliquer un style à tous les éléments <p> qui contiennent un texte entre parenthèses. Quel sélecteur CSS utiliserais-tu pour ce cas ?

9. Tu veux appliquer un effet de couleur au survol de tous les éléments <button> sauf un bouton particulier, ayant un id="special". Quelle combinaison de sélecteurs CSS utiliserais-tu ?

10. Quelle balise permet d’ajouter des informations sur l’auteur d’un document HTML, généralement placée dans le <footer> ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 39

QCM HTML / CSS – Partie 30

QCM HTML / CSS – Partie 42

Laisser un commentaire Annuler la réponse

9. Tu veux appliquer un effet de couleur au survol de tous les éléments `<button>` sauf un bouton particulier, ayant un `id="special"`. Quelle combinaison de sélecteurs CSS utiliserais-tu ?