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
TP4 : FORMULAIRES ET CSS
Soit l’application web des TPs 3 : Il est demandé d’effectuer les modifications nécessaires afin que la page
index.html ressemble au rendu suivant :

La structure proposée est la suivante :

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

HEADER
NAV
BANNIERE
SECTION ARTICLE1 ARTICLE2
ARTICLE3 ARTICLE4
FOOTER

Après le Nav, ajouter une image (banniere) qui couvrira toute la largeur de la page
(width :100% ;).
1. Après la banniere, on ajoute la section composée de plusieurs articles, chaque article contient

un extrait de la page adéquate. Chaque article est terminé par un lien Lire Plus qui conduit à la

page correspondante.

1. Le menu sera composé de plusieurs « Boutons » qui ne sont, en fait, que des styles CSS. Le

menu (nav) doit être déclaré comme un block (display :block) .

2. Pour chaque élément du menu (li) il faut déterminer, au minimum :

3. Une couleur d’arrière plan (background-color: rgb(220,190,190)) , une marge intérieure de 5

pixels, une bordure de 2pixels de type solid, un arrondi des bords de 10pixls.

4. Pour avoir un effet de bouton, il faut que l’element li lors de son survol (li :hover) soit declarer

comme block.

5. Reduire la hauteur de chaque element de 20% par exemple (on peut donner une taille fixe 10px

par exemple).

6. Modifier la couleur du background (on propose #D3D3D3 )

7. Modifier egalement la couleur de la bordure (on propose #696969)

8. Reduire egalement la taille du texte lors du survol du lien (a :hover)

Page : 2 ANNEE DE FORMATION 2020/2021