Curso completo de HTML - 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.

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 :

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.