Formation 36

Les balises de corps de page, entre les balises body

Les balises de corps de page, entre <body> et </body>

Tout ce qui se trouve entre les balises <body> et </body> est destiné à être montré à l'internaute. C'est la partie « visible » de la page.

Il existe 2 grandes familles de balises : les block et les inline. Après une balise de type block, le texte qui suit est automatiquement renvoyé à la ligne, tandis qu’après une balise inline, le texte qui suit est ajouté normalement à la suite de la ligne. Le type des balises présentées dans ce cours est précisé entre parenthèses, dans le titre du paragraphe.

Créer des titres : balises <h1> à <h6> (type block)

Pour intégrer un titre à vos pages, utilisez les balises <h1> à <h6>. Plus le chiffre après le « h » est grand, plus le titre sera écrit petit :

<h1>Grand titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Sous-titre de niveau 3</h3>
<h4>Sous-titre de niveau 4</h4>
<h5>Sous-titre de niveau 5</h5>
<h6>Sous-titre de niveau 6</h6>

 

Bilan : pour le titre principal de la page, utilisez <h1>. Ensuite, vous pouvez allez jusqu'à <h3>, voire <h4>...

Mais souvenez vous qu'une page internet n'est pas une thèse... L'internaute qui visite votre site veut trouver les informations rapidement et facilement.

Délimiter des paragraphes : balise <p> (type block)

Pour délimiter un paragraphe, utilisez la balise de type block <p>.

<p>Texte du paragraphe...</p>

 

Essayons maintenant de définir 2 paragraphes successivement (le premier paragraphe doit absolument être fermé par la balise </p> avant de commencer le second) :

<p>Voici le texte d'un paragraphe.</p><p>La balise de retour ligne va imposer une coupure dans le paragraphe, mais sans provoquer de saut de ligne.</p>

 

A l'écran, on obtient :

Voici le texte d'un paragraphe.

La balise de retour ligne va imposer une coupure dans le paragraphe, mais sans provoquer de saut de ligne.

 

On constate que, même si dans le code source les 2 paragraphes sont écrits sur le même ligne, bout à bout, on obtient un saut de ligne à l'écran.

Ceci est dû au fait que la balise <p> est une balise de type « block ». La fermeture de ce type de balises ajoute implicitement un saut de ligne à l'écran.

Mise en évidence d'un ou plusieurs mots dans le texte

 

A l’intérieur d’un paragraphe ou d'un titre, de nombreuses balises de type « inline » permettent de modifier l’allure d'un bout de texte. Voici les plus courantes.

Retour à la ligne : balise <br />

Placée dans un paragraphe, la balise <br /> permet d'imposer un retour à la ligne, sans saut de ligne :

<p>Voici le texte d'un paragraphe.<br />La balise de retour ligne va imposer un coupure dans le paragraphe, mais sans provoquer de saut de ligne.</p>

 

Résultat à l'écran :

Voici le texte d'un paragraphe.
La balise de retour ligne va imposer un coupure dans le paragraphe, mais sans provoquer de saut de ligne.

 

Le résultat est à comparer au résultat que l'on avait obtenu en définissant 2 paragraphes. Ici, il n'y a pas de saut de ligne, mais simplement un retour à la ligne.

Souligner du texte, le mettre en gras ou en italique

A l'intérieur d'un paragraphe ou d'un titre, il est possible d'appliquer une mise en gras ou en italique à un mot ou une expression :

<p>Ce <b>texte</b> apparaît en gras.<br />
Ce <i>texte</i> apparaît en italique.<br />
Ce <u>texte</u> sera souligné.</p>

 

A l'écran, on obtient :

Ce texte apparaît en gras.
Ce texte apparaît en italique.
Ce texte sera souligné.

La lettre utilisée pour chacune des balises vient de l'anglais « bold » pour gras, « italic » pour italique et « underline » pour le soulignement.

Il est possible de cumuler ces mises en forme en imbriquant les balises. Une seule règle à retenir : les balises doivent être refermées dans l'ordre inverse de leur ouverture. Par exemple :

<p><b><i><u>Cette expression est notée en gras, italique et souligné.</u></i> Maintenant, il ne reste que la mise en gras qui s'applique à la fin de la phrase.</b> Le reste du paragraphe s'affiche normalement.</p>

 

Résultat obtenu :

Cette expression est notée en gras, italique et souligné. Maintenant, il ne reste que la mise en gras qui s'applique à la fin de la phrase. Le reste du paragraphe s'affiche normalement.

 

Autres balises, moins courantes

 

Mise en oeuvre

Description

<em>texte</em>

texte mis en valeur (en gras)

<strong>texte</strong>

autre type de mise en valeur

<sub>texte</sub>

indice

<sup>texte</sup>

exposant

<acronym title= ”Union Européenne ”>UE</acronym>

l’explication apparaît au survol de la souris

<del>texte</del>

texte barré



Pour plus d'informations, vous pouvez nous contacter par mail ou aux coordonnées suivantes :


Contacter CS Formation

 

Tutos et cours en ligne

HTML / CSS