Cuando escribimos cualquier texto sin ninguna Etiqueta de algún elemento, el navegador lo acomoda desde la línea que comienza hasta terminar y en el navegador lo presenta de manera contínua.

El siguiente poema es de mi autoría... pero si se parece a algún otro, disculpen, quizá lo memoricé de alguna parte. Debe quedar de la siguiente manera:

        Aquí,
            en el sol,
                el frío,
        lo desaparece,
            al tocar,
                mi corazón.

Spoiler: Aquí ya utilicé el elemento de Texto Pre-editado: <pre> para presentarles el poema, pero quédate hasta el final donde te presento cómo agregarlo a tu archivo HTML.

Vamos a escribir el poema sin ningún elemento

Así lo escribí en el archivo HTML:

        Aquí,
            en el sol,
                el frío,
        lo desaparece,
            al tocar,
                mi corazón.

Éste es el resultado:

Aquí, en el sol, el frío, lo desaparece, al tocar, mi corazón.

Como vez HTML acomodó todo en una sola línea.

Cuando utilizamos las Etiquetas del Elemento de Párrafo, lo que pensaría es que va a respetar el formato con los saltos de línea.¿Lo descubrimos?

¡Vamos a usar el elemento Párrafo!

Así es como lo escribí en el archivo HTML

        <p>
        Aquí,
            en el sol,
                el frío,
        lo desaparece,
            al tocar,
                mi corazón.
        </p>

Éste es el resultado:

Aquí, en el sol, el frío, lo desaparece, al tocar, mi corazón.

Si queremos compartir poemas y esos poemas tienen espacios o sangrías específicas y utilizamos las etiquetas del Elemento Párrafo, el navegador no respetará esos espacios o sangrías, unirá todo en la misma línea.

Ahora, si llegáramos a utilizar el elemento párrafo por cada línea o verso, ¿Tampoco respetará los espacios o sangrías que le demos? ¡Vamos a descubrirlo!.

Ésto es lo que escribí en el archivo HTML:

        <p>Aquí,</p>
        <p>     en el sol,</p>
        <p>          el frío,</p>
        <p>lo desaparece,</p>
        <p>     al tocar,</p>
        <p>          mi corazón.</p>

El resultado es el siguiente:

Aquí,

en el sol,

el frío,

lo desaparece,

al tocar,

mi corazón.

¿Funcionó? ¿No verdad?

¿Entonces cómo se puede lograr?

Vamos a utilizar las Etiquetas del elemento Texto Pre-editado: <pre>.

El elemento pre respeta el formato que le de demos entre sus etiquetas de inicio y cierre. Por lo tanto, la manera en que lo queramos escribir, acomodar, dar saltos de línea, etc. se respetará.

¿Funcionará? Veamos:

Ésto escribí en el archivo HTML:

        <pre>
        Aquí,
            en el sol,
                el frío,
        lo desaparece,
            al tocar,
                mi corazón.
        </pre>

El resultado es el siguiente:


        Aquí,
            en el sol,
                el frío,
        lo desaparece,
            al tocar,
                mi corazón.

¿Se logró?

¡Sí se pudo!

¿Qué más podemos hacer con el elemento pre?.


¿Cómo podemos cambiar el color del texto en el Elemento pre?

Para cambiar el Color del texto en la Etiqueta de Inicio del Elemento pre, tenemos que utilizar un Atributo llamado Color.

El Atributo Color nos permite darle Valores RGB, HEX o HLS para asignarle un color al contenido.

La sintaxis quedaría de la siguiente manera:

        <pre style="color:red;">Contenido</pre>

Para éste ejercicio utilizaremos el Atributo style que es una Propiedad CSS.

El Atributo style va a tomar lo que la Propiedad Color le dé, y para ello, dependerá del Valor que le demos a la Propiedad Color.

Utilizaremos los Tres tipos de Valores que le podemos dar a las Propiedad color: RGB, HEX y HLS.

No te preocupes por el momento de qué es RGB, HEX o HSL. Eso lo veremos en Colores en HTML. Veamos los ejemplos para que lo puedas realizar.


Color con nombres pre-establecidos

Vamos a utilizar el ejemplo anterior, aprovechando que usa Nombre de Color Pre-Establecido:

        <pre style="color:red;">Contenido</pre>

Un pre Normal se vería:

Contenido

Un pre con el Atributo style, la Propiedad color y el Valor red:

Contenido

Color con RGB

Si queremos utilizar RGB la línea es diferente porque el Valor aunque es lo mismo que red, en RGB cambia como en la siguiente línea:

        <pre style="color:rgb(255,0,0);">Contenido</pre>

Un pre Normal se vería:

Contenido

Un pre con el Atributo style, la Propiedad color y el Valor rgb(255,0,0):

Contenido

Color con HEX

Si queremos utilizar HEX la línea es diferente porque el Valor aunque es lo mismo que red, en HEX cambia como en la siguiente línea:

        <pre style="color:#ff0000;">Contenido</pre>

Un pre Normal se vería:

Contenido

Un pre con el Atributo style, la Propiedad color y el Valor #ff0000:

Contenido

Color con HSL

Si queremos utilizar HSL la línea es diferente porque el Valor aunque es lo mismo que red, en HSL cambia como en la siguiente línea:

        <pre style="color:hsl(0,100%,50%);">Contenido</pre>

Un pre Normal se vería:

Contenido

Un pre con el Atributo style, la Propiedad color y el Valor hsl(0,100%,50%):

Contenido

No es todolo que podemos hacer con el Elemento pre pero sí es lo que más se utiliza. El tema de hoy no nos permite ver detalles del Atributo style por el momento copia y pega para que veas los resultados pero si no funciona, quizá sea un punto y coma (;) lo que haga falta.