Formateo de textos

Las etiquetas HTML son códigos que se ponen alrededor de las líneas de texto encapsulandolas con la finalidad de darles cierto aspecto. Su formato tipoco es

<etiqueta> texto afectado </etiqueta>

para indicar al navegador como debe lucir cierta parte del texto.

Lo primero que hay que tener en cuenta, es que al presentar el documento se hará caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente.

Mediante las etiqueta HTML estratégicamente colocados en el texto tu puedes determinar el estilo, tamaño y color que tendrá la presentación del documento final.

Ejemplo de uso:

normal <B>negrita <I>negrita itálica</B> itálica</I> normal.

normal negrita negrita itálica itálica normal.

En HTML se recomienda abandonas la etiqueta <B> y en su lugar usar <STRONG> o CSS.

Texto normal

Lo primero que tenemos es el texto normal, entendiendo como tal el que no tiene ninguna característica especial y está libre para que el asuario lo fomatee a su gusto desde su navegador en el momento de visualizar. Al igual que en cualquier procesador de texto se producirán los saltos de línea necesarios para mantener el texto dentro de la ventana del navegador, dependiendo del ancho de la ventana, tamaño de letra etc.

Para definir un párrafo como normal no es necesario poner ningún etiqueta.

Salto de línea <BR>

Con esta etiqueta fuerzas un salto de línea simple, es decir la siguiente línea empieza en la línea inmediatamente inferior, respetando la misma sangría.
Una recomentacion en las ultimas versiones de HTML, es usar en su lugar <BR />, como un estandar para indicar que esta etiqueta no requiere de cierre.
Si esta etiqueta es añadida al lado de una objeto flotante, como una caja, tabla, imagen, etc puedes añadir el atibute CLEAR= para indicar que la línea deberá saltar hasta encontrar la condición adecuada. Los valores posibles son: left, rigth y all.
<BR CLEAR=left>
busca una línea que tenga libre el margen izquierdo
<BR CLEAR=right>
busca una línea que tenga libre el margen derecho
<BR CLEAR=all>
busca una línea que tenga ambos márgenes libres.
Las recomendaciones de HTML 5 indican evitar usar el atributo CLEAR y reemplazarlo por CSS. Para eso es necesario identificar la etiqueta con el atributo para hacer referencia a ella de manera unica con ID=nombre o multiple con CLASS=nombre.
Si queremos obtener múltiples líneas en blanco no basta con repetir la etiqueta <P>, sino que hay que combinarlo con otro etiqueta, por ejemplo con <BR>. Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos poner:

<BR><P><BR><P><BR><P><BR><P>

No producir saltos <NOBR>

Este etiqueta es usado para obligar al navegador a no producir saltos, a pesar de que corresponda, es decir si el texto es largo se saldrá por el lado derecho y será necesario usar la barra de desplazamiento horizontal del visualizador para leerlo.

Añadir espacios &nbsp;

Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos usar la etiqueta &nbsp; (non-breaking space).

Tabulación horizontal <TAB>

la etiqueta TAB es usado cuando se quiere un control fino posible la posición horizontal. Para definir el tabulador solo hay que poner la etiqueta <:TAB ID=nombre> en el sitio correcto como si fuera un TABulador y luego con la etiqueta <TAB TO=nombre> puedes llegar a ese sitio.

Ejemplo: <TAB ID=t1> <TAB TO=t1> sería la forma de llegar a ese mismo punto.
Es fácil y todo queda alineado donde tú quieres. No se te desarregla nada...

Cada marca de TAB debe ser única en el documento, su nombre debe comenzar con una letra y puede estar seguido de letras y números. Una vez definido el TAB será válido para el resto del documento.

Otra manera de usarlo es <TAB INDENT=n> donde n es medio punto tipográfico.
También se puede hacer alineamientos:

<TAB ALIGN=left>
El texto hasta la próxima marca <TAB>, <BR> o <P> quedará alineado a la izquierda (default).
<TAB ALIGN=center>
Centrado respecto a la marca TAB.
<TAB ALIGN=right>
Alineado a la derecha de la marca TAB o si no se puso el parámetro TO alineado respecto al margen derecho de la página.
<TAB ALIGN=decimal>
Alineado respecto al separador decimal que por omisión es el . pero puedes cambiarlo con el atributo DP=, por ejemplo.
Si el alineamiento especificado causa un traslape de texto, para evitarlo el navegador tratará el TAB como un simple caracter de espacio.

Texto formateado

Etiqueta eliminada en HTM5, ya no usar.

En su lugar puedes usar CSS. Con CSS 3 ya no es necesaria usar esta etiqueta, porque se puede hacer los mismo con los atributos: Font y Text.

Ver mas en Hojas de estilo CSS

Hay dos estilos de etiquetas HTML para formateo de texto:
Relativos:
Los cuales dependen de las especificaciones que cada usuario tenga en su navegador y la resolucion de pantalla que este usando. Normalmente estan especificados en %.
Absolutos:
Que son directos, osea obligan al navegador a funcionar de cierta manera, por lo que están siendo cada vez menos usados y es posible que en próximas recomendaciones HTML sean retirados. Normalmente especificado en px, pt, cm o in.
Cada uno de estas etiquetas es usado para formatear texto, es decir para indicarle al navegador como deberá mostrar el texto encerrado entre los etiquetas. Los etiquetas son interpretados de izquierda a derecha y pueden solaparse, por ejemplo:

normal <B>negrita <I>negrita-itálica</B> itálica</I> normal.

normal negrita negrita-itálica itálica normal.

1. Tamaño de letra base <BASEFONT SIZE...>

Este etiqueta cambia el tamaño de la letra base, que afecta a todos los etiqueta <FONT SIZE...> relativos. Por default se usa 3 y el rango de valores permitidos van de 1 a 7.

Sintáxis: <BASEFONT SIZE=n>

2. Estilo de letra <FONT>

Con este etiqueta genérico se gobierna los estilos de texto osea: tipos, tamaños y colores de texto, usando una serie de parámetros, como:

2.1 Tamaño de letra - SIZE

Mediante este parámetro se puede variar el tamaño de las letras a cierto texto en particular. Por default está en 3 y es determinado por la etiqueta <BASEFONT SIZE...>. Se permiten valores desde 1 a 7. También es posible hacer referencias relativas usando el símbolo + o - delante del valor especificado.

Esto está en el tamaño 1
Esto está en <BASEFONT SIZE ...> + 2

Ejemplos: 123 456 765 432 1

2.2 Colores de letras - COLOR

Mediante este parámetro es posible cambiar el color a cierta porción del texto. Se puede especificar la trica rrggbb en hexadecimal o usar uno de los 16 colores predefinidos:

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.

Ejemplos: FONT COLO RS

Estos colores predefinidos también los puedes usar en los atributos BGCOLOR, TEXT, LINK, y VLINK en <BODY>. Una buena ayuda para la selección de colores con "#rrggbb" la puedes encontrar en: Tabla de Colores

2.3 Tipos de letra - FACE

Con este atributo se pueden definir el tipo de letra en el que será mostrado cierta porción de texto en el documento. El tipo de letra deberá estar instalado previamente en el Windows del cliente para ser mostrada, por lo que es posible especificar tipos alternativos en un mismo etiqueta. Si no tiene ninguno de los tipos especificados se mostrará en el texto por omisión, que es tipo Times New Roman.

Sintáxis: FACE=nombre [,nombre] [,nombre]

Este texto será mostrado en ARIAL y si no tiene el cliente ese tipo de letra usará LUCIDA SANS o TIMES ROMAN, según el tipo de letra instalado en el Win del cliente.

Ejemplos:

3. Estilo de títulos <Hx>

Es un conjunto de formatos que incluyen: atributo de letras (negrita, itálica), tamaño (muy grande, grande, normal) y además añade un fin de párrafo, es decir obliga un salto dejando una línea en blanco.

Típicamente se definen 6 niveles de tíitulo, así:

Esto es <H1>

Negrita, letra muy grande, centrada. Una o dos líneas en blanco sobre y bajo el título.

Esto es <H2>

Negrita, letra grande, flush-left. Una o dos líneas en blanco sobre y bajo el título.

Esto es <H3>

Itálica, letra grande, ligeramente indentado desde el margen izquierdo. Una o dos líneas en blanco sobre y bajo el título.

Esto es <H4>

Negrita, letra normal, mayor indentación que H3. Una línea en blanco sobre y otra bajo el título.
Esto es <H5>
Itálica, letra normal, indentado como H4. Una línea en blanco sobre el título.
Esto es <H6>
Negrita, indentado igual que el texto normal, más que H5. Una línea en blanco sobre el título.

Además es posible asignar el parámetro ALIGN= que puede tomar los valores left, center o right.

4. Otros

EtiquetaMuestra
<B>Esto está en negrita
<STRONG>Esta letra es gruesa
<I>Itálica
<EM>Esto está enfatizado
<U>Subrayado
<S>Tachado
<STRIKE>Tachado
<SUB>H2O
<SUP>a2=b2+c2
<BIG>Letra grande
<SMALL>Letra pequeña
<Q>Esto está entre comillas
<BLINK>Texto parpadeante. Usar CSS.
<VAR>Para mostrar una variable
<ABBR>Para mostrar una abreviatura o acronismo
<ACRONYM>Para mostrar una abreviatura o acronismo

5. Centrar objetos <CENTER>

Usado para centrar cualquier cosa entre los márgenes izquierdo y derecho. Este etiqueta es muy poco usado ya que muchos etiquetas como P, Hx, HR, etc tiene un atributo de alineado. Sin embargo es la única forma de centrar con otros etiquetas como: IMG y TABLE.

Este texto está centrado

Ahora se debe usar CSS.

6. Línea horizontal <HR>

Define una línea horizontal del ancho de la página. Por omision es de un grosor de 1 px y color gris.

Este etiqueta causa un fin de párrafo, es decir obliga un salto a la próxima línea.

WIDTH=número|porcent%. Largo en pixels o % de ancho pantalla
SIZE=número. Grosor de la línea en pixels
ALIGN=left|right|center (omisión). Posición de la línea respecto a los márgenes.
COLOR=color|#rrggbb. Color de la línea
NOSHADE Sin sombra

Ejemplo 1:

<HR>


Ejemplo 2:
<HR WIDTH=80%>


Ejemplo 3:
<HR WIDTH=80% SIZE=12 ALIGN=right COLOR=red>


Ejemplo 4:
<HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy NOSHADE>


Notas finales:

Es importante mencionar que los etiquetas HTML no diferencian mayúsculas y minúsculas, osea que puedes escribir los etiquetas y parámetros con cualquiera o con una mezcla de ambas, si lo prefieres.

Si un navegador no puede interpretar un etiqueta y/o parámetro, simplemente lo ignora, es decir no produce ningún tipo de error.

Asimismo las líneas en blanco y los espacios son ignoradas por los navegadores, por lo tanto, para dejar una línea en blanco debes usar <P>.

También quiero hacerte notar que no todos los navegadores presentan de la misma forma las páginas y la única manera de ver realmente el resultado es probando. Por ejemplo algunos solapes de etiquetas no funciona en todos los navegadores y en otros sí, por lo que te recomiendo evitar hacerlo en lo posible, unos ejemplos:

<H1><A HREF="...">...</A></H1> -->funciona
<A HREF="..."><H1>...</H1></A> --> no funciona

<LI><B>... --> funciona
<LI><H1>...</H1> --> no funciona
<H1><LI>...</H1> --> no funciona