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
