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
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
<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
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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias