07-Parrafos en HTML

---

• Párrafos en HTML
• Pantalla HTML
• Reglas Horizontales
• Saltos de línea en HTML
• El problema del poema
• El problema del poema (solución)

---

Párrafos en HTML

En HTML, el elemento <p> define un párrafo.

Los párrafos se inician en una línea, y los navegadores se encargan de añadir los espacios entre párrafos.

Ejemplo

<p>Esto es un párrafo</p>

<p>Esto es otro párrafo</p>

Código del ejemplo

                        
 <p>Esto es un párrafo</p>
 <p>Esto es otro párrafo</p>                            
                            

---

...

Pantalla HTML

No se puede estar seguro de cómo se va a ver el código en cada pantalla debido a que cada dispositivo tiene su propia resolución.

Si agregamos un espacio adicional para modificar su visualización, no sirve de nada ya que el navegador eliminará automáticamente ese espacio.

Ejemplo

<p>
Este párrafo
contiene muchas líneas
en el código fuente,
pero el navegador
lo ignora.
</p>

Código del ejemplo

                            
 <p>Este párrafo
 contiene muchas líneas
 en el código fuente,
 pero el navegador lo ignora.</p>                                
                                

Reglas horizontales HTML

La etiqueta <hr> define una ruptura temática.

Se muestra como una línea horizontal y se utiliza para separar contenidos.

Ejemplo

<h1>Esto es un título</h1>
<p>Lorem ipsum dolor sit amet...</p>
<hr>
<h1>Título 2</h1>
<p>Lorem ipsum dolor sit amet...</p>

Código del ejemplo

                            
<h1>Esto es un título</h1>
<p>Lorem ipsum...</p>
<hr>
<h1>Título 2</h1>
<p>Lorem ipsum...</p>                               
                                

---

Saltos de línea en HTML

La etiqueta <br> define un salto de línea. Se utiliza para crear saltos sin iniciar un nuevo párrafo.

Ejemplo

<p>Lorem ipsum...<br>
Aperiam magnam...<br>
Quos laboriosam...<br>

Código del ejemplo

                            
<p>Lorem ipsum...<br>
Aperiam magnam...<br>
Quos laboriosam...<br>                                
                                

---

El problema del poema

Si deseamos escribir un poema, lógicamente tendemos a escribir varias líneas pero en un solo párrafo.

Si lo hacemos solo con la etiqueta <p>, el navegador lo va a mostrar en una sola línea.

Ejemplo

<p>
Pasarán estos días como pasan
todos los días malos de la vida
Amainarán los vientos que te arrasan
Se estancará la sangre de tu herida Lo que ayer se perdió será encontrado
El sol será sin mancha concebido
y saldrá nuevamente en tu costado anegado sin brújula y perdido
llegar a puerto con las velas rotas? El mismo viento que rompió tus naves
es el que hace volar a las gaviotas
</p>

Código del ejemplo

                            
                            <p>

 Pasarán estos días como pasan
 todos los días malos de la vida
 Amainarán los vientos que te arrasan
 Se estancará la sangre de tu  
 El alma errante volverá a su nido
 Lo que ayer se perdió será encontrado
 El sol será sin mancha concebido
 y saldrá nuevamente en tu c 
 Y dirás frente al mar: ¿Cómo he podido
 anegado sin brújula y perdido
 llegar a puerto con las velas  
 Y una voz te dirá: ¿Que no lo sabes?
 El mismo viento que rompió tus naves
 es el que hace volar a las gaviotas
 </p>                                 
                                

---

Solución: el elemento HTML <pre>

La etiqueta <pre> define el texto con formato previo.

Si colocamos un texto como el anterior dentro de esta etiqueta <pre>, el texto conserva su formato y mantiene los espacios originales.

Ejemplo

 Pasarán estos días como pasan
 todos los días malos de la vida
 Amainarán los vientos que te arrasan
 Se estancará la sangre de tu herida
 
 El alma errante volverá a su nido
 Lo que ayer se perdió será encontrado
 El sol será sin mancha concebido
 y saldrá nuevamente en tu costado
 
 Y dirás frente al mar: ¿Cómo he podido
 anegado sin brújula y perdido
 llegar a puerto con las velas rotas?
 
 Y una voz te dirá: ¿Que no lo sabes?
 El mismo viento que rompió tus naves
 es el que hace volar a las gaviotas
                    

Código del ejemplo

                            
                            <pre>

Pasarán estos días como pasan
todos los días malos de la vida
Amainarán los vientos que te arrasan
Se estancará la sangre de tu 
El alma errante volverá a su nido
Lo que ayer se perdió será encontrado
El sol será sin mancha concebido
y saldrá nuevamente en tu c
Y dirás frente al mar: ¿Cómo he podido
anegado sin brújula y perdido
llegar a puerto con las velas 
Y una voz te dirá: ¿Que no lo sabes?
El mismo viento que rompió tus naves
es el que hace volar a las gaviotas
</pre>                                
                                

---

---

Ir al índice