Curso de HTML (Parte 2)

Reinyer Reyes Zayas

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. Comencemos por las más simples, las desordenadas.

Listas desordenadas

<UL TYPE="disc">                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI>pan</LI> </UL>

asi se ve --->>>

papas salud 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 tambié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.

<UL TYPE="square">                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI TYPE=DISC>pan</LI> </UL>

asi se ve --->>>

papas salud dulce de leche pan

Tip: se pueden mezclar tipos de items como en el ejemplo anterior. Util para diferenciar items.

<UL TYPE="circle">                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI>pan</LI> </UL>

asi se ve --->>>

papas salud 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

<OL>                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI>pan</LI> </OL>

asi se ve --->>>

papas salud dulce de leche pan

En las listas ordenadas el puntito pasa a ser un numeral que indica el orden de cada item. Muy útil para numerar listas automáticamente, 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:

<OL TYPE=A>                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI>pan</LI> </OL>

asi se ve --->>>

papas salud dulce de leche pan

 

<OL TYPE=a>                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI>pan</LI> </OL>

asi se ve --->>>

papas salud dulce de leche pan

 

<OL TYPE=I>                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI>pan</LI> </OL>

asi se ve --->>>

papas salud dulce de leche pan

 

<OL TYPE=i>                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <LI>pan</LI> </OL>

asi se ve --->>>

papas salud dulce de leche pan

Bueno, hasta aquí las listas. Ah, casi me olvidaba, se pueden incluir listas dentro de listas.
Cómo? Muy fácil:

<OL TYPE=i>                <LI>papas</LI>                <LI>salud</LI>                <LI>dulce de leche</LI>                <OL TYPE=1></LI>                <LI>conaprole</LI>                <LI>milky</LI>                <LI>lapataia</LI>                </OL></LI>                <LI>pan</LI> </OL>

asi se ve --->>>

papas salud 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 existía 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 más claro ;)

Vamos a la práctica. Una tabla se define con el comando <TABLE> y debe finalizar siempre con </TABLE>. Cerrar una tabla es muy importante, sino la página puede aparecer totalmente diferente si nos olvidamos de un simple </TABLE>. Imaginen una hoja cuadriculada. Una tabla es eso, con sus filas (TR) y columnas (TD). Primero veamos una tabla simple:

<TABLE> <TR>                <TH>1996                <TH>1997 <TR>                <TD>30 millones                <TD>80 millones </TABLE>

asi se ve --->>>

1996 1997   30 millones 80 millones

Esa tabla está compuesta de la siguiente forma: Primero comienza la tabla con <TABLE<. Luego viene <TR>, indica que comienza una nueva fila (horizontal) de la tabla. Una tabla por lo menos debe tener una fila. Luego viene <TH>, que indica que comienza una columna. A continuación de este tag se coloca la información. Ven que en la segunda fila usa <TD> en vez de <TH>. 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.
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

<TABLE BORDER=1 WIDTH=400 HEIGHT=100> <R>                <TH COLSPAN=3>USUARIOS EN INTERNET EN URUGUAY <TR>                <TH>1995                <TH>1996                <TH>1997 <TR>                <TD BGCOLOR="#553366" ALIGN=CENTER>1.500                <TD BGCOLOR="#226666" ALIGN=CENTER>15.000                <TD BGCOLOR="#553322" ALIGN=CENTER>80.000 </TABLE>

Así se ve:

USUARIOS EN INTERNET EN URUGUAY 1995 1996 1997 1.500 15.000 80.000

Ejemplo 2 - Tabla Loca

<TABLE BORDER=1 WIDTH=400 HEIGHT=200> <TR>                <TD ROWSPAN=2><FONT SIZE=+1><EM>Texto por aqui...</EM></FONT>                <TD VALIGN=BOTTOM><FONT SIZE=-1>mas...</FONT>                <TD><FONT SIZE=+1 COLOR="#FF0000">otro por aca...</FONT> <TR>                <TD BGCOLOR="#553322">y mas..                <TD ROWSPAN=2 ALIGN=CENTER><FONT SIZE=+1>y por aca...</FONT> <TR>                <TD VALIGN=BOTTOM><FONT SIZE=+3>1A</FONT>                <TD VALIGN=BOTTOM><FONT SIZE=+3>2B</FONT>   </TABLE>

Así se ve

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

En el correr de la semana agregaré más 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 mencioné aquí. Hoy en día, casi todo esta hecho de tablas. Netscape 3.0 tiene extensiones para hacer texto de multicolumnas automáticamente, pero no son estandard. Como regla general, aléjense de lo que no es estandard todavía.

Artículos relacionados