:: LAD - Linux a Distancia :: file:///I:/CURSO PHP/CLASE 013.

htm

Listas
En HTML una lista es simplemente la enumeración o denotación de varios elementos. Estos
elementos serán en definitiva, texto. Las listas servirán entonces para darle formato a la
salida.
Una lista puede ser ordenada o desordenada. Aquellas que son ordenadas llevarán algún tipo
de numeración, las otras llevarán simplemente alguna viñeta.
Listas desordenadas
Las listas desordenadas quedan definidas por el tag <ul> ... </ul> (Unordered List). Dentro
de este tag se especificarán todos los elementos de la lista. Cada elemento de la lista se
definirá en el tag <li>...</li>.
Ejemplo:

<ul>
<li><A HREF=http://www.atptennis.com>Tenis</A></li>
<li><A HREF=http://www.freeprogrammingresources.com>Free Books</A></li>

<li><A HREF=http://www.clarin.com.ar>Las noticias</A></li>

</ul>

De esta forma el HTML exibirá algo así:

Tenis
Free Books
Las noticias

Lo que es posible configurar de las listas desordenadas es que dibujo utilizar como viñeta.
Entre los posibles estan un circulo, un cuadrado o un disco (por defecto). Para ello habrá que
agregarle la opción TYPE al tag UL. Los valores de esa opción son CIRCLE, SQUARE y DISC
respectivamente. El fin del tag LI (</LI>) puede ser, y normalmente lo es, omitido ya que es
claro para el navegador que en donde encuentre otro tag <LI> significa que comienza otro
elemento.
Lista Ordenadas
Las listas ordenadas se diferencia de las anteriores en que cada elemento de la lista posee una
posición (numérica o alfabética) , o sea, identificarían como una secuencia de pasos. El tag
que se utiliza para estas listas es el tag <ol>...</ol> y para los elementos el tag <li>
(mismo caso que con las listas desordenadas). El tag ol también posee un parámetro TYPE
que permite determinar el tipo de numeración. Entre los posibles existen:

Valor Numeración Ejemplo

A Alfabética Mayúscula A,B,C,D...

a Alfabética Minúscula a,b,c,d...

1 (defecto) Números Arábigos 1,2,3,4...

I Números Romanos Mayúscula I,II,III,IV...

i Números Romanos Minúsculas i,ii,iii,iv...

Frames
Hasta el momento todas las páginas que generamos ocupaban toda la ventana. Si se desea
dividir la venta en partes de forma que podamos cargar varias páginas distintas dentro de la
misma ventana, será necesario utilizar frames. Un frame es simplemente un "porción" de una
ventana. Para utilizar frames es necesario crear un HTML que contenga solamente la definición
de los frames y luego otro html por cada frame que se utilice.
Para crear un frame se utiliza el tag <FRAMESET>...</FRAMESET>. Es tag REEMPLAZA al tag
BODY, por lo tanto, el tag BODY no estará presente. Un FRAMESET me permite dividir la ventana
en filas o en columnas. Si luego se quiere dividir más la página se pueden anidar FRAMESETs.
Este tag llevará un parámetro COLS(columnas) o un ROWS(filas), pero no ambos. Cada uno de
ellos dividirá a la ventana en filas o en columnas. Las divisiones se pueden especificar en
pixeles (ej. ROWS=100,300) o en porcentajes (ej. ROWS=40%,60%). Al igual que con las tablas se
puede utilizar un asterisco (*) para aquellos valores que no deseemos especificar y que
quedarán librados al tamaño disponible (ej. COLS=50,*).

El tag FRAME es el que se utiliza para especificar que páginas cargar en cada frameset. Este
tag tiene tres opciones básicas:

SRC: especifica que página se va a cargar

NAME: es el nombre que tendrá el frame. Esto es utilizado por los links que quieran
desplegar el contenido de una página en un frame distinto al que se encuentran.
SCROLLING: puede ser YES (siempre existirán las barras de desplazamiento), NO
(nunca existirán las barras de desplazamiento, aun si el contenido no entra en la
ventana), o nada (aparecerán las barras solo si son necesarias).

Veamos como sería el HTML principal de una página de noticias que este dividida en tres
columnas, en donde la primera tendrá un conjunto de opciones del sitio (ocupará el 15% de la
ventana), la columna de la derecha tendrá los encabezados de noticias de otros sitios
(ocupará un 15% de la ventana), y la columna central tendrá las noticias del sitio (ocupará lo
que quede de la ventana).
El HTML sería:

1 de 3 29/07/2011 03:41 p.m.

:: LAD - Linux a Distancia :: file:///I:/CURSO PHP/CLASE 013.htm

El HTML sería:

<HTML>
<HEAD>
<TITLE>Muchos Frames</TITLE>
</HEAD>
<FRAMESET COLS=15%,*,15%>
<FRAME SRC=opciones.html SCROLLING=NO>

<FRAME SRC=cgi-bin/noticias.pl SCROLLING=NO NAME=Central>

<FRAME SRC=cgi-bin/noticias_ajenas.pl SCROLLING=NO NAME=Otros>
</FRAMESET>
</HTML>

Formularios
El HTML no solamente proporciona utilidades para darle formato a la salida sino que nos
provee de algunos elementos para poder interactuar de forma más avanzada con el usuario.
Estos componentes son la base para poder crear CGIs. Los formularios nos permitirán poner
botones, cajas de texto, etc, en nuestras páginas para que el usuario pueda proveer
información más completa y poder hacer verdaderas páginas dinámicas.
Si bien esto es parte de la programación de CGIs (discutida en la próxima clase) diremos que
todo lo que se encuentre en un formulario y tenga asignado un nombre, podrá ser recuperado
por el programa que lo reciba. Cada formulario tendrá también, un programa asociado para
procesarlo. Dentro de una misma página se pueden tener varios formularios (aunque no se
pueden anidar) y los componentes que esten en un formulario no se verán en los demás.
Un formulario queda definido por los tags <FORM> y </FORM>. El tag FORM no tiene una
representación gráfica, sino que simplemente agrupa a todos los componentes que luego
agreguemos en el.
Entre las opciones que tiene FORM podemos encontrar:

ACTION: aquí se especifica a que programa (scripts) se debe llamar cuando se sube el
formulario (por ejemplo, ACTION=http://www.misitio.com/cgi-bin/vender.pl)
METHOD: Determina con que método se subiran los datos del formulario. El método
puede ser GET o POST.
Si el método es GET los valores viajarán a través de la URL (será visible al usuario) y
tiene la desventaja de que el tamaño de la URL es limitado y pueden llegar a perderse
parte de los datos si estos son muy grandes.
Si es POST los valores se pasaron por otra conexión al servidor. La ventaja del POST es
que no se esta limitado con el tamaño, y la desventaja es que se "más lento" (se hace
otra conexión).
NAME: Nombre que tiene el formulario.

Ejemplo:

<FORM ACTION=cgi-bin/procesar.pl METHOD=POST>

</FORM>

El tag INPUT
El tag INPUT es el utilizado para ingresar datos. Este tag permite crear cajas de texto, cajas de
contraseña, botones, checkbox, opciones, botones de imágenes y campos escondidos.
Todas estas posibilidades tiene algo en común: todas tienen un nombre que las identifica y
tienen un valor asociado. Estas opciones serán NAME y VALUE respectivamente.
El tag INPUT tendrá también una opción, TYPE, que determinará de cual de todos los
componentes queremos usar.

Si TYPE=TEXT entonces se creará una caja de texto. Si la opción VALUE esta especificada, dicho
valor será el que contenga la caja por defecto. El tipo TEXT tiene dos opciones más: SIZE que
determina el ancho de la caja de texto (cuantos caracteres se verán) y MAXLENGTH que
determina cuantos caracteres admitirá como máximo.

Si TYPE=PASSWORD sera similar a TEXT pero cuando se escribe dentro de esa caja de texto los
caracteres aparecerán como asteriscos (*).

Si TYPE=SUBMIT entonces se creará un botón que permite subir el formulario para ser
procesado. El valor que tenga la opción VALUE será el texto que aparecerá dibujado sobre el
botón.

Si TYPE=IMAGE entonces se creará un botón que funciona igual que SUBMIT pero con la
diferencia que este será una imágen. Para ello, se posee una opción extra, SRC, que
determinará desde donde se obtendrá (la URL) la imágen que se desea mostrar.

Si TYPE=HIDDEN entonces se creará un campo escondido. Este tipo de campo es especialmente

útil para programar CGIs, en particular para pasar valores entre distintos formularios.

Si TYPE=CHECKBOX entonces se crearán las clásicas casillas para seleccionar. En este caso el
valor que tenga la opción VALUE será la que se muestre al lado del rectángulo de selección. Si
se desea que por defecto la opción aparezca marcada se debe agregar la opción CHECKED.

2 de 3 29/07/2011 03:41 p.m.

:: LAD - Linux a Distancia :: file:///I:/CURSO PHP/CLASE 013.htm

se desea que por defecto la opción aparezca marcada se debe agregar la opción CHECKED.

Si TYPE=RADIO entonces se crearán la selección de opciones unitaria. Es decir, el navegador

agrupará a todos aquellos componentes de tipo RADIO que tenga el mismo nombre, y solo
permitirá que se elija uno y solo uno de ellos. Al igual que con los CHECKBOX el valor que tenga
la opción VALUE será el texto que se muestre al lado del circulo de selección. Si se desea que
por defecto la opción aparezca marcada se debe agregar la opción CHECKED.

El tag TEXTAREA
Este tag permite crear cuadros de texto bidimensionales. A diferencia de los INPUT TYPE=TEXT
los TEXTAREA permiten ingresar varias líneas de texto. Cada línea estará delimitada por un
\r\n (para cuando se procesa el formulario). Este tag tiene, por supuesto, la opción NAME para
ser identificado luego desde el CGI. También posee la opciones COLS que determina la
cantidad de columnas que ocupará el cuadro, y ROWS que determina la cantidad de filas que
ocupará el cuadro (visualmente).
Este tag, y también a diferencia del tag INPUT, tiene un tag que lo cierra (</TEXTAREA>
obviamente). Todo lo que se encuentre dentro de estos dos tags se tomará como valor por
defecto. Se debe aclarar que solo se permite texto plano dentro de estos dos tags, ya que lo
que se escriba como HTML será ignorado y pasado directamente al cuadro de texto.

El tag SELECT
Este tag se utiliza para crear tanto listas como combobox (listas desplegables). SELECT creará
un cuadro con todas las opciones que se le otorguen y permitirá elegir una o más de ellas. Las
opciones se determinan mediante el tag <OPTION>...</OPTION>. Lo que se encuentre dentro
de estos tags será lo que vera el usuario por pantalla (y por defecto el valor que se obtendrá
cuando se sube el formulario). Si se desea dar otro valor a cada opción se puede utilizar la
opción VALUE dentro del tag OPTION y asignarle el valor que se desee.
También existe la opción SELECTED para que por defecto, esa opción aparezca seleccionada.
El tag SELECT también tiene algunas opciones. Primero tiene la opción NAME al igual que todos
los demás componentes. Posee tambien la opción MULTIPLE la cual le dice al navegador se
debe o no permitir que se elijan más de una opción. También posee la opción SIZE que
determina la cantidad de elementos que se veran al mismo tiempo en pantalla. Si la cantidad
de elementos es mayor que la especificada en SIZE, entonces aparecerá una barra de
desplazamiento para poder moverse y elegir cualquier elemento.
Si no se especifico la opción MULTIPLE y SIZE=1 entonces la lista se convierte en una lista
desplegable.

Ejercicios
1. ¿Cual es la diferencia entre los metodos GET y POST?
2. ¿Que formas de entrada tiene el usuario mediante el tag INPUT?
3. ¿Cual es la diferencia entre el tag OL y UL?
4. ¿Para que sirven los frames?
5. ¿Como armaria una pagina que este dividida en 5 partes, de modo que queden 3
paginas en la primer fila y 2 en la segunda?

3 de 3 29/07/2011 03:41 p.m.