HTML

2 - Párrafos HTML

Los párrafos html están delimitados por etiquetas p que pueden ser fácilmente justificadas a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio del atributo «align» que no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personalizada, a lo largo de este tutorial encontraremos cantidad de atributos muy útiles para todo tipo de etiquetas.

Si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p>

Para una justificación al centro:

<p align="center">Texto alineado al centro</p>

Para alinear a la derecha:

<p align="right">Texto alineado a la derecha</p>

Los anteriores párrafos con sus alineaciones se verían más o menos así:

Texto alineado a la izquierda

Texto alineado al centro

Texto alineado a la derecha

El atributo align no es exclusivo de la etiqueta p. Otras etiquetas muy comunes, que veremos más adelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo de una forma habitual.

Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta div.

Esta etiqueta, div, por si sola no sirve para nada, salvo producir un salto de línea simple. Para que realmente se vea tiene que estar acompañada de algún estilo definido en el CSS o de atributos del HTML como align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.

Así, el código:

<p align="left">Parrafo1</p> 
<p align="left"> Parrafo3</p> 
<p align="left"> Parrafo2</p>

es equivalente a:

<div align="left"> 
    <p>Parrafo1</p> 
    <p>Parrafo2</p> 
    <p>Parrafo3</p> 
</div>

Como hemos visto, la etiqueta DIV marca divisiones en las que definimos un bloque de contenido, y a los que podríamos aplicar estilo de manera global, aunque lo correcto sería aplicar ese estilo del lado del CSS.

Ejemplo práctico de párrafo:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que pueden resolver en sus ordenadores.

Simplemente queremos construir una página que tenga, por este orden:

  • 2 Párrafos centrados
  • 3 Párrafos alineados a la derecha
  • Un salto de línea triple
  • 1 párrafo alineado a la izquierda

El código fuente del ejercicio, podría tener la siguiente forma:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>parrafos</title>
    </head>
    <body>
        <p align="center">
            Ejemplo de formatear parrafos
        </p>
        <p align="center">
            Esto es el resultado:
        </p>
        <div align="right">
        <p>
            Que son los buscadores que no tienen porque mantener un índice.
        </p>
        <p>
            Imaginemos un texto relativamente largo.
        </p>
        <p>
            Que son los buscadores que no tienen porque mantener un índice.
        </p>
        </div>
        <br>
        <br>
        <br>
        <p>
            Esto es que acaba... hasta luego...
        </p>
    </body>
</html>

Al verlo en un navegador obtendríamos un resultado como el siguiente:

parrafos

Ejemplo de formatear parrafos

Esto es el resultado:

Que son los buscadores que no tienen porque mantener un índice.

Imaginemos un texto relativamente largo.

Que son los buscadores que no tienen porque mantener un índice.




Esto es que acaba... hasta luego...