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.
| Negreta |
Per donar format negreta, podem fer servir dues etiquetes: <b></b> i <strong></strong>. Feim servir, preferentment, <b></b>, ja que és més curta. Aquesta opció la trobareu a totes les barres d'eines dels editors.
IMPORTANT: no tots els editors, a les barres d'eines, fan servir les mateixes etiquetes per aplicar un format determinat.
| Codi HTML |
<p><b>Text amb negreta</b> (editor Atto de Moodle)</p>
<p><strong>Text important</strong> (editor TinyMCE d'eXeLearning)</p>| Visualitzat en el navegador |
Text amb negreta (editor Atto de Moodle)
Text important (editor TinyMCE d'eXeLearning)
| Cursiva |
Per donar format cursiva, podem fer servir dues etiquetes: <i></i> i <em></em>. Feim servir, preferentment, <i></i>, ja que és més curta. Aquesta opció la trobareu a totes les barres d'eines dels editors.
| Codi HTML |
<p><i>Text amb cursiva</i> (editor Atto de Moodle)</p>
<p><em>Text emfatitzat</em> (editor TinyMCE d'eXeLearning)</p>| Visualitzat en el navegador |
Text amb cursiva (editor Atto de Moodle)
Text emfatitzat (editor TinyMCE d'eXeLearning)
| Marcat |
Per donar format marcat, podem fer servir l'etiqueta: <mark></mark>. Aquesta opció no la trobareu a les barres d'eines dels editors. El que podem fer és posar un color groc de fons: aconseguirem el mateix efecte.
| Codi HTML |
<p><mark>Text marcat</mark> (els editors no ho fan servir, posem color de fons)</p>| Visualitzat en el navegador |
Text marcat (els editors no ho fan servir, posem color de fons)
| Format gran i format petit |
Per donar format gran, podem fer servir l'etiqueta: <big></big>. Aquesta opció no la trobareu a les barres d'eines dels editors. El que podem fer és posar una mida de lletra més gran. La mida de lletra sol estar expressada amb un número en píxels (px) o punts (pt).
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.
| Codi HTML |
<p><big>Text gran</big> (els editors no ho fan servir, es pot canviar el tamany de la lletra)</p>
<p><small>Text petit</small> (els editors no ho fan servir, es pot canviar el tamany de la lletra)</p>| Visualitzat en el navegador |
Text gran (els editors no ho fan servir, es pot canviar el tamany de la lletra)
Text petit (els editors no ho fan servir, es pot canviar el tamany de la lletra)
| Ratllat |
Per donar format ratllat o eliminat, podem fer servir tres etiquetes: <del></del>, <span></span> i <s></s>. La primera i la darrera etiquetes no se solen utilitzar. Utilitzarem l'etiqueta <span> amb estils (paràmetre styles que ja hem vist anteriorment). Així, per indicar que un text ha d'estar ratllat, escriurem l'etiqueta span seguida del paràmetre style i el valor que pertoqui. En aquest cas el codi serà <span style="text-decoration: line-through;"></span>. Aquesta opció la trobareu a totes les barres d'eines dels editors.
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.
| Codi HTML |
<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>| Visualitzat en el navegador |
Text eliminat (els editors de text no tenen aquest format)
Text ratllat (editor TinyMCE d'eXeLearning)
Text ratllat (editor Atto de Moodle)
| Subratllat |
Per donar format subratllat, podem fer servir tres etiquetes: <ins></ins>, <span></span> i <u></u>. La primera i la darrera etiquetes no se solen utilitzar. Utilitzarem l'etiqueta <span> amb estils. Així, per indicar que un text ha d'estar subratllat, escriurem l'etiqueta span seguida del paràmetre style i el valor que pertoqui. En aquest cas el codi serà <span style="text-decoration: underline;"></span>. Aquesta opció la trobareu a totes les barres d'eines dels editors.
| Codi HTML |
<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>| Visualitzat en el navegador |
Text inserit (els editors de text no tenen aquest format)
Text subratllat (editor TinyMCE d'eXeLearning)
Text subratllat (editor Atto de Moodle)
| Format superior i format inferior |
Per donar format superior, podem fer servir l'etiqueta: <sup></sup>. Aquesta opció la trobareu a totes les barres d'eines dels editors.
Per donar format inferior, podem fer servir l'etiqueta: <sub></sub>. Aquesta opció la trobareu a totes les barres d'eines dels editors.
| Codi HTML |
<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>| Visualitzat en el navegador |
Superior 2 (editor TinyMCE d'eXeLearning) (editor Atto de Moodle)
Inferior 2 (editor TinyMCE d'eXeLearning) (editor Atto de Moodle)
| Versaletes |
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;"></span>. Aquesta opció no la trobareu a les barres d'eines dels editors.
| Codi HTML |
<p><span style="font-variant: small-caps;">Versaletes</span> (els editors de text no tenen aquest format)</p>| Visualitzat en el navegador |
Versaletes (els editors de text no tenen aquest format)