HTML, CSS Y JAVASCRIPT
5.- CREANDO CONTENIDO. TEXTO, TABLAS, LISTAS
Los bloques de texto constituyen la mayor parte de la información que se puede
ver en una página web. HTML dispone de varias herramientas para hacer un uso
correcto de estos párrafos y bloques de texto, como son <p>, <h1>-<h6>, <em> y
<strong>.
La etiqueta más utilizada a la hora de representar texto o párrafos en un
documento HTML es la etiqueta <p>. Cualquier párrafo que se encuentre definido
dentro de esta etiqueta será tratado como un bloque de texto que ocupará todo el
ancho de la página. Con el atributo style podremos asignar estilos CSS al texto. Por
ejemplo:
<p id="parrafo1" style="text-align:center"> Esto es un
párrafo ..... </p><p id="parrafo2" style="text-align:left"> Este
es otro párrafo......</p>
El uso combinado de la etiqueta <p>, junto con las etiquetas <h1>-<h6>, <strong> y
<em>, son las herramientas habituales para crear un texto bien estructurado y
atractivo.
HTML dispone también de otras etiquetas que, si bien su uso no está tan extendido
como el de negrita y cursiva, sí que son elementos a tener en cuenta a la hora de
desarrollar bloques de texto o párrafos.
• <dfn>: Etiqueta empleada para proporcionar al usuario información acerca
del significado de alguna frase o palabra. Dispone de un atributo title donde
se define el texto en cuestión.
• <cite> y <blockquote>: Son dos etiquetas que casi siempre van juntas. Su
uso es el de mostrar de una forma elegante una cita junto con el autor de
esa cita. La etiqueta <cite> será la encargada de recoger el autor y la
etiqueta <blockquote> de mostrarnos el contenido de la cita.
• <acronym> y/o <abbr>: Estas etiquetas se encargan de mostrar el
significado de la palabra que encierran. Según las especificaciones del W3C,
la etiqueta <acronym> se usa para indicar el significado de un acrónimo y
<abbr> para hacer lo propio con el significado de una abreviatura.
Ejemplos:
<p>Si debo elegir entre <dfn title="Sistema operativo
GNU/Linux basado en software libre.">Debian</dfn> y el
resto, sin duda alguna prefiero el primero</p>
1
<p><cite>Vito Corleone</cite>:<blockquote>"Porque cuando
uno de mis amigos se crea enemigos, yo los convierto en mis
enemigos. Y a ese le temen."</blockquote> </p>
<p>El <acronym title="Hospital Tierra de
Barros">HTB.</acronym> está situado en la localidad de
Almendralejo. </p> <p>Muy cerca de mi casa hay Zona <abbr
title="Zona Especial de Protección de Aves">ZEPA</acronym>.
</p>
• TABLAS
Las tablas son la mejor forma de representar datos tabulados. Es la típica
información que se podría presentar por ejemplo en una hoja de cálculo. Estas tablas
disponen de filas, columnas y cabeceras para la representación de los datos. Una celda
de una tabla es el lugar donde se produce la intersección de una fila con una columna,
y es donde se ubican los datos que se recogen en la tabla. Las etiquetas HTML que
intervienen a la hora de construir una tabla son:
• <table>: Es la etiqueta que define la estructura principal de una tabla, es el
elemento que engloba a cada una de las filas y columnas. Los principales atributos
propios de esta etiqueta son:
o border: Es un número entero que define el grosor del borde la página,
cuanto más grande sea el número, más grande es el grosor de la línea.
o cellpadding: Define en píxeles la separación interna de cada celda con
respecto a su contenido.
o cellspacing: Define en píxeles el espacio entre celdas.
o width: Especifica en porcentaje o en píxeles el ancho de tabla.
• <tr>: Etiqueta definida dentro de <table> y que representa una fila de la tabla.
• <td>: Es una etiqueta que se declara dentro de <tr> y representa las columnas de la
fila que lo contiene. Los atributos más importantes de esta etiqueta son:
o colspan: Número entero que determina el número de columnas que ocupa
nuestra celda.
o rowspan: Número entero que representa el número de filas que ocupa
nuestra celda.
• <th>: Viene a sustituir a la etiqueta <td> en el momento de representar las
cabeceras de una fila o de una columna. Las celdas creadas con esta etiqueta
mostrarán el texto centrado y en negrita.
• <caption>: El contenido de esta etiqueta representa el título o encabezado de la
tabla, debe insertarse inmediatamente después de la etiqueta de apertura <table>.
En una tabla podemos diferenciar tres partes: cabecera, pie y cuerpo. Se
pueden utilizar las etiquetas <thead>, <tfoot> y <tbody> para diferenciar estas tres
partes:
2
• <thead>: Etiqueta donde se declara y se definen las celdas que representan la
cabecera de la tabla y de cada celda. Debe ir justo después de la etiqueta de
apertura <table>.
• <tfoot>: Etiqueta que define el pie de la tabla.
• <tbody>: Es la etiqueta donde se define el cuerpo de la tabla, entendiendo por
cuerpo de la tabla la parte central donde se recogen los datos. Esta etiqueta es
la última que se define dentro de la etiqueta <table> y debe ir justo después de
<tfoot>.
