Le texte - Cours XHTML

Introduction

Info

Maintenant que vous savez insérer du texte dans un document HTML, nous allons étudier plusieurs éléments qui vont rendre votre page plus attractive.
Nous allons voir la couleur, la taille, la graisse... du texte.

Changer la police d'une portion de texte

A savoir

Avant tout, il faut savoir que si la police n'est pas sur l'ordinateur de la personne qui visionne votre page, elle se transformera en Arial ou Times qui sont les polices par défaut en général. Par conséquence, il vaut mieux utiliser une police classique tel que "Arial".
Si vous avez une police peu classique, utilisez un logiciel de dessin et transformez la en image gif.
Attention, cela ne s'applique pas à des paragraphes immenses.

Info

Pour changer la police du texte, il n'existe pas de balise XHTML, il faut utiliser une feuille de style : font-family:Courier New, par exemple :
Exemple de code :
<span style="font-family:Courier New, Courier, Prestige, monospace;">Texte</span>

Certain logiciel comme Dreamweaver propose une série de fontes à peu près similaires, ce qui permet au navigateur un plus vaste choix avant de choisir la police par défaut de l'ordinateur. ( dans certain cas, cela vous détruit votre page XHTML )

Les balises filles hérites en règle générale de la propriété font-family.

Voici ces fontes :
Arial, Helvetica, sans-serif
Times New Roman,Times, serif
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif.


Vous pouvez inverser l'ordre.

En savoir plus sur font-family
A vous de tester sur le générateur de XHTML.

Changer la taille de police d'une portion de texte

Info

Pour changer la taille du texte, il n'existe pas de balise XHTML, il faut utiliser une feuille de style : font-size:15px, par exemple :
Exemple de code :
<span style="font-size:15px">Texte</span>

Les balises filles hérites en règle générale de la propriété font-size.

En savoir plus sur font-size

Changer la couleur d'une portion de texte

Info

Pour changer la couleur du texte, il n'existe pas de balise XHTML, il faut utiliser une feuille de style : color:#ff0000, par exemple :
Exemple de code :
<span style="color:#ff0000">Texte</span>

Les balises filles hérites en règle générale de la propriété color sauf la balise XHTML A.

En savoir plus sur color

Mettre en gras une portion de texte

Info

Pour mettre en gras le texte, il faut utiliser la balise XHTML <b> </b>.
Tout ce qui sera compris entre <b> et </b> sera en gras.
Cependant, vous devrez prendre l'habitude de ne plus utiliser la balise XHTML B et de la remplacer par une feuille de style : font-weight:bold par exemple :
Exemple de code :
<span style="font-weight:bold">Texte</span>

En savoir plus sur font-weight
A vous de tester avec le générateur XHTML.

Mettre en Italique une portion de texte

Info

Pour mettre en Italique le texte, il faut utiliser la balise XHTML <i> </i>.
Tout ce qui sera compris entre <i> et </i> sera en Italique.
Cependant, vous devrez prendre l'habitude de ne plus utiliser la balise XHTML I et de la remplacer par une feuille de style : font-style:italic par exemple :
Exemple de code :
<span style="font-style:italic">Texte</span>

En savoir plus sur font-style
A vous de tester avec le générateur XHTML.

Exercice

Nous allons mettre un texte en gras et en italique.
Tapez :
Exemple de code :
entre <i> une<b> phrase</b> quelconque </i>

Souligner une portion de texte

Info

Pour souligner le texte, il n'existe pas de balise XHTML, il faut utiliser une feuille de style : text-decoration:underline, par exemple :
Exemple de code :
<span style="text-decoration:underline">Texte</span>

A vous de tester avec le générateur XHTML.
En savoir plus sur text-decoration
La propriété de feuille de style FONT-FAMILY css permet de spécifier la police (fonte) du texte.font-family : Times New Roman, Times, serif; La propri...[Voir]La propriété de feuille de style css FONT-STYLE permet de spécifier le style du texte, c'est à dire tout ce qui concerne l'inclinaison (italique) de l...[Voir]La propriété de feuille de style css FONT-WEIGHT permet de spécifier la graisse de la fonte (mettre en gras).font-weight:bold; font-weight:800; La pro...[Voir]La propriété de feuille de style css FONT-SIZE permet de spécifier la taille de la fonte ou police.font-size:XX-small; font-size:15px; La propriété fe...[Voir]La propriété de feuille de style COLOR css permet de spécifier la couleur d'un texte.color:#FF6347; /* ou */ color:tomato; /* ou */ color:rgb(255,99,...[Voir]La propriété de feuille de style css TEXT-DECORATION permet de spécifier les décorations d'un mot par exemple si le mot est souligné ou surligné..iden...[Voir]