PROGRAMACION DE PAGINAS WEB CON HTML Indice

1. Introduccin al HTML 2. Descripcin de componentes lxicos

1. Caracteres 2. Marcas 3. Nombres 4. Atributos 5. Comentarios 6. Estructura de los documentos Elementos de cabecera Elementos del cuerpo 1. Encabezados o ttulos 2. Definicin de bloques 3. Listas 4. Marcado logico de frases 5. Marcado tipogrfico de frases Hiperenlaces (links o hiperlinks) Formularios 1. Introduccin 2. Elementos de un formulario 3. Campos de entrada 4. Campos de seleccin 5. Areas de texto 6. Envio de formularios Colores Imgenes 1. Mapas Tablas Frames

3. 4.

5. 6.

7. 8. 9. 10.

1.- Introduccin al HTML El HTML (HyperText Markup Language) no es ms que una aplicacin del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El trmino HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. Para crear documentos HTML o pginas WEB solo es necesario un editor de textos cualquiera (hay editores especialmente dedicados para la creacin de estos documentos) y un visor o navegador (browser) que visualize dichos documentos. La descripcin del lenguaje se divide en varias partes : Descripcin de los componetes lxicos del HTML, donde se indica el formato de los caracteres, marcas, nombres, atributos y comentarios. Estructura de los documentos, donde se explican las marcas utilizadas para definir las partes del documento. Caracteres, palabras y prrafos, son los juegos de caracteres aceptados en HTML, adems de la descripcin de como se tratan las palabras y los prrafos.

Soporte de hipertexto, define marcas para definir relaciones entre distintos documentos, e incluso entre partes distintas de un mismo documento. Para ello, HTML define unas marcas denominadas hiperenlaces o links. Formularios, que permiten la comunicacin entre el usuario y el servidor mediante datos que el usuario rellena y envia al servidor para que sean procesados.

2.- Descripcin de los componentes lxicos 2.1.- Caracteres Cada documento HTML puede emplear un juego de caracteres distinto. De todas formas, todas las marcas se pueden escribir usando el cdigo ISO-646, que es el mismo cdigo utilizado en los lectores de correo electrnico (e-mail). Cualquier cadena de caracteres que no represente un marcado, se introduce en el documento como una sola lnea, sin tener en cuenta los saltos de lnea ni los tabuladores, a no ser que esta se encuentre dentro de una marca de texto preformateado. En HTML se reducen los documentos a un cdigo ASCII de 7 bits, por lo que habr que utilizar algunos mecanismos para poder representar todos los caracteres, ya que los caracteres especiales, de control y las tildes no se pueden representar directamente, aunque la mayoria de los editores HTML permiten escribir tildes y las transforman al grabar el documento. Estos mecanismos pueden ser : Referencia por nombre : El caracter se representa con un signo & seguido del nombre del caracter y un punto y coma. Los nombres de los caracteres pueden verse ms alante en la tabla de cdigos. Referencia numrica : El caracter a representar se especifica de la forma &# seguido del nmero del caracter a representar en el cdigo de caracteres seleccionado.

La tabla de caracteres utilizada por HTML es la siguiente: CARACTER -CODIGO � -  	 
 - -  &#13: - -    ! " # $ % ! " # $ % DESCRIPCION Sin usar Tabulador horizontal Salto de lnea Sin usar Retorno de carro Sin usar Espacio Exclamacin Dobles comillas Signo de nmero Dolar Tanto por ciento NOMBRE -------------

& ( ) * + , . / 0-9 : ; < = > ? @ A-Z [ \ ] ^ _ ` A-z { | } ~ --

&#38; &#39; &#40; &#41; &#42; &#43; &#44; &#45; &#46; &#47; &#48; - &#57; &#58; &#59; &#60; &#61; &#62; &#63; &#64; &#65; - &#90; &#91; &#92; &#93; &#94; &#95; &#96; &#97; - &#122; &#123; &#124; &#125; &#126; &#127; - &#159; &#160;

Amspersand Apstrofe Parntesis izquierdo Parntesis derecho Asterisco Signo ms Coma Guin Punto (fin de prrafo) Barra de divisin Dgitos del 0 al 9 Dos puntos Punto y coma Menor Igual Mayor Cerrar interrogacin Arroba (en) Letras A-Z Abrir corchete (izquierdo) Barra de divisin inversa Cerrar corchete (derecho) Circunflejo Subrayado Acento agudo Letras a-z Abrir llave (derecha) Barra vertical Cerrar llave (izquierda) Tilde Sin usar Espacio sin separacin

-------------------------------nbsp

&#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173;

Cerrar exclamacin Centavo Libra Esterlina Signo de divisa general, General Currency Sign Yen Barra vertical partida Seccin Diresis Copyright Gnero femenino Doble menor (abrir comillas francesas o anguladas, angle quotation mark) No (smbolo lgico) Guin dbil (soft hyphen) Registrado Macrn Grados Ms o menos Dos superndice Tres superndice Acento agudo Micro Fin de prrafo Punto medio Cedilla Uno superndice Gnero masculino Doble mayor (cerrar comillas francesas o anguladas, angle quotation mark) Un cuarto Mitad Tres cuartos

iexcl cent pound curren yen brvbar sect uml copy ordf laquo not shy reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34

&#174; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190;

&#191; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#222;

Abrir interrogacin A mayscula, acento grave A mayscula, acento agudo A mayscula, acento circunflejo A mayscula, tilde A mayscula, diresis A mayscula, anillo Diptongo AE mayscula (ligadura) C cedilla mayscula E mayscula, acento grave E mayscula, acento agudo E mayscula, acento circunflejo E mayscula, diresis I mayscula, acento grave I mayscula, acento agudo I mayscula, acento cicunflejo I mayscula, diresis Eth mayscula, Islandesa mayscula Ee mayscula O mayscula, acento grave O mayscula, acento agudo O mayscula, acento circunflejo O mayscula, tilde O mayscula, diresis Signo de multiplicacin O barrada mayscula U mayscula, acento grave U mayscula, acento agudo U mayscula, acento circunflejo U mayscula, diresis Y mayscula, acento agudo THORN islandesa mayscula

iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH NTilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN

&#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232 &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254;

Beta minscula a minscula, acento grave a minscula, acento agudo a minscula, acento circunflejo a minscula, tilde a minscula, diresis a minscula, anillo Diptongo ae minscula (ligadura) c cedilla minscula e minscula, acento grave e minscula, acento agudo e minscula, acento circunflejo e minscula, diresis i minscula, acento grave i minscula, acento agudo i minscula, acento circunflejo i minscula, diresis eth islandesa minscula ee minscula o minscula, acento grave o minscula, acento agudo o minscula, acento circunflejo o minscula, tilde o minscula, diresis Signo de divisin o barrada minscula u minscula, acento grave u minscula, acento agudo u minscula, acento circunflejo u minscula, diresis y minscula, acento agudo thorn islandesa minscula

szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn

 2.2.- Marcas

&#255;

="JUSTIFY">y minscula, diresis

yuml

Las marcas o directivas son las encargadas de delimitar los elementos de un documento, como cabeceras, prrafos, grficos, ventanas, tablas, etc. (todos los elementos HTML). La mayora de las marcas constan de una marca inicial y otra final, que da en nombre y los atributos del elemento a representar, seguida del contenido, y una marca de final. Todas las marcas se escriben entre los smbolos < y > (menor y mayor). A continuacin de esta marca de inicio se escribe el contenido que se desee, y despus de esto hay que cerrar la marca con los smbolos </ nombre_marca>. Algunas marcas no necesitan cerrarse, ya que solo constan de marca inicial. Todas las marcas se pueden anidar. 2.3.- Nombres Los nombres indican el tipo de marca que se va a realizar. Un nombre consiste en una letra seguida de leras, dgitos, puntos o guiones. La longitud de un nombre est limitada a 72 caracteres en la definicin HTML. Los nombres de elementos y atributos no distinguen entre maysculas y minsculas, pero los nombres de entidades si. En todas las marcas, el nombre debe comenzar inmediatamente despus del smbolo <. 2.4.- Atributos Los atributos son los parmetros que puede recibir la marca. Cuando una marca admite atributos, estos se describen a continuacin del nombre del elemento. Generalmente, los atributos tienen la forma : Nombre = valor, aunque en algunos casos solo es necesario el nombre del atributo. Se pueden poner espacios antes y despus del signo igual. El valor de un atributo puede ser bin una cadena de caracteres entre comillas (simples o dobles), o bin un nombre de atributo (como en los descritos en al apartado 1.3). 2.5 Comentarios Un comentario consiste en introducir en el documento descripciones explicativas que sirvan de ayuda al programador o a la persona que estudie el cdigo. La forma de introducir un comentario en un documento HTML es muy sencilla. La marca utilizada para los comentarios es <! descripcin_de_comentarios>. Toda la declaracin del comentario se ignora a la hora de presentar el documento, ya que actua slo como aclaracin para el que estudia el cdigo de la pgina. 2.6.- Estructura de los documentos Un documento en HTML es un conjunto de elementos anidados. El primer elemento que debe haber en cualquier documento es <HTML>, y su marca final, </HTML> debe ser el ltimo elemento del documento. Este elemento consta de dos partes : cabecera y cuerpo. Por tanto, toda pgina a realizar debe contener la siguiente estructura : <! Comentario del tipo de documento >

<! Otros comentarios > <HTML> <HEAD> <TITLE> titulo </TITLE> <! Otros elementos de cabecera si son necesarios> </HEAD> <BODY> <! Desarrollo del documento > </BODY> </HTML> 3.- Elementos de cabecera La cabecera se utiliza para proporcionar o identificar informacin que sea util en todo el documento actual (la pgina WEB a la que se refiera). Esta cabecera va entre las marcas <HEAD > y </HEAD>. La cabecera puede contener los siguientes datos, sin importar el orden en el que aparezcan : Titulo (TITLE) : Indica el nombre del documento, que los visores (browsers o navegardores) emplean normalmento como ttulo de la ventana. Es el nico elemento obligatorio de la cabecera. Direccin de base (BASE) : Indica la direccin de base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto (por ejemplo, si se lee de un disco duro local y su origen era un servidor Internet). El documento es un ndice (ISINDEX) : Si se indica la palabra clave ISINDEX, se interpretar que la pgina es un ndice y se permitir al usuario introducir palabras clave para buscarlas. Enlaces relacionados (LINK) : Pueden incluirse en la cabecera enlaces relacionados con el documento. Metainformacin (META) : Este campo sirve para proporcionar informacin sobre el documento que no pueda ser expresada en los campos anteriores. La informacin se describe usando pares nombre/valor, que pueden ser empleados para dos propsitos : 1. Proporcionar datos al servidor para que genere campos de cabecera 2. Para que el usuario incluya informacin adicional sobre el documento Para la primera, se emplean atributos del tipo HTTP-EQUIV y para la segunda del tipo NAME. En ambos casos, el valor se asigna en el campo CONTENT. Siguiente identificador (NEXTID) : Ya no se utiliza. Este campo lo utilizaban los editores de HTML para asignar nombres a los documentos de forma automtica. STYLE HREF="url_estilo" : Este elemento hace referencia al URL de la hoja de estilos a emplear a la hora de visualizar el documento. Estas hojas suelen tener la extensin .CSS (Cascading Style Sheets), y son archivos que desarrollan ciertas empresas para la WWW.

4.- Elementos del cuerpo

El cuerpo contiene el texto o documento de la pgina que se va a presentar. Las marcas de comienzo y final de cuerpo son <BODY> y </BODY> respectivamente. Esta marca permite el atributo BACKGROUND="imagen" para activar una imagen contenida en un fichero como fondo del documento. Los elementos que pueden aparecer en el cuerpo se describen a continuacin : 4.1.- Encabezados o ttulos Los encabezados o ttulos son marcas que se emplean para dividir en texto en secciones, o para expresar ttulos destacados. Las marcas empleados por los encabezados son <Hx> titulo </Hx>, siendo x un nmero entre 1 y 6. El ttulo ms grande es el 1, y el ms pequeo el 6. Normalmente, se suelen representar con letra negrita y se alinean a la izquieda. Permiten el atributo ALIGN="modo" para alinearlo, con los valores posibles de LEFT, RIGHT y CENTER, para alinear a la izquierda, derecha y centro respectivamente. (Por defecto es LEFT). 4.2.- Definicin de bloques Para definir y separar bloques de texto se emplean una serie de marcas que definen prrafos, texto preformateado o bloques con un significado especial como direcciones o citas. Tambin es posible utilizar marcas para saltos de lnea y para insertas lneas horizontales. Las marcas de bloque son las siguientes : <P> prrafo </P> : Se utiliza para separar prrafos, ya que en HTML todo el texto es contnuo y necesita saber como cortar las lneas. Esta marca acepta opcionalmente el atributo ALIGN="modo", pudiendo tomar modo los valores LEFT, RIGHT y CENTER para alinear a la izquierda, derecha y centro respectivamente. Si se omite, por defecto alinea a la izquierda (LEFT). <PRE> texto_preformateado </PRE> : Permite introducir en el documento texto preformateado, es decir, el texto que haya dentro de esta marca aparecer tal y como se haya escrito, respetando los saltos de lnea, retornos de carro, tabulaciones, etc. Esta marca acepta opcionalmente el atributo : WIDTH=numero para indicar el n mximo de caracteres po lnea para que el visor ajuste el tamao y tabulacin del texto. <ADDRESS> direccion_e-mail </ADDRESS> : Se utiliza para indicar un anclaje a una direccin electrnica o e-mail, y suele representarse en letra cursiva. <BLOCKQUOTE> texto </BLOCKQUOTE> : Indica que el texto es una cita. Actua como un sangrado, con tabulaciones a la izquierda y a la derecha. <BR> : Este elemento solo tiene marca inicial, y se utiliza para que el visor salte de lnea en el punto del documento en el que encuentre este elemento. Opcionalmente permite el atributo : CLEAR="modo", con el objetivo de indicar donde debe comenzar la siguiente lnea en el caso de distribuir el texto alrededor de una imagen, pudiendo tomar modo los valores LEFT, RIGHT y ALL. LEFT indica que la siguiente lnea ha de comenzar tan pronto como el margen izquierdo est libre. RIGHT hace los mismo pero con respecto al margen derecho. ALL no comienza una lnea hasta que los dos mrgenes estn libres. <HR> : Este elemento solo tiene marca inicial, y se emplea para dibujar una lnea horizontal dentro del documento, usando caracteres o grfico, dependiendo del visor utilizado. Esta marca permite varios atributos, todos opcionales, que son los siguientes: SIZE=numero_pixeles para indicar el n de pixeles de ancho o grosor que se desea que tenga la lnea.

WIDHT=numero_o_porcetaje para indicar la longitud de la lnea, que por defecto es todo el rea de visualizacin de la pgina. Si se indica en nmero, se especifica en pixeles, y si se indica en porcentaje, este porcentaje debe de ir seguido del smbolo %. ALIGN="modo" para indicar el modo de alineacin de la lnea, pudiendo tomar modo los valores LEFT, RIGHT y CENTER, para alinearse a la izquierda, derecha o centro respectivamente. Por defecto es a la izquierda (LEFT). NOSHADE para especificar que la barra debe ser slida, es decir, sin efectos de sombra. 4.3.- Listas Las listas son en realidad otras marcas que permiten definir bloques, pero con unas caractersticas especiales. Las listas se utilizan para presentar de forma ordenada una serie de lneas. Existe varios tipos de listas, que son los siguientes : Lista desordenada o Unordered List (<UL>) Lista ordenada u Ordered List (<OL>) Directorio o Directory (<DIR>) Men o Menu (<MENU>) Lista de definicin o Definition List (<DL>)

Las listas desordenadas ponen delante de cada elemento de la lista un punto o un cuadro, mientras que las listas ordenadas ponen un n de orden. Excepto en las listas de definicin y en el men, todos los casos son iguales. Escribiendo <LI> lnea_o_descripcin delante de cada nuevo elemento de la lista bastar para construir la lista. <LI> no tiene marca de fin. Ejemplo de uso de lista ordenada : <OL> <LI> Este es el elemento 1 <LI> Este es el elemento 2 </OL> Ejemplo de uso de lista desordenada : <UL> <LI> Este es el elemento 1 <LI> Este es el elemento 2 </UL> Las listas de definicin permiten hacer definiciones especiales de cada uno de los elementos que forman la lista, mostrando la definicin con una tabulacin ms que el elmento de la lista. Para ello solo basta con

10

utilizar <DT> (Definition Term) para definir el elemento, y <DD> (Definition Data) para especificar su descripcin. Estas marcas no tienen marca de fin. Ejemplo de uso de lista de definiciones : <DL> <DT> Trmino 1 <DL> Definicin del trmino 1 <DT> Trmino 2 <DL> Definicin del trmino 2 </DL>

Existen unos atributos para controlar el aspecto de cada lnea de la lista y los nmeros en las listas ordenadas. Estos atributos son los siguientes : Para listas desordenadas (<UL>) TYPE=simbolo : En las listas desordenadas se utilizan crculos para marcar cada lnea. Esta marca va cambiando a medida que la lista se va anidando. Este atributo permite especificar que tipo de smbolo se quiere utilizar en las lneas independientemente del nivel de anidamiento. Esto se hace introduciendo como simbolo los valores disc para disco, circle para crculo o square para cuadrado.

Para listas ordenadas (<OL>) TYPE=marca : En las listas ordenadas, la numeracin es a partir de 1. Se puede especificar el tipo de marca que se desea con los valores a para letras en minsculas, A para maysculas, i para nmeros romanos en minsculas, I para nmeros romanos en maysculas, o 1 para nmeros. START=numero : Permite especificar cual ha de ser el primer nmero de la lista cuando no se desea que empieze por 1.

Para las dems listas (<LI>) TYPE : Puede tomar los mismos valores que toma en la lista en la que se encuentra la lnea. Cuando se especifica, cambia el tipo de lista para esa marca y las siguientes. Adems, si la lnea pertenece a una lista ordenada se puede utilizar el atributo VALUE, con el que se puede modificar el nmero para esa marca y las siguientes.

4.4.- Marcado lgico de frases Existen varias marcas para indicar que una palabra o frase tiene un significado especial. Estas marcas son las siguientes : <CITE> texto </CITE> : Indica que el texto es una cita, y generalmente se representa en cursiva

11

<CODE> texto </CODE> : Lo marcado representa un ejemplo de cdigo dentro del texto. Suele usar el tipo de letra de caja fija. <EM> texto </EM> : Denota nfasis. Generalmente se representa con letra cursiva. <KBD> texto </KBD> : Indica que el texto se introduce desde teclado y se representa usando el tipo de letra de caja fija. <SAMP> texto </SAMP> : Significa ejemplo (SAMPle), representa los caracteres escritos de forma literal y utiliza el tipo de letra de caja fija. <STRONG> texto </STRONG> : Denota nfasis fuerte y generalmente va en negrita. <VAR> variable </VAR> : Lugar de una variable, por ejemplo la que se le pasa a un programa. Se representa usando el tipo de letra de caja fija.

4.5.- Marcado tipogrfico de frases Se utiliza para indicar el aspecto de una palabra o texto. Las marcas correspondientes son las siguientes : <B> texto </B> : Establece el texto en negrita. <I> texto </I> : Establece el texto en cursiva. <TT> texto </TT> : Establece el texto de caja fija o Texto de Teletipo. <STRIKE> texto </STRIKE> : Establece el texto tachado. <U> texto </U> : Establece el texto subrayado. <BIG> texto </BIG> : Establece un texto grande. <SMALL> texto </SMALL> : Establece un texto pequeo. <SUB> texto </SUB> : Establece texto subndice. <SUP> texto </SUP> : Establece texto superndice.

5.- Hiperenlaces (links o hyperlinks) Un caso especial de marcado es el representado por el elemento <A HREF="url"> elemento_para_salto </A>, que se utiliza para indicar que un texto hace referencia a otro, es decir, est anclado mediante un hiperenlace. HREF se utiliza para especificar el valor del URL (Uniform Resource Locator) o URI (Uniform Resource Identifier), que es la direccin del nuevo documento. El URL se puede referir a otro documento distinto o incluso al mismo documento, tanto como a cualquier otro tipo de recurso (FTP, Gopher, etc.). Los atributos opcionales son : NAME="nombre" : Nombra un anclaje para poder ser usado como anclaje principal de un hiperenlace, y puede ser referenciado desde un mismo documento, utilizando el formato <A HREF="#nombre"> elemento_para_salto </A>. Suele denominarse identificador de fragmentos.

Ejemplo del uso de links en un mismo documento (se supone que el documento se llama doc.htm) : <A NAME="Principal"> <A HREF="doc1.htm"> Ir al documento 1 </A> <A HREF="doc2.htm"> Ir al documento 2 </A> <A HREF="doc3.htm"> Ir al documento 3 </A> <A HREF="doc.htm#Punto1"> Ir a un punto de este documento </A>

12

.. .. <A NAME="Punto1"> <H3> Este es el punto 1 del documento.</H3> <A HREF="doc.htm#Principal"> Pulse aqu para volver al punto anterior </A> .. Como ya se ha descrito antes, un punto cualquiera de un documento marcado con NAME puede ser referenciado desde otro documento utilizando el formato especial de HREF. TITLE="titulo" : Sugiere un ttulo para el enlace destino. Este atributo es solo informativo y puede ser usado para que se visualize al colocarnos sobre el enlace o para nombrar recursos que no incluyen ttulo, como los grficos. REL : Relaciones descritas por un hiperenlace. El valor es una lista de nombres de relaciones separados por un espacio en blanco. REV : Iguar que REL pero en direccin contraria. URN : (Uniform Resource Namer) Especifica un identificador para el primer anclaje del hiperenlace. La sntaxis de los URN an no est especificada. METHODS : Especifica los mtodos a usar para acceder al destino. Se escriben como una lista de palabras separadas por espacios y dependen del tio de URI. Como el atributo TITLE, solo es orientativo para el visor. TARGET="nombre ventana" : Solo en Netscape. Este atributo devuelve el nombre de la ventana del navegador a emplear, de modo que cuando se pulsa en un enlace, el documento aparece en una ventana que tiene el nombre de "nombre ventana". Si la ventana no existe, se abre una nueve y se le asigna el nombre dado por TARGET. Generalmente el nombre no se ve (se emplea el del recurso obtenido), pero otros anclajes pueden hacer referencia a esa ventana y, al seleccionarlos, el visor los muestra en ella. <BASE TARGET="ventana por defecto"> : Permite indicar un nombre por defecto para cada enlace de un documento que no tiene el atributo TARGET. Los nombres de las ventanas deben comenzar por un caracter alfanumrico, si no son ignorados. De todos modos, existen una serie de nombres especiales que empiezan con el caracter subrayado (_). Estos nombres especiales se describen a continuacin : o TARGET="_blank" : Con este valor, el enlace siempre se cargar en una nueva ventana sin nombre. o TARGET="_self" : Con este valor, el enlace se cargar en la misma ventana en la que se encuentra. Esto es til para anular el efecto de una asignacin global con <BASE TARGET=" ">. o TARGET="_parent" : Este valor hace que el enlace se cargue en el FRAMESET inmediatamente superior al del documento actual. (Ver tema 10, Frames). Si el documento no tiene nada por encima el efecto es el mismo que con "_self". o TARGET="_top" : Este valor hace que el enlace se cargue en el cuerpo de la ventana. Se comporta como "_self" si el documento ocupa toda la pgina, pero resulta muy util para salir de un bloque de FRAMES anidados. La utilidad de este atributo est en que podemos hacer que el cliente abra distintas ventanas para cada enlace, sin dejar de tener nuestra pgina disponible; adems de sus usos en el nuevo elemento FRAME, descrito en el tema 10.

13

6.- Formularios 6.1.- Introduccin Un formulario es una plantilla para representar un conjunto de datos, el mtodo de eviarlos y el URI de la accin asociada, es decir, la referencia al programa que va a realizar el proceso con los datos.. El formulario consta de un conjunto de datos formado por los pares nombre/valor. Los nombres se especifican en el atributo NAME de los elementos de entrada del formulario, y los valores toman un valor inicial empleando distintos marcados, que podrn ser editados por el usuario. Los formularios pueden mezclarse con otros elementos, por lo que podr estar dentro de cualquiera o contener a cualquiera. Las marcas de comienzo y fin de formulario son <FORM> y </FORM> respectivamente. El uso de formularios est limitado a su uso en las pginas montadas en los servidores o con acceso a la red, ya que los programas asociados slo harn efecto en el servidor. Sin embargo han aparecido ya algunos navegadores capaces de llamar a programas locales. 6.2.- Elementos de un formulario La declaracin o el desarrollo del formulario se realiza entre las marcas <FORM> y </FORM>. La marca de inicio permite los siguientes atributos : * ACTION="programa" : Especifica el URI de la accin o programa asociado al formulario. Si no se especifica, por defecto es el URI BASE del documento. * METHOD=modo : Indica el mtodo de acceso al URI de la accin. Estos mtodos, es decir, el valor de modo, puede ser GET o POST. Estos modos estn explicados en el apartado "Envio de formularios" en el punto 6.6. * ENCTYPE=tipo : Especifica el tipo de codificacin para el transporte de los pares de datos nombre/valor, excepto en los casos en los que el protocolo no imponga uno. Tambin se utiliza dentro de la declaracin de los formularios para enviar ficheros a los servidores de HTTP, de modo que se pueden escribir formularios que soliciten al usuario el envio de un fichero. Un ejemplo de esto se encuentra a continuacin : <FORM ENCTYPE="multipar/form-data" ACTION="_URL_" METHOD=POST> Enviar este archivo <INPUT NAME="userfile" TYPE="file" <INPUT NAME="submit" VALUE="Enviar"> </FORM> * WRAP=valor : Va dentro del elemento TEXTAREA y permite controlar la manera de gestionar el flujo del texto dentro de las reas de entrada de texto en formularios. WRAP puede tomar los siguientes valores : - OFF : Las lneas se envan tal y como las introduce el usuario. - VIRTUAL : Las lneas se parten para ajustar a la caja, pero se envan como una sola lnea sin caracteres de salto.

14

- PHISICAL : Las lneas se parten para ajustar a la caja, enviando tambin los caracteres de salto. Los elementos especiales para formularios son los siguientes : - Campos de entrada de datos. - Campos de seleccin. - Areas de texto. 6.3.- Campos de entrada (INPUT) El elemento INPUT representa un campo de entrada de datos por teclado. Esta marca debe contener siempre el atributo NAME="nombre_variable", donde "nombre_variable" ser el nombre que tome la variable que contenga un determinado valor fuera del documento HTML, es decir, en el programa que tratar dichos datos. Los dems atributos posibles que puede tomar vienen datos por el valor del atributo TYPE, que determina el tipo de entrada de datos y que puede ser : Texto (INPUT TYPE=TEXT) Este es el valor por defecto del atributo TYPE. El atributo NAME es obligatorio en este tipo de elementos para indicar el nombre del campo. Los atributos opcionales que puede tomar son : * MAXLENGTH=longitud : Limita el nmero mximo de caracteres que se pueden introducir en el campo. Si el valor es mayor que el del atributo SIZE, el visor realizar un desplazamiento de la lnea. El nmero mximo de caracteres es por defecto ilimitado. * SIZE=anchura : Especifica la cantidad de espacio reservada para este campo dentro del documento * VALUE=valor : Indica el valor inicial del campo Ejemplo : <INPUT TYPE=TEXT NAME="cNombre" SIZE=30 VALUE="Introduzca aqui el nombre"> Pasword (INPUT TYPE=PASWORD) Este elemento acta exactamente igual que el anterior, es decir, que INPUT TYPE=TEXT, con la nica diferencia de que no se v el texto al escribirlo, sino que solo se visualizan asteriscos. Caja de seleccin (INPUT TYPE=CHECKBOX) Este elemento devuelve un valor lgico o booleano, es decir, Verdadero o Falso, Si o No. Si a un conjunto de elementos de este tipo se le asigna el mismo nombre, se obtendr un rea de seleccin mltiple. Estos elementos requieren los atributos NAME y VALUE, que indican el nombre del elemento o grupo de elementos y la parte del valor del campo aportada por el elemento respectivamente. Permite seleccionar varios elementos. Posee el atributo opcional CHECKED, que indica que el valor inicial del elemento es seleccionado. Ejemplo :

15

<H3>Seleccione su/s lenguaje/s preferido</H3> <INPUT TYPE=CHECKBOX NAME="cLen" VALUE="Visual FoxPro"> <INPUT TYPE=CHECKBOX NAME="cLen" VALUE="CA-Visual Objects" CHECKED> <INPUT TYPE=CHECKBOX NAME="cLen" VALUE="Visual C" > <INPUT TYPE=CHECKBOX NAME="cLen" VALUE="CA-Clipper"> <INPUT TYPE=CHECKBOX NAME="cLen" VALUE="Otro/s"> Botn (INPUT TYPE=RADIO) Este elemento devuelve un valor lgico o booleano, es decir, Verdadero o Falso, Si o No. Un conjunto de elementos de este tipo con el mismo nombre representan un campo de seleccin mltiple, en el que slo un elemento se puede marcar. Estos elementos requieren los atributos NAME y VALUE. Opcionalmente permite el atributo CHECKED para indicar que el estado inicial es seleccionado. En cualquier momento, slo uno de los botones del mismo grupo puede estar seleccionado. Si a ninguno de los elementos se le da el atributo CHECKED, el browser debe marcar el primero de ellos inicialmente. Ejemplo : <H3>Seleccione su browser preferido</H3> <INPUT TYPE=RADIO NAME="cBrow" VALUE="Netscape Navigator"> <INPUT TYPE=RADIO NAME="cBrow" VALUE="Microsoft Explorer" > <INPUT TYPE=RADIO NAME="cBrow" VALUE="Otro/s" > Pixel de una imagen (INPUT TYPE=IMAGE) Este elemento especifica na imagen para que el browser o visor la muestre y permita la entrada de dos campos, las coordenadas x e y de un pixel seleccionado de dicha imagen. Los nombres de los coampos son iguales al del campo, aadiendo al final x e y respectivamente. Este tipo implica tambin INPUT TYPE=SUBMIT, es decir, cuando se selecciona un pixel, se enva todo el formulario. Los atributos NAME y SRC son necesarios, y los campos ALIGN e IMG son opcionales. Ejemplo : <INPUT TYPE=IMAGE NAME=nPunto SRC="mapa.gif"> Oculto (INPUT TYPE=HIDDEN) Este elemento representa un campo oculto. El usuario no interacta con l, es el atributo VALUE el que especifica el valor del campo. Tanto el atributo NAME como el atributo VALUE son obligatorios. Ejemplo :

16

<INPUT TYPE=HIDDEN NAME="cClave" VALUE="123abc456def"> Botn de envio (INPUT TYPE=SUBMIT) Representa una opcin, normalmente mediante un botn, que lindica que pulsando sobre el se debe enviar el formulario. Cuando se selecciona dicho botn, se pasa a ejecutar el programa de envio que se haya especificado al inicio del documento con la orden FORM METHOD=metodo ACTION="programa.ext" (esto se explicar ms adelante, en el apartado de 6.6, Envio de formularios). Como atributos opcionales acepta los siguientes: * NAME="cCampo" : Indica que este elemento constituye un campo cuyo valor es el del atributo VALUE. En caso de que no se incluya el atributo, este elemento no es un campo. * VALUE="cNombre" : Indica la etiqueta de entrada para el botn. Ejemplo : <P> A quin le desea enviar el formulario ?</P> <INPUT TYPE=SUBMIT NAME="cDestino" VALUE="Administrador"> <INPUT TYPE=SUBMIT NAME="cDestino" VALUE="Director"> Botn de reinicio (INPUT TYPE=RESET) Este elemento representa normalmente un botn que indica que pulsado sobre l se deben reiniciar todos los valores de todos los campos del formulario a los que hace referencia este botn, es decir, vuelven a su valor inicial. El atributo opcional VALUE se utiliza para indicar la etiqueta del botn. Ejemplo : <P>Si se equivoca, pulse aqu : <INPUT TYPE=RESET VALUE="Borrar"></P> 6.4.- Campos de seleccin (<SELECT>) Este elemento se utiliza para seleccionar un valor de entre una lista de ellos, todos entre las marcas <SELECT> y </SELECT>. Para definir estos valores se utiliza el elemento <OPTION>valor, con los siguientes atributos opcionales : * MULTIPLE : Indica que el valor puede incluir ms de una opcin. * NAME="cNombre" : Especifica el nombre del campo. * SIZE=tamao : Determina el nmero de opciones (items) visibles. Si se indica un tamao de 1, se suelen repreentar como mens desplegables, y si el tamao es mayor, se suele representar una lista con barra de desplazamiento. El elemento <OPTION> slo puede aparecer dentro de un elemento <SELECT>, y representa una de las posibles opciones. Acepta los siguientes atributos : * SELECTED : Indica que la opcin a la que hace referencia est seleccionada inicialmente. Si ninguna opcin lleva este atributo, el visor suele presentar la primera.

17

* VALUE="cNombre" : Indica el valor a devolver si se selecciona la opcin. Si no se incluye este atributo, se devuelve el contenido del elemento. Ejemplo : <SELECT NAME="cOrdenador"> <OPTION>Pc 386 <OPTION>Pc 486 <OPTION SELECTED>Pentium / Pentium Pro <OPTION>Motorola <OPTION>Apple <OPTION>Amiga <OPTION>Otro </SELECT> 6.5.- Areas de texto (<TEXTAREA>) Este elemento representa un campo de texto de mltiples lneas. Los atributos que admite son los siguientes : * COLS=columnas : Indica el nmero de columnas visibles del rea de texto (en caracteres). Si la longitud del texto excede de este n de columnas, aparece una barra de desplazamiento horizontal. * NAME="cNombre" : Indica el nombre del campo. * ROWS=filas : Indica el nmero de filas visibles del rea de texto (en caracteres). Si la longitud del texto excede de este n de filas, aparece una barra de desplazamiento vertical. El valor inicial del texto es lo que se encuentre entre <TEXTAREA> y </TEXTAREA>. Ejemplo : <TEXTAREA NAME="cSugerencias" ROWS=6 COLS=60> Escriba aqu sus sugerencias. Gracias. </TEXTAREA> 6.6.- Envio de formularios Un browser o visor de HTML comienza un formulario presentando el documento con los valores de los campos en su estado inicial. Segn el tipo de campo, el usuario modificar sus valores de una forma u otra (rellenando con texto, seleccionando una o varias opciones, etc.). Cuando el usuario termina de rellenar el

18

formulario, puede enviarlo utilizando un botn de envio o una seleccin en el pixel de una imagen. En ese momento, el browser analiza las entradas, y en funcin del mtodo, accin y tipo de codificacin, lo enva. En caso de que el formulario solo tuviera un campo de entrada de texto de una lnea, el browser debe aceptar un intro como una peticin de envio del formulario. >Tipo de codificacin de los formularios La codificacin por defecto de todos los formularios es, segn el esquema MIME, application/x-wwwform-urlencoded. Un conjunto de datos de un formulario se representa en este caso del siguiente modo : 1. Los nombres de campos y los valores son preprocesados : los espacios son reemplazados por el smbolo +, y los caracteres son sustituidos como en los URL, es decir, los caracteres no alfanumricos se representan con un signo de tanto por cien y dos dgitos hexadecimales, que indican el cdigo ASCII del caracter (%HH). Los saltos de lnea (utilizados en los campos de mltiples lneas), se representan con pares CRLF (sustituidos por %0D%0A). 2. Los campos se listan en el orden en el que aparecen en el documento, con los nombres separados del valor por el smbolo = y los pares separados entre s por el smbolo &. Los campos con valores nulos pueden ser omitidos, en particular, los campos no seleccionados en entradas booleanas no deben aparecer en los datos, pero los campos ocultos que tengan el atributo VALUE s. Formularios de consulta : METHOD=GET El mtodo de consulta depende de los efectos que el formulario tenga en el estado del resto del mundo, es decir, si el envo va a producir cambios en cualquier documento o programa que no sea nuestro propio browser. Si el proceso del formulario no produce cambios, el mgodo usado debe ser GET. Un ejemplo de este tipo de formularios son las consultas a bases de datos, que no tienen efectos laterales visibles. Para procesar un formulario cuyo URL de accin es un URL de tipo HTTP y el mtodo es GET, el visor genera un URI que comienza con el de la accin al que se le ade un interrogante (?) y el conjunto de datos codificado con el formato application/x-www-form-urlencoded visto en el punto anterior. Para acceder a la consulta el visor accede al URI de la misma manera que lo hace con los que aparecen en los anclajes. De todos modos, en algunos casos, la codificacin de los datos puede generar un URI extremadamente largo, lo que puede provocar un funcionamiento errneo con algunos servidores de HTTP antiguos. Por esta razn, algunos formularios que no tienen efectos laterales, se escriben usando el mtodo POST. Formularios con efectos laterales : METHOD=POST Para formularios con efectos laterales (como uno que modifique una base de datos) se emplea el mtodo POST. Para procesar un formulario cuyo URL de accin es de tipo HTTP y el mtodo es POST, el browser gestiona una transaccin de tipo POST del protocolo HTTP, usando el URI de la accin y el cuerpo de un mensaje de tipo application/x-www-form-urlencoded como antes. El visor debe presentar la respuesta del HTTP POST de la misma forma que la respuesta obtenida con el mtodo GET. Ejemplo de envo de formularios

19

<TITLE>Ejemplo de envio de formularios</TITLE> <H1>Cuestionario de personal</H1> <P>Por favor, rellene el siguiente formulario : <FORM METHOD=POST ACTION="/cgi-bin/post-query"> <P>Nombre : <INPUT NAME="cNombre" SIZE=48> <P>Hombre <INPUT NAME="cGenero" TYPE=RADIO VALUE="Hombre"> <P>Mujer <INPUT NAME="cGenero" TYPE=RADIO VALUE="Mujer"> <P>Numero de miembros de la familia <INPUT NAME="cFamilia" TYPE=TEXT> <P>Idiomas que conoce : <UL> <LI>Frances <INPUT NAME="cIdioma" TYPE=CHECKBOX VALUE="Frances"> <LI>Ingles <INPUT NAME="cIdioma" TYPE=CHECKBOX VALUE="Ingles"> <LI>Otros <TEXTAREA NAME="cOtros"> COLS=48 ROWS=4></TEXTAREA> </UL> <P>Pulse aqui para enviar los datos <INPUT TYPE=SUBMIT VALUE="Enviar"> <P>Puede volver a comenzar en cualquier momento pulsando aqui <INPUT TYPE=RESET VALUE="Comenzar"> </FORM> El estado inicial de los datos es el siguiente : cNombre = "" cGenero = "Hombre" cFamilia = "" cOtros = "" Hay que sealar que la entrada de tipo RADIO tiene valor inicial, mientras que la del tipo CHECKBOX no. Cuando el usuario rellena los campos y solicita el envio, suponiendo que los valores de los campos sean los siguientes :

20

cNombre = "Alicia Martinez" cGenero = "Mujer" cFamilia = "4" cIdioma = "Ingles" cOtros = "Valenciano\nGallego" ( \n = Salto de lnea) entonces el browser gestiona unatransaccin HTTP POST usando el URI /cgi-bin/post-query. El cuerpodel mensaje que se enviar ser el siguiente : cNombre=Alicia+Martinez&cGenero=Mujer&cFamilia=4&cIdioma=Ingles&cOtro s=Valenciano%0D%0AGallego Esto es muy importante de saber a la hora de realizar programas externos que traten los datos del formulario. 7.- Colores El aspecto del documento es tambin muy importante. Para este fin se han creado unos atributos que permiten cambiar los colores. En el elemento <BODY> se pueden introducir los siguientes atributos : BGCOLOR="#rrggbb" : Permite cambiar el color de fondo del documento. Si adems de este color se incluye una imagen de fondo, el color especificado por este atributo es el que se encuentra debajo, es decir, si la imagen es transparente, se ve el color de fondo. TEXT="#rrggbb" : Indica el color del texto LINK="#rrggbb" : Indica el color para los anclajes de los hiperenlaces VLINK="#rrggbb" : Indica el color para los anclajes de los hiperenlaces que se han visitado recientemente.

Nota : Los valores "rrggbb" indican la mezcla de colores, siendo rr = rojo, gg = verde y bb = azul (red, green, blue = RGB). Estas iniciales deben ser sustituidas por nmeros entre 0 y 255 (00 y FF en hexadecimal). El color "#000000" es negro, y el "#FFFFFF" es blanco. A continuacin se muestra una tabla con algunos colores : NOMBRE DE COLOR Verde lima Naranja mandarina Castao Aguamarina medio Azul medio Verde bosque medio VALOR RGB #32CD32 #E47833 #8E236B #32CD99 #3232CD #6B8E23

21

Dorado medio Orquidea medio Verde mar medio Azul pizarra medio Verde manantial medio Turquesa medio Violeta-Rojo medio Selva medio Azul marino de medianoche Azul marino Azul nen Rosa nen Azul de medianoche nuevo Canela nuevo Oro viejo Naranja Naranja-Rojo Orquidea Verde plido Rosa Ciruela Cuarzo Azul rico Salmn Escarlata Verde mar Chocolate semi-suave Siena Plata Azul cielo Azul pizarra

#EAEAAE #9370DB #426F42 #7F00FF #7FFF00 #70DBDB #DB7093 #A68064 #2F2F4F #23238E #4D4DFF #FF6EC7 #00009C #EBC79E #CFB53B #FF7F00 #FF2400 #DB70DB #8FBC8F #BC8F8F #EAADEA #D9D9F3 #5959AB #6F4242 #8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF

22

Rosa vivo Verde fuerte Azul metlico Azul de verano Canela Cardo Turquesa Marrn muy oscuro Gris muy claro Violeta Violeta-Rojo Trigo Blanco Rojo Verde Azul Magneta Cian Amarillo Negro Aguamarina Chocolate Azul-Violeta Bronce Oro brillante Marrn Bronce 2 Bronce 3 Azul cadete Cobre fresco Cobre

#FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299 #D8D8BF #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333

23

Coral Azul flor-maiz Marrn oscuro Verde oscuro Verde cobrizo oscuro Verde aceituna oscuro Orquidea oscuro Morado oscuro Azul pizarra oscuro Gris pizarra oscuro Canela oscuro Turquesa oscuro Selva oscuro Gris oscuro Rosa polvoriento (Feldspar) Fuego-Ladrillo Verde bosque Oro Dorado Gris Verde cobrizo Verde amarillento Verde caza Rojo indio Kaki Azul claro Gris claro Azul pizarra claro Selva claro 8.- Imgenes

#FF7F00 #42462F #5C4033 #2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F #7093DB #855E42 #545454 #856363 #D19275 #8E2323 #238E23 #CD7F32 #DBDB70 #C0C0C0 #527F76 #93DB70 #215E21 #4E2F2F #9F9F5F #C0D9D9 #A8A8A8 #8F8FBD #E9C2A6

24

Para incluir imgenes en los documentos HTML se utiliza la marca <IMG SRC="fichero_imagen"> texto_auxiliar </IMG>. El texto auxiliar es opcional y sirve para que este se coloque alrededor de la imagen. El atributo SRC lo que en realidad hace es un enlace con el fichero que contiene la imagen. Estn permitidos varios formatos de imagen, como GIF, JPEG o BMP. Si se combina con <A HREF="url">, una imagen puede ser el enlace con otros lugares u otros documentos. Los atributos opcionales que permite son los siguientes : ALT="titulo" : Indica un nombre para la imagen, para que en caso de que el documento se carge en un ordenador que no tenga modo grfico, aparezca este nombre en lugar de la imagen. ALIGN="modo" : Alinea la imagen respecto al texto. Este modo puede tomar los siguientes valores (por defecto, se usa BOTTOM) : o TOP : Alinea la imagen con el elemento ms alto de la lnea. o TEXTTOP : Alinea la imagen con el elemento ms alto de la lnea, pero slo contemplando el texto ms alto, sin considerar cualquier otro elemento. Generalmente este marca tiene el mismo efecto que TOP, pero no siempre es as. o MIDDLE : Alinea la lnea base del texto con la mitad de la imagen. o ABSMIDDLE : Alinea el punto medio vertical de la lnea de texto con la mitad de la imagen. o BOTTOM : Alinea el inferior de la imagen con la lnea base del texto. o BASELINE : Es exactamente igual que el anterior, y existe debido a que Netscape lo quiere implementar como un estandard. o ABSBOTTOM : Alinea el inferior de la imagen con el inferior de la lnea.

ISMAP : Indica que la imagen es una mapa. Este atributo est detallado en la seccin Mapas, descrita ms adelante. WIDTH=anchura HEIGHT=altura : Solo en el visor Netscape. Se utilizan para aumentar la velocidad de carga, de forma que si se especifican el visor reserva el espacio de la imagen sin cargarla, continuando con el resto del texto y trayendo la imagen cuando haya terminado. BORDER=ancho : Solo en Netscape. Especifica el ancho del borde de las imgenes. VSPACE=valor HSPACE=valor : Solo en Netscape. VSPACE Indica el espacio a reservar por encima y por debajo de una imagen, y HSPACE el espacio a reservar a la izquierda y la derecha de la misma. Es util para que al alinear texto, no aparezca demasiado pegado a la imagen. Ejemplo de enlace con documento mediante una imagen : .. <AHREF="doc01.htm"> <IMG SRC="doc01.gif" ALT="Documento1" ALIGN=MIDDLE>Pulse la imagen para ir al documento 1</IMG> </A> 8.1.- Mapas Los mapas de seleccin o Image Maps son muy utilizados en las pginas WEB. Un mapa de seleccin consiste en permitir a los usuarios a otros documentos (tal y como los anclajes de los hiperenlaces seleccionando en distintas reas de una imagen. El elemento para definir los mapas es <MAP>, junto con <IMG> al que se le aade el atributo USEMAP para indicar que se debe usar la descripcin para gestionar el mapa. Las regiones de cada imagen se describen usando el elemento <MAP>. Este eemento describe cada regin de la imagen e indica a dnde apunta. El formato bsico de este elemento es el siguiente : <MAP NAME="nombre_mapa">

25

<AREA [SHAPE="figura"] COORDS="x,y,...." [HREF="referencia" | NOHREF]> </MAP> El atributo NAME indica el nombre del mapa, para poder ser referenciado desde los elementos <IMG>, es por tanto necesario. El elemento <AREA> sirve para indicar el tipo de figura (SHAPE), las coordenadas de la misma (COORDS) (el n de ellas depende del tipo de figura) y la referencia a emplear cuando se selecciona un punto del rea de la imagen (HREF o NOHREF). Los tipos de figura (SHAPE) que se pueden utilizar y el formato de sus coordenadas (COORDS) son los siguientes : RECT : Rectngulo. Las coordenadas se dan de la forma "izquierda, derecha, arriba, abajo. Por ejemplo, para especificar el rea total de una imagen de 100 * 100 pixels, las coordenadas seran "0, 0, 99, 99". POLY : Polgono. Las coordenadas se dan de la forma "x1, y1, x2, y2, ......". El browser cierra el polgono automticamente. CIRCLE : Crculo. Las coordenadas de los crculos se definen por un punto central y un radio, en tres valores : coordenadas x, y y el valor del radio. DEFAULT : Por defecto, rectngulo.

NOTA : x = Fila ; y = Columna El atributo HREF="referencia" indicar a donde ir si se selecciona en su rea, mientras que el atributo NOHREF no debe hacer nada si se selecciona su rea. Hay que indicar que los anclajes relativos se expandirn tomando como base el URL de la descripcin del mapa (si hay una marca BASE en el documento que contiene la descripcin, ser ese URL el empleado, no el del documento desde el que se referencia). Si varios elementos <AREA> intersectan, la que toma precedencia es la que aparece en primer lugar en el mapa. El atributo USEMAP indica que la imagen es un mapa gestionado por el cliente, aunque puede ser usado junto al atributo ISMAP, de manera que un browser que no soporte USEMAP acceder al mapa del servidor. El valor del atributo indica el mapa a emplear con la imagen, en un formato similar al del atributo HREF en los anclajes. As, una referencia a una mapa que comience con una almoadilla (#) se encontrar en el mismo documento al que hace referencia. Ejemplo : <HTML> <HEAD> <TITLE>Ejemplos de mapas de seleccion</TITLE> </HEAD> <BODY>

26

<!-- Mapa de una imagen de 160 * 160 pixels --> <MAP NAME="MapColores"> <AREA SHAPE="POLY" COORDS="10, 49, 29, 10, 49, 49" HREF="Rojo.html"> <AREA SHAPE="RECT" COORDS="60, 10, 99, 49" HREF="Verde.html"> <AREA SHAPE="CIRCLE" COORDS="130, 30, 20" HREF="Azul.html"> <AREA SHAPE="RECT" COORDS="0, 0, 159, 159" HREF="Blanco.html"> <!-- El ltimo rea hace que todo lo que no estaba marcado por los anteriores vaya a Blaco.html --> </MAP> <H1>Ejemplos de mapas de seleccion. Seleccione un color</H1> <P>Este mapa solo funcionar si su browser soporta el control de mapas</P> <IMG SRC="colores.gif" USEMAP="#MapColores"> <P>Este mapa funcionar independientemente del tipo de visor</P> <A HREF="/cgi-bin/imagemap/colores"> <IMG SRC="colores.gif" USEMAP="#MapColores" ISMAP> </A> <P>Si su browser no soporta mapas de usuario, pulse la imagen para ir a una pgina con el mismo contenido en tipo texto</P> <A HREF="/colores.html"> <IMG SRC="colores.gif" USEMAP="#MapColores"> </A> </BODY> </HTML> 9.- Tablas Uno de los elementos ms importantes de los documentos HTML son las tablas, que permiten presentar la informacin de manera muy flexible. Las tablas se pueden anidar, es decir, dentro de una fila o una columna se puede definir otra sub-tabla. Adems, se pueden meter datos que ocupen las filas o columnas que se deseen sin afectar a todos los dems. En este tema se estudiar el tratamiento de las tablas, que se pasan a describir a continuacin.

27

El elemento que permite crear las tablas es <TABLE>, con su marca final </TABLE>. Entre estas dos marcas deben definirse las caractersticas y los datos que la tabla debe contener. Este elemento acepta el siguiente atributo, opcional : BORDER="numero" : Permite especificar el borde (ancho en pixels) de la tabla. Por defecto es 0, es decir, la tabla aparece sin bordes. Si se especifica slo BORDER (sin "numero"), el valor por defecto ser 1, es decir, un borde simple. Con un valor de 2, la tabla tomar un aspecto de borde doble. Este atributo especifica el ancho de los bordes de la tabla. WIDTH="valor" : Este atributo permite indicar el ancho que va a ocupar la tabla dentro de la ventana en la que se muestra el documento. Este valor puede ser exacto en pixels o un porcentaje entre 1 y 100. Si es un porcentaje debe de ir seguido del smbolo %. CELLPADDING="valor" : Define el espacio en pixels entre el contenido de las celdas y sus bordes. CELLSPACING="valor" : Define el espacio entre celdas (el ancho de los bordes).

A continuacin pasan a explicarse otros elementos que se utilizan a la hora de definir las tablas : <TR> Este elemento sirve para definir columnas. Su nombre viene de Table Row. Entre las marcas <TR> y </TR> se meten las marcas y los datos correspondientes que debe mostrar la tabla. <TD> Este elemento se utiliza para definir los datos de la tabla. Su nombre viene de Table Data. Entre las marcas <TD> y </TD> deben aparecer los datos que aparecern en la celda correspondiente de la tabla. Permite los siguientes atributos, opcionales : ROWSPAN="filas" : Permite indicar cuantas filas va a ocupar el dato o celda actual. COLSPAN="columnas" : Permite especificar cuantas columnas va a ocupar el dato o celda actual. ALIGN="alineacion" : Se utiliza para especificar la alineacin que tomar el dato dentro de la celda. Las posibles alineaciones son las mismas que en los prrafos (LEFT, RIGHT y CENTER). HEIGHT="valor" : Permite especificar el ancho que va a tomar la celda actual. Puede ser un valor fijo en pixels o un porcentaje entre 1 y 100. Si se trata de un porcentaje, el valor ha de ir seguido del smbolo %.

<TH> Este elemento se utiliza para definir las cabeceras o ttulos de las tablas. Su nombre viene de Table Head. Su misin es colocar el ttulo escrito entre las marcas <TH> y </TH> en la celda correspondiente al lugar en que se define. Admite opcionalmente el atributo ALIGN. Por defecto utiliza un tipo de letra negrita y su alineacin es ALIGN=CENTER. <CAPTION> Este elemento se utiliza para nombrar a la tabla. Dicho nombre se mostrar encima o debajo de la tabla, centrado con respecto a su tamao, pero nunca dentro. Su formato es <CAPTION="lugar">titulo</CAPTION>, pudiendo tomar "lugar" los valores de "top" para que aparezca en la parte superior de la tabla y "bottom" para que aparezca en la parte inferior. Ejemplos de tablas

28

A continuacin se muestran una serie de ejemplos de tablas :

1) Tabla bsica de 3 * 2 <TABLE BORDER> <TR> <TD>Fila 1 Col. 1</TD> <TD>Fila 1 Col. 2</TD> <TD>Fila 1 Col. 3</TD> </TR> <TR> <TD>Fila 2 Col. 1</TD> <TD>Fila 2 Col. 2</TD> <TD>Fila 2 Col. 3</TD> </TR> </TABLE>

2) Tabla con su 2 columna ocupando 2 filas <TABLE BORDER> <TR> <TD>Fila 1 Col. 1</TD> <TD ROWSPAN=2>Filas 1 y 2 Col. 2</TD> <TD>Fila 1 Col. 3</TD> </TR> <TR> <TD>Fila 2 Col. 1</TD>

29

<TD>Fila 2 Col. 3</TD> LIGN="JUSTIFY"></TR> </TABLE>

3) Tabla con su 2 columna 1 fila ocupando 2 columnas <TABLE BORDER> <TR> <TD>Fila 1 Col. 1</TD> <TD COLSPAN=2>Fila 1 Col. 2 y 3</TD> </TR> <TR> <TD>Fila 2 Col. 1</TD> <TD>Fila 2 Col. 2</TD> <TD>Fila 2 Col. 3</TD> </TR> </TABLE>

4) Tabla con 2 cabeceras de 4 elementos cada una <TABLE BORDER> <TR> <TH COLSPAN=2>Cabecera 1</TH> <TH COLSPAN=2>Cabecera 2</TH> </TR> <TR> <TD>Cab. 1 Fil. 1 Col. 1</TD>

30

<TD>Cab. 1 Fil. 1 Col. 2</TD> <TD>Cab. 1 Fil. 2 Col. 1</TD> <TD>Cab. 1 Fil. 2 Col. 2</TD> </TR> <TR> <TD>Cab. 2 Fil. 1 Col. 1</TD> <TD>Cab. 2 Fil. 1 Col. 2</TD> <TD>Cab. 2 Fil. 2 Col. 1</TD> <TD>Cab. 2 Fil. 2 Col. 2</TD> </TR> </TABLE>

5) Tabla con cabeceras en cada fila (no en columnas) y con nombre encima <TABLE BORDER> <CAPTION ALIGN="top">Nombre encima</CAPTION> <TR> <TH>Cabecera fila 1</TH> <TD>Fila 1 Col. 2</TD> <TD>Fila 1 Col. 3</TD> <TD>Fila 1 Col. 4</TD> </TR> <TR> <TH>Cabecera fila 2</TH> <TD>Fila 2 Col. 2</TD> <TD>Fila 2 Col. 3</TD>

31

<TD>Fila 2 Col. 4</TD> </TR> <TR> <TH>Cabecera fila 3</TH> <TD>Fila 3 Col. 2</TD> <TD>Fila 3 Col. 3</TD> <TD>Fila 3 Col. 4</TD> </TR> </TABLE>

6) Tabla con borde ancho y separacin entre sus cajas <TABLE BORDER=5 CELLPADING=10 CELLSPACING=10> <TR> <TD>Fila 1 Col. 1</TD> <TD>Fila 1 Col. 2</TD> <TD>Fila 1 Col. 3</TD> </TR> <TR> <TD>Fila 2 Col. 1</TD> <TD>Fila 2 Col. 2</TD> <TD>Fila 2 Col. 3</TD> </TR> </TABLE> 10.- Frames Los frames permiten dividir las pginas HTML en varias regiones o ventanas con barras de desplazamiento, lo que permite presentar la informacin de manera muy flexible.

32

Cada vista o regin puede tener distintas caractersticas : Se le puede asignar un URL, de modo que puede cargar informacin independientemente de otras vistas de la pgina. Puede asignrsele un nombre (NAME), permitiendo que sean referenciadas por otros URL. Puede redimensionarse dinmicamente si el usuario cambia el tamao de la ventana (aunque el redimensionamiento puede deshabilitarse, asegurando un tamao constante de las vistas).

Estas propiedades ofrecen nuevas posibilidades : Los elementos que el usuario debe ver siempre, como barras de control, copyrights, ttulos, grficos, etc. pueden colocarse en vistas individuales estticas. Mientras el usuario navega por el servidor en las vistas dinmicas, los contenidos de la vista esttica permanecen fijos. Los ndices de contenidos son ms funcionales. Una vista puede contener una pgina con enlaces que, al seleccionarse, muestren los resultados en una vista contigua. El diseo de vistas paralelas permite enviar consultas desde una de ellas y ver los resultados en la otra, teniendo pregunta y respuesta visibles en la misma pgina.

La sintaxis de las vistas es muy similar a la de las tablas, y estn diseadas para ser procesadas rpidamente por los visores o browsers. Los elementos utilizados para definir las vistas se definen a continuacin : <FRAMESET> Define un conjunto de vistas. Toma dos atributos, ROWS y COLS (filas y columnas). Un documento con vistas no tiene cuerpo (<BODY>) y ninguna de las marcas que normalmente se colocaran en l pueden aparecer antes de la marca <FRAMESET> o esta ltima ser ignorada. La marca inicial <FRAMESET> tiene su correspondiente marca de cierre </FRAMESET>, y dentro de ellas slo se pueden tener otras marcas <FRAMESET> anidadas, marcas <FRAME> o marcas <NOFRAMES>. Los valores de los atributos ROWS y COLS toman como valor una lista de valores separados por comas. Estos valores pueden ser valores absolutos en pixels, porcentajes entre 1% y 100% o valores de escala relativos. En el caso del atributo ROWS, el nmero de filas est implcito en el nmero de elementos de la lista. Dado que el tamao total de todas las filas debe coincidir con la altura de la ventana, el alto de las filas debe ser nomalizado. Si no se incluye el atributo ROWS, se asume una sola fila de la misma altura que la ventana. El atributo COLS actua de forma similar. Una vez definidas las filas y las columas, la asociacin de elementos se hace en funcin de la forma de declaralas, por ejemplo, si tenemos 4 filas y 2 columnas, tendremos un total de 8 valores, donde los primeros 4 se asignarn a la vistas 1, 2, 3 y 4 de la primera columna mientras que los 4 restantes se asignarn a las mismas vistas de la segunda columna. La sntaxis de estos valores es la siguiente : valor : Se asume que un valor numrico simple es un tamao fijo en pixels. Este es el tipo de valor ms crtico, ya que el tamao de la ventana del cliente variar mucho entre unos y otros. Si se usan valores fijos, ser necesario mezclarlos con uno o ms valores relativos, ya que en otro caso el visor

33

del usuario probablemente ignorar los valores dados para asegurarse que las proporciones totales de las vistas toman el 100% del alto y ancho de la ventana del usuario. valor% : Este valor indica un porcentaje simple entre 1% y 100%. Si el total de porcentajes supera dl 100%, todos los porcentajes se escalan hacia abajo. Si el total es menor que el 100% y existen vistas de tamao relativo, el espacio sobrante se les dar a ellas. Si no hay vistas de tamao relativo, todos los porcentajes se escalarn hacia arriba para llegar al total del 100%. valor* : El valor de este campo es opcional, un slo asterisco implica una vista de "tamao relativo", lo que se interpreta como una peticin de darle a la vista todo el espacio que quede libre. Si hay varias vistas de tamao relativo, el espacio libre se divide entre ellas. Si hay un valor delante del asterisco, la vista que lo tenga toma ms espacio relativo, por ejemplo, "2*, *" dara 2/3 del espacio a la primera vista y 1/3 a la segunda.

La marca <FRAMESET> puede estar inclida en otras marcas <FRAMESET>. En ese caso, la subvista completa se coloca en el espacio que hubiera sido empleado para vista si en lugar de una marca <FRAMESET> se hubiese colocado una marca <FRAME>. <FRAME> Define las caractersticas de una vista concreta. Define una vista dentre de un conjunto de ellas. La marca <FRAME> no contiene nada, por lo que no tiene marca de cierre. Puede tener hasta seis atributos, que son los siguientes : SRC="url" : Este atributo toma como valor el URL del documento que se debe mostrar en su vista en particular. Si no se incluye, se muestra un espacio en blanco del tamao que debera haber tenido la vista. NAME="nombre_vista" : Este atributo se emplea para asignarle un nombre a una vista, de manera que pueda ser referenciada por enlaces en otros documentos o desde otras vistas en el mismo documento. Este atributo es opcional. Por defecto las ventanas no tienen nombre. Los nombres deben comenzar por caracteres alfanumricos y pueden tener marcados sus contenidos con el atributo TARGET. MARGINWIDTH="valor" : Este atributo se utiliza cuando se quiere controlar el ancho de los mrgenes izquierdo y derecho de una vista. Si se especifica un valor, ser en pixels. Los mrgenes no pueden tener un tamao menor que 1 (los objetos dentro de la vista no pueden tocar los bordes) y no pueden tener un tamao que no deje sitio para los contenidos del documento. Este atributo es opcional, y por defecto es el browser el que decide el tamao apropiado. MARGINHEIGHT="valor" : Es igual que el anterior, pero se refiere a los mrgenes superior e inferior. SCROLLING="yes | no | auto" : Este atributo se utiliza para indicar si la vista debe tener o no barras de desplazamiento. Si se le da el valor de "yes" siempre se tendrn las barras en esa vista, si se le da "no" nunca las tendr, y si se le da el valor de "auto" el browser decidirn cuando son necesarias y las colocar cuando hagan falta. Este atributo es opcional, y su valor por defecto es "auto". NORESIZE : Este atributo no tiene valores, es simplemente un indicador que dice que la vista no puede ser redimensionada por el usuario. Para redimensionar una vista, los usuarios seleccionan un borde de la esta y lo desplazan a una nueva posicin. Si una vista adyacente a un borde no se puede redimensionar, todo ese borde no se podr mover, lo que condicionar el redimensionado de otras vistas. El atributo es opcional, y por defecto todas las vistas son redimensionables.

<NOFRAMES> Permite incluir informacin para visores que no soportan mltiples vistas. Un visor que no soportara vistas no mostrara nada de un documento con cuerpo <FRAME>. Para solucionarlo existe el ltimo elemento <NOFRAMES>, que se utiliza para incluir una pgina alternativa para estos visores. Un visor que s soporte

34

la marca <FRAME> ignorar todas las marcas y datos que se encuentre entre <NOFRAMES> y </NOFRAMES>. Ejemplo de frames <HTML> <HEAD><TITLE>Ejemplo de frames o ventanas</TITLE></HEAD> <FRAMESET ROWS="100, *, 100"> <NOFRAMES> <BODY> <P>Su visor no soporta vistas o frames. Seleccione <A HREF="indice.html">aqu</A> para ver un ndice de contenidos.</P> </BODY> </NOFRAMES> <FRAME SRC="menu.html"> <FRAMESET COLS="30%, 70%"> <FRAME NAME="Indice"> <FRAME NAME="Contenido"> </FRAMESET> <FRAME SRC="Copyright.html"> </FRAMESET> </HTML>

35