Scribd
Importer
23 vues3 pages

Créer un CV en HTML et CSS

Le document présente une introduction à HTML et CSS, expliquant leurs définitions et exemples d'utilisation. Il fournit également un exemple de code pour créer un CV simple en HTML/CSS et des instructions pour capturer un screenshot du résultat. Enfin, il décrit l'organisation d'un document Word pour présenter le travail, incluant une table des matières et une bibliographie.

Transféré par

echanti.hassanae
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
23 vues3 pages

Créer un CV en HTML et CSS

Le document présente une introduction à HTML et CSS, expliquant leurs définitions et exemples d'utilisation. Il fournit également un exemple de code pour créer un CV simple en HTML/CSS et des instructions pour capturer un screenshot du résultat. Enfin, il décrit l'organisation d'un document Word pour présenter le travail, incluant une table des matières et une bibliographie.

Transféré par

echanti.hassanae
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

1.

Définition de HTML et CSS

HTML (HyperText Markup Language) :


Langage de balisage utilisé pour structurer le contenu d'une page web
(textes, images, liens).
Exemple de balises : <h1>, <p>, <div>, <ul>, <li>.

CSS (Cascading Style Sheets) :


Langage utilisé pour styliser une page HTML (couleurs, polices, mise en
page).
Exemple de propriétés : color, margin, font-size, display: flex.

2. Création du CV en HTML

Voici un exemple de code HTML/CSS pour un CV simple :

html
Copy
<!DOCTYPE html>
<html>
<head>
<title>Mon CV</title>
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.header { text-align: center; background-color: #f0f0f0; padding: 20px; }
.section { margin: 20px 0; }
h2 { color: #2c3e50; border-bottom: 2px solid #2c3e50; }
.skills { display: flex; justify-content: space-between; }
.skills div { width: 45%; }
</style>
</head>
<body>
<div class="header">
<h1>Jean Dupont</h1>
<p>📧 [Link]@[Link] | 📱 06 12 34 56 78</p>
</div>

<div class="section">
<h2>Formation</h2>
<p><strong>Master en Informatique</strong> - Université XYZ (2020-2022)</p>
<p><strong>Licence en Mathématiques</strong> - Université ABC (2017-
2020)</p>
</div>

<div class="section">
<h2>Compétences</h2>
<div class="skills">
<div>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div>
<ul>
<li>Python</li>
<li>SQL</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Run HTML

3. Screenshot du Résultat

Ouvrez le fichier HTML dans un navigateur (Chrome, Firefox) et appuyez


sur :

 Windows : Ctrl + Shift + S (ou utilisez l'outil de capture d'écran)


 Mac : Cmd + Shift + 4
Capturez uniquement la partie visible du CV dans le navigateur.

4. Organisation dans un Document Word

Structurez votre document comme suit :

Table des matières (générée automatiquement avec Word)

1. Introduction à HTML/CSS
2. Code source du CV
3. Résultat visuel (screenshot)
4. Bibliographie

Bibliographie

Exemples de sources :

 "HTML Basics", MDN Web Docs, [Link]


 "CSS Tutorial", W3Schools, [Link]

Conseil supplémentaire :

 Pour la mise en page Word, utilisez les styles "Titre 1", "Titre 2" pour
générer automatiquement la table des matières.
 Ajoutez des légendes sous le screenshot (ex : Figure 1 : Capture
d'écran du CV).
Besoin d'aide pour une partie spécifique ? 🛠️

Vous aimerez peut-être aussi