Sistemas Informticos
Grado en Matemticas / Grado en Ingeniera Informtica
Curso 2010/2011
Nombre: .......................................................
Grupo: 1
Fecha:
/ 10 /2010
PRCTICA 5
HTML. TABLAS Y FORMULARIOS.
En esta prctica introduciremos dos nuevos elementos de nivel de bloque
que nos permitirn conseguir dos efectos nuevos en nuestros sitios web. En
primer lugar, trabajaremos con tablas en HTML. En segundo lugar, veremos
cmo se pueden crear formularios a travs de los cuales los usuarios de una
web pueden enviar informacin a un servidor.
Antes de entrar a explicar en ms detalle los tags que permiten definir
tablas y formularios vamos a explicar alguna propiedad ms de los tags
HTML que nos permitan entender mejor lo que haremos ms adelante. En
general, cualquier tag HTML (p. ej. <a></a>) tiene asociados dos tipos de
componentes (diferentes para cada tipo de tag, y que son opcionales):
1. Atributos: los atributos nos permiten definir
adicionales de los tags. Su sintaxis de uso es:
caractersticas
<tag atributo1=valor1 atributo2=valor2></tag>
Por ejemplo, si recuperamos el tag <a></a> que nos permita definir
orgenes y destinos de vnculos (anclas o enlaces), podemos ver que
en su lista de atributos (http://html.conclase.net/w3c/html401es/struct/links.html#edef-A) contiene algunos de los siguientes:
name: asigna un nombre, de modo que el mismo pueda actuar
como destino de un vnculo.
href: especifica la localizacin de un sitio en la web (o en
nuestra propia pgina), enlazando as el elemento actual con
dicho sitio.
Puedes encontrar la lista exhaustiva y sus funciones en el enlace
anterior.
2. Elementos: los elementos de un tag son aquel conjunto de tags que
podemos encontrar dentro del mismo. Por ejemplo, dentro de un tag
<li></li> no podemos encontrar un tag <body>, porque el
navegador no sabra interpretarlo de forma correcta. Para conocer los
tags que pueden ser elementos de otro, puedes consultar la
especificacin de HTML 4.01. Por ejemplo, dentro de una lista
(<ol></ol>
o
<ul></ul>),
consultando
http://html.conclase.net/w3c/html401-es/struct/lists.html#h-10.2
podrs comprobar que los elementos disponibles son:
<li>: Una o ms copias del atributo <li>.
Por lo tanto, dentro de una lista, el nico elemento que podemos
encontrar son <li>. Dentro de cada <li> podremos encontrar los
elementos que permita el mismo. Cules son? (Vers que los
mismos estn definidos como flow, y pulsando el enlace puedes
comprobar que esto incluye cualquier elemento de bloque, como
H1H6, p, ol, ul, table o de lnea como sub, sup, span, br)
1-8
Con las ideas anteriores intentaremos presentar ahora cmo construir
tablas y formularios en HTML, basndonos tanto en los atributos como los
elementos que pueden contener ambas.
Parte 1: Tablas en HTML.
Las tablas en HTML son una forma de organizar la informacin para que la
misma se muestre por medio de filas y columnas. Son extremadamente
tiles y permiten conseguir efectos que con otros elementos de nivel de
bloque (H1H6, p, ol, ul) no se podran conseguir. Eso ha llevado a que
incluso muchos desarrolladores web las utilicen para dar formato a sus
sitios web, aunque esta prctica est desaconsejada incluso por la
especificacin estndar de HTML 4.01 (Captulo 7, Tablas): No deberan
usarse tablas con la nica finalidad de organizar la presentacin de los
contenidos de un documento (es decir, de crear el "layout"), ya que esto
puede ocasionar problemas cuando se represente en un medio no visual.
Adems, al incluir grficos, estas tablas pueden forzar a los usuarios a
hacer desplazar horizontalmente la pantalla para ver una tabla diseada en
un sistema con una pantalla ms grande. Para minimizar estos problemas,
los autores deberan usar hojas de estilo en lugar de tablas para organizar
la presentacin.
Vamos a ver cules son los principales tags que pueden ser utilizados en
el desarrollo de una tabla en HTML:
<TABLE></TABLE>:
Puedes
encontrar
su
especificacin
en
http://html.conclase.net/w3c/html401-es/struct/tables.html#edef-TABLE. El
tag table marca el principio y el final del contenido de la tabla (dentro del
mismo se incluir el ttulo de la misma, las cabeceras, el pie o cualquier
informacin que contenga la misma).
Atributos ms relevantes del tag table (por tanto, irn situados como <table
atributo1=value atributo2 =value >):
summary: resumen del contenido de la tabla, pensado para
dispositivos (navegadores) que se presentan en medios no visuales
(para invidentes). Muchos de los navegadores convencionales no lo
muestran de manera visual, pero es conveniente incluirlo.
width: anchura de la tabla. La anchura se puede especificar por
medio de un valor absoluto en pxeles (width=600), o un valor
porcentual con respecto a la anchura de la ventana de visualizacin
(width=75%). De las dos opciones, la segunda es ms
recomendable porque permite al navegador redimensionar las tablas
dinmicamente. Si no ponemos un valor, el navegador tomar uno
por defecto.
border: permite definir la anchura del marco que rodea a una tabla (y
las celdas de la misma). Se mide en pxeles, y se puede especificar
como border=5 (borde de 5 pxeles).
cellspacing: permite definir la distancia que debe haber entre los
bordes de la tabla y las celdas de la misma, as como entre las celdas
de la tabla. Por ejemplo, cellspacing=2, definira 2 pxeles de
distancia.
cellpadding: permite definir la distancia entre el borde de las celdas
de la tabla y el contenido de las mismas. Tambin se define, como
2-8
cellspacing, en pxeles (o en porcentaje, aunque su significado es
menos claro). Puedes encontrar una representacin grfica del
significado
de
cellpadding
y
cellspacing
en
http://html.conclase.net/w3c/html401-es/struct/tables.html#h-11.3.3.
Hay
algunos
otros
atributos
que
puedes
encontrar
en
http://html.conclase.net/w3c/html401-es/struct/tables.html#edef-TABLE
que aqu no detallaremos.
Elementos propios del tag table (irn todos ellos situados dentro del bloque
<TABLE></TABLE>):
<caption></caption>: el elemento caption debe definir el ttulo,
contenido o descripcin de la tabla. Los agentes visuales
(navegadores) lo mostrarn por defecto encima de la tabla.
<colgroup></colgroup>: permite definir grupos de columnas que
vayan a tener unas mismas propiedades (especificadas en los
atributos de colgroup). Los ms representativos son:
o span: define el nmero de columnas que comprenden el
grupo de columnas afectado por colgroup.
o width: permite definir la anchura por defecto para las
columnas afectadas por el colgroup.
Por ejemplo, el tag <COLGROUP span = "6" width = "16%"> </COLGROUP>
define un grupo de 6 columnas, la anchura de las cuales ser cada una
del 16% del total (sern todas de la misma anchura).
<col>: el elemento col tiene atributos similares a los de colgroup.
Adems, lo podemos usar dentro de colgroup pare definir subgrupos de
columnas que compartan caractersticas.
Pasamos ahora a ver los tags que nos van a permitir definir las distintas
filas de la tabla (no es obligatorio usar los tres tipos en cada tabla):
<THEAD></THEAD>: Define las cabeceras de la tabla. No es obligatorio
incluirla. La misma debe estar compuesta por, al menos, una fila, que
ser un elemento de la forma <TR></TR> (veremos ms adelante cmo
definir las filas).
<TBODY></TBODY>: Define el cuerpo de la tabla. Al igual que thead,
debe estar compuesta por, al menos, una fila, de la forma <TR></TR>.
<TFOOT></TFOOT>: Define el pie de la tabla. Al igual que los anteriores
estar compuesto por filas de la forma <TR></TR>.
El nico elemento que podemos encontrar en los anteriores tags thead,
tbody y tfoot es:
<TR></TR>: permite definir las distintas filas (tr = table row) de la
tabla. Cada fila, a su vez, slo puede estar compuesta por los siguientes
elementos:
o <TH></TH>: celda de encabezado. Generalmente mostrada
en negrita. El tag de cierre es opcional.
o <TD></TD>: celda de datos. El tag de cierre es opcional.
Dentro de los tags td y th podemos encontrar cualquier
elemento de nivel de lnea (a, strong, em) o de bloque (p, ol,
ul, table).
Los tags th y td tienen varios atributos. De ellos, los que ms
nos interesan son los siguientes:
3-8
rowspan: permite hacer que una celda ocupe varias
filas (<TD rowspan=3> hara que la celda definida
ocupara 3 filas).
colspan: permite hacer que una celda ocupe varias
columnas (<TD colspan=2> hara que la celda
definida ocupara 2 columnas).
Ambos tags se pueden usar de forma conjunta para
definir una celda que ocupe varias celdas y columnas.
align: define la alineacin del contenido de la celda
con respecto a la misma. Puede tomar, entre otros,
los valores left, center y right.
valign: define la alineacin vertical del contenido de
la celda con respecto a la misma. Sus valores pueden
ser top, middle, bottom y baseline.
Los dos atributos anteriores tambin se pueden aplicar a
tr, afectando a todas las celdas de una fila, a thead,
tbody y tfoot, afectando a todas las celdas de esas
reas, y a colgroup y col, afectando a todas las celdas
de esas columnas.
En la pgina web http://www.htmlquick.com/es/tutorials/tables.html
puedes encontrar varios ejemplos de tablas que hacen uso de los anteriores
elementos.
1. Crea un fichero practica05_horario.htm (incluye en el mismo cabeceras y
metas como vimos en la prctica 4). Haz uso de los anteriores ejemplos
para realizar la tabla HTML correspondiente a tu horario del primer curso,
primer cuatrimestre de GII o GM. Puedes encontrar el horario en
http://www.unirioja.es/facultades_escuelas/fceai/horarios/horarios_10_11/pdf/gii_1.1.pdf
o en
http://www.unirioja.es/facultades_escuelas/fceai/horarios/horarios_10_11/pdf/gm_1.1.pdf.
Selecciona el grupo de prcticas (INFOR A1 INFOR A4) y el grupo reducido
(REDUC A1REDUC A3) que te corresponda. Recuerda validarla al terminar,
e incluir el icono correspondiente. Por ejemplo, la tabla HTML, para una
persona de GII que est en el grupo REDUC A2 y en el grupo INFOR A1
debera quedar como:
4-8
2.
Crea un fichero practica05_calendario.htm (incluye en el mismo
cabeceras y metas como vimos en la prctica 4). Realiza una tabla que
contenga el calendario del primer cuatrimestre del curso 2010/2011. Puedes
encontrar
el
mismo
en
http://www.unirioja.es/estudiantes/calendario_academico/Calend_presencial10.pdf.
El resultado final debera ser algo parecido a:
5-8
Puedes encontrar las dos imgenes que hemos incrustado en los meses de
Septiembre
y
de
Diciembre
en
y
http://www.unirioja.es/cu/jearansa/1011/ficheros/luna1.jpg
http://www.unirioja.es/cu/jearansa/1011/ficheros/luna2.jpg.
El tag para introducir imgenes en HTML tiene la siguiente sintaxis:
<IMG>: es un tag sin contenido, y por tanto no es necesario que se
incluya ni tag de cierre ni ningn texto adicional. Al ser un tag sin
contenido, no hay elementos que podamos introducir dentro del mismo. Sin
embargo, s dispone de varios atributos que es importante conocer:
src: define la direccin URL donde se encuentra la imagen. En general
ser preferible que la ruta de la misma se d en local, en lugar de
facilitar la ruta entera.
alt: es un atributo obligatorio que ofrece un texto alternativo para
dispositivos que no sean capaces de mostrar imgenes. Debe ser
explicativo sobre el contenido de la imagen.
height: especifica la altura (en pxeles o en porcentaje) con la que se
mostrar la imagen en el navegador. Por defecto, se muestra la de la
imagen original.
width: especifica la anchura con la que se muestra la imagen.
Puedes encontrar la lista exhaustiva de atributos del tag img en
http://html.conclase.net/w3c/html401-es/struct/objects.html#edef-IMG.
Parte 2: Formularios en HTML.
Hasta ahora, todos los elementos que hemos visto en pginas web eran
estticos, desde el punto de vista de que slo nos permitan mostrar
informacin. Los formularios nos permiten tambin recoger informacin de
los usuarios de nuestra pgina web. La forma de recoger esa informacin
puede ser variada. Por ejemplo, puede haber un programa en el servidor
(por ejemplo, en php, jsp) que se encargue de recoger la informacin y
envirnosla a nosotros. Tambin podemos hacer que la informacin
6-8
recogida en el formulario nos sea enviada por correo electrnico. En esta
seccin veremos los distintos tipos de tags y sus atributos que nos
permitirn definir formularios.
El tag que permite definir formularios en HTML es form:
<form></form>: el mismo debe especificar por medio de atributos
algunas de las cuestiones relevantes sobre el formulario:
o action: debe contener la url del procesador del formulario. Por
ejemplo,
<form
action=http://miweb/programa>.
Tambin
podemos usar action=mailto:midireccion@correo para que el
formulario sea enviado por mail.
o method: especifica el mtodo de envo de la informacin, entre GET
y
POST.
Puedes
ver
sus
diferencias
en
http://html.conclase.net/w3c/html401-es/interact/forms.html#submit-format.
accept-charset: codificacin de caracteres que debe ser aceptada
por el servidor para manejar el formulario enviado.
Existen algunos atributos adicionales cuya definicin puedes encontrar
en http://html.conclase.net/w3c/html401-es/interact/forms.html#h-17.3.
o
Adems, un formulario puede contener como elementos cualquiera de los
elementos de nivel de bloque, as como controles. Los controles son la
forma de interaccin del usuario de la web con la misma. Algunos de los
controles ms habituales son:
<input>: permite definir diferentes controles. Est prohibido incluir
tag de cierre. Sus atributos principales son:
o type: puede tomar el valor text (para un campo de texto de
una lnea), password (un campo contrasea), checkbox
(casilla de verificacin), radio (botn de radio), submit
(botn de envo del formulario), reset (botn de reinicio del
formulario). Puedes encontrar ejemplos de cmo se muestra
cada
uno
de
los
tipos
en
http://www.w3schools.com/html/html_forms.asp.
o name: asigna el nombre al control. Se usa al enviar el
formulario al destinatario del mismo.
o value: define el valor inicial del control.
o size: define el tamao del control. Por ejemplo, para los
campos de texto define el nmero de caracteres inicial.
o checked: para los campos de tipo radio o checkbox
especifica que el botn est marcado.
http://html.conclase.net/w3c/html401-es/interact/forms.html#h-17.4.2
En
puedes encontrar ejemplos de controles creados con input.
<select></select>: permite crear mens de seleccin simple o
mltiple. Debe contener como elemento uno o varios elementos <option>
que detallamos un poco ms adelante. Veamos primero los atributos que lo
componen:
o name: nombre del control.
o size: nmero de filas que son visibles del men (puede ser
distinto del nmero de opciones que contiene el men).
o multiple: valor booleano (trueo false) que permite
seleccionar varias opciones de forma simultnea. Por defecto,
su valor es false (y la seleccin es simple).
7-8
Un tag select estar formado por uno o varios elementos <option>:
<option></option>: Cada elemento option representa una de las
opciones que se muestran en el men. Debe contener una secuencia de
caracteres. Como atributos dispone de los siguientes:
o selected:
especifica
que
la
opcin
indicada
est
preseleccionada.
o value: define el valor que se enva al usuario por esa opcin.
Si no se detalla, el valor ser el texto del elemento option.
En la pgina http://www.pcweb.es/manual_html/mostrar.php?opcion=select
puedes encontrar algunos ejemplos de formularios select con seleccin
simple y mltiple de opciones.
<textarea></textarea>: a diferencia de <input type=text> (que
genera un campo de texto de una lnea), textarea permite definir un
campo de texto de varias lneas. Lo que escribamos dentro del control ser
el valor inicial de la caja de texto. Admite los siguientes atributos:
o name: nombre del control.
o rows: nmero de lneas de texto visibles de la caja de texto.
o cols: anchura visible de la caja de texto en nmero de
caracteres.
En la pgina http://es.kioskea.net/contents/html/htmlform.php3 puedes
encontrar un tutorial sobre formularios web y ejemplos de cada uno de los
elementos anteriores.
3. Con las anteriores herramientas, crea un formulario en un fichero
practica05_formulario.htm (incluye en el mismo cabeceras y metas como
vimos en la prctica 4) que responda al siguiente aspecto. Puedes encontrar
la lista de Departamentos de la UR en http://www.unirioja.es/dptos/ y la
lista de edificios en http://www.unirioja.es/universidad/presentacion/campus.shtml:
8-8
