1 - Qu es HTML?
HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.
Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la
pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre
una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular
datos, etc.
Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso
emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el
navegador que en este preciso momento est utilizando (recuerde que usted est viendo en
este preciso momento una pgina HTML con su navegador).
Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique
los que se presentan ya resueltos.
Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj
con el mismo. No pretende mostrar todos los elementos HTML en forma alfabtica.
Como veremos, de cada concepto se presenta una parte terica, en la que se da una
explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el
contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin
ms importante de este tutorial es donde se propone que usted haga pginas en forma
autnoma (donde realmente podr darse cuenta si el concepto qued firme).
19 - Tabla (<table><tr><td>)
El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada,
organizado en filas y columnas.
Algo importante es que no utilizaremos las tablas para organizar la pgina completa (esto se
hace en la actualizad mediante CSS, es decir hojas de estilo. Una vez que avance en este
curso puede visitar CSS Ya)
Para la creacin de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table.
Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr.
Este elemento requiere la marca de cierre.
Para recordar el nombre de estos elementos HTML:
<table>
<tr> viene de table row que significa fila de la tabla.
<td> viene de table data que significa dato de la tabla.
La mejor forma de entender y dominar este concepto es implementar tablas y ver su
resultado dentro del navegador. Confeccionemos una tabla que muestre los nombres de pases
en una columna y su cantidad de habitantes en otra:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
</tr>
<td>Estados Unidos</td><td>295 millones</td>
</table>
</body>
</html>
Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad
border con el valor 1, con esto el contorno de cada celda ser visible (pruebe de asignarle el
valor cero y otros valores superiores a 1)
<table border="1">
Seguidamente viene la apertura de la primera fila de la tabla con el elemento tr:
<tr>
Continuamos con la apertura de la primera celda de la primera fila de la tabla:
<td>
Luego el dato propiamente dicho de la celda:
India
Cerramos la celda:
</td>
Abrimos la proxima celda:
<td>
Disponemos el valor de la celda:
1300 millones
Cerramos la celda:
</td>
Ahora cerramos la primer fila de la tabla:
</tr>
El mecanismos de la siguiente fila es similar a la primera.
EJEMPLO
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
China
1300 millones
India
1080 millones
Estados Unidos 295 millones
20 - Tabla con encabezado (<th>)
La primer caracterstica que le vamos a agregar a una tabla son las celdas de encabezado.
Normalmente la primer fila de una tabla puede representar los ttulos para cada columna.
Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de
<td>
El navegador representa distinto las celdas de datos y las celdas de encabezamiento.
Confeccionemos el mismo problema del concepto anterior pero agregando un ttulo a cada
columna de la tabla mediante celdas de encabezamiento:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Si observamos el cdigo de la pgina para indicar que se trata de una celda de tipo
encabezado utilizamos el elemento th:
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
El elemento th debe estar contenido entre las marcas <tr> y </tr>, es decir pertenecen a una
fila.
Para recordar el nombre de este nuevo elemento HTML:
<th> viene de table header cell que significa celda de encabezado de
tabla.
EJEMPLO
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Paises
Cantidad de habitantes
China
1300 millones
India
1080 millones
Estados Unidos 295 millones
21 - Tabla con ttulo (<caption>)
Para disponer un ttulo a una tabla debemos incorporar el elemento caption inmediatamente
despus que abrimos la marca table. El elemento caption requiere la marca de apertura y
cierre.
Dispongamos un ttulo a nuestra tabla con la poblacin de distintos paises:
<html>
<head>
</head>
<body>
<table border="1">
<caption>Poblacin de los paises con mayor cantidad de habitantes.</caption>
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Como podemos observar la marca caption est inmediatamente despus que se abre la marca
de comienzo de la tabla:
<table border="1">
<caption>Poblacin de los paises con mayor cantidad de
habitantes.</caption>
<tr>
Para recordar el nombre de este nuevo elemento HTML:
<caption> significa ttulo.
EJEMPLO
<html>
<head>
</head>
<body>
<table border="1">
<caption>Poblacin de los paises con mayor
habitantes.</caption>
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
cantidad
de
Poblacin de los paises con mayor cantidad de habitantes.
Paises
Cantidad de habitantes
China
1300 millones
India
1080 millones
Estados Unidos
295 millones
22 - Tabla y combinacin de celdas.
En algunas situaciones se necesita que una celda ocupe el lugar de dos o ms celdas en forma
horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades
llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con
el valor 3:
<td colspan="3">Facturacin de los ltimos tres
meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:
<td rowspan="3">Secciones</td>
Veamos un ejemplo empleando el concepto de combinacin de celdas:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturacin
de los ltimos tres meses</th>
</tr>
<tr>
<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>
<tr>
<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>
</tr>
<tr>
<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>
</tr>
</table>
</body>
</html>
Veamos como definimos la primer fila de la tabla:
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturacin
de los ltimos tres meses</th>
</tr>
Como podemos observar la primer celda la expandimos hacia abajo 4 casilla y la segunda
celda la expandimos hacia la derecha en 4 celdas.
Cuando tenemos que disponer las celdas de la segunda fila debemos tener en cuenta que la
primera est ocupada. Luego el cdigo es:
<tr>
<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>