Texto en HTML (VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Centrado de textos.-

La etiqueta usada habitualmente para centrar un texto (o un bloque formado por textos, imagenes, etc) ha sido <CENTER>...</CENTER>, que centra en pantalla todos aquellos elementos HTML incluidos entre ellas. Ejemplo:

<CENTER>este texto esta centrado<CENTER>

que nos da:

Pero esta etiqueta se encuentra ya en la lista negra del W3C, lo que significa que en próximas versiones de HTML sera borrada del estandar, por lo que conviene abandonar su uso a favor de las etiquetas:

<DIV ALIGN="center">...</DIV>

<P ALIGN="center">...</P>

siendo la primera opción la mas aconsejada.

Cabeceras.-

Las cabeceras se utilizan en HTML para poner títulos a las páginas. Estos títulos son muy útiles en las páginas que poseen mucho texto, al igual que ocurre en el mundo tipografico, del que el diseño en HTML hereda muchas de sus características, pués nos van a permitir, mediante el uso de diferentes tamaños en los títulos, dividir un documento en secciones mediante una jerarquía de títulos que van a destacar las diferentes importancias de los bloque de texto que van a formar el documento completo.

Para introducir cabeceras en HTML se utiliza la pareja de etiquetas <Hn>...</Hn>, donde n es un número entero que va desde 1 a 6 según la importancia relativa del cabecero, correspondiento el tamaño estandar al tamaño 3.

Esta son etiquetas que pertenecen al estilo lógico, y presenta el texto incluido entre ellas en negrita, creando ademas un salto de línea doble entre la cabecera y el texto que le rodea en el documento.

La presentación de cada uno de los tamaños es la que sigue:

cabecera H1

cabecera H2

cabecera H3

cabecera H4

cabecera H5

cabecera H6

La etiqueta Hn admite los mismos atributos que la etiqueta <P>, a saber, ALIGN, TITLE, STYLE, CLASS e ID.

Líneas horizontales.-

Otra de las formas de que disponemos en HTML para crear separaciones entre textos (o bloques del documento en general) es la utilización de líneas horizontales, lo que se consigue con el uso de la pareja de etiquetas <HR>...</HR>, (del ingés Horizontal Rules), que origina en el documento una línea horizontal embutida en el fondo del mismo. La etiqueta HR no precisa etiqueta de cierre, pero por lo que ya hemos explicado antes es siempre conveniente ponerla siempre.

La etiqueta HR admite los siguientes atributos:

• <HR WIDTH="anchura"></HR>, donde el valor de la anchura puede venir expresado mediante un número entero, que representa una longitud en pixels (valor absoluto) o mediante un tanto por ciento, p.ej. 40%, que representa la porción que va a ocupar la línea del ancho total de la pantalla del navegador (tamaño relativo). El valor por defecto es el 100%, es decir, si no especificamos ancho para la línea horizontal esta ocupara todo el ancho de la pantalla. Ejemplos:
  
  <HR WIDTH="200"></HR>
  <HR WIDTH="50%"></HR>
  
  que nos dan:
  

  ---

  ---

  
  
• <HR ALIGN= " left / center /right"></HR>, que en el caso de que el ancho no sea todo el de la pantalla alineara la línea horizontal a la izquierda, la centrara en pantalla (valor por defecto) o la alineara a la derecha de esta. Ejemplos:
  
  <HR ALIGN="left" WIDTH="300"></HR>
  <HR ALIGN="center" WIDTH="30%"></HR>
  <HR ALIGN="right" WIDTH="150"></HR>
  
  que nos da:
  
  

  ---

  ---

  ---

  
  
• <HR COLOR="color"></HR>, que nos va a permitir definir el color de la línea horizontal, y en donde el color puede venir definido por su valor hexadecimal o por su nombre web estandar. El valor por defecto es el que por defecto tengamos configurado en nuestro PC. Ejemplos:
  
  <HR WIDTH="300" COLOR="red"></HR>
  <HR WIDTH="300" ALIGN="LEFT" COLOR="#003366"></HR>
  
  que nos dan:
  
  

  ---

  ---

  
  
• <HR NOSHADE></HR>. Por defecto la línea se nos va a presentar con un efecto de sombra tridimensional. Mediante este atributo podemos evitar este efecto, presentandose entonces la línea con forma de dibujo plano, sin sombras ni efectos tridimensionales. Generalmente, si asignamos un color determinado a la línea horizontal se elimina este efecto automaticamente. Ejemplos:
  
  <HR WIDTH="300"></HR>
  <HR WIDTH="300" NOSHADE></HR>
  
  que nos dan:
  
  

  ---

  ---

  
  
• <HR SIZE="número"></HR>, que nos permite definir la altura o espesor de la línea horizontal. Su valor por defecto suele equivaler al un tamaño SIZE="2". Ejemplos:
  
  <HR WIDTH="300" SIZE="1" COLOR="red"></HR>
  <HR WIDTH="300" SIZE="6" COLOR="red"></HR>
  
  que nos dan:
  
  

  ---

  ---

  
  
• <HR TITLE="texto></HR>, que asigna un texto identificativo a la línea, que aparece en forma de "bocadillo" al situar el cursor sobre ella.
  
  
• <HR STYLE="estilo" / CLASS="clase" / ID="identificador"></HR>, para asignar estilos propios a la línea horizontal (ver tema de Hojas de Estilo en Cascada aplicadas al formateo de texto)

Saltos de línea, líneas en blanco y espacios.-

Otra de las herramientas de que disponemos a la hora de dar formato al texto de nuestra página es el uso de saltos de línea y líneas en blanco.

Para obtener en HTML un salto de línea simple podemos usar la etiqueta <BR>, (break=romper), que no posee etiqueta pareja de cierre. Por ejemplo, con:

Esta es una línea de texto.<BR>Y esta es la siguiente.

obtendremos:

Esta es una línea de texto.
Y esta es la siguiente.

Y para conseguir un salto de línea doble (con línea vacía en medio) podemos usar la combinación de dos etiquetas <BR> Ejemplo:

Esta es una línea de texto.<BR><BR>Y esta es la siguiente.

que nos da:

Esta es una línea de texto.

Y esta es la siguiente.

En cuanto a la introducción de espacios en blanco en nuestro texto, recordemos que en HTML los espacios en blanco obtenidos mediante el uso de la barra espaciadora o el tabulador no son tenidos en cuenta, por lo que para conseguir este efecto deberemos recurrir al caracter &nbsp;, (non breaking space = no romper espacio), que introduce cada uno de ellos un espacio en blanco que sí es representado por el navegador. Ejemplo:

vamos&nbsp;al&nbsp;cine

nos dara:

vamos al cine.

Ademas, con el uso de estos caracteres especiales podemos evitar que una línea se parta por llegar al fin del ancho de la pantalla, forzando a seguir el texto en la misma línea.

Conviene aquí matizar que al usar editores HTML como HomeSite, Dreamweaver, etc., podemos escribir el texto de nuestra página como si se tratase un editor de textos normal, sin necesidad de ir poniendo caracteres &nbsp; a cada momento; pero esto es debido a que el editor va convirtiendo automaticamente estos espacios metidos con la barra espaciadora en caracteres &nbsp;. Pero podemos tener problemas por ejemplo al utilizar una tabla en la que alguna de las celdas debe estar vacía, sin contenido, ya que si no colocamos en su interior en espacio en blanco (o una imagen), definido por un caracter &nbsp;, Nestcape Navigator 4x pintara mal esa celda, causandonos en la mayoría de los casos efectos de diseño no deseados.