{"id":858,"date":"2022-05-16T18:46:24","date_gmt":"2022-05-16T18:46:24","guid":{"rendered":"http:\/\/mytribu.fr\/cmopc\/?page_id=858"},"modified":"2026-02-19T01:30:16","modified_gmt":"2026-02-19T01:30:16","slug":"858-2","status":"publish","type":"page","link":"http:\/\/mytribu.fr\/cmopc\/858-2\/","title":{"rendered":"Mise en page du code html avec du CSS"},"content":{"rendered":"\n<p>La page HTML de base :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html lang=\"fr\"&gt;\n\n<strong>&lt;head&gt;<\/strong>\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;je mets ici le titre de ma page.&lt;\/title&gt;\n    \n<strong>&lt;\/head&gt;<\/strong>\n\n<strong>&lt;body&gt;<\/strong>\n<strong>&lt;div class=\"texte1\"&gt;<\/strong>Sed ut tum ad senem senex de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est Cato locutus, quo erat nemo fere senior temporibus illis, nemo prudentior; nunc Laelius et sapiens (sic enim est habitus) et amicitiae gloria excellens de amicitia loquetur. <strong>&lt;\/div&gt;<\/strong>\n\nlien vers la page 2\n\n<strong>&lt;\/body&gt;<\/strong>\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>O\u00f9 mettre le <strong>CSS <\/strong>:<br>On met le CSS dans un fichier <code>.css<\/code> s\u00e9par\u00e9 et on le lie avec <code>&lt;link&gt;<\/code>. (notre m\u00e9thode)<br>Exemple dans le &lt;head&gt; de la page <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">HTML<\/mark>. <br>Utiliser dans dreamweaver nouveau fichier \/ nouveau document \/<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-pink-color\">{ } CSS<\/mark> : on le nomme <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-pink-color\">style-cmopc.css<\/mark><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/mytribu.fr\/cmopc\/wp-content\/uploads\/2025\/02\/designer1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"164\" src=\"https:\/\/mytribu.fr\/cmopc\/wp-content\/uploads\/2025\/02\/designer1.png\" alt=\"\" class=\"wp-image-1176\" style=\"width:342px;height:auto\"\/><\/a><\/figure>\n\n\n\n<p>Puis le menu ci-dessous pour cr\u00e9er automatique la balise &lt;link&gt;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/mytribu.fr\/cmopc\/wp-content\/uploads\/2025\/02\/designer.png\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"215\" src=\"https:\/\/mytribu.fr\/cmopc\/wp-content\/uploads\/2025\/02\/designer.png\" alt=\"\" class=\"wp-image-1175\" style=\"width:338px;height:auto\"\/><\/a><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">&lt;link rel=\"stylesheet\" href=\"style-cmopc.css\"&gt;<\/mark>\n<\/code><\/pre>\n\n\n\n<p>Contenu de notre feuille de style :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-pink-color\">body {\n    font-family: Arial, sans-serif;\n    background-color: #f4f4f4;\n    color: #333;\n    line-height: 1.6;\n    padding: 20px;\n}\n.texte1 {\n\twidth: 400px;\n\tmargin-right: auto;\n\tmargin-left: auto;\n}\na {\n    color: blue;\n    text-decoration: none;\n}\na:hover {\n    text-decoration: underline;\n}<\/mark><\/code><\/pre>\n\n\n\n<p>Le code CSS est donn\u00e9 une fois pour toutes dans un fichier CSS pour toutes les pages, ce qui permet des modifications plus faciles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/mytribu.fr\/cmopc\/wp-content\/uploads\/2025\/02\/designer3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"530\" src=\"https:\/\/mytribu.fr\/cmopc\/wp-content\/uploads\/2025\/02\/designer3.png\" alt=\"\" class=\"wp-image-1199\" style=\"width:365px;height:auto\"\/><\/a><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code><br><br><br><br><\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/prathkum\/pen\/KKzdXpY\">Glowing Text<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La page HTML de base : O\u00f9 mettre le CSS :On met le CSS dans un fichier .css s\u00e9par\u00e9 et<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-858","page","type-page","status-publish","hentry","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/pages\/858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=858"}],"version-history":[{"count":45,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/pages\/858\/revisions"}],"predecessor-version":[{"id":1202,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/pages\/858\/revisions\/1202"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}