• Article
  • Discussion
  • Voir le texte source
  • Historique

Mise en forme du texte, caractères spéciaux et tailles de caractères

Un article de Eric Bruyndonckx.

Sommaire

Mise en forme du texte

Marquage physique de texte (incorporé)

Les mises en forme de texte physiques suivantes peuvent être combinées les unes avec les autres :


Balises Description Remarques
<b></b> texte en gras Valide
<i></i> texte en italique Valide
<u></u> texte souligné Obsolet, utilisez les styles
<tt></tt> courrier (télétexte) Valide
<strike></strike> barré Obsolet, utilisez <del></del>
<s></s> barré Obsolet, utilisez <del></del>
<big></big> plus grand que normal Valide
<small></small> plus petit que normal Valide
<sup></sup> exposant Valide
<sub></sub> indice Valide

Marquage logique de texte (incorporé)

Les mises en forme de texte logiques suivantes peuvent être combinées les unes avec les autres :


Balises Description Remarques
<em></em> avec intonation (sonore) Valide
<strong></strong> avec une forte intonation (en gras + sonore) Valide
<code></code> code source Valide
<samp></samp> exemple de code source Valide
<kbd></kbd> entrée clavier Valide
<var></var> variable Valide
<cite></cite> citation Valide
<dfn></dfn> définition Valide
<acronym></acronym> abréviation Valide. Ex : <acronym title="Portable Document Format" lang="en">PDF</acronym>
<abbr></abbr> notation abrégée Valide

Citations

<blockquote>Texte</blockquote>

Ou

<blockquote cite="URL">Texte</blockquote>

Pour URL mentionnez une adresse Web ou une cible avec la source.

Adresses

<address>Texte</address>

Modifications du texte

Marquage de modifications

<ins>Texte inséré</ins>
<del>Texte effacé</del>

Avec date

<ins datetime="yyyy-MM-ddThh:mm:ss+hh:mm">Texte inséré</ins>
<del datetime="yyyy-MM-ddThh:mm:ss+hh:mm">Texte effacé</del>
  • yyyy = année,
  • MM = mois,
  • dd = jour,
  • T = lettre invariable,
  • hh = heures,
  • mm = minutes,
  • ss = secondes,
  • +/- = variation en heures et en minutes par rapport à l'heure de Greenwich.

Eléments

Elément de bloc commun

<div>Divers éléments HTML</div>

Par exemple pour les formatages CSS.

<div align="alignement">Divers éléments HTML</div>

Pour alignement noter une des valeurs suivantes :

  • left = gauche,
  • center = centré,
  • right = droite,
  • justify = justifié.

Élément incorporé commun

<span>Texte</span>

Par exemple pour les formatages CSS.

Polices

Formatage de polices

En HTML 4.01, les syntaxes suivantes étaient utilisées. Cependant, en XHTML, tout le formatage sera appliqué par les styles CSS.

<font size="taille">Texte</font>
<font color="#XXXXXX">Texte</font>
<font face="police">Texte</font>

Pour les contenus suivants :

<basefont size="taille">Texte</font>
<basefont color="#XXXXXX">Texte</font>
<basefont face="police">Texte</font>

Explications :

  • font est utilisé pour le marquage incorporé,
  • basefont est utilisé pour le marquage qui suivent.

Pour size = taille de police. Notez une valeur comprise entre 1 (très petit) et 7 (très grand). 3 correspond à la normale. Ou bien une valeur relative comme par exemple +1, +2 etc... pour plus grand, ou bien -1, -2 etc... pour plus petit.

Pour color = couleur de police. Pour #XXXXXX mentionnez une couleur RGB notée en hexadécimal.

Pour face = genre de police. Pour genre de police mentionner le nom d'un ou de plusieurs genres de polices (en alternative) séparés par des virgules.

  • Arial, Helvetica, sans-serif
  • "Times New Roman", Times, serif
  • "Courier New", Courier, mono
  • Georgia, "Times New Roman", Times, serif
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif

Les couleurs

Liste des couleurs RGB

Il s'agit de la condification hexadécimale du type RGB (RED GREEN BLUE), soit #rrggbb où rr, gg et bb sont des valeurs hexadécimales.

Voici quelques exemples :


Couleur Hexa Couleur Hexa Couleur Hexa Couleur Hexa
#FFFFFF #8E236B #FF0000 #32CD99
#00FF00 #3232CD #0000FF #6B8E23
#00FFFF #EAEAAE #FFFF00 #9370DB
#000000 #426F42 #70DB93 #7F00FF
#5C3317 #7FFF00 #9F5F9F #70DBDB
#B5A642 #DB7093 #D9D919 #A68064
#A62A2A #2F2F4F #8C7853 #23238E
#A67D3D #4D4DFF #5F9F9F #FF6EC7
#D98719 #00009C #B87333 #EBC79E
#FF7F00 #CFB53B #42426F #FF7F00
#5C4033 #FF2400 #2F4F2F #DB70DB
#4A766E #8FBC8F #4F4F2F #BC8F8F
#9932CD #EAADEA #871F78 #D9D9F3
#6B238E #5959AB #2F4F4F #6F4242
#97694F #8C1717 #7093DB #238E68
#855E42 #6B4226 #545454 #8E6B23
#856363 #E6E8FA #D19275 #3299CC
#8E2323 #007FFF #238E23 #FF1CAE
#CD7F32 #00FF7F #DBDB70 #236B8E
#C0C0C0 #38B0DE #527F76 #DB9370
#93DB70 #D8BFD8 #215E21 #ADEAEA
#4E2F2F #5C4033 #9F9F5F #CDCDCD
#C0D9D9 #4F2F4F #A8A8A8 #CC3299
#8F8FBD #D8D8BF #E9C2A6 #99CC32
#32CD32 #E47833

Liens

  1. Palettes : http://www.commentcamarche.net/html/htmlcouleurs.php3
  2. Roue des couleurs : http://ficml.org/jemimap/style/color/couleur.html

Exercice

En utilisant les balises nécessaires, reproduisez le texte ci-dessous.


Corrigé

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Texte préformaté</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body>
  <h1>L'objet magique</h1>
  <p>Comme dirait <cite>Albert Einstein</cite>, <q>E=mc<sup>2</sup></q> ! Voici enfin l'objet qu'il vous faut !
     Non pas pour <del cite="promotion exclusive">20€</del> <acronym title="Toutes Taxes Comprises">TTC</acronym>
     mais simplement <ins cite="promotion exclusive">15€</ins> <acronym title="Toutes Taxes Comprises">TTC</acronym> !</p>
  <blockquote>Cet objet a vraiment changé ma vie - Alain Ternet</blockquote>
  <address>Envoyer vos demandes de renseignement à <a href="mailto:nom@domaine.xy">nom@domaine.xy</a></address>
 </body>
</html>

En plus, quelques caractères spéciaux utiles

<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_html">Signes nommés pour les signes propres à HTML</a>

<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
" guillemet haut &quot; &#34;
& perluète, et commercial &amp; &#38;
< parenthèse pointue d'ouverture &lt; &#60;
> parenthèse pointue de fermeture &gt; &#62;

 


<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_iso8859_1">Signes nommés pour le jeu de caractères ISO 8859-1</a>

voir aussi: <img src="doc.gif" alt="Autre page d'information" border="0" height="10" width="15"> <a href="../../internationalisation/jeux_caracteres.htm#iso8859_liste">Jeu de caractères ISO 8859-1</a>. Les noms HTML de ces caractères sont disponibles depuis HTML 3.2.

<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
  espace imposé &nbsp; &#160;
¡ point d'exclamation inversé &iexcl; &#161;
¢ signe cent &cent; &#162;
£ signe livre &pound; &#163;
¤ signe de devise &curren; &#164;
¥ signe du yen &yen; &#165;
¦ trait vertical interrompu &brvbar; &#166;
§ signe paragraphe &sect; &#167;
¨ tréma &uml; &#168;
© signe des droits réservés &copy; &#169;
ª signe ordinal féminin &ordf; &#170;
« guillemet crochets gauche links &laquo; &#171;
¬ signe négation &not; &#172;
­ trait d'union court &shy; &#173;
® signe marque déposée &reg; &#174;
¯ tiret supérieur &macr; &#175;
° signe degré &deg; &#176;
± signe plus/moins &plusmn; &#177;
² signe puissance 2 &sup2; &#178;
³ signe puissance 3 &sup3; &#179;
´ accent aigu &acute; &#180;
µ signe micro &micro; &#181;
signe paragraphe &para; &#182;
· point médian &middot; &#183;
¸ cédille &cedil; &#184;
¹ signe puissance 1 &sup1; &#185;
º signe ordinal masculin &ordm; &#186;
» guillemet crochets droit &raquo; &#187;
¼ un quart &frac14; &#188;
½ un demi &frac12; &#189;
¾ trois quarts &frac34; &#190;
¿ point d'interrogation inversé &iquest; &#191;
À A accent grave &Agrave; &#192;
Á A accent aigu &Aacute; &#193;
 A accent circonflexe &Acirc; &#194;
à A avec tilde &Atilde; &#195;
Ä A tréma &Auml; &#196;
Å A avec cercle &Aring; &#197;
Æ E dans l' A &AElig; &#198;
Ç C cédille &Ccedil; &#199;
È E accent grave &Egrave; &#200;
É E accent aigu &Eacute; &#201;
Ê E accent circonflexe &Ecirc; &#202;
Ë E tréma &Euml; &#203;
Ì I accent grave &Igrave; &#204;
Í I accent aigu &Iacute; &#205;
Î I accent circonflexe &Icirc; &#206;
Ï I tréma &Iuml; &#207;
Ð Eth (islandais) &ETH; &#208;
Ñ N avec tilde &Ntilde; &#209;
Ò O accent grave &Ograve; &#210;
Ó O accent aigu &Oacute; &#211;
Ô O accent circonflexe &Ocirc; &#212;
Õ O avec tilde &Otilde; &#213;
Ö O tréma &Ouml; &#214;
× signe multiplication &times; &#215;
Ø O barré &Oslash; &#216;
Ù U accent grave &Ugrave; &#217;
Ú U accent aigu &Uacute; &#218;
Û U accent circonflexe &Ucirc; &#219;
Ü U tréma &Uuml; &#220;
Ý Y accent aigu &Yacute; &#221;
Þ THORN (islandais) &THORN; &#222;
ß esszett allemand &szlig; &#223;
à a accent grave &agrave; &#224;
á a accent aigu &aacute; &#225;
â a accent circonflexe &acirc; &#226;
ã a avec tilde &atilde; &#227;
ä a tréma &auml; &#228;
å a avec cercle &aring; &#229;
æ e dans l'a &aelig; &#230;
ç c cédille &ccedil; &#231;
è e accent grave &egrave; &#232;
é e accent aigu &eacute; &#233;
ê e accent circonflexe &ecirc; &#234;
ë e tréma &euml; &#235;
ì i accent grave &igrave; &#236;
í i accent aigu &iacute; &#237;
î i accent circonflexe &icirc; &#238;
ï i tréma &iuml; &#239;
ð eth (islandais) &eth; &#240;
ñ n avec tilde &ntilde; &#241;
ò o accent grave &ograve; &#242;
ó o accent aigu &oacute; &#243;
ô o accent circonflexe &ocirc; &#244;
õ o avec tilde &otilde; &#245;
ö o tréma &ouml; &#246;
÷ signe division &divide; &#247;
ø o barré &oslash; &#248;
ù u accent grave &ugrave; &#249;
ú u accent aigu &uacute; &#250;
û u accent circonflexe &ucirc; &#251;
ü u tréma &uuml; &#252;
ý y accent aigu &yacute; &#253;
þ thorn (islandais)) &thorn; &#254;
ÿ y tréma &yuml; &#255;

 


<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_grecques">Signes nommés pour pour les lettres grecques</a>

Les noms HTML de ces signes sont disponibles depuis HTML 4.0.


<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
? Alpha majuscule &Alpha; &#913;
a alpha minuscule &alpha; &#945;
? Bêta majuscule &Beta; &#914;
ß bêta minuscule &beta; &#946;
G Gamma majuscule &Gamma; &#915;
? gamma minuscule &gamma; &#947;
? Delta majuscule &Delta; &#916;
d delta minuscule &delta; &#948;
? Epsilon majuscule &Epsilon; &#917;
e epsilon minuscule &epsilon; &#949;
? Zenta majuscule &Zeta; &#918;
? zenta minuscule &zeta; &#950;
? Êta majuscule &Eta; &#919;
? êta minuscule &eta; &#951;
T Thêta majuscule &Theta; &#920;
? thêta minuscule &theta; &#952;
? Iota majuscule &Iota; &#921;
? iota minuscule &iota; &#953;
? Kappa majuscule &Kappa; &#922;
? kappa minuscule &kappa; &#954;
? Lambda majuscule &Lambda; &#923;
? lambda minuscule &lambda; &#955;
? Mu majuscule &Mu; &#924;
µ mu minuscule &mu; &#956;
? Nu majuscule &Nu; &#925;
? nu minuscule &nu; &#957;
? Xi majuscule &Xi; &#926;
? xi minuscule &xi; &#958;
? Omicron majuscule &Omicron; &#927;
? omicron minuscule &omicron; &#959;
? Pi majuscule &Pi; &#928;
p pi minuscule &pi; &#960;
? Rhô majuscule &Rho; &#929;
? rhô minuscule &rho; &#961;
S Sigma majuscule &Sigma; &#931;
? sigmaf minuscule &sigmaf; &#962;
s sigma minuscule &sigma; &#963;
? Tau majuscule &Tau; &#932;
t tau minuscule &tau; &#964;
? Upsilon majuscule &Upsilon; &#933;
? upsilon minuscule &upsilon; &#965;
F Phi majuscule &Phi; &#934;
f phi minuscule &phi; &#966;
? Chi majuscule &Chi; &#935;
? chi minuscule &chi; &#967;
? Psi majuscule &Psi; &#936;
? psi minuscule &psi; &#968;
O Oméga majuscule &Omega; &#937;
? oméga minuscule &omega; &#969;
? thêta Symbol &thetasym; &#977;
? upsilon avec crochet &upsih; &#978;
? pi Symbol &piv; &#982;

 



<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_mathematiques">Signes nommés pour les symboles mathématiques</a>

Les noms HTML de ces signes sont disponibles depuis HTML 4.0.

<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
? pour tous &forall; &#8704;
? partiellement &part; &#8706;
? existe &exist; &#8707;
Ø vide &empty; &#8709;
? nabla &nabla; &#8711;
? élément de &isin; &#8712;
? pas un élément de &notin; &#8713;
? contient comme élément &ni; &#8715;
? produit &prod; &#8719;
? somme &sum; &#8721;
- moins &minus; &#8722;
* astérisque &lowast; &#8727;
v racine carrée &radic; &#8730;
? proportionnel à &prop; &#8733;
8 infini &infin; &#8734;
? angle &ang; &#8736;
? et &and; &#8869;
? ou &or; &#8870;
n point d'intersection &cap; &#8745;
? unité &cup; &#8746;
? intégral &int; &#8747;
? c'est pourquoi &there4; &#8756;
~ semblable à &sim; &#8764;
? sensiblement égal à &cong; &#8773;
˜ presque égal à &asymp; &#8776;
? différent de &ne; &#8800;
= identique à &equiv; &#8801;
= plus petit ou égal &le; &#8804;
= plus grand ou égal &ge; &#8805;
? compris dans &sub; &#8834;
? contenant &sup; &#8835;
? n'est pas compris dans &nsub; &#8836;
? compris dans ou égal à &sube; &#8838;
? contenant ou égal à &supe; &#8839;
? somme directe &oplus; &#8853;
? produit vectoriel &otimes; &#8855;
? perpendiculaire à &perp; &#8869;
· opérateur point &sdot; &#8901;
? losange &loz; &#9674;

 



<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_techniques">Signes nommés pour les symboles techniques</a>

Les noms HTML de ces signessont disponibles depuis HTML 4.0.

<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
? à gauche en haut &lceil; &#8968;
? à droite en haut &rceil; &#8969;
? à gauche en bas &lfloor; &#8970;
? à droite en bas &rfloor; &#8971;
< parenthèse pointue à gauche &lang; &#9001;
> parenthèse pointue à droite &rang; &#9002;

 



<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_fleche">Signes nommés pour les symboles fléchés</a>

Les noms HTML de ces signes sont disponibles depuis HTML 4.0.

<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
? flèche à gauche &larr; &#8592;
? flèche en haut &uarr; &#8593;
? flèche à droite &rarr; &#8594;
? flèche en bas &darr; &#8595;
? flèche à gauche/à droite &harr; &#8596;
? flèche en bas-coudée à gauche &crarr; &#8629;
? double flèche à gauche &lArr; &#8656;
? double flèche en haut &uArr; &#8657;
? double flèche à droite &rArr; &#8658;
? double flèche en bas &dArr; &#8659;
? double flèche à gauche/à droite &hArr; &#8660;

 


<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_divers">Signes nommés pour symboles divers</a>

Les noms HTML de ces signes sont disponibles depuis HTML 4.0.

<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
puces &bull; &#8226;
ellipse horizontale &hellip; &#8230;
' signes minutes &prime; &#8242;
? tiret supérieur &oline; &#8254;
/ barre de fraction &frasl; &#8260;
P majuscule P scripte &weierp; &#8472;
I signe pour "imaginaire" &image; &#8465;
R signe pour "réel" &real; &#8476;
signe marque déposée &trade; &#8482;
signe Euro &euro; &#8364;
? symbole Alef &alefsym; &#8501;
? signe pique &spades; &#9824;
? signe trèfle &clubs; &#9827;
? signe cœur &hearts; &#9829;
? signe carreau &diams; &#9830;

 




<tbody></tbody>
 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a><a href="#bottom"><img src="bas.gif" alt="vers le bas" border="0" height="10" width="14"></a> 

<a class="an" name="nommes_ponctuation">Signes nommés pour la ponctuation</a>

Les noms HTML de ces signes sont disponibles depuis HTML 4.0.

<tbody></tbody>
<tbody> </tbody>
Signes Description Nom en HTML Unicode en HTML
espace proportionnel au n &ensp; &#8194;
espace proportionnel au m &emsp; &#8195;
? espace étroit &thinsp; &#8201;
? barre verticale de séparation &zwnj; &#8204;
? barre verticale de coordination &zwj; &#8205;
? signe de la gauche vers la droite &lrm; &#8206;
? signe de la droite vers la gauche &rlm; &#8207;
tiret proportionnel au m &mdash; &#8211;
tiret proportionnel au n &ndash; &#8212;
guillemet simple à gauche &lsquo; &#8216;
guillemet simple à droite &rsquo; &#8217;
guillemet bas simple &sbquo; &#8218;
guillemets doubles à gauche &ldquo; &#8220;
guillemets doubles à droite &rdquo; &#8221;
doubles guillemets bas à droite &bdquo; &#8222;
croix &dagger; &#8224;
double croix &Dagger; &#8225;
pour mille &permil; &#8240;
guillemet simple angulaire gauche &lsaquo; &#8249;
guillemet simple angulaire droit &rsaquo; &#8250;

 





<tbody> </tbody>

 <a href="#top"><img src="haut.gif" alt="vers le haut" border="0" height="10" width="14"></a>

<a href="variantes.htm"><img src="suivant.gif" alt="page suivante" border="0" height="10" hspace="10" width="10"></a> <img src="doc.gif" alt="Autre page d'information" border="0" height="10" width="15"> <a href="variantes.htm">Variantes HTML (strict, transitional, frameset)</a>
<a href="attributs.htm"><img src="precedent.gif" alt="page précédente" border="0" height="10" hspace="10" width="10"></a> <img src="doc.gif" alt="Autre page d'information" border="0" height="10" width="15"> <a href="attributs.htm">Référence HTML pour les attributs</a>
 
<tbody> </tbody>


Voir aussi