Créer un Curriculum Vitae en HTML est une compétence utile pour les développeurs web et les designers. En utilisant HTML, vous pouvez créer un CV parfaitement personnalisé, facile à modifier et à partager en ligne. Suivez ce tutoriel détaillé pour apprendre comment construire un CV professionnel avec HTML, étape par étape.

Introduction à la création d’un Curriculum Vitae en HTML

Créer un CV en HTML offre plusieurs avantages, notamment la flexibilité et le contrôle total sur le design. Avec ce tutoriel, vous apprendrez non seulement à structurer votre CV, mais aussi à ajouter des styles basiques pour le rendre attrayant.

1. Structure de Base du CV en HTML

Commençons par la structure de base d’un document HTML. Créez un nouveau fichier nommé cv.html et insérez le code suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curriculum Vitae</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Votre Nom</h1>
        <p>Développeur Web</p>
        <p>Email: votre.email@example.com | Téléphone: 123-456-7890</p>
    </header>

    <section>
        <h2>Expérience Professionnelle</h2>
        <!-- Expériences professionnelles ici -->
    </section>

    <section>
        <h2>Éducation</h2>
        <!-- Détails éducatifs ici -->
    </section>

    <section>
        <h2>Compétences</h2>
        <!-- Liste des compétences ici -->
    </section>
</body>
</html>

2. Ajouter les Détails d’Expérience Professionnelle

Ensuite, complétez la section de l’expérience professionnelle. Voici comment structurer vos expériences :

<section>
    <h2>Expérience Professionnelle</h2>
    <article>
        <h3>Développeur Web chez ExempleCorp</h3>
        <p>Janvier 2020 - Présent</p>
        <ul>
            <li>Développement de sites web dynamiques</li>
            <li>Optimisation des performances web</li>
            <li>Collaboration avec des équipes de designers et de gestionnaires de projet</li>
        </ul>
    </article>
    <article>
        <h3>Stagiaire Développeur chez StartUpCode</h3>
        <p>Juin 2019 - Décembre 2019</p>
        <ul>
            <li>Participation à la conception de l'interface utilisateur</li>
            <li>Assistance dans la rédaction de documentation technique</li>
        </ul>
    </article>
</section>

3. Ajouter les Détails Éducatifs

Passons maintenant à la section Éducation :

<section>
    <h2>Éducation</h2>
    <article>
        <h3>Master en Informatique</h3>
        <p>Université XYZ, 2018 - 2020</p>
    </article>
    <article>
        <h3>Licence en Informatique</h3>
        <p>Université ABC, 2015 - 2018</p>
    </article>
</section>

4. Lister les Compétences

La dernière section clé de votre CV est la liste de compétences :

<section>
    <h2>Compétences</h2>
    <ul>
        <li>HTML & CSS</li>
        <li>JavaScript</li>
        <li>Python</li>
        <li>PHP</li>
        <li>SQL</li>
    </ul>
</section>

5. Ajouter des Styles CSS de Base

Pour rendre votre CV visuellement agréable, ajoutons du CSS basique dans une section <style> dans votre fichier HTML :

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0 auto;
        max-width: 800px;
        padding: 1em;
    }
    header, section {
        margin-bottom: 2em;
    }
    header h1 {
        font-size: 2.5em;
    }
    header p {
        font-size: 1.2em;
        color: #6c757d;
    }
    h2 {
        border-bottom: 2px solid #6c757d;
        padding-bottom: 0.5em;
    }
    article {
        margin-bottom: 1.5em;
    }
    h3 {
        margin: 0;
        font-size: 1.5em;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    ul li {
        background: #f8f9fa;
        margin: 0.25em 0;
        padding: 0.5em;
    }
</style>

6. Ajouter une Photo de Profil (Optionnel)

Pour personnaliser davantage votre CV, vous pouvez ajouter une photo de profil en HTML. Voici comment :

<header>
    <img src="votre-photo.jpg" alt="Photo de Profil" style="width: 150px; float: right; border-radius: 50%;">
    <h1>Votre Nom</h1>
    <p>Développeur Web</p>
    <p>Email: votre.email@example.com | Téléphone: 123-456-7890</p>
</header>

Conclusion

En suivant ce tutoriel, vous avez construit un curriculum vitae simple et fonctionnel en HTML. Ce CV peut facilement être amélioré et stylé selon vos préférences grâce à CSS, et peut également être rendu interactif en utilisant JavaScript. Continuez à personnaliser votre CV pour le rendre aussi unique que vous l’êtes ! Pour des ressources supplémentaires sur HTML et CSS, consultez notre cours détaillé sur HTML5 et CSS3. Si vous souhaitez en apprendre davantage sur des sujets connexes, consultez nos articles sur la structure de bases du HTML, la création de sa première page HTML, et les différentes techniques de style CSS afin de rendre votre site unique et performant.

Formation HTML et CSS sur Learnify

Categorized in:

CSS, HTML,

Tagged in: