Está en la página 1de 33

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).
<p align="center"></p>

Qu es una etiqueta o tag?


Las etiquetas HTML o tags HTML consisten de un parentesis angular izquierdo o smbolo menor que "<" y el
parentesis angular derecho o smbolo de mayor 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></html>, <head></head>, <body></body>).
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 <html> o </HTML> 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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Final//EN">
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
<html></html>

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


<head></head>

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 <head> puede delimitar algunas otras etiquetas que ayuden a definir y administrar el contenido del
documento como: <base>, <link>, <meta>, <title>, <style>
<title></title>

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.
<body></body>

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

<meta>

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 <meta>, se declara dentro de la etiqueta <head>, 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 <meta> 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

ver cdigo Author

Content
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.
<base>

Los URL dentro de un documento pueden ser absolutos que son quellos donde se pone explicitamente la ubicacin
del archivo, por ejemplo:
<form action="http://www.geocities.com/puerto80/cgi-bin/alta">
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 <head>. Utilizando el ejemplo anterior podemos ahorrarnos el especificar cada vez la ruta de un
archivo al ponerlo solo una vez en la etiqueta base:
<base href="http://www.geocities.com/puerto80/cgi-bin/">
De esta manera solo pondremos el nombre del archivo:
<form action="alta">
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.
<link>

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.

<Style>

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

<h1></h1>...<h6></h6>
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.

<h1><\h1>
<h2><\h2>
<h3><\h3>
<h4><\h4>
<h5><\h5>
<h6><\h6>

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 <div>, prrafo <p> y corte de lnea <hr>. Los caracteres de
retorno por lo general son ignorados por el navegador.
<div>

La etiqueta <div> 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.

<p></p>

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

<pre></pre>

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

<ul><li></li></ul>

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 <li>, el estndar marca que no es necesario poner la etiqueta de fin de list item </li>, se sugiere
como buen estilo de programacin cerrar las etiquetas cuando estas tengan etiquetas de fin.
Atributos
o
o

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


Compact, reduce el interlineado entre elementos de la lista
ver cdigo

ver html

<ol><li></li></ol>

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 <li>, el estndar marca que no es necesario poner la etiqueta de fin de
list item </li>, se sugiere como buen estilo de programacin cerrar las etiquetas cuando estas tengan etiquetas de fin.
Atributos
I.
II.
III.

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


Compact, reduce el interlineado entre elementos de la lista
Type, cambia el tipo de numeracin:

IV.

i.

A, letras mayusculas

ii.

a, letras minusculas

iii.

I, numeros romanos en mayusculas

iv.

i, numeros romanos en minusculas

Value, se utiliza en la etiqueta <li>, permite cambiar la secuencia de la numeracin


ver cdigo

ver html

<dir> y <menu>

La etiqueta dir, se utiliza para mostrar listas de archivos, la etiqueta menu, muestra una lista de opcinoes breves al
alector
ver html
<dl><dt> <dd></dd> </dt></dl>

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 <li>, la etiqueta
definition list, contiene las etiquetas <dt> definition term y <dd> definition definition, por lo tanto la etiqueta <dl>
indica la inclusin de una lista de definicin, la etiqueta <dt> indica el termino a definir y por ultimo la etiqueta <dd>
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

<blockquote></blockquote>

La etiqueta blockquote, se utiliza para hacer referencias.


ver cdigo

ver html

<address></address>

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

<hr>

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


<dfn>

La etiqueta defined, se utiliza para especificar la definicin de un termino, muestra el texto en italicas.
ver cdigo

ver html

<em>

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

ver html

<cite>

La etiqueta cite, se utiliza para indicar titulos de libros, peliculas, etc., muestra el texto en italicas.
ver cdigo
<code>

ver html

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


ver cdigo

ver html

<kbd>

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


ver cdigo

ver html

<samp>

La etiqueta samp, se utiliza para indicar una muestra.


ver cdigo

ver html

<strong>

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

ver html

<var>

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

ver cdigo

ver html

ver cdigo

ver html

ver cdigo

ver html

Etiquetas de Estilos Fsicos


<b>

Texto en negrillas

<i>

Texto en Italicas

<tt>

Texto en Typewriter (Mquina de escribir).

<small>
Permite decrementar el tamao del texto.
<big>

Permite incrementar el tamao del texto .


<blink>

Efecto de parpadeo de texto.


<s> o <strike>

El texto es cruzado con una lnea.


<sub>

El texto se despliega abajo de la mitad de la altura del carcter.


<sup>

El texto se despliega arriba de la mitad de la altura del carcter.


<u>

El texto aparece subrayado.


<basefont>

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.
<font>

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.

abadi
book antiqua
Comic Sans MS
garamond
Impact
Modern
system
<br>

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.
<nobr>

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.
<wbr>

Esta etiqueta se utiliza en combinacion con la etiqueta <nbr>, 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:

&lt; es la secuencia de escape para <


&gt; es la secuencia de escape para >

&amp; 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.
<a>

Le Etiqueta anchor, define enlaces, ligas o anclas.


ver cdigo

ver html

<a name>

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.com
IP: 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
<script>, 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.
<img>

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).
<img src="imagen.jpg" height="100" width="100">
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 <img> con un valor igual a cero.
ver cdigo

ver html

<map>

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 <body>.
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 <img> 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 <img>

dynsrc, utilice este atributo para hacer referencia a un archivo AVI que deba mostrar Internet Explorer, por
ejemplo:
<img dynsrc="videos/video.avi">
Un truco seria poner lo siguiente:
<img dynsrc="videos/video.avi" src="images/video.gif">
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:
<img dynsrc="videos/video.avi" src="images/video.gif">
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 infinite
Si deseamos repetirlo 10 veces
<img dynsrc="videos/video.avi" loop="10" src="images/video.gif">
o si deseamos que se repita constantemente:
<img controls dynsrc="videos/video.avi" loop="infinite" src="images/video.gif">

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.
<img dynsrc="videos/video.avi" start="mouseover" src="images/video.gif">

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.
<bgsound>

Utilice la etiqueta <bgsound> para reproducir audio de fondo en Internet Explorer, actualmente maneja 3 formatos de
sonido AU, MIDI y WAV.
<bgsound src="sounds/sound1.wav">
Si tiene un plug in de sonido puede escuchar los siguientes:
sonido 2 sonido 3 sonido 4 sonido 5
<marquee>

@ Solo para Internet Explorer y permite desplazar texto horizontalmente por el m
ver html
<spacer>

Utilice esta etiqueta para crear espacios en blanco horizontales, verticales y rectangulares en los documentos HTML.
(Solo Netscape).
ver html
<multicol>

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)
<layer>

Las capas se declaran con la etiqueta <layer>, 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.


<layer name="msg" visibility="hide">Error!</layer>
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.
<layer name="msg" visibility="hide">Error! left="100" top="100"</layer>
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 <layer> y </layer>
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

<ilayer>

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 <ilayer> 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 <ilayer> crea una capa que ocupa espacio en el flujo de texto. El contenido subsecuente se coloca
depus del espacio ocupado por <ilayer>, adiferencia de la etiqueta <layer>, 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 <ilayer> 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 <layer>.
ver html

<table>

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))

align, alineacin (izquierda, centro y derecha)


bgcolor, color de fondo del renglon

nowrap, contenido en una sola lnea

valign, alineacion vertical, (superior, media, inferior)

tr

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: <!-- Aqu va el comentario -->

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 <body> con una o mas etiquetas <frameset>,
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 <frameset> 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:
<frameset cols="10,10,10">
Si presentamos 4 frames:
<frameset cols="10,10,10,10">
Si presentamos 5 frames:
<frameset cols="10,10,10,10,10">
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:
<frameset cols="10,10,*">
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 <frameset>, la etiqueta <frame> la cual define el documento HTML que deseamos

presentar, tendremos una etiqueta <frame>, 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:
<frame src="http://www.netscape.com" name="F_Netscape">
<frame src="http://www.microsoft.com" name="F_Microsoft">
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:
<frameset rows="25%,50%,25%">
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 Framesets
El 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:
<frame scrolling="no">
si queremos agregar el scroll bar, que es el valor por defecto o default:
<frame scrolling="yes">

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 <body>, si usted pone cualquier etiqueta de
frames dentro de una etiqueta <body> el navegador las ignora antes de encontrar la primer etiqueta
<frameset>, por tanto un documento con frames es totalmente invisible para cualquier navegador que no
soporte frames. Se utiliza la etiqueta <noframes> solamente dentro de la etiqueta <frameset> mas externa de
un documento con frames. El contenido dentro de una etiqueta <noframes> 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 <a>


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 <a>.
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:

<a target="right" href="historia.html">Internet</a>


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:
<a target="left" href="historia.html">Internet</a>
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 <a> 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
<form></form>

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 <form>, 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 <form> 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:
<form action="http://www.nuestroServidor.com/cgi-bin/Registro">
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:


------------------------------146931364513459
Content-Disposition: form-data; name="nombre"
Gerardo ngeles Nava
------------------------------146931364513459
Content-Disposition: form-data; name="correo_Electronico"
gangeles@netscape.net
------------------------------146931364513459
text/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 pasos
primero: hace contacto con el servidor que procesara el formulario
segundo: 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 explcita


Se 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:
<a href="Receptor.html?nombre=Gerardo&amp;E-mail=gangeles@netscape.net">Enviar datos</a>
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 &#38 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 <form>

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.

<input>

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 <input>

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.

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 ?

Pon aqu 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?
masculino
femenino
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 imagen

9. 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.
Borrar los datos del formulario

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".
Enviar Formulario al Servidor

<textarea>

La etiqueta <textarea>, 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.

Algunos Atributos de <textarea>

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

<select>

La etiqueta <select>, permite hacer una lista de opciones posibles para que el usuario seleccione una o mas.
<option>

Utilice la etiqueta <option> para definir cada componente dentro de un elemento select del formulario

Algunos atributos de la etiqueta <select>

multiple, permite al usuario elegir ms de una opcin a la vez, asume el comportamiento de un elemento
<input type=chekbox>. La manera de seleccionar varias opciones es presionando la tecla Control y elegir la
opcion.

size, determina cuntas opciones podr ver el usuario a la vez, el valor por default es 1.

Algunos atributos de la etiqueta <option>

value, asigna un valor a cada opcin.

selected, por default, todas las opciones de una etiqueta <select> 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.

<form>
<select size="3" name="colores" multiple>
<option value="rojo">Rojo
<option value="blanco">Blanco
<option value="azul">Azul
<option value="verde">Verde
<option value="amarillo">Amarillo
</select>
</form>

Envio de un formulario a trves de correo electrnico


Formulario enviado por E-Mail