TP 8 Mme ISSAOUI Hadhami &Mr TALEB Raouf

TP8 CREEZ UN SITE PAS A PAS

Objectifs :

- Construire le squelette HTML de la page.

- Puis, mettre en forme les pages avec CSS.

On désire réaliser un site web pour l’ISET de Gafsa. Pour cela on propose cette page HTML «
index.html » accompagnée d’un style CSS :

Navigation
Entête
Division (id= banniere)
Section
3 articles

Infos complémentaires
Pieds

1
TP 8 Mme ISSAOUI Hadhami &Mr TALEB Raouf

NB :

 L’arborescence de ce site est la suivante :

Dossier Contenu
pages « index.html », et « formulaire.html »
Site « iset-gafsa.jpg», « coordonnees.jpg », « facebook.png » et «
images
twitter.png »
styles « style.css », et « formulaire_style.css »

 La zone de navigation comporte une liste non ordonnée dont les items représentent des liens
hypertextes vers des pages portant le même nom.
 L’entête est lui appliquée l’image d’arrière-plan « iset-gafsa.jpg »

Partie 1 :

On vous demande d’écrire les codes de la page « index.html » et du fichier « style.css » sachant que :

- Si on clique sur le bouton « Ouvrir », la page « formulaire.html » sera affichée.

- Les styles appliqués à « index.html » sont présentés dans le tableau suivant :

Balise Style
Body Largeur 1000 pixel

Marge auto

Police : "sans-serif", Arial

Liste non ordonnée de nav Alignement à droite
Item de nav Pas de puces

Affichage inline

Marge de droite 15 pixels

Lien hypertexte de nav Taille de police 1.3em de couleur noir

Pas de soulignement

Texte en majuscule
Passage de la souris sur le lien Arrière-plan noir
hypertexte de nav
Couleur blanc

2
TP 8 Mme ISSAOUI Hadhami &Mr TALEB Raouf

Entête Position relative

Hauteur 250 pixels

Arrière-plan « iset-gafsa.jpg »

Ombre 0px 4px 4px black

Identifiant « banniere» Position absolue Bas 0 pixel

Largeur 100% Hauteur 50px

Couleur Blanc

Arrière-plan rgba(24,24,24,0.8)

Taille de la police 0.8em

Coins arrondis 0px 0px 5px 5px

Le bouton « Ouvrir » Position absolue de droite 5 pixels de bas 5 pixels

Hauteur 30 pixels

Police de taille 1.2em et de couleur blanc

Arrière-plan marron

Coins arrondis 5 pixels

Curseur forme de la main

Section Position relative

Marge de bas 30 pixels

Titre de niveau 1 de la section Police : Dayrom, serif

Texte en majuscule
Article Alignement justifié
Infos complémentaires Position absolue de bas 3% et de droite 1%

Largeur 300 pixels

Texte de couleur blanc

Alignement centré

Arrière-plan gris

Coins arrondis 5 pixels

Items de infos complémentaires Alignement à gauche

Puces carrés

3
TP 8 Mme ISSAOUI Hadhami &Mr TALEB Raouf

Puces carrés Largeur 600 pixels

Bordures adjacentes

Titre en bas
Cellules de titre Alignement centré

Arrière-plan cyan
Toutes les cellules Bordure 1 pixel de couleur noir
Pied Bordure de haut 1 pixel de couleur noir

Partie 2 :

Il s’agit d’un formulaire d’inscription dont l’aperçu est le suivant :

On vous demande d’écrire les codes de la page « formulaire.html » et du fichier

«formulaire_style.css», sachant que :

4
TP 8 Mme ISSAOUI Hadhami &Mr TALEB Raouf

 Concernant la page « formulaire.html », les remarques suivantes sont à prendre en

considération :

Champ Remarque
Age Valeur comprise entre 18 et 30 avec 22 comme valeur par défaut
Adresse Zone de texte avec 50 caractères par ligne
Spécialité Les valeurs possibles sont dans l’ordre : Gestion, Informatique, Génie
Procédé, Génie Civil, Génie Mécanique
Niveau Les valeurs possibles sont dans l’ordre : L1, L2, L3

 Les styles appliqués à « formulaire.html » sont présentés dans le tableau suivant :

Balise Style
Titre de niveau 1 Centré
form Marge de gauche et de droite auto

Largeur 400 pixels

Espacement de 15px

Couleur de fond rgba(0,0,255,0.5) Police Georgia et de taille

14 pixels

Coins arrondis de 10 pixels

legend Texte en gras, de couleur blanc et de taille 16px
fieldset Bordure noire de 1 pixel
label Texte italique
textarea, select et input Couleur de fond rgba(200,200,255,0.5)

Bordure noire de 1pixel

Texte Georgia de taille 12 pixels

Espacement 5 pixels

Coins arrondis de 5 pixels

Passage de la souris sur les Ombre : 1px 1px 1px blue
boutons submit et reset
Curseur forme de la main