{"id":729,"date":"2020-04-15T13:47:45","date_gmt":"2020-04-15T11:47:45","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=729"},"modified":"2025-10-05T21:07:49","modified_gmt":"2025-10-05T19:07:49","slug":"stylisation-apres-structuration","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/stylisation-apres-structuration\/","title":{"rendered":"Stylisation apr\u00e8s structuration"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours, apr\u00e8s avoir pris le temps de soigner la structuration d&rsquo;un texte int\u00e9gr\u00e9 dans une page HTML, <strong>nous allons appliquer \u00e0 la page un style graphique <\/strong>(un look, un habillage, une apparence soign\u00e9e&#8230;).<\/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\/stylisation-apres-structuration\/#Preparatifs\" >Pr\u00e9paratifs<\/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\/stylisation-apres-structuration\/#Completer_et_faire_valider_son_code\" >Compl\u00e9ter et faire valider son code<\/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\/stylisation-apres-structuration\/#Appliquer_un_style_graphique_deja_code\" >Appliquer un style graphique d\u00e9j\u00e0 cod\u00e9<\/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\/stylisation-apres-structuration\/#Integrer_une_des_images_collectees\" >Int\u00e9grer une des images collect\u00e9es<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/stylisation-apres-structuration\/#Personnaliser_les_feuilles_de_style_CSS\" >Personnaliser les feuilles de style CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/stylisation-apres-structuration\/#Changer_les_couleurs_du_site\" >Changer les couleurs du site<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/stylisation-apres-structuration\/#En_apprendre_un_peu_plus_sur_les_CSS\" >En apprendre un peu plus sur les CSS<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preparatifs\"><\/span>Pr\u00e9paratifs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u279c Pour r\u00e9aliser l&rsquo;exercice, nous allons \u00e9tablir un lien entre une feuille de style CSS et la page HTML que nous avons \u00e9labor\u00e9e lors du cours pr\u00e9c\u00e9dent.  <strong>T\u00e9l\u00e9chargez les pages HTML sur lesquelles vous avez travaill\u00e9es<\/strong> lors de la s\u00e9ance pr\u00e9c\u00e9dente.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"http:\/\/graphizm.fr\/fcs\/pages-html-sans-css.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger les pages HTML<\/a><\/div>\n<\/div>\n\n\n\n<p><strong>La d\u00e9marche que nous suivons vous am\u00e8nera, pas \u00e0 pas, \u00e0 la mise en ligne d&rsquo;une page Web<\/strong> optimis\u00e9e pour la consultation en ligne sur tous les \u00e9crans. Le diaporama ci-dessous d\u00e9taille la d\u00e9marche compl\u00e8te.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/fcs\/de-la-redaction-au-site\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"519\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/de-la-redaction-au-site-1024x519.png\" alt=\"\" class=\"wp-image-1019\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/de-la-redaction-au-site-1024x519.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/de-la-redaction-au-site-600x304.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/de-la-redaction-au-site-768x389.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/de-la-redaction-au-site-1200x609.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/de-la-redaction-au-site.png 1402w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Appuyez sur la touche J pour voir les vignettes de toutes les diapos, sur la touche P pour imprimer le diaporama et sur la touche T pour visionner le diaporama normalement<\/figcaption><\/figure>\n\n\n\n<p>Le fichier HTML pr\u00e9sent\u00e9 sur la 5e diapositive est mis \u00e0 votre disposition avec les fichiers HTML sans CSS \u00e0 t\u00e9l\u00e9charger pr\u00e9c\u00e9demment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Completer_et_faire_valider_son_code\"><\/span>Compl\u00e9ter et faire valider son code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Nous devons nous assurer que le code que nous avons produit est conforme aux exigences du Web<\/strong>. Pour v\u00e9rifier cela, nous utiliserons des extensions de Brackets, install\u00e9es pr\u00e9alablement par nos soins. Il s&rsquo;agit de&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Beautify<\/li><li>HTML Skeleton<\/li><li>Nu Markup Checker<\/li><\/ul>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Leur installation et leur prise en main sont pr\u00e9sent\u00e9es sur cette fiche de cours&nbsp;: <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/fcs\/extensions-brackets\/\" target=\"_blank\">Utiliser les extensions de Brackets<\/a>. Il n&rsquo;est pas n\u00e9cessaire d&rsquo;installer pour le moment l&rsquo;extension \u201cOpen in browser\u201d mentionn\u00e9e en dernier sur la fiche.<\/p>\n\n\n\n<p>Je rappelle qu&rsquo;un cours assez bref, intitul\u00e9 <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/personnaliser-brackets\/\" target=\"_blank\">Personnaliser Brackets<\/a>, est disponible sur ce site.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Je vous demande donc d&rsquo;installer les 3 extensions mentionn\u00e9es et d&rsquo;en tester l&rsquo;usage<\/strong>. Concernant HTML Skeleton, prenez bien la pr\u00e9caution d&rsquo;ouvrir une nouvelle page avant de faire des tests&nbsp;!<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Je vous propose ensuite de <strong>nous retrouver en classe audio sur Zoom, pour faire un point sur l&rsquo;usage de ces extensions<\/strong>. Je vous montrerai en partage d&rsquo;\u00e9cran ou sur de courtes vid\u00e9os comment utiliser ces extensions pour optimiser le code de vos pages HTML.<\/p>\n\n\n\n<p>Nous verrons notamment&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Comment <strong>indenter rapidement le code source<\/strong> avec \u201cBeautify\u201d<\/li><li>Comment <strong>ins\u00e9rer la balise meta viewpor<\/strong>t avec \u201cHTML Skeleton\u201d<\/li><li>Comment <strong>rep\u00e9rer d&rsquo;\u00e9ventuels erreurs de codage<\/strong> avec \u201cNu Markup Checker\u201d<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Appliquer_un_style_graphique_deja_code\"><\/span>Appliquer un style graphique d\u00e9j\u00e0 cod\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour r\u00e9aliser la suite du cours, vous avez besoin de t\u00e9l\u00e9charger un dossier intitul\u00e9 \u00ab\u00a0css\u00a0\u00bb, dans lequel se trouvent 4 feuilles de style d\u00e9j\u00e0 pr\u00eates&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>cursus.css<\/li><li>dark-one.css<\/li><li>light-one.css<\/li><li>simple.css<\/li><\/ul>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link\" href=\"http:\/\/graphizm.fr\/fcs\/quatre-css-simples\/css.zip\" style=\"border-radius:14px\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00e9l\u00e9chaRger le dossier css<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Pensez \u00e0 <strong>d\u00e9compresser l&rsquo;archive<\/strong> en .zip pour acc\u00e9der aux feuilles de styles. <strong>Ne modifiez surtout pas le nom du dossier<\/strong> \u201ccss\u201d et <strong>placez ce dossier dans un dossier nomm\u00e9 comme votre fichier HTML<\/strong> (\u201cdjango\u201d ou \u201cbilbo\u201d ou \u201crancoon\u201d etc.) dans lequel se trouvera donc, l&rsquo;un \u00e0 c\u00f4t\u00e9 de l&rsquo;autre, le fichier \u201c<strong>nom-de-fichier.html<\/strong>\u201d<strong> <\/strong>et le dossier \u201c<strong>css<\/strong>\u201d.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/dossier-avec-html-et-css-01.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"509\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/dossier-avec-html-et-css-01.png\" alt=\"\" class=\"wp-image-1025\"\/><\/a><\/figure><\/div>\n\n\n\n<p>Pour appliquer ces styles \u00e0 votre page il va \u00eatre n\u00e9cessaire de <strong>placer dans le &lt;head&gt; une instruction HTML<\/strong> qui va permettre au navigateur de savoir<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>que telle feuille de style doit \u00eatre appliqu\u00e9e aux \u00e9l\u00e9ments HTML<\/li><li>o\u00f9 trouver cette feuille de style (dans le dossier \u201ccss\u201d)<\/li><\/ul>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Apr\u00e8s avoir plac\u00e9 fichier HTML et dossier CSS dans un m\u00eame dossier, vous allez donc <strong>int\u00e9grer la ligne de code ci-dessous<\/strong>, soit en la recopiant, soit en effectuant un copier-coller, soit en utilisant HTML Skeleton puis en compl\u00e9tant la ligne ins\u00e9r\u00e9e.<\/p>\n\n\n\n<p>Voici la ligne \u00e0 ins\u00e9rer dans le &lt;head&gt;, sous le &lt;title&gt;, dans sa forme d\u00e9finitive (avec l&rsquo;url de la feuille de style nomm\u00e9e \u00ab\u00a0simple.css\u00a0\u00bb)&nbsp;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"css\/simple.css\"&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-css-externe.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-css-externe-1024x340.png\" alt=\"\" class=\"wp-image-1027\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-css-externe-1024x340.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-css-externe-600x199.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-css-externe-768x255.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-css-externe-1200x398.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-css-externe.png 1395w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Le navigateur est averti par le code qu&rsquo;il va devoir prendre en compte une ressource externe (&lt;link&gt;). Il est averti que cette ressource est une feuille de style (\u00ab\u00a0stylesheet\u00a0\u00bb = feuille de style, en anglais&#8230;) et le code lui indique o\u00f9 se trouve la feuille de style et comment elle se nomme (il n&rsquo;est pas question qu&rsquo;il tienne compte des feuilles de style voisines&#8230;).<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Voyez comment le navigateur affiche d\u00e9sormais votre page HTML&#8230; <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"705\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-1024x705.png\" alt=\"\" class=\"wp-image-1029\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-1024x705.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-600x413.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-768x529.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css.png 1143w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Cela n&rsquo;a plus rien \u00e0 voir avec du texte en Times, noir sur fond blanc, coll\u00e9 \u00e0 gauche de la fen\u00eatre de navigation&nbsp;! \ud83d\ude00<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Changez maintenant le nom de la feuille de style<\/strong> en le rempla\u00e7ant par celui d&rsquo;une des 3 autres feuilles plac\u00e9es dans le dossier \u00ab\u00a0css\u00a0\u00bb. Observez les changements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"674\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-1-1024x674.png\" alt=\"\" class=\"wp-image-1032\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-1-1024x674.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-1-600x395.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-1-768x506.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-1.png 1116w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Vous comprenez maintenant pourquoi il est si important de bien structurer son texte d\u00e8s le d\u00e9part. En effet, <strong>il est possible de proposer des variantes de pr\u00e9sentation, sans toucher au texte<\/strong>. Il suffit de changer ou modifier la feuille de style. Il y a la structure HTML d&rsquo;un c\u00f4t\u00e9 et la pr\u00e9sentation CSS de l&rsquo;autre. Ces deux types d&rsquo;instructions sont pris en compte simultan\u00e9ment par le navigateur.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Le gros avantage de ce proc\u00e9d\u00e9 est de pouvoir <strong>utiliser une m\u00eame feuille de style pour des textes diff\u00e9rents<\/strong> ou des styles diff\u00e9rents pour un m\u00eame texte&#8230; en modifiant une simple ligne de code&nbsp;! \ud83d\ude09<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"706\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-2-1024x706.png\" alt=\"\" class=\"wp-image-1031\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-2-1024x706.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-2-600x414.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-2-768x530.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/rendu-simple-css-2.png 1141w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Integrer_une_des_images_collectees\"><\/span>Int\u00e9grer une des images collect\u00e9es<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nous avons vu (\u00e0 la fin du cours pr\u00e9c\u00e9dent) comment collecter et int\u00e9grer une image. Le moment est venu de placer les instructions HTML ad\u00e9quates dans votre code source, pour que l&rsquo;image de votre choix soit affich\u00e9e dans le corps de la page. Je vous montre donc le code \u00e0 placer \u00e0 l&rsquo;endroit qui vous semble le mieux adapt\u00e9 pour illustrer votre texte.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Placez le dossier \u00ab\u00a0img\u00a0\u00bb<\/strong> dans lequel vous avez plac\u00e9 vos images (cours pr\u00e9c\u00e9dent) <strong>dans le dossier qui contient d\u00e9j\u00e0 le fichier .html<\/strong> et de dossier \u00ab\u00a0css\u00a0\u00bb. <strong>Int\u00e9grez le code indiqu\u00e9 plus bas<\/strong> en indiquant le nom de l&rsquo;image de votre choix \u00e0 la place de \u00ab\u00a0nom-image.jpg\u00a0\u00bb.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"img\/nom-image.jpg\" alt=\"Description du sujet de l'image \u00e0 des personnes malvoyantes\"&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-image.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"603\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-image-1024x603.png\" alt=\"\" class=\"wp-image-1034\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-image-1024x603.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-image-600x353.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-image-768x452.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/insertion-image.png 1159w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Ce code indique au navigateur qu&rsquo;il doit afficher une image (&lt;img&gt;). Il indique \u00e9galement au navigateur l&rsquo;endroit o\u00f9 se trouve l&rsquo;image (ici, dans le dossier \u00ab\u00a0img\u00a0\u00bb situ\u00e9 \u00e0 la racine \u2014 \u00e0 cot\u00e9 \u2014 du fichier HTML). Le texte alternatif est compl\u00e9t\u00e9 afin de remplir pleinement son r\u00f4le (voir la fin du <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/\" target=\"_blank\">cours pr\u00e9c\u00e9dent<\/a>).<\/p>\n\n\n\n<p>Observez alors le r\u00e9sultat dans la fen\u00eatre de votre navigateur. Testez l&rsquo;affichage en version mobile ou responsive (touche F12 dans Chrome&#8230;).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image-light-one.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"635\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image-light-one.png\" alt=\"Capture d'\u00e9cran de la stylisation d'une page HTML stylis\u00e9e avec la feuille de style light-one.css\" class=\"wp-image-751\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image-light-one.png 612w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image-light-one-578x600.png 578w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Changez de feuille de style<\/strong> (en modifiant le nom de la feuille appel\u00e9e dans le &lt;head&gt;&#8230; <strong>Observez<\/strong> les changement de pr\u00e9sentation dans votre navigateur&nbsp;!<\/p>\n\n\n\n<p>Parvenus \u00e0 ce stade, <strong>je vous invite \u00e0 partager vos productions en commen\u00e7ant par renommer votre page HTML. Nommez-la \u201cindex.html\u201d. <\/strong>Celle-ci sera la page d&rsquo;accueil de votre futur site \u201cone-page\u201d. Ce site sera donc constitu\u00e9 du dossier contenant&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>le fichier <strong>index.html<\/strong>,<\/li><li>le dossier <strong>css<\/strong> contenant les 4 feuilles de styles utilisables (m\u00eame si la seule feuille de style utilis\u00e9e est absolument n\u00e9cessaire)<\/li><li>le dossier <strong>img<\/strong> contenant les images collect\u00e9es (m\u00eame si l\u00e0 aussi, seule l&rsquo;image int\u00e9gr\u00e9e dans la page soit n\u00e9cessaire)<\/li><\/ul>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Compressez le dossier complet<\/strong> du futur site avant de le partager sur l&rsquo;espace Slack de la formation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_les_feuilles_de_style_CSS\"><\/span>Personnaliser les feuilles de style CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour vous faciliter la t\u00e2che, je vous ai pr\u00e9par\u00e9 des feuilles de style pr\u00eates \u00e0 l&rsquo;usage. Il se peut qu&rsquo;elles ne vous satisfassent pas tout \u00e0 fait et que vous ayez envie de les modifier. C&rsquo;est tout \u00e0 fait envisageable.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pour faire cela, il va falloir <strong>apprendre \u00e0 parler CSS<\/strong>. Comme pour le HTML, au d\u00e9but on y comprend pas grand chose et petit \u00e0 petit on apprend \u00e0 <strong>discerner les endroits o\u00f9 il est possible d&rsquo;effectuer des modifications<\/strong> sans tout d\u00e9truire.<\/p>\n\n\n\n<p>\u00c9videmment, vous allez parfois casser des feuilles de style&#8230; Ce n&rsquo;est pas grave&nbsp;! Cela ne va pas endommager votre navigateur ou votre \u00e9diteur de code, encore moins votre navigateur. Vous reviendrez en arri\u00e8re, vous repartirez de votre point de d\u00e9part et vous serez plus vigilants \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Changer_les_couleurs_du_site\"><\/span>Changer les couleurs du site<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Maintenant que nous disposons d&rsquo;un dossier complet avec index, css et dossier d&rsquo;images, nous ne parlerons plus de page HTML mais de site Web. Certes, le dossier du site n&rsquo;est pas encore h\u00e9berg\u00e9 sur un serveur mais il s&rsquo;agit bien d&rsquo;un produit de communication destin\u00e9 \u00e0 la consultation avec un navigateur&nbsp;!<\/p>\n\n\n\n<p>Les couleurs utilis\u00e9es dans les feuilles de styles que je vous ai transmises ne vous plaisent pas forc\u00e9ment&#8230; Elles ont cependant \u00e9t\u00e9 choisies pour fonctionner de mani\u00e8re optimale les unes avec les autres.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Nous allons envisager de modifier les couleurs utilis\u00e9es dans la feuille de style nomm\u00e9e \u201cdark-one.css\u201d. Pour cela nous allons commencer par <strong>la dupliquer et par la renommer<\/strong> \u201cdark-two.css\u201d<\/p>\n\n\n\n<p>En ouvrant le dossier de votre site dans Brackets et en ouvrant la feuille de style \u201cdark-two.css\u201d, vous remarquerez que j&rsquo;ai indiqu\u00e9 en commentaire, en t\u00eate de fichier, les r\u00e9f\u00e9rences des 3 couleurs utilis\u00e9es dans la feuille de style \u201cdark-one.css\u201d. En survolant avec votre curseur le nom des couleurs, un aper\u00e7u de la couleur s&rsquo;affiche dans un petit cadre.<\/p>\n\n\n\n<p><strong>Si vous cliquez sur le nom de la couleur et que vous tapez \u201ccmd-E\u201d, une fen\u00eatre de param\u00e9trage des couleurs s&rsquo;ouvre dans Brackets<\/strong> et facilite grandement les changements \u00e0 effectuer.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Vous constaterez que les 3 couleurs utilis\u00e9es sont des variantes de teintes semblables ou analogues&nbsp;: une variante sombre, une variante  moyenne et une variante claire. Pour modifier le nuancier, je vous propose de changer la teinte moyenne puis, \u00e0 partir de cette teinte moyenne, de cr\u00e9er les variantes sombres et claires (une vid\u00e9o \u00e0 ce sujet est disponible sur Slack).<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Commencez par faire vos changements dans une duplication de la ligne de commentaires.<\/strong> Vous utiliserez ensuite la fonction \u201crechercher-remplacer\u201d pour changer les mentions des couleurs dans toute la feuille de style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-1024x517.png\" alt=\"\" class=\"wp-image-1047\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-1024x517.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-600x303.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-768x388.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs.png 1135w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u279c <strong>Observez les changements de couleurs op\u00e9r\u00e9s.<\/strong> La couleur sombre est toujours la couleur de fond. La couleur claire est utilis\u00e9e pour le texte. La mouleur moyenne met en valeur les titres,le chap\u00f4, les filets et les bordures du cadre de l&rsquo;image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-2-1024x596.png\" alt=\"\" class=\"wp-image-1050\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-2-1024x596.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-2-600x349.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-2-768x447.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-2-1200x699.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/changement-couleurs-2.png 1422w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"En_apprendre_un_peu_plus_sur_les_CSS\"><\/span>En apprendre un peu plus sur les CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Voici quelques sites que je vous recommande pour d\u00e9buter avec les CSS.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/marksheet.io\/\" target=\"_blank\">https:\/\/marksheet.io\/<\/a> (\u00e0 consulter avec Chrome pour demander la traduction automatique en fran\u00e7ais)<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/css\/default.asp<\/a> (la traduction en fran\u00e7ais est possible en cliquant sur la plan\u00e8te situ\u00e9e dans le menu du site).<\/li><li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Apprendre\/Commencer_avec_le_web\/Les_bases_CSS\">https:\/\/developer.mozilla.org\/fr\/docs\/Apprendre\/Commencer_avec_le_web\/Les_bases_CSS<\/a> (celui-ci est en fran\u00e7ais&#8230; pas besoin de traduction automatique, mais il est plut\u00f4t th\u00e9orique&nbsp;!)<\/li><\/ul>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours, apr\u00e8s avoir pris le temps de soigner la structuration d&rsquo;un texte int\u00e9gr\u00e9 dans une page HTML, nous allons appliquer \u00e0 la page un style graphique (un look, un habillage, une apparence soign\u00e9e&#8230;). Pr\u00e9paratifs \u279c Pour r\u00e9aliser l&rsquo;exercice, nous allons \u00e9tablir un lien entre une feuille de style CSS et la page HTML [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15],"tags":[],"class_list":["post-729","post","type-post","status-publish","format-standard","hentry","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, apr\u00e8s avoir pris le temps de soigner la structuration d&rsquo;un texte int\u00e9gr\u00e9 dans une page HTML, nous allons appliquer \u00e0 la page un style graphique (un look, un habillage, une apparence soign\u00e9e&#8230;). Sommaire Toggle Pr\u00e9paratifsCompl\u00e9ter et faire valider son codeAppliquer un style graphique d\u00e9j\u00e0 cod\u00e9Int\u00e9grer une des images collect\u00e9esPersonnaliser les feuilles de style CSSChanger les couleurs du siteEn apprendre un peu plus sur les CSS Pr\u00e9paratifs \u279c Pour r\u00e9aliser l&rsquo;exercice, nous allons \u00e9tablir un lien entre une feuille de style CSS et la page HTML que nous avons \u00e9labor\u00e9e lors du cours pr\u00e9c\u00e9dent. T\u00e9l\u00e9chargez les pages HTML\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-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\/729","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=729"}],"version-history":[{"count":69,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/729\/revisions"}],"predecessor-version":[{"id":4768,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/729\/revisions\/4768"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}