---

Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

Voilà la suite du tutorial :
http://www.javascriptfr.com/tutorial.aspx?ID=634

Ici vous apprendrez comment mettre très simplement en forme du texte.

Autre adresse ou vous pouvez visionner le tutorial (la page web apparaitra surement mieux qu'ici) :
http://matthieu.napoli.neuf.fr/tutorials/Mise%20en%20forme%20du%20texte.html

Introduction

Maintenant que nous savons créer une page web, nous allons y mettre notre texte. Mais découvrons les différents balises mise à notre disposition pour le mettre en forme. Attention, pour mettre en forme un texte il est recommandé d'utiliser une feuille de style CSS plutôt que les balises que nous allons présenter, cependant il est nécessaire de connaître leurs existence car les feuilles de style ne font pas tout et les balises servent toujours. Ce que vous apprendrez donc ici n'est pas du tout inutile.

Organisation du texte

Maintenant que nous savons nous servir des balises, il ne nous reste plus qu'à les découvrir. Pour commencer nous allons apprendre à mettre en forme un texte. En effet, le navigateur ne prend pas en compte les retour à la ligne, les tabulations, les paragraphes ou autres contenus dans le texte brut, on va donc se servir de balises pour y faire apparaître à l'écran.

Les paragraphes

Pour créer un paragraphe nous allons utiliser les balises <p> ... </p>. Il faut savoir qu'un retour à la ligne est inseré derrière la balise de fermeture </p>, ce qui peut aussi être le cas avec d'autre balises.

Les titres

Pour les titres et les sous-titres, nous avons à notre disposition 6 degrés de mise en valeur qui correspondent aux balises <h1> ... </h1> (pour le titre le plus élevé) aux balises <h6> ... </h6> (pour le titre le plus bas).

Retours à la ligne

Enfin pour faire un retour à la ligne il convient d'utiliser la balise <br>, qui n'est d'ailleurs pas indispensable car le retour à la ligne s'effectue automatiquement en fin de paragraphe ou de titre (vous avez remarqué qu'elle ne nécessite pas de balise de fermeture).

Exemple

Voici un code qui résume ce qu'on vient de voir :

Ce qui nous donnera à l'écran :

---

Alignement du texte

Il existe plusieurs façon d'aligner un texte à gauche, au centre, ou à droite, cela dépendra de quel texte vous voudrez aligner.
Si il s'agit d'un paragraphe, la solution est simple, il suffit d'utiliser l'attribut "align" :

Ce qui donne :

---

Si il s'agit d'un titre, d'une image ou quoi que ce soit d'autre, il faudra utiliser les balises <div> </div> et leur attribut "align".
Info : les balises <div> </div> sont des balises essentielles dans le langage HTML et ne sont généralement pas employées uniquement dans le but de centrer un texte, elles ont d'autre applications beaucoup plus interessantes que vous verrez dans les autres tutoriels.
Exemple d'utilisation :

Ce qui donne :

---

Pour aligner un texte à gauche (normalement ça n'est pas nécessaire caril s'y trouve déjà sans balises), il faut utiliser la valeur "left", pour centrer : "center" comme dans l'exemple, pour aligner à droite : "right" et pour que le texte soit "justifié" (c'est à dire qu'il s'étire vers la droite pour combler tout l'espace) : "justify".

Mise en forme du texte

Texte en gras, italique, souligné

Pour mettre du texte en gras, il faut le placer entre les balises <b> ... </b>. De même pour le mettre en italique, il faut utiliser les balises <i> ... </i>.
Cependant, les balises <b> et <i> ne sont pas recommandées et il est préférable d'utiliser les balises <strong> ... </strong> pour le gras et les balises <em> ... </em> pour l'italique (<b> et <i> ne sont pas interprêtées de la même façon par tous les navigateurs).
On peut aussi utiliser les balises <u> ... <u> pour souligner du texte, mais ceci n'est pas recommandé car le soulignement est réservé aux liens hypertextes.
Voici un aperçu de ce que vous aurez à l'écran :

---

Taille du texte

On pourra modifier la taille du texte grâce aux balises <font></font>. Bien sur elle ne s'utilise pas seulement comme ça, il faut leurs préciser la taille souhaitée du texte avec l'attribut "size".
On l'utilisera donc ainsi :

Ce qui nous donnera à l'écran :

---

L'attribut "size" peut avoir comme valeur de -6 à +6. Voilà quelques exemples :

---

Police et couleur du texte

Il est également possible de modifier la police d'affichage et/ou la couleur du texte, toujours grâce aux balises <font></font>. Pour modifier la police, on utilisera l'attribut "face" ainsi :

Ce qui nous donnera à l'écran :

---

Bien entendu "Courier New" est à remplacer par la police de votre choix ;-).

Pour modifier la couleur du texte, on utilisera l'attribut "color", comme dans l'exemple qui suit.

Ce qui nous donnera à l'écran :

---

La couleur rouge est obtenue grâce à la valeur "red". Il est possible de préciser la couleur avec sa traduction anglaise (ici red=rouge) ce qui laisse le choix de 16 couleurs (par exemple "blue", "black", "white", "magenta"...) ou alors avec sa valeur héxadécimale ("#FFFFFF" pour le blanc, "#FF0000" pour le rouge...).

Bloc de citations

Pour afficher un bloc de citation, rien de plus simple :

Ce qui nous donnera à l'écran :

---

Effets de textes

Voici quelques autres balises servant à formater le texte :

Ce qui nous donnera à l'écran :

---

Vous savez maintenant formater (rudimentairement ;-)) votre texte !