Logo

Darle forma a la pÁgina web

Si hablamos de configurar el documento HTML debemos entender darle forma al texto de la página web. Como colocar los párrafos, los saltos de línea, justificar el texto, introducir viñetas, numeraciones, resaltar parte del texto utilizando negrita, etc. Todas estas tareas son tareas necesarias si queremos adecuar el texto. El lenguaje HTML lo hace perfectamente, solo necesitamos conocer algunas de la etiquetas que lo hacen.

Aquí veremos algunas de las etiquetas que permiten darle forma a un texto. Para crear párrafos utilizamos la etiqueta <p> con la </p> de cierre que introduce un salto y deja una línea en blanco antes de continuar con el resto del texto. Otra etiqueta similar es la <br> con la </br>, con la que podemos cambiar de línea pero sin dejar un espacio en blanco entre líneas.

De todas formas si no utilizamos estas etiquetas para cambiar de línea el navegador lo hará automáticamente cuando este llegue al final. Si hemos utilizado la etiqueta <p> para hacer párrafos los podemos alinear fácilmente a la izquierda, derecha o centro especificando esta alineación dentro de esta etiqueta por medio del atributo align, por ejemplo si queremos alinearlo a la izquierda sería: <p align=”left”>, al centro: <p align=”center”>, y al la derecha: <p align=”right”>.

Como vemos el atributo align toma determinados valores que los tenemos que colocar entre comillas. Pero si no usamos este atributo el navegador toma el valor por defecto que es left, y nos alinea el texto a la izquierda. Este atributo align no es exclusivo de la etiqueta <p>, otras lo usan también, que ya veremos.

Supongamos un texto bastante largo en el que queremos que todos los párrafos este alineados a la izquierda. Para evitarnos utilizar el atributo align en cada etiqueta <p>, podemos usar la etiqueta <div> para simplificar el código. Que sería algo así, el código de la izquierda produce el mismo efecto que el de la derecha.

 

<div align="left">

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

<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>

 

</div>

Existen otras etiquetas que son las que definen los encabezados o Header en ingles. Se utilizan para títulos porque usan una letra mayor y con el texto en negrita. Hay varios tipos de encabezados, que los podemos diferencias por el tamaño de la letra que emplean. Así, la etiqueta <h1>, para los más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño.

Las etiquetas de encabezado también crean separación en párrafos, así todo lo que escribamos por ejemplo entre las etiquetas <h1> y </h1> (o cualquier otro encabezado) nos lo presentará en un párrafo independiente.

Siguiente Tema: El Tipo de Letra de las Páginas web

PÁGINA PRINCIPAL DEL CURSO DE CREACIÓN DE PAGINAS WEB EN HTML