TP 

: rappel HTML et CSS

L’objectif de ce TP est de se rappeler sur les différentes balises nécessaires en HTML et le langage
CSS :

Le résultat de notre TP sera la création d’une page web qui comporte un CV :

o Créer un dossier « TP HTML et CSS », mettre dedans le dossier images puis créer dans le
dossier « TP HTML et CSS » un fichier index.html et un autre fichier style.css.

Partie1 : création du fichier index. HTML :

1. Ouvrir le fichier index.html dans votre éditeur de texte
Tapez le code de création d’un fichier html en lui donnant comme titre Réalisation de CV et en
indiquant le lien vers la page style.css.
1. En utilisant la balise main et header dans le corps de la page(body), ajouter l’image 01.png
dans un conteneur (div qui a comme attribut la classe photo) avec propriétés de l’image 100%
de longueur et largeur puis ouvrez la page dans un navigateur

2. Ajouter un autre conteneur div qui a comme attribut la classe des, puis ajouter dedans un titre
de niveau 3 (h3) portant votre nom, ensuite ajouter un paragraphe qui a comme attribut la
classe post portant : Développeur web et mobile.

3. Ajouter un conteneur div qui a comme attribut la classe right puis ajouter 3 paragraphes
chacun contient une image qui a comme attribut la classe info indiquant : votre email, votre
adresse et votre téléphone.

4. Au-dessous de la balise header :

 Ajouter une balise section avec la classe section-left
 Ajouter un titre Atouts de niveau 4
 Ajouter une ligne hr ayant comme attribut la classe light
 Ajouter un div ayant comme att la classe atouts puis ajouter dedans deux div portant
successivement : travail d’équipe et adaptabilité/flexibilité.
  Ajouter un titre Diplômes et Formations de niveau 4
 Ajouter un ligne hr ayant comme attribut la classe light
 Ajouter un conteneur div ayant comme attribut la class div
 Ajouter dans le div précédemment créé un autre div
 Ajouter dans le prédant un autre div

Vous pouvez recopier le code pour ajouter d’autres diplômes ou formations.

5. Ajouter un autre titre Expériences professionnelles

Vous pouvez aussi recopier le code pour ajouter d’autres expériences professionnelles.

6. Au-dessous de la fin de la 1ére section ajouter une autre section ayant comme attribut la
classe section-right
 Ajouter un titre compétences de niveau 4
 Ajouter une ligne de la classe light

Ajouter plusieurs compétences en recopiant le code précédant à partir du div class= "po".
7. Ajouter un autre titre pour les langues de niveau 4 puis saisir le code suivant :
8. Ajouter un autre titre Réseaux sociaux de niveau 4

9. Ajouter un dernier titre Centres d’intérêts de niveau 4

10. Et en fin ajouter un conteneur div sous la fin de la dernière section ayant comme attribut la
classe srkl puis ajouter une ligne hr ayant comme attribut la classe light.

Partie2 : création du fichier style.css

1) Ouvrir le fichier style.css dans l’éditeur du texte
2) Donner les valeurs : Verdana, Segeo IU,Tahoma à la police de la balise body

3) Donner pour la balise main les propriétés suivantes :

La propriété CSS box-shadow ajoute des ombres à la boîte d'un élément via une liste d'ombres
séparées par des virgules.
4) Donner les propriétés suivantes à la classe srkl :
5) Donner à la balise header un hauteur de 160 px,un padding-top de 10 px,une couleur
d’écriture blanche et une couleur d’arriére plan #333:

6) Donner à la classe photo une marge horizontale à gauche de 7%, border-radius de 50%,une
largeur et longueur de 130px,et un overflow hidden :

 La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément

 La propriété CSS overflow est une propriété raccourcie qui définit comment gérer le
dépassement du contenu d'un élément dans son bloc

7) Donner les propriétés suivantes à la classe des :

8) Donner à la balise h3 les propriétés suivantes :

9) Donner les propriétés suivantes à la classe post :

10) Donner les propriétés suivantes à la classe right :

11) Ajouter au paragraphe attribué par la classe right les propriétés suivantes :

12) Donner à la classe info les propriétés suivantes :

13) Donner les propriétés suivantes à la classe section-left :

14) Donner les propriétés suivantes à la classe section-right :

15) Donner les propriétés suivantes à la balise h4 :

16) Ajouter les propriétés suivantes à la balise hr attribué par la classe light :

17) Donner les propriétés suivantes à la classe atouts :

18) Donner les propriétés suivantes à la classe div :

19) Donner les propriétés suivantes à la classe skls :

20) Donner les propriétés suivantes à la classe cool :

21) Ajouter les propriétés suivantes à la classe po :

22) Donner les propriétés suivantes à la balise strong :

23) Donner les propriétés suivantes à la classe inner :

24) Donner les propriétés suivantes à la classe interet :

25) Donner les propriétés suivantes à la balise span :