HESTIM Casablanca Année universitaire 2021/2022

Génie informatique Dr. Ibrahim Bouabdallaoui

Conception des sites web

TP 2 : HTML (Images et Tables)

1. Insérer l’image « logo.jpg » dans le haut de page avec un width = 100% et en définissant un ID
pour créer une zone pour les clics en utilisant l’attribut usemap.
• Définir une zone pour les clics en utilisant les balises <map> et <area> avec des coordonnées
de "0,0,1500,300".
2. Insérer l’image « menu.jpg » au-dessous de l’image « logo.jpg » avec un width= 100% et en
définissant un ID pour créer une zone pour les clics.
• Définir une zone pour cliquer sur la partie « Home » en utilisant les balises <map> et <area>
avec des coordonnées de "345,17,440,50", en définissant une référence à la page
« home.html ».
• Définir une zone pour cliquer sur la partie « About » en utilisant les balises <map> et <area>
avec des coordonnées de "490,17,560,50", en définissant une référence à la page
« about.html ».
• Définir une zone pour cliquer sur la partie « Projects » en utilisant les balises <map> et
<area> avec des coordonnées de "630,17,725,50", en définissant une référence à la page
« projects.html ».
• Définir une zone pour cliquer sur la partie « Services » en utilisant les balises <map> et
<area> avec des coordonnées de "795,17,885,50", en définissant une référence à la page
« services.html ».
• Définir une zone pour cliquer sur la partie « Contacts » en utilisant les balises <map> et
<area> avec des coordonnées de "957,17,1055,50", en définissant une référence à la page
« contacts.html ».
3. Créer un ensemble d’images (« slider-1.jpg », « slider-2.jpg », « slider-3.jpg », « slider-4.jpg ») qui
tournent automatiquement en caroussel en utilisant la balise <marquee>
4. Créer un tableau avec des bordures invisibles pour définir 4 parties :
a. Partie 1 : le mot STANDARD en gras avec l’insertion de l’image « page1-img1.jpg » , la
rédaction du paragraphe suivant : « Standard : défintion, synonymes, citations,
traduction dans le dictionnaire de la langue française. Défintion : Normalisé, conforme »
b. Partie 2 : le mot PRINCIPES en gras avec l’insertion de l’image « page1-img2.jpg » , la
rédaction du paragraphe suivant : « Un principe est une idée ou chose source ou
fondement d'autres choses ou idées. On parle ainsi de l'âme comme principe de vie »
c. Partie 3 : le mot EXPERIENCE en gras avec l’insertion de l’image « page1-img3.jpg » , la
rédaction du paragraphe suivant : « D'un point de vue très théorique, une expérience est
un engagement dans une situation de mise à l'épreuve d'un élément d'ordre spéculatif,
souvent appelé hypothèse lorsqu'elle s'inscrit dans un système logique.»
d. Partie 2 : le mot CLIENT REVIEWS en gras avec l’insertion de l’image « page1-img2.jpg » ,
la rédaction du paragraphe suivant : « Un client, au sens économique, désigne la
 personne ou l'entité qui prend la décision d'acheter un bien ou un service, de façon
occasionnelle ou habituelle, à un fournisseur.»
5. Créer un titre souligné et centré au milieu de la page « Produits disponibles »
6. Créer la table suivante :

Image de Quantité
Produit
Produit disponible

Brocolis 41Kg

Pomme
100Kg
de terre

Banane 1T

7. Créer un paragraphe souligné centré au milieu de la page « Une table avec les cellules
fusionnées »
8. Créer la table suivante :

9. Créer un titre souligné centré au milieu de la page « Comparatif modèle économique»

10. Créer la table suivante :