{"id":5459,"date":"2024-08-27T20:08:43","date_gmt":"2024-08-27T20:08:43","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/entete-site-html-utiliser-header\/"},"modified":"2024-12-05T16:40:03","modified_gmt":"2024-12-05T16:40:03","slug":"entete-site-html-utiliser-header","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/entete-site-html-utiliser-header\/","title":{"rendered":"11.3 Ent\u00eate du Site en HTML : Utiliser header"},"content":{"rendered":"\n<p><strong>Les ent\u00eates de site en HTML<\/strong> sont un \u00e9l\u00e9ment cl\u00e9 pour structurer une page web. Ma\u00eetriser l&rsquo;utilisation de l&rsquo;\u00e9l\u00e9ment <code>&lt;header&gt;<\/code> et y ajouter des contenus pertinents permet d&rsquo;am\u00e9liorer l&rsquo;organisation et l&rsquo;accessibilit\u00e9 de vos sites web. Apprenons comment le faire en suivant des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;\u00e9l\u00e9ment <strong>&lt;header&gt;<\/strong> 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\/586679286?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;\u00e9l\u00e9ment <code>&lt;header&gt;<\/code> en HTML est utilis\u00e9 pour d\u00e9finir une ent\u00eate dans un document ou une section. Habituellement, il contient des \u00e9l\u00e9ments comme le logo, les titres, les menus de navigation, et d&rsquo;autres informations d&rsquo;introduction. Un <code>&lt;header&gt;<\/code> peut appara\u00eetre au d\u00e9but d&rsquo;une page ou au d\u00e9but de chaque section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9l\u00e9ments Contenus dans un <strong>&lt;header&gt;<\/strong><\/h3>\n\n\n\n<p>Un <code>&lt;header&gt;<\/code> se compose g\u00e9n\u00e9ralement d&rsquo;un ensemble d&rsquo;\u00e9l\u00e9ments importants pour la navigation et l&rsquo;identit\u00e9 du site. Voyons un exemple simple de code HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;header&gt;\n  &lt;div class=\"logo\"&gt;\n    &lt;img src=\"logo.png\" alt=\"Logo du site\"&gt;\n  &lt;\/div&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li&gt;&lt;a href=\"#home\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#about\"&gt;\u00c0 propos&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#services\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation de l&rsquo;Ent\u00eate avec CSS<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;apparence de votre ent\u00eate de site, vous pouvez utiliser des styles CSS afin de le rendre plus attrayant. Voici un exemple:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>header {\n  background: #333;\n  color: #fff;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 20px;\n}\n\n.logo img {\n  max-width: 150px;\n}\n\nnav ul {\n  list-style: none;\n  display: flex;\n  gap: 20px;\n}\n\nnav ul li a {\n  color: #fff;\n  text-decoration: none;\n  padding: 5px 10px;\n  border-radius: 5px;\n}\n\nnav ul li a:hover {\n  background: #444;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajout de Fonctionnalit\u00e9s Interactives avec JavaScript<\/h3>\n\n\n\n<p>Pour ajouter de l&rsquo;interactivit\u00e9 \u00e0 votre ent\u00eate du site, vous pouvez utiliser JavaScript. Voici comment int\u00e9grer un menu d\u00e9roulant pour une meilleure exp\u00e9rience utilisateur:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;header&gt;\n  &lt;div class=\"logo\"&gt;\n    &lt;img src=\"logo.png\" alt=\"Logo du site\"&gt;\n  &lt;\/div&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li class=\"dropdown\"&gt;\n        &lt;a href=\"#services\"&gt;Services&lt;\/a&gt;\n        &lt;ul class=\"dropdown-content\"&gt;\n          &lt;li&gt;&lt;a href=\"#webdesign\"&gt;Webdesign&lt;\/a&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;a href=\"#seo\"&gt;SEO&lt;\/a&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;a href=\"#marketing\"&gt;Marketing&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>li.dropdown {\n  position: relative;\n}\n\nli.dropdown .dropdown-content {\n  display: none;\n  position: absolute;\n  background-color: #fff;\n  min-width: 160px;\n  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n}\n\nli.dropdown:hover .dropdown-content {\n  display: block;\n}\n\nli.dropdown .dropdown-content li {\n  padding: 12px 16px;\n}\n\nli.dropdown .dropdown-content li a {\n  color: #333;\n  text-decoration: none;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Accessibilit\u00e9 et SEO de l&rsquo;Ent\u00eate de Site<\/h3>\n\n\n\n<p>Pour rendre votre ent\u00eate du site accessible \u00e0 tous et optimiser son impact sur le SEO de votre site, consid\u00e9rez les bonnes pratiques suivantes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez des balises s\u00e9mantiques appropri\u00e9es, telles que <code>&lt;nav&gt;<\/code> pour les sections de navigation. D\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">guide complet sur les \u00e9l\u00e9ments HTML<\/a>.<\/li>\n<li>Ajoutez des attributs <code>alt<\/code> descriptifs pour les images, en particulier pour les logos. Cela fait partie des bonnes pratiques pour am\u00e9liorer <a href=\"https:\/\/wikiform.fr\/codespace\/commentaires-html-utilisation\" target=\"_blank\" rel=\"noopener noreferrer\">les commentaires HTML<\/a> \u00e0 des fins SEO.<\/li>\n<li>Assurez-vous que tous les liens sont clairement \u00e9tiquet\u00e9s et accessibles via le clavier.<\/li>\n<li>Incluez des \u00e9l\u00e9ments de navigation clairs pour faciliter l\u2019acc\u00e8s aux diff\u00e9rentes sections comme <a href=\"https:\/\/wikiform.fr\/codespace\/sections-et-articles-html\">les sections et articles en HTML<\/a>.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;header&gt;\n  &lt;div class=\"logo\"&gt;\n    &lt;img src=\"logo.png\" alt=\"Logo de [Nom du Site]\"&gt;\n  &lt;\/div&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li&gt;&lt;a href=\"#home\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#about\"&gt;\u00c0 propos&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#services\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&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 conclusion, l&rsquo;utilisation de l&rsquo;\u00e9l\u00e9ment <strong>&lt;header&gt;<\/strong> en HTML permet de structurer efficacement les parties essentielles de votre site web. En combinant HTML, CSS et JavaScript, vous pouvez cr\u00e9er des ent\u00eates stylis\u00e9es, interactives et optimis\u00e9es pour l&rsquo;accessibilit\u00e9 et le SEO. Continuez \u00e0 explorer les possibilit\u00e9s offertes par ces technologies afin de <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener noreferrer\">cr\u00e9er votre premi\u00e8re page HTML<\/a> ou encore pour <a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\" target=\"_blank\" rel=\"noopener noreferrer\">r\u00e9diger du CSS pour des pages HTML<\/a>. Pour approfondir vos connaissances, explorez notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\" target=\"_blank\" rel=\"noopener noreferrer\">les m\u00e9dias en HTML<\/a>. D\u00e9couvrez aussi comment <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\" target=\"_blank\" rel=\"noopener noreferrer\">utiliser la syntaxe CSS<\/a> pour vous aider dans la cr\u00e9ation de votre site.<\/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\"><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 HTML5 et CSS3 Offre 50%\" title=\"\"><\/a>\n\n\nPour plus de tutoriels sur l&rsquo;utilisation des \u00e9l\u00e9ments HTML, consultez notre article sur [l&rsquo;impl\u00e9mentation des sections et articles](https:\/\/wikiform.fr\/application\/learnify\/home\/course\/impl%C3%A9menter-des-sections-et-articles-en-html\/150). Pour apprendre \u00e0 cr\u00e9er une interface utilisateur attrayante, lisez notre [tutoriel sur le design web avec CSS](https:\/\/wikiform.fr\/application\/learnify\/home\/course\/design-web-avec-css-avanc%C3%A9\/160).","protected":false},"excerpt":{"rendered":"<p>Les ent\u00eates de site en HTML sont un \u00e9l\u00e9ment cl\u00e9 pour structurer une page web. Ma\u00eetriser l&rsquo;utilisation de l&rsquo;\u00e9l\u00e9ment &lt;header&gt; et y ajouter des contenus&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5459","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\/5459","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=5459"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5459\/revisions"}],"predecessor-version":[{"id":5460,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5459\/revisions\/5460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2730"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}