Université Hassan II de Casablanca
École Nationale Supérieur des Arts et Métiers
Filière : IAGI
Matière : Web Statique
TP N° 2 : CCS3
Partie 02
Exercice 1 :
Créez une page en HTML5 [Link] que vous sauvegarderez dans le répertoire tp02_02 et
commencez à la remplir, avec sa déclaration de document, son en-tête et le corps du
document ne contenant qu’un titre de niveau 1 « Introduction au CSS – Partie 02 » :
Vérifiez l’encodage de votre page : attention à déclarer dans votre document Html
que l’encodage est UTF-8, ainsi que lorsque vous sauvegardez votre fichier.
Complétez votre page afin qu’elle contienne les éléments suivants:
1. Le titre de la page « Programmation web » doit se trouver en titre sur le
navigateur ;
2. Un paragraphe de présentation de la page expliquant son objectif, comme
par exemple « Cette page a pour objectif de faire le point sur quelques
informations en Html/Css. ». Une partie de ce texte devra être mise en
valeur en italique ;
3. Un tableau de trois colonnes et au moins 4 lignes présentant plusieurs
éléments.
4. Ce tableau doit comporter la légende « Cours de développement Web » , et
avoir une ligne d’en-têtes comportant « Prénom & nom » en première
colonne, « HTML » en deuxième colonne, et « CSS » en troisième colonne.
5. Remplissez le tableau par les informations correspondantes
6. Un lien vers une autre page, page detail_notes.html, comportant le même
titre, un unique paragraphe contenant le texte suivant : « Cette page est
une page d’examen. », et un lien retour vers [Link].
7. Créez une feuille de style CSS « [Link] » à laquelle vous ferez appel
dans votre fichier Html afin de prendre en compte les éléments suivants
de présentation :
Les titres principaux doivent être de couleur bleue (#58acfa par
exemple) et au centre de la page ;
Le tableau doit :
Comporter une bordure visible bleue
Occupera toute la zone horizontale d’affichage,
Les cellules d’entête seront centrées et écrites en gras et
en blanc sur fond noir,
Les cellules du corps seront en vert clair et en texte
justifié,
Les cellules vides seront d’une couleur différente,
La légende sera positionnée en bas du tableau avec une
couleur « #060 » positionnée à gauche.
Faire en sorte que votre tableau doit ressembler à celui de
la figure suivante:
Université Hassan II de Casablanca : ENSAM :: Filière IAGI - TP N°2 part 02 page 1 | 4
Université Hassan II de Casablanca
École Nationale Supérieur des Arts et Métiers
Filière : IAGI
Matière : Web Statique
Exercice 2: Mise d'un bloc en transparence globale dans feuilles de style CSS3
Écrire une page web permettant de montrer la transparence globale d'un élément (en
avant plan sur un arrière plans contenant du texte).
Pour cela créer:
o un contenu textuel mis dans un paragraphe fils de body,
o Un bloc div,
o un contenu textuel présent dans un second paragraphe placé dans ce div.
Par le style CSS il faut que:
o le premier paragraphe soit placé sous le div,
o les couleurs des fonds soient différentes dans chacun des paragraphes.
Exercice 2’ (optionnel): test des animations en CSS3
Écrire une page HTML contenant :
un titre h1,
un titre h2,
faire en sorte que le titre h2 effectue une série de 20 rotations,
Les rotations impaires se feront en grossissant le titre,
Les rotations paires se feront en réduisant le titre,
Les rotations ne commenceront que 5 secondes après le chargement de la page.
Exercice 3:
Créez un fichier [Link] , la page html sera divisée en 4 blocs, chaque bloc
correspondra à une balise <div> dans le fichier html.
La figure suivante présente la structure de la page à réaliser dans ce TP :
Il faut réaliser 2 fichiers :
[Link] : utilisation de balise <div> pour créer le 4 blocs;
[Link] : nécessaire pour placer correctement le 4 blocs.
N.B :
Utiliser des valeurs en pourcentage pour spécifier les mesures des différents
blocs afin d’obtenir une page web adaptable à toutes les résolutions.
La division en blocs est obtenue en n’utilisant que de balise <div> (pas de
tableau pour structurer la page)
Le fichier de style doit contenir les spécifications pour le texte (police) et la
couleur.
Université Hassan II de Casablanca : ENSAM :: Filière IAGI - TP N°2 part 02 page 2 | 4
Université Hassan II de Casablanca
École Nationale Supérieur des Arts et Métiers
Filière : IAGI
Matière : Web Statique
Exercice 4:
Créez deux pages la première est de type HTML5 ([Link]) et la deuxième est de type
css3 ([Link]).
Ces deux pages contiendront les éléments présents dans la maquette présentée ci-
dessous.
Dans la deuxième page créez le code CSS qui va permettre de réaliser une mise en page
correspondant à l’illustration suivante :
Vous réalisez cet exercice de deux façons, en utilisant : le positionnement absolu et
le positionnement relatif.
Utilisez le code html créé précédemment et créez le code CSS qui va permettre de
réaliser une mise en page correspondant à l’illustration suivante :
Université Hassan II de Casablanca : ENSAM :: Filière IAGI - TP N°2 part 02 page 3 | 4
Université Hassan II de Casablanca
École Nationale Supérieur des Arts et Métiers
Filière : IAGI
Matière : Web Statique
Exercice 5:
Créer un document web avec un modèle basé sur l’utilisation de nouveaux éléments
sémantiques HTML5 d’organisation des contenus, càd des éléments de section.
([Link]
La mise en page globale (design) sera contrôlée par une approche CSS simple, soit la
propriété float pour des éléments de type block, ou de préférence, en utilisant la
propriété display de valeur inline-block, et en fixant la largeur width des éléments.
La figure suivante doit être reproduite :
Dans une deuxième page « [Link] », créez le code html et le code CSS qui vont
permettre de réaliser l’illustration suivante :
Indication : il est recommandé de créer un nouveau dossier dans vos documents, qui
contiendra les fichiers de votre site.
Pour avoir en résultat une page qui ressemble à la figure suivante :
Université Hassan II de Casablanca : ENSAM :: Filière IAGI - TP N°2 part 02 page 4 | 4