{"id":636,"date":"2020-04-14T18:53:02","date_gmt":"2020-04-14T16:53:02","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=636"},"modified":"2025-11-06T22:15:28","modified_gmt":"2025-11-06T21:15:28","slug":"structuration-avant-stylisation","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/","title":{"rendered":"Structuration avant  stylisation"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours nous allons apprendre \u00e0 <strong>organiser les contenus d&rsquo;une page HTML<\/strong> pour pr\u00e9parer leur stylisation. Pour cela nous allons utiliser <strong>deux structures r\u00e9dactionnelles<\/strong> bas\u00e9es les 2 plans indiqu\u00e9s ci-dessous.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; ul &#8211; p<\/strong><\/li>\n\n\n\n<li><strong>h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; h3 &#8211; p &#8211; p &#8211; h3 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; ul &#8211; p<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Nous allons <strong>utiliser des s\u00e9parateurs<\/strong> pour isoler certains contenus et <strong>int\u00e9grer dans la page une citation, une liste de liens et des mots importants<\/strong>, afin d&rsquo;enrichir le contenu de l&rsquo;article. Nous verrons pour terminer comment <strong>int\u00e9grer une image<\/strong>.<\/p>\n\n\n\n<p>Auparavant, nous allons d\u00e9tailler deux points importants&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>les 4 composants de <strong>toute r\u00e9daction<\/strong><\/li>\n\n\n\n<li>les similitudes entre <strong>design \u201cprint\u201d et design \u201chosted\u201d<\/strong><\/li>\n<\/ul>\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\/structuration-avant-stylisation\/#Les_4_composants_de_toute_redaction\" >Les 4 composants de toute r\u00e9daction<\/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\/structuration-avant-stylisation\/#Similitudes_en_design_%E2%80%9Cprinted%E2%80%9D_et_%E2%80%9Chosted%E2%80%9D\" >Similitudes en design \u201cprinted\u201d et \u201chosted\u201d<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Structurer_quel_que_soit_le_format\" >Structurer quel que soit le format<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Styliser_pour_montrer_limportant\" >Styliser pour montrer l&rsquo;important<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Coloriser_pour_favoriser_la_lecture\" >Coloriser pour favoriser la lecture<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Completer_la_structure_de_la_page_HTML\" >Compl\u00e9ter la structure de la page HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Ce_qui_a_ete_produit\" >Ce qui a \u00e9t\u00e9 produit<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Ce_que_nous_allons_ajouter\" >Ce que nous allons ajouter<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#1_%E2%80%93_Ajouter_des_filets_separateurs\" >1 &#8211; Ajouter des filets s\u00e9parateurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#2_%E2%80%93_Ajouter_une_citation\" >2 &#8211; Ajouter une citation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#3_%E2%80%93_Ajouter_une_liste_de_liens\" >3 &#8211; Ajouter une liste de liens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#4_%E2%80%93_Mettre_en_valeur_les_mots_importants\" >4 &#8211; Mettre en valeur les mots importants<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Fin_de_la_structuration_et_preparation_de_la_stylisation\" >Fin de la structuration et pr\u00e9paration de la stylisation<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Collecter_des_illustrations\" >Collecter des illustrations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/structuration-avant-stylisation\/#Integrer_une_image\" >Int\u00e9grer une image<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_4_composants_de_toute_redaction\"><\/span>Les 4 composants de toute r\u00e9daction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Faisons le point sur le r\u00f4le central de la r\u00e9daction, dans la publication en ligne en particulier, mais aussi dans la publication sur papier.<\/p>\n\n\n\n<p>La r\u00e9daction Web (et toute r\u00e9daction, en g\u00e9n\u00e9ral) est la combinaison de 4 composants&nbsp;: <strong>une structure coh\u00e9rente, un vocabulaire pr\u00e9cis, une syntaxe pertinente et une juste orthographe<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.mapsofmind.com\/viewmap\/e6e25e0dcc07e3b700069ba583b69a70\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"544\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/composants-redaction.png\" alt=\"Composants de la r\u00e9daction&nbsp;: structure, vocabulaire, syntaxe, orthographe.\" class=\"wp-image-641\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/composants-redaction.png 798w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/composants-redaction-600x409.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/composants-redaction-768x524.png 768w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><em><em>Sur MapsOfMind<\/em><\/em>, p<em>our ramener la carte \u00e0 une vue d&rsquo;ensemble apr\u00e8s avoir zoom\u00e9 sur un des sujets&nbsp;: rafra\u00eechir simplement la page <\/em>. \ud83d\ude09<\/p>\n\n\n\n<p>Lors de la cr\u00e9ation d&rsquo;une page HTML simple, la structure r\u00e9dactionnelle est mise en place en m\u00eame temps que les balises de titrage (<em>heading<\/em>), de paragraphes et de listes. La structure de base sur laquelle vous avez travaill\u00e9 jusqu&rsquo;\u00e0 maintenant \u00e9tait celle-ci&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; p<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Concernant le choix du vocabulaire, de la syntaxe et de l&rsquo;orthographe, vous avez collect\u00e9 sur le Web des textes que je vous ai invit\u00e9 \u00e0 simplifier (ou \u00e0 \u00e9tayer&#8230;) pour coller davantage \u00e0 la structure ci-dessus. <\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Je vous recommande cependant de relire vos textes simplifi\u00e9s et, si n\u00e9cessaire, de modifier la syntaxe (l&rsquo;ordre des mots ou des phrases).<br> \u279cAjustez \u00e9galement le vocabulaire pour que les id\u00e9es \u00e0 transmettre soit clairement communiqu\u00e9es&#8230;<br>\u279c Pour terminer, si vous avez du mal \u00e0 orthographier correctement vos textes, faites relire vos productions \u00e0 des personnes comp\u00e9tentes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Similitudes_en_design_%E2%80%9Cprinted%E2%80%9D_et_%E2%80%9Chosted%E2%80%9D\"><\/span>Similitudes en design \u201cprinted\u201d et \u201chosted\u201d<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Avant de vous demander de travailler sur la structuration du texte int\u00e9gr\u00e9 dans votre page HTML, je voudrais revenir sur <strong>les op\u00e9rations communes \u00e0 la communication sur papier et la communication sur fen\u00eatre de navigation<\/strong>. Je vais insister sur 3 points&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La structuration quelque soit le format<\/li>\n\n\n\n<li>la stylisation pour montrer l&rsquo;important<\/li>\n\n\n\n<li>la coloration pour favoriser la lecture<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Structurer_quel_que_soit_le_format\"><\/span>Structurer quel que soit le format<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Je mets en relation de similitude la communication imprim\u00e9e (printed) et la communication h\u00e9berg\u00e9e (hosted). La premi\u00e8re a pour support de lecture <strong>un support analogique de dimensions fixes<\/strong> (le plus souvent une feuille de papier). La seconde a pour support de lecture <strong>un support num\u00e9rique de dimensions variables<\/strong> (la fen\u00eatre d&rsquo;un navigateur, affich\u00e9e en plein \u00e9cran ou non).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">La page imprim\u00e9e est <strong>structur\u00e9e dans un format donn\u00e9, une fois pour toutes<\/strong>, mais la page h\u00e9berg\u00e9e est <strong>structur\u00e9e, une fois pour toutes, pour plusieurs dimensions d&rsquo;affichage<\/strong>.<\/p>\n\n\n\n<p>Cela nous oblige, en design graphique (quel que soit le mode de publication), \u00e0 <strong>concentrer nos efforts sur la structuration des informations<\/strong>. Nous devons veiller \u00e0 ce que que la structure logique des contenus soit toujours perceptible, quelque soit le format de pr\u00e9sentation au public (y compris sous la forme la plus basique, sans autres CSS que celles du navigateur utilis\u00e9).<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\"><strong>S = DHO<\/strong><br><strong>(Structuration = <\/strong><em>d\u00e9coupage \u00e0 chaud<\/em><strong> =<\/strong><br><strong>D\u00e9coupage + Hi\u00e9rarchisation + Ordonnancement)<\/strong><\/p>\n\n\n\n<p>La n\u00e9cessit\u00e9 de structurer les contenus ou blocs d&rsquo;informations, \u00e0 l&rsquo;\u00e9chelle de la page enti\u00e8re ou des diff\u00e9rentes parties de la page n&rsquo;est pas le seul point commun entre le design pour l&rsquo;imprim\u00e9 et le design pour l&rsquo;h\u00e9berg\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Styliser_pour_montrer_limportant\"><\/span>Styliser pour montrer l&rsquo;important<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>La stylisation est la modification des formes et des couleurs du contenu d&rsquo;une page pour rendre la communication plus efficace<\/strong> (et non principalement plus belle&#8230;). il s&rsquo;agit de mettre en \u00e9vidence ce qui est le plus important.<\/p>\n\n\n\n<p>En design graphique, cela se traduit tr\u00e8s rapidement par le <strong>choix d&rsquo;un nuancier de couleurs et d&rsquo;une combinaison typographique, tous deux ax\u00e9s sur la visibilit\u00e9 et la lisibilit\u00e9<\/strong>. <\/p>\n\n\n\n<p>Les concepteurs des navigateurs n&rsquo;ont pas jug\u00e9 utile d&rsquo;aller plus loin que la <strong>mise en place de styles graphiques tr\u00e8s simples<\/strong> (styles par d\u00e9faut des navigateurs). Ils laissent aux designers graphiques le soin d&rsquo;assurer toute la stylisation suppl\u00e9mentaire voulue, en fonction des contextes de publication.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Les styles par d\u00e9faut des navigateurs<\/h4>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Les navigateurs disposent de styles graphiques par d\u00e9faut. <strong>Ces styles, tr\u00e8s simples, permettent de visualiser les choix structurels effectu\u00e9s<\/strong>.<\/p>\n\n\n\n<p><strong>Les deux couleurs utilis\u00e9es sont le noir et le blanc.<\/strong> Noir pour les textes et blanc pour l&rsquo;arri\u00e8re plan. <strong>La famille typographique utilis\u00e9e par d\u00e9faut est souvent le Times<\/strong>, utilis\u00e9e en 4 fontes (Regular, Bold, Italic et Bold italic).<\/p>\n\n\n\n<p><strong>Les titres de niveau 1 sont pr\u00e9sent\u00e9s avec une force de corps plus importante que les titres de niveau 2<\/strong>. Il en est de m\u00eame pour les titres de niveau 2 par rapport aux titres de niveau 3, etc. <strong>Tous les titres sont en caract\u00e8res gras (Bold)<\/strong> et tous les paragraphes sont affich\u00e9s en caract\u00e8res normaux (Regular)<\/p>\n\n\n\n<p>Notez qu&rsquo;<strong>en design pour le Web, la graisse d&rsquo;un caract\u00e8re est indiqu\u00e9e par un nombre allant de 100 \u00e0 900<\/strong>. Un caract\u00e8re normal (Regular) a une graisse de 400, un caract\u00e8re gras (Bold) a une graisse de 700.<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\">\u279c <strong>UTILISER L&rsquo;EXTENSION WHATFONT<\/strong><\/p>\n\n\n\n<p>Pour <strong>analyser les polices de caract\u00e8res d&rsquo;une page Web<\/strong>, je vous recommande l&rsquo;utilisation de l&rsquo;extension <a rel=\"noreferrer noopener\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/whatfont\/jabopobgcpjmedljpbcaablpmlmfcogm\" target=\"_blank\">Whatfont<\/a>. M\u00eame s&rsquo;il est possible d&rsquo;inspecter les polices de caract\u00e8res avec les outils de d\u00e9veloppement de Chrome (Afficher &gt; Options pour les d\u00e9veloppeurs &gt; Outils de d\u00e9veloppement), <strong>l&rsquo;extension WhatFont<\/strong> offre quelques avantages (voir ci-dessous)<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/inspecter-titre.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"403\" data-id=\"665\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/inspecter-titre-1024x403.png\" alt=\"\" class=\"wp-image-665\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/inspecter-titre-1024x403.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/inspecter-titre-600x236.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/inspecter-titre-768x302.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/inspecter-titre-1200x472.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/inspecter-titre.png 1382w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/browser-styles.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" data-id=\"685\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/browser-styles-1024x579.png\" alt=\"\" class=\"wp-image-685\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/browser-styles-1024x579.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/browser-styles-600x339.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/browser-styles-768x434.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/browser-styles-1200x678.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/browser-styles.png 1384w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9sactiver les CSS dans Chrome<\/h4>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Ayant finalis\u00e9 la r\u00e9daction de vos textes int\u00e9gr\u00e9s dans une page HTML, pouvez-vous percevoir la structuration de vos contenus r\u00e9dactionnels (titres, sous-titres, paragraphes), en l&rsquo;absence de toute stylisation CSS&nbsp;?<\/p>\n\n\n\n<p>Pour d\u00e9sactiver l&rsquo;affichage des styles d&rsquo;une page Web, dans le navigateur Chrome (recommand\u00e9 dans le cadre de ce cours), je vous recommande l&rsquo;installation de l&rsquo;extension <a rel=\"noreferrer noopener\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-developer\/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=fr\" target=\"_blank\">Web Developper<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/disableCss-webDeveloper.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"834\" height=\"184\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/disableCss-webDeveloper.png\" alt=\"Capture d'\u00e9cran du menu CSS de l'extension Web Developer pour Chrome.\" class=\"wp-image-653\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/disableCss-webDeveloper.png 834w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/disableCss-webDeveloper-600x132.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/disableCss-webDeveloper-768x169.png 768w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><\/a><\/figure>\n\n\n\n<p>En cliquant sur \u201cDisable All Styles\u201d, vous d\u00e9sactivez les CSS de la page consult\u00e9es. En cliquant \u00e9galement sur \u201cDisable Browser Default Styles\u201d, vous d\u00e9sactivez les feuilles de styles par d\u00e9faut appliqu\u00e9es par le navigateur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u00c9valuer la perception de la structure sans stylisation<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/texte-sans-style.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"652\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/texte-sans-style.png\" alt=\"\" class=\"wp-image-687\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/texte-sans-style.png 894w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/texte-sans-style-600x438.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/texte-sans-style-768x560.png 768w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/a><\/figure>\n\n\n\n<p>Le r\u00e9sultat est un affichage des contenus sous leur forme la moins sophistiqu\u00e9e qui soit. Dans ce cas, <strong>pouvez-vous affirmer que le plan r\u00e9dactionnel est visible et que le message transmis est clairement compr\u00e9hensible&nbsp;?<\/strong> Si c&rsquo;est le cas, c&rsquo;est que la structuration (DHO) est bonne&nbsp;!<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Vous constaterez visuellement qu&rsquo;<strong>il est plus facile de percevoir la structure d&rsquo;un texte lorsque ce texte est pr\u00e9sent\u00e9 (ou affich\u00e9) sur une petite largeur<\/strong> que sur une grande largeur.<\/p>\n\n\n\n<p>Pour vous en rendre compte, quand vous \u00eates dans Chrome, <strong>appuyez sur la touche F12 de votre clavier<\/strong> (ou menu Afficher &gt; Options pour les d\u00e9veloppeurs &gt; Outils de d\u00e9veloppement) puis <strong>sur le bouton de simulation d&rsquo;affichage sur mobile<\/strong> (Toggle device toolbar). Veillez \u00e0 ce que le r\u00e9glage de votre fen\u00eatre de simulation soit r\u00e9gl\u00e9e sur <strong>\u201cResponsive\u201d<\/strong> et actionnez la poign\u00e9e de r\u00e9glage de la largeur de l&rsquo;affichage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/evaluer-structure-sans-style.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/evaluer-structure-sans-style-1024x624.png\" alt=\"Capture d'\u00e9cran de la fen\u00eatre  d'inspection des \u00e9l\u00e9ments \u00e0 l'aide des outils de d\u00e9veloppement de Chrome. \" class=\"wp-image-688\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/evaluer-structure-sans-style-1024x624.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/evaluer-structure-sans-style-600x366.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/evaluer-structure-sans-style-768x468.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/evaluer-structure-sans-style.png 1175w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Coloriser_pour_favoriser_la_lecture\"><\/span>Coloriser pour favoriser la lecture<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Nous avons vu quelle \u00e9tait l&rsquo;importance du contraste de valeurs en design graphique, en particulier dans la communication imprim\u00e9e. Voir pour rappel le cours intitul\u00e9 <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/\" target=\"_blank\">Les couleurs en design graphique<\/a>.<\/p>\n\n\n\n<p>Dans la communication h\u00e9berg\u00e9e, la question du contraste des couleurs est centrale&nbsp;! Il existe m\u00eame des normes d&rsquo;accessibilit\u00e9 tr\u00e8s contraignantes imposant des ratios de contraste tr\u00e8s \u00e9lev\u00e9s. La norme AAA, par exemple, permet difficilement d&rsquo;utiliser plus de 2 couleurs pouvant \u00eatre appliqu\u00e9es \u00e0 des textes de taille inf\u00e9rieure \u00e0 14 pt (19 px environ) sur un fond donn\u00e9.<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\"><strong>Une couleur<\/strong>, en design imprim\u00e9 ou en design h\u00e9berg\u00e9, <strong>doit toujours \u00eatre envisag\u00e9e appliqu\u00e9e \u00e0 une forme dispos\u00e9e sur un fond.<\/strong> Une couleur consid\u00e9r\u00e9e isol\u00e9ment n&rsquo;a aucune fonctionnalit\u00e9 en communication visuelle&nbsp;!<\/p>\n\n\n\n<p>La couleur noire utilis\u00e9e par d\u00e9faut par les navigateurs pour afficher les textes cod\u00e9s en HTML ne pr\u00e9sente de lisibilit\u00e9 maximale que sur fond blanc.<\/p>\n\n\n\n<p class=\"has-primary-color has-secondary-background-color has-text-color has-background\"><span style=\"color: #0f0e17;\" class=\"stk-highlight\">Que penseriez-vous d&rsquo;un navigateur qui afficherait les textes de cette mani\u00e8re&nbsp;? Pourtant le texte est bien noir&nbsp;!<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Completer_la_structure_de_la_page_HTML\"><\/span>Compl\u00e9ter la structure de la page HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ce_qui_a_ete_produit\"><\/span>Ce qui a \u00e9t\u00e9 produit<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Lors des activit\u00e9s propos\u00e9es \u00e0 la fin du cours pr\u00e9c\u00e9dent, vous avez mis en place une page html en vous appuyant sur des gabarits simples mis \u00e0 votre disposition. Ces gabarits pr\u00e9sentaient 2 structures r\u00e9dactionnelles sch\u00e9matis\u00e9es ainsi&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; p <\/li>\n\n\n\n<li>h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; h3 &#8211; p &#8211; p &#8211; h3 &#8211; p &#8211; p<\/li>\n<\/ul>\n\n\n\n<p>Je vous ai laiss\u00e9 libres de choisir la structure qui vous semblait la mieux correspondre \u00e0 vos besoins en mati\u00e8re de r\u00e9daction. La seconde structure n\u00e9cessite en effet la mise en place d&rsquo;un texte plus long (et demande donc plus de travail)&nbsp;!<\/p>\n\n\n\n<p>J&rsquo;ai insist\u00e9 sur le d\u00e9coupage des textes collect\u00e9s pour qu&rsquo;il corresponde \u00e0 ces plans. Je vous ai demand\u00e9 de <strong>bien \u00e9quilibrer la longueur de vos paragraphes<\/strong> (en simplifiant le texte si n\u00e9cessaire). <\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Je vous ai \u00e9galement demand\u00e9 de bien <strong>a\u00e9rer la pr\u00e9sentation de votre code source<\/strong> pour faciliter la vision de votre structure dans votre \u00e9diteur de code.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Avant d&rsquo;aller plus loin, veillez \u00e0 ce que vos titres permettent imm\u00e9diatement de comprendre de quoi il est question. Il s&rsquo;agit de <strong>faire en sorte que le message essentiel du texte soit perceptible au premier coup d&rsquo;\u0153il,<\/strong> \u00e0 la lecture des titres et des sous-titres.<\/p>\n\n\n\n<p>Le premier paragraphe est <strong>un paragraphe d&rsquo;introduction nomm\u00e9 chap\u00f4<\/strong>. Il r\u00e9sume tout ce dont il va \u00eatre question dans le suite du texte. Sa lecture doit donner envie de lire l&rsquo;article, en informant d\u00e9j\u00e0 tr\u00e8s clairement l&rsquo;internaute sur l&rsquo;essentiel&nbsp;!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ce_que_nous_allons_ajouter\"><\/span>Ce que nous allons ajouter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E2%80%93_Ajouter_des_filets_separateurs\"><\/span>1 &#8211; Ajouter des filets s\u00e9parateurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Comme vous avez pu le voir sur la pr\u00e9c\u00e9dente image, quand tous les styles sont d\u00e9sactiv\u00e9s, les s\u00e9parateurs rev\u00eatent une importance particuli\u00e8re. Dans l&rsquo;exemple qui nous int\u00e9resse, ils permettent de mettre en valeur le chap\u00f4.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Je vous invite donc \u00e0 <strong>placer un filet s\u00e9parateur avant et apr\u00e8s le premier paragraphe qui suit le titre de niveau 1<\/strong>. Cela se code \u00e0 l&rsquo;aide de la balise autofermante &lt;hr&gt; (\u00e0 ne pas confondre avec &lt;br&gt;).<\/p>\n\n\n\n<p>Nous verrons plus tard comment les styliser et les personnaliser pour leur donner une couleur, une \u00e9paisseur ou une longueur diff\u00e9rente.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Vous allez \u00e9galement <strong>ajouter un filet s\u00e9parateur \u00e0 la fin de votre texte avant d&rsquo;ins\u00e9rer un nouveau paragraphe d&rsquo;une seule ligne de texte<\/strong> mentionnant votre nom dans une phrase comme celle-ci \u201cExercice r\u00e9alis\u00e9 par Pr\u00e9nom Nom\u201d.<\/p>\n\n\n\n<p>Cela va me permettre de ne pas trop me m\u00e9langer les pinceaux en prenant connaissance de vos publications \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%E2%80%93_Ajouter_une_citation\"><\/span>2 &#8211; Ajouter une citation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c \u00c0 l&rsquo;endroit que vous jugerez le plus appropri\u00e9, je souhaiterais que vous int\u00e9griez une citation. Inutile d&rsquo;ajouter les guillemets, ceux-ci seront affich\u00e9s (ou non&#8230;) lors de la stylisation CSS. Inutile, non plus, de mettre le texte en italique. Cela se fera (ou non&#8230;) avec l&rsquo;application des styles.<\/p>\n\n\n\n<p>Il est int\u00e9ressant de savoir comment les navigateurs g\u00e8rent l&rsquo;affichage de ce type de contenu (g\u00e9n\u00e9ralement en d\u00e9calant la citation par rapport \u00e0 l&rsquo;alignement \u00e0 gauche des paragraphes de texte courant)<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Une citation s&rsquo;int\u00e8gre dans le code source <strong>entre les balises &lt;blockquote&gt; et &lt;\/blocquote&gt;<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%E2%80%93_Ajouter_une_liste_de_liens\"><\/span>3 &#8211; Ajouter une liste de liens<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Votre texte traite d&rsquo;un sujet dont il a s\u00fbrement \u00e9t\u00e9 question dans d&rsquo;autres articles en ligne<\/strong>, sur d&rsquo;autres sites ou m\u00eame, dans des livres publi\u00e9s chez tel ou tel \u00e9diteur. Communiquez ces r\u00e9f\u00e9rences \u00e0 vos lecteurs.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Commencez par \u00e9largir le champ de votre recherche et faites une s\u00e9lections des meilleurs articles et des meilleurs r\u00e9f\u00e9rences en ligne concernant le sujet de votre texte. <strong>Vous int\u00e8grerez les liens menant aux sites s\u00e9lectionn\u00e9s dans une liste non ordonn\u00e9e que vous allez cr\u00e9er, dans un chapitre intitul\u00e9 \u201cEn savoir plus\u201d<\/strong>. Ce chapitre et la liste de liens seront plac\u00e9s entre le dernier chapitre de votre texte actuel et le dernier s\u00e9parateur mis en place pr\u00e9c\u00e9demment.<\/p>\n\n\n\n<p>Une liste non ordonn\u00e9e est aussi nomm\u00e9e \u201cliste \u00e0 puces\u201d du fait que les navigateurs affichent chaque item d&rsquo;une telle liste pr\u00e9c\u00e9d\u00e9 d&rsquo;une puce.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">La cr\u00e9ation d&rsquo;une <strong>liste non ordonn\u00e9e<\/strong> se code <strong>entre les balises &lt;ul&gt; et &lt;\/ul&gt;<\/strong>, chaque <strong>item de liste<\/strong> (chaque lien dans notre cas&#8230;) \u00e9tant positionn\u00e9 <strong>entre les balises &lt;li&gt; et &lt;\/li&gt;<\/strong>.<\/p>\n\n\n\n<p>Une liste ordonn\u00e9e serait cod\u00e9e entre les balises &lt;ol&gt; et &lt;\/ol&gt;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Comment coder un lien hypertexte&nbsp;?<\/h4>\n\n\n\n<p>Un lien hypertexte est cod\u00e9 entre les balises &lt;a&gt; et &lt;\/a&gt;. Le texte plac\u00e9 entre ces balises est nomm\u00e9 \u201cintitul\u00e9 du lien\u201d. Les navigateurs affichent les intitul\u00e9s de lien en bleu et soulignent cet intitul\u00e9. Cependant, ce simple codage ne suffit pas pour atteindre la page cible en cliquant sur le lien.<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\"><strong>Pour rendre le lien efficace, il est n\u00e9cessaire d&rsquo;encoder l&rsquo;adresse URL de la page cible dans la balise d&rsquo;ouverture.<\/strong> On ins\u00e8re donc cette adresse de la mani\u00e8re suivante&nbsp;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/domaine-site-cible.xxx\" target=\"_blank\"&gt;<\/code><\/pre>\n\n\n\n<p>Dans cette ligne de code, <strong>https:\/\/domaine-site-cible.xxx<\/strong> est l&rsquo;URL fictive du site cible et le code qui suit est une instruction sp\u00e9ciale. Elle ordonne au navigateur d&rsquo;ouvrir la page Web cibl\u00e9e dans une nouvelle fen\u00eatre ou un nouvel onglet. Cette derni\u00e8re instruction permet \u00e0 l&rsquo;internaute de ne pas perdre la page o\u00f9 il se trouvait avant de cliquer sur l&rsquo;intitul\u00e9 du lien, au cas o\u00f9 il rebondirait de lien en lien bien loin de votre page. \ud83d\ude09 <\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Examinez ci-dessous un exemple de liste de liens encod\u00e9s en HTML<\/strong>, pr\u00e9c\u00e9d\u00e9e d&rsquo;un paragraphe d&rsquo;introduction et du titre de niveau 2 \u201cEn savoir plus\u201d.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/liste-liens.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/liste-liens-600x338.png\" alt=\"Capture d'\u00e9cran de l'encodage d'une liste non ordonn\u00e9e de liens param\u00e9tr\u00e9s pour s'ouvrir dans une nouvelle fen\u00eatre ou un nouvel onglet.\" class=\"wp-image-702\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/liste-liens-600x338.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/liste-liens-768x432.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/liste-liens.png 956w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-subtle-background-background-color has-background\">Vous rep\u00e8rerez \u00e9galement sur cette capture d&rsquo;\u00e9cran <strong>le codage d&rsquo;une citation<\/strong>, entre balises &lt;blockquote&gt; et &lt;\/blockquote&gt;. Dans cette citation, les mentions oranges (<strong>&amp;nbsp;<\/strong>) sont le codage de caract\u00e8res ins\u00e9cables. Vous constaterez aussi que<strong> le Pr\u00e9nom et le Nom \u00e9crits dans la derni\u00e8re ligne sont plac\u00e9s entre les balises &lt;strong&gt; et &lt;\/strong&gt;<\/strong>, ce qui les affiche par d\u00e9faut en gras dans une fen\u00eatre de navigateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_%E2%80%93_Mettre_en_valeur_les_mots_importants\"><\/span>4 &#8211; Mettre en valeur les mots importants<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Votre article commence \u00e0 prendre tournure&nbsp;! Il est cependant entendu que <strong>dans le cadre de ce cours, je ne vous parle pas de r\u00e9f\u00e9rencement naturel ni d&rsquo;expressions ou de mots cl\u00e9s pouvant optimiser le r\u00e9f\u00e9rencement de votre article par les moteurs de recherche<\/strong>. Cela vous obligerait \u00e0 remanier bien davantage vos textes. Si le sujet vous int\u00e9resse, vous pouvez toujours vous r\u00e9f\u00e9rer aux cours <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/category\/rwrn\/rwrn-cours\/\" target=\"_blank\">R\u00e9daction Web et R\u00e9f\u00e9rencement Naturel<\/a>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Il existe cependant une technique simple pour optimiser le contenu d&rsquo;une page Web en vue d&rsquo;une meilleure indexation sur les pages de r\u00e9sultats des moteurs de recherche. Il s&rsquo;agit tout simplement de <strong>mettre en valeur les mots importants du texte<\/strong>, tous ax\u00e9s sur le sujet principal de l&rsquo;article. Pour cela il convient de <strong>les encoder entres les balises &lt;strong&gt; et &lt;\/strong&gt;<\/strong>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Mettez entre balises &lt;strong&gt; et &lt;\/strong&gt; les expressions ou mots importants de votre texte.<\/strong><\/p>\n\n\n\n<p>Le navigateur, comme nous venons de le voir, affiche en gras les mots \u201cforts\u201d. L&rsquo;affichage en gras attire l&rsquo;attention sur ces mots (comme pourrait aussi le faire un affichage en italique&#8230;). Mais <strong>c&rsquo;est la r\u00f4le s\u00e9mantique de la balise &lt;strong&gt; qui importe le plus<\/strong> ! La balise &lt;strong&gt; permet en effet aux algorithmes des moteurs de recherche de mieux analyser le sujet de votre article en sachant ce que vous jugez importants dans votre texte.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Je vous propose un test imparable pour savoir si vous avez mis en \u00e9vidence les bonnes expressions ou les bons mots. <strong>Vous affichez votre texte dans le navigateur et vous lisez seulement les mots et expresions en gras<\/strong>. Si vous parvenez \u00e0 saisir le message essentiel de votre article, alors vous avez fait du bon travail&#8230; Sinon, vous devinerez sans peine ce qu&rsquo;il faut am\u00e9liorer \ud83d\ude09<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">L&rsquo;alternative &lt;b&gt;<\/h4>\n\n\n\n<p>Il existe une autre balise permettant d&rsquo;afficher un texte en gras, sans pour autant que ces mots en gras soient jug\u00e9s \u201cforts\u201d ou importants. Il s&rsquo;agir de la balise &lt;b&gt;, qui n&rsquo;a pas de fonction s\u00e9mantique particuli\u00e8re.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Je vous invite, pour tester l&rsquo;usage de la balise &lt;b&gt;, de <strong>mettre entre &lt;b&gt; et &lt;\/b&gt; tout le premier paragraphe<\/strong>, le fameux chap\u00f4 (ou chapeau, selon les orthographes&#8230;).<\/p>\n\n\n\n<p>Si des mots ont \u00e9t\u00e9 plac\u00e9s entre &lt;strong&gt; et &lt;\/strong&gt; dans le chap\u00f4, ils ne seront pas affich\u00e9s \u201cdeux fois plus gras\u201d. Ils seront cependant pris en compte comme mots importants par les moteurs de recherche.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fin_de_la_structuration_et_preparation_de_la_stylisation\"><\/span>Fin de la structuration et pr\u00e9paration de la stylisation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Si vous examinez maintenant votre texte dans la fen\u00eatre de votre navigateur, m\u00eame en d\u00e9sactivant les styles par d\u00e9faut du navigateur, vous devriez vous rendre compte des avanc\u00e9es r\u00e9alis\u00e9es.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Votre texte est pr\u00eat \u00e0 \u00eatre stylis\u00e9&nbsp;! Je ne vous ai pas fait int\u00e9grer d&rsquo;image pour le moment. <strong>L&rsquo;affichage des images sans application de style CSS d\u00e9truirait l&rsquo;ordonnancement visuel<\/strong> sur lequel nous avons travaill\u00e9 jusqu&rsquo;\u00e0 maintenant, en particulier si ces images sont de grande taille.<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\">Nous aurons l&rsquo;occasion d&rsquo;ins\u00e9rer plus tard une illustration dans notre page Web. Je vais vous montrer d\u00e8s maintenant comment nous proc\u00e8derons.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Collecter_des_illustrations\"><\/span>Collecter des illustrations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 se mettre en qu\u00eate d&rsquo;une illustration pertinente pour votre article. <strong>J&rsquo;utilise ici le terme \u201cillustration\u201d pour d\u00e9signer une image servant \u00e0 \u201cillustrer\u201d un texte<\/strong>. Il peut s&rsquo;agir d&rsquo;une photographie, d&rsquo;un dessin, d&rsquo;une infographie, d&rsquo;un pictogramme, etc.<\/p>\n\n\n\n<p>Pas question de choisir une image qui ne soit pas libre de droits&nbsp;! Vous irez donc <strong>faire des recherches th\u00e9matiques<\/strong> sur le site <a rel=\"noreferrer noopener\" href=\"https:\/\/www.pexels.com\/\" target=\"_blank\">pexels.com<\/a> (qui effectue ses s\u00e9lections sur plusieurs sites d&rsquo;images en m\u00eame temps). Vous pourrez aussi <strong>choisir une illustration dessin\u00e9e<\/strong> sur la banque d&rsquo;images <a rel=\"noreferrer noopener\" href=\"https:\/\/icones8.fr\/ouch\" target=\"_blank\">Ouch<\/a>.<\/p>\n\n\n\n<p>Si vous \u00eates inspir\u00e9s, vous pourrez <strong>prendre en main de formidables outils de de photomontage et d&rsquo;assemblage de dessins<\/strong> tels que <a rel=\"noreferrer noopener\" href=\"https:\/\/photos.icons8.com\/creator\" target=\"_blank\">Photo Creator<\/a> et <a rel=\"noreferrer noopener\" href=\"https:\/\/icons8.com\/vector-creator\" target=\"_blank\">Vector Creator<\/a>. Vous produirez alors sans difficult\u00e9 des illustrations personnalis\u00e9es correspondant parfaitement \u00e0 nos sujets&#8230; et cela sans d\u00e9bourser un centime ni m\u00eame devoir vous inscrire sur une plateforme Web.<\/p>\n\n\n\n<p>Si vous souhaitez <strong>illustrer votre texte avec des ic\u00f4nes<\/strong>, vous en trouverez un grand nombre sur <a rel=\"noreferrer noopener\" href=\"https:\/\/icones8.fr\/icons\" target=\"_blank\">icones8.fr<\/a> ou <a rel=\"noreferrer noopener\" href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\">flaticon.com<\/a>. Vous n&rsquo;avez que l&#8217;embarras du choix (gratuit et payant&#8230;)&nbsp;!<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Collectez ou produisez des images susceptibles d&rsquo;illustrer votre texte avec pertinence<\/strong>. Partez du principe que pour une image publi\u00e9e il faut en collecter 4, afin de faire le meilleur choix possible&nbsp;! Placez le fruit de votre collecte dans un dossier que vous nommerez \u00ab\u00a0img\u00a0\u00bb.<\/p>\n\n\n\n<p><strong>Il n&rsquo;est pas d\u00e9fendu d&rsquo;utiliser Photoshop ou Illustrator<\/strong>. Souvenez-vous cependant que les images matricielles destin\u00e9es \u00e0 la publication en ligne sont en RVB et que leur formats d&rsquo;enregistrement sont le JPG (ou JPEG), le PNG ou le GIF (<strong>pas de PSD, de TIF ou TIFF&nbsp;!<\/strong>). Pour les images vectorielles, leur format d&rsquo;enregistrement est uniquement le SVG (<strong>pas de AI ou d&rsquo;EPS&nbsp;!<\/strong>)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Integrer_une_image\"><\/span>Int\u00e9grer une image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&rsquo;int\u00e9gration d&rsquo;une image s&rsquo;effectue en param\u00e9trant correctement la balise autofermante &lt;img&gt;. Il est n\u00e9cessaire d&rsquo;une part de <strong>pr\u00e9ciser dans la balise &lt;img&gt; quelle est la source de l&rsquo;image<\/strong> (indiquer au navigateur o\u00f9 se trouve l&rsquo;image \u00e0 afficher). D&rsquo;autre part, il est obligatoire de <strong>formuler un texte alternatif<\/strong> (toujours dans la balise &lt;img&gt;).<\/p>\n\n\n\n<p><strong>Le texte alternatif sert \u00e0 trois choses&nbsp;:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>d\u00e9crire l&rsquo;image aux moteurs de recherche<\/li>\n\n\n\n<li>offrir une alternative d&rsquo;affichage si le navigateur ne parvient pas \u00e0 afficher l&rsquo;image<\/li>\n\n\n\n<li>permettre aux robots lecteurs utilis\u00e9s par les personnes malvoyantes de leur d\u00e9crire l&rsquo;image<\/li>\n<\/ul>\n\n\n\n<p>Ce rouage essentiel du r\u00e9f\u00e9rencement des images est donc <strong>un exercice suppl\u00e9mentaire de r\u00e9daction<\/strong>. Vous en saurez davantage en consultant le dernier chapitre du cours <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/rwrn\/rwrn-cours\/redaction-web-2\/\" target=\"_blank\">RWRN<\/a>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c <strong>Examinez ci-dessous le code d&rsquo;int\u00e9gration de l&rsquo;image \u201cwoman-typing-writing-1800&#215;1200.jpg\u201d<\/strong>. Dans quel dossier est-elle plac\u00e9e&nbsp;? O\u00f9 se trouve ce dossier&nbsp;?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"276\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image-600x276.png\" alt=\"Capture d'\u00e9cran montrant le code d'int\u00e9gration d'une image plac\u00e9e dans un dossier nomm\u00e9 &quot;img&quot;.\" class=\"wp-image-722\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image-600x276.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image-768x353.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/integration-image.png 949w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-subtle-background-background-color has-background\">Vous noterez que l&rsquo;image est nomm\u00e9e sans utilisation de lettre majuscule ni de chiffre en d\u00e9but d&rsquo;intitul\u00e9, sans utilisation de point ailleurs que devant l&rsquo;extension, sans lettre accentu\u00e9e ni espace.<\/p>\n\n\n\n<p>Par ailleurs, <strong>les dimensions de l&rsquo;image, en pixels, sont indiqu\u00e9es en fin d&rsquo;intitul\u00e9 de l&rsquo;image<\/strong>. Cela s&rsquo;av\u00e8re tr\u00e8s utile en design pour le Web, vous le d\u00e9couvrirez tr\u00e8s vite \ud83d\ude09<\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours nous allons apprendre \u00e0 organiser les contenus d&rsquo;une page HTML pour pr\u00e9parer leur stylisation. Pour cela nous allons utiliser deux structures r\u00e9dactionnelles bas\u00e9es les 2 plans indiqu\u00e9s ci-dessous. Nous allons utiliser des s\u00e9parateurs pour isoler certains contenus et int\u00e9grer dans la page une citation, une liste de liens et des mots importants, [&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-636","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 nous allons apprendre \u00e0 organiser les contenus d&rsquo;une page HTML pour pr\u00e9parer leur stylisation. Pour cela nous allons utiliser deux structures r\u00e9dactionnelles bas\u00e9es les 2 plans indiqu\u00e9s ci-dessous. h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; ul &#8211; p h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; h3 &#8211; p &#8211; p &#8211; h3 &#8211; p &#8211; p &#8211; h2 &#8211; p &#8211; ul &#8211; p Nous allons utiliser des s\u00e9parateurs pour isoler certains contenus et int\u00e9grer dans la\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\/636","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=636"}],"version-history":[{"count":93,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/636\/revisions"}],"predecessor-version":[{"id":7505,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/636\/revisions\/7505"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}