musica

martes, 7 de abril de 2015

TEXTO PREFORMATEADO

Etiqueta <pre>
En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación. En estos casos, podemos utilizar la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todos los saltos de línea.
Definición formal de la etiqueta <pre>

<pre>Texto preformateado
Atributos comunesbásicos, ¡18n y eventos
Atributos específicos-
Tipo de elementoBloque
DescripciónMuestra el texto que encierra tal y como está escrito (respetando los espacios en blanco y los saltos de línea)

En el siguiente ejemplo presentamos el uso de la etiqueta <pre>: 

<p>
        La etiqueta pre
   respeta los espacios en blanco
      y
muestra el texto
     tal y como
   está escrito
</p>
<pre>
        La etiqueta pre
   respeta los espacios en blanco
      y
muestra el texto
     tal y como
   está escrito
</pre>
Hemos incluído el mismo texto, con espacios en blanco y saltos de línea, dentro de una etiqueta <p> y una etiqueta <pre>, Siendo éstas las diferencias visuales en un navegador:

La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como está escrito
La etiqueta pre
   respeta los espacios en blanco
      y
muestra el texto
     tal y como
   está escrito

El primer texto se ve como un párrafo normal, ya que HTML ha eliminado todos los espacios en blanco sobrantes y los saltos de línea. El segundo texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. Los elementos <pre> son especiales, ya que los navegadores les aplican las siguientes reglas:
  1. Mantienen todos los espacios en blanco (tabuladores, espacios y saltos de línea)
  2. Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas sus letras son de la misma anchura
  3. No se ajusta la longitud de las líneas (las líneas largas producen un scroll horizontal en la ventana del navegador)
Esta última característica diferencia por completo a los párrafos de los elementos <pre>. Como se ha visto, los navegadores ajustan la anchura de los párrafos de texto para que ocupen todo el tamaño de la ventana. Sin embargo, los elementos <pre> se muestran tal y como son originalmente, por lo que una línea muy larga dentro de un elemento <pre> provoca que la anchura de la página sea superior a la anchura de la ventana del navegador.Si en el ejemplo anterior añadimos más texto al final de la segunda línea (para producir una línea larga), el navegador muestra un scroll horizontal (barra de desplazamiento), ya que el texto completo no cabe en el tamaño de la ventana y las líneas de los elementos <pre> nunca se ajustan:

Etiqueta <code>
La etiqueta <code>, relacionada con <pre>, se utiliza para mostrar código fuente de cualquier lenguaje de programación.
En la mayoría de páginas web no tiene sentido utilizar la etiqueta <code>. Sin embargo, en muchas páginas web técnicas que incluyen listados de programas, trozos de código o etiquetas HTML, lo correcto es utilizarla.
Ejemplo:
<code>
        La etiqueta code
   no respeta los espacios en blanco
</code>

<p>La etiqueta <code>code</code> es similar a la
etiqueta <code>pre</code>, sobre todo en el formato
del texto.</p>
El navegador nos mostrará, entonces, el comportamiento de <code> y sus diferencias con <pre>:

La etiqueta code no respeta los espacios en blancoLa etiqueta code es similar a la etiqueta pre, sobre todo en el formato del texto.
  • Al igual que sucede con los elementos <pre>, el texto encerrado por la etiqueta <code> se muestra con un tipo de letra especial de ancho fijo.
  • Al contrario de <pre>, el elemento <code> no respeta los espacios en blanco ni los saltos de línea, por lo que su comportamiento es similar a la etiqueta <p>. 
  • La última diferencia es que <code> es un elemento en línea, mientras que <pre> es un elemento de bloque.
  • Capítulo 10:

 Texto Preformateado

  • Las directivas (<PRE>...</PRE>) permite visualizar el texto tal y como se encuentre colocado entre estas 2 directivas, con el formato que deseemos, con los retornos de carro sin ser especificados por <BR>, y las tabulaciones
    NOTA:
    No es recomendable usar tabulaciones, en su lugar es preferible poner espacios, (por medio de la barra de espaciar), ya que no todos los browsers tienen preestablecidos el mismo espacio de tabulador y podría modificarnos la distribución del texto dependiendo del navegador empleado.
    Escribe y graba con el nombre de pagina4.html en el directorio practicas-formatos la codificación del siguiente ejemplo.
    Visualiza detenidamente los resultados
    Ejemplo: 4
                             Texto Preformateado
    Nota: Se recomienda realizar la tabla en Word, para posteriormente pegarla en arachnophilia
    Alineación de párrafos. (derecha, izquierda y centro y justificado)
    Estas propiedades son de la directiva <P>....</P>
    Alinean el texto en la pantalla a la izquierda, derecha, centrado y justificado.
    <P ALIGN= "center"> texto centrado </p>
    <P ALIGN= "left"> texto alineado a la izquierda </p>
    <P ALIGN= "right"> texto alineado a la derecha </p>
    <P ALIGN= "justify"> texto justificado </p>
    Escribe y graba con el nombre de pagina5.html en el directorio practica-formato la codificación del siguiente ejemplo.
    Visualiza detenidamente los resultados  
    Ejemplo 5
                         Texto Preformateado
    El resultado se verá como sigue
                             Texto Preformateado

    Texto preformateado

    La etiqueta <pre> sirve para delimitar un texto que deseamos sea mostrado como código fuente, lo que normalmente se traduce en un tipo de texto no proporcional y el respeto de los espacios, saltos de línea y tabuladores. Todos los ejemplos de este tutorial están creados utilizando esta etiqueta.
    <html>
            <head>
                    <title>ejemplo de texto preformateado</title>
            </head>
            <body>
                    Este es un ejemplo muy simple del uso de <pre>.<br>
    
                    Sin <pre>:
                    ----
                    |      |
                    |      |
                    ----
    
                    Con <pre>:
                    <pre>
                    ----
                    |      |
                    |      |
                    ----
                    </pre>
            </body>
    </html>
        

    ENLACE

    1 comentario: