TEXTO PREFORMATEADO

UN VIDEO PARA UNA MEJOR COMPRENSIÓN

ENLACES:
https://www.youtube.com/watch?v=yb1KuUiMs3w 

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 comunes básicos, ¡18n y eventos Atributos específicos - Tipo de elemento Bloque Descripción Muestra 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: Mantienen todos los espacios en blanco (tabuladores, espacios y saltos de línea) Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas sus letras son de la misma anchura 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

Ver Películas Gratis Clips de películas gratis y Clips Instalar películas Gratis! www.filmfanatic.comEnlaces patrocinados 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. Empieza Descargar Convierte Cualquier Fichero a PDF, Word, Jpeg, Rtf - Descarga Gratis! www.fromdoctopdf.comEnlaces patrocinados 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                           Nota: Se recomienda realizar la tabla en Word, para posteriormente pegarla en arachnophilia Resultado 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                       Resultado El resultado se verá como sigue

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 http://bloguermast.blogspot.com/2010/04/espacios-en-blanco-y-saltos-de-linea.html