4.1. Tablas.
Los conceptos que vamos a ver en este tema son ya mas avanzados y complejos que los anteriores, y no es el objetivo de este modesto tutorial el describir todas sus opciones y parámetros posibles, por lo que vamos a ver únicamente los casos y opciones más usados en la práctica.
Las tablas son un elemento muy útil a la hora de organizar información, realizar índices, o símplemente mostrar elementos organizados en filas y columnas. Las tablas de HTML son de aspecto similar a las que se pueden definir en un procesador de textos más o menos avanzado.
La tabla viene delimitada por las etiquetas: <TABLE> ... </TABLE>. Dentro de la tabla, cada fila esta delimitada por las etiquetas: <TR> ... </TR> y a su vez, dentro de las filas, las columnas vienen delimitadas por: <TD> ... </TD> Finalmente, dentro de esas columnas podemos poner el texto o imágenes que contiene la casilla.
Esto se ve mejor con un ejemplo:
(es recomendable mantener una correcta tabulación para no perdernos)
<TABLE BORDER=1>
<TR> <TD> elemento 1-1 </TD> <TD>
elemento 1-2 </TD> </TR>
<TR> <TD> elemento 2-1 </TD> <TD>
elemento 2-2 </TD> </TR>
<TR> <TD> elemento 3-1 </TD> <TD>
elemento 3-2 </TD> </TR>
</TABLE>
quedaria:
| elemento 1-1 | elemento 1-2 |
| elemento 2-1 | elemento 2-2 |
| elemento 3-1 | elemento 3-2 |
El comando TABLE admite parámetros, como el borde que rodea la tabla (BORDER="valor").
Muchas veces es muy útil usar tablas con borde 0 de forma que los datos queden bien alineados, pero de cara al usuario no se note que es una tabla. (BORDER="0").
Hay más opciones, así que experimenta y consulta ejemplos.
4.2. Frames.
El uso de "frames" en un documento HTML consiste simplemente en dividir el documento en varias zonas, de forma que cada una de estas zonas es a su vez otro documento HTML.
Las utilidades de esto son muchas, ya que por ejemplo nos permite mantener una zona con un índice fijo y otra con el contenido en si (por ejemplo estas mismas páginas, o las de la mayoria de las secciones del club).
Además de estas aplicaciones típicas, si ponemos un poco de imaginación podemos hacer cosas muy interesantes usando frames: en la sección de ejemplos hay alguno de estos.
Antes de comenzar, una advertencia: no todos los visores de páginas HTML soportan frames, sobre todo los más antiguos, pero a partir de Netscape 2.0 ya se soportan, y la mayoría de los browsers actuales lo hacen también.
La metodología para crear un documento con "frames" es la siguiente:
En el archivo de la página web con frames se expresará la división de la pantalla que deseamos, y qué documento HTML debe ir en cada una de estas zonas.
Estos documentos deben estar en archivos separados, y no son más que fuentes HTML normales, como las que hemos realizado hasta ahora.
Por tanto, la única novedad es la descripción de las diferentes zonas o "frames", que tiene la siguiente sintaxis:
<FRAMESET cols="ancho de cada columna">
<FRAME NAME="nombre1" SRC="documento
html que va en este frame">
<FRAME NAME="nombre2" SRC="documento
html que va en este frame">
...
</FRAMESET>
esto divide el documento HTML en tantas columnas como lineas <FRAME NAME...> introduzcamos en su interior. El ancho de cada columna se especifica separado por comas, y en el orden en que despues son definidos. (se puede expresar en pixels o en porcentajes).
Para dividir el documento en filas (frames horizontales), se utiliza la misma sintaxis, pero cambiando la palabra "cols" por "rows":
<FRAMESET rows="...">
<FRAME NAME="nombre1" SRC="documento
html que va en este frame">
<FRAME NAME="nombre2" SRC="documento
html que va en este frame">
...
</FRAMESET>
Los conjuntos de frames (framesets) pueden ser anidados, sustituyendo la linea <FRAME NAME...> por otra sentencia <FRAMESET>, pudiendo formar combinaciones de filas y columnas.
Los frames permiten multiples variaciones y parámetros, pero sólo vamos a estudiar los más usados:
<FRAMESET ... BORDER=0>
Con esta opción hacemos que no se vea el borde de los frames. (solo a partir de Netscape 3.0).
<FRAMESET ... NORESIZE>
Con esta otra no permitimos al usuario cambiar el tamaño de los "frames", que de otra forma sí que podría hacer.
<FRAME NAME=... SCROLLING="...">
Esta opcion no es del conjunto de frames, sino de cada uno de éstos. Nos permite definir si los frames permiten scroll. Los posibles valores son: YES (hay barras de scroll en el frame), NO (pues eso...), AUTO (solo cuando sean necesarias).
Una vez que ya tenemos el documento de "frames", podemos hacernos una pregunta: Cuando pulse en un "link" (enlace) de alguno de los documentos que forman los frames, quiero se mantenga la division en frames, o que la nueva pagina aparezca a toda pantalla?...
Por defecto se cargan en el mismo frame, pero podemos hacer que se cargue a pantalla completa añadiendo el parametro TARGET al comando del enlace que ya vimos en la seccion 3.1:
<A HREF="documento a enlazar" TARGET=_top>
... </A>
Nota: aunque cuando creamos los frames definimos el ancho o alto de las filas y columnas, estos valores son muy realativos, ya que dependen del tamaño de la ventana del browser, de la resolucion de pantalla... lo mejor es ir probando hasta conseguir el efecto deseado.
Otro tema más que se ha acabado. Si has entendido todo esto ya estás totalmente preparado para programar paginas HTML, ya sea para Internet o como documentacion local.
Si deseas continuar, aún tienes un apéndice con algunos truquillos
extra para
mentes inquietas, pero lo importante ya está todo visto.
A continuación hay un ejemplo de lo visto en este
tema (tablas y
frames).
También hay muchos mas ejemplos en la sección "ejemplos",
y además recuerda
que siempre que veas una página interesante en Internet puedes copiarte
el codigo HTML y observar los trucos que usa o cómo está
hecha.
Otros Links de Interés:
Cocina - Videos - Juegos Gratis - Postales cachondas - Cine - Programas Gratis - Letras de Canciones
Listas de todos los Tutoriales Gratis. 1998- 2007 - -
Los
tutoriales y cursos aquí reunidos son una recopilación de los mejores encontrados en
Internet.
El crédito y copyright de los mismos si lo hubiere corresponde al autor de cada
uno de ellos.
Si tu tutorial o curso está aquí, y deseas darlo de baja de esta recopilación o
quieres añadir el tuyo,
envíanos un mensaje desde
aquí