Exercice N°1
1-Répondre aux questions ci-dessous en mettant une croix ( X ) uniquement dans la case qui correspond à
la bonne réponse.
NB : chaque question comporte une seule réponse correcte.
1. Laquelle de ces syntaxes est correcte pour embarquer une image dans la page html?
<img> src="mon-image.jpg" alt="Une image"</img>
<img src="mon-image.jpg" alt="Une image">
<img href="mon-image.jpg" alt="Une image">
2. Laquelle de ces pratiques doit être exceptionnelle (c'est à dire très rarement utilisée) ?
placer le css dans un élément HTML style à l'intérieur de la balise head de la page
placer le css dans un attribut style de chaque élément html dans la page
placer le css dans un fichier ".css" séparé
3. Avec la règle css suivante : p.bli { color: red;}
le texte de tous les paragraphes sera rouge
seul le texte des paragraphes de classe bli sera rouge
seul le texte du paragraphe d'identifiant bli sera rouge
Dans la règle suivante, quel élément deviendra rouge : strong , #intro {background-color: red;} ?
L'élément dont l'id est "intro" et qui est contenu dans un élément <strong>
L'élément <strong> dont l'id est "intro"
Tous les éléments <strong> et les éléments dont l'id est "intro"
4. Comment faire pour qu'une div prenne toute la largeur disponible dans son bloc conteneur ?
div {width: 80%; padding: 10%;}
div {width: 100%; padding: 10%;}
C'est automatique, pas besoin de spécifier une largeur.
5. Si on écrit a:active {color: red;} dans une feuille de style, quels liens seront de couleur rouge ?
les liens pointant vers la page en cours (par exemple dans un menu de navigation)
n'importe quel lien de la page, mais uniquement au moment où on clique sur ce lien
n'importe quel lien de la page, mais uniquement au moment où on le survole avec le pointeur de la
souris
6. Quelle est la valeur minimum nécessaire pour qu'une transition fonctionne ?
le nom de la transition
la durée de la transition
l’accélération de la transition
7. Que fait la propriété animation-name ?
Page 1/5
1. Définit la durée de l'animation.
2. Spécifie les étapes de l'animation définies dans un @keyframes.
3. Décide combien de fois l'animation doit se répéter.
4. Contrôle la direction de l'animation.
8. Quels sont les attributs possibles pour animation-direction ?
Start, repeat, alternate, end, repeat, pause normal, reverse, alternate-reverse. single, infinite.
2. Transformer la suite de paragraphes en une liste à puces.
3. Utiliser HTML pour insérer un lien vers la feuille de style "monstyle.css".
<............................ rel="stylesheet" type="text/css" ................................="monstyle.css">
4. Ajouter une règle CSS pour mettre l’ image «ordinateur.jpg » comme arrière-plan a la page web sans
répétition et de taille « cover »
Exercice N°3
1. Soit le code html suivant :
Travail demandé : Réécrire le code html ci-dessus en
apportant les modifications nécessaires (utiliser des class et des
id au besoin) ainsi que le code css afin de :
Colorier le texte du premier et deuxième paragraphe en
rouge.
Appliquer une couleur de fond jaune au bloc de texte
contenant le titre, le paragraphe1 et la liste
2. Soit le tableau suivant :
3. Crée une animation qui change la couleur de fond et la hauteur d'une
<div class="animated-box"></div>
Page 2/5
4. Soit la page web suivante : Exercice3.html
Complète les codes html et css par ce qui convient afin de développer la page web ci-dessus.
Exercice2.html Style_ex2.css
Pa
ge
3
/5
Page 3/5
