Le corps de la page HTML est constitué des éléments visibles sur la page, c’est-à-dire textes, images, tableaux, éléments multimédia, etc.
Tous ces éléments sont placés entre les balises <body> et </body>.
Les balises <h1> à <h6> et </h1> à </h6> permettent d’insérer des titres.
Plus le chiffre est petit, plus le titre est grand.
Les balises <p> et </p> permettent d’insérer un paragraphe.
Cette balise dispose d’attributs afin d’aligner les paragraphes à gauche, au centre ou à droite
(le texte justifié est à bannir pour des raisons d’accessibilité).
Exemples :
<p align=”left”> Le paragraphe est aligné à gauche.</p>
<p align=”center”> Le paragraphe est aligné au centre.</p>
<p align=”right”> Le paragraphe est aligné à droite.</p>
La balise <br> permet d’insérer un saut de ligne.
Elle ne possède pas de balise fermante (c’est donc une balise orpheline).
Les balises <nobr> et </nobr> permettent au contraire d’empêcher un saut de ligne, utile pour ne pas couper un numéro de téléphone par exemple.
<p>Appelez la mairie au <nobr>01 23 45 67 89</nobr>.</p>
On peut aussi utiliser l’espace insécable notifié pour éviter que des mots ne soient séparés.
<p>Appelez la mairie au 01 23 45 67 89.</p>
Les balises <b> et </b> (ou <strong> et </strong>) permettent d’insérer du texte en gras.
Les balises <i> et </i> (ou <em> et </em>) permettent d’insérer du texte en italique.
Les balises <u>et </u> permettent d’insérer du texte souligné.
Les balises <s> et </s> permettent d’insérer du texte barré.
Les balises <sup> et </sup> permettent d’insérer un exposant.
Exemple : 1er
Les balises <sub> et </sub> permettent d’insérer un indice.
Exemple : H2O
Exercice 4 : créer un corps de texte
- Ouvrir le Bloc-Notes
- Saisir le texte ci-contre et l’agrémenter avec gras, italique, souligné, barré…
Saisir tout le texte
soi-même
pour bien s’entraîner,
on n’apprend rien avec
un copier-coller !
<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érez du texte ici, que vous pouvez agrémenter
avec <b>gras</b>, <i>italique</i>, <u>souligné</u>,
<s>barré</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>
À noter : on peut aller à la ligne quand on veut dans le bloc-notes, si l’on n’a pas inséré un saut de ligne ou terminé le paragraphe cela n’aura aucun effet.
Enregistrer au format exercice-4.html
puis ouvrir dans le navigateur.
Dans le prochain article, il sera question d’insérer une ligne horizontale
afin de différencier certaines sections d’une page.