Département GI
Module : web avancé et PHP
Travaux Pratiques du web avancé
et PHP
Chapitre 2 : CSS3, JavaScript, Ajax et
JQuery et JSON
Exercice 1
Créer une page web comportant le texte ci-dessous, de couleur noire au chargement, doit
prendre la couleur :
1. rouge au passage de la souris ;
2. citron vert (lime) en réponse à un click ;
3. bleu marine (navy) en réponse à un double click.
Meknès est une ville du nord du Maroc fondée en 711 par la tribu amazighe des Meknassas, qui lui a
donné son nom. Elle est l'ancien chef-lieu de la région administrative de Meknès-Tafilalet et
actuellement l'un des deux poles urbains de la région Fès-Meknès dans le nord du pays. Il s'agit de
l'une des quatre villes impériales du Maroc et la troisième plus grande ville du royaume selon le
recensement de 2014. Elle fut la capitale du Maroc durant le règne de Ismaïl ben Chérif (1672-1727).
La ville historique de Meknès est placée sous la protection de l'UNESCO depuis 1996.
Exercice 2
Créer la page web ci-dessous, d'une largeur de 500 pixels. En cliquant sur ce paragraphe, il doit
s'afficher grosso-modo au centre de la page, avec un mot par ligne. Le double click doit permettre de
revenir au format initial (aligné à gauche, occupant une largeur de 500 pixels).
Meknès est l'une des quatre villes impériales du Maroc. La médina de Meknès est classée depuis
1996 Patrimoine mondial de l'UNESCO et connait depuis lors diverses opérations de restauration des
sites (murailles, portes, ruelles, places publiques…). Elle est maintenant digne des plus grandes villes
méditerranéennes et arabes, du fait de sa diversité culturelle. La fameuse place Lahdim a connu, en
2007, deux opérations de restauration et rénovation ; une autre rénovation est en cours.
Page 1 sur 2
Dr. Yassine Rhazali
Exercice 3
Créer une page web qui contient l’image 1.png centré. Puis :
1. Afficher l’image 2.png lors de passage de la souris ;
2. Afficher l’image 3.png en réponse à un click ;
1.png 2.png 3.png
Exercice 4 :
En se basant sur CSS JavaScript et jQuery réalisez la page ci-dessous
Créé 5 boutons et un rectangle. Chaque bouton provoque une action sur le rectangle.
• Bouton 1 : augmente la hauteur de 10px, s’il dépasse 100px, il remet la hauteur à 10px
• Bouton 2 : met le rectangle en vert
• Bouton 3 : remet les couleurs initiales
• Bouton 4 : fait disparaître le rectangle
• Bouton 5 : fait afficher le rectangle
Exercice 5
Réaliser un programme à l’aide de Ajax qui permet de se déplacer entre les CDs de fichier xml utilisé
dans le cours.
Page 2 sur 2
Dr. Yassine Rhazali
