Le HTML Accueil Récapitulatif 1.Introduction 2.Le texte 3.Liens hypertextes 4.Images 5.Tableaux
2. Le texte
Cliquez ici pour télécharger ce chapitre, ce qui vous permettra de le consulter sans être connecté.

1. Introduction
2. La typographie
3. La mise en page
4. Les couleurs par défaut 		5. Les puces
6. Les caractères spéciaux
7. Le commentaire dans le HTML

Introduction.

Tout d'abord, seul le texte inséré entre les deux balises <BODY> et </BODY> sera affiché. En dehors de ces balises (par exemple entre <HEAD> et </HEAD>), il ne sera pas affiché.
L'instruction <BR> permet le retour à la ligne.
Voici un exemple très simple de fichier HTML (.htm) qui écrit un petit texte :
Source (à taper dans Notepad et à enregistrer en .htm) Aperçu
<HTML>
<HEAD><TITLE>1er essai de texte</TITLE></HEAD>
<BODY>
Première ligne de texte<BR>
Deuxième ligne de texte<BR><BR>
Troisième ligne de texte
</BODY>
</HTML>

Remarques :
  - Le HTML ne prend pas en compte les retours à la ligne dans le code source.
  - Le HTML ne prend pas en compte la casse (c'est-à-dire les minuscules ou les majuscules) des instructions.

Ainsi, le même résultat aurait pu être obtenu avec le code suivant :
<html><head><title>1er essai de texte</title></head>
<body>Première ligne de texte<br>
Deuxième ligne de texte<br><br>

Troisième ligne de texte
</body> </html>
  - Cependant, je vous conseille d'utiliser de respecter une mise en page correcte du fichier HTML et il est désormais conseillé d'utiliser des minuscules.


La typographie.

  • Mettre le texte en gras

    Pour commencer à mettre le texte en gras, il faut utiliser l'instruction <B> (car "Gras" se dit "Bold" en anglais).
    Pour arrêter de mettre le texte en gras, il faut mettre la balise </B>.
    Test simple de police en gras :
    Source (à enregistrer en .htm) Aperçu
    <HTML>
    <HEAD><TITLE>Essai de texte en gras</TITLE></HEAD>
    <BODY>

    Le texte <B>est en gras<BR>Il ne</B> l'est plus.

    </BODY>
    </HTML>
  • Mettre le texte en italique

    Pour mettre le texte en italique, la syntaxe est exactement la même que celle pour mettre le texte en gras : l'instruction commençant à mettre le texte en italique est <I> et celle pour arrêter de mettre le texte en italique est </I>

  • Souligner le texte

    Pour souligner le texte, la syntaxe est la même que celle du texte en gras ou italique : l'instruction commençant à souligner (pour "underline" en anglais) le texte est <U> et celle pour arrêter de souligner le texte est </U>

  • La taille du texte

    La taille du texte se choisit avec l'instruction <FONT SIZE=""> et </FONT>. Il faut mettre entre les guillemets une taille comprise entre 1 et 7 (ou entre -3 et +4). Voici l'aperçu des différentes tailles d'écriture.
    A savoir que la taille d'écriture par défaut est 3 (<FONT SIZE="3"> ... </FONT> ).

    Voici les différentes tailles d'écriture :
    <FONT SIZE="1">hello</FONT>
    ou
    <FONT SIZE="-3">hello</FONT>    		 hello
    <FONT SIZE="2">hello</FONT>
    ou
    <FONT SIZE="-2">hello</FONT>    		 hello
    <FONT SIZE="3">hello</FONT>
    ou
    <FONT SIZE="-1">hello</FONT>    		 hello
    <FONT SIZE="4">hello</FONT>
    ou
    <FONT SIZE="+1">hello</FONT>    		 hello
    <FONT SIZE="5">hello</FONT>
    ou
    <FONT SIZE="+2">hello</FONT>    		 hello
    <FONT SIZE="6">hello</FONT>
    ou
    <FONT SIZE="+3">hello</FONT>    		 hello
    <FONT SIZE="7">hello</FONT>
    ou
    <FONT SIZE="+4">hello</FONT>    		 hello


  • La couleur du texte

    La couleur du texte se choisit aussi avec l'instruction <FONT>, tout comme pour la taille. C'est juste la propriété de l'instruction <FONT> qui n'est plus SIZE mais COLOR.
    La syntaxe est donc <FONT COLOR=""> pour commencer à mettre le texte d'une couleur choisie entre guillemets et </FONT> pour arrêter de mettre le texte de cette couleur (et donc revenir à la couleur par défaut). En effet, on ne replace pas les propriétés dans la balise qui referme : il ne faut pas mettre </FONT COLOR=""> mais bel et bien </FONT>.

    Les guillemets de COLOR="" sont à remplacer par une des couleurs ci-contre.

    Cependant, pour obtenir plus de couleurs (jusqu'à 16 777 216), vous pouvez utiliser un code hexadécimal, précédé d'un #.
    Pour en savoir plus sur l'hexadécimal, cliquez ici.


  • Combinaisons typographiques.

    Il est tout à fait possible de combiner et la taille du texte, et sa couleur, etc...
    Cependant, faites bien attention à refermer les instructions dans l'ordre inverse de leur insertion.
    Mettre le texte en gras, italique, souligné, en taille 5 et en rouge
    Source (à enregistrer en .htm) Aperçu
    <HTML>
    <HEAD><TITLE>Tout combiner !</TITLE></HEAD>
    <BODY>

    <FONT SIZE="5" COLOR="Red"><B><I><U>
    Bonjour !
    </U></I></B></FONT>

    </BODY>
    </HTML>

    Attention !
    Lorsque vous associez ainsi des types de typographie, attention à refermer les balises dans le sens inverse de leur ouverture.
    Regardez bien l'exemple ci-dessus : on commence avec <FONT> donc on finit avec </FONT>, en 2ème position se trouve <B> donc on ferme par </B> en 2ème position, etc...



  • Quelques autres propriétés sur le texte.

    Les couleurs par défaut.

  • Si pendant tout (ou presque tout) votre document vous avez envie d'écrire d'une certaine couleur, vous n'êtes pas obligés de mettre un <FONT COLOR> sur tout le document. Il faut alors utiliser la propriété TEXT="" (avec la couleur entre les guillemets) de l'instruction BODY
    Imaginons que vous voulez écrire sur tout le document en rouge, sur un fond noir. Voici le code source :
    Code source de l'exemple donné ci-dessus.
    Source (à enregistrer en .htm) Aperçu
    <HTML>
    <HEAD></HEAD>
    <BODY BGCOLOR="Black" TEXT="Red">

    Bonjour !

    </BODY>
    </HTML>

  • Il est également possible de choisir la couleur des liens avec la propriété LINK="" (par défaut, la couleur est bleue pour les liens).
  • Il est enfin possible de choisir la couleur des liens visités avec la propriété VLINK="" (par défaut, la couleur est violette pour les liens visités).
  • Il est bien sûr possible de tout combiner en mettant par exemple : <BODY TEXT="Gray" LINK="#FF6000" VLINK="#C00010">. Ci-contre vous pouvez voir ce que donne cet exemple.

    Remarque : il est toujours possible d'utiliser l'instruction <FONT COLOR=""> dans votre document.

    La mise en page.

    Par défaut, le HTML aligne tout à gauche. Mais il serait désormais intéressant de centrer certaines choses (liens, texte, ...).

  • L'instruction pour centrer est <CENTER> et </CENTER>. Tout ce qui doit être centré ce trouvera entre ces deux balises.
    Remarques :
    Désormais, l'instruction préconisée pour centrer est <DIV ALIGN="center"> et </DIV> . Elle est mieux dans le sens où elle uniformise par rapport au texte justifié et au texte aligné à droite mais elle ne marchera pas avec les très anciens navigateurs internet.
    Utilisez l'instruction qui vous plaît, mais n'alternez pas entre les deux, ça ne ferait pas très "esthétique".
  • L'instruction pour aligner à droite est <DIV ALIGN="right"> et </DIV>.
  • L'instruction pour justifier le texte est <DIV ALIGN="justify"> et </DIV>.
    Test des différents types d'alignement.
    Source (à enregistrer en .htm) Aperçu
    <HTML>
    <HEAD><TITLE>Tests d'alignement.</TITLE></HEAD>
    <BODY>

    Le texte est à gauche.

    <CENTER>Le texte est centré</CENTER>

    <DIV ALIGN="center">
    Le texte est également centré avec l'instruction DIV
    </DIV>

    <DIV ALIGN="right">Le texte est aligné à droite</DIV>

    </BODY>
    </HTML>
    Remarque : dès que l'on referme une balise d'alignement (</CENTER> ou </DIV>), un saut à la ligne (équivalent à <BR>) se fait automatiquement.
    Les caractères spéciaux.

    Dans différents cas, l'utilisation de caractères spéciaux s'avère utile.

  • Lorsque vous tapez plusieurs espaces à la suite dans la source, le HTML n'affiche toujours qu'un espace. Si vous souhaitez mettre plusieurs espaces à la suite, il faut utiliser &nbsp;. Vous pourrez mettre autant de &nbsp; à la suite que vous voudrez.
  • Ne jamais utiliser les caractères < et > en tant que texte. En effet, le navigateur croierait que c'est une instruction HTML que vous entrez ! Il faut alors utiliser &lt; et &gt;.
  • Ceci n'est pas 100% obligatoire, mais conseillé : remplacez les é par &eacute;, è par &egrave;, les ê par &ecirc;, î par &icirc;, à par &agrave;, " par &quot;. Cela permet d'être sûr que quelque soit le pays et quelque soit le navigateur, les caractères seront bien affichés.

    Attention : toujours insérer les instructions de caractères spéciaux (&quelquechose;) en minuscules : le navigateur ne les comprendrait pas si elles étaient insérées en majuscules.
    Les puces.

    Les puces permettent une meilleure organisation des pages.
    L'instruction <LI> permet d'insérer une puce classique du type
    Il est possible de mettre la propriété TYPE : Remarque : dès que l'instruction <LI> est entrée, un retour à la ligne se fait automatiquement (comme si on avait mis un <BR> avant).

    Il est possible de mettre des alinéas, de généraliser un type (carré, cercle) pour plusieurs puces, et créer des numéroations automatiques avec <UL> (et </UL>) et <OL> (et </OL>). Exemples :
    Source Aperçu
    <UL>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </UL>
    • Item 1
    • Item 2
    • Item 3
    Source Aperçu
    <UL TYPE="square">
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </UL>
    • Item 1
    • Item 2
    • Item 3
    Source Aperçu
    <UL TYPE="circle">
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </UL>
    • Item 1
    • Item 2
    • Item 3
    Source Aperçu
    <OL>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3
    Source Aperçu
    <OL TYPE="I">
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3
    Source Aperçu
    <OL TYPE="A">
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3


    Le commentaire dans le HTML.

    Afin de se donner des marques de repère, il est possible d'insérer du texte qui ne sera pas affiché par le navigateur. Ce texte est à placer entre <-- et --!> .
    Exemple Aperçu
    Bonjour<BR>
    <!-- hello <BR> -->
    Buenas tardes     		Bonjour
    Buenas tardes