QCM HTML / CSS – Partie 36

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 HTML est idéale pour définir une section d’un article dynamique qui peut contenir des commentaires ou du contenu réactif ?

A <aside>

B <div>

C <section>

D <article>

Réponse  

2. Comment appliquer une image comme masque de texte, rendant l’intérieur du texte transparent et affichant l’image derrière ?

A background-image: url('image.jpg'); -webkit-mask-image: url('image.jpg');

B mask-image: url('image.jpg'); background: transparent;

C mask-image: url('image.jpg');

D text-mask: url('image.jpg');

Réponse  

3. Comment ajouter une validation dynamique à un champ de formulaire en HTML pour s’assurer que l’utilisateur entre un email valide ?

A <input type="email" required>

B <input type="text" validate="email">

C <input type="email" placeholder="Entrez votre email">

D <input type="text" pattern="email">

Réponse  
 

4. Quelle balise HTML est utilisée pour définir un titre de niveau 3 dans une page web ?

A <h3>

B <h2>

C <title>

D <header>

Réponse  

5. Comment créer une bordure animée qui change de couleur toutes les 2 secondes ?

A @keyframes borderColor { 0% { border-color: red; } 100% { border-color: blue; } }

B @keyframes border-animation { from { border-color: red; } to { border-color: blue; } }

C animation: borderColor 2s infinite;

D A et C

Réponse  

6. Quelle propriété CSS permet d’animer le déplacement d’un élément sur l’axe X (horizontal) ?

A @keyframes moveX { from { left: 0px; } to { left: 100px; } }

B transform: translateX(100px);

C animation: moveX 1s infinite;

D Toutes les réponses ci-dessus

Réponse  
 

7. Quelle balise HTML permet de créer un bouton qui, lorsqu’on clique dessus, ouvre un fichier PDF dans le navigateur ?

A <button onclick="window.open('document.pdf');">Ouvrir PDF</button>

B <a href="document.pdf" download>Ouvrir PDF</a>

C <button href="document.pdf">Ouvrir PDF</button>

D <a href="document.pdf" target="_blank">Ouvrir PDF</a>

Réponse  

8. Comment intégrer une vidéo qui se lance automatiquement dès qu’elle est chargée dans la page ?

A <video autoplay><source src="video.mp4" type="video/mp4"></video>


B <video src="video.mp4" autoplay></video>


C <video controls autoplay="true"><source src="video.mp4" type="video/mp4"></video>


D <video src="video.mp4" autoplay="true"></video>


Réponse  

9. Comment valider un champ de formulaire en HTML pour qu’il accepte uniquement des adresses email contenant “@gmail.com” ?

A <input type="email" pattern="^[a-zA-Z0-9._%+-]+@gmail\.com$" required>

B <input type="text" pattern="^[a-zA-Z0-9._%+-]+@gmail\.com$" required>

C <input type="email" required pattern=".*@gmail\.com$">

D <input type="text" pattern=".*@gmail\.com$" required>

Réponse  
 

10. Quelle propriété CSS permet de transformer un élément en appliquant une rotation et un décalage simultanément ?

A transform: translateX(100px) rotate(45deg);

B transform: scale(1.2) rotate(45deg);

C transform: translate(100px, 0) rotate(45deg);

D transform: rotate(45deg) translateX(100px);

Réponse