Modos de presentar el texto: el formato general

En el cuerpo de una página HTML ya sabemos que podemos incluir diversos elementos y el más común de ellos es el texto. En este capítulo y en siguiente veremos como incluimos el texto una página HTML. En este trataremos su formato general y en el siguiente su formato con significado especial.

Para comenzar, y sabiendo que los diferentes navegadores tienen comportamientos diferentes, debemos saber que éstos interpretan un cambio de línea como un carácter en blanco y varios caracteres en blanco continuados como un solo carácter en blanco -a excepción de si es un comienzo de línea, en la que los caracteres en blanco son ignorados-. Los cambios de línea se incluyen automáticamente en función del tamaño del a ventana del navegador, teniendo en cuenta que este no corta las palabras. Si hacemos los dos primeros ejercicios que os propongo observareís que los resultados son idénticos al visualizarlos en el navegador.

EJERCICIO 1:

EJERCICIO 2:

El navegador incluirá los cambios de línea en función del dimensionamiento que se le dé a la ventana como podemos ver en el siguiente ejemplo, en el que hemos cambiado la visualización de uno de los anteriores:

Una vez que hemos aclarado este comportamiento del texto vamos a conocer que nos ofrece el HTML como etiquetas para dar formato al texto de una página. Estas etiquetas podríamos clasificarlas en tres grandes grupos: las de formato general, las de formato de texto y las de formato de texto con significado especial. En este capítulo, que será algo extenso, veremos el formato general y en los siguientes capítulos los otros grupos. Comencemos pues con el

FORMATO GENERAL

La pregunta que se nos plantea tras ver lo anterior es ¿podré insertar yo los cambios de línea dónde y cuándo quiera? La respuesta es sí, el HTML nos permitirá incluir cambios de línea dónde deseemos y no solo eso, nos permitirá tambien introducir el texto con un determinado formato.

Para que consigamos estos objetivos el HTML nos brinda las siguientes etiquetas: <br>, <div>, <hr>, <p>, <pre>, <span> y <center>. Como dijimos en capítulos anteriores algunas etiquetas en HTML 4.0 están obsoletas, ese es el caso de la etiqueta <center> que ha sido sustituida por la etiqueta <div> -utilizando el atributo align="center"- o la etiqueta <p> -con el mismo atributo que la anterior-.

Los cambios de línea en una página los haremos fundamentalmente con dos etiquetas: <br> y <p>, la primera incluye un cambio de línea y la segunda un cambio de párrafo. Ambas se diferencian en el tamaño del hueco que mostrará el navegador entre una línea y la siguiente, podríamos decir que la primera produce un cambio de línea sencillo y la segunda un cambio de línea doble. La etiqueta <br> no tiene etiqueta de cierre mientras que la etiqueta <p> si la tiene (</p>) pero es opcional su uso. Con esta última etiqueta (<p>) además podremos indicar la alineación del párrafo utilizando el atributo align con los valores left (izquierda, por defecto), center (centro), rigth (derecha) y justify (justificado).

Otro modo de separar el texto es utilizando la etiqueta <hr> cuyo efecto es similar al de la etiqueta <p> pero introduce una línea horizontal en el hueco de separación. Esta etiqueta no tiene cierre. Podemos controlar la apariencia de la línea con los siguientes atributos: para la alineación align (left, center, rigth, justify), para la altura de la línea size (que se indica normalmente en pixeles), el ancho con width (que podremos indicarlo en pixeles o en un tanto por ciento con respecto al ancho de la ventana del navegador) y la eliminación de la sombra con noshade. Veamos en el siguiente ejemplo estas etiquetas:

Si lo que queremos es que el navegador muestre el texto tal y como lo hemos escrito en HTML tendremos que utilizar la etiqueta <pre>. El texto aparecerá con formato monoespacio y estará entre <pre> y </pre>. En los dos ejemplos que siguen vemos como segun escribamos el texto, da resultados diferentes.

Ejemplo 1:

Ejemplo 2:

Las etiquetas <div> y <span> nos permitirán también dar formato especial al texto. La primera, marca el inicio de un nuevo párrafo y su cierre (</div>) el final del mismo y provoca un cambio de línea similar en tamaño al que se genera con <br>. La segunda con su etiqueta de cierre (</span>) hace exactamente lo mismo que <div> pero la diferencia que no provoca ningun cambio de línea. La etiqueta <center> como ya habreís deducido sirve para centrar un texto, pero como hemos dicho está obsoleta.