STI

4ème année Sciences de l’informatique

Mr Ladhari Tijani

Sousse (Khezama - Sahloul) Nabeul / Sfax / Bardo / Menzah El Aouina /

Ezzahra / CUN / Bizerte / Gafsa / Kairouan / Medenine / Kébili / Monastir /
Gabes / Djerba

www.takiacademy.com 73.832.000
 Informatique

• Rappel HTML5 et CSS3

Afin d’automatiser l’inscription des participant dans une association on se propose de créer une partie
simplifiée d’un site Web
Travail demandé :
Création des pages Web
1) Créer la page web « Index.html » contenant :
• Une division « header »
• Cadre1 : Contient la page « Menu.html »
• Cadre2 : Contient par défaut la page « Acceuil.html » et servira aussi à l’affichage des
autres pages
• Une division « footer » : contient un titre niveau 3 contenant le texte suivant :
Takiacademy 2022/2023 Header

Frame2
Frame1

Footer

2) Dans la page « Menu.html » créer une division < nav > contenant une liste de deux liens
hypertextes
• Accueil : servira de lien vers la page « Acceuil.html »
• Nouveau Participant : servira de lien vers la page « Participant.html »

3) La page « Acceuil.html » est composée par :

a) Un titre de niveau 1 contenant le texte suivant : Développeur Informatique

b) Une section qui composée :
✓ Un article qui contient un paragraphe

Le Développeur Informatique,
autrement appelé Ingénieur
Développement Logiciel est l'expert
des langages de programmation :
• Java
• C, C++
• Python
• JavaScript
• PHP
✓ Une aside qui contient une image

-Page -2
Informatique

4) Créer la page « Participant.html » contenant le formulaire suivant :

Partie CSS

1) Créer un nouveau fichier CSS et l’Enregistrer sous nom « style.css » dans votre dossier de
travail puis Lier ce fichier avec les pages web

Corps principal des pages

➢ Couleur d’arrière-plan #fff8dc

Division « header »
➢ Image d’arrière-plan « developpeur.jpg » répéter selon l’axe x seulement et hauteur de
150px

Cadre 1
➢ Hauteur : 50% ,largeur :20% et sans bordure
➢ Position « absolute » : décalage en haut de 200px et gauche de 10px

Cadre 2
➢ Hauteur : 50% ,largeur :60% et sans bordure
➢ Position « absolute » : décalage en haut de 200px et droite de 10px

La division « footer »
➢ Hauteur : 50px ,couleur d’arrière-plan Brown et couleur du texte #fff8dc
➢ Position « absolute » : décalage en bas de 10px et droite de 10px

La division « nav »
➢ Couleur d’arrière-plan Brown, Hauteur 300px, Bordure solide d’épaisseur 1px
➢ Bordures supérieur droite et inferieur droite arrondies de 50%
➢ Marge interne haut de 100px

Les éléments de la liste dans la

partie Nav
➢ Supprimer les puces de la liste
➢ Marge haut de 20px
➢ Hauteur :30px, Largeur :200px
➢ Couleur d’arrière-plan #fff8dc

-Page -3
Informatique

Les liens hypertexte

➢ Non souligné, Police verdana, de taille 15px, gras et de couleur #F0F01E
➢ Marge gauche de 40px

Le titre niveau 1
➢ Police de taille 30px, gras et de couleur #b22222 , centré

Le paragraphe dans la page « accueil »

➢ Police « Lucida sans » de taille 17 px

Image dans aside

➢ Hauteur : 200px et largeur :200px et bordure arrondie de 50%

Le bloc aside
➢ Changer la position du bloc aside comme indiquer dans l’image du page web
« acceuil.html »

Le formulaire
➢ Les labels et les zones de saisie sont tous de largeur fixe de250px et marges externe de 5px
Page « index.html » résultat

-Page -4