Activité 03 - Mon CV

Activité 03 – HTML5/CSS (Mon CV)
Dans cet exercice, vous aurez des informations génériques que vous remplacerez par vos
propres informations.
Vous allez préparer une demi carte photo carrée (de préférence 200X200 mais peu importe la
taille dès le moment qu’elle est carrée). Cette carte photo doit être mise dans le dossier du projet
que je vous enverrai avec ce document.
Maintenant jetons nous à l’eau.
1- Lancez Visual Studio Code ou un autre éditeur de votre choix (moi j’utiliserais VSCode
pour ce projet)
2- Créez un fichier (monCV.html) et un autre (style.css). Rassurer vous que vous avez
effectivement le type de fichier souhaité.
Dans le fichier .html, inserrer le code minimal suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title> mon CV </title>
</head>
<body>
</body>
</html>
Dans le fichier .css, inserrer le code suivant pour définir la famille de police.
body {
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
}
3- Présentons la prochaine étape : il s’agira de structurer le document de la manière

suivante :
container
leftSide rightSide
Pour cela, nous allons utilisez les balises div (trois – 03-) dont les propriétés class se verront
affecter respectivement container, leftside, et rightside.
Ils seront définis entre les balises body comme suit :
Dans monCV.html
<body>
<div class="container">
<div class="leftside">
</div>
<div class="rightside">
</div>
</div>
</body>
Nous définirons ensuite les positions et dimensions de nos div dans le fichier style.css ( la suite
du code existant) de la façon suivante en utilisant la notion de contenaire flexible :
/* Style du contenaire avec le mode Flex*/

.container{
display: flex;
flex-direction: row;
}
/* Style de leftside */
.leftside {
height: auto;
width: 300px;
background-color: #111;
color: white;
}
/* Style de rightside*/
.rightside {
padding-left: 20px;
}
NB : A ce stade rien ne s’affiche dans votre navigateur.

Phase I - Intéressons-nous maintenant au leftside
4- Ma photo étant prête (taille initiale 519X519), je vais l’appeler dans une balise div de
propriété class=divphoto. Ceci à l’intérieur de la div leftside
Dans monCV.html
<div class="divphoto">
<img class="photo" src="maPhoto.jpg" width="280" height="200"
alt="BOUBA NEZENE Blaise" />
</div>
Définisons le style pour mieux positionner la photo dans le fichier style.css:
/* style de positionnement de la photo*/

.divphoto{
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px;
Et, vous obtenez ceci dans votre navigateur

5- Maintenant nous allons insérer des informations personnelles.
Pour ce faire, je mettrais cela dans un tableau de la manière suivante :
Home
#imgHome
Mon quartier | ville-CMR
E-mail
#imgEmail
eeeeeeeeee@aaaaaaa.cccccccc
Phone
#imgPhone
(+237) xxx xxx xxx
Les différentes images vous sont offertes dans le dossier (emailImg.jpg, localisationImg.jpg,
phoneImg.jpg)
J’introduis cette table dans une balise div de propriété class=personalInfo et cela donne ceci :
Dans monCV.html
<div class="personalInfo">
<table class="tableauPI">
<tr>
<td>
Home <br>
MON QUARTIER | Yaounde-CMR
</td>
<td>
<img src="localisationImg.png" width="50" height="50"
alt="localisation">
</td>
</tr>
<tr>
<td>
E-mail <br>
eeeeeeeeee@aaaaaaa.cccc
</td>
<td>
<img src="emailImg.png" width="50" height="50"
alt="E-mail">
</td>
</tr>
<tr>
<td>
Phone <br>
(+237) 000 000 000
</td>
<td>
<img src="phoneImg.png" width="50" height="50"
alt="E-mail">
</td>
</tr>
</table>
</div>
Alignons le contenu du tableau à droite. La propriété class=tableauPI. Dans le fichier style.css

cela donne :
Dans style.css
/* style de tableauPI*/
.tableauPI{
text-align: right;
}
Nous définirons aussi le style pour la taille de police h4 et définir la couleur de police pour les
titres du coté leftside.
Nous avons mis le titre INFO PERSONNEL dans une balise div de class=namePI au-dessus du
tableau contenant les informations personnelles (au-dessus de la balise div de propriété
class=tableauPI).
Dans monCV.html
<div class="namePI">
<h4>INFO PERSONNEL</h4>
</div>
Dans style.css
/*redefinition des propriétés de la taille de polices*/

h4{
font-size: 25px;
font-weight: normal;
}
Dans style.css
/* Définition des paramètres de titres du coté leftside*/

.namePI{
height: 50px;
color: rgb(0, 195, 255);
vertical-align: middle;
line-height: 50px;
}
Vous obtenez ceci :
6- Intéressons maintenant au bloc COMPETENCES PROFESSIONNELLES

- Le titre dans une balise div de propriété class=nameCPro
- Les compétences dans un tableau (propriété class=tableauCPro) de deux colonnes et
cinq lignes. Le tableau est porté par une balise div de propriété class=divCPro
- Le tout dans une balise div de propriété class=contenaireCPro
Intitulé Competence01 #checkImg

Nous avons les codes suivant :
Dans monCV.html
<div class="contenaireCPro">
<div class="nameCPro">
<h4>COMPETENCES PRO</h4>
</div>
<div class="divCPro">
<table class="tableauCPro">
<tr>
<td>Intitulé Compétence01</td><td><img src="checkImg.png"
width="50" height="50">
</td>
</tr>
<tr>
</td>
</tr>
<tr>
</td>
</tr>
<tr>
<td>Intitulé Compétence04</td>
<td><img src="checkImg.png" width="50" height="50"></td>
</tr>
<tr>
<td>Intitulé Compétence05</td>
<td><img src="checkImg.png" width="50" height="50"></td>
</tr>
</table>
</div>
</div>
Dans monCV.html
/* style de tableauPI et tableauCPro*/

.tableauPI, .tableauCPro{
width: 100%;
text-align: right;
}

.namePI, .nameCPro{
height: 50px;
color: rgb(0, 195, 255);
line-height: 50px;
}
Observez bien que nous avons juste ajoutez le nom des classes et ajouter le style width :100%
Vous obtenez ceci :
Pour obtenir ceci,
Juste quelques modifications dans le fichier style.css.

Dans style.css

.namePI{
height: 50px;
color: rgb(0, 195, 255);
line-height: 50px;
}
/*Couleur de fond et couleur d'écriture de la balise nameCpro*/

.nameCPro{
height: 50px;
background-color: white;
color: rgb(0, 195, 255);
line-height: 50px;
}
/*couleur de fond de la balise divCPro*/

.divCPro{
background-color: rgb(53, 53, 54);
}
7- Passons au bloc REFERENCES

- Une balise div de propriété class=contenaireRef contenant deux autres balises div de
de propriétés respectives class=ref01 et class=ref02
Chaque références et formaté de la manière suivante :
Nom de la personne ref

titre du ref
structure de la personne ref

P. +237 000 000 000
E. (E-mail)
Le code donne ceci :
Dans monCV.html
<div class="contenaireRef">
<div class="nameRef">
<h4>REFERENCE</h4>
</div>
<div class="ref01">
Nom de la personne ref1<br>
titre du ref1 <br>
structure de la personne ref1 <br>
P. +237 000 000 000 <br>
E. eeeeeeeeeee@aaaaaaaa.ccc
</div>
<div class="ref02">
Nom de la personne ref2<br>
titre du ref2 <br>
structure de la personne ref2 <br>
P. +237 000 000 000 <br>
E. eeeeeeeeeee@aaaaaaaa.ccc
</div>
</div>
Dans style.css

.namePI, .nameRef{
height: 50px;
color: rgb(0, 195, 255);
line-height: 50px;
padding-left: 15px;
}
/*style des balises div ref01 et ref02*/

.ref01, .ref02{
margin-top: 20px;
margin-bottom: 40px;
text-align: right;
padding-right: 20px;
}
On obtient ceci:
Pour améliorer l’aperçu du bloc références, nous avons utilisé deux balises inline span et em ;
tout en définissant des styles en identifiant par la propriété class.
On obtient ceci :
Le code modifié est le suivant :
Dans monCV.html
<div class="contenaireRef">
<div class="nameRef">
<h4>REFERENCE</h4>
</div>
<div class="ref01">
<span class="nameRef01">Nom de la personne ref1</span> <br>
<em class="titreRef">titre du ref1</em> <br><br>
<span class="structureRef">structure de la personne ref1 </span> <br>
<span class="t">P.</span> <span class="contact">+237 000 000 000</span>
<br>
<span class="t">E.</span>
<span class="contact">eeeeeeeeeee@aaaaaaaa.ccc</span>
</div>
<div class="ref02">
<span class="nameRef02">Nom de la personne ref2</span> <br>
<em class="titreRef">titre du ref2</em> <br><br>
<span class="structureRef">structure de la personne ref2 </span> <br>
<span class="t">P.</span> <span class="contact">+237 000 000 000</span>
<br>
<span class="t">E.</span>
<span class="contact">eeeeeeeeeee@aaaaaaaa.ccc</span>
</div>
</div>
Dans style.css
/* style des noms ref01 et ref02*/

.nameRef01, .nameRef02{
font-size: 20px;
}
/* style des titres ref01 et ref02*/

.titreRef{
font-size: 12px;
color: rgb(185, 185, 185);
}
/* style des structures ref01 et ref02*/

.structureRef{
font-size: 14px;
font-weight: bold;
}
/* style des t*/

.t{
font-size: 16px;
font-weight: bold;
}
/* style des contacts*/

.contact{
font-size: 14px;
color: rgb(185, 185, 185);
}
Identifier les noms de class et faites la correspondance dans les styles.
Phase II - Intéressons-nous maintenant au rightside
Nous voulons obtenir le résultat suivant :
Pour ce faire, nous créerons trois div (un contenant deux autres
Votre Nom
Votre spécilisation
Le code correspondant à l’intérieur de la balise div rightside donne ceci :
Dans monCV.html
<div class="rightside">
<div class="identification">
<div class="nomdiv">
<span class="prenom">Prenom</span><span class="nom">VOTRENOM</span>
</div>
<div class="specialite">
<span>Votre spécialisation</span>
</div>
</div>
</div>
Dans style.css
/* Style de rightside*/
.rightside {
padding-left: 20px;
width: 100%;
}
/*style de nomdiv*/
.nomdiv{
font-size: 60px;
padding-top: 30px;
}
/*style de nom*/
.nom{
font-weight: bold;
}
/* Style de specialite */
.specialite{
background-color: #111;
color: white;
width: 90%;
height: auto;
font-size: 30px;
padding-left: 10px;
}
Voici le résultat du bloc Profil et Objectif
Pour ce résultat, voici le code (toujours dans la balise div rightside :
Dans monCV.html
<div class="objectif">
<div class="titreRightSide">
PROFIL & OBJECTIF
</div>
<div class="contenuObj">
Aussi appelé « accroche personnelle », l’objectif professionnel sur un
CV doit être percutant. Son objectif est de susciter la curiosité des
recruteurs et de leur donner envie d’en savoir plus sur votre parcours.
Forts de plus de dix années d’expérience dans le domaine du recrutement,
nous partageons aujourd’hui avec vous nos conseils d’experts.
</div>
</div>
Dans style.css
/*style de objectif*/
.objectif{
margin-top: 50px;
}
/*style des titres de RightSide*/

.titreRightSide{
font-size: 25px;
width: 90%;
margin-bottom: 25px;
}
/*style du contenu des objectifs*/

.contenuObj{
width: 90%;
color: rgb(75, 75, 75);
}
Nous passons au bloc EDUCATION
Nous voulons obtenir le rendu suivant :

La structure est la suivante :
Observez le code :
Dans monCV.html
<div class="blocEducation">
EDUCATION
</div>
<div class="contenuEd">
<table class="tableau">
<tr>
<td class="colonne1">
2019 - 2021
</td>
<span class="diplomeEd">Diplome obtenu</span> <br>
<span class="etablissement">Etablissement</span> <br>
<span class="competenceEd"> Compétence01 - Compétence02 –
Compétence03 - Compétence04 - Compétence05
</span>
</td>
</tr>
<tr>
20XX – 20XX
</td>
</span>
</td>
</tr>
<tr>
2019 - 2021
</td>
</span>
</td>
</tr>
</table>
</div>
</div>
Dans style.css
.blocObjectif, .blocEducation{
margin-top: 50px;
}
/* Style pour tableau */

.colonne2 {
padding-top: 10px;
}
.colonne1 {
width: 150px;
text-align: left;
}
/* style de etablissement*/
.etablissement{
font-size: 14px;
color: rgb(105, 105, 105);
}
/* style de competence Education*/

.competenceEd{
font-size: 16px;
color: rgb(105, 105, 105);
}
/* style de diplome Education*/

.diplomeEd{
font-size: 16px;
color:rgb(10, 200, 250)
}
L’implémentation du bloc EXPERIENCE PROFESSIONNELLE garde le même principe que
précédemment.
La structure est la suivante :
Ce qui nous produira le résultat suivant :
Dans monCV.html
<div class="blocExperiencePro">
EXPERIENCE PROFESSIONNELLE
</div>
<div class="contenuExperiencePro">
<table class="tableauExperiencePro">
<tr>
20XX - 20XX
</td>
<span class="posteExperiencePro">Poste de travail</span>
<br>
<span class="structureExperiencePro">
Structure d'activité
</span> <br>
<span class="competenceExperiencePro">
CompétenceDéveloppée01 - CompétenceDéveloppée02
- CompétenceDéveloppée03 - CompétenceDéveloppée04
- CompétenceDéveloppée05
</span>
</td>
</tr>
<tr>
20XX - 20XX
</td>
<br>
</span> <br>
</span>
</td>
</tr>
<tr>
20XX - 20XX
</td>
<br>
</span> <br>
</span>
</td>
</tr>
</table>
</div>
</div>
Dans style.css
.blocObjectif, .blocEducation, .blocExperiencePro{
margin-top: 50px;
}
/* Style pour tableau */
.colonne2 {
padding-top: 10px;
}
.colonne1 {
width: 150px;
text-align: left;
}
/* style de etablissement*/
.etablissement, .structureExperiencePro{
font-size: 14px;
color: rgb(105, 105, 105);
}
/* style de competence Education*/

.competenceEd, .competenceExperiencePro{
font-size: 16px;
color: rgb(105, 105, 105);
}
/* style de diplome Education*/

.diplomeEd, .posteExperiencePro{
font-size: 16px;
color:rgb(10, 200, 250)
}
Pour le reste je fais appel à votre imagination. Vous prendrez pour modèle mon cv.
NB : les informations génériques doivent être remplacées par vos informations personnelles
PS : Exercez-vous je vous enverrais un TP que vous ferez de façon autonome

Activité 03 - Mon CV

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Activité 03 - Mon CV

Transféré par

Droits d'auteur :

Formats disponibles

Activité 03 – HTML5/CSS (Mon CV)

Maintenant jetons nous à l’eau.

3- Présentons la prochaine étape : il s’agira de structurer le document de la manière

Ils seront définis entre les balises body comme suit :

/* Style du contenaire avec le mode Flex*/

NB : A ce stade rien ne s’affiche dans votre navigateur.

Définisons le style pour mieux positionner la photo dans le fichier style.css:

/* style de positionnement de la photo*/

Et, vous obtenez ceci dans votre navigateur

Pour ce faire, je mettrais cela dans un tableau de la manière suivante :

Alignons le contenu du tableau à droite. La propriété class=tableauPI. Dans le fichier style.css

/*redefinition des propriétés de la taille de polices*/

/* Définition des paramètres de titres du coté leftside*/

Vous obtenez ceci :

6- Intéressons maintenant au bloc COMPETENCES PROFESSIONNELLES

Intitulé Competence01 #checkImg

/* style de tableauPI et tableauCPro*/

/* Définition des paramètres de titres du coté leftside*/

Vous obtenez ceci :

Pour obtenir ceci,

Juste quelques modifications dans le fichier style.css.

/* Définition des paramètres de titres du coté leftside*/

/*Couleur de fond et couleur d'écriture de la balise nameCpro*/

/*couleur de fond de la balise divCPro*/

7- Passons au bloc REFERENCES

Chaque références et formaté de la manière suivante :

Nom de la personne ref

structure de la personne ref

/* Définition des paramètres de titres du coté leftside*/

/*style des balises div ref01 et ref02*/

Le code modifié est le suivant :

/* style des noms ref01 et ref02*/

/* style des titres ref01 et ref02*/

/* style des structures ref01 et ref02*/

/* style des t*/

/* style des contacts*/

Le code correspondant à l’intérieur de la balise div rightside donne ceci :

Voici le résultat du bloc Profil et Objectif

Pour ce résultat, voici le code (toujours dans la balise div rightside :

/*style des titres de RightSide*/

/*style du contenu des objectifs*/

Nous passons au bloc EDUCATION

Nous voulons obtenir le rendu suivant :

/* Style pour tableau */

/* style de competence Education*/

/* style de diplome Education*/

La structure est la suivante :

Ce qui nous produira le résultat suivant :

/* style de competence Education*/

/* style de diplome Education*/

PS : Exercez-vous je vous enverrais un TP que vous ferez de façon autonome

Vous aimerez peut-être aussi

/redefinition des propriétés de la taille de polices/

/Couleur de fond et couleur d'écriture de la balise nameCpro/

/couleur de fond de la balise divCPro/

/style des balises div ref01 et ref02/

/style des titres de RightSide/

/style du contenu des objectifs/