{"id":5325,"date":"2024-08-27T15:41:19","date_gmt":"2024-08-27T15:41:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/envoyer-courrier-electronique-html\/"},"modified":"2024-08-27T15:41:23","modified_gmt":"2024-08-27T15:41:23","slug":"envoyer-courrier-electronique-html","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/envoyer-courrier-electronique-html\/","title":{"rendered":"2.10 Envoyer un Courrier \u00c9lectronique avec HTML"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Envoyer un Courrier \u00c9lectronique avec HTML<\/strong> est une comp\u00e9tence essentielle pour toute personne travaillant dans le domaine du marketing digital, du d\u00e9veloppement web ou de la gestion de contenu. Ma\u00eetriser cette comp\u00e9tence peut vous permettre d&rsquo;am\u00e9liorer significativement l&rsquo;efficacit\u00e9 de vos campagnes de communication. Apprenons ensemble comment structurer et envoyer des emails en HTML, avec des exemples concrets de code pour une compr\u00e9hension approfondie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Envoi de Courriers \u00c9lectroniques 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\/586254506?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>L&rsquo;envoi d&#8217;email en HTML vous permet de cr\u00e9er des courriels visuellement riches et interactifs. Contrairement aux emails en texte brut, les emails HTML peuvent inclure des images, des liens et des styles personnalis\u00e9s, ce qui peut am\u00e9liorer l&rsquo;engagement des destinataires.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 1: Pr\u00e9paration du Contenu HTML<\/h3>\n\n\n\n<p>La premi\u00e8re \u00e9tape pour envoyer un email en HTML est de cr\u00e9er le contenu HTML que vous souhaitez envoyer. Par exemple, vous pouvez utiliser le code HTML suivant pour cr\u00e9er le corps de votre email :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Exemple d'Email HTML&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n        }\n        .header {\n            background-color: #f8f9fa;\n            padding: 20px;\n            text-align: center;\n        }\n        .content {\n            padding: 20px;\n        }\n        .footer {\n            background-color: #f8f9fa;\n            padding: 10px;\n            text-align: center;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"header\"&gt;\n        &lt;h1&gt;Bienvenue!&lt;\/h1&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"content\"&gt;\n        &lt;p&gt;Ceci est un email HTML de d\u00e9monstration.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/example.com\"&gt;Visitez notre site&lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"footer\"&gt;\n        &lt;p&gt;Merci de nous avoir lu.&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 2: Utilisation d&rsquo;une Biblioth\u00e8que Python pour Envoyer l&rsquo;Email<\/h3>\n\n\n\n<p>Une fois votre contenu HTML pr\u00eat, vous devez utiliser une biblioth\u00e8que Python pour envoyer l&#8217;email. La biblioth\u00e8que <code>smtplib<\/code> est souvent utilis\u00e9e pour cette t\u00e2che. Voici un exemple de script Python pour <strong>envoyer un courrier \u00e9lectronique<\/strong> en utilisant <code>smtplib<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import smtplib\nfrom email.mime.multipart import MIMEMultipart\nfrom email.mime.text import MIMEText\n\n# D\u00e9finir les param\u00e8tres de l'email\nfromaddr = \"votre_email@example.com\"\ntoaddr = \"destinataire@example.com\"\nmsg = MIMEMultipart('alternative')\nmsg['From'] = fromaddr\nmsg['To'] = toaddr\nmsg['Subject'] = \"Sujet de l'Email\"\n\n# Cr\u00e9er le corps de l'email en HTML\nhtml = \"\"\"\\\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Exemple d'Email HTML<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n        }\n        .header {\n            background-color: #f8f9fa;\n            padding: 20px;\n            text-align: center;\n        }\n        .content {\n            padding: 20px;\n        }\n        .footer {\n            background-color: #f8f9fa;\n            padding: 10px;\n            text-align: center;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"header\">\n        <h1>Bienvenue!<\/h1>\n    <\/div>\n    <div class=\"content\">\n        <p>Ceci est un email HTML de d\u00e9monstration.<\/p>\n        <a href=\"https:\/\/example.com\" target=\"_blank\" rel=\"noopener\">Visitez notre site<\/a>\n    <\/div>\n    <div class=\"footer\">\n        <p>Merci de nous avoir lu.<\/p>\n    <\/div>\n<\/body>\n<\/html>\n\"\"\"\n\n# Attacher le contenu HTML \u00e0 l'email\npart = MIMEText(html, 'html')\nmsg.attach(part)\n\n# Configurer le serveur SMTP\nserver = smtplib.SMTP('smtp.example.com', 587)\nserver.starttls()\nserver.login(fromaddr, \"votre_mot_de_passe\")\n\n# Envoyer l'email\nserver.sendmail(fromaddr, toaddr, msg.as_string())\n\n# Fermer la connexion au serveur\nserver.quit()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 3: Validation et Tests<\/h3>\n\n\n\n<p>Avant d&rsquo;envoyer des emails HTML \u00e0 vos destinataires, il est crucial de s&rsquo;assurer que vos emails s&rsquo;affichent correctement sur diff\u00e9rents clients de messagerie. Vous pouvez utiliser des services tels que <a href=\"https:\/\/litmus.com\" target=\"_blank\" rel=\"noopener\">Litmus<\/a> ou <a href=\"https:\/\/www.emailonacid.com\" target=\"_blank\" rel=\"noopener\">Email on Acid<\/a> pour tester la compatibilit\u00e9 et la pr\u00e9sentation de vos emails HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 4: Bonnes Pratiques pour les Emails HTML<\/h3>\n\n\n\n<p>Voici quelques bonnes pratiques \u00e0 suivre lors de la cr\u00e9ation de vos emails HTML :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>Utilisez des tables pour la mise en page, car elles sont mieux prises en charge par les clients de messagerie. Pour en savoir plus, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/tableaux-html-creer-utiliser\">guide sur l&rsquo;utilisation des tableaux en HTML<\/a>.<\/li>\n  <li>Employez des styles en ligne (inline) plut\u00f4t que des feuilles de style externes.<\/li>\n  <li>Ajoutez une version en texte brut de l&#8217;email pour les clients qui ne peuvent pas lire le HTML.<\/li>\n  <li>\u00c9vitez l&rsquo;utilisation excessive d&rsquo;images pour garantir un affichage rapide et complet de vos emails.<\/li>\n  <li>Incluez des balises ALT pour toutes vos images afin de fournir du contexte lorsque les images ne se chargent pas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Envoyer un <strong>courrier \u00e9lectronique avec HTML<\/strong> est une comp\u00e9tence pr\u00e9cieuse qui peut am\u00e9liorer l&rsquo;interactivit\u00e9 et l&rsquo;engagement de vos emails marketing. En suivant ce tutoriel, vous avez appris \u00e0 pr\u00e9parer un email HTML, \u00e0 utiliser Python pour l&rsquo;envoyer, et \u00e0 appliquer des bonnes pratiques pour garantir la compatibilit\u00e9 et l&rsquo;affichage correct des emails sur divers clients de messagerie. Continuez \u00e0 explorer et \u00e0 appliquer ces techniques pour optimiser vos campagnes emailing. Pour plus de tutoriels et de ressources sur l&#8217;email marketing et le d\u00e9veloppement web, n&rsquo;h\u00e9sitez pas \u00e0 visiter notre site et suivre nos cours sp\u00e9cialis\u00e9s.<\/p>\n\n\n\n<p>Pour une compr\u00e9hension plus approfondie du HTML, vous pouvez explorer notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">guide sur le fonctionnement des navigateurs web<\/a> ou notre <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">guide sur les bases du langage HTML<\/a>. Ils vous fourniront des informations pr\u00e9cieuses pour devenir un expert en HTML.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/apprendre-le-html-et-le-css\/140\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2023\/07\/learnify-formation-HTML-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML CSS Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Ressources externes -->\n<p>Pour approfondir vos connaissances, consultez ces ressources externes :<\/p>\n<ul>\n  <li><a href=\"https:\/\/www.w3schools.com\/html\/html_emails.asp\" target=\"_blank\" rel=\"noopener\">Guide sur les emails HTML &#8211; W3Schools<\/a><\/li>\n  <li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/Email\" target=\"_blank\" rel=\"noopener\">Email HTML Guide &#8211; MDN Web Docs<\/a><\/li>\n  <li><a href=\"https:\/\/get.foundation\/emails.html\" target=\"_blank\" rel=\"noopener\">Foundation for Emails<\/a><\/li>\n<\/ul>\n\n<!-- Banni\u00e8re Learnify -->\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=\"Learnify - Formation HTML CSS Offre 50%\" title=\"\">\n<\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Envoyer un Courrier \u00c9lectronique avec HTML est une comp\u00e9tence essentielle pour toute personne travaillant dans le domaine du marketing digital, du d\u00e9veloppement web ou&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2731,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5325","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\/5325","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5325"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5325\/revisions"}],"predecessor-version":[{"id":5326,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5325\/revisions\/5326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2731"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}