Párrafos
Comenzamos la estructuración de contenidos viendo las etiquetas del lenguaje HTML que permiten crear párrafos, saltos de líneas, etc.
| Etiqueta | Significado |
| <p> </p> | Define un bloque de texto introduciendo un doble salto de línea |
| <br /> | Introduce un salto de línea |
| <pre></pre> | Reproduce el texto tal y como éste se ha introducido en el documento |
| <hr /> | Introduce una regla o línea de texto |
|
Atributos para <hr /> color align=left|right|center size=núm width=núm |"núm%" |
Listas
ETIQUETAS PARA LISTAS
| Etiqueta | Atributo | Valor | Significado |
|---|---|---|---|
| <ul></ul> | type | circle, square, disc | Crea una lista desordenada |
| <ol></ol> | type | 1, A, a, I, i | Crea una lista ordenada con número, letras, n. romanos |
| start | Número | Indica con que número o letra comienza la lista |
EJEMPLOS
| LISTAS ORDENADAS | RESULTADO | LISTAS DESORDENADAS | RESULTADO |
|---|---|---|---|
|
<ol type="1"> <li>Rojo</li> <li>Amarillo</li> <li>Azul</li> </ol> |
1. Rojo 2. Amarillo 3. Azul |
<ul type="circle"> <li>Rojo</li> <li>Amarillo</li> <li>Azul</li> </ul> |
• Rojo
• Amarillo
• Azul
|
|
<ol type="A" start=5> <li>Rojo</li> <li>Amarillo</li> <li>Azul</li> </ol> |
E. Rojo F. Amarillo G. Azul |
LISTAS DE DEFINICIÓN
EJEMPLO
| LISTA DE DEFINICIÓN | RESULTADO |
|---|---|
|
<dl> <dt>Rojo</dt> <dd> color primario que empieza con R</dd> <dt>amarillo</dt> <dd>color primario que empieza con A</dd> </dl>
|
Rojo color primario que empieza con R Amarillo color primario que empieza con A |
ACTIVIDADES
Realizaremos algunas actividades sobre listas para afianzar lo expuesto: click aquí
Tablas
Las tablas suponen una de las estructura más improtantes para la presentación de contenido.
Están formadas por un conjunto de celdas, distribuidas en filas y columnas.
Ejemplo
Estructura Básica
|
<table> Aquí se inicia la tabla <tr> Esta etiqueta indica el inicio de una fila
<td> Entre estas etiquetas irá el contenido de la primera celda </td>
<tr> y las correspondientes a las celdas hasta el cierre de la nueva fila con </tr>
|
Actividad guiada
Para realizar este ejercicio puedes utilizar Dreamweaver tanto en modo diseño como en modo de código.
Tabla1) Creamos una página nueva e insertamos en él una tabla con 3 filas y 5 columnas.
- Como aún no tiene datos nuestra flamante tabla presentará un aspecto bastante "esquelético".
- Vamos ahora rellenando las celdas con la información pertinente. En la zona superior colocaremos los identificadores de LMSGI, GBD, PAR, ISO,FH y en la izquierda los correspondientes a los grupos 1º ASIR 2014 y 1º ASIR 2015. Inventamos unos datos del numero de aprobados en cada módulo.
- Guardamos el trabajo como tabla1.html y comprobamos los resultados en el navegador.
Propiedades de la Tabla
| PROPIEDAD | SIGNIFICADO |
| align | Alinea horizontalmente la tabla con respecto a su entorno. |
| background | Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. |
| bgcolor | Da color de fondo a la tabla. |
| border | Define el número de píxel del borde principal. |
| bordercolor | Define el color del borde. |
| cellpadding | Define, en píxel, el espacio entre los bordes de la celda y el contenido de la misma. |
| cellspacing | Define el espacio entre los bordes (en píxel). |
| height | Define la altura de la tabla en píxel o porcentaje. |
| width | Define la anchura de la tabla en píxel o porcentaje. |
Atributos de la Celda y Fila
| ATRIBUTO | SIGNIFICADO |
| align | Justifica el texto de la celda del mismo modo que si fuese el de un párrafo |
| valign | Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda |
| bgcolor | Da color a la celda o línea elegida |
| bordercolor | Define el color del borde |
| background | Nos permite colocar un fondo para la celda a partir de un enlace a una imagen |
| height | Define la altura de la celda en píxel o porcentaje |
| width | Define la anchura de la celda en píxel o porcentaje |
Atributos para unir celdas horizontalmente o verticalmente
| colspan | Expande una celda horizontalmente |
| rowspan | Expande una celda verticalmente |
Ejemplo
|
<td colspan="3"></td> abarca tres columnas <td rowspan="2"></td> abarca dos filas |
Actividad guiada
Tabla2) Partiendo de la tabla creada en la actividad tabla1, añadiremos una fila por encima para agrupar los datos en Módulos Teóricos y Modulos Prácticos.
- Abre el archivo tabla1.html si lo habías cerrado.
- Pulsa con el botón derecho sobre cualquier celda de la primera fila y elige tabla insertar fila superior.
- Comprobarás que la fila se ha insertado por encima de la celda en la que nos encontrábamos.
- Sitúate ahora en la celda que se encuentra encima de la que contiene la referencia al curso 1º y, pulsando y arrastrando haz que queden marcadas esa celda y la que se encuentra a su derecha.
- Pulsa el botón derecho y elige combinar celdas seleccionadas.
- Repite la operación con la celda situada encima de la referencia a 3º.
- Rellena las celdas superiores con el texto Módulos Teóricos y Módulos Prácticos respectivamente.
- Guarda el trabajo como tabla2.html y comprueba los resultados en el navegador.
Tablas anidadas
El lenguaje HTML permite insetar tablas dentro de otra tabla
|
<table style="background-color: #5bc0de;" border="1" cellspacing="3" cellpadding="5"> <table style="background-color: #62c462;" border="1" cellpadding="5"> <tbody> <tr> <td><span style="color: #ffffff;"><strong>Mes</strong></span></td> <td><span style="color: #ffffff;"><strong>Gastos</strong></span></td> </tr> <tr> <td><span style="color: #ffffff;">Octubre</span></td> <td><span style="color: #ffffff;">1000</span></td> </tr> </tbody> </table> </td></tr> </tbody> </table> |
Actividades: Realizar las actividades sobre tablas tabla3 a tabla7
Para saber más
Otros atributos
frame
rules
rules="all" ( all = todo ) son visualizadas todas las líneas entre todas las celdas de la tabla. Es el valor preajustado por lo que equivale a no utilizar este atributo.
Estructura avanzada de Tabla
