Adornando el Texto

Contenido del Capítulo:

• Adornando el texto
  • Negrita <b>
  • Cursiva <i>
  • Subrayado <u>
  • Tachado <s>
  • Teletipo <tt>
  • Grande <big>
  • Pequeño <small>
  • Superíndice <sup>
  • Subíndice <sub>
  • Centrado <center>
  • Línea Horizontal <hr>
  • Parpadeo <blink>

[Arriba]

Adornando el texto

Ahora que sabemos cómo se mete texto en la página vamos a darle algunos efectos interesantes como la negrita, cursiva, subrayado...

Negrita

Con las etiquetas <b> y </b> se consigue poner el texto en negrita (bold). Se recomienda no usar esta etiqueta con bloques de texto muy grandes porque puede dificultar su lectura. Este el el efecto que se consigue:

<b>Negrita</b> -> Negrita

Existe otra etiqueta <strong> que es similar y que veremos más adelante.

Cursiva

Para mostrar un texto en cursiva:

<i>Cursiva</i> -> Cursiva

Hay otras posibilidades <cite> y <em> que veremos más adelante.

Subrayado

Para tener un texto subrayado usamos la etiqueta <u> (underline):

<u>Subrayado</u> -> Subrayado

Algunos navegadores no muestran esta etiqueta porque puede confundirse con los enlaces (que también aparecen subrayados). No se recomienda su uso, en su lugar es mejor usar <i>, o <em> o <cite>.

Tachado

Para el texto tachado se usa la etiqueta <strike> (strikeout):

<strike>Tachado</strike> -> Tachado

Puede no estar implementada en todos los navegadores.

Teletipo

Se puede mostrar el texto como si fuese escrito por una máquina de escribir usando la etiqueta <tt> (TeleType):

Con esta etiqueta el texto no sale preformateado como con pre, se eliminan los espacios adicionales.

Grande

Con las etiquetas <big> y</big> el texto aparece con un tamaño mayor al normal.

<big>Grande</big> -> Grande

Se pueden encadenar varios <big> pero no se asegura que el texto sea más grande que uno solo. Mira este ejemplo para comprobar si funciona en tu navegador:

Con un big -> Grande
Con 3 big -> Grande

Se puede usar también las etiquetas <font size="+1"> y </font>.

Pequeño

Es lo opuesto a la etiqueta big, con esta tenemos un texto más pequeño de lo normal:

<small>Pequeño</small> -> Pequeño

Al igual que con big, se pueden encadenar varios small.

Superíndice

Si usamos fórmulas matemáticas esta etiqueta es muy interesante. Muestra el texto más elevado que lo normal y con letra más pequeña. No está implementado en todos los navagadores así que sería bueno asegurarse de que el texto se entiende aunque no funcione la etiqueta.

<sup>Superíndice</sup> -> NormalSuperíndice

Subíndice

Similar a la anterior pero el texto aparece más bajo de lo normal.

<sub>Subíndice</sub> -> NormalSubíndice

Centrado

Esta etiqueta centra el texto y además introduce un salto de línea antes y después. Se puede usar también <p align=center">. para centrar texto.

Con <center>Centrado</center> se tiene: 
Centrado

Línea Horizontal

Para dibujar una línea horizontal usamos la etiqueta <hr>. Esta es otra de las etiquetas sin compañera.

Con <hr> se tiene una línea horizontal

Esta etiqueta tiene una serie de opciones:

• ALIGN=left|right|center : Para poner la etiqueta a la izda, centrada o a la derecha.
• NOSHADE : Para dibujar la etiqueta sin sombra.
• SIZE=n : Especifica la altura (o grosor) de la etiqueta.
• WIDTH=n|p% : Especifica la anchura de la etiqueta en pixels (en puntos) o en tanto por ciento respecto a la anchura de la pantalla.

Ejemplos:

Con <hr noshade> 


Con <hr widht="30%"> 

Parpadeo

Esta etiqueta produce un texto parpadeante. No está implementada en todos los navegadores (creo que sólo está en el navigator). No se recomienda su uso, es MUY incómodo leer páginas con texto parpadeante. Si en tu navegador no funciona te puedes considerar afortunado:

<blink>Parpadeo</blink> -> Parpadeo