3. Texto preformateado.

En ocasiones es interesante mantener los espacios o saltos de línea de un párrafo tal y como están en el código HTML. Para conseguir esto hay que alterar el comportamiento habitual del navegador que, como se ha visto, ignora este formato. Un ejemplo muy simple que muestra esto es la firma de páginas con dibujos de texto como el de la figura 3.10.

Figura 3.10. Como se puede ver se pueden crear firmas muy originales usando únicamente caracteres y sin necesidad de imágenes.

Se podría crear una imagen con él e insertarla en el documento, pero este es un dibujo hecho con caracteres y podría aprovecharse para que pudiese verse también con navegadores que trabajan en modo texto como Lynx. Algo importante en este caso ya que interesa que TODO el mundo vea la firma, además de que el tenerla como texto hace más fácil su modificación.

Sin embargo todos los espacios múltiples se convertirán en un único espacio, y por tanto si se escribiese el dibujo junto con el código HTML el navegador lo mostraría como vemos en la figura 3.11 :

Figura 3.11. Si no usamos la etiqueta de texto preformateado la figura construida con caracteres se convertirá en algo ilegible.

que sin duda no es el resultado que esperábamos.

Aunque este es un ejemplo entre muchos, el objetivo era resaltar que en ocasiones esa característica de HTML de eliminar todo formato manual en el texto es verdaderamente incómoda. Pero todo problema tiene solución, y en este caso la solución es una nueva etiqueta: <PRE>...</PRE> . El nombre asignado a esta etiqueta proviene de la palabra "PREformateado" (o PREformatted en inglés) y su función es mantener todo formateado manual que sea hecho en el texto escrito entre la instrucción de inicio (<PRE>) y la instrucción de fin (</PRE>).

Continuando con el ejemplo de nuestra firma, el problema se podría solucionar si al insertarla la incluimos dentro de la etiqueta PRE de la siguiente manera:

      <PRE>
                  ( @ @ )
      ---------oOOo-(_)-oOOo---------
      |                               |
      |     Juan Juanito Juanez       |
      |   E-mail: juan@juanito.ju     |
      |                               |
      -----------------Oooo.---------
            .oooO     (   )
            (   )      ) /
             \ (      (_/
              \_)
      </PRE%gt;
    

En este caso la visualización será la esperada, es decir la de la figura 3.10.

Aviso

Es común en los nuevos programadores que descubren la etiqueta PRE usarla abundantemente, sin embargo, esto puede causar problemas de visualización de esas páginas con algunos tamaños de ventana, resoluciones de pantalla o tipos de monitor distintos del nuestro. Recordemos que esta era la razón por la que los navegadores ignoraban el formato manual y debido a ello el uso de PRE debe estar limitado a los casos en los que sea realmente necesario.

3.1. Uso de otras etiquetas dentro de <PRE>...</PRE>

A efectos de HTML estándar, el contenido de la etiqueta PRE es el mismo que el de un párrafo creado con P. Las únicas excepciones son aquellos elementos que producen cambios en el tamaño de la letra como por ejemplo IMG, BIG, SMALL, SUB, SUP y FONT. Esto excluye también a todas aquellas etiquetas que provocan un cambio de línea (son las llamadas etiquetas de nivel de bloque, block-level tags) como son: H1,..., H6, BLOCKQUOTE, ADDRESS, HR, etc.

Nota

Tanto Netscape como Explorer permiten el uso de todo tipo de etiquetas dentro del texto preformateado, incluso aquellas etiquetas de nivel de bloque. En estas últimas hay ligeras diferencias entre Explorer y Netscape, valga como ejemplo que los encabezados en Explorer mantienen el tipo de letra del texto preformateado (generalmente Courier New) mientras que Netscape los muestra con el tipo de letra normal (generalmente Times New Roman).