HTML-CSS: Figure 1 - Maquette Du Formulaire D'inscription

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 3

TP2 HTML-CSS

L’objectif de ce TP est de créer un formulaire d’inscription en HTML et le mettre en forme avec un fichier de
style CSS.

Rappel : n’hésitez pas à consulter le cours correspondant sur Html et CSS.

Créez un dossier " TP2 HTML-CSS " sur le bureau , télécharger les fichiers images et enregistrez votre travail
dans ce dossier.

Figure 1 – Maquette du formulaire d’inscription

Partie HTML :

1. Créer une page web intitulée « Formulaire design en CSS3 » et l’enregistrer sous le nom «inscription.html».
2. Créer le squelette de la page web à l’aide des balises structurantes.
3. Dans la partie Entête du page insérer le titre « Formulaire design en CSS3 »
4. Insérer l’image « signup.png » et le texte indicatif d’inscription.
5. Créer le formulaire représenté dans la maquette.

[1]
Partie CSS :

1. Créer le fichier CSS « style.css » et l’enregistrer sous votre dossier de travail.


2. Lier le fichier CSS avec la page web.
3. Pour tous les éléments de la page le padding et margin doivent avoir un 0.
4. Tous les titres (h1..h6) avec 0 comme margin, padding et couleur « #444 ».
5. La page web doit avoir :
• Arrière-plan image (wood.jpg)
• Couleur blanc
• Police de votre choix avec « 14px/24px » comme taille.

6. La partie entête avec un ombre du cadre « 0 -1px 2px #111111 », couleur d’arrière-plan noir, hauteur
«70 px» et largeur « 100% » du conteneur.
7. Titre entête (Formulaire design en CSS3) :
• Police : Taille « 22 px », Graisse normal, Couleur Blanc.
• Position : « 25% » du gauche, absolue.
• Padding : « 22px 0 ».

8. Image formulaire :
• Hauteur et largeur « 45px ».
• Position à droite du texte indicatif de l’inscription.

9. Formulaire
• Largeur : « 510px »
• Marge : « 0 auto »
• Marge haute et bas : « 50px »
• Couleur arrière-plan : « #fff »
• Padding : « 40px »
• Bordure : Taille « 10px », Type « solid » et Couleur « #f2f2f2 »
• Coins arrondis : « 5% » pour tous les coins.

10. Les éléments Input, Textarea du formulaire


• Bordure : Taille « 1px », Type « solid » et Couleur gris.
• Couleur texte : « #545658 »
• Padding : « 8px »
• Taille police : « 14px »
• Largeur : « 95% » du conteneur
• Coins arrondis : 2px pour tous les coins.

11. Boutons annuler et envoyer


• Bordure : Taille « 1px », Type « solid » et Couleur « #B7D6DF »
• Ombre cadre : « 0 1px 1px rgba(0, 0, 0, 0.1) »
• Police : couleur « #437182 » , Taille « 14px »,Graisse « bold »
• Hauteur et largeur : « auto »
• Padding : « 6px 10px »
• Margin : « 2px »
• Position : Droite
• Ombre du texte : « 0 1px 0 #FFFFFF »
12. Label du formulaire
• Marge basse : « 5px »
• Police : Taille « 12px » et Graisse « Bold ».

[2]
Figure 2 – Page résultat

 Importer le dossier " TP2 HTML-CSS " dans votre Drive dans le répertoire Web.

[3]

Vous aimerez peut-être aussi