{"id":6599,"date":"2024-09-04T09:00:00","date_gmt":"2024-09-04T07:00:00","guid":{"rendered":"https:\/\/cdscweb.fr\/chat-robaze\/?p=6599"},"modified":"2024-09-02T17:46:36","modified_gmt":"2024-09-02T15:46:36","slug":"html-les-bases","status":"publish","type":"post","link":"https:\/\/cdscweb.fr\/chat-robaze\/html-les-bases\/","title":{"rendered":"HTML : les bases"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Il n&rsquo;y a pas de diff\u00e9rence entre majuscules et minuscules lors de la saisie des commandes HTML. <em>On peut donc \u00e9crire indiff\u00e9remment &lt;body&gt; ou &lt;BODY&gt;.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Attributs et valeurs<\/h2>\n\n\n\n<p>La majorit\u00e9 des balises sont associ\u00e9es \u00e0 des <strong>attributs <\/strong><em>(param\u00e8tres qui \u00e9tendent leur utilisation : couleur, taille, emplacement, etc.)<\/em>. <br>Par exemple pour la balise <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;font&gt;<\/mark><\/strong> <em>(font = police)<\/em> on pourra d\u00e9terminer les attributs <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">face <\/mark><\/strong>(le nom de la police)<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">size <\/mark><\/strong>(la taille) <\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">color <\/mark><\/strong>(la couleur)<\/li>\n<\/ul>\n\n\n\n<p>et \u00e0 chaque attribut sera attribu\u00e9e une valeur encadr\u00e9e de guillemets : <br>par exemple face=\u00a0\u00bb<strong>arial<\/strong>\u00ab\u00a0, size=\u00a0\u00bb<strong>5<\/strong>\u00a0\u00bb et color=\u00a0\u00bb<strong>red<\/strong>\u00a0\u00bb <em>(rouge)<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exercice 2 : police et saut de ligne<\/h2>\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\" 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>Saisir le texte ci-contre<\/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; &lt;title&gt; Page 2 &lt;\/title&gt; &lt;\/head&gt;<br>&lt;body&gt;<br>&lt;font face=\"arial\" size=\"5\" color=\"red\"&gt;<br>Bonjour, &lt;br&gt; <br>c'est encore moi ! &lt;\/font&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/pre>\n\n\n\n<p style=\"font-size:18px\">Le texte \u201c<strong>Bonjour,<\/strong>\u201d est s\u00e9par\u00e9 par un <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>saut de ligne<\/strong><\/mark> du texte \u201d<strong>c\u2019est encore moi !<\/strong>\u201c. Noter que la balise <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br&gt;<\/mark><\/strong> (\u201cbreak\u201d) est <strong><em>orpheline <\/em><\/strong>: elle n&rsquo;appelle pas de balise fermante.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><strong>Enregistrer au format <em>exercice-2.html<\/em><\/strong> : par principe on enregistre toujours les noms de fichiers <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">en minuscules, sans accents ni espaces<\/mark><\/strong> <em>(cela n&rsquo;a pas d&rsquo;importance dans l&rsquo;ordinateur mais sur Internet oui)<\/em>. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>La page n&rsquo;est visible que sur l&rsquo;ordinateur en local : pour \u00eatre visualis\u00e9e sur Internet, elle doit y \u00eatre envoy\u00e9e \u00e0 l&rsquo;aide d&rsquo;un logiciel FTP (<strong><em><a href=\"https:\/\/cdscweb.fr\/chat-robaze\/filezilla-presentation-telechargement\/\" data-type=\"link\" data-id=\"https:\/\/cdscweb.fr\/chat-robaze\/filezilla-presentation-telechargement\/\" target=\"_blank\" rel=\"noreferrer noopener\">article du 2 septembre 2020<\/a><\/em><\/strong>).<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Double-clic sur le fichier<\/strong> : la page s&rsquo;ouvre dans le navigateur, v\u00e9rifier qu&rsquo;on a bien la police <strong>Arial, rouge, taille 5<\/strong> <em>(pour les tailles faire des essais afin de d\u00e9terminer ce qui convient)<\/em>. <br>Quand la page est affich\u00e9e, le raccourci clavier <strong><em>Ctrl=U<\/em><\/strong> ouvre la page source o\u00f9 on retrouve exactement le code \u00e9crit dans le bloc-notes !<\/p>\n\n\n\n<p class=\"has-text-align-right\"><strong><em>Dans le prochain article, il sera question de l&rsquo;en-t\u00eate <\/em><\/strong><em>(balise &lt;head&gt;)<\/em><strong><em>&#8230;<\/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-les-bases\/\">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-6599","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\/6599","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=6599"}],"version-history":[{"count":17,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6599\/revisions"}],"predecessor-version":[{"id":6631,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6599\/revisions\/6631"}],"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=6599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/categories?post=6599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/tags?post=6599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}