Listas, Tablas y Formularios

Listas, Tablas y FormulariosHTML1CREACIN DE LISTAS EN HTMLEn la mayora de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con vietas sencillas o tambin con letras o nmeros. Adems, para que las pginas tengan ms vistosidad, se pueden colocar imgenes delante de cada prrafoLISTAS NO ORDENADASLas listas no ordenadas son aquellas que se encuentran entre las etiquetas

y

, etiqueta de apertura y cierre respectivamente. Si se quiere aadir un nuevo item, se tendr que hacer dentro de las etiquetas y . Si no se le indica nada a la etiqueta , sta se generar puntos de forma automtica. Pero si se quiere definir un smbolo diferente del punto, se puede hacer uso del atributo type. Con este atributo se puede hacer que la lista est definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia depender del navegador, es decir, el resultado puede ser distinto segn se use un navegador u otro. No todos los navegadores se comportan de la misma forma a la hora de interpretar este atributo. Ejemplo 202LISTAS ORDENADASSi lo que se pretende es definir una lista ordenada, se tendr que usar las etiquetas

. Adems, cada item de la lista se escribir con la misma etiqueta que para las listas no ordenadas: . Pero al ser listas ordenadas los smbolos sern nmeros y stos se irn generando automticamente por orden, conforme se escriban nuevos puntos.En las listas ordenadas, se puede hacer que el primer punto comience con el nmero que se quiera. Lo anterior gracias al atributo value. Los siguientes puntos que se escriban se generarn automticamente por orden, partiendo de ese nmero.Para el caso, un lista empiece por el nmero 20, quedara como sigue en el ejemplo 213Mas sobre Listas:LISTAS DE DEFICIONESEste tipo de listas no es de uso frecuente. Las listas de definiciones se usan cuando se quiere hacer una enumeracin tipo diccionario donde se tienen varios trminos y su definicin.Para crear una lista de definiciones se usan las etiquetas , y . La etiqueta indica que dentro de ella va a ir una lista de definiciones.La etiqueta indica que dentro de ella va un trmino que se va a definir.La etiqueta dice que dentro de ella se encuentra una definicin asociada a un trmino.Los listados de definicin se separarn automticamente si se escriben varios de ellos. Ejemplo 22Tambin se puede ver el efecto de anidamiento o sea el uso simultaneo(combinacin) de varios tipos de listas. Ejemplo 234CREACIN DE TABLAS EN HTMLEn HTML, una poderosa herramienta a la momento de mostrar cierto tipo de informacin son las tablas. El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no deben ser usadas para crear divisiones de cara a mostrar una pgina web, es decir, es preferible que una pgina web no est dividida en distintos espacios usando tablas. Para maquetar una pgina web y dividirla en distintos espacios se usarn otras herramientas (capas, elementos flotantes, etc.).Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos: el elemento TABLE (estructura contenedora principal)el elemento TR (contenedor de fila) y el elemento TD (celda).Un caso se muestra en el ejemplo 24Cuando el contenido de una celda debe ser vaco, se usa un espacio en blanco () como su contenido. Algunos navegadores tienen problemas representando celdas vacas. Por lo que se sugiere:

5UNIFICACIN DE CELDAS

En algunas ocasiones, puede ser necesario unificar dos o ms celdas en una sola que pasar a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos rowspan (para unificacin vertical) y colspan (para unificacin horizontal).Ejemplo 25 de Unificacin horizontal con colspanEjemplo 26 de Unificacin vertical con rowspan

CELDAS DE ENCABEZADO

Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento TD), ya definido anteriormente, y la otra es un tipo especial de celda (elemento TH) que contiene informacin de encabezado para un conjunto de celdas especficas.TTULO DE LAS TABLAS CON EL ELEMENTO CAPTION

Mediante el elemento caption, se puede definir el ttulo de unatabla. Este ttulo debera describir de una manera breve y precisa el contenido y la naturaleza de la tabla y es habitualmente presentado en algn lugar cercano a la tabla. El elemento caption slo est permitido si va justo despus de la apertura de la tabla. El ejemplo 27 muestra el uso de ambos tipos.FORMULARIOS EN HTML

En HTML, un formulario es una seccin del documento destinada a que el usuario introduzca datos que van a ser enviados a algn lado. (Un servidor)En HTML un formulario puede contener cosas muy variadas: texto normal, elementos especiales llamados controles (checkboxs, radiobuttons, comboboxs, etc.), y otros elementos especiales denominados etiquetas (labels). Los usuarios normalmente "completan" un formulario modificando sus controles, ya sea introduciendo texto, seleccionando objetos de un men, etc., antes de enviar el formulario y que ste sea procesado.Veamos el siguiente cdigo en el editor como ejemplo 28 para poder visualizarlo en el navegador. Hay algunos elementos nuevos que aparecen.

El elemento de entradaEl elemento ms importante de un formulario es el elemento de entrada.El elemento de entrada se utiliza para seleccionar la informacin del usuario.Campos de Texto (Text Fields) define un campo de entrada de una sola lnea que el usuario puede introducir texto.Etiqueta (label tag) La etiqueta define una etiqueta para un elemento .

El elemento no hace nada especial como para el usuario. Sin embargo, proporciona una mejora de uso para los usuarios de ratn, ya que si el usuario hace clic en el texto dentro del elemento , cambia el control.

El atributo de la etiqueta de debe ser igual al atributo id del elemento relacionado a usarlos juntos.

En relacin al formularioEl formato esta listo para que se rellenen los datos de este formulario. Que sucede al pulsar Enviar?La informacin se enva al servidor o sitio indicado y se utiliza para algo. Qu utilidad se le puede dar a esta informacin? En general, un formulario html nos sirve para acceder a otra URL (direccin web) que recibe la informacin.Cuando la nueva URL recibe la informacin pueden ocurrir varias cosas: que se muestre en pantalla, que se escriba en una base de datos, que muestre una imagen distinta segn la informacin que se haya enviado Algunas de las cosas que se han citado no se pueden hacer usando HTML. Por ejemplo, no se puede escribir en una base de datos usando HTML. Sin embargo, s se puede recoger la informacin en un formulario o pgina web HTML y luego acceder a una direccin web de tipo php, asp, jsp que son tipos de pginas web que permiten realizar otro tipo de funciones ms avanzadas relacionadas con la programacin, como es la escritura en bases de datos para almacenar la informacin.

En esta unidad se tocara solamente en el lenguaje HTML no se vera como registrar los datos en el servidor. Sin embargo, si est impaciente puede consultar como capturar los datos en el servidor mediante PHP.Por lo que se tratara mas que todo el aprender y conocer todos los elementos para la creacin de formularios en HTML y en un paso posterior estudiar la registracin en el servidorEn el Ejemplo 29 aparece la sintaxis bsica para crear un formulario donde ingresemos nuestro nombre.Para crear un formulario debemos utilizar el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form se veran otros elementos para crear botones, editores de lnea, cuadros de chequeo, radios de seleccin etc.

Anlisis dela sintaxis de este cdigoLo primero es la apertura de la marca form donde debemos definir dos propiedades (action y method):

Lo siguiente es el cuadro de texto donde se ingresa el nombre:Ingrese su nombre:
El mensaje "Ingrese su nombre:" es un texto fijo.El elemento input permite definir un cuadro de texto (editor de lnea) si se asigna a la propiedad type el valor "text".Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto. Este es un dato fundamental para poder recuperar el dato ingresado en el servidor (por ejemplo mediante PHP)Por ltimo, se inicializa la propiedad size con el valor 20, esto significa que el cuadro de texto se dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar por parte del visitante sino la cantidad de caracteres que se pueden visualizar)Seguidamente: Tambin mediante el elemento input se define un botn para el envo de datos al servidor. Se debe inicializar la propiedad type con el valor submit, con esto ya se tiene un botn para el envo de datos.La propiedad value almacena la etiqueta que debe mostrar el botn.Finalmente se cierra el formulario: PropiedadesValoresComentariosActionPagina webAh se almacenaMethodPost o GetNormalmente post