Fundamentos de Formato HTML: Estilos de Párrafo y Estructuración con Tablas
El Texto en HTML (I): Formato y Estructura
Evidentemente, en las páginas web no todo el contenido es igual y, por tanto, no todo se ha de mostrar de la misma forma. Por eso, HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desde el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde letras individuales hasta bloques completos de texto.
Estilos de párrafo
Estos estilos o formatos actúan a nivel de párrafo:
| Etiqueta | Significado | Resultado |
|---|---|---|
<p> | Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto. | Soy un párrafo: fíjate en los espacios de antes y de después. |
<p align="x"> | Justificar el texto del párrafo a la izquierda (LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY - HTML4). | Alineación izquierda, centrada, derecha o justificada. |
- Alineación izquierda: Texto por defecto.
- Texto centrado: Permite centrar todo el bloque de texto encerrado.
- Alineación derecha: Texto alineado al margen derecho.
- Texto justificado: Alineado a ambos lados sin dejar escalones en el margen derecho.
Los encabezados
El lenguaje HTML nos ofrece seis etiquetas distintas (<h1> a <h6>) para mostrar cabeceras o títulos.
Tablas
Leer en la pantalla de un ordenador causa cierto rechazo, por eso es necesario buscar formas de distribuir el contenido por la página de forma que no parezca demasiado compacto. La organización del texto en una página es posible gracias a las tablas.
Una tabla no es más que una colección de filas y columnas cuyas intersecciones llamamos celdas; es en esas celdas donde podemos colocar textos o imágenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar para lograr disposiciones de texto e imagen similares a las que se conseguirían en revistas mediante programas de maquetación.
Definir tablas
Para definir una tabla, debemos establecer las filas que la componen y, dentro de estas, las características de las celdas. La definición permite configurar:
- Bordes.
- Colores de fondo.
- Márgenes internos.
- Espaciado entre celdas.
Definiendo las filas
La definición de cada fila se inicia con la etiqueta <tr> y finaliza con </tr>; entre ellas colocaremos las celdas.