{"id":5465,"date":"2024-08-27T20:21:04","date_gmt":"2024-08-27T20:21:04","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/pied-page-html-utiliser-footer\/"},"modified":"2024-12-06T20:03:01","modified_gmt":"2024-12-06T20:03:01","slug":"pied-page-html-utiliser-footer","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/pied-page-html-utiliser-footer\/","title":{"rendered":"11.6 Cr\u00e9er un Pied de Page en HTML : Utiliser footer"},"content":{"rendered":"\n\n\n<p><strong>Cr\u00e9er un Pied de Page en HTML (footer)<\/strong> est essentiel pour donner \u00e0 votre site web une touche finale professionnelle. Comprendre comment structurer et styliser votre pied de page avec la balise <strong>footer<\/strong> peut am\u00e9liorer l&rsquo;apparence et la fonctionnalit\u00e9 de votre site. Suivons ce tutoriel pas \u00e0 pas pour cr\u00e9er un pied de page attrayant et utile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Balise <strong>footer<\/strong><\/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\/586679446?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>Le pied de page (<code>&lt;footer&gt;<\/code>) est une section HTML qui se trouve g\u00e9n\u00e9ralement en bas de chaque page web. Il contient des informations importantes telles que les cr\u00e9dits, les liens vers des pages importantes, les mentions l\u00e9gales, et plus. Voici comment utiliser la balise footer dans votre site web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Inclure des Contenus de Base dans <code>&lt;footer&gt;<\/code><\/h3>\n\n\n\n<p>Le contenu de base d&rsquo;un footer peut inclure des informations de copyright, des liens de navigation, et des contacts. Commen\u00e7ons par un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;footer&gt;\n    &lt;div&gt;\n        &lt;p&gt;\u00a9 2023 Your Company. All rights reserved.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;a href=\"about.html\"&gt;About Us&lt;\/a&gt; | \n        &lt;a href=\"contact.html\"&gt;Contact&lt;\/a&gt; | \n        &lt;a href=\"privacy.html\"&gt;Privacy Policy&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styliser votre Footer avec CSS<\/h3>\n\n\n\n<p>Pour rendre votre pied de page plus esth\u00e9tique, vous pouvez ajouter du CSS. Par exemple, vous pouvez styliser le texte, d\u00e9finir une couleur de fond, et ajuster les marges :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>footer {\n    background-color: #333;\n    color: white;\n    padding: 20px;\n    text-align: center;\n}\n\nfooter div {\n    margin: 10px 0;\n}\n\nfooter a {\n    color: #ff9900;\n    text-decoration: none;\n    margin: 0 10px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Ic\u00f4nes de R\u00e9seaux Sociaux<\/h3>\n\n\n\n<p>Les ic\u00f4nes de r\u00e9seaux sociaux permettent \u00e0 vos visiteurs de se connecter avec vous sur diff\u00e9rentes plateformes. Voici comment les ajouter \u00e0 votre footer :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;footer&gt;\n    &lt;div&gt;\n        &lt;p&gt;\u00a9 2023 Your Company. All rights reserved.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;a href=\"about.html\"&gt;About Us&lt;\/a&gt; | \n        &lt;a href=\"contact.html\"&gt;Contact&lt;\/a&gt; | \n        &lt;a href=\"privacy.html\"&gt;Privacy Policy&lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;a href=\"https:\/\/facebook.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-facebook\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"https:\/\/twitter.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"https:\/\/linkedin.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-linkedin\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnaliser les Ic\u00f4nes de R\u00e9seaux Sociaux avec CSS<\/h3>\n\n\n\n<p>Pouvoir personnaliser les ic\u00f4nes de r\u00e9seaux sociaux aide \u00e0 maintenir la coh\u00e9rence visuelle de votre site. Voici un exemple de style CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>footer .fab {\n    font-size: 20px;\n    margin: 0 15px;\n    color: white;\n}\n\nfooter .fab:hover {\n    color: #ff9900;\n}\n<\/code><\/pre>\n\n\n\n<p>En utilisant des classes de frameworks d&rsquo;ic\u00f4nes comme Font Awesome, vous pouvez facilement ajouter et styliser les ic\u00f4nes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Conditions de Responsivit\u00e9<\/h3>\n\n\n\n<p>Assurez que votre pied de page soit responsive pour une meilleure exp\u00e9rience utilisateur sur tous les appareils. Utilisez les media queries pour ajuster les styles sur diff\u00e9rents \u00e9crans :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n    footer {\n        text-align: left;\n        padding: 10px;\n    }\n\n    footer div {\n        margin: 5px 0;\n    }\n\n    footer .fab {\n        font-size: 16px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Compl\u00e9ter le Footer par des Formulaires de Contact<\/h3>\n\n\n\n<p>Les formulaires de contact dans un pied de page permettent aux utilisateurs de vous atteindre facilement. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;footer&gt;\n    &lt;div&gt;\n        &lt;p&gt;\u00a9 2023 Your Company. All rights reserved.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;a href=\"about.html\"&gt;About Us&lt;\/a&gt; | \n        &lt;a href=\"contact.html\"&gt;Contact&lt;\/a&gt; | \n        &lt;a href=\"privacy.html\"&gt;Privacy Policy&lt;\/a&gt;;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;a href=\"https:\/\/facebook.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-facebook\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"https:\/\/twitter.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"https:\/\/linkedin.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-linkedin\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;form&gt;\n            &lt;input type=\"text\" name=\"name\" placeholder=\"Your Name\"&gt;\n            &lt;input type=\"email\" name=\"email\" placeholder=\"Your Email\"&gt;\n            &lt;textarea name=\"message\" placeholder=\"Your Message\"&gt;&lt;\/textarea&gt;\n            &lt;button type=\"submit\"&gt;Send&lt;\/button&gt;\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser pour le SEO<\/h3>\n\n\n\n<p>Les moteurs de recherche appr\u00e9cient les sites bien structur\u00e9s et complets. Ajouter des informations et des liens pertinents dans votre footer peut am\u00e9liorer votre SEO. Assurez-vous d&rsquo;inclure des mots-cl\u00e9s pertinents et des balises m\u00e9ta appropri\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;footer&gt;\n    &lt;div&gt;\n        &lt;p&gt;\u00a9 2023 Your Company. All rights reserved.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;a href=\"about.html\"&gt;About Us&lt;\/a&gt; | \n        &lt;a href=\"contact.html\"&gt;Contact&lt;\/a&gt; | \n        &lt;a href=\"privacy.html\"&gt;Privacy Policy&lt;\/a&gt; | \n        &lt;a href=\"sitemap.xml\"&gt;Sitemap&lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;a href=\"https:\/\/facebook.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-facebook\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"https:\/\/twitter.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"https:\/\/linkedin.com\" target=\"_blank\"&gt;&lt;i class=\"fab fa-linkedin\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;\n        &lt;form&gt;\n            &lt;input type=\"text\" name=\"name\" placeholder=\"Your Name\"&gt;\n            &lt;input type=\"email\" name=\"email\" placeholder=\"Your Email\"&gt;\n            &lt;textarea name=\"message\" placeholder=\"Your Message\"&gt;&lt;\/textarea&gt;\n            &lt;button type=\"submit\"&gt;Send&lt;\/button&gt;\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La cr\u00e9ation d&rsquo;un pied de page en HTML bien structur\u00e9 et stylis\u00e9 contribue non seulement \u00e0 l&rsquo;apparence professionnelle de votre site, mais aussi \u00e0 sa convivialit\u00e9 et son SEO. En suivant ce tutorial, vous pouvez cr\u00e9er un footer fonctionnel qui am\u00e9liore l&rsquo;exp\u00e9rience utilisateur de votre site web. Continuez \u00e0 exp\u00e9rimenter avec diff\u00e9rents styles et contenus pour rendre votre pied de page unique et efficace.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-WEB-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation D\u00e9veloppement Web Offre 50%\" title=\"\"><\/a>\n\n\n<p><!-- Ajout de liens internes --><\/p>\n<p>Pour aller plus loin dans la cr\u00e9ation de votre site web, consultez nos guides sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">le fonctionnement des navigateurs web en HTML<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">les bases du langage HTML<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">comment cr\u00e9er votre premi\u00e8re page HTML<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir <a href=\"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\" target=\"_blank\" rel=\"noopener\">l&rsquo;int\u00e9gration des m\u00e9dias vid\u00e9o et audio en<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er un Pied de Page en HTML (footer) est essentiel pour donner \u00e0 votre site web une touche finale professionnelle. Comprendre comment structurer et styliser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2755,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5465","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\/5465","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=5465"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5465\/revisions"}],"predecessor-version":[{"id":6082,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5465\/revisions\/6082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2755"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}