3.4 Elementos a nivel de bloque
Cada elemento HMTL tiene una forma de visualizarse por defecto dependiendo de qué tipo de elemento es. Existen dos posibilidades: los elementos nivel de bloque y los elementos en línea, en ingles Block-level Elements y Inline Elements respectivamente.
Elementos a nivel de bloque
- Pueden contener otros elementos bloque y otros elementos en línea.
- Un elemento en bloque siempre se inicia en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como sea posible).
- Todos los elementos posteriores a un elemento de bloque se sitúan debajo aunque se modifique su anchura.
- Ejemplos serían los bloques de división (<div>), los párrafos (<p>), las listas (<ol>, <ul>), los formularios (<form>), las cabeceras (<h1><h6>) y las tablas (<table>).
A continuación estudiaremos algunos ejemplos que nos permite construir hoy en día una página funcional en HTML.
Encabezados
|
Ejemplo de encabezados de <h1> a <h6> |
Los encabezado permiten la creación de títulos para las diferentes apartados y subapartados, definiendo un tamaño de texto diferente <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Estas etiquetas tienen una etiqueta inicial (<h1>) y una final (</h1>). Así, el texto que se encuentra entre estas etiquetas se visualizará con un tamaño de texto concreto, siendo <h1> el tamaño más grande y <h6> el más pequeño.
Se puede recurrir a las CSS para determinar el tamaño de un título sin hacer uso de los encabezados.
Listas
|
Ejemplo de listas |
Las listas son muy útiles cuando queremos ofrecer una lista de elementos, palabras, frases o enlaces uno debajo del otro. Si estos elementos van encabezados por una bolita o un cuadrado son listas no ordenadas, si por el contrario van encabezados por números (correlativos: 1, 2...), letras ordenadas alfabéticamente (A, B...) o números romanos (I, II...) son listas ordenadas.
Así, para crear listas utilizamos dos etiquetas.
- <ul> y </ul> para listas no ordenadas (señaladas por bolitas o cuadrados).
- <ol> y </ol> para listas ordenadas (señaladas por números o letras).
En ambos casos, cada uno de los términos (ordenados o no) que hay dentro de las etiquetas del párrafo anterior, se deben encerrar entre las etiquetas <li> y</li>.
Este elemento tiene atributos, ejemplos son reversed (invierte el orden), start (establece el número de inicio) y type(indica qué tipo de número o símbolo es).
Tablas
|
Ejemplo de listas |
La etiqueta de bloque (<table>) representa una tabla y permite crear una estructura de datos agrupados en filas y columnas.
Las tablas se dividen en filas (rows) que se representan con la etiqueta <tr> y las filas contiene datos en las celdas con las etiquetas <td>. Ademas existe una fila especial, al cabecera que tendrá como etiqueta <th> en lugar de <tr>.
Como cualquier otro elemento tiene atributos que definen su apariencia, conviene especificarlos en la CSS, por ejemplo border se utiliza para determinar el borde de separación entre celdas. Otro atributo interesante es style mediante el cual incluimos los estilos, que deberán ir en css, por ejemplo la anchura( width).
Las tablas permiten múltiples configuraciones entre ellas que una celda ocupe varias filas o varias columnas, incluyendo atributos a <td> tales como rowspan(filas) y colspan(columnas) de forma apropiada.
No obstante en los siguientes ejemplos los estilos están incluidos de forma interna y no mediante CSS, que veremos en temas posteriores.