Licence ABD 2022/2023

Module : Programmation Web

Pr. Mohammed KASRI

TP 5 : Unités de mesure – Bordures – Arrières plans

Les objectifs de ce TP sont :

 L’utilisation des unités de mesure en CSS

 La découverte de quelques sélecteur CSS avancés
 La gestion des marges internes et externes
 La gestion des bordures
 L’utilisation des ombrages
 La gestion des arrières plans

A la fin du TP, votre page doit impérativement avoir l'apparence de la page correspondante, en
annexe du sujet (p.4).

Remarques :

 Ce TP s’effectuera individuellement.
 Tous les fichiers créés devront contenir en haut du fichier, en commentaires, vos nom
et prénom.
 La consultation de sites Web ayant trait à HTML et CSS est autorisée pendant ce TP.
Questions :

1) Créer un dossier pour ce TP nommé TP5.

2) Créer deux dossiers (css et img) à l’intérieur du dossier TP5 et copier l’image
inscription.png dans le dossier img.
3) Ouvrer le dossier TP5 avec VS Code puis créer une page HTML nommée inscription.
4) Dans le dossier css créer un fichier nommé style.css et lier la page inscription.html à
ce ficher css.
5) Ajouter deux div (1er à la classe conteneur et le 2 ème à la classe footer) à votre page
HTML.
6) Dans le fichier css :
a. Changer la taille de police de l’élément html en 16px ;
b. Modifier la hauteur de div (conteneur) pour qu’il soit 85% de viewport et
div(footer) en 10% de viewport.
c. Ajouter un arrière-plan (effet gradient) à votre page web en modifiant la
propriété background-image de l’élément body. (Vous pouvez consulter le
siteweb : https://cssgradient.io/gradient-backgrounds/ ou utiliser cet effet :
background-image: linear-gradient(to right, # e0eafc, # cfdef3)
7) Ajouter 3 liens (Aide, Confidentialité et Conditions d’utilisation) à l’intérieur de div
(footer)
8) Dans le fichier css :
a. Ajouter un padding en haut de 1rem.
b. Aligner le texte au centre.
c. En utilisant le sélecteur descendant changer la mise en forme des liens de
div(footer) (supprimer la décoration, couleur : grey, margin left et right en
0.5rem et la graisse en bold).
d. En utilisant le pseudo-classe et le sélecteur descendant changer la couleur des
liens en cornflowerblue lorsque sont survolés.
9) Créer un div (avec la classe inscription) à l’intérieur de div(conteneur)
10) Dans le fichier css :
a. Modifier la longueur de div (inscription) en 30% du viewport et la hauteur en
80 de viewport.
b. Ajouter un padding de
c. Ajouter un padding en haut de 1.5rem pour le div(conteneur).
d. Centrer l’élément div (inscription) en utilisant la propriété margin.
e. Ajouter une bordure de 1px continue avec la couleur cornflowerblue.
f. Modifier le rayon des coins en 0.5rem.
g. Modifier la couleur d’arrière-plan en aliceblue.
h. Ajouter un ombrage convenable pour l’élément div (inscription). Vous pouvez
utiliser cet exemple : box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35) ; ou
consulter le site : https://getcssscan.com/css-box-shadow-examples
11) Créer deux divs (1er à la classe image et le 2 ème à la classe formulaire) à l’intérieur de
div (inscription) :
12) Dans le fichier css :
a. Modifier la hauteur de div (formulaire) en 60% et de div (image) en 30% .
b. Ajouter un arrière-plan pour le div (image) (arrière-plan inscription.png, la
taille de l'image d'arrière-plan s'adapte, l'image de l’arrière-plan ne se répète
pas et se positionne au centre)
13) Ajouter un titre h2 (texte : s’inscrire) l’intérieur de div (formulaire)
14) Dans le fichier css et en utilisant le sélecteur descendant :
a. Mettre le titre en majuscule
b. Centrer le titre
c. Changer l’espacement entre les caractères en 0.1rem.
d. Changer la couleur en cornflowerblue.
15) Ajouter un formulaire à l’intérieur de div (formulaire)
16) Ajouter 3 labels (nom d’utilisateur, email et mot de passe) avec trois champs (texte,
email et mot de passe) inputs ayant la classe champs.
17) Dans le fichier css et en utilisant le sélecteur descendant (sélectionner labels):
a. Mettre le texte des labels en majuscule
b. Changer sa taille de police en .9rem
c. Changer sa couleur en grey
 d. Changer sa graisse en 500
e. Ajouter un margin de 1rem en haut et 0.5rem en bas ; qu’est-ce que vous
remarquez ?
18) Dans le fichier css sélectionner la classe champs et :
a. Changer la longueur en 100%. Qu’est-ce que vous remarquez ?
b. Fixer le problème précédent en utilisant la propriété box-sizing.
c. Ajouter un margin en haut de .2rem et en bas de 1rem.
d. Changer la hauteur en 1.8rem.
e. Ajouter un arrière-plan simple, exemple : background: rgba(128, 128, 128,
0.082);
f. Supprimer les bordures et ajouter une bordure en bas de 1px continue d’une
couleur grey.
g. Changer la taille de police en .9rem
h. Changer la couleur en cornflowerblue
i. Changer sa graisse en 700
j. Changer la couleur de bordure en bas lorsque le champ en état focus.
19) Ajouter un bouton submit puis modifier ces propriétés en utilisant un sélecteur de
classe comme suit :
a. Modifier la longueur en 100% et la hauteur en 2rem
b. Supprimer les bordures
c. Modifier l’arrière-plan : background: rgba(128, 128, 128, 0.5);
d. Ajouter un rayon au bordure de .3rem
e. Changer la taille de police en .9rem
f. Changer la couleur de police en white
g. Changer la graisse de police en 700
h. Ajouter un effet de survol en changer la couleur d’arrière-plan en
cornflowerblue .
20) Lors du passage du curseur sur le bouton on remarque que la forme du curseur ne se
change pas. Comment faire pour fixer ce problème ?