HTML

Qu es un documento HTML?

Los documentos HTML son archivos de texto plano o archivos ASCII (American Standard Code for Information Interchange - Cdigo Estndar Americano para el Intercambio de Informacin) que pueden ser creados usando cualquier editor de texto. La unica condicin es guardar el documento como "solo texto" y ponerle la extensin "html" o "htm". (Por ejemplo: Home.html o Home.htm).

HTML es un Lenguaje con independencia de plataforma, marcacin fcil de usar que facilita la lectura de documentos por medio de elementos que mejoran la apariencia del texto, al mismo tiempo que los pone ms al alcance tanto del autor como de otras personas mediante ligas, capaz de incluir otros medios, adems de texto, no slo por diversin sino para explicar e ilustrar el trabajo de la gente. los documentos HTML son documentos SGML.

HTML es el formato de lenguaje estndard para pginas web. Provee un conjunto de etiquetas que definen y dan formato a las distintas secciones de una pgina web.

As una pgina web es un simple archivo de texto que contiene cdigo HTML, el cual es almacenado en un servidor web. cuando un usuario remoto (cliente) hace una peticin espefifica a la pgina web, el servidor web localiza el archivo que contiene la peticin y lo transmite de regreso al usuario remoto. El navegador del usuario remoto recibe a trves de su navegador (browser) el stream texto, lo decodifica y genera el desplegado grafico codificado en un archivo HTML.

Qu es un elemento?

Un elemento es un componente fundamental de la estructura de un documento de texto. Algunos ejemplos de elementos son: encabezados (heads), tablas (tables), prrafos (paragraphs) y listas (lists). Podemos usar etiquetas (tags) para marcar el elemento de un archivo para el browser (programa para visualizar documentos HTML). Para indicar varios elementos en un documento HTML, se utilizan las etiquetas.

Algunos elementos pueden tener atributos o attribute, los cuales son caractersticas que tendra el elemento y estos atributos se definen en la etiqueta de inicio. Por ejemplo podemos definir por medio de atributos la alineacin que tendra el texto dentro de una etiqueta "p", entonces tendremos que las opciones para alinear el texto son a la izquierda (left), al centro (center), a la derecha (right) o justificado (justify).

Qu es una etiqueta o tag?

Las etiquetas HTML o tags HTML consisten de un parentesis angular izquierdo o smbolo menor que "". Las etiquetas o tags son usualmente utilizadas en pares las cuales una indica el inicio y la otra el fin de la instruccin. La etiqueta de fin o end tag esta precedida de una diagonal o slash "/". (Ejemplos de etiquetas o tags: , , ).

HTML es sensitivo a letras mayusculas y minusculas?

Algunos lenguajes de programacin son sensitivos a las letras mayusculas y minusculas, como es el caso del Lenguaje de Programacin C, es decir, que hace distincin entre la variable "lenguaje", "Lenguage", y "LENGUAJE", cada una de ellas tendra un significado distinto.

HTML no es sensitivo a las letras mayusculas y minusculas, se puede utilizar la etiqueta o y tendra el mismo significado.

Cules son los elementos requeridos en un documento HTML?

Los documentos HTML deben construirse de acuerdo con la SGML DTD HTML, es decir, con la Definicin de Tipo de Documento (Document Type Definition, DTD) que define el estndar de HTML. La DTD define las etiquetas y sintaxis que sirven para crear un documento de HTML. Se puede indiar al Browser a qu DTD se apega su documento colocando un comando especial del Lenguaje Estndar de Marcacin Generalizada (SGML, Standard Generalized Markup Language) en la primer lnea del documento, por ejemplo:

Lo que se esta indicando al Browser es que el documento esta diseado para cumplir la DTD HTML 4.1, definida por el Consorcio World Wide Web (W3C). Tambien existe el atributo version para definir la versin estndar de un documento HTML.

Los navegadores son capaces de desplegar un archivo de texto sin etiquetas HTML, es posible crear documentos aparentemente HTML sin un principio basico, depende que uso le de al mismo para que pueda ser catalogado como un documento HTML, hasta que los navegadores no se ajusten realmente a un estandar en mi opinion los elementos que no deberian faltar en un documento HTML serian: 1. html

2. head

3. title

4. body

Atributo version Identifica mejor el origen y contenido de un documento de HTML que el comando doctype de SGML.

Etiquetas HTML

La etiqueta html indica al browser que el archivo contiene cdigo HTML.

La etiqueta head identifica la primer parte del cdigo HTML, describe las diferentes propiedades del docuemento, incluyendo su ttulo, posicin en el Web e interacin con otros documentos. No tiene atributos y sirve slo para subordinar a las dems etiquetas de encabezado.

La etiqueta puede delimitar algunas otras etiquetas que ayuden a definir y administrar el contenido del documento como: , , , ,

La etiqueta title contiene el titulo del documento e identifica su contenido en un contexto global. El ttulo es desplegado en la parte superior de la ventana del browser. No tiene atributos.

La etiqueta body indica la segunda parte de un documento HTML, en esta etiqueta estara definido el contenido del documento.

Atributos

bgcolor, establece el color de fondo

background, establece una imagen de fondo.

bgproperties, valor nico fixed, el cual inmoviliza la imagen de fondo. (Solo I. E.).

text, establece el color de la fuente o texto.

link, vlink, alink, color del hipertexto, ligas sin visitar, ligas visitadas y liga activa repectivamente.

leftmargin, permite establecer un margen izquierdo (Solo I.E.)

topmargin, permite establecer un margen superior (Solo I.E.)

El estndar define que se puede trabajar con las etiquetas anteriores para realizar un documento HTML.

ver cdigo ver html

La etiqueta meta, proporciona informacin adicional sobre el documento de manera oculta, es decir, la informacin no es desplegada a la vista del browser, los datos que puede llevar esta informacin pueden ser el autor, fecha de creacin del documento, topicos o temas que componen nuestro documento, la descripcin del documento, etc.

La etiqueta , se declara dentro de la etiqueta , por ejemplo un uso muy comun de esta etiqueta es para declarar por asi decirlo la variable "keywords - palabra clave", con la cual se esta definiendo que el contenido o valor de la variable keywords sera un conjunto de palabras clave y que los motores de bsqueda utilizan para indexar y categorizar los documentos en el world wide web. Otro atributo de utilidad es "http-equiv", el cual proporciona instrucciones al servidor para que lo incluya en el encabezado MIME del documento que se pasa al navegador o browser antes de enviar el documento real. Cuando un servidor enva un documento a un navegador, primero manda cierto numero de variables u ordenes con su respectivo valor, todos mandan al menos uno:

content-type : text/html

Esto le dice al navegador que va a recibir un documento de HTML.

La etiqueta se utiliza en pares, es decir nombre de la variable y su valor, es decir name y content respectivamente.

Principales Atributos de la Etiqueta Meta

meta

Name

Content

ver cdigo

Author

Nombre del autor

ver cdigo

Description

De que trata el documento

ver cdigo

keywords

Topicos o temas que se tratan

Es una buena tecnica de programacin y diseo, comentar los programas, proporcionar el nombre del autor o autores, fechas de creacion, modificacin, actualizacin, asi como una breve explicacin del objetivo del programa, esta etiqueta nos ayuda con esta tarea.

Los URL dentro de un documento pueden ser absolutos que son quellos donde se pone explicitamente la ubicacin del archivo, por ejemplo:

Tambien pueden ser relativos los cuales tienen la funcin contraria por asi decirlo de los absolutos, ya que no se especifica explicitamente toda la ruta de la ubicacin del archivo, ya que la parte omitida la proporciona el navegador al incluir la etiqueta base donde especificamos el resto de la ruta de ubicacin del archivo, esta etiqueta se pone dentro de la etiqueta . Utilizando el ejemplo anterior podemos ahorrarnos el especificar cada vez la ruta de un archivo al ponerlo solo una vez en la etiqueta base:

De esta manera solo pondremos el nombre del archivo:

El atributo href debe tener un URL vlido y si se emplea el atributo target cuando se trabaja con frames, asi podemos definir el frame donde deseamos abrir el HTML.

Se utiliza para proveer informacin acerca de la relacin entre el documento actual y algn otro en una coleccin, permite al autor incluir informacin que puede ser usada para construir una tabla de contenidos. Si el documento es parte de un conjunto el elemento link pueder ser empleado para indicar la localizacin del siguiente documento en el conjunto.

Permite crear propiedades de hojas de estilo en cascada (Cascading Style Sheets - CSS), para controlar las caractersticas del desplegado del contenido de cuerpo de todo el documento.

ver cdigo ver html

...

Las etiquetas de headings. HTML tiene seis niveles de headings, numerados del 1 al 6, comenzando con el mas notable, estas despliegan diferentes tamaos de letra.

Divisiones y prrafos

Los navegadores acomodan el texto localizado en el documento HTML de modo que ocupen el ancho de su ventana. Al minimizar o maximizar la ventana del navegador, el texto es reacomodado de manera automtica, en lneas ms anchas si se maximiza o al minimizar las palabras se reacomodan hacia las lneas de abajo. Para controlar el flujo del texto HTML utiliza las etiquetas de divisin explcita , prrafo y corte de lnea . Los caracteres de retorno por lo general son ignorados por el navegador.

La etiqueta o division es utilizada para dividir el documento en secciones distintas e independientes.

Atributos

align, controla la alineacin del texto, posibles valores: left, center, right y justify.

nowrap, anula el acomodo automtico del texto, los cortes de lnea se hacen donde se hayan colocado retornos de carro en su documento fuente HTML.

lang, especifica la lengua utilizada en la divisin, su valor es tomado de las abreviaturas del lenguaje y solo acepta 2 caracteres, por ejemplo lang="en", indica al navegador que la divisin est redactada en ingls (englis).

style y class, especifica el uso de estilos.

La etiqueta paragraph, define parrafos y es utilizada para incluir un salto de lnea, es decir, cuando se redacta un documento en un procesador de texto, es muy comun utilizar la tecla enter para especificar que continue en la lnea siguiente, si se utiliza un editor de texto para confeccionar un documento HTML, el editor de texto nos mostrara los saltos de lnea requeridos, no as cuando vemos el mismo documento con el browser y no se especfico algun salto de lnea.

ver cdigo ver html

La etiqueta preformatted, sirve para mostrar el contenido como este fue escrito en su estilo original, con formato previo, saltos de lnea y espacio real, es decir, si se utiliza esta etiqueta no se tendra la necesidad de incluir un salto de lnea ya que no es necesario.

ver cdigo ver html

La etiqueta unnumbered list, sirve para crear una lista sin numerar, es decir, muestra solo la relacin de nombres de personas o cosas que se necesiten para algn propsito. Cada elemento de la lista debera estar antecedido por la etiqueta list item , el estndar marca que no es necesario poner la etiqueta de fin de list item , se sugiere como buen estilo de programacin cerrar las etiquetas cuando estas tengan etiquetas de fin.

Atributos

Type, define el tipo de vieta (disc, circle, square)

Compact, reduce el interlineado entre elementos de la lista

ver cdigo ver html

La etiqueta ordered list tambien llamada numbered list, sirve para crear una lista numerada, es decir, muestra de forma numerada la relacin de nombres de personas o cosas que se necesiten para algn propsito. Cada elemento de la lista debera estar antecedido por la etiqueta list item , el estndar marca que no es necesario poner la etiqueta de fin de list item , se sugiere como buen estilo de programacin cerrar las etiquetas cuando estas tengan etiquetas de fin.

Atributos

I. Start, modifica el valor inicial de la numeracin, solo para digitos

II. Compact, reduce el interlineado entre elementos de la lista

III. Type, cambia el tipo de numeracin:

i. A, letras mayusculas

ii. a, letras minusculas

iii. I, numeros romanos en mayusculas

iv. i, numeros romanos en minusculas

IV. Value, se utiliza en la etiqueta , permite cambiar la secuencia de la numeracin

ver cdigo ver html

y La etiqueta dir, se utiliza para mostrar listas de archivos, la etiqueta menu, muestra una lista de opcinoes breves al alector

ver html

La etiqueta definition list, sirve para crear una lista de definicin, es decir, una lista donde daremos el significado o acepcin de un termino, asi como las listas ordenadas o las listas sin numerar contiene la etiqueta , la etiqueta definition list, contiene las etiquetas definition term y definition definition, por lo tanto la etiqueta indica la inclusin de una lista de definicin, la etiqueta indica el termino a definir y por ultimo la etiqueta indica el significado del termino.

ver cdigo ver html

Nested Lists

Las listas pueden estar anidadas, es decir, podemos hacer una lista y que esta a su vez tenga una lista interna y as sucesivamente.

ver cdigo ver html

La etiqueta blockquote, se utiliza para hacer referencias.

ver cdigo ver html

La etiqueta address, se utiliza para especificar la autoria de un documento, una referencia para contactar al autor, (por ejemplo su direccin de correo electrnico) y la fecha de revisin.

ver cdigo ver html

La etiqueta horizontal rules, se utiliza para producir una lnea horizontal la cual puede servir para separar secciones en un documento. Se puede variar el ancho, tamao y alineacin de la lnea.

Atributos

size, grosor en numero de pixeles

noshade, especfica que la lnea no aparezca en 3 dimensiones sino en un solo plano.

widht, ancho que tendra la lnea.

align, alinacin que tendra la lnea (left, center, right).

color, especfica el color de la lnea.

ver cdigo ver html

Estilos Fsicos y Estilos Lgicos

P: Por que utilizar ambos si producen el mismo resultado?.

R: La ventaja de los estilos lgicos, es que si decidimos cambiar el nivel del heading para que sea de 20 puntos, con justificacin a la izquierda y tipo de letra Helvetica lo que se debe hacer es cambiar la definicin del nivel del Heading en el browser. Otra ventaja del estilo lgico es que ayuda a mantener una consistencia en los documentos.

Etiquetas de Estilos Lgicos La etiqueta defined, se utiliza para especificar la definicin de un termino, muestra el texto en italicas.

ver cdigo ver html

La etiqueta emphasis, se utiliza para dar enfasis en el texto, muestra el texto en italicas.

ver cdigo ver html

La etiqueta cite, se utiliza para indicar titulos de libros, peliculas, etc., muestra el texto en italicas.

ver cdigo ver html

La etiqueta code, se utiliza para indicar el cdigo de los programas.

ver cdigo ver html

La etiqueta keyboard, se utiliza para indicar lo que el usuario debe teclear.

ver cdigo ver html

La etiqueta samp, se utiliza para indicar una muestra.

ver cdigo ver html

La etiqueta strong, se utiliza para indicar un contundente enfasis, muestra el texto en negritas.

ver cdigo ver html

La etiqueta variable, se utiliza para indicar donde se podria sustituir la variable por otra informacin, muestra el texto en italicas.

ver cdigo ver html

Etiquetas de Estilos Fsicos Texto en negrillas ver cdigo ver html Texto en Italicas ver cdigo ver html Texto en Typewriter (Mquina de escribir). ver cdigo ver html Permite decrementar el tamao del texto. Permite incrementar el tamao del texto. Efecto de parpadeo de texto. o El texto es cruzado con una lnea. El texto se despliega abajo de la mitad de la altura del carcter. El texto se despliega arriba de la mitad de la altura del carcter. El texto aparece subrayado. Permite definir el tamao bsico para la fuente que el navegador utilizar para mostrar el texto del documento. Acepta un unico atributo size, cuyo valor puede ser absoluto del 1 al 7 o relativo mediante un signo (+) o (-) antes de su propio valor, siendo que el tamao de fuente base predeterminado es 3, por lo que aplicar un valor +1, estara indicando incrementar el tamao de la fuente a 4. Se puede definir el tamao de la fuente de forma general al documento poniendo este elemento dentro de las etiquetas de encabezado o si lo prefiere usarlo cuantas veces lo desee a lo largo del documento solo tenga cuidado al aplicarlo en partes parciales ya que no cerrar la etiqueta mantiene el tamao de la fuente para el resto del documento o cerrar la etiqueta puede indicar volver al valor predeterminado de la fuente. Permite cambiar el tamao, estilo y color del texto. Atributos Size, modifica el tamao de la fuente acepta valores absolutos o relativos del 1 al 7. uno dos tres cuatro cinco seis siete color, establece el color del texto. rojo verde azul Fiusha limon purpura amarillo face, especifica el tipo de fuente. abadibook antiquaComic Sans MSgaramondImpactModernsystem
Interrumpe la continuidad de una lnea normal, es decir, indica al navegador que detenga de inmediato el flujo de texto y lo ajuste al margen izquierdo de la siguiente lnea o al lado derecho de una imagen o tabla y que lo alinee a la izquierda. A veces es necesario que un texto aparezca en una sola lnea o de cierto ancho, pero el navegador ajusta de manera automtica el texto, para indicar al navegador que respete la linea o el ancho utilice esta etiqueta la cual no permite interrumpir el flujo de texto. Esta etiqueta se utiliza en combinacion con la etiqueta , ya que quiza lo que desee es que cierta parte de texto aparezca en una sola lnea, pero quiza necesite hacer un corte en un lugar especifico, entonces suponga que cuando el navegador despliega el contenido necesita que de preferencia cierto texto quede en una linea quiza en el caso en que el usuario tenga maximizada su ventana, pero si el usuario la minimiza, usted mediante el elemento wbr especifica donde hacer cortes a su texto. Secuencias de Escape Los caracteres tienen dos funciones: Usados como caracteres especiales de escape Usados para desplegar otros caracteres no disponibles en el conjunto de caracteres ASCII Existen 3 caracteres ASCII que tienen un significado especial en el contexto HTML y no pueden ser utilizados como tales en un Documento HTML, estos son: < Parntesis angular izquierdo o smbolo de mayor que > Parntesis angular derecho o smbolo de menor que & Ampersand Los parntesis angulares sirven para representar el inicio y el fin de las etiquetas HTML y el ampersand es usado para indicar el comienzo de una secuencia de escape, es decir si queremos ver un & en un documento HTML lo que debemos hacer es anteceder el smbolo ampersand, seguido del cdigo correspondiente y finalizar con un punto y coma, por ejemplo: < es la secuencia de escape para < > es la secuencia de escape para > & es la secuencia de escape para &El cdigo para las secuencias de escape, se puede tener por nmero o por nombre. ver html Linking El principal poder de HTML viene de su habilidad para ligar texto e imgenes en un mismo Documento o hacia otros Documentos. Cualquier palabra subrayada o imagen con recuadro azul indica una liga o enlace por ejemplo: Yahoo!, quiza la mayoria sabemos que esta liga nos llevara a uno de los principales 'buscadores' de la red. En la actualidad este poder no se ha perdido, pero su apariencia fisica se puede mofificar y por consiguiente podemos tener un link sin subrayar, cosa que a los diseadores les gusta modificar, pero en el sentido extricto es un mal empleo del HTML. Le Etiqueta anchor, define enlaces, ligas o anclas. ver cdigo ver html La Etiqueta anchor name, define un enlace hacia una seccin de un documento. Ligas entre secciones de diferentes documentos ver cdigo ver html Ligas a una seccin especfica en un mismo documento. ver cdigo ver html URL Cada Documento y recurso en Internet tiene una direccin nica, conocida como Localizador Uniforme de Recursos. (Uniform Resource Locator). Sintaxis: esquema: parte_especfica_del_esquema Esquema, describe la clase de objeto al cual hace referencia el URL parte_especfica_del_esquema, describe la parte peculiar de ese esquema especfico. URL para ftp El URL para ftp se utiliza para obtener documentos desde un servidor de FTP (File Transfer Protocol, Protocolo de Transferencia de Archivos), tiene la siguiente sintaxis: ftp://usuario:contrasea@servidor:puerto/ruta;tipo=tipo_de_cdigo El usuario ftp y contrasea FTP es un servicio autentificado, es decir, el usuario debe proporcionar un nombre de usuario vlido y una contrasea a fin de obtener documentos desde el servidor. Tambin existen servidores FTP con acceso restringido, sin autentificacin, conocido como FTP annimo (anonymous FTP), en este modo cualquier persona puede teclear el nombre de usuario "anonymous" para tener acceso a una parte limitada de los documentos del servidor. Si emplea un URL para ftp a fin de acceder a un sitio que requiere un nombre de usuario y contrasea, incluya los componentes usuario y contrasea en el URL, junto con el signo de 2 puntos (:) y el de arroba (@). URL para telnet El URL para telnet inicia una sesin interactiva con el servidor deseado, permitiendo al usuario conectarse y utilizar esa mquina telnet://usuario:contrasea@servidor:puerto Los URL se escriben utilizando los caracteres imprimibles del conjunto de caracteres ASCII. Si necesita emplear en un URL un carcter que no sea parte de este conjunto, debe codificarlo mediante una notacin especial. La notacin codificada remplaza el carcter deseado con 3 caracteres: 1 signo de porcentaje y 2 dgitos hexadecimales cuyo valor corresponde a la posicin del carcter en el conjunto de caracteres ASCII. Por ejemplo para codificar un espacio en un URL, remplcelo con %20 Ver tabla de caracteres reservados HTTP HTTP, Protocolo de Trasferencia de HiperTexto o Hipertext transfer protocol, es el protocolo utilizado por el web. Servidor HTTP El servidor es el nombre en Internet o direccion nmerica de acuerdo con el Protocolo Internet (IP). Nombre: http://www.netscape.comIP: http://137.237.1.87 El puerto HTTP El puerto es el nmero de puerto de comunicaciones al cual el navegador (cliente) se conecta con el servidor. El puerto predeterminado de los URL para servidores web es 80. Los servidores web de seguridad especial HTTP seguro, SHTTP o Secure Socket Layer - SSL (Nivel de conexin segura), corren en el puerto 443. La ruta HTTP La ruta del documento es la ubicacin jerrquica del archivo. La ruta se compone de uno o mas nombres separados por diagonales, todos menos el ltimo representan nombres de directorios que conducen al documento, el ltimo nombre es por lo regular, el del documento mismo. http://www.geocities.com/puerto80/images/image.gif www.geocities.com es la direccin del web hosting en el cual esta ospedada la pagina "puerto80" que a su vez es un directorio el cual tiene un subdirectorio "images" el cual contiene almacenado un archivo con formato GIF. Si el primer componente de la ruta del documento comienza con una tilde (~) significa que el resto del nombre de la ruta comienza desde el directorio personal de HTML en el directorio inicial del usuario en la mquina del servidor. El fragmento de un documento de http # El fragmento es un identificador que apunta a una seccin especfica en un documento. En especificaciones de un URL, el fragmento sigue al servidor y a la ruta y va separado por un signo de nmero (#). Un identificador de fragmento indica al navegador que debe mostrar el documento desde la parte identificada por el fragmento. Los fragmentos son tiles para documentos extensos. Al identificar secciones clave de su documento con un nombre de fragmento, facilita a los lectores que vayan directamente a otra parte del documento. El URL para JavaScript El URL para JavaScript es un seudoprotocolo, el URL para JavaScript puede asociarse ms con una liga y utilizarse para ejecutar comandos de JavaScript cuando el usuario la selecciona Argumentos Lo que sigue al seudoprotocolo JavaScript es una o ms expresiones y mtodos de JavaScript separados por punto y coma, incluyendo referencias a funciones de JavaScript de expresiones multiples que se incluyen en la etiqueta , en los documentos de HTML. javascript:window.alert('Hello world!') - url URL para mailto El atributo mailto sirve para el envio de Correo Electrnico. ver cdigo ver html Es posible enviar correo a varias personas, simplemente debemos separar cada direccin de correo mediante un punto y coma (;) o solo una coma (,) es cuestion de gusto pues ambas formas son validas. Tmbien se puede enviar una copia del correo mediante la opcin "cc", si deseamos enviar un correo a una persona pero no queremos que los demas destinatarios vean su direccin utilizamos la opcin "bcc", la opcin "subject" sirve para ponerle un ttulo a nuestro correo que preferentemente es una descripcin del asunto que trata nuestro correo, por ltimo tenemos la opcin "body" que es la parte donde redactaremos el correo. Se debe tener precaucin de poner el signo "?" despues del destinatario de correo lo cual indica que se envia una variable y separar cada opcion mediante el signo "&" que significa que se agregan mas variables. ver cdigo ver html Imagenes La Mayoria de los Browsers pueden desplegar imagenes en formatos tales como X Bitmap (XBM), GIF o JPEG. GIF El Formato de Intercambio Grfico (GIF, Graphics Interchange Format) se desarroll en un principio para transferir imgenes entre usuarios del servicio en linea Compuserve. Su codificacin es de plataforma cruzada, esto significa que puede crear imagenes en plataformas diferentes sin ningun problema. Utiliza tecnologa de compresin especial que puede reducir de manera significativa el tamao del archivo de la imagen para obtener una transferencia mas rpida a travs de la red. Existen 2 versiones del formato GIF: la original GIF87 y una expandida, GIF89a ambas soportan funciones como: fondos transparentes en realidad, en las imgenes con formato GIF89a permiten hacer transparente una parte, de modo que sea visible lo que est debajo de ella: por lo general, el fondo de la ventana del navegador. La imagen GIF transparente tiene un color en su mapa de colores designado como el color de fondo. El navegador simplemente ignora cualquier pixel en la imagen que utilice ese color de fondo, por lo tanto, permite que se vea la ventana de desplegado. almacenamiento de entrelazado, una imagen parece materializarse durante el desplegado, en lugar de fluir progresivamente desde abajo. Un GIF entrelazado se abre como si fuera una persiana vertical, ya que entrelaza secuencias cada 4 columnas de la imagen animacin, con formato GIF98a se puede hacer un solo archivo que contenga una serie de imagenes. codificacin, mapea valores de pixel de 8 bits a una tabla de color, hasta un mximo de 256 colores por imagen. Debido a la limitada cantidad de colores, una imagen codificada como GIF no siempre es apropiada, en particular para imgenes realistas, utilice el formato GIF para crear: iconos imgenes de colores reducidos y dibujos JPEG El Grupo de Expertos de Cooperacin Fotogrfica (JPEG, Joint Photographic Experts Group), es una organizacin de estandares que desarroll lo que ahora se conoce como el formato para codificacin de imagenes JPEG. Estas imagenes son independientes de la plataforma las puede crear en windows o machintosh y verlas en ambas, estan especialmente comprimidas para lograr una alta velocidad de transferencia por medio de tecnologas de comunicacin digital. La gran diferencia con el formato GIF es que soporta millones de colores para imgenes ms detalladas y con calidad fotorrealista. Este formato uiliza algoritmos especiales que logran relaciones de compresin de datos ms altas. La etiqueta img, inserta una imagen en el flujo de texto actual. ver cdigo ver html Atributos lowscr, es una versin abreviada de baja resolucin, de la imagen referenciado por src, por lo que se carga ms rpido para dar al usuario una idea de su contenido, hasta que la imagen final de mayor resolucin gradualmente la remplaza en la pantalla. alt, especifica un texto alternativo hasta 1024 caracteres. La inclusion de imagenes en documentos HTML hacen sumamente atractivos nuestros trabajos Las imagenes tienen 2 atributos necesarios mediante los cuales podemos asignar el tamao en pixeles que tendran las imagenes, estos son alto (height) y ancho (width). Alineacin de Imagenes (align) Otro atributo indispensable es la alineacion, con lo cual podemos tener imagenes separadas del texto y este con alineacin superior, media o inferior. ver html hspace y vspace Estos atributos dan un espacio especifico a nuestras imagenes con texto, espacio horizontal con hspace y espacio vertical con vspace, de esta manera damos un mayor espacio que el tpico espacio de 2 pixeles entre una imagen y el texto. ver cdigo ver html Eliminar el borde de una imagen Se puede eliminar el borde alrededor de una imagen con funcin de liga estableciendo el atributo border de la etiqueta con un valor igual a cero. ver cdigo ver html La etiqueta map, crea sobre una imagen areas de seleccion, con lo cual podemos definir areas especificas que respondan a una accion determinada como puede ser un enlace a otra pagina. Se debe tomar en cuenta que las coordenadas se definen de la siguiente manera: Angulo superior izquierdo : Columna, Renglon Angulo inferior derecho : Columna, Renglon Asi como la figura por default es un rectangulo: Default : Rectangular ver cdigo ver html Imagen de fondo (background) Existe una propiedad llamada background, la cual permite especificar el fondo de nuestro documento este puede ser una textura o bien una imagen. Asi existe la libertad de crear esta textura o imagen de un tamao muy pequeo, y el browser se encargara de repetirlo a traves del documento. La propiedad background pertenece a la etiqueta . ver html Color de fondo (bgcolor) Asi como podemos establecer una imagen de fondo, asi tambien podemos establecer el color de fondo con la propiedad bgcolor. ver html Video Las extensiones especiales de atributos controls, dynsrc, loop y start de la etiqueta son nicos de Internet Explorer y son extensiones al estndar de HTML 3.2 que permiten incluir video e imgenes. El equivalente de esta funcin en Navigator est disponible por medio de un programa complementario conocido como plug in, los cuales proporcionan funciones adicionales al usuario. Las actuales extensiones de video de Internet Explorer son muy limitadas no las soporta ningn otro navegador y solo se pueden utilizar con archivos de video con formato de tipo AVI (Audio Video Interleave). Atributos de la etiqueta dynsrc, utilice este atributo para hacer referencia a un archivo AVI que deba mostrar Internet Explorer, por ejemplo:Un truco seria poner lo siguiente:Da como resultado:As, si su navegador no es Internet Explore en vez de video tendra una imagen estatica. controls, Internet Explorer reproduce una vez un video en un puerto para video enmarcado, sin ningn control visible para el usuario. Utilice este atributo para que el usuario pueda tener el control del video para adelantar, regresar, detener y poner en pausa el video. Si el archivo AVI contiene sonido, tambien se porporciona un control para el volumen, por ejemplo:Da como resultado: loop, Internet Explorer por lo general ejecuta video slo una vez, de principio a fin, despus de descargarlo. El atributo loop permite repetirlo un nmero de veces especifico o repetirlo de forma constante cuando el valor es igaul a infiniteSi deseamos repetirlo 10 veceso si deseamos que se repita constantemente: start, Por lo general un archivo de video Internet Explorer se ejecuta al momento de su descarga. Se puede modificar este comportamiento con el atributo start, quiza con ayuda del evento mouseover, puede retrasar la reproduccin hasta que el usuario pase el puntero del mouse sobre el puerto del video, otro valor para el atributo start es fileopen, lo cual permite ejecutar la reproduccin del video enseguida de la descarga.Sonido La mayora de los navegadores manejan el audio como documentos independientes, descargados y desplegados por aplicaciones independientes los plug ins. Por su parte Internet Explorer contiene un decodificador de sonido integrado y soporta una etiqueta HTML especial que le permite integrar un archivo de audio. Utilice la etiqueta para reproducir audio de fondo en Internet Explorer, actualmente maneja 3 formatos de sonido AU, MIDI y WAV. Si tiene un plug in de sonido puede escuchar los siguientes: sonido 2 sonido 3 sonido 4 sonido 5 ver html Utilice esta etiqueta para crear espacios en blanco horizontales, verticales y rectangulares en los documentos HTML. (Solo Netscape). ver html Esta etiqueta permite crear mltiples columnas de texto, controlar el tamao y nmero de columnas. (Solo Netscape) ver html Capas Las capas le permiten definir una unidad de autocontenido de HTML que puede colocar en cualquier parte de la ventana del navegador, sobre o debajo de otras capas y que puede aparecer y desaparecer a su deseo. (Solo Netscape) Las capas se declaran con la etiqueta , las capas son como un pequeo documento de HTML cuyo contenido est definido entre el elemento layer. Las capas pueden estar anidadas. Atributos name, se puede identificar la capa asignandole un nombre. Error!una manera de tener acceso al control de capas podria ser con JavaScript y tener una instruccin como: document.layers.msg.visibility = "show"Con lo cual se indica mostrar la capa "msg". ver html left y top, Sin atributos una capa se coloca en la ventana como si fuera parte del flujo normal de texto. Utilice los atributos top y left para especificar su posicin exacta en el desplegado del documento. Error! left="100" top="100"ver html above, below, z-index, las capas existen en 3 dimensiones, ocupando espacio en la pgina y apilndose una sobre otra y sobre el contenido convencional del texto. Se puede controlar el orden en que se apilan las capas con los atributos above, below y z-index. Estos atributos se excluyen entre s, esto es, use slo uno por capa. Above z-index Netscape dexpliega capas que usen z-index de acuerdo con su orden y capas que no usen z-index de acuerdo con su orden de aparicin en el documento. La precedencia con base en el orden de aparicin tambin se aplica a capas que tienen el mismo valor de z-index. con z-index y sin z-index background y bgcolor, se puede definir el color de fondo as como una imagen para una capa. ver html visibitlity, se pueden ocultar o mostrar capas, los valores para este atributo son show (mostrar) para desplegar la capa, hide (ocultar) para ocultar la capa al usuario e inherit (heredar) declara de forma explcita que desea que la capa herede el desplegado de su antecesora. width, define el ancho de la capa en pixeles. src, el contenido de una capa no est restringido a lo que se introduce entre las etiquetas y tambin puede hacer referencia y cargar el contenido de otro documento en la capa de forma automtica con el atributo src, cuyo valor es el URL del documento contenido en la capa. ver html clip, el atributo de corte, puede enmascarar partes de una capa, revelando slo una porcin rectangular. El valor del atributo clip son 2 o 4 enteros, separados por comas, que definen reas de pixeles en la capa correspondiente a los extremos izquierdo, superior, derecho e inferior del rea cortada. Si slo se proporcionan 2 valores, estos corresponden a los extremos derecho e inferior del rea visible y Netscape supone que los valores de los extremos superior e izquierdo son cero, por ejemplo clip="75,100", es igual a clip="0,0,75,100". El atributo clip es til para ocultar partes de una capa o para crear efectos de desvanecido y borrado con funciones de JavaScript que cambian la ventana de corte en ciertos lapsos. ver html Para controlar la posicin de una capa se utilizan los atributos top y left con coordenadas relativas al espacio del documento, Netscape tiene una etiqueta independiente la cual permite colocar capas individuales con respecto al flujo actual del contenido, de forma muy similar a lo que es una imagen en lnea. Una etiqueta crea una capa que ocupa espacio en el flujo de texto. El contenido subsecuente se coloca depus del espacio ocupado por , adiferencia de la etiqueta , que crea una capa sobre el flujo del contenido, permitiendo as que el contenido subsecuente se coloque debajo de la capa recien creada. Atributos left y top, Netscape interpreta el contenido de justo en el flujo de texto que contiene, desplazado por los valores de los atributos left y top a apartir de la esquina superior izquierda de esa posicin, no la esquina superior izquierda de desplegado, como sucede con . ver html La etiqueta table, se utiliza para la presentacin de informacin de forma tabular. No era muy usual utilizar tablas, en las primeras pginas de la historia del web las pocas que habia eran utilizadas correctamente, hoy en dia no hay diseador que haga una pgina sin tablas y que cronstruya tablas sobre tablas, sobre tablas.Elaboracin correcta de una tabla: 1. Asignar un nombre a la tabla, que contendra la tabla?, quiza desee ver ordenadas las direcciones de las personas que usted conoce, "AGENDA" podria ser un buen nombre, o desea ordenar su coleccin de discos, "FONOTECA PERSONAL", o si tienes que llevar el registro de los productos, "INVENTARIO", "LISTA DE PRECIOS", lo importante aqui es que hagas uso de la etiqueta caption que significa Ttulo, la cual sirve precisamente para asignarle un nombre a tu tabla, se debe procurar que sea el mas adecuado. 2. Debe pensar un momento, cuantas columnas y renglones tendra la tabla?..., una vez que se conoce el nmero de columnas o renglones, pues al menos se debe conocer alguno de estos para poder asignar el encabezado de las columnas o renglones, esto a traves de la etiqueta th, que significa table header, es decir, encabezado de la tabla. 3. Como se desea la disposicin del encabezado en forma de columnas o renglones?..., es importante pues la forma de construirlo es diferente. 4. Una vez que tenemos Nombre de la tabla, numero de renglones y/o columnas, nombre de los encabezados, nos disponemos a armar la tabla comenzando por contruir renglones con la etiqueta tr, que significa table row, es decir, renglon de la tabla. 5. Una vez construido el renglon procedemos a asignar los encabezados (th) y a contruir las columnas, con la etiqueta td, que significa, table definition, es decir, la definicin de la tabla, siendo esta etiqueta la mas importante ya que aqu pondremos nuestra informacin. Asi como la tabla tiene elementos, a su vez estos tienen atributos que se deben tomar en cuenta para el diseo de la misma. Elementos de una tabla: 1. Table, Definicin 2. Caption, Titulo o descripcin 3. th, Encabezado 4. tr, Renglon 5. td, Columna o Celda A continuacin se muestran los Atributos de los elementos mas utilizados: table align, alineacin de la tabla (izquierda, centro, derecha) background, permite usar un grafico de fondo bgcolor, color que tendra la tabla border, permite especificar si tendra o no borde, asi como su grosor cellpadding, define el espacio entre el borde y contenido de una celda cellspacing, define el espacio entre celdas cols, ayuda al navegador a conocer el numero de columnas height, define el alto de la tabla width, define el ancho de la tabla caption Align, alinea el titulo o descripcion (izquierda, centro y derecha)) tr align, alineacin (izquierda, centro y derecha) bgcolor, color de fondo del renglon nowrap, contenido en una sola lnea valign, alineacion vertical, (superior, media, inferior) th y td align, alineacin del encabezado (izquierda, centro, derecha) background, establece una imagen como fondo bgcolor, color de fondo del encabezado colspan, permite unir celdas o columnas rowspan, permite unir renglones nowrap, define el contenido en un unico renglon valign, alineacion vertical, (superior, media, inferior) ver html Comentarios Los comentarios o comments, sirven para comentar una seccin que debe ser ignorada por el navegador o permiten dar una explicacion para posibles consultas posteriores o lo mas util es para incustrar cdigo a fin de que si el navegador no tiene la capacidad de interpretarlo lo ignore. Sintaxis: Frames Los Frames o Marcos, permiten la posibilidad de abrir mas de un documento a la vez en una misma ventana, es importante sealar que los frames no son parte del estandar de las primeras versiones HTML, pero soportado por Internet Explorer y Netscape. Como construir un frame: Si deseamos presentar varios documentos HTML en uno solo o mejor dicho en una sola ventana, lo primero que se hara sera construir todos los documentos HTML que deseamos presentar. Procedemos a declarar los documentos HTML construidos anteriormente y que deseamos presentar, esto mediante un documento HTML en el cual se sustituye la etiqueta con una o mas etiquetas , con lo cual indicara al navegador como dividir la ventana principal en frames ya sean estos por columnas o por renglones, para lo cual dentro de la etiqueta se especifica el atributo "cols" o "rows" respectivamente y el valor de este atributo sera el tamao que ocupara cada frame en pixeles separando el tamao especifico de cada frame por una "coma". Por ejemplo si se presentaran 3 frames por columnas y asignamos 10 pixeles a cada frame la etiqueta lucira de la siguiente manera: Si presentamos 4 frames: Si presentamos 5 frames: Lo que deseamos destacar es que aprecie que el numero de frames corresponde por igual al numero de tamaos de cada frame. Observe la siguiente instruccin: Aqu lo que se esta estableciendo es presentar 3 frames, en el cual los 2 primeros frames tendran un tamao de 10 pixeles y el asterisco indica que el tamao del tercer frame sera igual al valor en pixeles que ocupa el resto de la pantalla. Una vez que definimos si el frameset es por renglones o por columnas y el tamao de cada frame, declaramos dentro de la etiqueta , la etiqueta la cual define el documento HTML que deseamos presentar, tendremos una etiqueta , por cada uno de los documentos HTML a presentar, esta etiqueta tiene 2 principales atributos scr, que es la abreviacin de source que significa fuente, es decir, el valor de scr sera la ruta y nombre del documento HTML a presentar y name, es decir nombre. Para poder manejar los diferentes documentos a presentar es necesario darles un nombre, alias, apodo, nuevo nombre o nick como se desee entender, para invocar a los documentos y presentarlos. Observe el siguiente ejemplo: La primer instruccin que estamos dando al navegador es que el primer frame a presentar sera la pagina localizada en "http://www.netscape.com", la cual es la pagina del Navegador Netscape y el name o nombre que le daremos a ese frame sera "Netscape". La segunda instruccin es presentar la pagina localizada en "http://www.microsoft.com", la cual es la pagina de la Empresa de Software Microsoft y el nombre asignado a ese frame sera el de "F_Microsoft", el nombre que se le asigna a cada frame es a su propia conveniencia, es decir, un nombre que pueda recordar que es el sobrenombre de un archivo HTML. Frames por columnas - Frames por Renglones Una vez que tenemos la base para la creacin de frames, lo que sigue es explotar todos sus atributos y combinaciones permitibles posibles. Podemos tener un frameset con columnas y renglones, aqui lo unico que estamos haciendo es definir una tabla de x numero de columnas por x numero de renglones y aqui no va ligado con el numero de archivos con el numero de tamaos de cada frame, pues los ira presentando de manera que vaya llenando la tabla es decir, se definio 3 columnas por "n" numero de renglones lo que hara es tomar de 3 en 3 los archivos y cada 3 los pone en el renglon siguiente Tambien el tamao de los frames se puede dar en porcentaje: Se debe tener precaucin en que la suma de los porcentajes sea igual a 100%, aunque los navegadores validan de forma automatica este valor y si es diferente ajustan la diferencia, pero la advertencia es en pro del diseo y tecnica de programacin. Anidacin de FramesetsEl siguiente ejemplo muestra las combinaciones permisibles que se pueden dar al usar frames, en particular la anidacin de framesets. Nested Frameset Atributos de los Frames Noresize, los frames actuan de manera similar a las ventanas, por ejemplo se puede ajustar su tamao, para evitar que el usuario altere las dimensiones relativas del Frame se utiliza esta etiqueta. Scrolling, al igual que una ventana un frame presenta la "barra de desplezamiento o scroll bar" de forma vertical y horizontal, cuando el espacio es insuficiente y se oculta cuando el espacio es suficiente, este atributo se puede controlar independientemente de que si el espacio es suficiente o no, simplemente si NO queremos agregar el scroll bar damos la siguiente instruccin: si queremos agregar el scroll bar, que es el valor por defecto o default: MarginHeight y MarginWidth, Observe con cuidado y se dara cuenta que existe un pequeo espacio entre el borde del frame y el contenido (recuerda el atributo cellpadding de las tablas?), podemos modificar los margenes del frame con estos atributos, el valor nuevamente se da en pixeles, para el margen a lo alto y bajo se utiliza MarginHeight y para el margen de los lados se utiliza MarginWidth. MarginHeight - MarginWidth Frameborder y bordercolor, para agregar o eliminar los bordes del frame utilice el atributo FrameBorder con los valores yes o 1 y no o 0 respectivamente esto sera un poco frustrante ya que Internet Explorer y Netscape tienen diferentes formas de actuar, pruebe con varios frames y vera lo que pasa si combina los valores del frameborder entre yes y no y poniendo todos al mismo valor yes o no. Si desea cambiar el color del borde del Frame utilice el atributo bordercolor Ineternet explorer pone el mismo color a todos los frames, en cambio Netscape respeta el color especificado en cada frame FrameBorder - BorderColor noframes, Un documento con frames no contiene la etiqueta , si usted pone cualquier etiqueta de frames dentro de una etiqueta el navegador las ignora antes de encontrar la primer etiqueta , por tanto un documento con frames es totalmente invisible para cualquier navegador que no soporte frames. Se utiliza la etiqueta solamente dentro de la etiqueta mas externa de un documento con frames. El contenido dentro de una etiqueta en un navegador que soporte frames no se despliega en el navegador, pues hace las veces de un comentario, en cambio si el navegador no soporta frames muestran el contenido que existe dentro de la etiqueta. Atributo TARGET de la etiqueta Con el elemento frame podemos dar nombres a los frames mediante el elemento name, una vez que se le asigna el nombre al frame podra ser utilizado como un documento destino, es decir manipulado por si mismo o por otros frames, para ello se puede utilizar el atributo target del elemento anchor o etiqueta . suponga que tiene 2 frames dispuestos por columnas llamados izquierdo y derecho. Si deseamos abrir un documento dentro del frame derecho dando un click sobre una liga contenida en el frame izquierdo, usamos la siguiente sintaxis en el frame izquierdo: Internet Aqui apreciamos que el frame derecho tiene asignado el nombre right en el cual se abrira el documento historia.html. Si deseamos hacer la accin contraria es decir abrir un documento dentro del frame izquierdo dando un click sobre una liga contenida en el frame derecho, usamos la siguiente sintaxis en el frame derecho: Internet Aqui apreciamos que el frame izquierdo tiene asignado el nombre left en el cual se abrira el documento historia.html. El atributo target tiene 4 valores posibles donde poder abrir el documento, es decir el destino del documento: 1. _blank, abrie el documento especificado en un nueva ventana 2. _self, valor por defecto o por default de la etiqueta que no especifica un destino o el lugar donde queremos que se abra el documento, por lo cual se abrira o cargara en si mismo. 3. _parent, abrira o cargara el documento en la venatana padre o conjunto de frames padre. 4. _top, se abre el documento en la ventana que contiene la liga de hipertexto _blank, _self, _parent, _top Frames Integrados Sabemos que no es posible incluir un frame en un documento comun de HTML, ya que para incluir frames se sustituye el elemento body por el elemento frameset, pero Internet Explorer aadio esta posibilidad, llamandola Frames integrados permitiendo incluir un frame en un documento comun HTML, si observe esta pagina con Internet explorer o algun navegador que soporte frames integrados observara a continuacin la potencialidad de los mismos, en cambio si usted utiliza un navegador que no soporta frames integrados aparecera un mensaje. Mensaje: Su navegador no soporta frames integrados! Algunas caracteristicas propias de cada navegador son utiles o atractivas, pero recuerde algo muy importante y no lo olvide "existe un estandar", en lo particular dentro de mi propia tecnica de programacion siempre trato de apegarme al estandar o programar de mas de manera que la visualizacin de los documentos sea lo mas similar posible en los diferentes o principales navegadores. Formularios A mi parecer la correcta traduccin de la palabra form aplicada a los documentos HTML, es la de Formulario, segun el diccionario Larousse: Formulario : Impreso administrativo en el que se formulan las preguntas a las que los interesados han de responder. A travs de los documentos HTML existe la posibilidad de recolectar informacin para su almacenamiento posterior, esto es posible con la etiqueta , en la cual se puede trabajar con campos o casillas que llena el usuario, cada campo contiene datos que en su conjunto forman informacin que requerimos del usuario. Quiza necesitemos que la disposicin de la informacin sea en grupos de datos o simplemente nos conviene tener ciertos datos agrupados, esto es posible en HTML, no hay limitante en el numero de formularios que deseemos utilizar a lo largo de nuestro documento. La etiqueta se declara dentro del cuerpo del documento HTML, no existe la posibilidad de anidar formularios. Atributos de los Formularios Action, quiza los datos que obtenemos del usuario solo sean parametros a utilizar desde su propio navegador, es decir el procesamiento de dichos datos ocurre localmente en la maquina del usuario, entonces quiza no utilice este atributo, pero si los datos se necesiten enviar a la maquina a la cual el usuario esta conectado y desde ahi procesarlos para darle una respuesta, es ahi donde interviene el atributo action, que como su nombre lo indica es una accin la cual puede ser la de ejecutar un programa del lado del servidor el cual tiene una ubicacin unica o URL por lo tanto se debe de especificar, ejemplo: Aqui lo que se indica es la ejecucin de un programa llamado Registro que se encuentra en el web en la direccin www.nuestroServidor.com guardado bajo un directorio llamado cgi-bin. CGI significa Common Gateway Interface o Interfase Comun de Puerta de Enlace y bin es la abreviacin de Binario en ingles ya que todos los programas ejecutables son binarios, asi tenemos como parte de un estandar almacenar todos los programas ejecutables o binarios en un directorio llamado cgi-bin. enctype (encryption type), los navegadores codifican de manera especial los datos del formulario antes de enviarlos al servidor, de modo que no se amontonen o corrompan durante la transmisin y a su vez el servidor decodifica los mismos. Existe una codificacin estndar llamada "application/x-www-form-urlencoded" y que es la que se utiliza por default, otros formatos de codificiacin soportados son "multipart/form-data" y "text/plain". application/x-www-form-urlencoded, convierte cualquier espacio que existe en los valores del formulario en un signo de suma (+), los caracteres no alfanumricos o caracteres especiales en un signo de porcentaje (%) seguido por 2 dgitos hexadecimales que es el valor que tiene en el cdigo ASCII el carcter y los saltos de lnea en los datos del formulario con varias lneas en %0D%0A. multipart/form-data, se utiliza para los formularios que contienen campos para seleccionar archivos que el usuario desea obtener. Esta codificacin encapsula los elementos o campos del formulario como diversas partes de un documento compuesto compatible con MIME. Cada campo tiene su propia seccin en el archivo resultante, acotado por un delimitador estndar. Dentro de cada seccin una o ms lneas de encabezado definen el nombre del campo, seguido por un o ms lneas que contienen el valor del campo. Puesto que la parte de valor de cada seccin puede contener datos binarios o caracteres no imprimibles, no ocurre ninguna conversin de caracteres o codificacin dentro de los datos transmitidos, ejemplo: ------------------------------146931364513459Content-Disposition: form-data; name="nombre"Gerardo ngeles Nava------------------------------146931364513459Content-Disposition: form-data; name="correo_Electronico"gangeles@netscape.net------------------------------146931364513459text/plain, debe utilizarse junto con un URL de tipo mailto para enviar las formas a una direccin de correo electrnico, no a un servidor. Utilice esta codificacin slo cuando no tenga acceso a un servidor para procesar formas y deba enviar la informacin por correo electrnico method, existen 2 metodos para el envio de informacin GET y POST. POST, el navegador enva los datos en 2 pasosprimero: hace contacto con el servidor que procesara el formulariosegundo: enva los datos al servidor en una transmisin separada. GET, hace contacto con el servidor que procesara el formulario y enva los datos en una sola transmisin, GET es el metodo por default. Utilice GET para obtener un mejor rendimiento en la transmisin, cuando no procese formas del lado del servidor.Utilice POST para enviar formas que contengan muchos campos o cuando el contenido de los campos es extenso pero principalmente utilice POST por seguridad ya que GET coloca los datos de la forma directamente en el URL del navegador y pueden ser obtenidos con facilidad por algun cracker del web o extrados desde una bitcora del servidor. Envo de parmetros en forma explcitaSe pueden enviar datos de manera explcita sin necesidad de una forma, suponga que desea enviar el nombre de una persona y su direccin de correo electrnico, lo que tendria que hacer es crear un documento HTML que tenga un enlace a otro documento o programa, por ejemplo, tenemos 2 variables que llamaremos nombre y E-Mail cuyos valores son gerardo y gangeles@netscape.net respectivamente, entonces el enlace luciria asi: Enviar datos Observe que se utiliza el signo ? como separador, el cual indica que comienza una cadena de caracteres los cuales son parametros a enviar, tambien para agregar cada dato, elemento o campo (como mejor los identifique) se utiliza el signo & que en la sintaxis de muchos lenguajes de programacin significa adicin, pero como es un caracter especial se tiene que codificar como & o &amp, todos los caracteres especiales que viajan en el URL deben codificarse. El siguiente ejemplo muestra el paso de datos a trves del URL de un documento a otro y la obtencin de los mismos mediante un SCRIPT, el cual esta realizado con JavaScript, utilizando las potencialidad de este Lenguaje de Programacin particularmente la propiedad Location de la ventana, que es donde viaja la informacin en el navegador; location es donde acostumbramos digitar las direcciones web a donde queremos ir. Ver Ejemplo Algunos Atributos importantes de la etiqueta name, asigna un nombre al formulario, el cual facilita la manipulacin de los elementos del mismo. onSubmit y OnReset, el atributo OnSubmit es un manejador de eventos con el cual se puede indicar la ejecucin de instrucciones cuando se envie el formulario. onReset, se utiliza para ejectutar instrucciones cuando el usuario limpia los elementos del formulario. target, es posible redireccionar el resultado de un formulario hacia otro frame, solo debe especificar el nombre del frame que recibir el resultado. Como se definen los elementos de un formulario?, con esta etiqueta se pueden definir los elementos del formulario, los elementos del formulario pueden ser las casillas o campos que el usuario llena con datos, los botones que aparecen en el formulario. Algunos Atributos de la etiqueta Principio del formulario name, asigna un nombre al elemento del formulario value, asigna un valor al elemento del formulario, esta asignacin puede estar predefinida con un valor posible de alterar o no por el usuario o sin definir con lo cual el usuario es quien asigna el valor. type, especifica que tipo de elemento deseamos por ejemplo: 1. hidden, su nombre en ingles significa "ocultar", quiza necesitemos establecer datos cuya existencia no debe importarle al usuario por lo cual no se lo mostramos, puede o no tener un valor preasignado. HTMLCONTROL Forms.HTML:Hidden.1 2. text, elemento tipo campo que acepta texto, es buena tecnica de programacin especificar el tamao del campo (size) y nmero de caracteres maximo que podra permitir dicho campo (maxlength). Cul es tu nombre ? (mximo 30 caracteres) 3. checkbox, especifica un campo de verificacin, el usuario puede seleccionar o deseleccionar varios datos agrupados. Nota: Tenga cuidado en asignar el mismo name a los elementos que formaran parte de un grupo, pues puede tener varios grupos de datos y de no tener el mismo nombre los identificara como parte de otro grupo y su forma no tendra el resultado deseado. Cuide de no confundirse entre name y value Que deporte practicas? VolleyBall FootBall Soccer BasketBall Ninguno 4. radio, especifica un campo de verificacin, el usuario solo puede seleccionar 1 dato entre un grupo. Nota: Tenga cuidado en asignar el mismo name a los elementos que formaran parte de un grupo, pues puede tener varios grupos de datos y de no tener el mismo nombre los identificara como parte de otro grupo y su forma no tendra el resultado deseado. Cuide de no confundirse entre name y value Cual es tu sexo? masculinofemenino 5. button, elemento que simula un grafico tipo boton el cual al ser pulsado realiza una accin. 6. password, esta podria ser otra forma de ocultar datos pero funciona de manera distinta, es un campo donde el usuario escribe texto mediante el teclado pero en vez de aparecer el caracter tecleado en su lugar aparece el caracter *. Muy util al porporcionar claves o datos confidenciales. Teclea una clave (mximo 8 caracteres) : 7. file, sirve para especificar un archivo almacenado en su computadora y enviarlo. Cuando usted utilice este atributo parecera una casilla de lado izquierdo y un grafico tipo boton del lado derecho titulado "browse", que en ingles significa vistazo, ojeada, al pulsarlo muestra una ventana donde puede especificar el directorio en el cual se encuentra el archivo, asi como todos los archivos que contiene el directorio para que usted seleccione el que desee enviar, al seleccionar y pulsar el boton open, pasa la ubicacin del archivo al campo de lado izquierdo. 8. image, crea un boton personalizado que es una imagen sensible al click, cuando el usuario hace click en l, hace que el navegador enve el formulario al servidor, incluye tambien las coordenadas (x,y), del puntero del raton en la lista de parametros de manera parecida a los mapas de imgenes. Haz click sobre la imagen9. reset, crea un boton de restauracin, es decir, le permite al usuario borrar los datos ingresados al formulario o volverlos a su estado original, si es que tenian valores predeterminados. Puedes comprobar lo que hace este boton, por ejemplo en la parte donde se pide el nombre existe un valor preestablecido, que es el de "pon aqu tu nombre", si cambiaste este valor por tu nombre cuando des click a este boton volvera a decir pon aqu tu nombre y si llenaste los otros campos los dejara en blanco, tal y como estaban en un inicio. Si no se rotula el boton, es decir no se asigno en value algun nombre, por default el boton dira "Reset" 10. submit, crea un boton de envo de informacin, es decir, manda el formulario al servidor desde el browser. Se puede tener mas de un boton de este tipo en un formulario, pues cada uno tendra una accin a realizar distinta a los demas o puede que por facilitar las cosas al usuario cuando la forma es muy extensa, se pone un boton al inicio y al final que realizan la misma accin. Si no se rotula el boton, es decir no se asigno en value algun nombre, por default el boton dira "Submit Query". Final del formulario La etiqueta , crea un rea de texto de mltiples lneas en la ventana del navegador, a diferencia de un campo de texto de tipo input en el cual limitan la entrada del usuario a una sola lnea. Durante el envo de la forma, el navegador rene todas las lneas del textarea, separndolas con "%OD%OA", retorno de carro y salto de lnea respectivamente. Principio del formularioFinal del formularioAlgunos Atributos de Rows y cols, quiza son los atributos indispensables de una etiqueta textarea, ya que con rows especificamos el tamao en nmero de renglones que deseamos que tenga el campo y con cols, el tamao en columnas que tendra, es como dar el alto y ancho deseado. Recuerde algo importante con esto solo epecificamos el area fisica o el tamao que nosotros queremos, mas no la parte lgica, es decir el control que podemos tener sobre el texto introducido consulte el siguiente atributo para entender mejor esto. wrap, permite ajustar o no el texto introducido por el usuario al tamao del campo, los valores posibles de este atributo son off - apagado, soft y hard cuando se especifique el valor igual a off, todo lo que el usuario teclee en este campo lo hara en una sola lnea a menos que el usuario utilice la tecla enter - retorno de carro para pasar a la siguiente lnea, si se especifica el valor igual a hard o soft, lo que sucedera es que cuando el texto introducido por el usuario llegue al tope del campo automaticamente pasara a la siguiente lnea sin necesidad de presionar la tecla enter. Asegurese de siempre incluir el atributo wrap y asignarle un valor de soft o hard como tecnica de programacin. Tambien existen otros 2 valore posibles virtual, que pasa el contenido al servidor en una sola lnea y physical el cual pasa el contenido al servidor como si el usuario en realidad hubiera introducido el texto con enters La etiqueta , permite hacer una lista de opciones posibles para que el usuario seleccione una o mas. Utilice la etiqueta para definir cada componente dentro de un elemento select del formulario Algunos atributos de la etiqueta multiple, permite al usuario elegir ms de una opcin a la vez, asume el comportamiento de un elemento . La manera de seleccionar varias opciones es presionando la tecla Control y elegir la opcion. Principio del formularioFinal del formulario size, determina cuntas opciones podr ver el usuario a la vez, el valor por default es 1. Principio del formularioFinal del formularioAlgunos atributos de la etiqueta value, asigna un valor a cada opcin. Rojo Blanco Azul Verde Amarillo selected, por default, todas las opciones de una etiqueta NO estan seleccionadas. Si desea que tengan valores predeterminados utilice selected o "seleccionada", para preseleccionarlos, que el usuario despues podra deseleccionar si asi lo desea. Si el usuario no selecciona alguna opcion se tomara por default como seleccionada la primer opcin. Principio del formularioFinal del formularioEnvio de un formulario a trves de correo electrnicoFormulario enviado por E-Mail _1169206921.unknown_1169206925.unknown_1169206927.unknown_1169206928.unknown_1169206926.unknown_1169206923.unknown_1169206924.unknown_1169206922.unknown_1169206917.unknown_1169206919.unknown_1169206920.unknown_1169206918.unknown_1169206913.unknown_1169206915.unknown_1169206916.unknown_1169206914.unknown_1169206911.unknown_1169206912.unknown_1169206909.unknown_1169206910.unknown_1169206907.unknown