Université Mohammed Premier - Oujda

Ecole Nationale des Sciences Appliquées d’Oujda

Module : Programmation Web AU :2023/2024

Filière : IDSCC-3
Travaux Pratiques N°2

Exercice 1 :

Pour cet exercice vous aurez besoin du fichier EX1.html

1. Un background de couleur bleu ciel (couleur RGB ou HEXA), une largeur de 500px, un retrait
de 5px, et un alignement centré pour l’élément identifié par “layout”.
2. Aligner le texte à gauche pour la classe “gauche”, à droite pour la classe “droite” et justifié
pour la classe justifiee.
3. Colorer le texte en bleu pour les éléments h2 et button, et les éléments de p en rouge.
4. Changer la taille du titre à “1.5em” en affichant la première lettre de chaque mot en capitale.
(essayé l’attribut text-transform avec les valeurs (capitalize, uppercase, lowercase)
5. Affecter une couleur jaune au background du bouton, et une largeur de 100px.

Exercice 2 :

Pour cet exercice reprendre le fichier EX2.html ensuite sans modifier le code HTML (ajouter
uniquement du code CSS) modifier la page HTML pour avoir le même rendement que celui dans
l’image suivante :
 Université Mohammed Premier - Oujda

Ecole Nationale des Sciences Appliquées d’Oujda

Exercice 3 :

Dans cet exercice vous devez reproduire le même style disponible dans l’image suivante (utilisé
n’importe quelle texte)
 Université Mohammed Premier - Oujda

Ecole Nationale des Sciences Appliquées d’Oujda

Exercice 4 :

Reprendre le fichier EX4.html et appliquer les styles CSS ci-dessous :

1. Un retrait gauche de 20px pour tous les paragraphes descendants de la classe "article".
2. Un background de couleur jaune pour les paragraphes frères directs du titre "h2" (qui
se trouvent immédiatement après h2) .
3. Une bordure noire et solide pour les paragraphes et titre "h2".
4. Une couleur verte pour les paragraphes fils des éléments "li".

Exercice 5 :

Reprendre votre CV du TP1 et modifier le pour avoir le même rendu que l’image suivante :

• Modifier la police par défaut (utilisé une police personnalisée)

• Ajouter une bordure et une ombre sur l’image + sur chaque section

• Ajouter une image de fond