Maîtriser Les Bases de HTML5

Maîtriser les bases de HTML5
Question 1
Parmi ces extraits de code, lequel comporte une syntaxe valide pour créer un
paragraphe de texte ?
<p>Ceci est mon texte</p>
Question 2
Vous avez une page index.html qui veut afficher l'image perroquet.png. Cette
image se situe dans le dossier /images.
Quel snippet de code permet d'afficher la photo ?
<img src="images/perroquet.png" alt="Un perroquet mange une amande">
Question 3
Vous trouverez du code HTML dans le CodePen Quiz P1Q3.

Dans ce bout de HTML, plusieurs erreurs ont été commises. Qu'est-ce qui ne
va pas ? (Essayez de trouver les réponses par vous-même avant de voir les
options proposées).
Attention, plusieurs réponses sont possibles.
 <h2> est utilisé alors qu'il n'y a pas de <h1>

 La source de l'image n'est pas précisée
 La balise <p> n'est pas fermée
 L'image ne possède pas d'attribut alt
Question 4
Une valeur et un attribut permettent, ensemble, d'ouvrir un lien dans un nouvel

onglet. Lesquels ?
 L'attribut target
 La valeur _blank
 L’attribut title
 La valeur mailto:
 La valeur blank
Question 5
Parmi ces affirmations à propos des commentaires HTML, lesquelles sont

correctes ?
 En HTML, on ouvre un commentaire avec 
</body>
</html>
Quel morceau de code permet de créer un lien vers la page 1 à la place du
commentaire Insérer ici un lien vers la page 1 ?
<a href="../page1.html">Page 1</a>
<a href="../dossier1/page1.html">Page 1</a>
<a href="./page1.html">Page 1</a>

<a href="page1.html">Page 1</a>
Question 1
Quelles étapes doit-on suivre pour importer du CSS dans un fichier HTML ?
 Importer le fichier dans une balise <css>

 Créer un fichier ayant l'extension .css
 Utiliser la balise <link> pour importer le fichier
 Écrire directement du style dans la balise <css>
Question 2
On a le code HTML suivant :
<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est le super contenu de mon paragraphe</p>
</body>
Comment faire pour que la couleur du titre ainsi que du paragraphe soient
#ff1493 ?
h1, p {
color: #ff1493;
---
h1 {
color: #ff1493;
p{
color: #ff1493;
}
-----
h1, p {
color: rgb(255, 20, 147);
---
h1 + p {
color: #ff1493;
Question 3
On a le HTML suivant :
<p class="premier-paragraphe"></p>
<p class="deuxieme-paragraphe"></p>
À partir de l'aperçu suivant, quelles propriétés de texte ont été appliquées dans
les classes premier-paragraphe ou deuxieme-paragraphe ?

 text-align
 font-size
 text-decoration
 font-family
 color
Question 4
Regardez le CodePen Quiz P2Q4, dans lequel vous avez la classe elem.
Lorsque vous le survolez avec la souris, l'opacité de l'élément est moins forte.
Par quelles valeurs pourriez-vous remplacer le code de la ligne 9 pour obtenir
le même résultat ? (N'hésitez pas à tester les différentes valeurs proposées.)
background-color: rgb(25, 25, 112);
background-color: #191970 60%;

background-color: rgba(25, 25, 112, 0.7);
Question 5
Voici le CodePen Quiz P2Q5.

Quelle(s) propriété(s) ajouter ou modifier à la classe .banniere pour que mon
background s'adapte bien en largeur (en restant sur une taille d'écran
classique), s'affiche une seule fois et affiche aussi bien le sol que le ciel ?
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachement: fixed;
Question 6
Vous avez la page juste en dessous. Le HTML et le CSS ont été codés de sorte
à avoir :
<div class="banner">
<h1>☀️Bienvenue sur ma page 🏝</h1>
</div>
<h2>Ici, vous avez le contenu de la page</h2>

Et le résultat :
Que devez-vous écrire dans le fichier CSS au niveau de la classe .banner pour
obtenir le même résultat ? N'hésitez pas à copier-coller le code pour voir ce
que vous obtenez.
background: linear-gradient(#000046, #1CB5E0);
background-color: linear(to right,#000046, #1CB5E0);
background: linear-gradient(to left, #1CB5E0, #000046);
background: linear-gradient(to right,#000046, #1CB5E0);
Question 7
Dans le GIF ci-dessous, vous avez une card dont le style change au survol de
la souris :
Vous avez essayé de reproduire le même comportement dans un bout de code.

Mais vous n’y êtes pas encore totalement parvenu :
Quelles propriétés manque-t-il pour obtenir le même résultat ?

 box-shadow
 border
 border-radius
 text-shadow
Question 8
Dans le CodePen Quiz P2Q8, vous avez le bout de code qui vous permet
d’afficher un lien vers Google.
Quel bout de code CSS vous permet de créer un effet où le texte, ainsi que le
bord qui entoure le lien, deviennent bleu lorsqu’on clique sur le lien ?
a:hover {
color: blue;
border-color: blue;
----
a:active {
color: blue;
border-color: blue;
}
----
a:clicked {
color: blue;
border-color: blue;
---
active {
color: blue;
border-color: blue;
Question 1
Parmi les affirmations suivantes, laquelle est fausse ?
 Le header sert à indiquer l'en-tête de la page au navigateur

 On trouve souvent les liens vers les réseaux sociaux et mentions légales dans
le footer
 L'apparence visuelle du site dépend beaucoup de la structure des balises
<header> , <main> et <footer>
 <head> et <header> sont deux choses différentes
 Le contenu principal de la page se trouve dans la balise <main>
Question 2
Regardez le CodePen Quiz P3Q2.

Quel bout de code ajouter dans la classe .element pour arriver à la capture
d'écran ci-dessous ?

padding: 50px;
--
margin: 50px;
---
padding-top: 50px;
padding-bottom: 50px;
--
margin-top: 50px;
margin-bottom: 50px;
Question 3
Parmi les éléments suivants, lesquels sont nativement des éléments inline
qui vont se mettre les uns à la suite des autres sans prendre toute la largeur ?
 main
 span
 a
 p
Question 4

Quelle ligne de code manque-t-il à la classe .conteneur pour obtenir le résultat
suivant ?
 flex-wrap: wrap;
 justify-content: flex-end;
 margin: auto;
 display: grid;
Question 5
Quelle propriété appliquée sur un élément dans une mise en page Flexbox
permet de modifier l'ordre des éléments en les réagençant sans modifier le
HTML ?
 flex-direction
 align-items
 order
 flex
Question 6
Parmi les affirmations suivantes, laquelle est exacte ?
 Les unités fr fonctionnent exactement de la même manière que les

pourcentages
 Les gap permettent d'espacer les éléments entre eux dans les CSS Grids
 On définit les colonnes avec grid-template-rows
 Il est impossible de définir le point de départ d'un élément spécifique dans une
grid
Question 7
Quelles sont les options offertes par la propriété display ?

 Transformer un élément inline en élément block

 Cacher entièrement un élément
 Profiter des avantages de l' inline et de ceux des block
 Superposer des éléments
Question 8

Quelle propriété permettrait d'obtenir le résultat ci-dessous ?
 position
 display
 z-index
 flex
Question 1
Le CodePen Quiz P4Q1 présente un tableau.

Quelle ligne de code faut-il ajouter à la place du commentaire pour avoir un
tableau sans espace entre les lignes et les colonnes ?
border: 1px solid black;

---
border-collapse: separate;
--
display: grid;
--
border-collapse: collapse;
Question 2
Parmi les éléments ci-dessous, lesquels ne concernent pas les tableaux en

HTML et CSS ?

 tfooter
 thead
 td
 caption
 legend
Question 3
J'ai le code suivant :
<form method="get" action="">
<label id="prenom" for="prenom">Votre prénom</label>
<input type="text" name="surnom">
</form>
Mais je ne comprends pas : quand je clique sur mon label rien ne se passe, le
champ de saisie n'est pas sélectionné.
Qu'est-ce qui pose problème ici ?
 La balise input doit se situer avant la balise label

 L'attribut id n'est pas sur la balise input
 La valeur de name est surnom et non prenom
 Il n'y a pas de bouton de validation du formulaire
Question 4
Parmi les valeurs suivantes, lesquelles permettent bien de créer un champ de

saisie ? Vous pouvez essayer les différentes options pour voir !

 type="email"
 type="date"
 type="telephone"
 type="URL"
Question 5
Parmi les bouts de code suivants, lesquels permettent d'obtenir le résultat ci-
dessous ?
 <form method="get" action="">
 <label for="plante">Quelle plante souhaitez-vous acheter ?</label>
 <select name="plante" id="plante">
 <option value="philodendron">Philodendron</option>
 <option value="calathea">Calathea</option>
 <option value="pilea">Pilea</option>
 <option value="yucca">Yucca</option>
 </select>
 </form>
Question 6
J'ai le bout de code suivant :
<form method="post" action="">
<fieldset>
<title>Vos coordonnées</title>
<label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom">
<label for="prenom">Quel est votre prénom ?</label>
<input type="text" name="prenom" id="prenom">
<option for="email">Quel est votre e-mail ?</option>
<input type="email" name="email" id="email">
<button type="submit" value="Envoyer">
</form>
</fieldset>
Qu'est-ce qui ne va pas ici ? (Vous pouvez essayer de repérer les erreurs sans
regarder les propositions, pour vous entraîner.)
 La balise <form> est fermée avant la balise <fieldset>

 Le fieldset utilise une balise <title> au lieu d'utiliser <legend>
 Le bouton de validation est un button et non un input
 Il y a une option qui se balade seule
 La valeur de l'attribut method est post
Question 7
Quelle est la signification de la media query suivante ?
@media all and (min-width: 960px) and (max-width: 1024px)
 Tous les médias de moins de 960px et plus de 1024px

 Les écrans de moins 960px et plus de 1024px
 Tous les médias de plus de 960px et moins de 1024px
 Tous les écrans de moins de 960px et de plus de 1024px
Question 8
Quelles astuces sont couramment utilisées pour rendre un site responsive ?
 Changer flex-direction de row à column

 Définir un overflow: auto ou scroll
 Définir une width fixe
 Prévoir plusieurs breakpoints avec des comportements associés

Maîtriser Les Bases de HTML5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Maîtriser Les Bases de HTML5

Transféré par

Droits d'auteur :

Formats disponibles

Maîtriser les bases de HTML5

<p>Ceci est mon texte</p>

<img src="images/perroquet.png" alt="Un perroquet mange une amande">

Vous trouverez du code HTML dans le CodePen Quiz P1Q3.

Attention, plusieurs réponses sont possibles.

 <h2> est utilisé alors qu'il n'y a pas de <h1>

Une valeur et un attribut permettent, ensemble, d'ouvrir un lien dans un nouvel

Attention, plusieurs réponses sont possibles.

Parmi ces affirmations à propos des commentaires HTML, lesquelles sont

Attention, plusieurs réponses sont possibles.

 En HTML, on ouvre un commentaire avec <!--

Quel bout de code permet d'obtenir le résultat de l'image ci-dessous ?

 <a href="http://lien.com" title="Cliquez pour voir">Ceci est un lien</a>

Quel bout de code correspond à l'affichage de l'image juste en dessous ?

<h1>Bienvenue sur la page 2 🌈</h1>

<a href="../page1.html">Page 1</a>

<a href="../dossier1/page1.html">Page 1</a>

<a href="./page1.html">Page 1</a>

Attention, plusieurs réponses sont possibles.

 Importer le fichier dans une balise <css>

On a le code HTML suivant :

<h1>Bienvenue sur ma page</h1>

<p>Ceci est le super contenu de mon paragraphe</p>

color: rgb(255, 20, 147);

Attention, plusieurs réponses sont possibles.

background-color: rgb(25, 25, 112);

background-color: #191970 60%;

Voici le CodePen Quiz P2Q5.

<h1>☀️Bienvenue sur ma page 🏝</h1>

<h2>Ici, vous avez le contenu de la page</h2>

background: linear-gradient(#000046, #1CB5E0);

background-color: linear(to right,#000046, #1CB5E0);

background: linear-gradient(to left, #1CB5E0, #000046);

background: linear-gradient(to right,#000046, #1CB5E0);

Vous avez essayé de reproduire le même comportement dans un bout de code.

Attention, plusieurs réponses sont possibles.

Parmi les affirmations suivantes, laquelle est fausse ?

 Le header sert à indiquer l'en-tête de la page au navigateur

Regardez le CodePen Quiz P3Q2.

Attention, plusieurs réponses sont possibles.

Regardez le CodePen Quiz P3Q4.

Parmi les affirmations suivantes, laquelle est exacte ?

 Les unités fr fonctionnent exactement de la même manière que les

Quelles sont les options offertes par la propriété display ?

 Transformer un élément inline en élément block

Regardez le CodePen Quiz P3Q8.

Le CodePen Quiz P4Q1 présente un tableau.

border: 1px solid black;

Parmi les éléments ci-dessous, lesquels ne concernent pas les tableaux en

Attention, plusieurs réponses sont possibles.

J'ai le code suivant :

<form method="get" action="">

<label id="prenom" for="prenom">Votre prénom</label>

<input type="text" name="surnom">

 La balise input doit se situer avant la balise label

Parmi les valeurs suivantes, lesquelles permettent bien de créer un champ de

Attention, plusieurs réponses sont possibles.

 <form method="get" action="">

 <label for="plante">Quelle plante souhaitez-vous acheter ?</label>

 <select name="plante" id="plante">

J'ai le bout de code suivant :

<form method="post" action="">

<label for="nom">Quel est votre nom ?</label>