Ahora veremos un elemento de HTML que fue fundamental en el desarrollo web y que actualmente tomo su correspondiente lugar, pequeño a comparación de su anterior utilización pero muy muy importante.
Estas son las Tablas que anteriormente se utilizaron para maquetar documentos HTML (hay gente que aun sigue utilizándolas) pero realmente debe ser utilizadas como un elemento de organización de información basándose en filas y columnas y no como un elemento maquetador.
Un ejemplo de una buena utilización de las tablas es para mostrar las notas de un alumno en los diferentes periodo de clase. Vamos a realizar ese ejemplo:
Tablas en HTML
Para que una tabla se muestre como tal (Conjunto de filas y columnas) se necesitan 3 etiquetas anidadas, estas son <table>, <tr> y <td> (existe otra que la veremos en el ejemplo).
Para que los navegadores entiendan que utilizaremos una tabla debemos comenzar la introducción con la etiqueta <table> y finalizarla con </table>.
Para dibujar una Fila debemos utilizar las etiquetas <tr></tr>.
Para dibujar una Celda debemos utilizar las etiquetas <td></td>
Dicho esto haremos el ejemplo de las notas del alumno:
<table>
<tr>
<th>1 Trimestre</th>
<th>2 Trimestre</th>
<th>3 Trimestre</th>
</tr>
<tr>
<td>10</td>
<td>08</td>
<td>09</td>
</tr>
</table>
En el ejemplo puede verse una etiqueta que no fue explicada, esta es la <th> que es similar al <td> con una diferencia, la etiqueta <th> se usa como Celda de encabezado de table, esto hace que por default aparezca en negrita haciendo mas visible a los mismos.
Así quedará el código para poder verlo en un navegador:
<html>
<head>
<title>Tablas</title>
</head>
<body>
<h1>Tabla de Promedios</h1>
<h2>Alumno: NombreAlumno</h2>
<table>
<tr>
<th>1 Trimestre</th>
<th>2 Trimestre</th>
<th>3 Trimestre</th>
</tr>
<tr>
<td>10</td>
<td>08</td>
<td>09</td>
</tr>
</table>
</body>
</html>
Visualmente se ve así:
 |
| Tabla Básica |
Ahora bien, la tabla no parece realmente una tabla puesto que faltan sus delimitadores, para ello comenzaremos a utilizar los "atributos" estos se escriben detro de las etiquetas y tiene asignado un valor.
A continuación estableceremos que la tabla anteriormente utilizada tendrá un borde de 1 px lo que permitirá visualizar sus limites.
Solo hay que escribir dentro de la etiqueta <table> lo siguiente:
border="1"
Quedando la etiqueta de la siguiente manera:
<table border="1">
Lo que aquí establecemos es que el atributo o propiedad "border" tendrá el valor "1". Los valores siempre deben escribirse entre comillas ("").
Resultado visual:
 |
| Tabla con Bordes |
Ahora si parece una tabla...
Maquetar un HTML con la manera antigua (mediante Tablas)
Aclaración: Esto ya no debe hacerse pero como aún no los introduciré en el mundo de los Divs y del CSS (Cascading Style Sheet) les mostraré como maquetar un HTML de la manera tradicional, es decir, Encabezado, Menú, Cuerpo y Pie.
Para poder hacer eso necesitamos una tabla con 4 filas cada una tendrá una porción del diseño.
Dentro del sector "Encabezado" solo pondremos el Titulo de la web, mas adelante veremos como agregar una imagen para encabezados mas bonitos.
En el "Menu" pondremos algunos Links, esto me permitirá explicar este tema que es la base del HT es decir HyperText.
El "Cuerpo" llevara la información de la página que se este consultando.
Y finalmente el "Pie" solo llevara un copyright o algo similar.
Manos a la obra...
<html>
<head>
<title>Maquetacion con Tablas</title>
</head>
<body>
<table border="1">
<tr>
<td><h1>Programando el Destino</h1></td>
</tr>
<tr>
<td><p><a href="#">Home</a> | <a href="#">Articulos</a> | <a href="#">Links</a></p></td>
</tr>
<tr>
<td><h2>Tablas</h2>
<p>Las Tablas son un elemento del HTML... bla bla bla</p></td>
</tr>
<tr>
<td><h5>2011 - Todos los Derechos...</h5></td>
</tr>
</table>
</body>
</html>
Este documento HTMl se verá de la siguiente manera:
Obviamente que la propiedad "border" debe ir en "0", solo esta en "1" para que puedan ver donde esta la tabla.
Pero antes que me olvide les explicaré el tema de los Link que pueden verlo en donde estan las palabras "Home", "Articulos" y "Links"
Para realizar un Hipervínculo en HTML se necesita la etiqueta <a></a> todo lo que esta etiqueta contenga dentro de ella será tomado como hipervínculo y por default aparecerá subrayado y en color azul.
Pero, para que el hipervínculo tenga sentido nosotros debemos determinar a donde debe dirigirse el navegador una vez que el usuario clickee sobre el mismo.
Para ello utilizamos el atributo "href" este significa referencia de hipervínculo, es decir, a donde esta apuntando.
En el ejemplo el atributo tiene el valor "#" esto no significa nada por lo cual el navegador no hará nada, pero por ejemplo podemos asignarle a Link este mismo Blog por lo cual el hipervínculo quedara de la siguiente manera:
<a href="http://www.programandoeldestino.blogspot.com/">Link</a>
Una vez que el usuario clickee sobre el Link el navegador automáticamente lo dirigirá a este Blog.
En próximas entregas me extenderé en el tema de los links puesto que es algo muy importante.
También veremos mas propiedades de las tablas que son esenciales para su optimo funcionamiento, pero creo que con esto es suficiente para comenzar a practicar.
Eso fue todo por esta segunda entrega de necesitar ayuda no tienen mas que pedirla.
No hay comentarios:
Publicar un comentario