PREPA HTML
1.
Quel sera le résultat du code suivant ?
<h2 style="color:green;">Formation Web</h2>
A. Texte rouge
B. Texte vert
C. Texte bleu
D. Texte caché
2.
<p style="background:yellow;">
Bienvenue
</p>
A. Fond jaune
B. Fond noir
C. Texte jaune
D. Texte invisible
3.
<div style="width:150px;height:50px;background:blue;"></div>
A. Carré bleu
B. Rectangle bleu
C. Cercle bleu
D. Texte bleu
4.
<p style="text-transform:uppercase;">
bonjour
</p>
A. Bonjour
B. bonjour
C. BONJOUR
D. BonJour
5.
<button style="border-radius:20px;">
Valider
</button>
A. Bouton carré
B. Bouton arrondi
C. Bouton invisible
D. Bouton rouge
6.
<p style="letter-spacing:5px;">
HTML
</p>
A. Lettres rapprochées
B. Espacement entre lettres augmenté
C. Texte caché
D. Texte rouge
7.
<div style="border:3px dashed red;">
Bloc
</div>
A. Bordure rouge pointillée
B. Bordure noire
C. Fond rouge
D. Texte rouge
8.
<img src="[Link]" style="height:100px;">
A. Hauteur de 100px
B. Largeur de 100px
C. Image cachée
D. Image rouge
9.
<div style="width:100px;height:100px;border-
radius:10px;background:black;"></div>
A. Carré noir avec coins arrondis
B. Cercle noir
C. Rectangle noir
D. Texte noir
10.
<p style="visibility:hidden;">
Texte
</p>
A. Texte visible
B. Texte rouge
C. Texte masqué
D. Texte souligné
11.
Quelle balise permet de créer un formulaire ?
A. <table>
B. <form>
C. <div>
D. <section>
12.
Quelle balise permet d'afficher une image ?
A. <picture>
B. <image>
C. <img>
D. <src>
13.
Quel est le résultat ?
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
A. Liste à puces
B. Liste numérotée
C. Tableau
D. Menu
14.
Quelle balise permet de créer une ligne de tableau ?
A. <td>
B. <th>
C. <tr>
D. <table-row>
15.
<input type="email">
A. Champ email
B. Champ mot de passe
C. Bouton
D. Liste
16.
p{
text-align:right;
}
A. Texte centré
B. Texte à gauche
C. Texte à droite
D. Texte caché
17.
h1{
font-family:Arial;
}
A. Change la police
B. Change la couleur
C. Change la taille
D. Change le fond
18.
.box{
width:200px;
}
A. Hauteur 200px
B. Largeur 200px
C. Bordure 200px
D. Texte 200px
19.
img{
opacity:0.3;
}
A. Image opaque
B. Image semi-transparente
C. Image rouge
D. Image cachée
20.
button:hover{
background:red;
}
A. Au clic
B. Au survol
C. Au chargement
D. Jamais
(reviser le role de chaque propriété ci dessus :)
flexbox
justify-content
align-items
margin
padding
box-shadow
text-shadow
display:block
display:inline
display:flex
position:relative
position:fixed
z-index
overflow:auto
cursor:pointer
transition
transform:scale()
border-radius
font-weight
text-decoration
background-image
PARTIE B : EXERCICES PRATIQUES
Exercice 1 : Carte de présentation (2 points)
Réaliser le résultat suivant :
+----------------------+
| PHOTO |
| |
| Nom : Jean Dupont |
| Développeur Web |
+----------------------+
Contraintes :
largeur : 300px
bordure noire
texte centré
image de 100px × 100px
Exercice 2 : Boutons stylisés (2 points)
Créer trois boutons :
Ajouter (vert)
Modifier (orange)
Supprimer (rouge)
Contraintes :
texte blanc
coins arrondis
padding de 10px
Exercice 3 : Menu horizontal (2 points)
Créer un menu contenant :
Accueil
Services
Formations
Contact
Contraintes :
les éléments doivent être alignés horizontalement
fond gris foncé
texte blanc
espace entre les éléments
Exercice 4 : Formulaire d'inscription (2 points)
Créer un formulaire contenant :
Nom
Prénom
Email
Mot de passe
Bouton "S'inscrire"
Contraintes :
largeur du formulaire : 400px
champs espacés
bouton bleu
Exercice 5 : Mini page vitrine (2 points)
Créer une page présentant un centre de formation.
La page doit contenir :
Un titre principal
Une image
Une description
Un bouton "En savoir plus"
Contraintes :
utiliser HTML et CSS
contenu centré
bouton avec effet de survol (hover)