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: