Formatage du texte en html

III. Balises de mise forme

A. Formatage directe

B. Formatage logique

C. Définition de la taille de caractère

D. Changer la couleur dans le texte

IV. Insérer des accents et des caractères spéciaux

A. Caractères spéciaux dans HTML

B. A propos des accents

V. Exemple de formatage

Cette section décrit les différentes options disponibles pour formater le texte dans une page WWW.

I. Balises d'entêtes (Headers)

Ces commandes se mettent entre le couple de balises <HEAD> et </HEAD>. Elles donnent des informations générales sur toute la page.
Le formatage d'une page commence généralement par le choix et l'usage d'entêtes prédéterminées qui s'échelonnent de H1 à H6 (niveaux). La commande H1 est la plus grosse disponible et la H6 est la plus petite. Les commandes Hx comprennent un choix de taille, le caractère gras et un retour de paragraphe.

Il n'y a pas de niveau inférieur à H6. Les balises H1 à H6 peuvent comporter un attribut ALIGN=LEFT|CENTER|RIGHT permettant l'alignement du texte à gauche, au centre ou à droite.
Il n'est pas nécessaire d'ajouter les commandes ou à la fin des lignes de H1 à H6 puisque celles-ci sont implicites.

II. Balises de mise en page

Ces balises permettent de faire une action ponctuelle là où elles apparaissent, sans effet sur la suite du document.

 donne un changement de paragraphe

permet de rentrer le texte entre les marges gauche et droite ; dans ce cas, la balise localisera la fin de la portée de la balise

  donne un simple changement de ligne

CLEAR quand il a la valeur left va faire le même saut de ligne et fait un déplacement vers le bas en respectant la marge gauche. CLEAR avec la valeur right fait la même chose avec la marge droite. Ceci permet aussi de mettre des images autour de texte.

Vous pouvez utiliser plusieurs commandes ou répétitivement pour augmenter l'espacement.

<HR> trace un trait de séparation dans le texte, comme ceci :

<HR SIZE=nombre> donne une épaisseur au trait
<HR WIDTH=nombre|pourcentage> donne la longueur du trait
<HR ALIGN=left|right|center> le trait peut être aligné à droite, à gauche ou centré
<HR NOSHADE> le trait n'a pas d'ombre

<CENTER> permet de centrer le texte qu'il encadre, exemple :

<center>
Quelque chose de centré </center>

<DIV ALIGN="left|center|right">...</DIV> permet de justifier un texte à droite, au centre, ou à gauche

III. Balises de mise forme

A. Formatage directe

donne un texte en gras: texte en gras
donne un texte en italique: texte en italique
donne un texte en souligné: texte en souligné
<S></S> donne un texte en barré: ~~texte en barré~~
<TT></TT> donne un texte formaté avec une fonte à espacement constant (teletype): texte formaté avec une police à espacement constant

note: Les majuscules et les minuscules peuvent être utilisées indifféremment pour les annotations.

B. Formatage logique

Lors du formatage logique, le texte fait partie d'une classe, parmi d'autres, sans que des signes particulier de présentation soient définis.

Quelques exemples :

Adresse : <ADDRESS> Ceci permet d'afficher une adresse </ADDRESS>
Blockquote : <BLOCKQUOTE> ceci permet d'afficher un bloc avec retrait à droite </BLOCKQUOTE>
Citation : <CITE> Ceci permet d'afficher des citations </CITE>
Code : <CODE> Ceci permet d'afficher du code </CODE>
Préformaté :: <pre></pre> obligent le navigateur à afficher un texte préformaté.
Variable :<VAR></VAR> permet d'attribuer l'annotation variable à une donnée.
Exemple : <SAMP> Ceci permet d'afficher un exemple </SAMP>
Emphase :  sert à mettre en relief un groupe de caractères
Clavier : <KBD> ceci permet d'afficher les entrées clavier </KBD>
Définition : <DFN> . . . </DFN> pour afficher une définition

C. Définition de la taille de caractère

donne un accroissement de la grosseur affichée du texte de 2 unités
donne un accroissement de la grosseur affichée du texte de 4 unités
donne une réduction de la grosseur affichée du texte de 2 unités:

Les valeurs autorisées s'échellonnent entre 1 et 7. Vous pouvez aussi utiliser commande abbréviée pour clore la commande . Il est important de souligner ici que l'usage de cette commande n'influence pas la taille des H1 à H6. Ainsi, augmenter la taille du texte peut entraîner un dépassement de la taille d'une entête, ce qui n'est pas souhaitable.

<BIG></BIG> permet d'écrire un texte plus gros
permet d'écrire un texte plus petit
permet d'entrer des exposants : x² + y² = R²
permet d'entrer des indices : x_n+1 - x_n = n(n-1)

D. Changer la couleur dans le texte

Pour changer la couleur du texte à un endroit précis dans une page, on peut maintenant utiliser la commande :

J'aimerais changer la couleur à mon gré dans une page

Le code requis pour afficher cette dernière phrase est:

J'aimerais changer la couleur à mon gré dans une page!

IV.Insérer des accents et des caractères spéciaux

A. Caractères spéciaux dans HTML

Certains caractères ont une signification spécifique dans HTML. Pour les utiliser comme tels dans une page, il faut utiliser les commandes alternatives pour les afficher correctement à l'écran. Ces commandes sont:

< pour: <
> pour: >
& pour: &
" pour: "

B. A propos des accents

Les normes HTML demandent de respecter le codage dans les caractères ASCII 7 bits, c'est à dire sans caractères accentués.
Les logiciels navigateurs actuels sont permissifs et vous pouvez entrer des caractères accentués sous votre éditeur, mais vous devez savoir que vos pages ne seront plus lisibles par exemple au Japon ou dans les pays utilisant des jeux de caractères non latins. En outre les caractères accentués sauteront vraisemblablement dans les moteurs de recherche américains, ce point est à méditer.
Pour coder un caractère accentué, on entre une combinaison précédée du caractère & et terminé par un ; (point virgule).

Ainsi é se code é

V. Exemple de formatage

Formater directement du texte avec les tags HTML est assez fastidieux. C'est pourquoi cette section va montrer la création de texte avec un éditeur HTML tel que Dreamweaver.

· Entrez le texte sans se soucier du formatage

La préparation de documents HTML se faisant dans un simple éditeur de texte, le navigateur interprète à l'écran les instructions qu'il reconnaît. On peut ajouter dans les documents des commentaires ou annotations "invisibles" pour le navigateur. Ces annotations peuvent servir au programmeur comme repère, note de travail ou autre référence personnelle.
Pour utiliser cette possibilité, il faut utiliser les commandes : .

· Ensuite, commencez la mise en forme