{"id":6681,"date":"2024-11-07T15:29:21","date_gmt":"2024-11-07T14:29:21","guid":{"rendered":"https:\/\/cdscweb.fr\/chat-robaze\/?p=6681"},"modified":"2024-11-07T15:45:15","modified_gmt":"2024-11-07T14:45:15","slug":"html-le-corps-de-la-page","status":"publish","type":"post","link":"https:\/\/cdscweb.fr\/chat-robaze\/html-le-corps-de-la-page\/","title":{"rendered":"HTML : le corps de la page"},"content":{"rendered":"\n
\n

Le corps de la page HTML est constitu\u00e9 des \u00e9l\u00e9ments visibles sur la page, c’est-\u00e0-dire textes, images, tableaux, \u00e9l\u00e9ments multim\u00e9dia, etc.<\/p>\n<\/blockquote>\n\n\n\n

Tous ces \u00e9l\u00e9ments sont plac\u00e9s entre les balises <body> et <\/body>.<\/h5>\n\n\n\n

Les balises <h1> \u00e0 <h6> et <\/h1> \u00e0 <\/h6><\/strong> permettent d’ins\u00e9rer des titres.
Plus le chiffre est petit, plus le titre est grand.<\/em><\/p>\n\n\n\n

Les balises <p> et <\/p><\/strong> permettent d’ins\u00e9rer un paragraphe.
Cette balise dispose d’attributs afin d’aligner les paragraphes \u00e0 gauche, au centre ou \u00e0 droite
(le texte justifi\u00e9 est \u00e0 bannir pour des raisons d’accessibilit\u00e9)<\/mark><\/em>.
Exemples :
<p align=\u00a0\u00bbleft\u00a0\u00bb> Le paragraphe est align\u00e9 \u00e0 gauche.<\/p>
<p align=\u00a0\u00bbcenter\u00a0\u00bb> Le paragraphe est align\u00e9 au centre.<\/p>
<p align=\u00a0\u00bbright\u00a0\u00bb> Le paragraphe est align\u00e9 \u00e0 droite.<\/p><\/em><\/p>\n\n\n\n

La balise <br><\/strong> permet d’ins\u00e9rer un saut de ligne.
Elle ne poss\u00e8de pas de balise fermante (c’est donc une balise orpheline)<\/em>.<\/p>\n\n\n\n

Les balises <nobr> et <\/nobr><\/strong> permettent au contraire d’emp\u00eacher un saut de ligne, utile pour ne pas couper un num\u00e9ro de t\u00e9l\u00e9phone par exemple.
<p>Appelez la mairie au <nobr>01 23 45 67 89<\/nobr>.<\/p> <\/em>
On peut aussi utiliser l’espace ins\u00e9cable notifi\u00e9 &nbsp;<\/em><\/strong> pour \u00e9viter que des mots ne soient s\u00e9par\u00e9s.
<p>Appelez la mairie au 01&nbsp;23&nbsp;45&nbsp;67&nbsp;89.<\/p> <\/em><\/p>\n\n\n\n

Les balises <b> et <\/b><\/strong> (ou <strong> et <\/strong>)<\/em><\/strong> permettent d’ins\u00e9rer du texte en gras.<\/p>\n\n\n\n

Les balises <i> et <\/i><\/strong> (ou <em> et <\/em>)<\/em><\/strong> permettent d’ins\u00e9rer du texte en italique.<\/p>\n\n\n\n

Les balises <u>et <\/u><\/strong> permettent d’ins\u00e9rer du texte soulign\u00e9.<\/p>\n\n\n\n

Les balises <s> et <\/s><\/strong> permettent d’ins\u00e9rer du texte barr\u00e9. <\/p>\n\n\n\n

Les balises <sup> et <\/sup><\/strong> permettent d’ins\u00e9rer un exposant.
Exemple : 1er<\/sup><\/em><\/p>\n\n\n\n

Les balises <sub> et <\/sub><\/strong> permettent d’ins\u00e9rer un indice.
Exemple : H2<\/sub>O<\/em><\/p>\n\n\n\n

Exercice 4 : cr\u00e9er un corps de texte<\/strong><\/h4>\n\n\n\n
\n
\n
    \n
  1. Ouvrir le Bloc-Notes<\/em><\/strong> <\/li>\n\n\n\n
  2. Saisir le texte ci-contre et l’agr\u00e9menter avec gras, italique, soulign\u00e9, barr\u00e9…<\/li>\n<\/ol>\n\n\n\n

    Saisir tout le texte <\/em>
    soi-m\u00eame <\/em>
    pour bien s’entra\u00eener, <\/em>
    on n’apprend rien avec
    un copier-coller !<\/em><\/p>\n<\/div>\n\n\n\n

    \n
    <html>
    <head> 
    <title>Page 4<\/title>
    <meta name=\"description\" content=\"creer un corps de 
    page html\">
    <meta name=\"keywords\" content=\"internet, html, page\">
    <\/head>
    <body>
    <h1>Le titre se place ici.<\/h1>
    <p>Ins\u00e9rez du texte ici, que vous pouvez agr\u00e9menter 
    avec <b>gras<\/b>, <i>italique<\/i>, <u>soulign\u00e9<\/u>, 
    <s>barr\u00e9<\/s>....<\/p>
    <h2>Un sous-titre permet de structurer le contenu.<\/h2>
    <p>Ici un texte avec un saut de ligne <br>
    pour marquer une rupture.<\/p>
    <\/body>
    <\/html><\/pre>\n\n\n\n
    \u00c0 noter<\/strong> : on peut aller \u00e0 la ligne quand on veut dans le bloc-notes, si l’on n’a pas ins\u00e9r\u00e9 un saut de ligne ou termin\u00e9 le paragraphe cela n’aura aucun effet.<\/mark><\/em><\/p>\n\n\n\n
    Enregistrer au format exercice-4.html<\/em> <\/strong>
    puis ouvrir dans le navigateur.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n
    Dans le prochain article, il sera question d’ins\u00e9rer une ligne horizontale <\/em><\/strong>
    afin de diff\u00e9rencier certaines sections d’une page.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
     Lire<\/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-6681","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\/6681","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=6681"}],"version-history":[{"count":28,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6681\/revisions"}],"predecessor-version":[{"id":6712,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6681\/revisions\/6712"}],"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=6681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/categories?post=6681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/tags?post=6681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}