{"id":5481,"date":"2024-08-27T20:53:02","date_gmt":"2024-08-27T20:53:02","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-curriculum-vitae-html\/"},"modified":"2024-08-27T20:53:05","modified_gmt":"2024-08-27T20:53:05","slug":"creer-curriculum-vitae-html","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-curriculum-vitae-html\/","title":{"rendered":"11.14 Cr\u00e9er un Curriculum Vitae en HTML : Tutoriel"},"content":{"rendered":"\n<p><strong>Cr\u00e9er un Curriculum Vitae en HTML<\/strong> est une comp\u00e9tence utile pour les d\u00e9veloppeurs web et les designers. En utilisant HTML, vous pouvez cr\u00e9er un CV parfaitement personnalis\u00e9, facile \u00e0 modifier et \u00e0 partager en ligne. Suivez ce tutoriel d\u00e9taill\u00e9 pour apprendre comment construire un CV professionnel avec HTML, \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la cr\u00e9ation d&rsquo;un Curriculum Vitae en HTML<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586680239?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n\n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Cr\u00e9er un CV en HTML offre plusieurs avantages, notamment la flexibilit\u00e9 et le contr\u00f4le total sur le design. Avec ce tutoriel, vous apprendrez non seulement \u00e0 structurer votre CV, mais aussi \u00e0 ajouter des styles basiques pour le rendre attrayant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Structure de Base du CV en HTML<\/h3>\n\n\n\n<p>Commen\u00e7ons par la structure de base d&rsquo;un document HTML. Cr\u00e9ez un nouveau fichier nomm\u00e9 <code>cv.html<\/code> et ins\u00e9rez le code suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Curriculum Vitae&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;h1&gt;Votre Nom&lt;\/h1&gt;\n        &lt;p&gt;D\u00e9veloppeur Web&lt;\/p&gt;\n        &lt;p&gt;Email: votre.email@example.com | T\u00e9l\u00e9phone: 123-456-7890&lt;\/p&gt;\n    &lt;\/header&gt;\n\n    &lt;section&gt;\n        &lt;h2&gt;Exp\u00e9rience Professionnelle&lt;\/h2&gt;\n        &lt;!-- Exp\u00e9riences professionnelles ici --&gt;\n    &lt;\/section&gt;\n\n    &lt;section&gt;\n        &lt;h2&gt;\u00c9ducation&lt;\/h2&gt;\n        &lt;!-- D\u00e9tails \u00e9ducatifs ici --&gt;\n    &lt;\/section&gt;\n\n    &lt;section&gt;\n        &lt;h2&gt;Comp\u00e9tences&lt;\/h2&gt;\n        &lt;!-- Liste des comp\u00e9tences ici --&gt;\n    &lt;\/section&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n \n\n<h3 class=\"wp-block-heading\">2. Ajouter les D\u00e9tails d&rsquo;Exp\u00e9rience Professionnelle<\/h3>\n\n\n\n<p>Ensuite, compl\u00e9tez la section de l&rsquo;exp\u00e9rience professionnelle. Voici comment structurer vos exp\u00e9riences :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;section&gt;\n    &lt;h2&gt;Exp\u00e9rience Professionnelle&lt;\/h2&gt;\n    &lt;article&gt;\n        &lt;h3&gt;D\u00e9veloppeur Web chez ExempleCorp&lt;\/h3&gt;\n        &lt;p&gt;Janvier 2020 - Pr\u00e9sent&lt;\/p&gt;\n        &lt;ul&gt;\n            &lt;li&gt;D\u00e9veloppement de sites web dynamiques&lt;\/li&gt;\n            &lt;li&gt;Optimisation des performances web&lt;\/li&gt;\n            &lt;li&gt;Collaboration avec des \u00e9quipes de designers et de gestionnaires de projet&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/article&gt;\n    &lt;article&gt;\n        &lt;h3&gt;Stagiaire D\u00e9veloppeur chez StartUpCode&lt;\/h3&gt;\n        &lt;p&gt;Juin 2019 - D\u00e9cembre 2019&lt;\/p&gt;\n        &lt;ul&gt;\n            &lt;li&gt;Participation \u00e0 la conception de l'interface utilisateur&lt;\/li&gt;\n            &lt;li&gt;Assistance dans la r\u00e9daction de documentation technique&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/article&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Ajouter les D\u00e9tails \u00c9ducatifs<\/h3>\n\n\n\n<p>Passons maintenant \u00e0 la section \u00c9ducation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;section&gt;\n    &lt;h2&gt;\u00c9ducation&lt;\/h2&gt;\n    &lt;article&gt;\n        &lt;h3&gt;Master en Informatique&lt;\/h3&gt;\n        &lt;p&gt;Universit\u00e9 XYZ, 2018 - 2020&lt;\/p&gt;\n    &lt;\/article&gt;\n    &lt;article&gt;\n        &lt;h3&gt;Licence en Informatique&lt;\/h3&gt;\n        &lt;p&gt;Universit\u00e9 ABC, 2015 - 2018&lt;\/p&gt;\n    &lt;\/article&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Lister les Comp\u00e9tences<\/h3>\n\n\n\n<p>La derni\u00e8re section cl\u00e9 de votre CV est la liste de comp\u00e9tences :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;section&gt;\n    &lt;h2&gt;Comp\u00e9tences&lt;\/h2&gt;\n    &lt;ul&gt;\n        &lt;li&gt;HTML &amp; CSS&lt;\/li&gt;\n        &lt;li&gt;JavaScript&lt;\/li&gt;\n        &lt;li&gt;Python&lt;\/li&gt;\n        &lt;li&gt;PHP&lt;\/li&gt;\n        &lt;li&gt;SQL&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. Ajouter des Styles CSS de Base<\/h3>\n\n\n\n<p>Pour rendre votre CV visuellement agr\u00e9able, ajoutons du CSS basique dans une section <code>&lt;style&gt;<\/code> dans votre fichier HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>&lt;style&gt;\n    body {\n        font-family: Arial, sans-serif;\n        line-height: 1.6;\n        margin: 0 auto;\n        max-width: 800px;\n        padding: 1em;\n    }\n    header, section {\n        margin-bottom: 2em;\n    }\n    header h1 {\n        font-size: 2.5em;\n    }\n    header p {\n        font-size: 1.2em;\n        color: #6c757d;\n    }\n    h2 {\n        border-bottom: 2px solid #6c757d;\n        padding-bottom: 0.5em;\n    }\n    article {\n        margin-bottom: 1.5em;\n    }\n    h3 {\n        margin: 0;\n        font-size: 1.5em;\n    }\n    ul {\n        list-style-type: none;\n        padding: 0;\n    }\n    ul li {\n        background: #f8f9fa;\n        margin: 0.25em 0;\n        padding: 0.5em;\n    }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">6. Ajouter une Photo de Profil (Optionnel)<\/h3>\n\n\n\n<p>Pour personnaliser davantage votre CV, vous pouvez ajouter une photo de profil en HTML. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;header&gt;\n    &lt;img src=\"votre-photo.jpg\" alt=\"Photo de Profil\" style=\"width: 150px; float: right; border-radius: 50%;\"&gt;\n    &lt;h1&gt;Votre Nom&lt;\/h1&gt;\n    &lt;p&gt;D\u00e9veloppeur Web&lt;\/p&gt;\n    &lt;p&gt;Email: votre.email@example.com | T\u00e9l\u00e9phone: 123-456-7890&lt;\/p&gt;\n&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En suivant ce tutoriel, vous avez construit un curriculum vitae simple et fonctionnel en HTML. Ce CV peut facilement \u00eatre am\u00e9lior\u00e9 et styl\u00e9 selon vos pr\u00e9f\u00e9rences gr\u00e2ce \u00e0 CSS, et peut \u00e9galement \u00eatre rendu interactif en utilisant JavaScript. Continuez \u00e0 personnaliser votre CV pour le rendre aussi unique que vous l&rsquo;\u00eates ! Pour des ressources suppl\u00e9mentaires sur HTML et CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">cours d\u00e9taill\u00e9 sur HTML5 et CSS3<\/a>. Si vous souhaitez en apprendre davantage sur des sujets connexes, consultez nos articles sur la <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">structure de bases du HTML<\/a>, la <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">cr\u00e9ation de sa premi\u00e8re page HTML<\/a>, et les <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-commentaires-css-guide-pratique\">diff\u00e9rentes techniques de style CSS<\/a> afin de rendre votre site unique et performant.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\">\n<img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Formation HTML et CSS sur Learnify\" title=\"\">\n<\/a>\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er un Curriculum Vitae en HTML est une comp\u00e9tence utile pour les d\u00e9veloppeurs web et les designers. En utilisant HTML, vous pouvez cr\u00e9er un CV&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2718,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5481"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5481\/revisions"}],"predecessor-version":[{"id":5482,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5481\/revisions\/5482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2718"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}