You are on page 1of 17

CURSO DE HTML

Estructura bsica de una pgina WEB


Una pgina web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la pgina. Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son: <html> </html> Indica al navegador que el documento texto que esta leyendo es un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo. <head> </head> Ac se detalla el encabezado de la pgina WEB. Esta etiqueta se abre luego de <html>. <body> </body> Cuerpo de la pgina donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la pgina, cerrndose antes de </HTML>. Ejemplo 1:
<html> <head> </head> <body> Bienvenidos al curso de HTML </body> </html>

ATRIBUTOS DEL TEXTO


Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias etiquetas. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que segun el navegador que este vd. utilizando, ver el resultado correctamente o no. Atributo Negrita Cursiva Teletype Etiqueta <B></B> <I></I> <TT></TT> Ejemplo <B> Texto de prueba </B> <I> Texto de prueba </I> <TT> Texto de prueba </TT> Resultado Texto de prueba Texto de prueba Texto de prueba

Subrayado Tachado Parpadeo Superindice Subindice

<U></U> <S></S> <BLINK></BLINK> <SUP></SUP> <SUB></SUB>

<U> Texto de prueba </U> <S> Texto de prueba </S> <BLINK> Texto de prueba </BLINK> <SUP> Texto de prueba </SUP> <SUB> Texto de prueba </SUB> <CENTER> Texto de prueba </CENTER>

Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba

Centrado <CENTER></CENTER>

Por otro lado la etiqueta <FONT></FONT> nos permite variar el tamao, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parmetros size , bgcolor y face . size = valor Da al texto un tamao en puntos determinado. size = + / - valor Da al texto un tamao tantas veces superior (+) o inferior (-) como indique el valor. color = "codigo de color" Escribe el texto en el color cuyo codigo se especifica. face = "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador. Ejemplo <FONT size = +2 color = "#FF0000 face = "Arial" > Texto de prueba </FONT> Se veria como Texto de prueba

Existen otras etiquetas que realizan las mismas operaciones que las antes vistas en los atributos del texto. Ejemplo <FONT size = +2 color = "#FF0000 face = "Arial" > Texto de prueba </FONT> Para incluir comentarios en la pgina Web se utiliza la etiqueta <!-- -->. Ejemplo : <!-- Esto es un comentario sobre mi pagina Web --> Los comentarios no seran mostrados por el navegador y son utiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada Se veria como Texto de prueba

parte del documento. Asimismo veremos mas adelante que la etiqueta de comentario nos sera de utilidad para incluir codigo JavaScript en nuestra pagina Web.

MARQUEE
La etiqueta <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona unicamente con Ms-Explorer. Sus parmetros son los siguientes : align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor = "codigo de color" Indica el color del fondo de la marquesina. direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) height = num o % Indica la altura de la marquesina en puntos o porcentaje en funcin de la ventana del navegador. width = num o % Indica la anchura de la marquesina en puntos o porcentaje en funcin de la ventana del navegador. loop = num / infinite Indica el numero de veces que se desplazar el texto por la marquesina. Si se indica infinite, se desplazar indefinidamente. scrolldelay = num. Indica el nmero de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor nmero mas lentamente se desplazar el texto. Veamos un ejemplo de esta etiqueta : <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi pagina personal en Internet. </MARQUEE>

CABECERAS

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio de las etiquetas <H1><H2><H3><H4><H5> y <H6> . El texto que escribamos entre el inicio y el fin de la etiqueta ser el afectado por las cabeceras. La cabecera <H1> ser la que muestre el texto en mayor tamao.
Ejemplo Se veria como

<H1>Texto de Prueba</H1>

Texto de prueba
Texto de Prueba
Texto de Prueba Texto de Prueba Texto de Prueba Texto de Prueba

<H2>Texto de Prueba</H2> <H3>Texto de Prueba</H3> <H4>Texto de Prueba</H4> <H5>Texto de Prueba</H5> <H6>Texto de Prueba</H6>

Los textos marcados como "cabeceras" provocan automaticamente un retorno de carro sin necesidad de incluir la etiqueta <BR> . Por ejemplo
Ejemplo Se veria como

<H3>Pagina de Jose</H3>Esta es mi pagina personal.

Pagina de Jose Esta es mi pagina personal

TABLAS

Las tablas nos permiten representar cualquier elemento de nuestra pgina (texto, listas, imgenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta muy util para "ordenar" contenidos de distintas partes de nuestra pgina. La tabla se define mediante la etiqueta <TABLE></TABLE>. Los parmetros opcionales de esta etiqueta son : border = num. Indica el ancho del borde de la tabla en puntos. cellspacing = num Indica el espacio en puntos que separa las celdas que estan dentro de la tabla. cellpadding = num Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta. width = num % Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de la ventana del navegador. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos de las celdas. height = num % Indica la altura de la tabla en puntos o en porcentaje en funcin del alto de la ventana del navegador. Si no se indica este parmetro, la altura se adecuar a la altura de los contenidos de las celdas. bgcolor = codigo de color Especifica el color de fondo de toda la Tabla. Para definir las celdas que componen la tabla se utilizan las etiquetas <TD> y <TH> . <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido ser resaltado en negrita y en un tamao ligeramente superior al normal. Los parmetros opcionales de ambas etiquetas son : align = LEFT / CENTER / RIGHT / JUSTIFY Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY). valign = TOP / MIDDLE / BOTTOM Indica la alineacin vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE). rowspan = num Indica el nmero de filas que ocupar la celda. Por defecto ocupa una sola fila. colspan = num Indica el nmero de columnas que ocupar la celda. Por defecto ocupa una sola columna. width = num % Indica la anchura de la columna en puntos o en porcentaje en funcin del ancho de la ventana del navegador. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos. Este parametro solo funciona en los navegadores modernos.

bgcolor = codigo de color Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una fila de celdas se utiliza la etiqueta <TR> . A continuacin mostraremos un ejemplo de una tabla que contiene solo texto. Como se indic anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hiperenlace, una Lista, etc... Ejemplo <TABLE border = 4 cellspacing = 4 cellpadding = 4 width = 80% > <TR> <TH align = center > Buscadores</TH> <TH align = center colspan = 2 > Otros Links</TH> </TR> <TR> <TD align = LEFT > Yahoo </TD> <TD align = LEFT > Microsoft </TD> <TD align = LEFT > IBM </TD> </TR> <TR> <TD align = LEFT > Infoseek </TD> <TD align = LEFT > Apple </TD> <TD align = LEFT > Digital </TD> </TR> </TABLE> Se veria como:

Buscadores Yahoo Infoseek

Otros Links Microsoft Apple IBM Digital

Las etiquetas <TD> y <TH> son cerradas segn el estandar de HTML, es decir que un elemento de tabla <TD> deberia cerrarse con un </TD> , sin embargo los navegadores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente.

Unificacin de celdas
Para algunas tablas puedes necesitar 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), ambos disponibles para celdas (tag HTML td y tag HTML th). Cdigo <table> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Vista Campo 1 Campo 2 Campo 3 Campos 4 y 5 Campo 6

Campo 7 Campo 8 Campo 9

Mira en el ejemplo anterior cmo una definicin de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto tambin funciona para uificacin vertical, con una pequea diferencia debido a la naturaleza de las tables en HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificacin deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados: Cdigo <table> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td>

<td>Campo </tr> <tr> <td>Campo <td>Campo </tr> <tr> <td>Campo <td>Campo </tr> </table>

3</td>

5</td> 6</td>

8</td> 9</td>

Vista Campo 2 Campo 3 Campo unificado Campo 5 Campo 6 Campo 8 Campo 9

Debes tener cuidado al unificar filas y columnas de no encimar las celdas unificadas. Esto podra tener resultados inesperados.

IMAGENES
Hasta el momento hemos visto como se puede escribir texto en una pagina Web, as como sus posibles formatos. Para incluir una imagen en nuestra pgina Web utilizaremos la etiqueta <IMG> . Hay dos formatos de imagenes que todos los navegadores modernos reconocen. Son las imgenes GIF y JPG . Cualquier otro tipo de fichero grfico o de imagen (BMP, PCX, CDR, etc...) no ser mostrado por el navegador, a no ser que disponga de un programa externo que permita su visualizacin. La etiqueta <IMG> tiene varios parmetros : src = "imagen" Indica el nombre del fichero grfico a mostrar. alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la pgina no sea capaz de visualizar la imagen. lowsrc = "imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pagina. Este parametro no es reconocido por la totalidad de los navegadores ya que

esta en estudio su aplicacion, asi que en la mayoria de los casos sera ignorado mostrandose solo la primera imagen ( src ). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src . Si las imagenes son iguales pero tienen distinta "resolucion" se conseguir un efecto tipo "Fade". Si las imagenes son de distinto tamao la imagen indicada en src se redimensionara al tamao indicado por la imagen indicada enlowsrc align = TOP / MIDDLE / BOTTOM Indica como se alinear el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior. border = tamao Indica el tamao del "borde" de la imagen. A toda imagen se le asigna un borde que ser visible cuando la imagen forme parte de un Hyperenlace. height = tamao Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. width = tamao Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. hspace = margen Indica el numero de espacios horizontales, en puntos, que separarn la imagen del texto que la siga y la anteceda. vspace = margen Indica el nmero de puntos verticales que separaran la imagen del texto que le siga y la anteceda. ismap / usemap Indica que la imagen es un MAPA. Veremos estos parametros mas adelante en este manual. Ejemplo <IMG src= "caution.gif" alt= "Cuidado !!" > Si el navegador no pudiese visualizar el grfico..... La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen. Ejemplo <IMG src= "http://www.microsoft.com/iexplorer.gif" > Se vera como

Veamos varios ejemplos "jugando" con los tamaos de la imagen, as como comprobando la alineacin de los textos. (Recuerde que en funcin del navegador que vd. utilize pueden verse o no los efectos de cada parametro). Ejemplo Se vera como

<IMG src= "caution.gif" width= 100 >

<IMG src= "caution.gif" height= 20 > <IMG src= "caution.gif" align= TOP > Atencion !!! Atencion !!! <IMG src= "caution.gif" align= MIDDLE > Atencion !!! Atencion !!! <IMG src= "caution.gif" align= BOTTOM > Atencion !!! Atencion !!! Tenga en cuenta <IMG src= "caution.gif" hspace= 20 > esta indicacion. Tenga en cuenta Tenga en cuenta <IMG src= "caution.gif" vspace= 40 > esta indicacion. Tenga en cuenta esta indicacion. esta indicacion

ENLACES
La caracterstica principal de una pgina Web es que podemos incluir Hiperenlaces. Un Hiperenlace es un elemento de la pgina que hace que el navegador acceda a otro recurso, otra pgina Web, un archivo, etc... Para incluir un Hyperenlace se utiliza la etiqueta <A></A> . El texto o imagen que se encuentre dentro de los lmites de esta etiqueta ser sensible, esto quiere decir que si

pulsamos con el raton sobre l, se realzar la funcion de hiperenlace indicada por la etiqueta <A></A> . Si el Hiperenlace est indicado por un texto, este aparecer subrayado y en distinto color, si se trata de una imagen, esta aparecer con un borde rodendola. Esta etiqueta tiene el parmetro href que indica el lugar a donde nos llevar el Hiperenlace si lo pulsamos. Ejemplo <A href = "http://www.microsoft.com/" > Pulse para ir a la pgina de Microsoft </A> Se vera como Pulse para ir a la pgina de Microsoft

Si situamos el ratn encima de la frase y pulsamos, el navegador acceder a la pgina Web indicada por el parmetro href , es decir, acceder a la pgina situada en http://www.microsoft.com/ Lo mismo podramos hacer con un grfico. Ejemplo Se veria como

Para buscar en Internet : <A href = "http://www.yahoo.com/" > Para buscar en Internet : <IMG src = "yahoo.gif" ></A> Pulsando sobre la imagen se accedera a la pagina situada en http://www.yahoo.com/. Un Hiperenlace tambin puede llevarnos a una zona de nuestra pgina. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parametro name . Ejemplo: <A name = "seccion1" ></A> Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccion se llamar seccion1 . Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos de la siguiente forma : <A href = "#seccion1" > Primera Parte </A> O tambin : <A href = "http://www.mipagina.dom/mipagina.htm#seccion1" > Primera Parte </A> Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las etiquetas anteriores hemos visto como hacer enlaces a pginas Web o secciones dentro de una pgina web, pero podramos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de Internet. Ejemplo:

<A href = "news://news.actualidad.es/" > Noticias de actualidad </A> Asimismo podemos hacer que el Hiperenlace de como resultado el envo de un correo electrnico a una direccin de correo determinada. Ejemplo: <A href = mailto:usuario@email.dom> Envame tus sugerencias </A> Tambin podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el navegador intentar "ejecutar" el fichero, y si no puede hacerlo nos preguntar si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra pgina copiar ficheros a su ordenador. <A href = "manual.zip" > Pulsa aqui para llevarte una copia del manual. </A>

FORMULARIOS
Los formularios nos permiten dentro de una pgina Web solicitar informacin al visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedar asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de estos ser enviado a la direccin (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este ltimo paso de procesar las variables necesitaremos realizar un programa externo en algun lenguaje de programacin como PHP, ASP, PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creacin de este tipo de programas sera tema de otro manual diferente, por lo que aqu veremos como se pueden enviar las variables a nuestra direccin de correo electrnico. La declaracin del formulario se pone entre las etiquetas <FORM></FORM> . En el interior de la declaracin se indican los elementos (variables) de entrada. La etiqueta <FORM> tiene los parmetros action y method . action = "programa" Indica el programa que va a "tratar" a las variables que se enven con el formulario. En nuestro caso enviaremos las variables por correo electrnico, con lo que el "programa" ser "mailto: direccion_de_correo" . method = POST / GET Indica el mtodo segn el que se transferiran las variables. POST produce la modificacin del documento de destino (como en el caso de enviar por correo las variables). GET no produce cambios en el documento destino (como en el caso de una consulta a una base de datos, p.ej. una pgina de bsqueda en Internet).

Campos de Entrada Para la introduccin de las variables se utiliza la etiqueta <INPUT> . Esta etiqueta tiene el parmetro type que indica el tipo de variable a introducir y name que indica el nombre que se le dar al campo. Cada tipo de variable tiene sus propios parmetros. type= text name = campo Indica que el campo a introducir ser un texto.Sus parmetros son : maxlenght = numero Numero mximo de caracteres a introducir en el campo. size = numero Tamao en caracteres que se mostrar en pantalla. value = "texto" Valor inicial del campo. Normalmente sera " ", o sea, vacio. type = password name = campo Indica que el campo sera una palabra de paso. Mostrar asteriscos (*) en lugar de las letras escritas. Sus parmetros opcionales son los mismos que para text. type = checkbox name = campo El campo se elegir marcando una casilla. Se permite marcar varias casillas. Los valores de las casillas sern indicados por : value = "valor" checked La casilla aparecera marcada por defecto. type = radio name = campo El campo se elegir marcando una casilla. Solo permite marcar una sola de las casillas. Los valores de las casillas seran indicados por : value = "valor" type = image name = campo El campo contendr el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parmetro : src = "fichero de imagen". type = hidden name = campo

El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parmetro : value = "valor" type = submit Representa un botn. Al pulsar este botn la informacin de todos los campos se enva al programa indicado en <FORM> . Tiene el parmetro value = "texto" que indica el texto que aparecer en el boton. type = reset Representa un botn. Al pulsar este botn se borra el contenido de todos los campos. El parmetro value = "texto" indica el texto que aparecer en el botn. Campos de Seleccion Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la etiqueta <SELECT> </SELECT> . Sus parmetros son : name = campo Nombre del campo size = num Nmero de opciones visibles. Si se indica 1 se presenta como un men desplegable, se se indica mas de uno se presenta como una lista con barra de desplazamiento. multiple Permite selecionar mas de un valor para el campo. Las diferentes opciones de la lista se indican con la etiqueta <OPTION> . Esta etiqueta puede incluir el parametro selected para indicar cual es la opcion por defecto. En caso de que no se especifique, se tomara por defecto la primera opcin de la lista. reas de texto. Representa un campo de texto de mltiples lineas. Normalmente se utiliza para que se incluyan en el comentarios. La etiqueta usada es <TEXTAREA> </TEXTAREA> , y sus parmetros : name = campo Nombre del campo. cols = num. Nmero de columnas de texto visibles. rows = num. Nmero de filas de texto visibles. wrap = VIRTUAL / PHYSICAL Justifica el texto automticamente en el interior de la caja. La opcin PHYSICAL enva las lneas de texto separadas en lneas fsicas. La opcin VIRTUAL envia todo el texto seguido.

Veamos a continuacin un ejemplo de formulario utilizando todas las formas de introduccin de datos. <FORM action = "mailto:usuario@email.dom" method = post > Tu Nombre: <INPUT type = text name = nombre size = 30 > Tu Clave: <INPUT type = password name = clave size = 8 > <P> Archivos a Enviar: <INPUT type = checkbox name=archivo value = "Manual" > Manual de Html <INPUT type = checkbox name=archivo value = "Mapthis" > Programa Mapthis <INPUT type = checkbox name=archivo value = "Help" > Archivo de Ayuda <P> Tu Edad : <INPUT type = radio name=edad value = "-20" > Menos de 20 aos <INPUT type = radio name=edad value = "20-40" > Entre 20 y 40 aos <INPUT type = radio name=edad value = "+40" > Mas de 40 aos <P> <INPUT type = hidden name=lugar value = " pgina personal" > Como encontraste mi pgina : <SELECT name=donde> <OPTION> De casualidad <OPTION> Por el buscador Ole <OPTION> Por el buscador Yahoo <OPTION> Me la comentaron </SELECT> <P> Tus Comentarios: <BR> <TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA> <P> <INPUT type = submit value = "Enviar" > <INPUT type = reset value = "Borrar" > </FORM> Ahora veamos el efecto producido en la pgina Web : Tu Nombre: Archivos a Enviar: Manual de Html Programa Mapthis Tu Edad : Menos de 20 aos Entre 20 y 40 aos Archivo de Ayuda Tu Clave:

Mas de 40 aos
pagina personal

Como encontraste mi pgina :

De casualidad

Tus Comentarios:

Enviar

Borrar

Si rellenas este FORM y pulsas sobre el botn Enviar , (estando conectado a Internet), se generar un mensaje de correo a la direccion de correo usuario@email.dom. Si pulsas el boton Borrar se borraran los datos que hayas introducido en el Formulario. El texto que se recibira por correo electrnico sera parecido a este : nombre=Pedro+Perez &clave=12345678 &archivo=Manual &archivo=Mapthis &edad=2040 &lugar=pagina+personal &donde=Por+el+buscador+Ole &comentario%94= Espero+que+me+mandes+los%0D%0Aficheros+antes+del+martes%0D%0A%0D%0AS aludos.%0D%0A Podemos observar que en el correo se separan las variables con el smbolo & , los espacios se sustituyen por el signo + y se representan los codigos de retorno de carro y avance de linea del campo de texto con los caracteres %0D y %0A respectivamente. Si en vez de enviar estas variables por correo electrnico, fuesen enviadas a un programa (CGI), este programa podra tratarlas y dar como respuesta una nueva pgina Web. Para enviar un formulario por e-mail sin importar el navegador utilizado se ha de utilizar un programa externo que realize este proceso. En WebTaller te ofrecemos un servicio de envo de formularios

Truco !!!
Se puede utilizar un Formulario como "lanzador" de links, es decir, por medio de una lista desplegable permitir al usuario escoger un Link y acceder a el. Para ello se utiliza el parametro "OnClick". Ejemplo :

<FORM> <SELECT name = "list" > <OPTION SELECTED value= "http://www.webtaller.com" > WebTaller <OPTION value= "http://www.microsoft.com" > Microsoft <OPTION value= "http://www.ibm.com" > Ibm <OPTION value= "http://www.novell.com" > Novell <OPTION value= "http://www.hp.com" > Hewlett Packard <OPTION value= "http://www.fujitsu.com" > Fujitsu <OPTION value= "http://www.3com.com" > 3Com </SELECT> <INPUT TYPE=BUTTON value= "Ir a..." onClick= "top.location.href=this.form.list.options[this.form.list.selectedIndex].value" > </FORM> Este seria el efecto producido :
WebTaller

You might also like