HTML al instante - Parte #2

		HTML al instante - Parte #2 Versión: 1.0 Autor: Santiago Badano Ultima actualización: 13 Oct 96 En la primera parte aprendimos a colocar texto e imágenes en una página web. Vimos comandos para darle formato al texto, estilos, alinearlo, separarlo en párrafos y ponerle títulos. También vimos como incluir imágenes, y alinearlas. Con estos comandos se puede hacer una página básica. En esta segunda parte veremos comandos que nos dan mucha más flexibilidad para mostrar la información en pantalla. Listas en HTML Las listas son simplemente eso: listas. Exactamente igual que cuando hacemos una lista de compras para el supermercado. Las listas son muy simples. Hay diferentes tipos: listas desordenadas, ordenadas y de definiciones. Comenzemos por las mas simples, las desordenadas. Listas desordenadas papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan Como ven, confeccionar una lista es muy simple. Primero especificamos el tipo de lista, en este caso UL (unordered list) de lista desordenada. Luego cada item de la lista se indica con LI (list item). Fácil verdad? Verán tembién que hay un parámetro en UL, el TYPE="disc". Eso significa que el puntito que aparece a la izquierda de cada item de la lista sea un disco. También existen CIRCLE y SQUARE. papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan Tip: se pueden mezclar tipos de items como en el ejemplo anterior. Util para diferenciar items. papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan No todos los browsers soportan esto. Es un pequeño detalle pero no esta de mas saberlo. Ahora pasemos a las listas ordenadas. Se definen exactamente igual a las desordenadas, salvo que se utiliza el comando OL (ordered list). Veamos un ejemplo: Listas ordenadas papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan En las listas ordenadas el puntito pasa a ser un numeral que indica el orden de cada item. Muy util para numerar listas automaticamente, ya que no hay que ingresar en número de cada item a mano. Al igual que en las listas desordenadas, se puede elegir mediante el parámetro TYPE el tipo. Existen A, a, I, i, y por defecto 1. Veamos como quedan: papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan papas salus dulce de leche pan asi se ve --->>> papas salus dulce de leche pan Bueno, hasta aqui las listas. Ah, casi me olvidaba, se pueden incluir listas dentro de listas. Como? Muy fácil: papas salus dulce de leche conaprole milky lapataia pan asi se ve --->>> papas salus dulce de leche conaprole milky lapataia pan Tablas en HTML Las tablas son uno de los elementos mas versátiles del HTML. Sirven para todo. No siempre existieron las tablas. Cuando solo existia el HTML V1.0 no había tablas, recién con la versión 2.0 llegaron las tablas. Hoy casi todos los browsers soportan las tablas, aunque existen algunos que no lo hacen. Si tu browser no soporta tablas, cambienlo por una que si. Verán todo mas claro ;) Vamos a la practica. Una tabla se define con el comando y debe finalizar siempre con . Cerrar una tabla es muy importante, sino la página puede aparecer totalmente diferente si nos olvidamos de un simple

. Imaginen una hoja cuadriculada. Una tabla es eso, con sus filas (TR) y columnas (TD). Primero veamos una tabla simple:

1996 1997 30 millones 80 millones

asi se ve --->>>

1996 1997 30 millones 80 millones

Esa tabla esta compuesta de la siguiente forma: Primero comienza la tabla con , indica que comienza una nueva fila (horizontal) de la tabla. Una tabla por lo menos debe tener una fila. Luego viene , que indica que comienza una columna. A continuación de este tag se coloca la información. Ven que en la segunda fila usa en vez de . TH significa TABLE HEADING, se usa cuando la información contenida es el nombre de una categoría. Simplemente lo que hace es resaltar la información. TD significa TABLE DATA y no resalta la información. TD y TH aceptan los siguiente parámetros:

HEIGHT	Indica la altura de la celda. Para especificar el tamaño en pixels solo ingresar la contidad, ej: HEIGHT=340 ; también se puede ingresar el tamaño en porcentajes, ej: HEIGHT=30%
WIDTH	Indica el ancho de la celda.
ALIGN	Permite alinear el texto dentro de una celda. Acepta LEFT, RIGHT, CENTER.
VALIGN	Permite alinear el texto verticalmente dentro de una celda. Acepta TOP, BOTTOM, CENTER.
BGCOLOR	Permite especificar el color de fondo de una celda. (solo se ve en Netscape 3.0)
ROWSPAN=n	Indica que esa celda se extiende n filas.
COLSPAN=n	Indica que esa celda se extiende n columnas.

Que mejor que un ejemplo para ver como se utilizan estos comandos:

Ejemplo 1 - Tabla Normal

USUARIOS EN INTERNET EN URUGUAY 1995 1996 1997 1.500 15.000 80.000

asi se ve

USUARIOS EN INTERNET EN URUGUAY 1995 1996 1997 1.500 15.000 80.000

---

Ejemplo 2 - Tabla Loca

Texto por aqui... mas... otro por aca... y mas.. y por aca... 1A 2B

asi se ve

Texto por aqui... mas... otro por aca... y mas.. y por aca... 1A 2B

En el correr de la semana agregaré mas información sobre las tablas. Este fin de semana no he tenido mucho tiempo, asi que agregaré unas cosas importantes sobre las tablas que no mencione aquí. Hoy en día, casi todo esta hecho de tablas. Netscape 3.0 tiene extensiones para hacer texto de multicolmnas automaticamente, pero no son estandard. Como regla general, alejense de lo que no es estandard todavía. Quizá algun dia lo sea, pero mientras...
La semana que viene van los frames, incluyendo frames invisibles!

---

Fin de la segunda parte.
Bueno, hasta aqui la segunda parte del mini curso de HTML. Todavía quedan muchas cosas, la semana que viene va la parte #3. Si alguien desea tratar algun tema en particular, o simplemente comentar lo aqui expuesto, no duden en hacermelo saber.
Enviar e-mail a: rgblab@cs.com.uy.