Dominando el texto preformateado en HTML

Introducción

En HTML, la etiqueta <pre> se utiliza para mostrar texto preformateado. Se muestra exactamente en la página web como está presente en un archivo HTML. El espacio en blanco utilizado dentro de esta etiqueta se muestra tal como se escribe. El texto escrito entre las etiquetas <pre> se muestra en una fuente de ancho fijo. Se recomienda utilizar la etiqueta <pre> en caso de un formato inusual o si se desea escribir un fragmento de código de computadora.

En este laboratorio, aprenderá a utilizar la etiqueta <pre> para mostrar texto preformateado en una página web.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70817{{"Texto preformateado en HTML"}} html/head_elems -.-> lab-70817{{"Texto preformateado en HTML"}} html/text_head -.-> lab-70817{{"Texto preformateado en HTML"}} html/text_dir -.-> lab-70817{{"Texto preformateado en HTML"}} html/doc_flow -.-> lab-70817{{"Texto preformateado en HTML"}} html/inter_elems -.-> lab-70817{{"Texto preformateado en HTML"}} html/custom_attr -.-> lab-70817{{"Texto preformateado en HTML"}} end

Creando el archivo HTML

Cree un archivo index.html en un editor de texto de su elección y agregue el siguiente código HTML básico.

<!doctype html>
<html>
  <head>
    <title>Using the HTML Pre Tag</title>
  </head>
  <body>
    <h1>Using the HTML Pre Tag</h1>
  </body>
</html>

Agregando contenido a la página web

Agregue el siguiente código entre las etiquetas <body> para crear un bloque de texto preformateado utilizando la etiqueta <pre>.

<pre>
This text
will be
displayed
in a
fixed-width font
</pre>

Usando el atributo cols

Agregue el siguiente código entre las etiquetas <pre> para establecer el número preferido de caracteres que debe tener una línea en el bloque de texto preformateado utilizando el atributo cols.

<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>

Usando el atributo width

<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>

Usando el atributo wrap

Agregue el siguiente código entre las etiquetas <pre> para indicar que el texto debe saltar a la siguiente línea utilizando el atributo wrap.

<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>

Agregando código de computadora a la página web

Agregue el siguiente código entre las etiquetas <pre> para mostrar un fragmento de código de computadora en el bloque de texto preformateado.

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Using the HTML Pre Tag&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Using the HTML Pre Tag&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

Estilando el bloque de texto preformateado

Agregue el siguiente código CSS entre las etiquetas <head> para estilar el bloque de texto preformateado.

<style>
  pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Guarde los cambios realizados en el archivo index.html y abrálo en un navegador web para previsualizar los resultados.

Resumen

Felicitaciones, ¡has completado con éxito el laboratorio y aprendido cómo usar la etiqueta <pre> para mostrar texto preformateado en una página web! Has aprendido cómo establecer el número preferido de caracteres que debe tener una línea en el bloque de texto preformateado utilizando los atributos cols y width, y cómo indicar que el texto debe saltar a la siguiente línea utilizando el atributo wrap. También has aprendido cómo agregar un fragmento de código de computadora al bloque de texto preformateado, y cómo estilar el bloque de texto preformateado utilizando CSS.