« Le langage HTML/Style de texte » : différence entre les versions
m →Paramètres : coquille |
→Balises de mise en forme : solution externalisée |
||
Ligne 176 : | Ligne 176 : | ||
* barrer : <code><span style="text-decoration:linethrough">…</span></code> |
* barrer : <code><span style="text-decoration:linethrough">…</span></code> |
||
* type de police : <code><span style="font-family:"Times New Roman" ">…</span></code> |
* type de police : <code><span style="font-family:"Times New Roman" ">…</span></code> |
||
mais il vaut mieux définir des styles dans un fichier à part et faire appel à ces styles (ce qui simplifie la maintenance des fichiers), par exemple, mettre dans le fichier CSS : |
|||
.italique {font-style:italic} |
|||
.gras {font-weight:bold} |
|||
.grand {font-size:1.1em} |
|||
.petit {font-size:0.9em} |
|||
.souligner {text-decoration:underline} |
|||
.barrer {text-decoration:linethrough} |
|||
ce qui s'exploite dans le fichier HTML de la manière suivante : |
|||
<p> |
|||
Du texte <span class="italique">en italique</span>, |
|||
<span class="gras">en gras</span>, |
|||
en <span class="grand">grandes</span> ou <span class="petit">petites</span> lettres, |
|||
<span class="souligner">souligné</span> |
|||
ou <span class="barrer">barré</span>. |
|||
</p> |
|||
{{loupe|Programmation CSS/Texte}} |
{{loupe|Programmation CSS/Texte}} |
Version du 22 mars 2007 à 17:00
Il est possible d'indiquer au navigateur que l'on a affaire à tel ou tel type de texte. Cela va changer la mise en forme.
Comme pour les titres, la manière dont le texte est mis en forme dépend du réglage du navigateur, ou de la feuille de style (voir Programmation CSS).
Plutôt que de « style de texte », il vaudrait mieux parler d'« éléments de texte » (« éléments de phrase » et « de citation »), puisque les balises décrivent des portions de texte.
Style | Balise | Mnémotechnique | Rendu par défaut |
---|---|---|---|
mise en emphase | <em> …</em>
|
emphase | italique |
mise en emphase forte | <strong> …</strong>
|
« fort » | gras |
citation d'une référence | <cite> …</cite>
|
… | italiques |
citation courte dans le texte | <q> …</q>
|
quote (citation) | entre guillemets |
citation à part | <blockquote> …</blockquote>
|
« bloc de citation » | marge à gauche plus grande |
code source | <code> …</code>
|
… | police à chasse fixe avec empattement (type Courier) |
texte préformaté (par exemple pour aligner avec des espaces, ou faire des dessins ASCII) | <pre> …</pre>
|
preformed (préformatté) | police à chasse fixe, en général avec empattement (type Courier) |
Certains ont tendance à utiliser les balises <i>
…</i>
pour l'italique et <b>
…</b>
pour le gras (bold) à la place de em
et strong
. Dans l'absolu, cela revient à faire de la mise en forme et non de la description de texte : c'est déconseillé. Dans la pratique, si cela ne change pas grand chose pour un rendu graphique (sauf si la feuille de style ou le rendu du navigateur en décide autrement), cela pose un problème d'accessibilité : s'il possible pur un lecteur d'interpréter une mise en emphase (par exemple en changeant le ton de la voix), il est en revanche impossible de rendre une variation de mise en forme.
- Exemple
<p> Selon Boileau : <blockquote> Vingt fois sur le métier remettez votre ouvrage </blockquote> bref, <em>ne vous découragez pas !</em> <strong>Soyez patient !</strong> </p>
- ce qui donne
Selon Boileau :
Vingt fois sur le métier remettez votre ouvrage
bref, ne vous découragez pas ! Soyez patient !
Voici quelques autres styles de texte :
Style | Balise | Mnémotechnique | Rendu par défaut |
---|---|---|---|
saisie clavier | <kbd> …</kbd>
|
keyboard (clavier) | idem <code>
|
abréviation | <abbr> …</abbr>
|
abbreviation | souligné par un trait pointillé |
acronyme | <acronym> …</acronym>
|
… | idem abbr
|
- Note
- En français, un acronyme est lexicalisé, c'est-à-dire prononcé comme un mot (comme laser, ovni), alors que dans un sigle, les lettres sont prononcées séparément (SNCF). En anglais, langue de référence du HTML, la définition est plus floue : certains distinguent les termes initialism (sigle) et acronym (sigle lexicalisé, même sens qu'en français), alors que pour d'autre acronym désigne un sigle qu'il soit lexicalisé ou non (voir l'article du Wikipédia anglophone Acronym). Dans la pratique, il n'y a pas de différence dans le traitement de
<abbr>
et de<acronym>
, cette dernière disparaît d'ailleurs du XHTML 2.
Même lorsqu'ils ne modifient pas la mise en forme, les balises abbr
et acronym
sont utiles pour les analyseurs syntaxiques (parsers) et les correcteurs d'orthographe. Ils sont surtout utiles avec le paramètre title
(titre), qui permet d'expliciter l'abréviation ; en général, le titre s'affiche dans une info-bulle.
- Exemple
Les pages Web sont écrites en <acronym title="Hypertext Markup Language">HTML</acronym>.
- donne
Les pages Web sont écrites en HTML
Paramètres
Pour les balises de citation (<q>
et <blockquote>
), on peut indiquer la source, avec le paramètre cite
suivi de l'adresse réticulaire.
- Exemple
Selon le site Alsacréations, <q cite="http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-un-div-et-un-calque"> cet abus de langage est malheureusement demeuré très ancré et induit de nombreux amalgames. </q>>
Balises de mise en forme
Avant le CSS, la modification de la police était déjà une préoccupation, le W3C a donc créé des balises permettant ces modifications — donc de la mise en forme —, on peut donc toujours trouver de telles balise dans du code ou des ouvrages. Les balises sont donc données à titre d'information, mais elles devraient être proscrites au profit du CSS.
Style | Balise | Mnémotechnique |
---|---|---|
affichage écran (idem code source) | <tt> …</tt>
|
teletype (terminal) |
italique | <i> …</i>
|
italic |
gras | <b> …</b>
|
bold (gras) |
grandes lettres | <big> …</big>
|
(grand) |
petites lettres | <small> …</small>
|
(petit) |
texte barré | <strike> …</strike> ou <s> …</s>
|
(barré) |
texte souligné | <u> …</u>
|
underligned (souligné) |
On peut également modifier :
- la taille de la police :
<font size="taille">
…</font>
, ou taille est un nombre absolu en unité arbitraire (la taille normale est 3), ou un nombre relatif (+1
pour la taille courante augmentée de 1,-2
pour la taille courante diminuée de 2) ; - la nature de la police :
<font face="nom de la police">
…</font>
.
On peut combiner les deux, par exemple <font size="12" face="Times New Roman">
…</font>
Ces balises sont maintenant déconseillées. On peut utiliser le CSS :
- italique :
<span style="font-style:italic">…</span>
- gras :
<span style="font-weight:bold">…</span>
- lettres plus grandes de 10 % :
<span style="font-size:1.1em">…</span>
- lettres plus petites de 10 % :
<span style="font-size:0.9em">…</span>
- souligner :
<span style="text-decoration:underline">…</span>
- barrer :
<span style="text-decoration:linethrough">…</span>
- type de police :
<span style="font-family:"Times New Roman" ">…</span>
mais il vaut mieux définir des styles dans un fichier à part et faire appel à ces styles (ce qui simplifie la maintenance des fichiers), par exemple, mettre dans le fichier CSS :
.italique {font-style:italic} .gras {font-weight:bold} .grand {font-size:1.1em} .petit {font-size:0.9em} .souligner {text-decoration:underline} .barrer {text-decoration:linethrough}
ce qui s'exploite dans le fichier HTML de la manière suivante :
<p> Du texte <span class="italique">en italique</span>, <span class="gras">en gras</span>, en <span class="grand">grandes</span> ou <span class="petit">petites</span> lettres, <span class="souligner">souligné</span> ou <span class="barrer">barré</span>. </p>
- Pour plus de détails voir : Programmation CSS/Texte.