{"id":5469,"date":"2024-08-27T20:29:10","date_gmt":"2024-08-27T20:29:10","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/contenu-aside-informations-html-utilisation\/"},"modified":"2024-08-27T20:29:13","modified_gmt":"2024-08-27T20:29:13","slug":"contenu-aside-informations-html-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/contenu-aside-informations-html-utilisation\/","title":{"rendered":"11.8 Contenu aside Informations en HTML : Utilisation"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Le contenu aside en HTML<\/strong> est un excellent moyen d&rsquo;inclure des informations compl\u00e9mentaires sans perturber le flux principal de votre contenu. Savoir comment utiliser le contenu aside peut am\u00e9liorer significativement l&rsquo;exp\u00e9rience utilisateur en fournissant des contextes additionnels ou des \u00e9l\u00e9ments de navigation. Apprenons comment impl\u00e9menter et styliser ces \u00e9l\u00e9ments gr\u00e2ce \u00e0 des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>contenu aside en HTML<\/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\/586679573?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>Les \u00e9l\u00e9ments <code>&lt;aside&gt;<\/code> en HTML sont utilis\u00e9s pour repr\u00e9senter une partie du contenu connect\u00e9 indirectement au contenu principal. Ils sont souvent utilis\u00e9s pour les barres lat\u00e9rales, les notes, les recommandations ou tout autre contenu compl\u00e9mentaire. Voici comment mettre en place un \u00e9l\u00e9ment <code>&lt;aside&gt;<\/code> et les meilleures pratiques pour leur utilisation :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un \u00e9l\u00e9ment aside<\/h3>\n\n\n\n<p>Pour cr\u00e9er un contenu aside, il suffit d&rsquo;utiliser la balise <code>&lt;aside&gt;<\/code>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;aside&gt;\n  &lt;h2&gt;Articles connexes&lt;\/h2&gt;\n  &lt;p&gt;D\u00e9couvrez plus sur le sujet avec ces articles connexes.&lt;\/p&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Article 1&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Article 2&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Article 3&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/aside&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styler un \u00e9l\u00e9ment aside via CSS<\/h3>\n\n\n\n<p>Pour que votre contenu aside soit visuellement attractif et distinct du contenu principal, vous pouvez utiliser du CSS. Voici un exemple de style simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>aside {\n  background-color: #f4f4f4;\n  padding: 20px;\n  margin: 20px 0;\n  border-left: 5px solid #ccc;\n}\n\naside h2 {\n  font-size: 1.5em;\n  margin-bottom: 15px;\n}\n\naside ul {\n  list-style-type: none;\n  padding-left: 0;\n}\n\naside ul li {\n  margin: 5px 0;\n}\n\naside ul li a {\n  text-decoration: none;\n  color: #007BFF;\n}\n\naside ul li a:hover {\n  text-decoration: underline;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations pratiques du contenu aside<\/h3>\n\n\n\n<p>Voyons maintenant quelques impl\u00e9mentations courantes des \u00e9l\u00e9ments aside dans des projets Web r\u00e9els :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Info Box ou Note<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments aside peuvent \u00eatre utilis\u00e9s pour des bo\u00eetes d&rsquo;information ou des notes, souvent stylis\u00e9es diff\u00e9remment pour attirer l&rsquo;attention :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;aside class=\"info-box\"&gt;\n  &lt;p&gt;&lt;strong&gt;Note:&lt;\/strong&gt; Assurez-vous de bien comprendre les concepts de base avant de poursuivre.&lt;\/p&gt;\n&lt;\/aside&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.info-box {\n  background-color: #FFF3CD;\n  border-left: 5px solid #FFEEBA;\n  padding: 15px;\n  margin: 20px 0;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Barre lat\u00e9rale ou Navigation secondaire<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments aside sont couramment utilis\u00e9s pour les barres lat\u00e9rales et les menus de navigation secondaire, ajoutant de la structure et de l&rsquo;ordre \u00e0 votre contenu :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;aside class=\"sidebar\"&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li&gt;&lt;a href=\"#\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#\"&gt;\u00c0 propos&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n&lt;\/aside&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.sidebar {\n  background-color: #f9f9f9;\n  padding: 20px;\n  border: 1px solid #ddd;\n}\n\n.sidebar nav ul {\n  list-style-type: none;\n  padding: 0;\n}\n\n.sidebar nav ul li {\n  margin: 10px 0;\n}\n\n.sidebar nav ul li a {\n  text-decoration: none;\n  color: #333;\n  font-weight: bold;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation du Contenu Aside<\/h3>\n\n\n\n<p>Pour explorer des exemples plus avanc\u00e9s, imaginons des sc\u00e9narios r\u00e9els o\u00f9 les \u00e9l\u00e9ments aside jouent un r\u00f4le cl\u00e9.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Fil d&rsquo;Actualit\u00e9 ou Notifications<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments aside peuvent \u00eatre utilis\u00e9s comme des fils d&rsquo;actualit\u00e9 ou des notifications pour informer les utilisateurs sans interrompre leur exp\u00e9rience principale :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;aside class=\"news-feed\"&gt;\n  &lt;h2&gt;Derni\u00e8res Nouvelles&lt;\/h2&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Nouvelle fonctionnalit\u00e9 lanc\u00e9e !&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Derni\u00e8re mise \u00e0 jour de la version 2.3&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/aside&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.news-feed {\n  background-color: #e0f7fa;\n  padding: 15px;\n  margin: 10px 0;\n}\n\n.news-feed h2 {\n  font-size: 1.2em;\n  margin-bottom: 10px;\n}\n\n.news-feed ul {\n  list-style-type: none;\n  padding: 0;\n}\n\n.news-feed ul li a {\n  color: #00796b;\n  text-decoration: none;\n}\n\n.news-feed ul li a:hover {\n  text-decoration: underline;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Publicit\u00e9 ou Promotion<\/h4>\n\n\n\n<p>Utiliser un \u00e9l\u00e9ment aside pour des publicit\u00e9s ou des promotions peut \u00eatre une m\u00e9thode efficace tout en gardant le contenu principal d\u00e9gag\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;aside class=\"promo\"&gt;\n  &lt;h2&gt;Promotion Sp\u00e9ciale&lt;\/h2&gt;\n  &lt;p&gt;Profitez de 50% de r\u00e9duction sur tous nos produits jusqu'\u00e0 la fin du mois !&lt;\/p&gt;\n  &lt;a href=\"#\" class=\"btn\"&gt;En savoir plus&lt;\/a&gt;\n&lt;\/aside&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.promo {\n  background-color: #ffe082;\n  padding: 20px;\n  margin: 20px 0;\n  border-left: 5px solid #ffb300;\n}\n\n.promo h2 {\n  font-size: 1.5em;\n  margin-bottom: 10px;\n}\n\n.promo p {\n  margin-bottom: 15px;\n}\n\n.promo .btn {\n  background-color: #fb8c00;\n  color: #fff;\n  padding: 10px 20px;\n  text-decoration: none;\n  border-radius: 5px;\n}\n\n.promo .btn:hover {\n  background-color: #ef6c00;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources et Liens Utiles<\/h3>\n\n\n\n<p>Consulter les ressources ci-dessous pour approfondir davantage vos connaissances sur l&rsquo;utilisation des \u00e9l\u00e9ments aside en HTML :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/aside\" target=\"_blank\" rel=\"noopener\">Documentation MDN sur aside<\/a><\/li>\n  <li><a href=\"https:\/\/www.w3schools.com\/tags\/tag_aside.asp\" target=\"_blank\" rel=\"noopener\">Tutoriel W3Schools sur aside<\/a><\/li>\n  <li><a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noopener\">CSS-Tricks: articles sur le stylisme CSS<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Le <strong>contenu aside en HTML<\/strong> permet d&rsquo;enrichir l&rsquo;exp\u00e9rience utilisateur en ajoutant des informations compl\u00e9mentaires sans encombrer le contenu principal. En utilisant correctement les \u00e9l\u00e9ments <code>&lt;aside&gt;<\/code>, vous pouvez am\u00e9liorer la navigation et l&rsquo;interaction sur votre site web. N&rsquo;h\u00e9sitez pas \u00e0 explorer davantage et \u00e0 exp\u00e9rimenter avec divers styles pour trouver ce qui fonctionne le mieux pour votre projet. Pour plus de tutoriels sur HTML et CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">les techniques avanc\u00e9es en HTML5 et CSS3<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/contenu-aside-informations-html-utilisation\" 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 HTML5 CSS3 Course\" title=\"\"><\/a>\n\n\n<!-- Ajouts pour atteindre les 1200 mots -->\n\n\n<h4 class=\"wp-block-heading\">Am\u00e9liorer la Navigation avec les \u00e9l\u00e9ments aside<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments aside peuvent \u00e9galement \u00eatre utilis\u00e9s pour","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Le contenu aside en HTML est un excellent moyen d&rsquo;inclure des informations compl\u00e9mentaires sans perturber le flux principal de votre contenu. Savoir comment utiliser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2712,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5469","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\/5469","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=5469"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5469\/revisions"}],"predecessor-version":[{"id":5470,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5469\/revisions\/5470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2712"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}