QCM HTML / CSS – Partie 37

février 28, 2025février 28, 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 est la façon correcte d’ajouter un emoji (comme un cœur ❤️) dans un texte en HTML ?

A <p>❤️</p>

B <p>💛</p>

C <p>❤</p>

D Toutes les réponses ci-dessus

Vous pouvez insérer un emoji directement dans le texte, en utilisant son caractère Unicode 💛 ou ❤ pour un cœur, ou simplement en le tapant comme un caractère.

2. Quelle balise HTML vous permet d’ajouter une icône à côté d’un titre ?

A <h1><svg>...</svg> Titre</h1>

B <h1><i class="icon"></i> Titre</h1>

C <h1><span class="icon"></span> Titre</h1>

D <h1><img src="icon.png" alt="icon"> Titre</h1>

En utilisant <img> à l’intérieur de la balise <h1>, vous pouvez ajouter une icône à côté du titre. Les autres options nécessitent soit des classes CSS ou des SVG, mais l’image est la méthode la plus simple.

3. Quelle propriété CSS permet de rendre un menu fixe en haut de la page, même lors du défilement ?

A position: sticky; top: 0;

B position: fixed; top: 0;

C position: absolute; top: 0;

D A et B

Les deux options fonctionnent pour fixer un élément en haut de la page. position: sticky est plus moderne et s’active lorsqu’on fait défiler la page, tandis que position: fixed garde l’élément en place dès le chargement de la page.

4. Comment définir et utiliser une variable CSS pour la couleur de fond ?

A --primary-color: #3498db;

B background-color: var(--primary-color);

C :root { --primary-color: #3498db; }

D A et B

Les variables CSS sont définies avec --variable-name, et vous pouvez les utiliser avec var(--variable-name). Dans cet exemple, on définit une variable pour la couleur de fond et on l’utilise ensuite pour l’appliquer.

5. Comment créer une liste de liens qui s’affichent horizontalement ?

A ul { list-style-type: none; } li { display: inline; }

B ul { list-style: none; } li { display: block; }

C ul { list-style-type: inline; } li { display: inline-block; }

D ul { list-style: none; } li { display: flex; }

Pour afficher des éléments de liste horizontalement, il faut supprimer le style de la liste avec list-style-type: none; et rendre chaque élément de liste inline avec display: inline;

6. Quelle balise HTML permet d’ajouter un texte alternatif pour une vidéo non accessible ?

A <video><track src="captions.vtt" kind="subtitles" srclang="en" label="English"></video>

B <video alt="Video non accessible">Video</video>

C <video><caption>Video</caption></video>

D <video><p>Video</p></video>

La balise <track> permet d’ajouter des sous-titres ou du texte alternatif pour la vidéo. Cela améliore l’accessibilité pour les personnes sourdes ou malentendantes.

7. Comment ajouter un lien cliquable sur une image en HTML ?

A <a src="https://example.com"><img href="image.jpg"></a>

B <link href="https://example.com"><img src="image.jpg"></link>

C <a href="https://example.com"><img src="image.jpg"></a>

D <img href="https://example.com" src="image.jpg">

Vous placez la balise <img> à l’intérieur de la balise <a>, qui crée un lien cliquable sur l’image.

8. Comment rendre un tableau HTML responsive sur des écrans plus petits ?

A En utilisant la propriété overflow-x: auto; sur le conteneur du tableau

B En utilisant table-layout: auto; sur la balise <table>

C En ajoutant la balise <responsive-table>

D En définissant une largeur fixe pour les colonnes du tableau

Pour rendre un tableau responsive, vous pouvez ajouter overflow-x: auto; à un conteneur parent, ce qui permet de faire défiler le tableau horizontalement sur les petits écrans.

A ©

B ©

C © ou ©

D <copyright>

10. Comment créer une liste numérotée avec un style personnalisé des puces (par exemple, des chiffres en lettres) ?

A <ol style="list-style-type: upper-alpha;">

B <ul style="list-style-type: circle;">

C <ol type="I">

D <ol style="list-style-type: decimal;">

L’attribut list-style-type: upper-alpha; dans une balise <ol> permet de numéroter la liste avec des lettres majuscules (A, B, C…).

QCMs qui pourraient vous intéresser :

QCM HTML / CSS – Partie 37

1. Quelle est la façon correcte d’ajouter un emoji (comme un cœur ❤️) dans un texte en HTML ?

2. Quelle balise HTML vous permet d’ajouter une icône à côté d’un titre ?

3. Quelle propriété CSS permet de rendre un menu fixe en haut de la page, même lors du défilement ?

4. Comment définir et utiliser une variable CSS pour la couleur de fond ?

5. Comment créer une liste de liens qui s’affichent horizontalement ?

6. Quelle balise HTML permet d’ajouter un texte alternatif pour une vidéo non accessible ?

7. Comment ajouter un lien cliquable sur une image en HTML ?

8. Comment rendre un tableau HTML responsive sur des écrans plus petits ?

9. Quel est le code HTML pour afficher le symbole de la copyright (©) ?

10. Comment créer une liste numérotée avec un style personnalisé des puces (par exemple, des chiffres en lettres) ?

Laisser un commentaire Annuler la réponse

1. Quelle est la façon correcte d’ajouter un emoji (comme un cœur ❤️) dans un texte en HTML ?

2. Quelle balise HTML vous permet d’ajouter une icône à côté d’un titre ?

3. Quelle propriété CSS permet de rendre un menu fixe en haut de la page, même lors du défilement ?

4. Comment définir et utiliser une variable CSS pour la couleur de fond ?

5. Comment créer une liste de liens qui s’affichent horizontalement ?

6. Quelle balise HTML permet d’ajouter un texte alternatif pour une vidéo non accessible ?

7. Comment ajouter un lien cliquable sur une image en HTML ?

8. Comment rendre un tableau HTML responsive sur des écrans plus petits ?

9. Quel est le code HTML pour afficher le symbole de la copyright (©) ?

10. Comment créer une liste numérotée avec un style personnalisé des puces (par exemple, des chiffres en lettres) ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 49

QCM HTML / CSS – Partie 34

QCM HTML / CSS – Partie 48

Laisser un commentaire Annuler la réponse