Mettez du texte dans votre page XHTML

Noter ce cours :

Le texte

Maintenant que nous avons le code de notre page vide, il va bien falloir donner à cette page un semblant d'intérêt en lui ajoutant du contenu. C'est justement le but de ce chapitre ! Nous allons ici voir comment ajouter un titre et des sous-titres, ainsi qu'à mettre en valeur du texte, toujours via la structure XHTML. On ne touchera donc pas au design du site qui sera toujours abordé dans la partie CSS. Nous verrons également quelles sont également les balises permettant d'insérer des citations, du code ou encore de mettre le texte sous différentes formes (indice, exposant ...).

Le titre et les sous-titres

Il existe différents niveaux de titres suivant leur importance. En français, on parle de titres et de sous-titres. En XHTML, on parle de titres de différents niveaux. Ces titres ont un niveau variant de 1 à 6, le niveau 1 étant le niveau le plus important.

La balise permettant de dire au navigateur qu'il s'agit d'un titre est la balise <hX>. Le X correspond au niveau que vous souhaitez donner à votre titre. Le titre le plus important est donc matérialisé par cette balise : <h1>. Vous vous doutez donc qu'il existe des balises <h2>, <h3> ... <h6> qui permettent de créer des titres aux niveaux moins importants. On parlera alors de sous-titres. Il est important d'utiliser les niveaux avec parcimonie, si vous mettez des <h1> à tous vos titres, votre document ne voudra plus dire grand chose au niveau de la sémantique.

Mettons que vous souhaitiez afficher "Bievenue sur la première page de mon site web" en tant que titre principal de votre page. Voici le code que vous pourrez utiliser :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
     <title>
Bienvenue sur ma page web !</title>
     <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<
/head>
<body>
     <h1
>Bienvenue sur la première page de mon site web</h1>
</body>
</html>

Vous pouvez ensuite placer les sous-titres qui seront intercalés entre différents paragraphes que nous allons apprendre tout de suite à créer !

Les paragraphes

Elément le plus utilisé dans un site web, le paragraphe s'utilise avec une balise <p>. Tous les textes ou presque que vous allez pouvoir placer sur votre page web se décomposent en paragraphes.

Voici ce que peut donner l'insertion d'un paragraphe après le titre de niveau 1 que nous avons placé tout à l'heure :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
     <title>
Bienvenue sur ma page web !</title>
     <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<
/head>
<body>
     <h1
>Bienvenue sur la première page de mon site web</h1>
     <p>Ici, je place mon premier paragraphe. Peu importe sa longueur, on doit toujours décomposer le texte en différents paragraphes, que vous pourrez ensuite éclaircir. La balise &lt;p&gt; doit ensuite être fermée pour dire que le paragraphe se termine.</p>
</body>
</html>

Vous pouvez constater dans le paragraphe que j'ai utilisé les codes &lt; et &gt; En effet, si vous souhaitez afficher à vos visiteur la balise <p> par exemple, comme vous le voyez à l'écran, il faut faire la distinction entre le code source de la page et le texte affiché au navigateur. Comme les balises sont utilisées pour dire que l'on a du code XHTML, il faut donc faire disparaître le <p> du code source, on transforme donc les symboles des balises < et > en leurs entités XHTML associées. On appelle entité XHTML le code que l'on utilise pour transformer un caractère du code source en sa valeur affichable à l'écran. Ici, < est remplacé par &lt; et > est remplacé par &gt;.

Si vous souhaitez passer à la ligne dans un paragraphe, vous devez utiliser la balise <br />. Cette balise ne peut s'utiliser qu'à l'intérieur de balises <p>. Si vous souhaitez sauter une ligne (ou plus), fermez le paragraphe actuel avec </p> et ouvrez-en un nouveau. Voici un exemple de code pour lequel on est passé à la ligne après la première phrase :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
     <title>
Bienvenue sur ma page web !</title>
     <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<
/head>
<body>
     <h1
>Bienvenue sur la première page de mon site web</h1>
     <p>Ici, je place mon premier paragraphe.<br />Peu importe sa longueur, on doit toujours décomposer le texte en différents paragraphes, que vous pourrez ensuite éclaircir. La balise &lt;p&gt; doit ensuite être fermée pour dire que le paragraphe se termine.</p>
</body>
</html>

Les paragraphes étant constitués, voyons maintenant comment mettre en valeur certaines parties du texte pour leur donner une importance plus grande.

Mise en valeur du texte

Il existe deux manières principales de mettre en valeur son texte : une manière pour dire que le texte a une importance plus élevée que le texte habituel, mais une importance relative. La deuxième manière vous permet de dire que le texte a une forte importance.

Pour mettre en valeur faiblement le texte, on utilise la balise <em>. Voici un exemple de paragraphe l'utilisant :

<p>Ici, je place mon premier paragraphe.<br />Peu importe sa longueur, on doit <em>toujours</em> décomposer le texte en différents paragraphes, que vous pourrez ensuite éclaircir. La balise &lt;p&gt; doit ensuite être fermée pour dire que le paragraphe se termine.</p>

Comme vous pourrez le constater, par défaut la balise <em> met le texte en italique. Attention cependant, vous ne devez pas utiliser une balise pour le rendu qu'elle effectue sur le texte, mais pour sa valeur sémantique. Donc ne vous préoccupez pas de ce que la balise provoque sur le rendu, vous pourrez de toute façon mettre en gras une balise <em> et non en italique si vous le souhaitez, tout ça grâce à l'aide encore une fois des CSS.

La seconde balise qui marque cette fois une importance plus élevée est la balise <strong>. Elle provoque par défaut un affichage en gras du texte. Voici un exemple de paragraphe l'utilisant :

<p>Ici, je place mon premier paragraphe.<br />Peu importe sa longueur, on doit <strong>toujours</strong> décomposer le texte en différents paragraphes, que vous pourrez ensuite éclaircir. La balise &lt;p&gt; doit ensuite être fermée pour dire que le paragraphe se termine.</p>

Citations et codes

Si vous souhaitez insérer une citation, sachez qu'il en existe de plusieurs types :

Voici différents exemples de citations :

Après les citations, vous aurez peut-être envie d'insérer du code dans un langage quelconque. Il existe une balise appropriée permettant de le faire comprendre au navigateur. Cette balise est la balise <code> qui s'utilise dans un conteneur (ici, on utilisera un paragraphe). On la placera comme ceci :".htm".Une

<p><code>Ici votre code</code></p>

Voici ce que ça peut donner :

<p><code>int main()</code></p>

Indices et exposants

Pour mettre certaines portions du texte en hauteur par rapport aux autres (en exposant), on utilise la balise <sup>. Voici un exemple :

<p>Le 1<sup>er</sup> a mis 2 minutes pour faire le tour du circuit !</p>

Pour mettre certaines portions du texte plus basses que les autres (en indice), on utilise la balise <sub>. Voici un exemple :

<p>A<sub>i,j</sub> = A<sub>i+1,j</sub> - A<sub>i-1,j+1</sub></p>

Chapitre suivant

Les liens

;;
Vous avez aimé cet article intitulé Mettez du texte dans votre page XHTML ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels