Aprender HTML completo, a un par de horas de distancia

[Creature]

3.8- Mapas


Un Mapa es una imagen que permite realizar diferentes Hyperenlaces en función de la "zona" de la imagen que se pulse. Las directivas para crear mapas son <MAP></MAP> y <AREA>.

La directiva <MAP> identifica al mapa y tiene el parámetro name para indicar el nombre del mapa.

La directiva <AREA> define las areas sensibles de la imagen. Tiene los siguientes parámetros obligatorios :


shape = "tipo"
Indica el tipo de area a definir.

coords = "coordenadas"
Indica las coordenadas de la figura indicada con shape.

href = "URL"
Indica la dirección a la que se accede si se pulsa en la zona delimitada por el area indicada.

Los tipos de area pueden ser los siguientes :


rect
Area rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha.

poly
Polígono. Se deben especificar las coordenadas de todos los vértices del polígono. El visor se encarga de "cerrar" la figura.

circle
Circulo. Se debe especificar en primer lugar las coordenadas del centro del círculo y a continuación el valor del radio (en puntos).

Si dos areas se superponen, se ejecutará la que se encuentre en primer lugar en la definición del mapa. Es importante definir una última area que abarque la totalidad del gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un area definida.

Veamos un ejemplo completo.


<MAP name="casa">
<AREA shape="poly" coords="2,62,57,62,28,1" href="tejado.htm">
<AREA shape="rect" coords= "21,101,35,138" href="puerta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href="casa.htm">
<AREA shape = "circle" coords = "80,76,21" href="arbol.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm">
</MAP>  


Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiríamos la siguiente directiva :

<IMG src="grafico.gif" usemap="#casa">  



---------------------------------------------------
Como podemos observar, el proceso mas laborioso es el de determinar las coordenadas. Existen programas como MAPTHIS que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el raton. El programa MAPTHIS permite abrir una imagen tipo .GIF y marcar las zonas sensibles. Este programa creara un fichero con extension .map que contendra en su interior las coordenadas de cada area. Con esta información nos sera mucho mas facil escribir nuestro mapa. Puedes buscar este programa en Shareware.com buscando por mpths.
---------------------------------------------------

[Creature]

3.9- Formularios


Los formularios nos permiten dentro de una página Web solicitar información 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 dirección (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 programación como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creación de este tipo de programas sería tema de otro manual diferente, por lo que aquí veremos como se pueden enviar las variables a nuestra dirección de correo electrónico.

La declaración del formulario se pone entre las directivas <FORM></FORM>. En el interior de la declaración se indican los elementos (variables) de entrada. La directiva <FORM> tiene los parámetros action y method.


action = "programa"
Indica el programa que va a "tratar" a las variables que se envien con el formulario. En nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa" será "mailto: direccion_de_correo".

method = POST / GET
Indica el método según el que se transferiran las variables. POST produce la modificación 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 página de búsqueda en Internet).

Campos de Entrada

Para la introducción de las variables se utiliza la directiva <INPUT>. Esta directiva tiene el parámetro 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 parámetros.


type= text name = campo
Indica que el campo a introducir será un texto. Sus parámetros son :

maxlenght = numero
Numero máximo de caracteres a introducir en el campo.
size = numero
Tamaño 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 parámetros 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 serán indicados por :

value = "valor"
checked
La casilla aparecera marcada por defecto.

type = radio name = campo
El campo se elegira 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 contendra el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parámetro :

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 parámetro :

value = "valor"

type = submit
Representa un botón. Al pulsar este botón la información de todos los campos se envía al programa indicado en <FORM>. Tiene el parámetro value = "texto" que indica el texto que aparecerá en el boton.

type = reset
Representa un botón. Al pulsar este botón se borra el contenido de todos los campos. El parámetro value = "texto" indica el texto que aparecerá en el botón.

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 directiva <SELECT> </SELECT> . Sus parámetros son :


name = campo
Nombre del campo

size = num
Numero 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 directiva <OPTION>. Esta directiva 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 opción de la lista.

Areas de texto.

Representa un campo de texto de múltiples lineas. Normalmente se utiliza para que se incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parámetros :


name = campo
Nombre del campo.

cols = num.
Numero de columnas de texto visibles.

rows = num.
Numero de filas de texto visibles.

wrap = VIRTUAL / PHYSICAL
Justifica el texto automáticamente en el interior de la caja. La opción PHYSICAL envia las lineas de texto separadas en lineas físicas. La opción VIRTUAL envia todo el texto seguido.

[Creature]

Y bueno, aquí termina, esto es lo básico de HTML, IMPRESINDIBLE para un webmaster conocer todo esto, no solo se tiene que saber lo más utilizado.

HTML extendido en http://www.hackingballz.com/manual_html/man012.php

Y mucha más info incluyendo FAQ (pregutnas frecuentes) en www.hackingballz.com.

[SkA]

   Creature ! Exelente manual o curso de Html
estoy aprendiendo mucho.
ya aprendiendo este curso bien, buscare otros para poder aprender mas de html. recomientas otro por alli?
gracias de antemano !
Saludos.

[Lmcrackk]

www.desarrolloweb.com
En esta web ai todo lo k se debe saber.HTML,ASP,PHP,SCRIPT,y ademas como conseguir mas visitas,dar d alta en buscadores,etc.Web completisima.

[rocambole]

La mejor web que hay sobre esto es www.htmlpoint.com, almenos que yo conozca.

[AkHsA]

Hola, la verdad es que estubo weno, pero muy muy weno el kursillo, porke se esplika detalladamente...xD

Felicidades por el esfuerzo..!

Y efektivamente: www.htmlpoint.com es una muy wena pagina sobre HTML...<-- Un kurso bastante amplio..

Saludos...Kedo a sus servicios...AkHsA

[Ali-G]

Venga enseguia, ahora nos metemos con dhtml y javascript.

Pero nada de copiar de otras webs cambiando unas frases para que parezca "nuestro". Algunos ya se pasan con eso y no señalo a nadie. Si no hay conocimientos aprendeis y luego escribis como hacemos el resto.

E·M·P·I·C·A·L·4·E·V·E·R

[luisaranda]

es alucinante... claro, conciso .. inmejorable. Y además me surgen dudas.. hablas de CGI (Common Gateway Interface... esto existe hecho? puedo copiar un programa de estos para ver como funciona? si uso dreanweaver o algo similar ya estrá hech0?
no sé si digo muchas chorradas, no entiendo mucho del tema
gracias
Luis

[betapro]

muy buen manual
felicitaciones
estaba buscando algo asi