Mise en forme simple du texte
= = Mise en forme du texte
==
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 ...
. Il faut savoir qu'un retour à la ligne est inseré derrière la balise de fermeture
, 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 ...
(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
, 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 :
Titre 1
Titre 2
Bonjour tout le monde ! Quoi de neuf ?
Nous restons dans le même paragraphe mais nous avons "forcé" un retour à la ligne.
Titre 2
Ce qui nous donnera à l'écran :
<hr size="2" width="100%">
Titre 1
Titre 2
Bonjour tout le monde ! Quoi de neuf ?
Nous restons dans le même paragraphe mais nous avons "forcé" un retour à la ligne.
Titre 2
<hr size="2" width="100%">
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" :
Bonjour tout le monde !
Le paragraphe sera centré.
Ce qui donne :
<hr size="2" width="100%">
Bonjour tout le monde ! Le paragraphe sera centré.
<hr size="2" width="100%">
Si il s'agit d'un titre, d'une image ou quoi que ce soit d'autre, il faudra utiliser les balises
et leur attribut "align".
Info : les balises
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 :
Titre 1
Titre 2
Bonjour tout le monde !
Le paragraphe sera centré.
Ce qui donne :
<hr size="2" width="100%">
Titre 1
Titre 2
Bonjour tout le monde ! Le paragraphe sera centré.
<hr size="2" width="100%">
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 ... . De même pour le mettre en italique, il faut utiliser les balises ... .
Cependant, les balises et ne sont pas recommandées et il est préférable d'utiliser les balises ... pour le gras et les balises ... pour l'italique ( et ne sont pas interprêtées de la même façon par tous les navigateurs).
On peut aussi utiliser les balises ... 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 :
<hr size ="2" width= "100%">
Bonjour tout le monde !
Bonjour tout le monde !
Bonjour tout le monde !
<hr size ="2" width= "100%">
Taille du texte
On pourra modifier la taille du texte grâce aux balises . 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 :
Bonjour tout le monde !
Ce qui nous donnera à l'écran :
<hr size ="2" width= "100%">
Bonjour tout le monde ! <hr size="2" width="100%">
L'attribut "size" peut avoir comme valeur de -6 à +6. Voilà quelques exemples :
<hr size="2" width="100%">
Ceci en taille -6
Ceci en taille -3
Ceci en taille -1
Ceci en taille +1
Ceci en taille +3
<hr size="2" width="100%">
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 . Pour modifier la police, on utilisera l'attribut "face" ainsi :
Bonjour tout le monde !
Ce qui nous donnera à l'écran :
<hr size ="2" width= "100%">
Bonjour tout le monde ! <hr size="2" width="100%">
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.
Bonjour tout le monde !
Ce qui nous donnera à l'écran :
<hr size ="2" width= "100%">
Bonjour tout le monde ! <hr size="2" width="100%">
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 :
MadMatt a dit : Bonjour tout le monde !
Ce qui nous donnera à l'écran :
<hr size ="2" width= "100%">
MadMatt a dit :
Bonjour tout le monde ! <hr size="2" width="100%"> Effets de textes
Voici quelques autres balises servant à formater le texte :
Voici un texte normal
Voici un texte en exposant
Voici un texte en indice
Voici un texte clignotant
Ce qui nous donnera à l'écran :
<hr size ="2" width= "100%">
Voici un texte normal
Voici un texte en exposant
Voici un texte en indice
Voici un texte clignotant <hr size ="2" width="100%">
Vous savez maintenant formater (rudimentairement ;-)) votre texte !
En espérant que ça vous aura servi !
MadMatt
- Mise en forme simple du texte
- Visual studio code mise en forme automatique ✓ - Forum ASP / ASP.NET
- Vba mise en forme cellule - Forum VB.NET
- Mise en forme Textbox - Forum VB.NET
- Mise à jour sybase - Conseils pratiques -SQL
- Roulettechat texte - Forum PHP