{"id":2226,"date":"2020-09-15T20:12:48","date_gmt":"2020-09-15T18:12:48","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=2226"},"modified":"2025-11-06T21:48:45","modified_gmt":"2025-11-06T20:48:45","slug":"activites-structure-html-page-web","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/fcs1-exos\/activites-structure-html-page-web\/","title":{"rendered":"Activit\u00e9s sur la structure HTML d&rsquo;une page Web"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Vous trouverez ci-dessous plusieurs activit\u00e9s vous permettant de <strong>consolider vos connaissances sur la structure \u00e9l\u00e9mentaire d&rsquo;une page Web<\/strong>.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 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\/fcs1-exos\/activites-structure-html-page-web\/#1_%E2%80%93_Collecter_des_images_sur_la_structure_HTML_elementaire\" >1 &#8211; Collecter des images sur la structure HTML \u00e9l\u00e9mentaire<\/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\/fcs1-exos\/activites-structure-html-page-web\/#2_%E2%80%93_Recherche_de_videos_sur_la_structureHTML_elementaire\" >2 &#8211; Recherche de vid\u00e9os sur la structureHTML \u00e9l\u00e9mentaire<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/fcs1-exos\/activites-structure-html-page-web\/#3_%E2%80%93_Completer_les_dialogues_dun_diaporama_pedagogique\" >3 &#8211; Compl\u00e9ter les dialogues d&rsquo;un diaporama p\u00e9dagogique<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E2%80%93_Collecter_des_images_sur_la_structure_HTML_elementaire\"><\/span>1 &#8211; Collecter des images sur la structure HTML \u00e9l\u00e9mentaire<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Avant de lancer un \u00e9diteur de code et de modifier le code source d&rsquo;une page HTML, je vous propose d&rsquo;aller faire un tour sur le Web et de <strong>collecter des images qui mettent en \u00e9vidence la structure \u00e9l\u00e9mentaire dont il a \u00e9t\u00e9 question jusqu&rsquo;ici.<\/strong><\/p>\n\n\n\n<p>Allez dans <strong>Google Images<\/strong> et saisissez \u201chtml structure\u201d ou \u201cstructure html\u201d (non, vous n&rsquo;obtiendrez pas les m\u00eames r\u00e9sultats&#8230;). Vous allez tr\u00e8s vite constater que les structures pr\u00e9sent\u00e9es sont loin d&rsquo;\u00eatre \u00e9l\u00e9mentaires et qu&rsquo;elles concernent souvent la structure des contenus plac\u00e9s dans le corps de la page (et non la structure \u00e9l\u00e9mentaire proprement dite).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Collectez seulement les images qui se rapportent \u00e0 la structure \u00e9l\u00e9mentaire<\/strong>. Laissez les autres images de c\u00f4t\u00e9 pour le moment (celles montrant des structures avec \u00ab\u00a0header\u00a0\u00bb, \u00ab\u00a0main\u00a0\u00bb, \u00ab\u00a0section\u00a0\u00bb, \u00ab\u00a0aside\u00a0\u00bb, et d&rsquo;autres encore&#8230;).<\/p>\n\n\n\n<p>Voici une des images que vous pouvez collecter&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"533\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/structureHTML.png\" alt=\"\" class=\"wp-image-471\"\/><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>Placez les images collect\u00e9es dans un dossier nomm\u00e9 \u00ab\u00a0images\u00a0\u00bb ou \u00ab\u00a0img\u00a0\u00bb<\/strong>, en ayant soin de renommer correctement chaque image (sans majuscule ni lettres accentu\u00e9es ni espace). Les 3 formats d&rsquo;images accept\u00e9s sont <strong>.jpg<\/strong> (ou .jpeg), <strong>.png<\/strong> et <strong>.gif<\/strong>.<\/p>\n\n\n\n<p>Ce dossier pourra vous servir ult\u00e9rieurement si vous envisagez d&rsquo;int\u00e9grer les images collect\u00e9es dans une page Web r\u00e9alis\u00e9e par vos soins (activit\u00e9 facultative).<\/p>\n\n\n\n<p>Vous placerez alors, dans un dossier nomm\u00e9 \u201cstructure-html\u201d, le dossier \u201cimages\u201d ou \u201cimg\u201d contenant les images collect\u00e9es. Ensuite, au m\u00eame niveau que le dossier contenant les images, vous placerez le fichier \u201cindex.html\u201d dans lequel seront int\u00e9gr\u00e9es les images et les textes d&rsquo;accompagnement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%E2%80%93_Recherche_de_videos_sur_la_structureHTML_elementaire\"><\/span>2 &#8211; Recherche de vid\u00e9os sur la structureHTML \u00e9l\u00e9mentaire<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Rien de tel que de savoir se documenter soi-m\u00eame en s\u00e9lectionnant de bon documents. Je vous invite \u00e0 <strong>faire une recherche sur les vid\u00e9os traitant de la structure \u00e9l\u00e9mentaire d&rsquo;une page HTML<\/strong>. Je vous mets sur la piste, un peu plus haut dans ce cours. \ud83d\ude09 Vous r\u00e9viserez les bases de la structuration d&rsquo;une page Web pendant que vous tenterez d&rsquo;\u00e9valuer la pertinence et le niveau de difficult\u00e9 du contenu de la vid\u00e9o. Priorit\u00e9 aux approches simples, claires, et non soporifiques&nbsp;!<\/p>\n\n\n\n<p><strong><span style=\"color: #0f0e17;\" class=\"stk-highlight\">Proposition&nbsp;:<\/span><\/strong> <strong>construisez une page Web simple<\/strong> pour lister vos liens vers les vid\u00e9os s\u00e9lectionn\u00e9es. Utilisez par exemple StackEdit pour structurer en Markdown le contenu de la page. Exportez ensuite votre contenu, stylis\u00e9, avec ou sans TOC.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%E2%80%93_Completer_les_dialogues_dun_diaporama_pedagogique\"><\/span>3 &#8211; Compl\u00e9ter les dialogues d&rsquo;un diaporama p\u00e9dagogique<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Si vous avez d\u00e9j\u00e0 eu l&rsquo;occasion d&rsquo;<strong>utiliser un \u00e9diteur de code comme Brackets\/Phoenix<\/strong>, pour remplacer des textes aux endroits indiqu\u00e9s, vous \u00eates capables de r\u00e9aliser cet exercice.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Pour remplacer ou compl\u00e9ter des textes<\/strong> (affich\u00e9s en noir dans Brackets\/Phoenix), il faut d&rsquo;abord les rep\u00e9rer. Ils sont plac\u00e9s dans le &lt;body&gt; entre les balises &lt;p&gt; et &lt;\/p&gt; (balises de paragraphe). La balise &lt;br&gt; (autofermante), souvent utilis\u00e9e, force le retour \u00e0 la ligne (br = abr\u00e9viation de \u00ab\u00a0break\u00a0\u00bb).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"472\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-1024x472.png\" alt=\"\" class=\"wp-image-558\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-1024x472.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-600x276.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-768x354.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-1200x553.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code.png 1416w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-2.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-2-1024x499.png\" alt=\"\" class=\"wp-image-579\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-2-1024x499.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-2-600x293.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-2-768x374.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-2-1200x585.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/modif-texte-dixit-code-2.png 1374w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">Il s&rsquo;agit de <strong>finaliser le dialogue imaginaire<\/strong> entre le code source d&rsquo;une page HTML, d&rsquo;une part, et un navigateur (auquel le code source s&rsquo;adresse), d&rsquo;autre part.<br><br>Tout est pr\u00eat c\u00f4t\u00e9 codage&#8230; vous pouvez <strong>t\u00e9l\u00e9charger le dossier du diaporama <\/strong>\u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/fcil\/dixit-code.zip\" target=\"_blank\"><\/a><a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/fcil\/dixit-code.zip\" target=\"_blank\">http:\/\/graphizm.fr\/fcil\/dixit-code.zip\/<\/a>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pensez bien \u00e0 <strong>d\u00e9compresser le fichier .zip<\/strong> avant d&rsquo;ouvrir le dossier \u00ab\u00a0dixit-code\u00a0\u00bb avec Brackets.<\/p>\n\n\n\n<p>Je vous montre ci-dessous <strong>le diaporama int\u00e9grant quelques diapos compl\u00e8tes<\/strong> et les diapositives \u00e0 compl\u00e9ter par vos soins. La modification des dialogues d\u00e9j\u00e0 en place est facultative.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Je vous donne le ton du dialogue et des expressions utilisables pour effectuer votre travail. Si ce ton ne vous convient pas vous pouvez modifier les textes que j&rsquo;ai saisi \u00e0 titre de d\u00e9monstration dans les premi\u00e8res diapositives.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/fcil\/dixit-code\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/titre-dixit-code-1-1024x534.png\" alt=\"\" class=\"wp-image-526\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/titre-dixit-code-1-1024x534.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/titre-dixit-code-1-600x313.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/titre-dixit-code-1-768x401.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/titre-dixit-code-1-1200x626.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/titre-dixit-code-1.png 1315w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u00a0<strong><span style=\"color: #fffffe;\" class=\"stk-highlight\">Attention&nbsp;:<\/span><\/strong> <strong>veillez \u00e0 faire en sorte que ce soit bien le code source qui s&rsquo;adresse au navigateur<\/strong>. Il s&rsquo;agit de se mettre \u00ab\u00a0dans la peau\u00a0\u00bb du code source&nbsp;! Quand le navigateur prend connaissance des instructions que lui transmet le code source, les instructions sont d\u00e9j\u00e0 r\u00e9dig\u00e9es (cod\u00e9es). En v\u00e9rit\u00e9, <strong>le navigateur n&rsquo;a pas d&rsquo;autre choix que de prendre en compte les instructions<\/strong> que le code lui transmet&nbsp;!<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Vous trouverez ci-dessous plusieurs activit\u00e9s vous permettant de consolider vos connaissances sur la structure \u00e9l\u00e9mentaire d&rsquo;une page Web. 1 &#8211; Collecter des images sur la structure HTML \u00e9l\u00e9mentaire Avant de lancer un \u00e9diteur de code et de modifier le code source d&rsquo;une page HTML, je vous propose d&rsquo;aller faire un tour sur le Web et [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-2226","post","type-post","status-publish","format-standard","hentry","category-fcs1-exos"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Vous trouverez ci-dessous plusieurs activit\u00e9s vous permettant de consolider vos connaissances sur la structure \u00e9l\u00e9mentaire d&rsquo;une page Web. Sommaire Toggle 1 &#8211; Collecter des images sur la structure HTML \u00e9l\u00e9mentaire2 &#8211; Recherche de vid\u00e9os sur la structureHTML \u00e9l\u00e9mentaire3 &#8211; Compl\u00e9ter les dialogues d&rsquo;un diaporama p\u00e9dagogique 1 &#8211; Collecter des images sur la structure HTML \u00e9l\u00e9mentaire Avant de lancer un \u00e9diteur de code et de modifier le code source d&rsquo;une page HTML, je vous propose d&rsquo;aller faire un tour sur le Web et de collecter des images qui mettent en \u00e9vidence la structure \u00e9l\u00e9mentaire dont il a \u00e9t\u00e9 question jusqu&rsquo;ici. Allez\u2026<\/p>","category_list_v2":"<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\/2226","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=2226"}],"version-history":[{"count":29,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2226\/revisions"}],"predecessor-version":[{"id":7493,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2226\/revisions\/7493"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=2226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=2226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=2226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}