Upload
oswalvt
View
220
Download
0
Embed Size (px)
DESCRIPTION
aprende html muy facil
Citation preview
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
[email protected] 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 &, 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