Domaine d’apprentissage : Systèmes, Technologie et internet
Mini-Projet : E3mar Palestine
Objectif :
▪ Réaliser une mise en page avec zoning (header, aside, section, footer).
▪ Créer un menu horizontal.
▪ Comprendre l'utilisation de chaque technique pour la structure d'une page.
▪ Manipulation de iframe
▪
Important :
Tous les fichiers solutions à ce sujet doivent être enregistrés au fur et à mesure dans votre
dossier de travail.
Tous les codes CSS devront être développés dans un fichier externe intitulé « style.css »
Toutes les pages contiendront la même entête (image logo et menu des liens qui servira à
référencier toutes les pages du site web) et le même pied de page(contacts).
Sujet : Une association de soutien à la cause palestinienne « E3mar Palestine » souhaite organiser
une collecte de dons. Pour cela, elle prévoit de développer un site web composé de trois pages.
Travail demandé :
1.créer la page web nommée « index.html » dont le contenu est le suivant :
E3mar Palestine
Zone 1
La cause
Zone3
Boycotte
Dons
Zone 2
Contact :Tél :71100100
Zone 4 Email :
[email protected] 1
Sachant que :
Zone 1 : un élément <Header> qui représente l’entête du site et contenant le texte « E3mar
Palestine » comme étant un titre niveau 1 et une image.
Zone 2 :un élément <nav> qui représente le volet de navigation et contenant les liens
hypertextes suivants :
La cause (servira comme lien vers la page « cause.html »)
Boycotte (servira comme lien vers la page « boycotte.html »)
Dons (servira comme lien vers la page « Dons.html »)
Zone 3 : un élément <section> qui représente la zone d’affichage des différentes pages
web(Iframe).
Zone 4 : un élément <footer> qui représente le pied de page du site et contenant le texte
suivant : « Contact :Tél :71100100 / Email :
[email protected] »
2.créer la page web nommée « cause.html » dont le contenu est le suivant :
Présentation de la cause palestinienne
Le conflit israélo-palestinien est
donc né de la création d'un nouvel
État revendiquant sa souveraineté
sur une terre et de l'expulsion du
peuple qui habitait cette terre. La
guerre de 1967, qui a été un
moment charnière, n'était autre
qu'une affaire de conquête de
territoires
3. créer la page web nommée « boycotte.html » dont le contenu est le suivant :
En soutien à la cause palestinienne, il est essentiel de boycotter les produits
israéliens, une méthode de résistance pacifique pour faire pression contre
l'occupation. Liste des produits a boycotté :
McDonald's en toute franchise.
L'Oréal
Esthée Lauder
Chanel
Caterpillar
Zara.
Ect…..
2
4. créer la page web nommée « Dons.html » dont le contenu est le suivant :
Votre contribution peut faire la différence pour les familles palestiniennes.
Aidez-nous à soutenir les actions humanitaires sur le terrain en effectuant
un don.
Votre Pays :
Montant :
N° de carte bancaire
Date .EXP
5.Créer une feuille de style nommée « style.css » en respectant les réglés ci-dessous :
Objet Description
.titre Aligner au centre
header Couleur d’arrière-plan : silver, Bordure arrondie : 5px, marge extérieur bas :2px
image Flottante à gauche, largeur :150px, hauteur :70px, Couleur d’arrière-plan :
silver, marge intérieur : 10px
section Flottante à droite, largeur : 89%, hauteur :350px, Couleur d’arrière-plan :
rgb(235, 70, 11); Bordure arrondie :10px ; marge extérieur bas :2px
nav Flottante à gauche, largeur :10%, hauteur :350px, Couleur d’arrière-plan :
#9aac7a, Bordure arrondie :10px
tableau Bodure : 2px solide blanc , type de bordure : collapse, Bordure arrondie :1px,
marge extérieur haut : 3%, marge extérieur gauche :20%, marge extérieur
droite :20%, texte centré .
td Couleur blanc, centré
.hist largeur :300px , hauteur :200px
.lien Liste sans puce
3
a :link Couleur noir
a :visited Couleur blanc
Lien Police gras, marge externe haut :5px, marge externe bas :5px,
paragraphe couleur blanc, marge externe gauche :15px
Nav ul li Disposition block
iframe Sans bordure
Annexe
Page index.html
Définit où ouvrir le lien
Nom de iframe
Nom de iframe
La page qui s’affiche
par défaut.
Remarque : L'élément HTML <iframe> représente un contexte de navigation imbriqué qui
permet en fait d'obtenir une page HTML intégrée dans la page courante.
4
Exp : <iframe src="demo_iframe.htm" height="200" width="300" name="des" ></iframe>
Page cause.html
Page boycotte.html :
5
6
