Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

9. Texto Preformateado

¿Cómo
      muestra  
          texto 
       donde        los caracteres de espacio   y
   los retornos de carro   cuentan?

Objetivos

Después de esta lección será capaz de:

Lección

Nota: Si no tiene el documento de trabajo de la lección anterior, bájese una copia ahora.

En lecciones anteriores habíamos visto que un Browser ignoraría caracteres de espacio extraños, tabulaciones y retornos de carro en sus archivos HTML. NO obstante, hay momento en los que es importante mantener dichos caracteres en el diseño de su página. En esta lección el ejemplo será que queramos insertar una tabla de texto con columnas alineadas.

La etiqueta de preformato le dice a su Browser que muestre el texto exactamente tal y como está puesto en el documento HTML, incluyendo espacios, tabulaciones y retornos de carro. Un Browser típicamente mostraría algo así como un tipo

m o n o e s p a c i a d o

Un ejemplo de la etiqueta preformato es:


   <pre>
    Hemos indentado con 5 caracteres de espacio.
    Y usamos el retorno de carro para saltar
    a
    una
    nueva
    línea.
    
          Aquí        usamos
          espacios    para
          crear       una
          tabla       de texto.
   </pre>
Sin las etiquetas <pre> y </pre> el mismo HTML produciría lo siguiente:

Hemos indentado con 5 caracteres de espacio. Y usamos el retorno de carro para saltar a una nueva línea. Aquí usamos espacios para crear una tabla de texto.
La etiqueta de preformato es útil si su Browser puede utilizar un tipo de letra monoespaciada (como "Courier" o "Mónaco"); si no, deberá contar espacios cuando alinee texto en columnas (¡y tragarse ciertas palabras, también!)

Para nuestra lección sobre volcanes queremos añadir una tabla bajo la sección de Introducción que liste diversos volcanes conocidos, cuando entraron en erupción y el volumen del material que produjeron. Para ello:

  1. Abra el segundo archivo, index.htm en el editor de textos.
  2. Bajo la última parte de la Introducción coloque un encabezado de nivel 4 (<h4>) con el texto Volúmenes de Algunas Erupciones Volcánicas Conocidas (Si no recuerda cómo hacer encabezados vea la lección 3)
  3. Debajo de dicho encabezado introduzca el siguiente texto exactamente como se indica (¡esta es otra oportunidad para "copiar y pegar" desde esta página web!)
    
    <pre>
      Erupción                      Fecha          Volumen en km^3
      --------                      ----           --------------
      Paricutin, México             1943                 1.3
      Mt. Vesuvio, Italia           79 A.D.               3
      Monte Sta. Elena, Washington  1980                  4
      Krakatoa, Indonesia           1883                 18
      Long Valley, California     pre-historia        500 - 600
      Yellowstone, Wyoming        pre-historia           2400
    </pre>
    
    En este ejemplo hemos usado caracteres de espacio para alinear la primera columna a la izquierda y las otras dos columnas centradas. Los guiones se usan para enfatizar los encabezados de columna.
  4. Salve y Actualice en su web Browser.

Compruebe Su Trabajo

Compare su página web con un ejemplo de cómo debiera quedar su documento. Si su página web fuera diferente de la del ejemplo revise en el editor el texto que introdujo. Si las columnas no están alineadas entonces es que le faltan o le sobran espacios.

Revisión

Topicos a revisar en esta lección:
  1. ¿Cómo la etiqueta preformato cambia la apariencia de lo que el Browser muestra?
  2. ¿En qué situaciones puede ser útil esta etiqueta?

Más Información

Puede utilizar etiquetas de HTML dentro de un texto marcado como preformateado. Por ejemplo, podemos añadir un link hipertexto y algunas etiquetas de estilo dentro de las etiquetas <pre>...</pre>:
HTML Resultado
<pre>
Este Tutorial tiene copyright 
1995, 1996
    
    <B>¡Asegúrese de comentar con
    sus amigos acerca de él!</B>     
             <i>Le
                  Agradecemos
                    Que
                      Vuelva</i>
agradecidamente,
<a href=
"http://www.mcli.dist.maricopa.edu/">
mcli</a> 
</pre>
Este Tutorial tiene copyright 
1995, 1996
    
    ¡Asegúrese de comentar con
    sus amigos acerca de él!     
                Le
                  Agradecemos
                    Que
                      Vuelva
Agradecidamente,
mcli
Note que algunas de las etiquetas HTML no tienen en cuenta los espacios; son ignorados dentro de la region con preformato.
Algunos diseñadores de páginas Web usan las etiquetas <pre>...</pre> con retornos de carro dentro para añadir espacios en blanco entre el texto o los gráficos de sus páginas; especialmente si desean más espacio del que la etiqueta <p> suele ofrecer. Por ejemplo:
HTML Resultado
El Queso fue añorado desde
que fuera abolido en el Oriente.
<pre>



</pre>
...hasta que Sir Longhorn llegó con su
gran Cruzada del Queso de 1167.
El Queso fue añorado desde que fuera abolido en el Oriente.



...hasta que Sir Longhorn llegó con su gran Cruzada del Queso de 1167.

Práctica Independiente

Añada una tabla a su documento HTML usando la etiqueta de preformato.

A continuación....

Use el conjunto de caracteres especiales para añadir algún âcèñto a sus páginas web.

IR A.... | Índice de Lecciones | anterior: "Links HyperGráficos" | siguiente: "Caracteres Especiales" |


Writing HTML Lección 9: Texto Preformateado
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net

URL: