QCM HTML / CSS – Partie 39

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. Comment créer un fond de page avec une image qui se répète sur toute la page ?

A background: url('pattern.png') repeat;

B background-repeat: no-repeat; background-image: url('pattern.png');

C background: url('pattern.png') fixed;

D background-image: repeat('pattern.png');

A
La propriété background-repeat: repeat; permet de répéter une image sur toute la surface de l’élément (ici la page).

 

 

2. Comment créer un lien permettant de télécharger un fichier lorsque l’on clique dessus ?

A <a href="file.pdf" download>Télécharger le fichier</a>

B <a href="file.pdf" target="_blank" download>Télécharger le fichier</a>

C <a href="file.pdf" target="_self" download>Télécharger le fichier</a>

D <a href="file.pdf" rel="download">Télécharger le fichier</a>

A
L’attribut download dans un lien </a> permet de forcer le téléchargement du fichier lié.

 

 

3. Comment améliorer l’accessibilité d’un bouton avec aria en HTML ?

A <button aria-label="Envoyer le message">Envoyer</button>

B <button aria-hidden="true">Envoyer</button>

C <button aria-live="polite">Envoyer</button>

D <button aria-label="Submit">Submit</button>

A
L’attribut aria-label est utilisé pour fournir une description accessible d’un élément. Cela aide les utilisateurs à comprendre l’objectif du bouton.

 

 
 

4. Quelle propriété CSS permet de créer un effet de défilement horizontal pour un texte ?

A white-space: nowrap; overflow: scroll;

B overflow-x: scroll; white-space: nowrap;

C overflow-x: auto; white-space: normal;

D overflow: hidden; white-space: nowrap;

B
overflow-x: scroll permet d’ajouter une barre de défilement horizontale, et white-space: nowrap; empêche le texte de se diviser en plusieurs lignes, le forçant à défiler horizontalement. Voir un exemple complet.

 

 

5. Comment créer un lien pour télécharger une image en HTML ?

A <a href="image.jpg" download="image.jpg">Télécharger</a>

B <a href="image.jpg" target="_blank" download>Télécharger</a>

C <a href="image.jpg" download>Télécharger</a>

D <a href="image.jpg" target="_self" download="image.jpg">Télécharger</a>

A
L’attribut download permet de spécifier qu’on souhaite télécharger l’image lorsque l’utilisateur clique sur le lien. Le nom du fichier téléchargé peut être spécifié après l’attribut download.

 

 

6. Comment créer un fond fixe sur toute la page qui ne défile pas avec le contenu ?

A background-attachment: static;

B background-attachment: scroll;

C background-attachment: absolute;

D background-attachment: fixed;

D
La propriété background-attachment: fixed; permet de fixer l’arrière-plan de la page de sorte qu’il ne défile pas avec le contenu lors du défilement de la page.

 

 
 

7. Comment créer une liste numérotée avec des lettres en HTML ?

A <ol type="a"><li>Premier item</li></ol>

B <ol type="A"><li>Premier item</li></ol>

C <ul type="A"><li>Premier item</li></ul>

D <ol type="alpha"><li>Premier item</li></ol>

A
L’attribut type="a" dans la balise <ol> permet de créer une liste numérotée avec des lettres minuscules (a, b, c, etc.). Vous pouvez aussi utiliser type="A" pour des lettres majuscules. Voir un exemple complet.

 

 

8. Comment créer une zone de texte qui limite le nombre de caractères en HTML ?

A <textarea maxlength="100"></textarea>

B <input type="text" maxlength="100">

C <input type="text" limit="100">

D <textarea limit="100"></textarea>

A
L’attribut maxlength est utilisé pour limiter le nombre de caractères qu’un utilisateur peut saisir dans un champ <textarea>. Exemple:

<textarea maxlength="3"></textarea>

Résultat:

 

 

9. Quand est-il préférable d’utiliser CSS Grid par rapport à Flexbox ?

A Grid est mieux pour les mises en page à une seule dimension (horizontale ou verticale).

B Flexbox est meilleur pour les mises en page complexes avec plusieurs colonnes et lignes.

C Grid est plus adapté aux mises en page à deux dimensions, comme les lignes et les colonnes.

D Flexbox doit être utilisé uniquement pour centrer les éléments dans un conteneur.

C
CSS Grid est conçu pour des mises en page en deux dimensions (lignes et colonnes), tandis que Flexbox est davantage destiné à des mises en page à une seule dimension (soit horizontale, soit verticale). Grid offre plus de contrôle pour les structures complexes.

 

 
 

10. Quel attribut HTML permet de spécifier la méthode de soumission d’un formulaire ?

A action

B submit

C enctype

D method

D
L’attribut method définit la méthode HTTP utilisée pour soumettre les données du formulaire. Les valeurs courantes sont GET et POST. Exemple:

<form action="/submit" method="GET">
  <label for="email">Email :</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Envoyer">
</form>

 

 

Laisser un commentaire

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