4. Format del text

Podem donar format al text inserint les etiquetes que necessitem a principi i fi de la paraula, de les paraules, de la frase, del paràgraf, etc.

Per donar format negreta i ressaltar la importància d'un text, podem fer servir l'etiqueta: <strong></strong>. Aquesta opció la trobareu a totes les barres d'eines dels editors. També existeix l'etiqueta <b></b>, que aconsegueix el mateix efecte visual, però no es recomana el seu ús, ja que els lectors de pantalla no detecten l'èmfasi estructural i la importància del text que sí proporciona l'etiqueta <strong></strong>.

<p><strong>Text amb negreta i important</strong> (fent servir l'etiqueta <strong></strong>)</p>
<p><b>Text amb negreta</b> (fent servir l'etiqueta <b></b>)</p>

Text amb negreta i important (fent servir l'etiqueta <strong></strong>)

Text amb negreta (fent servir l'etiqueta <b></b>)

Per donar format cursiva, podem fer servir l'etiqueta: <em></em>. Aquesta opció la trobareu a totes les barres d'eines dels editors. També existeix l'etiqueta <i></i>, que aconsegueix el mateix efecte visual, però no es recomana el seu ús, ja que els lectors de pantalla no detecten l'èmfasi del text que sí proporciona l'etiqueta <em></em>.

<p><em>Text amb cursiva i emfatitzat</em> (fent servir l'etiqueta <em></em>)</p>
<p><i>Text amb cursiva</i> (fent servir l'etiqueta <i></i>)</p>

Text amb cursiva i emfatitzat (fent servir l'etiqueta <em></em>)

Text amb cursiva (fent servir l'etiqueta <i></i>)

Per donar format marcat i donar rellevància a un text, podem fer servir l'etiqueta: <mark></mark>. Aquesta opció, normalment, no la trobareu a les barres d'eines dels editors. Si la trobau, només aplica un estil visual que posa el fons del text de color groc, però els lectors de pantalla no detecten l'èmfasi del text que sí proporciona l'etiqueta <mark></mark>.

<p><mark>Text marcat</mark> (els editors no ho fan servir, posen color de fons)</p>

Text marcat (els editors no ho fan servir, posen color de fons)

Per donar format petit, podem fer servir l'etiqueta: <small></small>. Aquesta opció no la trobareu a les barres d'eines dels editors. El que podem fer és posar una mida de lletra més petita.

<p><small>Text petit</small> (els editors no ho fan servir, es pot canviar el tamany de la lletra)</p>

Text petit (els editors no ho fan servir, es pot canviar el tamany de la lletra)

Per donar format ratllat o eliminat, podem fer servir l'etiqueta: <del></del>. Aquesta opció, normalment, no la trobareu a les barres d'eines dels editors. També existeixen les etiquetes <span></span> (amb estils) i <s></s>, que poden aconseguir el mateix efecte visual. Si utilitzau l'etiqueta <span> amb estils (paràmetre style que ja hem vist anteriorment), podeu fer servir el codi <span style="text-decoration: line-through;">Text a mostrar...</span>.

Només es recomana l'ús de l'etiqueta <del></del>, ja que els lectors de pantalla detecten l'èmfasi del text que proporciona aquesta etiqueta, no sent així amb les etiquetes <span></span> i <s></s>.

IMPORTANT: més endavant veureu que l'etiqueta <span> es pot fer servir per donar-hi més tipus de formats a seccions de text.

<p><del>Text eliminat</del> (els editors de text no tenen aquest format)</p>
<p><span style="text-decoration: line-through;">Text ratllat</span> (editor TinyMCE d'eXeLearning)</p>
<p><s>Text ratllat</s> (editor Atto de Moodle)</p>

Text eliminat (els editors de text no tenen aquest format)

Text ratllat (editor TinyMCE d'eXeLearning)

Text ratllat (editor Atto de Moodle)

Per donar format subratllat, podem fer servir l'etiqueta: <ins></ins>. Aquesta opció, normalment, no la trobareu a les barres d'eines dels editors. També existeixen les etiquetes <span></span> (amb estils) i <u></u>, que poden aconseguir el mateix efecte visual. Si utilitzau l'etiqueta <span> amb estils, podeu fer servir el codi <span style="text-decoration: underline;">Text a mostrar...</span>. Només es recomana l'ús de l'etiqueta <ins></ins>, ja que els lectors de pantalla detecten l'èmfasi del text que hi proporciona aquesta etiqueta, no sent així amb les etiquetes <span></span> i <u></u>.

<p><ins>Text inserit</ins> (els editors de text no tenen aquest format)</p>
<p><span style="text-decoration: underline;">Text subratllat</span> (editor TinyMCE d'eXeLearning)</p>
<p><u>Text subratllat</u> (editor Atto de Moodle)</p>

Text inserit (els editors de text no tenen aquest format)

Text subratllat (editor TinyMCE d'eXeLearning)

Text subratllat (editor Atto de Moodle)

Per donar format ^superior, podem fer servir l'etiqueta: . Aquesta opció la trobareu a totes les barres d'eines dels editors.

Per donar format _inferior, podem fer servir l'etiqueta: . Aquesta opció la trobareu a totes les barres d'eines dels editors.

<p>Superior <sup>2</sup> (editor TinyMCE d'eXeLearning) (editor Atto de Moodle)</p>
<p>Inferior <sub>2</sub> (editor TinyMCE d'eXeLearning) (editor Atto de Moodle)</p>

Superior ² (editor TinyMCE d'eXeLearning) (editor Atto de Moodle)

Inferior ₂ (editor TinyMCE d'eXeLearning) (editor Atto de Moodle)

Per donar format de Versaletes (lletres majúscules, però que diferencien les lletres capitals com podeu veure), podem fer servir l'etiqueta <span> (amb estils). Així, per indicar que un text ha d'estar en versaletes, escriurem l'etiqueta span seguida del paràmetre style i el valor que pertoqui. En aquest cas el codi serà <span style="font-variant: small-caps;">Text a mostrar...</span>. Aquesta opció no la trobareu a les barres d'eines dels editors. Heu de tenir en compte, que aquest format només donarà un efecte visual que els lectors de pantalla no detectaran, a no ser que inclogueu el paràmetre title, el qual sí que poden reconèixer els lectors de pantalla i llegiran el seu text.

<p><span style="font-variant: small-caps;" title="Text amb format de versaletes">Versaletes</span> (els editors de text no tenen aquest format)</p>

Versaletes (els editors de text no tenen aquest format)