{"id":6738,"date":"2025-01-01T09:00:00","date_gmt":"2025-01-01T08:00:00","guid":{"rendered":"https:\/\/cdscweb.fr\/chat-robaze\/?p=6738"},"modified":"2024-12-29T11:57:18","modified_gmt":"2024-12-29T10:57:18","slug":"html-couleur-et-image-darriere-plan","status":"publish","type":"post","link":"https:\/\/cdscweb.fr\/chat-robaze\/html-couleur-et-image-darriere-plan\/","title":{"rendered":"HTML : couleur et image d&rsquo;arri\u00e8re-plan"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Il est possible de sp\u00e9cifier une couleur d&rsquo;arri\u00e8re-plan pour l&rsquo;ensemble d&rsquo;une page. <br>Deux solutions existent.<\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading\"><strong>Utiliser les noms de couleur en anglais<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>white = blanc<\/li>\n\n\n\n<li>black = noir<\/li>\n\n\n\n<li>pink = rose<\/li>\n\n\n\n<li>grey = gris<\/li>\n\n\n\n<li>etc.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading\"><strong>Utiliser les <em><a href=\"https:\/\/cdscweb.fr\/chat-robaze\/ques-aco#hexadecimal\" data-type=\"link\" data-id=\"https:\/\/cdscweb.fr\/chat-robaze\/ques-aco#hexadecimal\" target=\"_blank\" rel=\"noreferrer noopener\">couleurs hexad\u00e9cimales*<\/a><\/em><\/strong><\/h5>\n\n\n\n<p class=\"has-text-align-center\">\u00c9galement appel\u00e9es <strong><em>RGB <\/em><\/strong><br><em>(Red &#8211; Green &#8211; Blue)<\/em>, <br>en Fran\u00e7ais <strong><em>RVB<\/em><\/strong> <br><em>(Rouge &#8211; Vert &#8211; Bleu)<\/em>. <br>Elles se pr\u00e9sentent <br>sous la forme <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">#FF00FF<\/mark><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>La premi\u00e8re solution peut sembler plus simple et intuitive, mais r\u00e9serve parfois des surprises car tous les \u00e9crans ne prennent pas en charge les couleurs de la m\u00eame fa\u00e7on. <br>Pour plus de pr\u00e9cision il vaut mieux donc employer les codes couleurs au format hexad\u00e9cimal.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Comment fonctionnent les couleurs hexad\u00e9cimales ?<\/strong><\/h5>\n\n\n\n<p>Chaque composante de couleur <em>(<strong>R<\/strong> = Red \/ <strong>G<\/strong> = Green \/ <strong>B<\/strong> = Blue ou <em><strong>R<\/strong> = Rouge \/ <strong>V<\/strong> = Vert \/ <strong>B<\/strong> = Bleu<\/em>)<\/em> est d\u00e9finie par une valeur comprise entre 0 et 255.<br>Les couleurs sont exprim\u00e9es en langage hexad\u00e9cimal, c&rsquo;est-\u00e0-dire par des chiffres de 0 \u00e0 9 et des lettres de A \u00e0 F : 00 correspond \u00e0 une absence totale et FF \u00e0 la luminosit\u00e9 maximale. <br>Ainsi le code <strong>000000 <\/strong>correspond \u00e0 la couleur <strong>Noir<\/strong>.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Quelques couleurs et leur repr\u00e9sentation hexad\u00e9cimale<\/strong><\/h5>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Couleur<\/th><th class=\"has-text-align-center\" data-align=\"center\">Code hexad\u00e9cimal<\/th><th class=\"has-text-align-center\" data-align=\"center\">Couleur<\/th><th class=\"has-text-align-center\" data-align=\"center\">Code hexad\u00e9cimal<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Noir<\/td><td class=\"has-text-align-center\" data-align=\"center\">#000000<\/td><td class=\"has-text-align-center\" data-align=\"center\">Rouge<\/td><td class=\"has-text-align-center\" data-align=\"center\">#FF0000<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Blanc<\/td><td class=\"has-text-align-center\" data-align=\"center\">#FFFFFF<\/td><td class=\"has-text-align-center\" data-align=\"center\">Vert<\/td><td class=\"has-text-align-center\" data-align=\"center\">#00FF00<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Gris<\/td><td class=\"has-text-align-center\" data-align=\"center\">#999999<\/td><td class=\"has-text-align-center\" data-align=\"center\">Bleu<\/td><td class=\"has-text-align-center\" data-align=\"center\">#0000FF<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>On peut consulter ces \u00e9quivalences, avec de nombreuses nuances, sur la page<br><a href=\"http:\/\/www.letoileauxsecrets.fr\/couleurs\/couleurs-web.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>http:\/\/www.letoileauxsecrets.fr\/couleurs\/couleurs-web.html<\/em><\/strong><\/a><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading\"><strong>Modifier la couleur d&rsquo;arri\u00e8re-plan d&rsquo;une page HTML <\/strong><\/h5>\n\n\n\n<p>Il faut utiliser l&rsquo;attribut<strong> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">bgcolor<\/mark> <\/strong><em>(background color = couleur d&rsquo;arri\u00e8re-plan) <\/em>\u00e0 l&rsquo;int\u00e9rieur de la balise <strong><em>&lt;body&gt;<\/em> <\/strong>:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading\"><strong>Sp\u00e9cifier une image d&rsquo;arri\u00e8re-plan pour une page HTML <\/strong><\/h5>\n\n\n\n<p>Ins\u00e9rer l&rsquo;attribut <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">background <\/mark><\/strong><em>(background = arri\u00e8re-plan) <\/em>\u00e0 l&rsquo;int\u00e9rieur de la balise <strong>&lt;body&gt;<\/strong> et sp\u00e9cifier le nom de l&rsquo;image <em>(et son emplacement s&rsquo;il est diff\u00e9rent de celui de la page)<\/em>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exercice 6 : ins\u00e9rer une couleur d&rsquo;arri\u00e8re-plan<\/strong><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_couleur-arriere-plan.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"79\" src=\"https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_couleur-arriere-plan.jpg\" alt=\"\" class=\"wp-image-6762\" style=\"width:1000px\" srcset=\"https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_couleur-arriere-plan.jpg 683w, https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_couleur-arriere-plan-300x35.jpg 300w, https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_couleur-arriere-plan-150x17.jpg 150w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<ol class=\"wp-block-list\">\n<li>Ouvrir le <strong><em>Bloc-Notes<\/em><\/strong> <\/li>\n\n\n\n<li>Le texte ci-contre est un exemple, chacun choisira la couleur qu&rsquo;il veut utiliser&#8230;<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:22px\"><em>Saisir tout le texte <\/em><br><em>soi-m\u00eame <\/em><br><em>pour bien s&rsquo;entra\u00eener, <\/em><br><em>on n&rsquo;apprend rien avec<br>un copier-coller !<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"wp-block-preformatted\">&lt;html&gt;<br>&lt;head&gt; <br>&lt;title&gt;Page 6&lt;\/title&gt;<br>&lt;meta name=\"description\" content=\"couleur arri\u00e8re plan\"&gt;<br>&lt;meta name=\"keywords\" content=\"internet, html, couleur\"&gt;<br>&lt;\/head&gt;<br>&lt;body bgcolor=\"ccccff\"&gt;<br>&lt;h2&gt;L'arri\u00e8re-plan est de couleur pervenche, <br>dont le code est #ccccff&lt;\/h2&gt;<br>&lt;h3&gt;Le code peut \u00eatre \u00e9crit en minuscules <br>ou en majuscules.&lt;\/h3&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"has-text-align-center\"><strong>Enregistrer au format <em>exercice-6.html<\/em> <\/strong><br><strong>puis ouvrir dans le navigateur.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exercice 7 : ins\u00e9rer une image d&rsquo;arri\u00e8re-plan<\/strong><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1372\" height=\"198\" src=\"https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan.jpg\" alt=\"\" class=\"wp-image-6771\" style=\"width:1000px\" srcset=\"https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan.jpg 1372w, https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan-300x43.jpg 300w, https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan-800x115.jpg 800w, https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan-768x111.jpg 768w, https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan-150x22.jpg 150w, https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/html_image-arriere-plan-1320x190.jpg 1320w\" sizes=\"auto, (max-width: 1372px) 100vw, 1372px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<ol class=\"wp-block-list\">\n<li>Ouvrir le <strong><em>Bloc-Notes<\/em><\/strong> <\/li>\n\n\n\n<li>Le texte ci-contre est un exemple, chacun choisira l&rsquo;image qu&rsquo;il veut utiliser&#8230;<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:22px\"><em>Saisir tout le texte <\/em><br><em>soi-m\u00eame <\/em><br><em>pour bien s&rsquo;entra\u00eener, <\/em><br><em>on n&rsquo;apprend rien avec<br>un copier-coller !<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"wp-block-preformatted\">&lt;html&gt;<br>&lt;head&gt; <br>&lt;title&gt;Page 7&lt;\/title&gt;<br>&lt;meta name=\"description\" content=\"image arri\u00e8re plan\"&gt;<br>&lt;meta name=\"keywords\" content=\"internet, html, image\"&gt;<br>&lt;\/head&gt;<br>&lt;body background=\"dock.jpg\" bgproperties=\"fixed\"&gt;<br>&lt;h2&gt;L'arri\u00e8re-plan est l'image \"dock.jpg\" &lt;br&gt;<br>L'attribut et la valeur &lt;em&gt;bgproperties=\"fixed\"&lt;\/em&gt; <br>permettent d'avoir un arri\u00e8re-plan fixe et en filigrane <br>lorsque la page d\u00e9file avec l'ascenseur.&lt;\/h2&gt;<br>&lt;h3&gt;L'image est dans le m\u00eame dossier que la page, <br>sinon il faut pr\u00e9ciser son emplacement.&lt;\/h3&gt;<br>&lt;h4&gt;Si elle est plus petite que l'\u00e9cran, <br>elle se r\u00e9p\u00e8tera pour le remplir.&lt;\/h4&gt;<br>&lt;h5&gt;Ne pas utiliser une image trop lourde qui <br>ralentirait le chargement de la page.&lt;\/h5&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"has-text-align-center\"><strong>Enregistrer au format <em>exercice-7.html<\/em> <\/strong><br><strong>puis ouvrir dans le navigateur.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-right\"><strong><em>Dans le prochain article, il sera question de la pr\u00e9sentation du texte.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/cdscweb.fr\/chat-robaze\/html-couleur-et-image-darriere-plan\/\">Lire<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":6595,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[119],"tags":[],"class_list":["post-6738","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet"],"_links":{"self":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/comments?post=6738"}],"version-history":[{"count":33,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6738\/revisions"}],"predecessor-version":[{"id":6776,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6738\/revisions\/6776"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/media\/6595"}],"wp:attachment":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/media?parent=6738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/categories?post=6738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/tags?post=6738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}