{"id":5329,"date":"2024-08-27T15:49:11","date_gmt":"2024-08-27T15:49:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/conteneur-generique-div-span-html\/"},"modified":"2024-11-08T19:09:27","modified_gmt":"2024-11-08T19:09:27","slug":"conteneur-generique-div-span-html","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/conteneur-generique-div-span-html\/","title":{"rendered":"2.12 Conteneur G\u00e9n\u00e9rique div et span en HTML"},"content":{"rendered":"\n\n\n<p><strong>Utilisation des \u00e9l\u00e9ments div et span en HTML<\/strong> comme conteneurs g\u00e9n\u00e9riques. Ces deux \u00e9l\u00e9ments jouent des r\u00f4les cruciaux dans la structuration et la stylisation des pages web. Apprenez la diff\u00e9rence entre les deux et d\u00e9couvrez comment et quand les utiliser gr\u00e2ce \u00e0 ce tutoriel complet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>div<\/strong> et <strong>span<\/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\/586254678?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;div&gt;<\/code> et <code>&lt;span&gt;<\/code> en HTML sont utilis\u00e9s pour structurer et manipuler le contenu de mani\u00e8re flexible. Bien qu&rsquo;ils n&rsquo;aient pas de s\u00e9mantique propre, ils sont essentiels pour organiser les \u00e9l\u00e9ments et appliquer des styles CSS ou des scripts JavaScript. Explorons leurs sp\u00e9cificit\u00e9s et utilisations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre l&rsquo;\u00e9l\u00e9ment <strong>div<\/strong><\/h3>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;div&gt;<\/code> est un conteneur de division en bloc. Il occupe toute la largeur de son conteneur parent et commence toujours sur une nouvelle ligne. C&rsquo;est parfait pour regrouper de grandes sections de contenu pour la mise en page ou pour appliquer des styles CSS complexes.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"header\"&gt;\n    &lt;h1&gt;Bienvenue sur mon site&lt;\/h1&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"content\"&gt;\n    &lt;p&gt;Voici le contenu principal du site.&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"footer\"&gt;\n    &lt;p&gt;Contact : email@example.com&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre l&rsquo;\u00e9l\u00e9ment <strong>span<\/strong><\/h3>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;span&gt;<\/code> est un conteneur en ligne. Contrairement au <code>&lt;div&gt;<\/code>, il ne commence pas sur une nouvelle ligne et ne perturbe pas le flux du texte environnant. Il est principalement utilis\u00e9 pour cibler une partie sp\u00e9cifique de texte ou d&rsquo;autres \u00e9l\u00e9ments en vue de leur application de styles CSS sp\u00e9cifiques ou de scripts JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;p&gt;Ceci est un &lt;span style=\"color: red;\"&gt;texte en rouge&lt;\/span&gt; au sein d'un paragraphe.&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Quand utiliser <strong>div<\/strong> et <strong>span<\/strong><\/h3>\n\n\n\n<p>Il est important de choisir le bon \u00e9l\u00e9ment en fonction du contexte :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez <code>&lt;div><\/code> pour regrouper des sections de contenu en blocs, comme les mises en page, les articles, les en-t\u00eates et les pieds de page.<\/li>\n\n\n\n<li>Utilisez <code>&lt;span><\/code> pour cibler des parties sp\u00e9cifiques de texte ou d&rsquo;autres \u00e9l\u00e9ments au sein d&rsquo;une ligne pour appliquer des styles ou des scripts sans perturber le flux.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples concrets d&rsquo;utilisation combin\u00e9e<\/h3>\n\n\n\n<p>Voyons maintenant comment combiner efficacement les \u00e9l\u00e9ments <code>&lt;div&gt;<\/code> et <code>&lt;span&gt;<\/code> pour cr\u00e9er une structure HTML flexible et stylis\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"article\"&gt;\n  &lt;h2&gt;Titre de l'article&lt;\/h2&gt;\n  &lt;p&gt;\n    Cet article explique comment utiliser les \u00e9l\u00e9ments \n    &lt;span style=\"font-weight:bold;\"&gt;&lt;span&gt;&lt;code&gt;&lt;div&gt;&lt;\/code&gt;&lt;\/span&gt; \n    et \n    &lt;span style=\"font-weight:bold;\"&gt;&lt;span&gt;&lt;code&gt;&lt;span&gt;&lt;\/code&gt;&lt;\/span&gt;\n    en HTML.\n  &lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation avec CSS<\/h3>\n\n\n\n<p>Pour rendre notre contenu plus attrayant, nous pouvons styliser les \u00e9l\u00e9ments <code>&lt;div&gt;<\/code> et <code>&lt;span&gt;<\/code> avec CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.article {\n  padding: 20px;\n  border: 1px solid #ddd;\n}\n\n.article h2 {\n  color: #333;\n}\n\n.article p {\n  font-size: 16px;\n}\n\n.article span {\n  color: #007BFF;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Interactivit\u00e9 avec JavaScript<\/h3>\n\n\n\n<p>Nous pouvons \u00e9galement ajouter des interactions \u00e0 ces \u00e9l\u00e9ments en utilisant JavaScript. Par exemple, afficher une alerte lorsque l&rsquo;utilisateur clique sur une partie sp\u00e9cifique du texte :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;p&gt;\n  Cliquez sur ce &lt;span onclick=\"alert('Vous avez cliqu\u00e9!');\" style=\"cursor: pointer;\"&gt;texte interactif&lt;\/span&gt;.\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion sur les Conteneurs G\u00e9n\u00e9riques div et span<\/strong><\/h2>\n\n\n\n<p>Les \u00e9l\u00e9ments <strong>div<\/strong> et <strong>span<\/strong> en HTML sont des outils puissants pour organiser, styliser et manipuler le contenu de vos pages web. En les utilisant correctement, vous pouvez cr\u00e9er des sites web \u00e0 la fois attrayants et fonctionnels. Continuez \u00e0 exp\u00e9rimenter avec ces \u00e9l\u00e9ments pour voir comment ils peuvent am\u00e9liorer la structure et l&rsquo;apparence de vos projets web. Pour plus de ressources, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">guide sur le fonctionnement des navigateurs web<\/a>, notre <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">cours sur les bases du langage HTML<\/a>, et apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">cr\u00e9er votre premi\u00e8re page HTML<\/a>.<\/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\n","protected":false},"excerpt":{"rendered":"<p>Utilisation des \u00e9l\u00e9ments div et span en HTML comme conteneurs g\u00e9n\u00e9riques. Ces deux \u00e9l\u00e9ments jouent des r\u00f4les cruciaux dans la structuration et la stylisation des&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2710,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5329","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\/5329","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=5329"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5329\/revisions"}],"predecessor-version":[{"id":6029,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5329\/revisions\/6029"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2710"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}