OFFICE DE LA FORMATION PROFESSIONNELLE & DE LA PROMOTION DU TRAVAIL

INSTITUT SUPERIEUR DES TECHNOLOGIES DE L’INFORMATION ET DE LA COMMUNICATION DE SAFI

D E V E L O P P E M E N T D E S A P P L I C AT I O N S
WEB COTE CLIENT
T P 3 : TA B L E A U X - F O R M U L A I R E S E T
CSS
Soit l’application web des TPs 1et 2.
Partie 1
Dans la page index.html, on désire ajouter l’élément SONDAGE au menu :

• Ajouter une page sondage.html à l’application Web

• Créer un formulaire avec les éléments suivants :

Elément Name value

Zone de texte Nom Saisir votre nom

Zone de texte Prenom Saisir votre prenom
Zone de texte Email Saisir votre mail

Elément Name cols Rows

TextArea TextArea1 40 20

Elément Name options

Select philosophe René Descartes

Albert Camus
Frédéric Nietszch
John Giono

Elément Name value

Submit btnEnvoi Envoyer

Buton btnInit Initialiser
Page : 1 ANNEE DE FORMATION 2020/2021
 OFFICE DE LA FORMATION PROFESSIONNELLE & DE LA PROMOTION DU TRAVAIL
INSTITUT SUPERIEUR DES TECHNOLOGIES DE L’INFORMATION ET DE LA COMMUNICATION DE SAFI

La page sondage doit avoir le rendu suivant :

Le style CSS est laissé à votre soin, on exige juste :

1. Pour la balise caption
a. Ajouter une bordure de 5 pixels (par exemple), de couleur rgb(210,200,200) et de rendu en
relief(groove par exemple)
b. Centrer le texte
c. Mettre le texte en majiscule (text-transform :uppercase)
d. Determiner une hauteur du caption de 20 px (par exemple)
e. Determiner un padding de 10 px (par exemple)
2. Pour les cellules td du tableau :
a. Changer la police du texte et la taille
b. Mettre le texte en majiscule
c. déterminer une hauteur et un padding
3. Pour les cellules colorées du tableau (nom, email, choisir un philosophe), changer le background (je
propose la couleur rgb(219,196,196)).

Partie 2

Il est demandé de modifier la structure de l’application web afin d’avoir le rendu suivant :
Page : 2 ANNEE DE FORMATION 2020/2021
 OFFICE DE LA FORMATION PROFESSIONNELLE & DE LA PROMOTION DU TRAVAIL
INSTITUT SUPERIEUR DES TECHNOLOGIES DE L’INFORMATION ET DE LA COMMUNICATION DE SAFI

Et

Page : 3 ANNEE DE FORMATION 2020/2021