Ingénierie des Données
1ère année - Semestre 1
2024 | 2025
DEVELOPPEMENT WEB
TP N° 2 : HTML & CSS
Exercice 1
Créez une page web qui répond aux exigences suivantes :
▪ Un en-tête principal contenant un titre et un sous-titre.
▪ Une section de contenu avec deux paragraphes.
▪ Une liste non ordonnée contenant au moins 5 éléments.
▪ Une image décorative.
▪ Un bouton en bas de page.
1. Appliquer un style aux titres, ils doivent avoir une couleur spécifique et être centrés.
2. Appliquer un style à un paragraphe important (identifié par une classe), il doit avoir un
fond jaune et une bordure noire.
3. Appliquer un style aux éléments de la liste ayant une classe spécifique, ils doivent être
affichés en italique.
4. Appliquer un style à l'image, elle doit être centrée avec une bordure.
5. Appliquer un style au bouton, il doit avoir une couleur de fond et une bordure arrondie.
Exercice 2
Créez un fichier html nommé taches.html avec la structure suivante :
1. Un Titre premier niveau « Liste des Tâches ».
A. Amalki - K. Boumalek - A.Bakki
Ingénierie des Données
1ère année - Semestre 1
2024 | 2025
2. Une liste de 10 tâches, chaque tâche à un titre et doit être cliquable et permet d’ouvrir la
page ou la section correspondante pour avoir plus de détails pour cette tâche.
3. Appliquer un style général à la page de façon que la police du texte soit : « Arial, sans-
serif ».
4. Appliquer au texte des taches une taille de police de 16px.
5. Appliquer aux tâches impaires la couleur de fond #d1f7c4 (vert clair).
6. Appliquer aux tâches paires la couleur de fond #f0f0f0 (gris clair).
7. Appliquer au tâches multiples de 3 un texte en gras et souligné (ne pas utiliser les balises
<b> et <u>).
8. Appliquer à partir de la 5éme tâche une bordure gauche de 3px en bleu.
9. Appliquer aux tâches visitées la couleur de texte violet.
10. Appliquer aux tâches survolées la couleur de texte orange et souligné.
Exercice 3 (A rendre)
On souhaite réaliser une page HTML sur les météorites. Cette page va regrouper les informations
sur les météorites et aura l’apparence affichée dans la figure 1. Le dossier annexes/exercice1
contient les fichiers meteorites.html et meterorites.css. Vous devez compléter les deux fichiers
pour obtenir le résultat indiqué dans la figure 1.
Meteorites.html
Entête de la page
1. L’entête de la page est déterminé par une balise header.
2. L’entête contient un titre est un menu :
a. Le titre de la page “Les météorites : un phénomène fascinant” est un titrede
niveau 1.
b. Le menu est composé d’une liste de 4 éléments : Introduction, Chiffres
clés, Types de météorites et Météorites célèbres.
c. Chaque élément du menu est un lien qui redirige vers la section (div) de
lapage qui porte le même titre.
A. Amalki - K. Boumalek - A.Bakki
Ingénierie des Données
1ère année - Semestre 1
2024 | 2025
Corps de la page
3. La page est organisée en 4 sections. Les titres de chaque section sont de niveau
2.
4. La section Introduction contient 3 paragraphes.
5. "L'observation des météorites est une voie passionnante pour découvrir les secrets
de notre système solaire et d'autres mondes lointains." est une citationincluse dans
le paragraphe 1.
6. La phrase “Programme des observations de météorites” fait apparaître un lien
hypertexte vers la page suivante : https://www.imo.net/
7. Les éléments de la section “Chiffres clés“ sont structurés sous forme d’une liste.
8. Les chiffres ‘’10-5’’ et ‘’10-6’’ doivent être affiché correctement (-5 et -6
enexposant).
9. Les éléments de la section « Les types de météorites » sont structurés sous forme
d’une liste numérotés.
10. "Météorites en fer”, “Météorites en roche” et “Météorites mixtes” sont affichés en
gras.
11. La section “Quelques météorites connues” contient un tableau que vous devez
structurer comme illustré sur la figure 1.
Meteorites.css
12. La police de caractères des titres est : ‘Lato’, sans-serif.
13. La police du reste de la page est : 'Open Sans', sans-serif.
14. Le texte de la page est justifié et de couleur blanche (#FFFFFF).
15. L’arrière-plan de la page est de couleur grise : #1E1E1E.
16. Le texte du header est centré.
17. Le titre de la page est de taille 400%.
18. La couleur de tous les titres, les liens et des éléments du menu est : # F1C40F (jaune).
19. La première lettre de chaque mot des titres de niveau 2 est en majuscule.
20. Les lien hypertexte ne doivent pas être soulignés.
21. La citation est affichée en gras, italique avec une couleur bleue : #87CEFA.
22. Les puces de la liste de la section ‘’chiffres clés’’ sont affichés sous forme de cercle.
23. Les éléments de la liste de la section ‘’Les types de météorites’’ doivent être
colorés comme illustré sur la figure – couleurs utilisées : #87CEFA et # 9AA5AC.
24. Le tableau doit être coloré comme illustré sur la figure – couleurs utilisées :
a. Entête du tableau : #F1C40F
A. Amalki - K. Boumalek - A.Bakki
Ingénierie des Données
1ère année - Semestre 1
2024 | 2025
b. Éléments de type “FER” et “Mixte” : #5A919B
c. Eléments de type roche : #959386
25. La texte de la première ligne de l’entête du tableau est centrée.
26. Le plus petit poids est coloré en rouge.
27. Les bordures du tableau sont de 2px.
28. L’interligne entre les éléments des listes est de 1.5em.
A. Amalki - K. Boumalek - A.Bakki
