{"id":101,"date":"2020-03-17T15:25:17","date_gmt":"2020-03-17T14:25:17","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=101"},"modified":"2025-10-08T09:16:14","modified_gmt":"2025-10-08T07:16:14","slug":"contenu-dossier-page-web","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/contenu-dossier-page-web\/","title":{"rendered":"Contenu d&rsquo;un dossier de page Web"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours vous allez <strong>apprendre \u00e0 identifier les composantes d&rsquo;un site Web statique<\/strong>.<\/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\/contenu-dossier-page-web\/#Identifier_le_fichier_indexhtml\" >Identifier le fichier index.html<\/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\/contenu-dossier-page-web\/#Reperer_le_contenu_dun_dossier_de_site\" >Rep\u00e9rer le contenu d&rsquo;un dossier de site<\/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\/contenu-dossier-page-web\/#Manipuler_le_code_source\" >Manipuler le code source<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/contenu-dossier-page-web\/#En_savoir_plus\" >En savoir plus<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Identifier_le_fichier_indexhtml\"><\/span>Identifier le fichier index.html<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tous les sites Web ont une page d&rsquo;accueil. Cette page est g\u00e9n\u00e9ralement nomm\u00e9e <strong>index.html<\/strong>. On d\u00e9signe g\u00e9n\u00e9ralement un fichier enregistr\u00e9 au format HTML sous le nom de page HTML ou page Web.<\/p>\n\n\n\n<p>Une page Web est donc <strong>un document enregistr\u00e9 au format HTML dans lequel des informations de plusieurs types sont cod\u00e9es<\/strong>. On trouve ainsi dans une page HTML des informations se rapportant directement ou indirectement aux fichiers suivants&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>la ou les feuille(s) de style associ\u00e9es<\/li>\n\n\n\n<li>la ou les images ins\u00e9r\u00e9e(s)<\/li>\n\n\n\n<li>le ou les script(s) utilis\u00e9(s)<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background-background-color has-background\" style=\"font-size:16px\">La ou Les <strong>feuilles de style<\/strong> se rapportent au codage de l&rsquo;apparence d&rsquo;un site. Le ou les <strong>scripts<\/strong> se rapportent au codage de l&rsquo;animation des composants d&rsquo;un site.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Chacun de ces fichier n&rsquo;est pas obligatoirement associ\u00e9 \u00e0 une page Web mais <strong>la plupart des pages publi\u00e9es en int\u00e8grent un ou plusieurs<\/strong> (notamment les 2 premiers).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reperer_le_contenu_dun_dossier_de_site\"><\/span>Rep\u00e9rer le contenu d&rsquo;un dossier de site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour organiser l&rsquo;\u00e9dition et la publication des pages Web, on place de pr\u00e9f\u00e9rence ces fichiers dans <strong>des dossiers nomm\u00e9s de fa\u00e7on explicite<\/strong>. On utilise le plus souvent les dossiers suivants&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>un dossier nomm\u00e9 <strong>css<\/strong> (ou <strong>styles<\/strong>) pour y placer les feuilles de style au format <strong>.css<\/strong><\/li>\n\n\n\n<li>un dossier nomm\u00e9 <strong>img<\/strong> (ou <strong>images<\/strong>) pour y placer les images aux formats <strong>.jpg<\/strong>, <strong>.png<\/strong> ou <strong>.gif<\/strong><\/li>\n\n\n\n<li>un dossier nomm\u00e9 <strong>js<\/strong> (ou <strong>scripts<\/strong>) pour y placer les scripts au format <strong>.js<\/strong> <\/li>\n<\/ul>\n\n\n\n<p class=\"has-accent-background-color has-background\">Tous ces dossiers sont ensuite plac\u00e9s dans un dossier qu&rsquo;on nomme commun\u00e9ment <strong>dossier du site<\/strong> (pour le d\u00e9signer entre designers et d\u00e9veloppeurs). Ce dossier porte toutefois un nom (informatiquement) et <strong>ce nom est utilis\u00e9 dans l&rsquo;URL du site en question<\/strong>.<\/p>\n\n\n\n<p>Ce sont les noms de ces dossiers de site que vous retrouvez au bout des URL, lors de vos navigations.<\/p>\n\n\n\n<p>Par exemple, le documents que vous allez ouvrir dans un instant est accessible \u00e0 cette adresse&nbsp;: <strong>http:\/\/graphizm.fr\/contenu-dossier-page-web\/<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Quel est le nom du dossier dans lequel ce document se trouve plac\u00e9&nbsp;?<\/em><\/li>\n\n\n\n<li><em>Quel est le nom du fichier html que lit votre navigateur pour vous permettre de prendre connaissance du contenu du document&nbsp;?<\/em><\/li>\n<\/ul>\n\n\n\n<p><strong>\u279c Manipulez le document ci-dessous<\/strong> pour d\u00e9couvrir plus de d\u00e9tails au sujet du contenu d&rsquo;un site Web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/fcs\/contenu-dossier-page-web\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"640\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/contenu-dossier-page-web.png\" alt=\"\" class=\"wp-image-103\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/contenu-dossier-page-web.png 772w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/contenu-dossier-page-web-600x497.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/contenu-dossier-page-web-768x637.png 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/a><\/figure>\n\n\n\n<p>Si d&rsquo;autres ressources doivent \u00eatre associ\u00e9es \u00e0 une page Web, <strong>il est possible de cr\u00e9er d&rsquo;autres dossiers<\/strong> pour les classer convenablement. Il est ainsi possible d&rsquo;utiliser un dossier <strong>fonts<\/strong> ou <strong>fontes<\/strong> pour y placer des polices de caract\u00e8res.<\/p>\n\n\n\n<p><strong>\u279c<\/strong> <strong>Affichez le code source du document<\/strong> ci-dessus et r\u00e9pondez aux questions suivantes&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Quel est le nom du dossier dans lequel se trouve le fichier intitul\u00e9 style.css<\/em> <em>? <\/em><\/li>\n\n\n\n<li><em>Quel est le num\u00e9ro de la ligne o\u00f9 se trouve l&rsquo;indication<\/em> <em>de la r\u00e9ponse \u00e0 la question pr\u00e9c\u00e9dente&nbsp;?<\/em><\/li>\n\n\n\n<li><em>Quel est le nom du dossier dans lequel se trouve le fichier intitul\u00e9 index.js<\/em> <em>?<\/em><\/li>\n\n\n\n<li><em>Quel est le num\u00e9ro de la ligne o\u00f9 se trouve l&rsquo;indication<\/em> <em>de la r\u00e9ponse \u00e0 la question pr\u00e9c\u00e9dente&nbsp;?<\/em><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Le type de page Web dont il est question ici est nomm\u00e9e page Web \u201cstatique\u201d et le site qu&rsquo;elle pr\u00e9sente est nomm\u00e9 \u201dsite statique\u201d.<\/p>\n\n\n\n<p>Cela ne signifie pas que le contenu de la page ne bouge pas. Ils s&rsquo;agit d&rsquo;une page HTML dont le contenu ne varie pas en fonction de la demande de l&rsquo;utilisateur. On oppose les <strong>pages statiques<\/strong> aux <strong>pages dynamiques<\/strong>.<\/p>\n\n\n\n<p>Faites une recherche sur le Web en utilisant la requ\u00eate suivante&nbsp;: <em>page web statique vs page web dynamique<\/em>. Cela vous am\u00e8nera tr\u00e8s probablement \u00e0 <strong>\u00e9claircir plusieurs autres concepts en rapport avec la publication Web<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Manipuler_le_code_source\"><\/span>Manipuler le code source<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour examiner le contenu d&rsquo;un dossier de site Web, t\u00e9l\u00e9chargez le fichier <a href=\"http:\/\/graphizm.fr\/fcs\/pangrammes\/pangrammes.zip\">pangrammes.zip<\/a>, <strong>d\u00e9compressez-le et examinez son contenu<\/strong>.<\/p>\n\n\n\n<p>Des pr\u00e9cisions vous sont apport\u00e9es sur le <strong>contenu du fichier index.html<\/strong> sur <a href=\"http:\/\/graphizm.fr\/fcs\/manipulation-code-source\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"graphizm.fr\/fcs\/manipulation-code-source (s\u2019ouvre dans un nouvel onglet)\">graphizm.fr\/fcs\/manipulation-code-source<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"En_savoir_plus\"><\/span>En savoir plus<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>G\u00e9rer les fichiers d&rsquo;un site Web<\/strong> sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Apprendre\/Commencer_avec_le_web\/G%C3%A9rer_les_fichiers\">developer.mozilla.org<\/a><\/li>\n\n\n\n<li><strong>Comment organiser ses fichiers<\/strong> sur <a href=\"https:\/\/www.apprendre-html-et-css.com\/comment_organiser_ses_fichiers.html\">apprendre-html-et-css.com<\/a> . <em>Les nombreuses fautes d&rsquo;orthographe pr\u00e9sentes sur les pages de ce site nous montrent l&rsquo;importance d&rsquo;une relecture des textes avant publication&#8230;<\/em><\/li>\n<\/ul>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours vous allez apprendre \u00e0 identifier les composantes d&rsquo;un site Web statique. Identifier le fichier index.html Tous les sites Web ont une page d&rsquo;accueil. Cette page est g\u00e9n\u00e9ralement nomm\u00e9e index.html. On d\u00e9signe g\u00e9n\u00e9ralement un fichier enregistr\u00e9 au format HTML sous le nom de page HTML ou page Web. Une page Web est donc [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,24,5,15],"tags":[],"class_list":["post-101","post","type-post","status-publish","format-standard","hentry","category-fcil","category-fcil-cours","category-fcs","category-fcs1-cours"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans ce cours vous allez apprendre \u00e0 identifier les composantes d&rsquo;un site Web statique. Sommaire Toggle Identifier le fichier index.htmlRep\u00e9rer le contenu d&rsquo;un dossier de siteManipuler le code sourceEn savoir plus Identifier le fichier index.html Tous les sites Web ont une page d&rsquo;accueil. Cette page est g\u00e9n\u00e9ralement nomm\u00e9e index.html. On d\u00e9signe g\u00e9n\u00e9ralement un fichier enregistr\u00e9 au format HTML sous le nom de page HTML ou page Web. Une page Web est donc un document enregistr\u00e9 au format HTML dans lequel des informations de plusieurs types sont cod\u00e9es. On trouve ainsi dans une page HTML des informations se rapportant directement ou\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcil\/\" rel=\"category tag\">FCIL<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcil\/fcil-cours\/\" rel=\"category tag\">FCIL-cours<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs1-cours\/\" rel=\"category tag\">FCS1-cours<\/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\/101","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=101"}],"version-history":[{"count":32,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":7296,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/101\/revisions\/7296"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}