Développement Web & Multimédia Enseignante:

3éme G.Informatique N. OUERHANI

AU : 2021/2022

TP2: CSS3

1. Structuration d’une page HTML

Créer une nouvelle page web tp2.html et enregistrer-la dans un dossier

(ex:TP2devweb).
Ajouter, pour l'instant, 4 balises div dans le body de la page.
Chacune de ces balises représentera un bloc (une zone) comme le montre
l'aperçu suivant :

1
2. Régler le problème de padding

Lorsqu'un padding est ajouté à un bloc par défaut ce padding va élargir ce

bloc (horizontalement ou verticalement).

Pour fixer la largeur ou la hauteur d'un bloc lorsqu'on lui assigne un

padding on ajoute au style du bloc les propriétés CSS suivantes :

-webkit-box-sizing: border-box; /* Safari/Chrome,... */

-moz-box-sizing: border-box; /* Firefox */

box-sizing: border-box; /* Opera/IE 8+ */

Si on veut appliquer ces propriétés à tous les sélecteurs et bloc on attribue

ce style au sélecteur universel * { ... }

3. Utilisation des balises de structuration HTML5 :

Substituer les balises de bloc div dans le body par les balises de
structuration HTML5 comme le montre l'image aperçu aide. N'oublier pas
d'affecter chaque style CSS à chacune de ces balises de structuration.

1. <header>
2. <aside>
3. <section>
4. <footer>

4. Le menu de navigation :

Dans le bloc d'en-tête, ajouter un menu de navigation correspondant à

celui en aperçu.

Définir les différents styles CSS nécessaires (y compris au survol avec le

sélecteur a:hover).

Remarque : on peut définir un style CSS pour un seul côté de la bordure

d'un sélecteur.

2
5. Le bloc aside:
● Il contiendra respectivement une image (dont la hauteur est
inférieure de 10 pixels de la hauteur du bloc) suivi d'un titre h1 mis
en forme.
● L'image aura un cadre blanc de largeur 5 pixel.
● Ajouter la propriété CSS display:flex; au style de ce bloc pour
aligner horizontalement l'image et le titre.
6. Le 3 zones bloc du contenu :
● Ajouter 3 blocs (balise article) imbriqués dans la balise section.
● Chaque article à une hauteur, largeur, et couleur arrière plan (voir
aperçu-aide pour les valeurs).
● Ajouter la propriété CSS display:flex; au style de section pour
aligner horizontalement les 3 blocs article.
● Pour centrer verticalement les 3 blocs article, ajouter au style de
section la propriété : align-items: center;
● Pour centrer horizontalement les 3 blocs article, ajouter au style de
section la propriété : justify-content avec la valeur
space-around ou bien center.
➔ Pour la valeur center, ajouter une marge droite au premier et
deuxième article seulement.
● Chaque zone bloc contiendra une image png aligné à gauche puis
habillé par un titre h3 et un paragraphe de coté droit de l'image.
Penser à utiliser la propriété float : left; pour l'image.

7. la zone pied de page :

Ajouter du texte et le mettre en forme.

3
Aperçu du résultat attendu