{"id":4716,"date":"2021-03-10T00:10:26","date_gmt":"2021-03-09T23:10:26","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=4716"},"modified":"2025-10-05T19:03:48","modified_gmt":"2025-10-05T17:03:48","slug":"coder-sans-coder","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/coder-sans-coder\/","title":{"rendered":"Coder sans coder"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans les exercices qui suivent, vous allez manipuler des balises HTML virtuelles et reconstituer des structures simples par glisser-d\u00e9poser (drag and drop).<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/coder-sans-coder\/#Reconstituer_une_structure_HTML_simple\" >Reconstituer une structure HTML simple<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/coder-sans-coder\/#Reconstituer_une_structure_HTML_plus_complexe\" >Reconstituer une structure HTML plus complexe<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reconstituer_une_structure_HTML_simple\"><\/span>Reconstituer une structure HTML simple<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le premier exercice est accessible \u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/graphizm.fr\/fcs\/drag-and-drop-html\/\" target=\"_blank\">https:\/\/graphizm.fr\/fcs\/drag-and-drop-html\/<\/a><\/p>\n\n\n\n<p>\u279c Il s&rsquo;agit, en faisant glisser les balises de droite \u00e0 gauche, de <strong>reconstituer sch\u00e9matiquement une structure HTML du type h1-intro-h2-p-p<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/fcs\/drag-and-drop-html\/\" target=\"_blank\" rel=\" noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"501\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure_HTML5_simple-1024x501.jpg\" alt=\"\" class=\"wp-image-4748\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure_HTML5_simple-1024x501.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure_HTML5_simple-600x293.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure_HTML5_simple-768x375.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure_HTML5_simple-1200x587.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure_HTML5_simple.jpg 1389w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Cliquez sur l&rsquo;image pour faire l&rsquo;exercice<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>L&rsquo;introduction<\/strong> dont il est question est un simple paragraphe dont le contenu est affich\u00e9 en gras.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reconstituer_une_structure_HTML_plus_complexe\"><\/span>Reconstituer une structure HTML plus complexe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le second exercice d\u00e9veloppe la structure du premier exemple en ajoutant une feuille de style interne, un second titre h2 avec ses paragraphes puis un script d&rsquo;animation.<\/p>\n\n\n\n<p>Le premier exercice est accessible \u00e0 cette adresse&nbsp;: <a href=\"https:\/\/graphizm.fr\/fcs\/drag-and-drop-html-css-js\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/graphizm.fr\/fcs\/drag-and-drop-html-css-js\/<\/a><\/p>\n\n\n\n<p>\u279c Il s&rsquo;agit cette fois, toujours en faisant glisser les balises de droite \u00e0 gauche, de <strong>reconstituer sch\u00e9matiquement une structure HTML du type h1-intro-h2-p-p-h2-p-p<\/strong> int\u00e9grant les \u00e9l\u00e9ments ajout\u00e9s.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/fcs\/drag-and-drop-html-css-js\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure-html-complexe-1024x541.jpg\" alt=\"\" class=\"wp-image-4720\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure-html-complexe-1024x541.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure-html-complexe-600x317.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure-html-complexe-768x406.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure-html-complexe-1200x634.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/structure-html-complexe.jpg 1404w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Cliquez sur l&rsquo;image pour faire le second exercice<\/figcaption><\/figure>\n<\/div>\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Dans les exercices qui suivent, vous allez manipuler des balises HTML virtuelles et reconstituer des structures simples par glisser-d\u00e9poser (drag and drop). Reconstituer une structure HTML simple Le premier exercice est accessible \u00e0 cette adresse&nbsp;: https:\/\/graphizm.fr\/fcs\/drag-and-drop-html\/ \u279c Il s&rsquo;agit, en faisant glisser les balises de droite \u00e0 gauche, de reconstituer sch\u00e9matiquement une structure HTML du [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,20],"tags":[],"class_list":["post-4716","post","type-post","status-publish","format-standard","hentry","category-fcs","category-fcs1-exos"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans les exercices qui suivent, vous allez manipuler des balises HTML virtuelles et reconstituer des structures simples par glisser-d\u00e9poser (drag and drop). Sommaire Toggle Reconstituer une structure HTML simpleReconstituer une structure HTML plus complexe Reconstituer une structure HTML simple Le premier exercice est accessible \u00e0 cette adresse&nbsp;: https:\/\/graphizm.fr\/fcs\/drag-and-drop-html\/ \u279c Il s&rsquo;agit, en faisant glisser les balises de droite \u00e0 gauche, de reconstituer sch\u00e9matiquement une structure HTML du type h1-intro-h2-p-p Cliquez sur l&rsquo;image pour faire l&rsquo;exercice L&rsquo;introduction dont il est question est un simple paragraphe dont le contenu est affich\u00e9 en gras. Reconstituer une structure HTML plus complexe Le second exercice\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs1-exos\/\" rel=\"category tag\">FCS1-exos<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/4716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=4716"}],"version-history":[{"count":8,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/4716\/revisions"}],"predecessor-version":[{"id":7258,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/4716\/revisions\/7258"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=4716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=4716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=4716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}