[PROGRAMMATION WEB 2] TI1
TP1– Partie 1 : Rappel sur les cadres
Le but de ce TP est de réaliser un petit site web en utilisant différentes techniques web.
Ce TP sera divisé en 3 parties :
Partie 1 : On va utiliser les cadres (frameset)
Partie 2 : On va utiliser les balises <div> et les feuilles de styles.
Partie 3 : On va utiliser les nouveautés de HTML5 et CSS3.
Dans cette première partie, on se basera sur la notion de cadres et le site aura l’allure suivante :
La page index.html
Créez les pages suivantes en suivant les indications données :
1. La page entete.html
La page est de couleur de fond «#F3DB9C».
L’image «photo.jpg » doit se trouver dans un dossier qui s’appelle « images » qui se trouve
au niveau de la racine de l’arborescence de votre site.
L’image «photo.jpg » aura 160px de hauteur et de 120px largeur.
Publicité
Le titre est centré à gauche et de taille 1 (h1).
Le sous-titre est centré et de taille 2 (h2).
ISET DE BIZERTE 2014-2015 | TP1 – Partie 1 - Rappel sur les cadres 1
[PROGRAMMATION WEB 2] TI1
Utilisez un tableau pour organiser l’image et les titres pour qu’ils correspondent à l’allure
de la page « entete.html ».
2. La page menu.html
La page est de couleur de fond «#F8E4B1».
Le titre « Menu » est centré à gauche et de taille 2.
Vous mettez le menu dans un tableau.
Le menu « accueil » faisant un lien sur la page « index.html » qui s’ouvre dans la totalité de
la fenêtre courante. Les sous-menus « Mon CV », « Mes Projets », « Inscrivez-vous » et
« Contactez-moi » font des références sur les pages respectivement « MonCV.html »,
«MesProjets.html », « Inscrivez-vous.html » et « Contactez-moi.html » qui s’ouvrent toutes
dans le cadre nommé « contenu ».
Publicité
3. La page contenu.html
La page est de couleur de fond «beige».
Les 3 titres sont centrés et de taille 2.
Les paragraphes sont centrés.
Insérez après les deux premiers paragraphes un trait de largeur 60%.
4. La page footer.html
La page est de couleur de fond «#F3DB9C».
Le paragraphe est centré.
L’expression « [email protected] » fait un lien sur l’émail : [email protected]
ISET DE BIZERTE 2014-2015 | TP1 – Partie 1 - Rappel sur les cadres 2
[PROGRAMMATION WEB 2] TI1
5. La page index.html
La page « index.html » aura l’allure suivante :
Cadre entête 25%
Publicité
Cadre menu
15%
Cadre contenu 85%
Cadre footer 15%
Vous mettez dans le cadre entête la page « entete.html », dans le cadre contenu la page
« contenu.html », dans le cadre menu la page « menu.html » et dans le cadre footer la page
« footer.html ».
Supprimez les bordures.
Annexe : Rappel sur les cadres
Afin de créer un site contenant des cadres, il suffit de créer un fichier contenant l'agencement des cadres
: ce fichier HTML a pour particularité d'avoir un conteneur <FRAMESET> à la place du jeu de
balises <BODY>. C'est cette balise qui définit les cadres par leur dimension en pixels ou en
pourcentage (%).
Quelques exemples :
<FRAMESET COLS="20%, 80%">
Publicité
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAME SRC="frame2.htm" NAME="droite">
</FRAMESET>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="frame1.htm" NAME="haut">
<FRAME SRC="frame2.htm" NAME="bas">
</FRAMESET>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm" NAME="droit_haut">
<FRAME SRC="frame3.htm" NAME="droit_bas">
</FRAMESET>
ISET DE BIZERTE 2014-2015 | TP1 – Partie 1 - Rappel sur les cadres 3