Una tabla bsica <TABLE> y </TABLE> son las etiquetas donde est contenida la tabla <TR> y </TR> son

las etiquetas que indican el comienzo y fin de una fila <th> y </th> si es una fila de cabecera) <TD> y </TD> sealan una celda. Atributos de la etiqueta TABLE Todos los atributos son opcionales BORDER="4". Indica el tamao del borde en pxels, en este caso 4. Si no se indica nada carece de borde WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 pxels) o como un porcentaje (50% del ancho disponible) CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2 CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1 ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro. Otro ejemplo Escribimos: <TABLE BORDER="3" CELLSPACING="5" WIDTH="150"> <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE> Atributos de las etiquetas de fila y celda Las etiquetas que soportan las filas y las celdas son WIDTH="30". Ancho de toda la fila o celda. Tambin se puede dar en % ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila COLSPAN=3. Especifica el nmero de columnas que abarca la fila ROWSPAN=2. Especifica el nmero de filas que abarca la columna Visualizamos 1 3 2 4

Etiquetas <FORM>...</FORM> Estas etiquetas son las que delimitan el comienzo y el final de un formulario. <FORM> y</FORM>. Si no lo hacemos as, I.Explorer s mostrara el elemento, pero Nestcape no. Sus principales atributos o parametros son: * action = "ruta_programa". Indica el programa del servidor que va a "tratar" las variables que se enven con el formulario o el envo de los datos mediante correo electrnico mediante el valor "mailto: direccion_de_correo

* method = " POST / GET " . Indica el mtodo segn el que se van a transferir las variables del formulario. POST enva los datos, normalmente al programa CGI definido en action o por correo si en action hemos utilizado mailto. * enctype =" tipo ". Indica el tipo de documento en formato MIME. El mas usado para que lleguen el contenido a travs de un mail con el mtodo post sera "text/plain". Especifica el tipo de encriptacin que se va a realizar con los datos que se van a enviar. Este atributo solamente se aplica si method es POST* accept =" tipo MIME ", que indica al servidor qu tipos de archivo MIME se van a aceptar en el envo. Normalmente no se usa, pero si nos es necesario el administrador de nuestro servidor web nos puede indicar cuales son aceptados. * accept-charset = "charset ", que especifica la lista de caracteres permitidos que deben ser interpretados correctamente por el servidor receptor. Por ejemplo, si el servidor admite como caracteres permitidos cdigo HTML, en valor de charset sera "text/html". * target= " nombre ". . Este atributo funciona igual que el homnimo de las etiquetas <A> y<FRAME>, e indica en qu ventana de una pagina con frames se debe mostrar el resultado del proceso de datos mediante el programa CGI.

Etiqueta <INPUT> La etiqueta <INPUT> va a definir la mayora de los diferentes elementos que va a contener el formulario. Sus atributos y valores son: * TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuacin:

text, que sirve para introducir una caja de texto simple, y admite los parametros:

o o o o o o o o o

name=" nombre", que asigna de forma unvoca un nombre identificador a la variable que se introduzca en la caja de texto. maxlenght=" n ", que fija el nmero maximo de caracteres que se pueden itroducir en la caja de texto. size=" n ", que establece el tamao de la caja de texto en pantalla. value=" texto ", que establece el valor por defecto del texto que aparecera en inicialmente en la caja de texto. disabled, que desactiva la caja de texto, por lo que el usuario no podra escribir nada en ella. accept = " lista de content-type", Indica el tipo de contenido que aceptara el servidor. Sus posibles valores son: readonly, que establece que el texto no puede ser modificado por el usuario. tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario. alt= " texto ", que asigna una pequea descripcin al elemento.

radio, que define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar por uno solo de ellos, que se marca con el ratn o tabulador. Admite los parametros:

o o o o o

name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo. value =" valor ", que define un valor posible de la variable para cada uno de los radio botones. checked, que marca por defecto uno de los radio botones del grupo. disabled, que desactiva el radio botn, por lo que el usuario no podra marcarlo.

tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario. checkbox, que define una o mas casillas de verificacin, pudiendo marcar el usuario las que desee del conjunto total. Si pinchamos una casilla con el ratn o la activamos con el tabulador y le damos a la barra espaciadora la casilla se marca; si volvemos a hacerlo, la casilla se desmarca. Sus parametros complementarios son:

o o o o o

name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas. value =" valor ", que define un valor posible de la variable para cada uno de casillas de verificacin. checked, que marca por defecto una o mas de las casillas del grupo. disabled, que desactiva la casilla de verificacin, por lo que el usuario no podra marcarla. tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

button, que define un botn estandar. Este botn puede ser usado para diferentes acciones, pero normalmente se le da utilidad mediante JavaScript, mediante el evento "OnClick". Sus parametros son:

o o o o

name=" nombre", que asigna un nombre al botn, que nos puede servir para acciones con lenguaje de script. value=" valor ", que define el texto que va a figurar en el botn. disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus permanece inactivo. tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

image, que introduce un botn definido por una imagen, en vez del formato estandar de botones, con lo que podemos as personalizar el botn.

name=" nombre", que asigna un nombre al botn para identificarlo de forma nica y poder as acceder luego a sus propiedades.

src= " ruta imagen ", que establece la ruta dnde localizar el fichero de imagen. Esta ruta puede ser relativa al directorio web en el servidor o una URL absoluta que define unvocamente la lozalizacin de la imagen. width= " w ", que fija la anchura del botn de imagen. height= " h ", que fija la altura del botn de imagen. align= " left / middle / right / bottom / baseline...", que define la posicin del texto que rodea el botn respecto a este. hspace= " x ", que fija el espacio horizontal que habra entre el botn y el texto que lo circunda. vspace= " x ", que fija el espacio vertical que habra entre el botn y el texto que lo circunda. alt = " texto ", que asocia un texto explicativo al botn de imagen. Al situar el cursor encima del botn se mostrara este texto en forma de tip de Windows. Siempre es conveniente poner este atributo, para que en caso de navegadores de slo texto, de que la imagen no se encuentre en la ruta por cualquier motivo o de que la pagina tarde mucho en cragarse por su peso, el usuario puede ver qu hace el botn de imagen y pueda en consecuencia utilizarlo para tal fin. disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus permanece inactivo . tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario. usemap= " #nombre de mapa ", que nos permite el uso de un mapa de imagenes en el cliente como un dispositivo mas de entrada de datos.

o o o o o o

o o

password, que define una caja de texto para contener una clave o password, por lo que el texto que introduzca el usuario aparecera como asteriscos, por motivos de seguridad. Sus parametros opcionales son los mismos que los del tipo text.

hidden, que define un campo invisible, por lo que no se ve en pantalla. Aunque parece as definido que no tiene utilidad, sus usos son varios e importantes, y los veremos mas tarde. Sus atributos son:

o o

name=" nombre", que asigna un nombre identificador nico al campo oculto.

value=" valor ", que va a ser el valor fijo que se le va a pasar al programa del servidor, ya que el usuario no puede modificarlo. En realidad este valor no tiene porqu ser fijo, ya que lo vamos a poder modificar mediante cdigo de script, lo que nos va a permitir ir pasando una serie de variables ocultas de una pagina a otra. file, que define un archivo que puede ser enviado junto con los datos del formulario. En este tipo de elemento encontramos asociados una caja de texto y un botn en el que encontramos escrito bien "examinar..." bien "browse..." , dependiendo del lenguaje de nuestro navegador, que al ser pulsado nos abre la tpica ventana de exploracin de nuestras unidades de disco, para que seleccionemos el archivo que queremos enviar al servidor. Cuando elegimos uno su ruta aparece en la caja de texto.

submit, que incorpora al formulario un botn de envo de datos. Cuando el usuario pulsa este botn los datos que ha introducido en los diferentes campos del formulario son enviados al programa del servidor o a la direccin de correo indicada en action. Sus atributos son:

o o o

value=" valor ", que define el texto que va a aparecer en el botn de envo. disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus permanece inactivo. tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

Etiquetas <TEXTAREA>...</TEXTAREA> Esta pareja de etiquetas inserta una caja de texto de mltiples lneas, que normalmente se utiliza para introducir comentarios o datos largos en un formulario. Si no se introduce ningn texto entre ambas etiquetas la caja de texto aparecera vaca, para que el usuario lo introduzca, pero si introducimos algn texto entre ambas este aparecera inicialmente en la caja. Si el texto que contiene supera el espacio disponible en la caja aparecera una barra de desplazamiento vertical. Sus atributos y valores son:

name=" nombre",que asigna un nombre identificador al campo, que sera asociado en el envo del formulario al texto introducido en la caja de texto. cols=" x ", que define el nmero de columnas visibles de la caja de texto. rows= " y ", que define el nmero de filas visibles de la caja de texto. wrap= " valor ", que justifica automaticamente el texto en el interior de la caja. Este atributo es de uso complicado. Segn las recomendaciones si su valor es VIRTUAL se enviara todo el texto seguido, en una lnea, mientras que si vale PHYSICAL el texto se enviara separado en lneas fsicas, pero as como se define no lo admiten los navegadores. Usemos cual usemos de los dos el resultado es el mismo: justificacin por lneas fsicas, y as y todo se producen saltos de lnea indeseados. Si construimos la pagina web con un programa de ayuda tipo HomeSite nos encontramos con tres posibles valores de wrap: SOFT y HARD, que hacen lo mismo, alineando el contenido en lneas fsicas, como en los casos anteriores y es el valor por defecto, y OFF, que coloca todo el texto de la caja en una sla lnea, apareciendo entonces una barra de desplazamiento horizontal para poder visualizar todo el contenido de la caja. disabled, que desactiva la caja de texto. Su utilidad es escasa. readonly, que impide que el contenido de la caja sea modificado por el usuario. tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

LABEL La etiqueta <label> se utiliza para adjuntar informacin a los controles. El valor del atributo for debe ser igual al valor id del elemento input para que los reconozca como asociados.

La etiqueta <a> Es dentro de esta etiqueta y de su cierre (</a>) dnde encontraremos el enlace. Todo lo que est dentro de ella, ya sea texto o una imagen, estar considerado como un enlace y el navegador lo interpretar as. Atributo href Para que un enlace est activo debemos indicar dentro de l el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedara as: <a href=enlace>Pincha aqu para ir al destino del enlace</a> Las urls pueden tener dos tipos de rutas o direcciones: Las urls con direccin relativa y las urls con direccin absoluta. Vamos a explicarlas a continuacin: Direcciones absolutas y relativas: Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la direccin. Un ejemplo muy claro es el siguiente: <a href="http://html.hazunaweb.com/112.php">Artculo de enlaces html</a> Si pinchramos en el enlace iramos directamente al artculo de mapas de imgenes del tutorial. Fijaros en lo que hablbamos: podemos apreciar todas las partes de la url. En las direcciones relativas vemos que no est la url completa. En este tipo de direcciones, las partes que faltan de la direccin el navegador las genera de la propia pgina en la que est el enlace. Por ejemplo, si dentro de la pgina http://html.hazunaweb.com/112.php encontrramos la siguiente url... <a href="111.php">Artculo de enlaces html</a>

Atributos de etiquetas FORM y tipos de entrada Etiqueta Atributo METHOD <FORM> ... </FORM> POST GET Enva a la direccin mostrada Especifica el tipo de cdigo submit text realiza la ACTION de la etiqueta <FORM> lnea simple de texto cuya longitud se especifica por el atributo SIZE Valor Resultado Efecto visual

ACTION ENCTYPE

<INPUT>

TYPE

Reset Radio Checkbox NAME SIZE NAME <TEXTAREA> ... </TEXTAREA> ROWS COLS <SELECT> <OPTION> ... </OPTION> </SELECT> <OPTION> ... </OPTION> SELECTED VALUE Eleccin predeterminada Valor forzado NAME

Elimina el contenido del formulario botn de radio casilla de seleccin Nombre Tamao del texto

Casilla de texto

MULTIPLE

Mltiples selecciones posibles