Université Moulay Ismail Année universitaire : 2017/2018

Faculté Polydisciplinaire Errachidia Filière Génie Informatique

Prof Yousef FARHAOUI

TP N°2 (Langage HTML/CSS)

Première partie:
1. Comment décririez-vous en HTML le tableau suivant ? Le tableau prend toute la largeur de la
page, le bandeau supérieur fait 100 pixels de haut, et la première colonne fait 20% de la largeur.

titre
tdm contenu

2. Décrivez la même structure avec un frameset

3. Écrivez une feuille de style comportant les caractéristiques suivantes :

1. Le fond de la page est blanc, l'image de fond est "paper.gif", elle se répète
horizontalement et verticalement, la marge à gauche est de 2cm, la police utilisée pour le
corps du document est Arial (ou Helvetica, ou toute autre police sans sérif) en taille 12pt.
2. les éléments de liste ordonnée sont (OL) écrits en bleu
3. Les paragraphes de classe "important" sont écrits en rouge.
4. les éléments de sous-liste (liste incluse dans une liste) sont écrits en vert.

Deuxième partie:
Réalisez un mini site Web sur la ville d’Errachidia comprenant
• Une page histoire.html qui contient le texte contenu dans le fichier histoire.txt et qui incorporera
l’image histoire.jpg
• Une page general.html, reprenant le texte du fichier general.txt. De plus, un petit sommaire devra
être présent en haut de la page et devra contenir des liens renvoyant vers chaque section. De plus,
un lien « Retour vers le sommaire ».
• Une page plan.html qui contient uniquement un plan d’Errachidia (le fichier plan.jpg et un titre)
• Galerie Photo qui contient les images contenu dans le dossier images.
• Ajoutez à votre site une page statistique contenant le tableau suivant. Vous utilisez dans ce tableau
les attributs width, cellpading, cellspacing et border afin de le rendre plus présentable.

Prof Y farhaoui Page 1/3 TP2 M616:Programmation Web

 • Ajoutez à votre site une page Contacts contenant le formulaire suivant :

• Et enfin une page d’accueil index.html qui doit contenir le texte contenu dans errachidia.txt et un
sommaire du site dont les éléments pointeront vers chacune des pages ci dessus. Par ailleurs,
chacune des pages du site, hormis le sommaire, doit contenir un lien vers la page index.html.
Vous choisissez une présentation standard pour le site, avec notamment une couleur de fond.
Tous les fichiers nécessaires (notamment les images) se trouvent dans le répertoire minisite sur le
bureau.

1. Renseignez convenablement l’entête de votre page d’accueil. Vous indiquez en particulier les
informations suivantes (meta) :
• Le nom de l’auteur ;

Prof Y farhaoui Page 2/3 TP2 M616:Programmation Web

 • Les mots clés (errachidia, histoire) ;
• Et une description (Ce site raconte l’histoire de la ville d’errachidia) ;

2. Ajoutez aux pages de votre site un menu sur la gauche qui pointe vers les différentes pages de
votre site, ainsi qu’une cellule de titre Errachidia : Capitale de la Région du Drâa-Tafilalet
en haut. Les pages de votre site auront donc la structure suivante. Vous veillerez à ce que votre
site soit coloré.

Errachidia : Capitale de la Région du Drâa-Tafilalet

votre menu Le contenu de la page

3. Appliquez une présentation sur l’ensemble de votre site. Chaque page devra avoir un titre et un
menu. Vous choisissez une présentation qui utilisera (feuille de style):
• Une couleur de fond ;
• Une présentation particulière pour votre titre (couleur, taille du texte…) ;
• Une présentation pour le menu (au choix, horizontal ou vertical) ;
• Les images devront être entourées d’un contour noir ;
• Une présentation pour les titres intérieurs de votre document (h1, h2 et h3) ;

Prof Y farhaoui Page 3/3 TP2 M616:Programmation Web