logo UsualSoft   Skip Navigation Links
Accueil
Références
Formations
TutorielsExpand Tutoriels
Liens téléchargements

Contact : usualsoft@outlook.fr
Microsoft Certified Professional
Cours : HTML

La mise en page

Gilles Chamillard

Fiche n°3
Retour   Suiote

I) Les balises de formatage

a) Les balises de niveau texte

Le HTML permet de varier la présentation du texte en fonction de divers attributs de police et de style. Les couleurs peuvent prendre soit un code hexadécimal (type RVB), soit les noms réservés suivants :
  • Les couleurs : black, white, aqua, silver, gray, maroon, red, purple, fuschia, green, lime, olive, yellow, navy, blue, teal.
  • Les principales balises :
Fonction Attributs Syntaxe
Exemple
Afficher le texte en gras Aucun <B> Exemple </B>
Exemple
Afficher le texte en plus gros Aucun <BIG> Exemple </BIG>
Exemple
Changer la taille, couleur, police Color, face, size <font [color="couleur"] [size=taille] [face="police"] >
Exemple
Affiche le texte en italique Aucun <I> Exemple </I>
Exemple
Afficher le texte en plus petit Aucun <SMALL> Exemple </SMALL>
Exemple
Afficher le texte en exposant Aucun Exemple <SUP> 1 </SUP>
Exemple1

Remarques :
La balise affichant le texte en souligné a été volontairement omise afin de ne pas confondre le texte souligné avec les hyperliens (soulignés par convention).
Les balises s'imbriquent à volonté les unes dans les autres. On peut combiner un effet gras et italique par exemple : <B><I> Texte </I><B>. Respectez simplement l'emboîtement des balises.

Parcequ'HTML écrit pour le monde, les accents utilisés en français n'apparaissent pas dans la langue anglaise. Les entités HTML permettent en partie de résoudre votre problème. Voici les séquences principales ( s'écrira o&ugrave) :

&eacute;
é
&ecirc;
ê
&nbsp;
(espace)
&egrave;
è
&agrave;
à
&iuml;
ï
&ccedil;
ç
&ugrave
ù
&quot;
"

b) Les balises de niveau paragraphe

  • La balise <p>. Elle définit un paragraphe avec un saut de ligne avec espace.
  • La balise <br>. Insert un saut de ligne sans espace. Pour insérer un espace taper la séquence &nbsp.
  • La balise <blockquote>. Insert un décalage sur la droite (tabulation).
  • La balise <pre>. Identifie un texte préformaté. Les espaces, tabulations, sauts de ligne sont respectés comme dans un éditeur normal.
  • La balise <div>. Définit un alignement sur un texte. Elle a pour attribut ALIGN avec pour valeurs possibles : left, right, center et justify.

Remarque :
Volontairement, j'ai passé sous silence le fait que l'on puisse aligner un texte par l'intermédiaire d'autres balises (CENTER, P). Le W3C recommande l'emploi de la balise DIV.


II) La mise en forme de la page

a) Les balises particulières

  • La balise <HR>. Cette balise insère une ligne horizontale par défaut d'une épaisseur de 1 pixel sur la largeur de la page. Cette balise n'a pas de balise de fermeture. Ces attributs sont :
    • align : valeurs possibles left, right et center (par défaut). Cela dépénd bien évidement de la longueur de votre ligne.
    • noshade : supprime l'ombrage 3D.
    • size : spécifie l'épaisseur de la ligne en pixels.
    • width : spécifie la largeur de la ligne. Préférez une notation en % car vous ne connaissez pas par avance la taille d'écran.
  Exemple :
        ..
        <HR width=80% size=4> <!-- Ligne de taille 4 sur 80% de la page -->
        ..
        
  • La balise <H1> ... <H6>. Cette balise identifie un titre de document et fait varier la taille sur 6 niveaux (H1 la plus grande, H6 la plus petite). Le texte est mis aussi en gras avec un espacement des caractères différent avant et après.

 

Exemple :
            ..
            <H3> Ceci est un titre </H3>
            ..
         

b) Les attributs de la page

Les attributs de la page passe par la balise <BODY>. On a :

  • alink, link, vlink : couleur des différents états des liens (voir fiche correspondante),
  • background : prend pour valeur l'URL de l'image d'arrière-plan du document (répété en mosaïque dans le cas d'une petite image),
  • bgcolor : prend pour valeur la couleur appliquée à l'arrière-plan,
  • text : prend pour valeur la couleur appliquée au texte par défaut de la page

 

Exemple :
        <BODY BACKGROUND="../images/Fond.jpg" text="black">
        .. éléments du corps du document 
        </BODY>
        

Retour haut Retour vers le haut de la page Suiote