 |
Styles et polices de caractères
Thème
Passage en revue des principales techniques de mise en forme du texte (styles, polices...).
Balises
- Styles "physiques" (peuvent être combinés les uns avec les autres) :
<b> texte en gras </b>
<i> texte en italique </i>
<u> texte souligné </u>
<s> texte barré </s>
<strike> texte biffé </strike>
<small> petit texte </small>
<big> grand texte </big>
<tt> texte en police à chasse fixe </tt>
<blink> </blink>
(Netscape et Mozilla seulement, et ne peut être appliqué qu'à du texte)
Texte pré-formaté (type "machine à écrire") :
<pre>
texte pré-formaté
</pre>
Balise neutre, permettant de délimiter une zone du document :
<span> n'introduit pas de retour chariot, ni autre sémantique de présentation </span>
Indices et exposants :
<sub>indice</sub>, <sup>exposant</sup>
- Styles "logiques" (peuvent être combinés les uns avec les autres) :
<strong> texte très important </strong>
<em> texte important </em> (emphasize)
<dfn> définition </dfn>
<var> variable dans un programme </var>
<cite> citation </cite>
<code> exemple de code </code>
<samp> résultat de programme </samp>
<kbd> entrée clavier </kbd>
Acronymes (permet d'afficher la signification d'une abréviation lorsqu'elle est survolée par le curseur) :
<acronym title="signification..."> HTML </acronym>
<abbr title="signification..."> CSS </abbr>
- Centrage dans la page (3 méthodes) :
<div align="center"> texte ou objets... </div>
<p align="center"> texte ou objets... </p>
<center> texte ou objets... </center> (déprécié, à éviter)
- Justification à droite ou gauche (2 méthodes) :
<div align="LEFT,RIGHT"> texte ou objets... </div>
<p align="LEFT,RIGHT"> texte ou objets... </p>
- Taille et couleur du texte :
<font size="1 à 7" ou "-2 à +4" color="couleur"> texte... </font>
(3=taille par défaut ; 4=>+20% ; 2=>-20% ; etc...)
- Police et/ou famille de caractère :
<font face="police1,police2,famille..."> texte... </font>
(Outre les polices, on peut spécifier les familles de polices suivantes :
serif, sans-serif, monospace, cursive, fantasy)
- Pour changer globalement la taille, la couleur et la police dans toute une page, utiliser les styles CSS1, ou placer la balise suivante dans le bloc <HEAD>...</HEAD> :
<basefont size="1 à 7" ou "-2 à +4" color="couleur" face="police1,police2...">
(attributs COLOR et FACE interprétés par IE seulement)
En outre :
- voir la technique des Feuilles de Styles (CSS, Cascading Style Sheets) qui permet de mettre en forme un ensemble de pages HTML beaucoup plus efficacement (et en simplifiant/épurant le code HTML)
- Encodage des caractères spéciaux (voir ce tableau)
- en ce qui concerne les caractères grecs : soit utiliser police de caractère "Symbol" (voir exercice ci-dessous), soit utiliser le "charset=UTF-8" (voir ce tableau)
Exercice
| |
Etape |
Solution |
| 1 |
Réalisez en HTML le système d'équations suivant
(utilisez la police "Symbol" pour faire les caractères grecs) :
X2 = X1 cos(a+b) - Y1 sin(a+b)
Y2 = X1 sin(a+b) + Y1 cos(a+b)
|
<center>
<b>X<sub>2</sub></b> =
X<sub>1</sub> cos(<font face="Symbol">a+b</font>) -
Y<sub>1</sub> sin(<font face="Symbol">a+b</font>)
<br>
<b>Y<sub>2</sub></b> =
X<sub>1</sub> sin(<font face="Symbol">a+b</font>) +
Y<sub>1</sub> cos(<font face="Symbol">a+b</font>)
</center>
|
|
|
[ 142932 ]
Vous êtes ici : 
0 Membre
Vous pouvez aider ce site à évoluer, en contribuant à son développement.
Proposez vos idées de cours et/ou dossiers.
Rendez-vous dans 
