Ingenieria en Sistemas Computacionales 1 "B"

Capitulo 7

Pues, sin mas dilación, vamos a empezar con esto de las listas. La lista mas elemental es la que no tiene ningún tipo de numeración, solo tiene unas marcas que, en principio, son iguales para todos los elementos de esta (aunque luego veremos como cambiar esto). Esta marca por defecto puede variar según el navegador que uses, aunque, generalmente, es un punto. La lista se construye según la siguiente estructura:

UL

LI Primer elemento /LI

LI Segundo elemento /LI

LI Tercer elemento /LI

...

/UL

Donde UL /UL son los tags que acotan a toda la lista y LI /LI acotan a cada elemento de esta.

Antes hemos dicho que, en principio, la marca es igual para todos los elementos de la lista, y que esta depende del navegador.

Sin embargo, se puede cambiar esto mediante la opción TYPE=, que puede tomar los valores DISC, CIRCLE o SQUARE, que fuerzan la representación de la marca como un círculo negro, un círculo vacío y un cuadrado respectivamente. ¿que en qué tag se usa esta opción? Pues se puede usar en los dos. Si lo pones en la forma UL TYPE=CIRCLE, todos los elementos de la lista serán círculos negros, y si lo haces de la forma LI TYPE=CIRCLE, solo se aplicará a ese elemento y a los que le sigan después.

El siguiente tipo de lista es la lista numerada, se construye casi igual que la anterior, pero con el tag que englo ba a toda la lista distinto:

OL

LI Primer elemento /LI

LI Segundo elemento /LI

LI Tercer elemento /LI

...

/OL

O sea, que solo hemos cambiado el tag UL /UL por OL /OL. La diferencia con la anterior es que en esta, en lugar de una marca, cada elemento se indica con su número de orden (1 para el primero, 2 para el sgundo, ect). Además, tú no tienes que preocuparte por saber por recordar que número tienes que poner en la línea, eso ya lo hace el navegador.

¿Y si no quieres empezar por el número uno? Pues para eso tienes el atributo START=, que se aplica a OL y toma como valor el número por el que quieres empezar a contar. (Si pones OL START=3, el primer elemento llevaría el número 3, el segundo el 4 ...ect)

Pero también tenemos opcion TYPE= para esta lista. En este caso puede adoptar los valores 1, i, I, a y A. El valor 1 (que es el que tiene por defecto) hace que la lista se numere como hemos dicho antes (1,2,3,4,5,6...), el valor i hace que se numere en números romanos en minúscula (i,ii,iii,iv,v,vi...) al iguál que hace el valor I, pero en mayúscula (I,II,III,IV,V,VI...), el valor a hace que se marquen los elementos con letras (a,b,c,d,e,f...) y A, como te estás imaginando, hace lo mismo, pero en letras mayúsculas (A,B,C,D,E,F...). El atributo TYPE=, iguál que antes, se puede aplicar tanto a OL como a LI. (Uses la opción TYPE= que uses, el valor de START= siempre será numérico, o sea, que si quieres una lista numerada por letras minúsculas que empiece por la letra b, deberás poner OL START=2 TYPE=a ¿Entendido?)

Capitulo 8

Si, aunque solo fuera por un momento, pensaste que las listas eran el elemento definitivo en cuanto a forma de ordenar la información, te equivocaste de plano. Esta de aquí abajo sí es la forma definitiva, el modo mas decente y, a veces, la chapuza que te sacará de algún apuro con el formateo.

1. Esto es una celda de una tabla	2. Esto TAMBIÉN es una celda de esta tabla
3. Esto TAMBIÉN es una celda de la tabla	4. Y esto TAMBIÉN es una celda de esta tabla

Vale, imagino que ahora te haces una idea de qué es una tabla. Por si las moscas, vamos a verlo un poco mas despacio:

La tabla anterior tiene el siguiente código:

El tag que define la tabla es

, toda la tabla debe estar entre estas dos etiquetas, y las opciones que se apliquen aquí tendrán efecto sobre toda la tabla.

Con

defininos cada una de las líneas de la tabla, los atributos que se empleen en este tag tendrá efecto en toda la línea. En resumen, tendremos tantos ... como filas tenga la tabla y, como la tabla de arriba tiene dos filas, entonces tiene dos tags ....

Y, por últmo, dentro de cada fila indicamos una celda concreta con las etiquetas

, entre las cuales pondremos lo que queremos que valla en esa celda (Texto en nuestro caso, aunque pueden ser imágenes o cualquier otra cosa).

Esto es lo básico de las tablas, ahora vamos a meternos un poco mas en profundidad.

Los principales atributos aplicables al tag son:

align=(valor), que puede valer "left", "right" o "center", y que, como te estás imaginando, alinea toda la tabla a la izquierda, derecha y centro, respectivamente.

bgcolor=(color), esta opción permite elegir el color del fondo de la tabla, para esto se usan los códigos de color que ya conocemos.

border=(tamaño), donde tamaño es el grosor en pixels del borde de la tabla. Si es cero, la tabla no tendrá borde (es la opción por defecto si no usas el atributo border) si no pones nada ( o sea, solo pones "border", sin signo igual),entonces se considera como si fuera "border=1".

width=(ancho), donde (ancho) puede ser un número que representará el ancho de la tabla, o estar en la forma número% (por ejemplo, 50%) que indicaría el ancho en proporción al ancho total de la ventana.

cellspacing=(separación), que indica la separación en pixels que existe entre cada celda.

cellpadding=(separación), no la confundas con la anterior, esta indica la separación entre el borde de la celda y su contenido.

cols=(columnas), especifica el número de columnas de la tabla (no es obligatorio ponerlo, pero se supone que los navegadores modernos tardan menos en representar la tabla si lo pones).

Un nuevo atributo para TABLE, que no es soportado por muchos navegadores, es FRAME, que permite decidir la forma en la que se verán los bordes exteriores de la tabla. Su valor puede ser uno de los siguientes:

frame="void" hace que se no muestre el ningún borde lde la tabla.

frame="avove" hace que se muestre solo la línea superior de la tabla (igual que con border=0, es la opción por defecto).

frame="below" muestra solo el borde inferior de la tabla.

frame="hsides" hace que se vean los bordes inferior y superior.

frame="vsides" para mostrar solo los bordes derecho e izquierdo.

frame="lhs" solo muestra el lado izquierdo.

frame="rhs" solo muestra el lado derecho.

frame="border" o frame="box" hacen que se vean los cuatro lados de la tabla.

Otro atributo parecido, pero este dedicado a modificar el aspecto de las líneas de separación entre celdas, es RULES:

rules="none" hace que no aparezcan líneas entre las celdas.

rules="all" para que aparezcan líneas entre todas las celdas.

rules="rows" aparecen solo las líneas horizontales, entre fila y fila.

rules="cols" hace que solo aparezcan las líneas verticales, entre columna y columna.

rules="groups" solo mostrará las líneas entre grupos de filas y/o grupos de columnas (más adelante veremos qué son estos grupos).

Las filas, que como hemos visto se declaran con los tags

..., tiene las siguientes opciones:

align=(valor), que puede ser left, center, right o justfy, los cuales, respectivamente, alinean el CONTENIDO de la celda a la izquierda, centrado, derecha o justificado.(bueno, lo de justfy lo dicen las especificaciones del HTML pero, hasta ahora, no hay navegadores que lo soporten).

valign=(valor), alinea verticalmente los datos en cada celda (si esta ocupa mas de una línea), puede ser top, middle, botton o baseline, que se corresponden con situar los dato arriba, en el centro, abajo o (mucha atención) arriba, pero alineando la linea de base de las letras, aunque uses fuentes de distinto tamaño. (lo malo es que los navegadores todavía no soportan esto).

Y, por último, las celdas tienen los siguientes atributos:

bgcolor=(color), igual que en

align=(valor), igual que en

valign=(valor), igual que en

colspan=(número), ver más abajo.

rowspan=(número), ver más abajo.