[PROGRAMMATION WEB 2] TI1
TP1– Partie 2 : Rappel sur les divisions et les feuilles de styles
Dans cette deuxième partie, nous allons réaliser les deux pages web correspondant aux
maquettes données ci-dessous en utilisant les balises <div> et les feuilles de style css.
Les pages du site auront l’allure suivante :
Fig1 : index.html
Fig1 : index.html
Fig2 : inscription.html
Publicité
ISET DE BIZERTE 2014-2015 | TP1 – Partie 2 – DIV & CSS 1
[PROGRAMMATION WEB 2] TI1
La première chose à faire est de distinguer les principaux blocs sur la maquette. Ces blocs vont
constituer le squelette de notre page.
- Créez deux pages en HTML « index.html » et « inscription.html ».
- Créer dans chaque page 5 blocs <DIV>…</DIV> selon la maquette ci-dessous (Fig3):
Bloc 2
Bloc 1
Bloc 3
Publicité
Bloc 4
Bloc 5
Fig3 : Principaux blocs
- Créez une page en CSS «style1.css » qui permet de positionner les balises <DIV> selon le
modèle de la figure Fig3.
NB : tous les fichiers « .css » devront être enregistrés dans un dossier « styles » .
- Liez la feuille de style « style1.css » aux deux pages « index.html » et « inscription.html ».
- Dans la page « index.html », compléter chaque bloc par le contenu approprié en l’adaptant
Publicité
à vos informations personnelles (nom, courriel, qualités, hobbies, …)
o
le bloc entête contient votre photo (de préférence), un titre et un paragraphe.
o Le menu du bloc latéral gauche contiendra un ensemble d’éléments. Chaque
élément est un lien vers une page web.
o Le bloc pied de page contient des paragraphes et un lien pour envoyer un mail.
- Créez une page en CSS «style2.css » qui permet de modifier l’apparence des pages
« index.html » et « inscription.html » selon le modèle des figures Fig1 et Fig2.
Publicité
Annexe : Quelques propriétés css
overflow, width, position, height, display, font-family, font-size, line-height, border, font-weight,
color, padding, background-color, border-top, text-transform, clear, margin-right, border-
bottom, margin, top, left, float, text-decoration.
ISET DE BIZERTE 2014-2015 | TP1 – Partie 2 – DIV & CSS 2