Vous êtes sur la page 1sur 2

Université Cadi Ayyad-Marrakech

Ecole supérieure de Technologie


Safi
TP N°1 : HTML & CSS
L’objectif de ce TP est de réaliser une page HTML et une page de style Css séparée. Le rendu de la page HTML
ressemble à celui-ci :

Commencer par créer la page html.

1) Les caractéristiques principales de la page HTML sont : une image de l’arrière-plan « fond_jaune.png », la
police principale « "Trebuchet MS", sans-serif », et la couleur du texte «#181818 ». Appliquez ce style au
sélecteur « body ».
2) Tout le contenu de la page est regroupé dans une balise div centrée de largeur 900px. Créez le style
correspondant.
3) L’entête de la page (logo + barre de navigation) sont regroupés dans une boite flexible représentée par la
balise « header». elle possède une image d’arrière-plan «separateur.png» répétée seulement en bas du
header tout au long de l’axe des x. « background: url('images/separateur.png') repeat-x bottom; ».
Justifiez et alignez les éléments du header convenablement

jbakkas@gmail.com
4) Les lien de la barre de navigation ainsi que tous les titres du premier niveau sont en majuscule (text-
transform: uppercase;)
5)
6) Les liens du menu principal sont rangés dans une liste non ordonnées (ul), Rendre cette liste flexible sans
aucun style pour les puces avec une marge de 15px entre ses éléments.
7) Affecter les caractéristiques suivantes aux liens du menu principal : (taille de police :1.3em, couleur :
#181818, sans soulignement). Si les liens sont survolés, changer les propriétés suivantes (couleur :
#760001, Bordure du bas de 3px du même couleur).
8) Apres le header, ajouter un conteneur de hauteur de 200px avec l’image « kotoubia.png » en l’arrière-plan
et un alignement des éléments en bas. à l’intérieur ajouter un autre conteneur de couleur de l’arrière-plan
(rgba(24,24,24,0.4) ) qui contient une description et un lien ayant l’image (fond_degraderouge.png) en
arrière-plan.
9) Le corps, au centre de la page, est constitué d'un unique conteneur flexible qui est la balise <section>, dont
les éléments sont alignés au centre avec une marge de 20px en haut. Cette section contient deux balises
<article> et <aside> d’un alignement de texte « justify » et d’une largeur respectivement 650px et 250px.
10) Pour le contenu de la balise <article>, Ajuster la taille de titre et l’alignement vertical de l’icône pour qu’elle
soit au même niveau que le titre. Pour la balise <aside>, le blanc est utilisé comme couleur du texte, et
« #706b64 » est utilisé comme celle de l’arrière-plan. En utilisant les propriétés de positionnement,
positionner convenablement la petite flèche sur le bord gauche de la boite représentée par la balise <aside>
11) Le pied de page représenté par la balise <footer> a trois images en arrière-plan (« ico_top.png »,
« separateur.png » et « ombre.png »). Il est composé de trois conteneurs <div> de largeurs respectivement
27%, 35%,30%. Ajuster la taille de la police pour les trois conteneurs et les bordures et les petites marges
entre les photos pour le deuxième conteneur.
12) Le troisième est conteneur flexible. il contient deux listes <ul> avec l’image de style
« ico_liensexterne.png ».

jbakkas@gmail.com