{"id":6785,"date":"2025-02-05T09:00:00","date_gmt":"2025-02-05T08:00:00","guid":{"rendered":"https:\/\/cdscweb.fr\/chat-robaze\/?p=6785"},"modified":"2025-02-03T14:36:55","modified_gmt":"2025-02-03T13:36:55","slug":"html-presentation-du-texte","status":"publish","type":"post","link":"https:\/\/cdscweb.fr\/chat-robaze\/html-presentation-du-texte\/","title":{"rendered":"HTML : pr\u00e9sentation du texte"},"content":{"rendered":"\n<p>Voici quelques balises et attributs qui am\u00e9lioreront la pr\u00e9sentation des pages.<\/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><strong>D\u00e9finir diff\u00e9rentes tailles de titres<\/strong><\/strong><\/h5>\n\n\n\n<p>&lt;h1&gt; Titre de niveau 1&lt;\/h1&gt;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>&lt;h2&gt; Titre de niveau 2&lt;\/h2&gt;<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>&lt;h3&gt; Titre de niveau 3&lt;\/h3&gt;<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>&lt;h4&gt; Titre de niveau 4&lt;\/h4&gt;<\/p>\n\n\n\n<p>&lt;h5&gt; Titre de niveau 5&lt;\/h5&gt;<\/p>\n\n\n\n<p>&lt;h6&gt; Titre de niveau 6&lt;\/h6&gt;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h1 class=\"wp-block-heading\">Titre 1<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Titre 2<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Titre 3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Titre 4<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Titre 5<\/h5>\n\n\n\n<h6 class=\"wp-block-heading\">Titre 6<\/h6>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Aligner les titres<\/strong><\/h5>\n\n\n\n<p>Comme pour les lignes et les paragraphes, il est aussi possible de sp\u00e9cifier des attributs d&rsquo;alignement pour les titres.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>&lt;h1 align=\u00a0\u00bbleft\u00a0\u00bb&gt;Titre 1 align\u00e9 \u00e0 gauche&lt;\/h1&gt;<\/em><br><em>&lt;h2 align=\u00a0\u00bbcenter\u00a0\u00bb&gt;Titre 2 align\u00e9 au centre&lt;\/h2&gt;<\/em><br><em>&lt;h3 align=\u00a0\u00bbright\u00a0\u00bb&gt;Titre 3 align\u00e9 \u00e0 droite&lt;\/h3&gt;<\/em><\/p>\n<\/blockquote>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Styles de texte<\/strong><\/h5>\n\n\n\n<p>Pour mettre en valeur des mots importants, on peut utiliser les styles tels que gras, italique, etc.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Principaux styles de texte<\/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\">Styles<\/th><th class=\"has-text-align-center\" data-align=\"center\">Balise de d\u00e9but<\/th><th class=\"has-text-align-center\" data-align=\"center\">Balise de fin<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Gras<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;b&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/b&gt;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Italique<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;i&gt; ou &lt;em&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/i&gt; ou &lt;\/em&gt;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Soulign\u00e9 <br><em>(\u00e0 \u00e9viter car pr\u00eate \u00e0 confusion avec les liens hypertextes)<\/em><\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;u&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/u&gt;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Courier<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;tt&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/tt&gt;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Barr\u00e9<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;strike&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/strike&gt;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Pr\u00e9format\u00e9<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;pre&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/pre&gt;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Citation<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;blockquote&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/blockquote&gt;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Mise en forme de code<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;code&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">&lt;\/code&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\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>&lt;em&gt; et &lt;strong&gt;<\/strong><\/h5>\n\n\n\n<p>Ces deux balises peuvent remplacer &lt;i&gt; et &lt;b&gt; mais sous Linux elles souligneront \u00e9galement le texte.<\/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>Pr\u00e9format\u00e9<\/strong><\/h5>\n\n\n\n<p>G\u00e9n\u00e9ralement affich\u00e9 avec une police \u00e0 espacement fixe, le plus souvent la police Courier, ce style peut \u00eatre utilis\u00e9 pour cr\u00e9er rapidement des tableaux en g\u00e9rant correctement les espaces.<\/p>\n<\/div>\n<\/div>\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>Mettre un texte en exposant ou en indice<\/strong><\/h5>\n\n\n\n<p>Les exposants sont pratiques pour \u00e9crire des d\u00e9nominations <em>(<strong>M<sup>lle<\/sup><\/strong>, <strong>20<sup>\u00e8me<\/sup><\/strong>.)<\/em> ou pour inclure des notes de renvoi vers un pied de page par exemple.<\/p>\n\n\n\n<p><strong>Chiffre en &lt;sup&gt;exposant&lt;\/sup&gt;<br>Chiffre en &lt;sub&gt;indice&lt;\/sub&gt;<\/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>Texte d\u00e9filant<\/strong> <em>(ne pas en abuser)<\/em><\/h5>\n\n\n\n<p>La balise <strong>&lt;marquee&gt;<\/strong> permet de faire d\u00e9filer un texte dans la direction de son choix.<\/p>\n\n\n\n<p><em>&lt;marquee bgcolor=\u00a0\u00bbgreen\u00a0\u00bb width=\u00a0\u00bb95%\u00a0\u00bb direction=\u00a0\u00bbright loop=\u00a0\u00bb0&Prime;&gt;Votre message&lt;\/marquee&gt;<\/em><\/p>\n\n\n\n<p><strong>bgcolor <\/strong>: couleur de la bo\u00eete qui contient le texte d\u00e9filant<br><strong>width <\/strong>: taille de la bo\u00eete par rapport \u00e0 la largeur de la page<br><strong>direction <\/strong>: sens du d\u00e9filement<br><strong>loop=0<\/strong> : nombre de r\u00e9p\u00e9titions <em>(0=d\u00e9filement continu)<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exercice 8 : combiner les mises en forme<\/strong><\/h4>\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<p>Exemple \u00e0 personnaliser :<\/p>\n\n\n\n<p><em><strong>On veillera bien \u00e0 respecter l&rsquo;ordre d&rsquo;imbrication des balises, la premi\u00e8re ouverte \u00e9tant la derni\u00e8re ferm\u00e9e et ainsi de suite.<\/strong><\/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;p&gt;<br>Le 1&lt;sup&gt;er&lt;\/sup&gt; salon eut lieu &lt;i&gt;en janvier 1875&lt;\/i&gt;.<br>&lt;\/br&gt;<br>L'inauguration eut lieu en pr\u00e9sence de &lt;b&gt;Monsieur <br>le Maire.&lt;\/b&gt;<br>&lt;\/p&gt;<br>&lt;blockquote&gt;L'\u00e9quipe organisatrice fut tr\u00e8s \u00e9tonn\u00e9e <br>par le grand nombre de visiteurs.&lt;\/blockquote&gt;<br><br><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><strong>Enregistrer au format <em>exercice-8.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 des caract\u00e8res sp\u00e9ciaux.<\/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-presentation-du-texte\/\">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-6785","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\/6785","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=6785"}],"version-history":[{"count":29,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6785\/revisions"}],"predecessor-version":[{"id":6817,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6785\/revisions\/6817"}],"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=6785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/categories?post=6785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/tags?post=6785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}