En este tutorial veremos la etiqueta <p> (parrafo) la cual se encarga de introducir el texto dentro del documento HTML, Tambien veremos los Formatos que se le pueden dar al texto dentro de los parrafos.
La etiqueta <p> define a un parrafo, como ya habran visto en anteriores tutoriles no se debe de olvidar, la etiqueta de cierre que es estrictamente obligatoria.
La sintaxis seria de la siguiente manera.
<p>Este es un parrafo</p>
En HTML hay un problema con los navegadores, cuando queremos escribir un parrafo o un texto con varios espacios en blanco entre palabras, los navegadores no respetan los espacios en blanco y lo muestran sin los espacios.
Por ejemplo si escriben un parrafo de la siguiente manera en el editor de texto donde esten escribiendo el codigo de su pagina web,
<p> este es un
parrafo con
varios espacios
en blanco</p>
parrafo con
varios espacios
en blanco</p>
El navegador lo mostrara de la siguiente manera,
La solucion a este problema es la etiqueta <pre> (preformateado) cambiando la etiqueta <p> por la etiqueta <pre> el navegador respetara todos los espacios en blanco que tenga el parrafo como se ve en la siguirnte imagen.
La sintaxis seria de la siguiente manera,
<p>Este es<br>un parrafo<br>con saltos<br>de linea.</p>
Este parrafo se mostraria de la siguiente forma en el navegador.
Para enterder por que ocurre este comportamiento con los parrafos, ¿por que los navegadores no respetan los espacios en blanco y los saltos de linea escritos en el codigo del documento HTML?
Esto sucede por la propiedad display o (visulizacion), todos los elementos o etiquetas HTML tienen la propiedad display, los valores por defecto de los elementos HTML son block (en Bloque) o inline (en Linea)
Los elementos block, como su nombre lo dice, abarca un bloque de todo lo ancho de la pagina web o seccion que lo contiene por ejemplo un <div>, <section>, <article> etc, etc, y los elemento inline solo abarca el ancho necesario para mostrar el contenido del elemento.
El elemento <p> tiene por defecto la propieded block, por eso los navegadores entienden que es un bloque y lo muestran en una linea sin respetar los espacios en blanco o saltos de linea.
En la siguiente imagen vemos un ejemplo de parrafos con un background-color (color de fondo) propiedad de CSS, el cual muestra el espacio del bloque que abarcan los parrafos en la pagina web, dentro de un <div> del 50% del ancho de la pagina he puesto los mismos parrafos para que se entienda mejor el comportamiento del valor block.
Este es el codigo del ejempolo de arriba puedes copiarlo y pegarlo o escribirlo en tu editor de texto y esperimentar con el width (ancho) del <div> para entender mejor el comportamiento de la propieded display, incluso puedes cambiar el valor de block por inline para ver la diferencia entre un valor y otro.
Solo debes ingresar la propiedad CSS display con el valor inline entre las llaves de apertura y cierre { } en donde se implementan las propiedades y valores al selector p en las etiquetas <style> de la siguiente manera, (display: inline;) sin los parentesis.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Los Parrafos</title>
<style>
p {
background-color: #00ffff;
}
div {
width: 50%;
}
hr {
height: 5px;
background-color: #0099cc;
}
</style>
</head>
<body>
<p>Este es<br>un parrafo<br>con saltos<br>de linea.</p>
<p>Este es unparrafo.</p>
<p>Este es otro parrafo.</p>
<hr>
<div>
<p>Este es<br>un parrafo<br>con saltos<br>de linea.</p>
<p>Este es unparrafo.</p>
<p>Este es otro parrafo.</p>
</div>
<hr>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Los Parrafos</title>
<style>
p {
background-color: #00ffff;
}
div {
width: 50%;
}
hr {
height: 5px;
background-color: #0099cc;
}
</style>
</head>
<body>
<p>Este es<br>un parrafo<br>con saltos<br>de linea.</p>
<p>Este es unparrafo.</p>
<p>Este es otro parrafo.</p>
<hr>
<div>
<p>Este es<br>un parrafo<br>con saltos<br>de linea.</p>
<p>Este es unparrafo.</p>
<p>Este es otro parrafo.</p>
</div>
<hr>
</body>
</html>
Los formatos del texto en HTML
En HTML existen distintos elementos para dar formato al texto, la siguiente es una lista de los elementos que se pueden usar para dar distintos formatos al texto:
- <b>Texto en bold o negrita
- <strong>Texto Importante
- <i> texto en Italica
- <em>Texto Enfatizado
- <mark>Texto Marcado
- <small>Texto Pequeño
- <del>Texto Eliminado
- <ins>Texto Insertado
- <sub>Texto Subindice
- <sup>Texto Superindice
Los dos primeros elementos <b> (bold o negrita) y <strong> (Fuerte o Importante) muestran el formato de letra igual en los navegadores, con la diferencia que el elemento <b> es para hacer la letra mas grande o "negrita" sin dar tanta importancia al texto, solo se usa para resaltar el texto.
El elemento <strong> tambien muestra el texto en "negrita", la diferencia de este elemento es que cuando los navegadores leen el elemento, se dan cuenta que es un texto de mayor importancia o relevancia en el documento HTML.
Ejemplo de <b>:
<p>Hoy me voy de <b>Vacaciones Amigos.</b></P>
Ejemplo de <stong>:
<p>Aviso Importante: <strong>El elemento "strong" solo se debe utilizar para mensajes o textos realmente importantes del documento HTML.</strong></p>
Ejemplos mostrados por el navegador.
Los elementos <i> ( Texto en Itálica o Cursiva) y <em> (Texto Enfatizado) tambien muestran el mismo tipo de Texto en "Itálica o Cursiva" el elemento <i> muestra texto en italica sin enfazis o importancia.
El elemento <em> muestra texto en italica con mayor enfazis o importancia, al igual que <strong> es un elemento que le dicen a los navegadores que es untexto con mayor enfazis o importancia en el documento HTML.
No se debe abusar en la implementacion de los elementos <strong> y <em>, utilizalos solo en casos necesarios o importantes, es mas recomendable utilizar siempre <b> o <i>
Ejemplo de <i>:
<p><i>Este texto esta escrito en Italica sin enfazis.</i></p>
Ejemplo de <em>:
<p><em>Este texto esta escrito en Italica con enfazis.</em></p>
Ejemplos mostrados por el navegador.
Ejemplo de <mark>:
<p><mark>Este texto es marcado con un color amarillo por los navegadores</mark></p>
Ejemplo mostrado por el navegador.
Ejemplo de <small>:
<p> Este texto es <small>mas pequeño</small> de lo normal</p>
Ejemplo mostrado por el navegador.
El elemento <del> (delete) (eliminar o borrar) este elemento no elimina el texto, lo que hace es mostrarlo con una linea en medio del texto.
Ejemplo de <del>:
<p><del>Este texto se debe entender como texto eliminado</del></p>
Ejemplo mostrado por el navegador.
El elemento <ins> (insertado) este elemento muestra el texto con una linea por debajo del texto.
Ejemplo de <ins>:
<p><ins>Este texto se debe entender como texto insertado</ins></p>
Ejemplo mostrado por el navegador.
El elemento <sub> (subindice) este elemento muestra un texto mas pequeño en la parte inferior de la linea normal.
Ejemplo de <sub>:
<p>Este texto se muestra <sub>mas Pequeño en la parte inferior</sub> de la linea normal</p>
Ejemplo mostrado por el navegador.
El elemento <sup> (superbindice) este elemento muestra un texto mas pequeño en la parte superior de la linea normal.
Ejemplo de <sup>:
<p>Este texto se muestra <sup>mas Pequeño en la parte superior</sup> de la linea normal</p>
Ejemplo mostrado por el navegador.
Resumen
La etiqueta <p> define un parrafoLa etiqueta <b> define texto en negrita sin importancia
La etiqueta <strong> define texto en nigrita con importancia
La etiqueta <i> define texto en italica sin enfatizar
La etiqueta <em> define texto en italica enfatizado
La etiqueta <mark> define texto marcado o con color de fondo
La etiqueta <small> define texto mas pequeño
La etiqueta <del> define texto eliminado o borrado
La etiqueta <ins> define texto insertado
La etiqueta <sub> define texto subindice
La etiqueta <sup> define texto superindice
En el siguiente tutorial veremos algunas propiedades CSS para modificar el texto con el atributo HTML style.
Saludos y que estén bien, nos leemos en el siguiente tutorial, hasta la proxima Amigos.
No hay comentarios.:
Publicar un comentario