{"id":138,"date":"2020-03-18T16:00:30","date_gmt":"2020-03-18T15:00:30","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=138"},"modified":"2025-10-07T16:19:52","modified_gmt":"2025-10-07T14:19:52","slug":"tp-couleur-preferee","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/tp-couleur-preferee\/","title":{"rendered":"Ma couleur pr\u00e9f\u00e9r\u00e9e"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Voici un petit TP pour manipuler le code source d&rsquo;un site Web. <strong>Vous allez personnaliser une page HTML qui fonctionne comme la page index.html du site \u201cPangrammes\u201d<\/strong> \u00e9tudi\u00e9e bri\u00e8vement sur <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/fcs\/manipulation-code-source\/\" target=\"_blank\">graphizm.fr\/fcs\/manipulation-code-source<\/a>.<\/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\/tp-couleur-preferee\/#Le_fonctionnement_du_site\" >Le fonctionnement du site<\/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\/tp-couleur-preferee\/#Les_consignes\" >Les consignes<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Le_fonctionnement_du_site\"><\/span>Le fonctionnement du site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le type de site que vous allez manipuler est compos\u00e9e d&rsquo;une seule page Web. En cliquant sur le bouton \u201cEN SAVOIR PLUS\u201d, on ouvre ce qui s&rsquo;appelle une fen\u00eatre modale. Il est possible de refermer cette fen\u00eatre en cliquant sur la croix plac\u00e9e en haut \u00e0 droite de la fen\u00eatre modale. Vous avez certainement d\u00e9j\u00e0 rencontr\u00e9 ce type d&rsquo;animation lors de vos navigations sur le Web.<\/p>\n\n\n\n<p><em>Le mod\u00e8le (ou template) de ce site a \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 sur le site codyhouse.co, a une \u00e9poque o\u00f9 de tels modules \u00e9taient t\u00e9l\u00e9chargeables librement. On y trouvait plein de gabarits \u00e0 personnaliser.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_consignes\"><\/span>Les consignes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le mod\u00e8le \u00e0 personnaliser est visible \u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/fcs\/exercices-code-source\/ma-couleur\/\" target=\"_blank\">http:\/\/graphizm.fr\/fcs\/exercices-code-source\/ma-couleur\/<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/fcs\/exercices-code-source\/ma-couleur\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"549\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/ma_couleur-1024x549.jpg\" alt=\"\" class=\"wp-image-4752\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/ma_couleur-1024x549.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/ma_couleur-600x322.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/ma_couleur-768x412.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/ma_couleur-1200x644.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/ma_couleur.jpg 1258w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u279c Pour r\u00e9aliser l&rsquo;exercice sans avoir \u00e0 copier-coller le code de tous les fichiers qui composent le site \u00ab\u00a0ma-couleur\u00a0\u00bb<strong>, je vous invite \u00e0 t\u00e9l\u00e9charger le site complet<\/strong> sous la forme d&rsquo;un fichier zipp\u00e9.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/fcs\/exercices-code-source\/ma-couleur.zip\" style=\"border-radius:16px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger ma-couleur.zip<\/a><\/div>\n\n\n\n<p>\u279c <strong>Avec l&rsquo;\u00e9diteur de code de votre choix,<\/strong> <strong>ouvrez le dossier \u00ab\u00a0ma-couleur\u00a0\u00bb<\/strong> (Fichier > Ouvrir un dossier > s\u00e9lectionner le dossier > Ouvrir). <strong>\u00c9ditez le fichier \u00ab\u00a0index.html\u00a0\u00bb<\/strong> et prenez vos rep\u00e8res en vous rappelant ce que vous avez vu pr\u00e9c\u00e9demment sur <a href=\"http:\/\/graphizm.fr\/fcs\/manipulation-code-source\/\" target=\"_blank\" rel=\"noreferrer noopener\">graphizm.fr\/fcs\/manipulation-code-source<\/a>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Des consignes plus d\u00e9taill\u00e9es vous sont donn\u00e9es dans le fichier \u00ab\u00a0index.html\u00a0\u00bb<\/strong>, elles sont visibles en pied de page apr\u00e8s avoir acc\u00e9d\u00e9 au texte sur la couleur bleue.<\/p>","protected":false},"excerpt":{"rendered":"<p>Voici un petit TP pour manipuler le code source d&rsquo;un site Web. Vous allez personnaliser une page HTML qui fonctionne comme la page index.html du site \u201cPangrammes\u201d \u00e9tudi\u00e9e bri\u00e8vement sur graphizm.fr\/fcs\/manipulation-code-source. Le fonctionnement du site Le type de site que vous allez manipuler est compos\u00e9e d&rsquo;une seule page Web. En cliquant sur le bouton \u201cEN [&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-138","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>Voici un petit TP pour manipuler le code source d&rsquo;un site Web. Vous allez personnaliser une page HTML qui fonctionne comme la page index.html du site \u201cPangrammes\u201d \u00e9tudi\u00e9e bri\u00e8vement sur graphizm.fr\/fcs\/manipulation-code-source. Sommaire Toggle Le fonctionnement du siteLes consignes Le fonctionnement du site Le type de site que vous allez manipuler est compos\u00e9e d&rsquo;une seule page Web. En cliquant sur le bouton \u201cEN SAVOIR PLUS\u201d, on ouvre ce qui s&rsquo;appelle une fen\u00eatre modale. Il est possible de refermer cette fen\u00eatre en cliquant sur la croix plac\u00e9e en haut \u00e0 droite de la fen\u00eatre modale. Vous avez certainement d\u00e9j\u00e0 rencontr\u00e9 ce type\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\/138","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=138"}],"version-history":[{"count":12,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":7295,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/138\/revisions\/7295"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}