

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.
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. |
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 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. |
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. |
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 como espacios en blanco se desee conseguir.