Chapitre 2: La mise en forme

Nous voici maintenant plongés dans les balises html.
Ce chapitre rassemble les codes de mise en forme (saut de ligne, nouveaux paragraphes, accents, ...)

  • Sauter une ligne
  • Faire un nouveau paragraphe
  • Faire une ligne séparatrice
  • Décaler un texte
  • Mettre des accents
  • Mettre des symboles
  • Faire des listes de définitions, à puce, numérotées
  • Centrer un texte ou une image


    Sauter une ligne

    Pour sauter une ligne c'est <BR>.
    Je saute<BR>une ligne


    Je saute
    une ligne

    Il n'y a pas besoin de fermer cette balise par </BR>. Retour au menu


    Faire un nouveau paragraphe

    Pour faire un nouveau paragraphe c'est <P>.
    Paragraphe1<P>Paragraphe2

    Paragraphe1

    Paragraphe2

    On peut aussi centrer le paragraphe au milieu, à droite, ou à gauche grâce à l'extension ALIGN
    <P ALIGN="LEFT">Paragraphe1 aligné à gauche (par défaut).</P>

    Paragraphe1 aligné à gauche (par défaut).

    <P ALIGN="CENTER">Paragraphe2 centré au milieu.</P>

    Paragraphe2 centré au milieu.

    <P ALIGN="RIGHT">Paragraphe3 aligné à droite.</P>

    Paragraphe3 aligné à droite.

    On peut se passer du code de fermeture mais on n'aura pas le même résultat. Mieux vaut utilisez la balise </P> à la fin du paragraphe.
    Retour au menu


    Faire une ligne séparatrice

    Pour faire une ligne séparatrice c'est <HR>.
    Et hop une ligne.<hr>
    Et hop une ligne.


    Ce code est lui aussi extensible (comme quasiment tous les codes html, ne l'oubliez pas): vous pouvez choisir sa couleur, sa taille, ...
    Et hop une ligne remplie.<HR NOSHADE>
    Et hop une ligne remplie.


    Et hop une ligne rouge (attention: les couleurs ne passent pas sous netscape).<HR COLOR="RED">
    Et hop une ligne rouge.
    Et hop une ligne d'épaisseur 10 pixels.<HR SIZE="10">
    Et hop une ligne d'épaisseur 10 pixels.
    Et hop une ligne de taille 60% (on peut aussi utiliser des pixels au lieu de pourcentage).<HR WIDTH="60%">
    Et hop une ligne de taille 60%.

    N'oubliez pas vous faites du html donc vous pouvez tout combiner :-)
    Et hop une ligne qui combine tout<HR SIZE="3" COLOR="YELLOW" WIDTH="400">
    Et hop une ligne qui combine tout


    <HR> accepte aussi la propriété ALIGN. Je vous ai dit que c'était marrant le html ;)
    Evidemment pas besoin de </HR>.
    Retour au menu


    Décaler un texte

    Pour décaler un texte c'est <BLOCKQUOTE>.
    <blockquote>Texte décalé.</blockquote>Texte non décalé.

    Texte décalé.
    Texte non décalé.

    Ici vous voyez bien l'intérêt de fermer le code avec </BLOCKQUOTE> sinon le texte non décalé serai décalé. Retour au menu


    Mettre des accents

    Pour mettre des accents ce sont aussi des codes. Même si pratiquement tous les utilisateurs qui viendront sur votre page liront ce "é" et pas un "#" ou autre "µ$", il existe des codes qui sont :

    é &eacute;
    ê &ecirc;
    ë &euml;
    î &icirc;
    ï &iuml;
    ô &ocirc;
    ö &ouml;
    û &ucirc;
    ü &uuml;

    Mémo : circ fait penser circonflexe et uml à umlaut.

    Il ne faut pas mettre de < ni > ça fait bizarre dans la source mais c'est comme ça. H&eacute; oui :)
    N'oubliez pas le ";" ça risque de marcher sous IE mais pas sous netscape.
    Retour au menu


    Mettre des symboles

    Tout comme les accents il y a des codes pour les symboles :

    < &LT;
    > &GT;
    ¢ &CENT;
    £ &POUND;
    © &COPY;
    ® &REG;
    ° &DEG;
    & &AMP;

    Pareil qu'au dessus ne pas mettre < et > et ne pas oublier ";" Retour au menu


    Faire des listes de définitions, à puce, numérotées

    Pour faire des listes à puce c'est <UL> et <LI>
    Blabla<UL><LI>Blabla1<LI>Blabla2</UL>
    Blabla

    </LI> n'est pas utile mais </UL> est obligatoire.

    <UL> est extensible par TYPE.
    Blabla<UL TYPE="CIRCLE"><LI>Blabla1<LI>Blabla2</UL>
    Blabla

    Blabla<UL TYPE="SQUARE"><LI>Blabla1<LI>Blabla2</UL>
    Blabla
    • Blabla1
    • Blabla2
    Pour faire des listes numérotées c'est <OL> et <LI>
    Blabla<OL><LI>Blabla1<LI>Blabla2</ol>
    Blabla
    1. Blabla1
    2. Blabla2
    <OL> est lui aussi extensible par TYPE.
    Blabla<OL TYPE="a"><LI>Blabla1<LI>Blabla2</OL>
    Blabla
    1. Blabla1
    2. Blabla2

    Attention cette fois aux minuscules et majuscules pour "a" (voir le suite).

    Blabla<OL TYPE="A"><LI>Blabla1<LI>Blabla</OL>
    Blabla

    1. Blabla1
    2. Blabla2

    Attention cette fois "A" est en majuscule.

    Blabla<OL TYPE="i"><LI>Blabla1<LI>Blabla2</OL>
    Blabla

    1. Blabla1
    2. Blabla2

    Attention "i" est en minuscule.

    Blabla<OL TYPE="I"><LI>Blabla1<LI>Blabla</OL>
    Blabla

    1. Blabla
    2. Blabla2

    Attention "I" est en majuscule.

    Pour faire des listes de définitions c'est <DL>, <DT> et <DD>
    Blabla<DL><DT>Terme1:<DD>Définition1<DT>Terme2:<DD>Définition2</DL>
    Blabla

    Terme1:
    Définition1
    Terme2:
    Définition2

    </DT> et </DD> sont inutiles mais il ne faut pas oublier </DL> Retour au menu


    Centrer un texte ou une image

    Pour centrer un texte ou une image c'est tout simplement <CENTER>
    <CENTER>Tiens, ce texte est centré</CENTER>Mais plus celui là.

    Tiens, ce texte est centré
    Mais plus celui là.

    Pour centrer une image ou toute autre chose comme un tableau (cf. Chapitre 5), il suffit que cette chose soit placée entre les deux balises <CENTER> et </CENTER> Retour au menu


    Ouf c'est fini. Maintenant vous pouvez remplir le test ou aller directement au chapitre 3.

    Chapitre 1 Faire le test du chapitre 2 Chapitre 3

    Explode ID: 11223

    Retourner en haut