{"id":5327,"date":"2024-08-27T15:45:55","date_gmt":"2024-08-27T15:45:55","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/contexte-navigation-imbrique-html\/"},"modified":"2024-08-27T15:45:58","modified_gmt":"2024-08-27T15:45:58","slug":"contexte-navigation-imbrique-html","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/contexte-navigation-imbrique-html\/","title":{"rendered":"2.11 Contexte de Navigation Imbriqu\u00e9 en HTML"},"content":{"rendered":"\n<p><strong>Les contextes de navigation imbriqu\u00e9 en HTML<\/strong>, aussi connus sous le nom de fichiers HTML int\u00e9gr\u00e9s, permettent d&rsquo;inclure des documents HTML dans d&rsquo;autres documents HTML \u00e0 l&rsquo;aide des \u00e9l\u00e9ments <code>&lt;iframe&gt;<\/code>, <code>&lt;object&gt;<\/code>, ou <code>&lt;embed&gt;<\/code>. Comprendre comment utiliser correctement ces \u00e9l\u00e9ments peut vous aider \u00e0 incorporer des contenus dynamiques et interactifs dans vos pages web. Apprenons comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Contextes de Navigation Imbriqu\u00e9 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:\/\/www.youtube.com\/embed\/VIDEO_ID\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/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>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementsByTagName('iframe')[0];\n    var isPopupDisplayed = false;\n\n    iframe.addEventListener('load', function() {\n        \/\/ Simulate video play event and time update for desktop and mobile popups\n        setTimeout(function () {\n            if (!isPopupDisplayed) {\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        }, 120000); \/\/ 120000 milliseconds = 2 minutes\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    }\n});\n<\/script>\n\n\n\n<p>Les contextes de navigation imbriqu\u00e9s en HTML permettent d&rsquo;int\u00e9grer des parties de contenu web comme des vid\u00e9os, des formulaires, ou m\u00eame des widgets interactifs au sein de vos pages web. Ces \u00e9l\u00e9ments sont encapsul\u00e9s dans des balises sp\u00e9cifiques comme <code>&lt;iframe&gt;<\/code>. Voyons en d\u00e9tail comment les utiliser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de l&rsquo;\u00e9l\u00e9ment <code>&lt;iframe&gt;<\/code><\/h3>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;iframe&gt;<\/code> permet d&rsquo;int\u00e9grer un autre document HTML dans une page HTML. Voici un exemple simple d&rsquo;utilisation de cette balise :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&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;Page avec iFrame&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;Exemple d'Int\u00e9gration via iFrame&lt;\/h1&gt;\n\n&lt;iframe src=\"https:\/\/www.example.com\" width=\"600\" height=\"400\" allowfullscreen&gt;&lt;\/iframe&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration avec <code>&lt;object&gt;<\/code><\/h3>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;object&gt;<\/code> offre une polyvalence pour int\u00e9grer divers types de m\u00e9dia, y compris des documents HTML. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&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;Page avec Object&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;Exemple d'Int\u00e9gration via Object&lt;\/h1&gt;\n\n&lt;object data=\"https:\/\/www.example.com\" width=\"600\" height=\"400\"&gt;\n  &lt;p&gt;Votre navigateur ne prend pas en charge les objets int\u00e9gr\u00e9s. &lt;a href=\"https:\/\/www.example.com\"&gt;Cliquez ici&lt;\/a&gt; pour acc\u00e9der au contenu.&lt;\/p&gt;\n&lt;\/object&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de l&rsquo;\u00e9l\u00e9ment <code>&lt;embed&gt;<\/code><\/h3>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;embed&gt;<\/code> est utilis\u00e9 pour int\u00e9grer du contenu externe ou multim\u00e9dia, comme des vid\u00e9os ou des documents interactifs. Voici un exemple:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&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;Page avec Embed&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;Exemple d'Int\u00e9gration via Embed&lt;\/h1&gt;\n\n&lt;embed src=\"https:\/\/www.example.com\" width=\"600\" height=\"400\"&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">S\u00e9curit\u00e9 et Contextes de Navigation Imbriqu\u00e9<\/h3>\n\n\n\n<p>Il est essentiel de prendre en compte les aspects de s\u00e9curit\u00e9 lors de l&rsquo;utilisation de contextes de navigation imbriqu\u00e9s. L&rsquo;inclusion de contenus externes via <code>&lt;iframe&gt;<\/code>, <code>&lt;object&gt;<\/code>, ou <code>&lt;embed&gt;<\/code> peut exposer vos pages \u00e0 diverses menaces comme les attaques par script intersites (XSS). Pour att\u00e9nuer ces risques, vous pouvez utiliser des directives de politique de s\u00e9curit\u00e9 des contenus (Content Security Policy, CSP) et des attributs comme <code>sandbox<\/code> et <code>allow<\/code> sur les balises <code>&lt;iframe&gt;<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;iframe src=\"https:\/\/www.example.com\" width=\"600\" height=\"400\" sandbox=\"allow-scripts\" allow=\"autoplay 'self'\"&gt;&lt;\/iframe&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En ma\u00eetrisant les <strong>contextes de navigation imbriqu\u00e9 en HTML<\/strong>, vous pouvez int\u00e9grer du contenu interactif et dynamique dans vos pages web de mani\u00e8re s\u00e9curis\u00e9e et efficace. Prenez en compte les bonnes pratiques de s\u00e9curit\u00e9 pour prot\u00e9ger vos utilisateurs tout en offrant une exp\u00e9rience enrichissante. Pour en savoir plus sur les bonnes pratiques et les nouvelles fonctionnalit\u00e9s HTML5, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">cours complet sur HTML5 et CSS3<\/a>.<\/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-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python Offre 50%\" title=\"\"><\/a>\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 HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n1. L&rsquo;objet de cet article concerne le contexte de navigation imbriqu\u00e9 en HTML, qui permet d&rsquo;int\u00e9grer des \u00e9l\u00e9ments comme des vid\u00e9os, des formulaires et d&rsquo;autres contenus interactifs. Pour en apprendre davantage sur ce sujet et d&rsquo;autres fondamentaux, visitez notre guide complet sur le [fonctionnement d&rsquo;un navigateur web](https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide).\n\n2. La ma\u00eetrise des bases du langage HTML est essentielle pour bien comprendre les contextes de navigation imbriqu\u00e9. Si vous d\u00e9butez, consultez notre article sur [les bases du langage HTML](https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux).\n\n3. Pour ceux qui sont \u00e0 leurs d\u00e9buts et souhaitent cr\u00e9er une page web, voici un excellent tutoriel pour [cr\u00e9er votre premi\u00e8re page HTML](https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile).\n\n4. Tout \u00e9l\u00e9ment HTML commence par une bonne structure, et l&rsquo;\u00e9l\u00e9ment head est crucial pour cela. Apprenez tout ce qu&rsquo;il y a \u00e0 savoir sur l'[\u00e9l\u00e9ment HTML head](https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir).\n\n5. Les \u00e9l\u00e9ments textuels sont omnipr\u00e9sents dans les pages HTML. Pour comprendre comment les utiliser efficacement, lisez notre guide sur les [\u00e9l\u00e9ments textuels en HTML](https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet).\n\n<!-- R\u00e9int\u00e9gration de la vid\u00e9o Vimeo sous le premier H2 -->\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\/586254567?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","protected":false},"excerpt":{"rendered":"<p>Les contextes de navigation imbriqu\u00e9 en HTML, aussi connus sous le nom de fichiers HTML int\u00e9gr\u00e9s, permettent d&rsquo;inclure des documents HTML dans d&rsquo;autres documents HTML&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2713,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5327","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\/5327","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=5327"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5327\/revisions"}],"predecessor-version":[{"id":5328,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5327\/revisions\/5328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2713"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}