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 tu veux appliquer un style uniquement au premier paragraphe qui suit directement un div, quel sélecteur CSS utiliserais-tu ?
Adiv + p
Bdiv ~ p
Cdiv > p
Ddiv p
A
Le sélecteur div + p cible uniquement le premier élément <p> qui suit immédiatement un <div>, c’est-à-dire le premier frère <p> juste après un <div>. Les autres options ne ciblent pas directement le premier frère ou les éléments qui suivent immédiatement un autre élément.
2. Si tu souhaites cibler uniquement les éléments <p> qui sont des enfants directs d’un <div>, quel sélecteur CSS utiliserais-tu ?
Adiv + p
Bdiv ~ p
Cdiv > p
Ddiv p
C
Le sélecteur div > p sélectionne tous les éléments <p> qui sont enfants directs du <div>. Cela signifie que le <p> doit être immédiatement à l’intérieur du <div>. Les autres options ne restreignent pas la sélection aux enfants directs : div p sélectionne tous les <p> à l’intérieur du <div>, que ce soit directement ou indirectement.
3. Quel est l’effet du sélecteur * dans CSS ?
A Il sélectionne tous les éléments de la page
B Il sélectionne tous les éléments à l’intérieur d’un élément <div>
C Il sélectionne tous les éléments ayant une classe class
D Il sélectionne tous les éléments avec un ID id
A
Le sélecteur * est un sélecteur universel qui sélectionne tous les éléments d’un document HTML. Il est souvent utilisé pour appliquer des styles globaux (comme réinitialiser les marges ou le padding de tous les éléments).
4. Quel sélecteur CSS permet de cibler tous les éléments <a> qui ont un attribut href commençant par « https » ?
Aa[href^="https"]
Ba[href$="https"]
Ca[href*="https"]
Da[href="https"]
A
Le sélecteur a[href^="https"] utilise le caractère ^, qui sélectionne les éléments dont la valeur de l’attribut href commence par « https ». D’autres opérateurs comme $ (fin de l’attribut) et * (contient) peuvent être utilisés pour affiner la sélection, mais ici, ^ est le bon choix.
5. Quel sélecteur CSS est utilisé pour sélectionner tous les éléments impairs d’une liste ?
Ali:nth-child(odd)
Bli:nth-child(even)
Cli:nth-of-type(odd)
Dli:nth-of-type(even)
A
Le sélecteur li:nth-child(odd) sélectionne tous les éléments <li> qui sont des enfants impairs de leur parent (1er, 3e, 5e, etc.). Le sélecteur li:nth-child(even) sélectionne les éléments pairs (2e, 4e, 6e, etc.). Les sélecteurs nth-of-type fonctionnent de manière similaire mais appliquent le filtre uniquement en fonction du type d’élément (ici li).
6. Quelle balise permet de définir une ligne horizontale pour séparer des sections ?
A<break>
B<line>
C<hr>
D<divider>
C
La balise <hr> en HTML est utilisée pour insérer une ligne horizontale (une barre de séparation) dans une page web. Elle est généralement utilisée pour diviser visuellement le contenu, comme entre des sections ou des paragraphes, sans avoir besoin de texte explicite.
7. Quelle balise HTML est utilisée pour mettre en évidence une portion de texte ?
A<highlight>
B<mark>
C<strong>
D<em>
B
La balise <mark> en HTML est utilisée pour mettre en surbrillance du texte, généralement pour indiquer qu’il est important ou qu’il a été trouvé par une recherche. Le texte contenu dans une balise <mark> est habituellement affiché avec un fond coloré (souvent jaune par défaut) pour attirer l’attention sur ce contenu. Exemple:
<p>Voici un texte avec un <mark>mot important</mark> à surligner.</p>
Résultat:
Voici un texte avec un mot important à surligner.
8. Quel sélecteur CSS permet de cibler un élément uniquement lorsque celui-ci a le focus ?
A:active
B:focus
C:hover
D:visited
B
Le sélecteur :focus cible un élément qui a actuellement le focus, ce qui est typiquement utilisé pour les champs de formulaire lorsque l’utilisateur clique ou tabule dans le champ. Les autres options sont incorrectes car :active s’applique à un élément lorsque l’utilisateur clique dessus, :hover lorsqu’un élément est survolé par la souris, et :visited s’applique aux liens déjà visités.
9. Quel sélecteur CSS est utilisé pour grouper plusieurs sélecteurs et leur appliquer un même style ?
Aselector1, selector2
Bselector1 selector2
Cselector1 > selector2
Dselector1 ~ selector2
A
Le sélecteur selector1, selector2 permet de grouper plusieurs sélecteurs et de leur appliquer le même ensemble de styles. Par exemple :
h1, h2 {
color: blue;
}
10. Quel sélecteur CSS est utilisé pour ajouter du contenu avant le contenu d’un élément ?
A::after
B::before
C::first-letter
D::first-line
B
Le pseudo-élément ::before permet d’ajouter du contenu avant le contenu d’un élément. Par exemple, on peut l’utiliser pour ajouter un symbole avant chaque élément d’une liste. ::after ajoute du contenu après l’élément, tandis que ::first-letter et ::first-line ciblent respectivement la première lettre et la première ligne d’un texte. Voir un exemple complet.