Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi

Soit la page TP4.htm suivante :

On veut Appliquer des modifications de style pour obtenir l’aperçu suivant :

Classe : 3SI Matière : STI

1
Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi

1. Lancer Sublim Text 3 et créer un fichier intitulé TP4.html.

2. Le titre de la page est « TP4 »
3. Mettre les métadonnées nécessaires pour que la page puisse être indexée
par un moteur de recherche et affichée par les appareils mobiles :
a. Meta name = "description" …
b. Meta name="keywords" …
c. Meta name="author" …
d. Meta name="viewport" …
4. Créer le titre de niveau 1 « Travaux pratiques N°4 » dans la zone entête de
la page web.
5. Créer la première section contenante :
a. Un titre de niveau 3 (Titre 1 : Lorem ipsum dolor)
b. Une image représentant le logo de HTML5 ayant l’identificateur "i1".
c. Une zone indépendante (aside) contenant du texte brut.
d. Deux paragraphes ayant comme identificateurs p1 et p2.
6. Créer la deuxième section contenante :
a. Un titre de niveau 3 (Titre 2: Pellentesque habitant)
b. Une image représentant le logo de CSS3 ayant l’identificateur "i2".
c. Un paragraphe ayant comme identificateur p3.
d. Une liste ordonnée :

e. Un paragraphe ayant comme identificateur p4.

7. Créer un pied de page contenant les renseignements d’usage : le nom de
l’auteur, son mail et le copyright 2021-3SI-STI-TP4.
8. Créer un fichier CSS externe et renommer-le par tp4.css.
9. Mettre en forme le titre <h1> au centre de la page avec une taille de 4em
ayant une ombre rouge de 4 pixels située au-dessus et à droite avec un flou
de 2 pixels.

Classe : 3SI Matière : STI

2
Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi

10. Mettre les titres <h3> à gauche avec une taille de 2em ayant une ombre grise
de 5 pixels située au-dessus et à droite avec un flou de 4 pixels. Le style
étant en italique.
11. Créer une lettrine pour chaque paragraphe de la page de taille 40 pixels,
de style italique et de couleur « magenta ».
12. Ajouter une classe « para » ayant les règles CSS ci-dessous et l’appliquer à
tous les paragraphes de la page :

13. Personnaliser la présentation de la liste ordonnée <ol> et fixer l’indentation

à la valeur de 15ex et appliquer un style de position "inside".
14. L’image ayant comme identificateur "i1" doit être positionnée flottante à
gauche avec des marges de 20 pixels et dimensionnée avec une largeur et
une hauteur de 10%.
15. L’image ayant comme identificateur "i2" doit être positionnée flottante à
droite avec des marges de 10 pixels et dimensionnée avec une largeur et
une hauteur de 8%.
16. La zone indépendante <aside> est flottante à droite, dimensionnée avec une
largeur de 200 pixels, munie d’une bordure en rouge de taille 2 pixels
solide et des marges de 10 pixels. Le texte de la zone est en italique et
l’arrière-plan est de couleur ayant pour code hexadécimal #CCC.
17. Le pied de la page doit être au centre et de couleur d’arrière-plan orange.

Classe : 3SI Matière : STI

3