5.1 - Espaciados y saltos de línea

El espaciado en HTML

     En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el resto se omiten en la representación del documento. En el documento fuente podremos usar el espaciado que deseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetas HTML.

     Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. A continuación se detallará cada una de ellas.

<P> Cambio de párrafo :

     Definirá un párrafo, se usará al comienzo o al final de un párrafo de texto e introducirá un espaciado de separación (normalmente dos líneas) con el próximo texto que se exprese. Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servirá para separar texto.

     El efecto se conseguirá introduciendo la etiqueta <P> en el punto en el que deseemos que se produzca el espaciado. La etiqueta de fin de párrafo </P> es opcional no siendo necesario incluirla.

     Existen elementos HTML que ya introducen separaciones de líneas, tanto antes como despues, por tanto en estos casos no es necesario, pero sí posible, introducir el elemento de nuevo párrafo. No es necesario utilizar esta etiqueta ni antes ni después de cabeceras <Hn>, después de <HR> (reglas horizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>. Tampoco es necesario dentro de listas tras los elementos <LI>, <DT> ni <DD>, que se utilizan para separar los distintos elementos de una lista.

Ejemplo
Inst.
HTML
Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.
Resul
tado
Esta es una frase que forma un parrafo.

Este es el otro parrafo.

Explica
ción
En el punto donde se ha introducido la instrucción HTML de nuevo parrafo se observa una separación de dos líneas.

<BR> Salto de línea :

     Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a la línea siguiente, sin dejar una línea de separación. En este caso será un cambio de línea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implícitos un salto de línea, ni tampoco es necesaria la etiqueta de fin </BR>.

Ejemplo
Inst.
HTML
Esta es una frase de la primera línea.<BR>Esta es la siguiente línea
Resul
tado
Esta es una frase de la primera línea.
Esta es la siguiente línea
Explica
ción
En el punto donde se ha introducido la instrucción HTML de nueva línea se observa el cambio de línea.

<HR> Regla Horizontal :

<HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n>

     Se usa para dividir un documento en distintas secciones, mostrará una línea horizontal de tamaño determinable. Se asemejará al salto de página dentro de un documento.

     Si no se especifican atributos dibujará una línea que ocupe el ancho de la pantalla del navegador y introduciendo una separación con el texto anterior y siguiente, equivalente a cambio de párrafo. No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamaño, esto atributos son:

     Indicará la forma en la que se alineará la regla en el caso de no ocupar todo el ancho de la pantalla del navegador, a la izquierda, derecha o centrada.

     No muestra la sombra de la barra, evitando el efecto en tres dimensiones.

     Indicará la altura de la regla en puntos de la pantalla.

Especificará el ancho de la regla, se puede especificar en tanto por ciento del ancho de la ventana <HR WIDTH=50%> o en valor absoluto <HR WIDTH=75> en puntos de la pantalla.

Ejemplos
Inst.
HTML
<HR>
Resul
tado

Explica
ción
Mostrará un línea que ocupa todo el ancho disponible y de altura 1 con sombra.
Inst.
HTML
<HR SIZE=5 NOSHADE>
Resul
tado

Explica
ción
Mostrará un línea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni efecto dimensional.
Inst.
HTML
<HR SIZE=5 WIDTH=50% ALIGN=LEFT>
Resul
tado

Explica
ción
Mostrará un línea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto y está alineada a la izquierda.

<PRE> Texto preformateado :

     Muestra un porción de texto en el que se respetan los saltos de línea, tabuladores y espacios en blanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostrará tal y como se expresa en el fuente del documento html. Para mostrar este texto se utiliza una fuente de espaciado fijo más pequeña que el texto normal.

     Presenta un problema cuando la línea es demasiado larga, ya que no la corta el navegador y se mostraría tal y como aparece en el fichero fuente. No se recomienda como forma rápida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentación.

     Dentro de la etiqueta PRE no tendrán validez la mayoría de las instrucciones HTML, solo se podrán utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.

Ejemplo
Inst.
HTML
<PRE>Este texto    se verá
tal y como se
escribió. </PRE>
Resul
tado
Este texto    se verá
tal y como se
escribió.
Explica
ción
Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan los espacios en blanco y los saltos de línea de la instrucción original.

<CENTER> Centrado de texto e imágenes :

     Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas, etc ...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador.

Ejemplo
Inst.
HTML
<CENTER> Este texto se verá centrado </CENTER>
Resul
tado
Este texto se verá centrado
Explica
ción
El texto aparece centrado en el navegador. Se puede utilizar tanto para una línea como para un párrafo, y para cualquiera de la instrucciones del lenguaje HTML.
Inst.
HTML
<CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </CENTER>
Resul
tado
El texto y la imagen se centran
Explica
ción
Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML.

&nbsp; Espacios en blanco :

     Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de forma efectiva, pudiendo mostrar más de un espacio en blanco de separación. Se incluirán tantas expresiones &nbsp; como espacios en blanco se desee conseguir.