Fundamentos HTML, JavaScript y XML para el desarrollo web

,1752'8&&,1
En un mundo que cada da ms se va gobernando por el poder de la tecnologa

es necesario apostar por una carrera profesional tcnica que capacite a los
alumnos para desempearse como profesionales en el rea de Programacin
mediante tecnologas HTML, Javascript, XML y Java.
Desde 1992, la World Wide Web (www) constituye el servicio de Internet ms

popular, ya que permite la integracin de textos, imgenes y sonidos en los
llamados documentos multimedia. El desarrollo de sitios web es una actividad
sumamente importante para el mundo actual.
Al termino del curso de fundamentos de HTML, Javascript y XML estar en

condiciones de desarrollar pginas web utilizando HTML, que es el lenguaje
original de esta actividad, evaluar pginas web existentes desde el punto de
vista comercial y tcnico participando en el equipo responsable del desarrollo
de un sitio web empresarial complementando con el lenguaje de programacin
Javascript obteniendo grandes beneficios para la interaccin con el usuario y
adoptando la tecnologa XML para manejar base de datos de diferentes
fuentes.
Universidad Nacional de Ingeniera Facultad de Ingeniera Industrial y de sistemas
'(),1,&,1'(//(1*8$-(+70/
HTML (+\SHU7H[W0DUNXS/DQJXDJH) es un lenguaje interpretado que permite
agradable con HQODFHV (K\SHUOLQNV) que conducen a otros documentos o

describir hipertexto, es decir, texto presentado de forma estructurada y
fuentes de informacin relacionadas y con LQVHUFLRQHV multimedia (grficos,

sonido, etc).
La descripcin se basa en especificar en el texto la estructura lgica del

contenido (ttulos, prrafos de texto normal, enumeraciones, definiciones, citas,
etc.) as como los diferentes efectos que se quieren dar (especificar los lugares
del documento donde se debe poner cursiva, negrita, o un grfico determinado)
y dejar que luego la presentacin final de dicho hipertexto se realice por los

diversos navegadores como Internet Explorer, Netscape, Opera, etc.
instrucciones llamadas HWLTXHWDV (WDJV que indican al navegador como se

El lenguaje HTML se caracteriza por la necesidad de introducir unas
debe visualizar el documento en la pantalla siendo el principio esencial del

lenguaje HTML. Por medio de estas etiquetas se definen los distintos
y !.
elementos de una pgina Web. Estos comandos se escriben entre los smbolos
El formato general para la definicin de las etiquetas es de la siguiente forma:
1RPEUHBGHBODB(WLTXHWD!1RPEUHBGHBODB(WLTXHWD!
Las letras de la etiqueta (tag) pueden estar en maysculas o minsculas,

indiferentemente.
todo el documento HTML debe estar entre las etiquetas +70/! y +70/!:
Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo,
<HTML> [Todo el documento] </HTML>
El documento en s est dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas +($'! y +($'!

El cuerpo, comprendido entre las etiquetas %2'<! y %2'<!
Dentro del encabezamiento hay informacin del documento, que no se ve en la
etiquetas 7,7/(! y 7,7/(! El ttulo debe ser breve y descriptivo de su

pantalla principal, principalmente el ttulo del documento, comprendido entre las
su ERRNPDUN (o agenda de direcciones).

contenido, pues ser lo que vean los dems cuando aadan nuestra pgina a
Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla
principal (texto, imgenes, etc.)
Centro de Cmputo Sistemas UNI 2

Por tanto, la estructura queda de esta manera:

<HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[Aqu van las etiquetas que visualizan la pgina]
</BODY>
</HTML>
En el encabezado aparte del ttulo se definen las Meta Etiquetas (MetaTags)

que proporcionan a los buscadores la informacin relevante de cada
documento publicado como las palabras clave (keywords), autor, fecha de
creacin, descripcin, etc.
Cuando los robots o spiders de buscadores como Google visitan un servidor, lo

primero que leen son las etiquetas de encabezamiento, mientras ms preciso y
verdico sea su contenido con respecto al documento en s, ste obtiene un
mejor rating en los motores de bsqueda. Las etiquetas ms utilizadas son:
'HVFULSFLyQGHOFRQWHQLGRGHOGRFXPHQWR
<META NAME=description content=Texto descriptivo>
3DODEUDV&ODYH
<META NAME=keywords content=Palabras clave>
Las palabras clave se establecen separadas por comas. No se recomienda

colocar palabras que no aparecen en el documento o que no tengan relacin
con el sitio.
1RPEUHGHODXWRU
<META NAME=Author content=Nombre del autor>
,GLRPD
<META NAME=lang content=es>
Este es el idioma en que se escribi el documento, algunos ejemplos son es

(espaol), en (ingles), etc.
5HGLUHFFLRQDPLHQWRGHXQDSiJLQD
<META http-equiv=refresh content=0;URL=http://www.otrositio.com/>
Donde:
KWWSHTXLY UHIUHVK determina la accin refrescar

FRQWHQW determina el tiempo en segudos que se tarda en iniciar la
85/ KWWSZZZRWURVLWLRFRP Es el sitio o pgina a donde se dirige

operacin.
el trfico; s no se define ninguno la pgina se recarga automticamente

de forma indefinida.
En el cuerpo del documento va encerrado todo aquello que deseamos que

aparezca en la pantalla del navegador como texto, imgenes, botones, enlaces
a otras pginas.
Antes de crear nuestra primera pgina, unas consideraciones sobre el texto:

Cuando escribimos en el documento el texto que queremos que aparezca en la
pantalla, veremos que ste se acomoda a ella, sin que tengamos que pulsar la
la etiqueta 3!.
tecla ENTER. Si queremos separar el texto en distintos prrafos debemos usar
(1&$%(=$'26
Los encabezados se emplean para establecer ttulos y subttulos,

comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el
nmero 6), siendo el nmero indicativo del tamao. El tamao mayor es el
correspondiente al nmero 1.
6LQWD[LV
<H1>Texto</H1> Texto
6$/726'(355$)2
Para insertar prrafos de texto en una pgina Web se emplea la etiqueta 3!
3! La etiqueta de cierre (</P>) es opcional.
6$/726'(/1($
cortando el flujo de texto mediante la etiqueta %5! %5! La etiqueta de

Permiten insertar un salto de lnea simple en el lugar donde se inserta,
cierre (</BR>) es opcional.
Una etiqueta muy interesante es la de centrado &(17(5! y &(17(5! (no

la soportan todos los navegadores, aunque s la mayora de ellos). Nos centra

todo lo que est dentro de ella, ya sea texto, imgenes, etc.

(MHPSORSUiFWLFR
<HTML>
<HEAD>
<TITLE> Mi pagina Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pgina, aunque todava es muy sencilla. Como
el lenguaje HTML no es difcil, pronto estar en condiciones de
hacer cosas ms interesantes.
<P> Aqu va un segundo prrafo.
</BODY>
</HTML>
Lo importante del esquema anterior es que se mantenga el orden correcto de

las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra.
Vase en el ejemplo cmo lo est la etiqueta <CENTER> dentro de la etiqueta
<H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de
cierre vayan en el orden correcto, pues de lo contrario se produciran errores.
/1($6+25,=217$/(6
Permite insertar una lnea horizontal a lo largo de la pgina. Esto permite crear
una separacin visual del documento mediante la etiqueta <HR> </HR>. La
etiqueta de cierre es opcional.
$WULEXWRVGHODHWLTXHWD+5!
Permiten controlar el aspecto de la linea horizontal.
+5VL]H QZLGWK QQDOLJQ $OLQHDFLRQQRVKDGH!
Donde:
VL]H Q Permite modificar la altura (espesor) de la barra

horizontal, donde n es un nmero en pxeles
ZLGWK QQ Indica el ancho de la lnea horizontal donde nn

puede estar definida en pxeles o porcentaje.
DOLJQ $OLQHDFLyQ Establece la alineacin horizontal de la

lnea. Este atributo se debe emplear junto con el atributo width.
Valores:
left: Alinear a la izquierda
right: Alinear a la derecha
center: Estar centrada

1RVKDGH Elimina el efecto de sombra y tridimensional que tiene

la barra.
$PSOLDFLyQGHODHWLTXHWD+5!
<HR WIDTH=75%>
Ocupa el 75% de su anchura (width) normal.
<HR WIDTH=300>
Tiene una anchura de 300 pixels.
Se puede alinear a la izquierda:
<HR WIDTH=50% ALIGN=LEFT>
O a la derecha:
<HR WIDTH=35% ALIGN=RIGHT>
Se puede variar su espesor:

<HR SIZE=20>
Tambin se puede hacer que sea una lnea slida, no embutida sobre el fondo:
<HR NOSHADE>
)250$726'(7(;72
Como hemos visto en el ejemplo anterior, cuando queremos poner un texto sin
ninguna caracterstica especial, lo ponemos directamente. nicamente, la
separacin entre prrafos (dejando una lnea en blanco) la conseguimos con la
etiqueta <P>.
Si queremos separar los prrafos, o cualquier otra cosa, pero sin dejar una
lnea en blanco, usamos una etiqueta parecida <BR> (break).
Si queremos obtener mltiples lneas en blanco no basta con repetir la etiqueta

<P>, sino que hay que combinarla con la etiqueta <BR>. As por ejemplo, si
queremos obtener cuatro lneas en blanco, pondramos:
<BR><P>
<BR><P>
<BR><P>
<BR><P>
Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras

observamos que el navegador slo reconoce uno de ellos. Si queremos forzarle
a que lo haga, debemos poner el cdigo " QEVS;" (non-breaking space).

Para destacar alguna parte del texto se pueden usar:
%!\%! para establecer negrita (bold).

8!\8! para establecer subrayado (underline).
,!\,! para establecer cursiva (italic).
Otra etiqueta interesante es 35(!\35(! El texto que se encuentre entre

ella estar preformateado, es decir que aparecer como si hubiera sido HVFULWR
con una PiTXLQDGHHVFULELU, con una fuente de espaciado fijo (tipo Courier).
Adems se respetarn los espacios en blanco y la pulsacin de la tecla
ENTER, tal como estaban en nuestro documento HTML (lo cual no ocurre
normalmente, como hemos visto anteriormente). Es muy apropiada para
confeccionar tablas y otros documentos similares.
Con la etiqueta 77! \ 77! conseguimos tambin que el texto tenga un

tamao menor y la apariencia de los caracteres de una mquina de escribir
(typewriter). La diferencia con la anterior es que no preformatea el texto, sino
que nicamente cambia su apariencia.
La etiqueta %/2&.4827(! \ %/2&.4827(! se utiliza para

establecer sangras.
subndices, que se consiguen con las etiquetas 683! 683! y 68%!

En las frmulas matemticas puede interesar poder escribir ndices y
68%! respectivamente. As, por ejemplo:

m2 se consigue de la siguiente manera: m<SUP>2</SUP> vx se consigue con:
v<SUB>x</SUB>
&$5$&7(5(6(63(&,$/(6
Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que
las etiquetas se forman como un comando escrito entre los smbolos "<" y ">".
Por tanto, si se quisieran escribir estos caracteres como parte normal del texto,
dara esto lugar a una ambigedad, ya que el programa navegador podra
interpretarlos como el comienzo o final de una etiqueta, en vez de un carcter
ms del texto.
Para resolver este problema, existen unos cdigos para poder escribir estos
caracteres y otros relacionados con las etiquetas.
OW para < (less than, menor que)

JW para > (greater than, mayor que)
DPS para & (ampersand)
TXRW para " (double quotation)
Estos cdigos empiezan siempre con el signo y acaban siempre con

de la vocal en cuestin, seguido de la palabra DFXWH(aguda) y terminando con

Los cdigos de las vocales acentuadas se forman comenzando con &, seguido
el signo
DDFXWH para la
HDFXWH para la
LDFXWH para la
RDFXWH para la
XDFXWH para la
$DFXWH para la
(DFXWH para la
,DFXWH para la
2DFXWH para la
8DFXWH para la
El resto de los cdigos son:
QWLOGH para la
1WLOGH para la
XXPO para la
8XPO para la
; para
para
Todo esto, que como se ve es muy laborioso, puede parecer intil ya que si
escribimos nuestro texto sin hacer ningn caso de estas convenciones,
escribiendo las letras acentuadas y dems signos directamente, es muy posible
que el resultado lo veamos correctamente en nuestro navegador, pero nunca
podremos estar seguros que les ocurra lo mismo a todos los que accedan a
nuestras pginas con otros navegadores distintos.
(MHPSORSUiFWLFR
<HTML>
<HEAD>
<TITLE> Mi página Web </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mi página Web </H1>
</CENTER>
<HR>
Esta es mi página Web. No es muy extensa, pero tiene
todos los elementos básicos. Espero que les guste. Poco
a poco le iré añadiendo más cosas
interesantes.
</BODY>
</HTML>

(67,/26'(7(;72
es la etiqueta )217!)217!
La etiqueta que permite efectuar las transformaciones en la apariencia del texto
$WULEXWRV

Formato general:
<FONT SIZE=n COLOR=#RBG FACE=nombre1,, nombren>

texto</FONT>
'RQGH

6,=( Q Permite modificar el tamao de la letra. Se puede especificar

en nmeros absolutos o relativos
<FONT SIZE=5> Cambia el tamao al tamao 5

<FONT SIZE=+1>Cambia el tamao al inmediatamente superior

a la unidad base
Los tamaos del texto van, de menor a mayor, del 1 al 7. El tamao normal (o
tamao base) es el 3. Se puede tambin cambiar relativamente con respecto a
este tamao normal.
<FONT SIZE=-1> Texto algo menor </FONT>
<FONT SIZE=+1> Texto algo mayor </FONT>
<FONT SIZE=+2> Texto an mayor </FONT>
Se puede cambiar incluso el tamao base para toda la pgina, poniendo al

comienzo del documento (a continuacin de la etiqueta <BODY>) esta etiqueta
que cambiara el tamao base de 3 a 5:
%$6()2176,=( !
&2/25 55**%% Establece el color del texto definindose

mediante valores hexadecimales o en ingles.
<FONT COLOR=#0000FF>Texto de color azl</FONT>

<FONT COLOR=BLUE>Texto de color azl</FONT>
55 es un nmero indicativo de la cantidad de color rojo

** es un nmero indicativo de la cantidad de color verde
%%es un nmero indicativo de la cantidad de color azul
Estos nmeros estn en numeracin hexadecimal. Esta numeracin se

caracteriza por tener 16 dgitos (en lugar de los diez de la numeracin
decimal habitual). Estos dgitos son:

0123456789ABCDEF
Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el

FF. As, por ejemplo, el color rojo es el #FF0000, porque tiene el mximo de
rojo y cero de los otro dos colores.
Los colores primarios son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Para hacer un color ms oscuro, hay que reducir el nmero de su

componente, dejando los otros dos invariables. As, el rojo #FF0000 se
puede hacer ms oscuro con #AA0000, o an ms oscuro con #550000.
Para hacer que un color tenga un tono ms suave (ms pastel), se

deben variar los otros dos colores hacindolos ms claros (nmero ms
alto), en una cantidad igual. As, podemos convertir el rojo en rosa con
#FF7070.
)$&( QRPEUHQRPEUHQ Permite definir el tipo de letra.
<FONT FACE="Verdana">Este texto se ver con el tipo de letra

arial</FONT>
Se pueden indicar en el atributo varias fuentes distintas, separadas por una

coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y as
sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto.
As, por ejemplo:
<FONT FACE="Impact, Arial">Este texto se ver con la fuente Impact, o en su

defecto con Arial</FONT>

$/,1($&,21(6
&(17(5!&(17(5!
La etiqueta que permite centrar texto, imgenes, tablas u otros objetos es
prrafo , encabezados, etc. es ',9!',9!

La etiqueta dedicada a la alineacin de grandes bloques de etiquetas de

6LQWD[LV
<DIV ALIGN=ALINEACION>Elemento HTML</DIV>
Donde:
ALIGN=ALINEACION: puede ser cualquiera de los siguiente
valores:
OHIW Alinear a la izquierda

ULJKW Alinear a la derecha
FHQWHU Estar centrada
MXVWLI\ Justificado

/,67$6
A menudo nos interesar presentar las cosas en forma de listas. Podemos

escoger entre tres tipos distintos:
1. Listas desordenadas (no numeradas) 8/!8/!

2. Listas ordenadas (numeradas) 2/!2/!
3. Listas de definicin. '/!'/!
Las listas desordenadas (unordered lists) sirven para presentar cosas que, por
no tener un orden determinado, no necesitan ir precedidas por un nmero. Se
denomina tambin Lista con vietas.
Su estructura es la siguiente:
<UL>
<LI> Una cosa
<LI> Otra cosa
<LI> Otra ms
<LI> Etc.
</UL>
Es decir, toda la lista est dentro de la etiqueta <UL> y </UL>, y luego cada
cosa va precedida de la etiqueta <LI> (list item). El resultado de lo anterior es el
siguiente:
Una cosa
Otra cosa
Otra ms

Etc.
$WULEXWRV
7\SH HVWLOR Indica el tipo de vieta.

'LVF Inserta un circulo con relleno (Por defecto)
6TXDUH Inserta un cuadrado
&LUFOHInserta una circulo sin relleno
Se puede anidar una lista dentro de otra. Por ejemplo:
<UL>
<LI> Mamferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden
determinado. Su estructura es muy similar a la anterior. La diferencia estriba en
que en el resultado aparecer automticamente un nmero correlativo para
cada cosa. Se le conoce tambin como numeracin automtica.
<OL>
<LI> Primera cosa
<LI> Segunda cosa
<LI> Tercera cosa
<LI> Etc.
</OL>
El resultado es:
1. Primera cosa
2. Segunda cosa
3. Tercera cosa
4. Etc.
$WULEXWRV
7\SH FDUDFWHU Indica el tipo de numeracin.

: Indica orden numrico. (por defecto)
D: Indica orden alfabtico en minsculas.
$: Indica orden alfabtico en maysculas.
L: Indica orden numrico con nmeros romanos en
minsculas.

,: Indica orden numrico con nmeros romanos en

maysculas.
6WDUW Q Indica a partir de que nmero va a empezar la lista.
Al igual que las listas desordenadas, tambin se pueden anidar las listas
ordenadas.
El tercer tipo lo forman las listas de definicin. Como su nombre indica, son
englobada entre las etiquetas '/!\'/!

apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir
A diferencia de las dos etiquetas mencionadas previamente, cada rengln de la
1) el nombre de la cosa a definir, que se consigue con la etiqueta '7!

lista tiene dos partes:
2) la definicin de dicha cosa, que se consigue con la etiqueta ''! (definition

(definition term)
definition).
<DL>
<DT> Una cosa a definir
<DD> La definicin de esta cosa
<DT> Otra cosa a definir
<DD> La definicin de esta otra cosa
</DL>
Su resultado es:
Una cosa a definir

La definicin de esta cosa
Otra cosa a definir
La definicin de esta otra cosa
&20(17$5,26129,6,%/(6(1/$3$17$//$
A veces es muy til escribir FRPHQWDULRV en el documento HTML sobre el

cdigo que escribimos, que nos pueden servir para recordar posteriormente
sobre lo que hicimos, y que no queremos que se vean en pantalla.
\!
Esto se consigue encerrando dichos comentarios entre estos dos smbolos:
Ejemplo:



,0*(1(6
,0*!
La etiqueta que nos sirve para incluir imgenes en nuestras pginas Web es
La estructura de la etiqueta es:
<IMG SRC="imagen.gif">
Con el comando IMG 65& (image source, fuente de la imagen) se indica que
se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga).
Dentro de la etiqueta se pueden aadir otros comandos, tal como $/7
<IMG SRC="imagen.gif" ALT="descripcin">
Con el comando $/7 se introduce una descripcin (una palabra o una frase
breve) indicativa de la imagen. Este comando, que en principio se puede omitir,
es en beneficio de los que accedan a nuestra pgina con un programa
navegador en forma de texto slo. Ya que no son capaces de ver la imagen,
por lo menos pueden hacerse una idea sobre ella. Hay casos, en los que se
utiliza una imagen como enlace a otra pgina. Si se omitiera este comando, los
que utilizan dichos navegadores no podran de ninguna manera acceder a esas
pginas.
Las imgenes deben estar guardadas en un formato especial como GIF o JPG
(existen tambin otros formatos). El formato GIF almacena las imgenes con
un mximo de 256 colores, en forma comprimida.
Un aspecto muy importante a tener en cuenta es el tamao de las imgenes,

pues una imagen grande supone un archivo grande, y esto puede resultar en
un tiempo excesivo de carga, con el consiguiente riesgo de que quien est
intentando cargar nuestra pgina se canse de esperar, y desista de ello.
Para elegir la posicin de la imagen con respecto al texto hay distintas

posibilidades. La ms sencilla es colocarla entre dos prrafos, con un titular a
un lado.
De momento nos vamos a limitar a escoger la posicin del titular con respecto
a la imagen (si es que queremos ponerle un titular, claro est). Se puede poner
arriba, en medio o abajo del lado de la imagen. Para ello se aade el comando
ALIGN a la etiqueta, de la siguiente manera:
<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba
<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio
<IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo
<IMG SRC="isla.jpg" ALIGN=RIGHT> Imagen alineada a la derecha

<IMG SRC="isla.jpg" ALIGN=LEFT> Imagen alineada la izquierda
)250$72'(/$6,0*(1(6
Cuando vamos navegando por las pginas del Web parece a veces que todo
se detiene completamente. Esto es algo que por desgracia ocurre muy a
menudo. Pueden ser muchas las causas: conexiones de la red defectuosas,
servidores lentos, etc. Son cosas que en general no nos queda ms remedio
que soportar.
Pero hay una causa particularmente irritante, y es que hayamos ido a parar a
una pgina que padece del Sndrome de la Imagen Gigantesca, que es la mala
costumbre de poner en la pgina imgenes enormes, lo que se traduce en
archivos de imagen a cargar con un tamao excesivo.
Hay unas cuantas maneras de minimizar el tamao de los archivos de imagen:
Reducir el tamao de la imagen con un programa grfico. Esto har que haya
menos pxeles que almacenar, y por tanto menos kilobytes que cargar.
Reducir el nmero de colores utilizados en la imagen. Una imagen GIF puede

tener un mximo de 256 colores, pero podemos a veces reducir este nmero.
Por ejemplo, se puede conseguir un logo atractivo para encabezar las pginas
con slo dos colores, uno de primer plano y el otro de fondo. Con un programa
grfico adecuado se pueden hacer estas comprobaciones y reducciones.
Simplificar las imgenes.
(OIRUPDWR*,) comprime la imagen buscando las secuencias repetidas en los

datos y abrevindolas. Esto quiere decir que las zonas grandes de un slo
color se comprimen muy bien, al contrario de las que tienen muchos tonos y
graduaciones.
Como referencia, el archivo de una imagen no debe sobrepasar los 100k, mejor
an ms pequeo. Tampoco conviene que el tamao de la imagen en la
pantalla sea mayor de 500x400 pxeles, para no obligar al usuario a tener que
desplazarla con los cursores.
Si a pesar de todo, las imgenes que queremos poner siguen teniendo un

tamao de archivo demasiado grande, se puede elegir la solucin de utilizar
thumbnails (reproducciones en pequeo que enlazan con la imagen grande).
De esta manera es el usuario quien elige qu imgenes cargar.
Otra prctica muy aconsejable, es la de dimensionar todas las imgenes con

los comandos WIDTH y HEIGHT.
Cuando se carga la imagen de una pgina queda almacenada en el cach. Por

tanto, si esta misma imagen se utiliza en otras pginas no ser requerida al
servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es

conveniente repetir la misma imagen en otras pginas, como por ejemplo para
los botones, iconos, barras de separacin, etc.
(O IRUPDWR -3(* El mtodo de compresin utilizado por el formato GIF es

muy conveniente para comprimir reas monocolor, como las que puede haber
por ejemplo en un diagrama sencillo. Pero no es tan conveniente para cosas
ms complicadas, como por ejemplo fotografas de objetos de la vida real.
Adems estos objetos no presentan un aspecto nada favorable si estn
reducidos a los 256 colores de este formato.
Para realizar este tipo de tareas se cre el formato JPEG. Almacena las
imgenes con 16.7 millones de colores, que es mucho ms de lo que el ojo
humano puede distinguir, y hace uso de complicados algoritmos matemticos
para comprimir el tamao de los archivos hasta la dcima parte de su tamao
original. Esto quiere decir que una imagen complicada que se haya comprimido
con este formato tendr, comparando con el formato GIF, una calidad mayor y
un tamao de archivo menor.
Su nico inconveniente es que hay navegadores que no son capaces de

manejar directamente estos archivos y que tienen que traspasarlos a un
programa auxiliar para ejecutarlos. Esto quiere decir, que si se quiere tener en
cuenta a esos navegadores, no se deben poner imgenes con este formato
directamente en la pgina. Un recurso muy utilizado para solventar esto es el
de poner thumbnails en formato GIF que enlacen con las imgenes en tamao
natural y formato JPEG.
De todas maneras, tngase en cuenta que los navegadores que s pueden

manejar este formato son, con mucho, los ms utilizados, como son los de
Netscape y Microsoft.
*,)VWUDQVSDUHQWHV Una caracterstica muy til del formato GIF es la opcin

de hacer transparente un color determinado, es decir, que en la pgina Web
ese color concreto no se vea, siendo reemplazado por el fondo de la pgina.
Por tanto, si en una imagen escogemos el color de su fondo como
transparente, parecer flotar sobre el fondo de la pgina (sea ste el que sea,
incluso un fondo de imgenes)
Esta es la imagen original, con un fondo blanco no transparente.
La misma imagen, pero con el color blanco transparente.
Pero no todas las imgenes son apropiadas para conseguir este efecto. Es
condicin indispensable que la imagen tenga un fondo de color uniforme. No
vale una imagen con un fondo multicolor.
*,)VHQWUHOD]DGRV Normalmente, un archivo GIF contiene los datos de cada

lnea de la imagen de una manera ordenada, de tal manera que al ser cargada
por el navegador aparecer dibujada lnea a lnea desde arriba hasta abajo.
Se puede cambiar este comportamiento si se ha guardado la imagen como un

GIF entrelazado (interlaced GIF). En este caso, las lneas quedan guardadas

no de una manera consecutiva, sino en saltos de de cuatro en cuatro, y al

llegar al final recomienza desde el principio con otra secuencia diferente,
tambin de cuatro en cuatro, as hasta completar la imagen.
Por ejemplo, una imagen de 20 lneas sera guardada con estas secuencias:
Lneas 1, 5, 9, 13, 17
Lneas 2, 6,10, 14, 18
Lneas 3, 7,11, 15, 19
Lneas 4, 8, 12, 16, 20
El propsito de esto es que al ser cargada esta imagen por un navegador que
implemente esta caracterstica (Netscape, Explorador de Microsoft, etc.), se
ver la imagen completa desde el principio, comenzando con una definicin
muy grosera que luego se va afinando poco a poco.
El tiempo de carga de una imagen entrelazada y de la misma no entrelazada es

el mismo, pero en el primer caso nos hacemos rpidamente una idea del tipo
de imagen que es, lo cual puede ser muy conveniente a veces.
',0(16,21$1'2/$,0$*(1
Los programas navegadores cuando cargan un documento HTML y encuentran

una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al
servidor que le enve dicha imagen, quedando a la espera hasta que se
complete el envo, repitindose este proceso con cada una de las imgenes.
Esto es especialmente molesto cuando, como ocurre frecuentemente, en la

cabecera de la pgina se encuentra una imagen grande, ya que durante un
tiempo relativamente largo no se ver nada en la pantalla.
Para evitar este inconveniente existen unas extensiones de la etiqueta de la

imagen <IMG SRC="imagen.gif"> que sirven para indicar al navegador cules
son sus dimensiones en pixels. (Este dato lo habremos obtenido previamente
de algn programa grfico).
En este caso, el navegador acta de una forma ms favorable, ya que

entonces, como conoce las dimensiones de las imgenes les reserva un
espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna
interrupcin, a la vez que va rellenando esos espacios reservados a las
imgenes.
Estos atributos son WIDTH (ancho) y HEIGHT (alto).
Por ejemplo, para la imagen isla.gif situada ms arriba:
<IMG SRC="isla.gif" WIDTH=120 HEIGHT=94>
Es conveniente hacer esto con todas las imgenes, incluso con las ms
pequeas (iconos, botones, etc), para que no haya ninguna interrupcin en el
proceso de carga del documento.

Se pueden tambin, si se quiere, dimensionar las imgenes con unos valores

distintos a los que realmente tienen, variando el tamao, la anchura o la altura.
Esto es muy conveniente, por ejemplo para poner en la pgina un thumbnail
(reproduccin en pequeo de una imagen), que hace de enlace a la imagen en
su verdadero tamao. De esta manera no recargamos demasiado una pgina,
y el usuario ser quien decida qu imgenes desea cargar.
He aqu un ejemplo de thumbnail:
La imagen, "logo.gif", tiene realmente unas dimensiones de 575x300 pixels

(datos obtenidos de un programa grfico). Para dimensionar el thumbnail a
150x75 (guardando unas proporciones parecidas al original, de 2:1), lo
conseguimos con:

<IMG SRC="logo.gif" WIDTH=150 HEIGHT=75>
(MHPSORSUiFWLFR
Este ejemplo inserta, dimensiona y alinea las imgenes de una pgina Web.
<IMG SRC="imagen1.gif"> por <IMG SRC="imagen1.gif" WIDTH=29

HEIGHT=27>
<IMG SRC="imagen2.gif"> por <IMG SRC="imagen2.gif" WIDTH= 30
HEIGHT=29>
<IMG SRC="imagen3.gif"> por <IMG SRC="imagen3.gif" WIDTH= 120
HEIGHT=94>
Adems de esto, aadimos entre las etiquetas </CENTER> y </BODY> (al final
del documento), lo siguiente:
<P>
<HR>
<P><IMG SRC="doom.gif" WIDTH=160 HEIGHT=100 ALIGN=LEFT>Una de
mis aficiones favoritas son los juegos tipo "Doom", con los que paso horas
incontables.
<BR CLEAR=LEFT>
<P>

<HR>

(1/$&(6&21275$63*,1$6
La caracterstica que ms ha influido en el espectacular xito del ha sido,

aparte la de su carcter multimedia, la posibilidad de unir los distintos
documentos repartidos por todo el mundo por medio de enlaces hipertexto.
(VWUXFWXUDGHORVHQODFHV
En general, los enlaces tienen la siguiente estructura:
<A HREF="xxx"> yyy </A>

Donde:
xxx es el destino del enlace (Obsrvese las comillas).
yyy es el texto indicativo en la pantalla del enlace (con un color especial
y generalmente subrayado) o una imagen.
7LSRVGHHQODFHV
Vamos a distinguir cuatro tipos de enlaces
1. Enlaces dentro de la misma pgina

2. Enlaces con otra pgina nuestra
3. Enlaces con una pgina fuera de nuestro sistema
4. Enlaces con una direccin de email
(QODFHVGHQWURGHODPLVPDSiJLQD
A veces, en el caso de documentos (o pginas) muy extensos, nos puede

interesar dar un salto desde una posicin a otra determinada.
En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace,
en este caso el sitio dentro de la pgina a donde queremos saltar, se sustituye
por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo
que hemos llamado antes YYY es la palabra (o palabras) que aparecern en la
pantalla en color (en forma de hipertexto). Su estructura es, entonces:
$+5() PDUFD!<<<$!
Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente

etiqueta:
$1$0( PDUFD!$!
Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente
etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Que resulta como: Pulsa para ir al final (Puedes comprobar cmo salta a la
pantalla final)

Y en el final del documento he puesto esta otra etiqueta:
<A NAME="final"> </A>
(QODFHVFRQRWUDSiJLQDQXHVWUD
Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que
tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e
incluso entre ellas mismas.
Supongamos que queremos enlazar con una pgina creada denominada

mipag2.html. En este caso, simplemente sustituimos lo que hemos llamado
XXX (el destino del enlace) por el nombre del archivo:
$+5() PLSDJKWPO!+DJDFOLFSDUDLUDOVHJXQGRHMHPSOR$!
Que resulta como: Haga clic para ir al segundo ejemplo(Puedes comprobar

cmo carga esa pgina)
Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al

principio de la pgina, adonde va por defecto, en ese sitio tenemos que colocar
una marca y completar el enlace con la referencia a esa marca.
<A HREF="mipag2.html#marca"> Ejemplo </A> Que resulta: Ejemplo
Una observacin importante: Estoy suponiendo que la pgina en la que estoy

escribiendo esta etiqueta y la otra pgina a la que quiero saltar estn en el
mismo directorio. Porque pudiera ocurrir que he organizado mi sitio del Web
con un directorio principal y otros subdirectorios auxiliares. Si la pgina a la que
quiero saltar est, p. ej. en el subdirectorio subdir, entonces en la etiqueta
tendra que haber puesto "VXEGLUPLSDJKWPO".
directorio anterior, en la etiqueta tendra que haber puesto PLSDJKWPO".

Y a la inversa, si quiero saltar desde una pgina a otra que est en un
Esos dos puntos hacen que se dirija al directorio anterior. Obsrvese que se
debe utilizar el smbolo / para indicar los subdirectorios, y no este otro \, que es
propio nicamente de Windows.
Si nos queremos evitar todas estas complicaciones, podemos tener todo junto
en un nico directorio, pero esto tiene el inconveniente de que est todo ms
desordenado, y sean ms difciles de hacer las futuras modificaciones.
(QODFHVFRQXQDSiJLQDIXHUDGHQXHVWURVLVWHPD
Si queremos enlazar con una pgina que est fuera de nuestro sistema (es
decir, que est en un servidor distinto al que soporta nuestra pgina), es
necesario conocer su direccin completa, o URL (Uniform Resource Locator).
El URL podra ser, adems de la direccin de una pgina Web, una direccin
de ftp, gopher, etc.

Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos

llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la
pgina de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta
sera:
<A HREF="http://home.netscape.com/"> Pgina inicial de Netscape </A>
Es muy importante copiar estas direcciones correctamente (respetando las

maysculas y minsculas, pues los servidores UNIX s las distinguen)
(QODFHVFRQXQDGLUHFFLyQGHHPDLO
En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace)
por mailto: seguido de la direccin de email. La estructura de la etiqueta es:
<A HREF="mailto: direccin de email"> Texto del enlace </A>
Un ejemplo de esto est al final de la pgina principal podra ser:
Comentarios a <A HREF="mailto: marcelovfp@msn.com">Marcelo </A>
(MHPSORSUiFWLFR
En el procesador de textos copiamos:
<HTML>
<HEAD>
<TITLE> Mi pagina Web </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis paginas favoritas </H1>
</CENTER>
<HR>
Estas son mis pginas favoritas:
<P><A HREF="http://home.netscape.com"> Netscape </A>
<BR> <A HREF="http://www.sun.com"> Sun</A>
<BR> <A HREF="http://www.yahoo.com"> Yahoo </A>
</BODY>
</HTML>
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a

otra pgina. Para estos casos se utilizan generalmente imgenes pequeas
(iconos), aunque se puede usar cualquier tipo de imagen.
<A HREF="xxx"> yyy </A>
En la estructura anterior, xxx era el destino del enlace e yyy el texto del enlace.
En este caso sustituimos xxx por el nombre del archivo de la pgina a la que

queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la

imagen (que queda as englobada dentro de la etiqueta del enlace)
Como ejemplo vamos a utilizar la imagen (logo.gif) para acceder al archivo

mipag2.html:
<A HREF="mipag2.html"><IMG SRC="logo.gif"></A>
Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina

deseada. Obsrvese adems que la imagen est rodeada de un rectngulo del
color normal en los enlaces. Si no se desea que aparezca ese rectngulo, hay
que incluir dentro de la etiqueta de la imagen el atributo BORDER=0, es decir:
<A HREF="mipag2.html"><IMG SRC="logo.gif" BORDER=0></A>
Posicionando el cursor sobre esta ltima imagen, comprobamos que acta

tambin como enlace aunque carezca del rectngulo de color. Esto puede
resultar ms esttico, pero se corre el riesgo de que el usuario no se d cuenta
de que la imagen sirve de enlace.
Tambin podemos utilizar una imagen para enlazar con otra imagen. En este
caso sustituimos xxx (el destino del enlace) con el nombre del archivo de la
imagen a la que queremos acceder e yyy (lo que aparece en pantalla como el
enlace) por la etiqueta completa de la imagen que queremos que aparezca en
la pantalla como el enlace de la otra.
Supongamos que queremos enlazar con la imagen isla.gif por medio de esta
otra imagen: (casa.gif):
<A HREF="isla.gif"><IMG SRC="casa.gif"></A>
Por ltimo, otra posibilidad es la de utilizar un texto para enlazar con una
imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del
archivo de la imagen a la que queremos acceder e yyy (lo que aparece en
pantalla como el enlace) por el texto.
Supongamos que queremos enlazar con la imagen isla.gif por medio del texto
"un paraso tropical":
<A HREF="isla.gif"> un paraso tropical </A>
(MHPSORSUiFWLFR
En primer lugar es necesario capturar tres imgenes: isla.gif, futbol.gif y

casa.gif y guardarlas en el mismo directorio en el que se guardar el archivo
html que se va a crear a continuacin, junto con los de los captulos anteriores.
<HTML>
<HEAD>
<TITLE> Mi pgina Web </TITLE>

</HEAD>
<BODY>
<CENTER>
<H1> Mi pgina Web </H1>
</CENTER>
<HR>
Esta es mi pgina Web. No es muy extensa, pero tiene todos los
elementos bsicos. Espero que les guste. Poco a poco ir
aadiendo ms cosas interesantes.
<P> <A HREF="mipag2.html"> <IMG SRC="futbol.gif"> </A> Mis
aficiones <P>
<A HREF="mipag3.html"> <IMG SRC="casa.gif"> </A> Mis
paginas favoritas<CENTER>
<H3> Un lugar ideal para mis vacaciones </H3>
<IMG SRC="isla.gif" ALT="isla">
</CENTER>
</BODY>
</HTML>

)21'26
Se puede establecer el fondo de dos maneras distintas:

1. Con un color uniforme

2. Con una imagen
)RQGRVFRQXQFRORUXQLIRUPH
Se consigue aadiendo el comando BGCOLOR a la etiqueta <BODY> (situada
al principio del documento), de la siguiente manera:
<BODY BGCOLOR="#RRGGBB">
)RQGRVFRQXQDLPDJHQ
El fondo de una pgina puede ser tambin una imagen, ya sea en formato GIF
o JPEG. Esta imagen se repite por toda la pgina, de una manera anloga al
tapiz de Windows. La estructura de la etiqueta es:
<BODY BACKGROUND="imagen.gif">
O bien:
<BODY BACKGROUND="imagen.jpg">
&RORUHVGHOWH[WR\GHORVHQODFHV
Si no se variasen los colores habituales del texto y de los enlaces (negro y azul,
respectivamente), podra ocurrir que su lectura contra un fondo oscuro fuese
muy dificultosa, o incluso imposible, si el fondo fuese precisamente negro o
azul.
Para evitar esto, se pueden escoger los colores del texto y de los enlaces,
aadiendo a la etiqueta <%2'<! los siguientes atributos:
7(;7: Color del texto

/,1.: Color de los enlaces
9/,1.Color de los enlaces visitados
$/,1.: Color de los enlaces activos (el que adquieren en el momento de
ser pulsados)
La etiqueta, con todas sus posibilidades, sera:
<BODY BGCOLOR="#RRGGBB" TEXT="#RRGGBB" LINK="#RRGGBB"

VLINK="#RRGGBB" ALINK="#RRGGBB">
(MHPSORSUiFWLFR
Vamos a poner como fondo la imagen nubes.jpg, junto con un fondo alternativo
de color azul claro y hacer que el texto sea de color rojo oscuro.
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF"

TEXT="#AA0000">

7$%/$6
Las tablas sirven para presentar la informacin de una manera ordenada.

Dentro de las celdas de las tablas podremos incluir algunos de los elementos
siguientes: texto, listas, imgenes, enlaces, otras tablas, elementos de
formulario y cualquier otro elemento. Adems servirn para formatear el texto
que aparezca en nuestra pgina.
(VWUXFWXUDGHXQDWDEOD
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias
para confeccionar las tablas.
1. La etiqueta general, que engloba a todas las dems es 7$%/(! \

7$%/(! Es decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
Para establecer bordes:
<TABLE BORDER>
[resto de las etiquetas]
</TABLE>
formar cada fila (row) de la tabla, que son 75! \ 75! Hay que
2. En el siguiente nivel, dentro de la anterior, estn las etiquetas para
repetirlas tantas veces como filas queremos que tenga la tabla. Es decir,
para una tabla con dos filas, sera:
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
<TR>
[etiquetas de las distintas celdas de la segunda fila]
</TR>
celda, que son 7'!\7'! que engloban el contenido de cada celda

3. En el ltimo nivel (dentro de las anteriores) estn las etiquetas de cada
concreta (texto, imgenes, etc.).

Hay que repetirla tantas veces como celdas queremos que haya en esa
fila.
Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas.
Dentro de cada celda vamos a poner un texto indicativo de la posicin de dicha
celda:
<TABLE BORDER>
<TR>

<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>

</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>
Que resulta:
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
fila2-celda3
)LODVFRQGHVLJXDOQ~PHURGHFHOGDV
En este ejemplo hemos puesto dos filas con igual nmero de celdas. Qu
pasa si ese nmero es distinto? Pues el navegador forma el nmero de filas y
columnas que haga falta, dejando espacios en blanco en las filas que tengan
menos celdas.
Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir
si borramos <TD>fila2-celda3</TD>, resultar:
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
7LWXODUGHODWDEOD
Se puede aadir un titular (caption) a la tabla, es decir un texto situado encima
&$37,21! y &$37,21!
de la tabla que indica cul es su contenido. Se consigue con la etiqueta
Si en el ejemplo anterior aadimos la siguiente lnea:
<CAPTION> Ejemplo de filas desiguales </CAPTION>, resulta:
Ejemplo de filas desiguales

fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
9DULDQGRHOHVSHVRUGHORVERUGHV
El atributo BORDER pone por defecto un borde de espesor igual a la unidad.

Pero se puede hacer que este borde sea tan grueso como queramos,
poniendo:
<TABLE BORDER=nmero deseado>
Ejemplo:
<TABLE BORDER=5>
&HOGDVGHFDEHFHUD
Adems de las celdas que contienen datos normales, podemos poner, si nos
conviene, celdas de cabecera (header), que se distinguen por estar el texto de
dichas celdas en negrita y centrado.
Esto se consigue con la etiqueta 7+! y 7+! (en vez de la normal <TD> y
</TD>)
Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera,

antes de las otras dos que ya existan:
<TR>
<TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH>
</TR>
Que resulta:
Ejemplo de filas desiguales
Columna 1
Columna 2
Columna 3
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en

los bordes., encabezando las columnas o las filas.
&RQWHQLGRGHODVFHOGDV
Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las
distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los
que van en un documento HTML, como imgenes, enlaces, etc. No hay ms
que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una
imagen, un enlace, etc.
Ejemplo con una imagen:
<TABLE BORDER=2>
<TR><TD><IMG SRC="logo.gif"></TD></TR>

</TABLE>
Ejemplo con un enlace:
<TABLE BORDER=2>
<TR><TD><A HREF="index.html">Pgina principal </A></TD></TR>
</TABLE>
3RVLFLRQDPLHQWRGHOFRQWHQLGRGHQWURGHODFHOGD
Normalmente, el contenido de una celda est alineado a la izquierda. Pero se

puede cambiar esto aadiendo dentro de la etiqueta de la celda los siguientes
atributos:
<TD ALIGN=CENTER> Al centro </TD>

<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH> (Recurdese que por
defecto estn centradas)
Al centro
A la derecha
Cabecera a la izquierda
El alineamiento por defecto en el sentido vertical es en el medio. Tambin se

puede cambiar, aadiendo dentro de la etiqueta de la celda los siguientes
atributos:
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>
Arriba
Abajo
9DULDQGRODVGLPHQVLRQHVGHODWDEOD
El navegador se encarga normalmente de dimensionar el tamao total de la

tabla de acuerdo con el nmero de filas, de columnas, por el contenido de las
celdas, espesor de los bordes, etc.
A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones
totales mayores que las que le corresponden, tanto en anchura como en
longitud. Esto se consigue aadiendo dentro de la etiqueta de la tabla los
atributos WIDTH y HEIGHT igual a un porcentaje de la dimensin de la
pantalla, o a una cifra que equivale al nmero de pxeles.
Por ejemplo, si en el ltimo ejemplo ponemos:
<TABLE WIDTH=60%>
Arriba
Abajo
O, si en ese mismo ejemplo, ponemos:

<TABLE HEIGHT=200>
Arriba
Abajo
&HOGDVTXHDEDUFDQDRWUDVYDULDV
A veces puede interesarnos que una celda se extienda sobre otras varias. Esto
&2/63$1=nmero para extenderse sobre un nmero determinado de

se consigue aadiendo dentro de la etiqueta de la celda los atributos
columnas, o 52:63$1=nmero para extenderse verticalmente sobre un

nmero determinado de filas.
Por ejemplo, en esta tabla vamos a aadir una fila con una sola celda, que
abarca a dos columnas:
<TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR>
Celda sobre 2 columnas

fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
fila2-celda3
O, en la misma tabla, vamos a aadir una celda en la primera fila. Pero que
abarque tambin a la siguiente:
<TD ROWSPAN=2> Celda junto a 2 filas </TD>
Celda junto a 2 filas

fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
fila2-celda3
&RORUGHIRQGRHQODVWDEODV
Podemos conseguir que las tablas tengan un color de fondo, siguiendo un

procedimiento totalmente anlogo al empleado para que una pgina tenga un
color de fondo uniforme. Para ello debemos utilizar el atributo
BGCOLOR="#RRGGBB", visto en dicho captulo.
Se puede conseguir:

1. Que la totalidad de la tabla tenga un color de fondo. Para ello,

colocamos el atributo dentro de la etiqueta TABLE. Por ejemplo, vamos
a hacer que la tabla tenga un fondo verde (#00FF00):
<TABLE BORDER BGCOLOR="#00FF00">

<TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR>
</TABLE>
2. Que solamente una celda determinada tenga un color de fondo. Para

ello, colocamos el atributo dentro de la etiqueta de la celda
correspondiente. Por ejemplo, vamos a hacer que slo la celda 1 de la
fila 1 tenga un color verde:
<TABLE BORDER>
<TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-
celda2</TD></TR>
</TABLE>
3. Que la generalidad de las celdas tenga un color, pero que alguna celda
tenga uno particular. El atributo del color general se coloca en la etiqueta
TABLE, y el del color particular en la etiqueta de la celda en cuestin
(una combinacin de los dos casos anteriores). por ejemplo, vamos a
hacer que la generalidad de la tabla sea de color rojo (#FF0000), pero
que la celda 1 de la fila 1 sea de color verde (#00FF00):
<TABLE BORDER BGCOLOR="#FF0000">

<TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-
celda2</TD></TR>
</TABLE>
,PiJHQHVGHIRQGRHQODVWDEODV
Utilizar el atributo BACKGROUND="imagen.gif" o BACKGROUND =

"imagen.jpg",
Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestin se

multiplicar detrs de todas las celdas.
Por ejemplo, si ponemos:
<TABLE BORDER BACKGROUND="nubes.jpg">

(Se omite el resto de las etiquetas de la tabla)
Si, por el contrario, slo se pone este atributo dentro de la etiqueta de una
celda concreta (<TD> o <TH>), entonces la imagen de fondo se ver slo en
esa celda, como por ejemplo:

6HSDUDFLyQHQWUHODVFHOGDVGHXQDWDEOD
Por defecto, la separacin entre las distintas celdas de una tabla es de dos
pxeles. Pero se puede variar esto con el atributo CELLSPACING, que se pone
dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separacin de 20 pixels entre celdas ponemos:
<TABLE BORDER CELLSPACING=20>

A primera vista parece como si esto fuera lo mismo que si hubiramos

aumentado el espesor de los bordes. Pero para comprobar que no es as,
hagamos que en el caso anterior, tenga adems unos bordes de 5 de espesor:
<TABLE BORDER=5 CELLSPACING=20>
6HSDUDFLyQHQWUHHOERUGH\HOFRQWHQLGRGHQWURGHODVFHOGDV
Por defecto, la separacin entre el borde y el contenido dentro de las celdas es

de un pxeles. Se puede cambiar esto con el atributo CELLPADDING, que se
pone dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separacin de 20 pxeles entre el contenido y

los bordes, dentro de cada celda:
<TABLE BORDER CELLPADDING=20>

Se puede combinar este atributo con CELLSPACING.

Por ejemplo, una tabla con bordes de 5 de espesor, separacin entre celdas de
15 y separacin del contenido con respecto a los bordes de las celdas de 20, lo
obtendramos con:
<TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20>

(MHPSORSUiFWLFR
Este ejemplo crea una tabla de dos filas, con una celda cada una. La primera,
como cabecera, con el texto "Un lugar ideal para mis vacaciones", y la segunda
con la imagen isla.gif. Adems vamos a alargar a lo ancho la tabla al 75% de la
pantalla.
<P> <TABLE BORDER=5 WIDTH=75%>
<TR> <TH> Un lugar ideal para mis vacaciones </TH> </TR>
<TR> <TD> <IMG SRC="isla.gif" ALT="isla"> </TD> </TR>
</TABLE>

)2508/$5,26
Un formulario consta de un conjunto de campos que se utilizan para reunir

informacin sobre la gente que visita un sitio Web. Los visitantes rellenan un
formulario escribiendo texto, haciendo clic en los botones de opcin, casillas de
verificacin y seleccionando opciones de los mens desplegables. Tras rellenar
el formulario, los visitantes envan los datos que han introducido que pueden
procesarse de varias formas en funcin del controlador de formulario definido.
Los formularios permiten que los dems nos enven la informacin

directamente a nosotros o bien a nuestro servidor, en donde hemos instalado
un programa que procese esta informacin.
Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los
usuarios pueden introducir sus nombres y direcciones de email y pulsar un
botn de envo. Esos datos los podemos recibir "en bruto" en nuestro correo,
con los que confeccionaramos manualmente dicha lista de correo, sin
necesitar ningn programa para ello.
La otra posibilidad, de la que nicamente se va a hacer esta mencin, es que

hubiramos instalado en nuestro servidor un programa especial para procesar
esos datos y aadirlos a la lista de correo, y que incluso pudiera devolver
formularios necesitan ejecutar programas o scripts por medio del &*,

automticamente al usuario algn tipo de informacin. Para conseguir esto, los
(Common Gateway Interface). El CGI permite a los formularios ser procesados

por programas escritos en cualquier lenguaje, aunque los ms usados en

Internet son el Perl y el C.
(VWUXFWXUDGHXQIRUPXODULR
La estructura general de un formulario es:
1. Etiqueta de inicio:
<FORM ACTION="mailto:direccin_de_email" METHOD="POST/GET"
ENCTYPE="TEXT/PLAIN">
2. Cuerpo del formulario, con los distintos elementos para poder introducir
los datos.
3. Botones de envo y de borrado.
4. Etiqueta de cierre </FORM>
(WLTXHWDGHLQLFLR
El atributo ACTION indica la accin que se debe efectuar y que es que los
datos sean enviados por email a la direccin indicada. (Si hiciramos uso del
CGI, sera precisamente aqu donde indicaramos su localizacin en el servidor,
que habitualmente es el directorio cgi-bin, para que procese los datos).
El atributo METHOD=POST/GET indica que los datos sean inmediatamente

enviados por correo a la direccin de email, mediante el botn de envo.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las

recibamos como un archivo de texto, perfectamente legible y sin codificar.
(OHPHQWRVSDUDLQWURGXFLUORVGDWRV
Los vamos a dividir en tres clases:
1. Introduccin por medio de texto

2. Introduccin por medio de mens
3. Introduccin por medio de botones
La introduccin de los datos se consigue por medio de la etiqueta:
<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
Donde:
xxx es la palabra que indica el tipo de introduccin.
yyy es el nombre que le asignamos nosotros a la variable de introduccin del
dato.
zzz es la palabra asociada a un elemento.
Todo esto, que de momento parece muy confuso, se aclarar al ir viendo los
distintos casos.
,QWURGXFFLyQSRUPHGLRGHWH[WRXQDOtQHD
En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE no

procede en este caso.
Ejemplo: solicitamos el apellido del usuario.
<FORM ACTION="mailto:direccin_de_email" METHOD="POST"

Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Si el usuario introduce su apellido, p. ej. Daz, y pulsa el botn de envo,

recibiremos un email suyo con el siguiente texto:
Apellido=Daz
incluyendo en la etiqueta el atributo 6,=(="nmero". Por otra parte, sea cual

La longitud de este formulario es por defecto de 20 caracteres. Se puede variar
sea la longitud del formulario, si no se indica nada, el usuario puede introducir
etiqueta el atributo 0$;/(1*7+="nmero".

el nmero de caracteres que quiera. Se puede limitar esto, incluyendo en la

Ejemplo:
<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Tambin se puede hacer que el texto introducido no sea reconocible, es decir

que todos los caracteres se representen por asteriscos. Basta con cambiar en
la etiqueta INPUT TYPE="text" por INPUT TYPE="password". En el ltimo
ejemplo, si cambiamos la etiqueta correspondiente por:
<INPUT TYPE="password" NAME="Clave" SIZE="10" MAXLENGTH="12">
,QWURGXFFLyQSRUPHGLRGHWH[WRP~OWLSOHVOtQHDV
Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un
comentario, es conveniente utilizar un formulario de texto de mltiples lneas.
Esto se consigue con la etiqueta de inicio:
<TEXTAREA NAME="yyy" ROWS="nmero" COLS="nmero">

Donde ROWS representa el nmero de filas, y COLS el de columnas). y la de
cierre: </TEXTAREA>
Ejemplo: un formulario solicitando los comentarios del usuario:

Introduce tus comentarios:

<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>
Una vez que el usuario haya escrito sus comentarios dentro del formulario, y
haya pulsado el botn de envo, recibiremos un email suyo con el siguiente
texto:
Comentarios=Bla bla bla...
,QWURGXFFLyQSRUPHGLRGHPHQ~V
Si queremos que el usuario, en vez de introducir un texto, como hemos visto en

los casos anteriores, escoja entre varias opciones que le presentamos
nosotros, haremos uso de un formulario en forma de men.
Se consigue con la etiqueta de inicio <SELECT NAME="yyy"> y la de cierre

</SELECT>.
Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>.

Ejemplo: Pedimos al usuario que elija su color preferido:

Cul es tu color preferido?

<BR><SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT >
</FORM>
Si el usuario ha escogido, p. ej. Azul y ha pulsado el botn de envo,

recibiremos un email suyo con el texto: ColorPreferido=Azul.
En el ejemplo anterior, slo es visible en el formulario una opcin. Si queremos
atributos 0/7,3/( 6,=(="nmero", donde especificamos el nmero de

que sean visibles mltiples opciones a la vez, aadimos en la etiqueta los
opciones visibles.
Si cambiamos en el ejemplo anterior la etiqueta correspondiente por:

<SELECT NAME="ColorPreferido" MULTIPLE SIZE="2">
Obtenemos:
)RUPXODULRGHFRQILUPDFLyQFKHFNER[
Si queremos que el usuario confirme una opcin determinada, podemos hacer

uso de un formulario de confirmacin, o checkbox, que se consigue con la
etiqueta:
<INPUT TYPE="checkbox" NAME="yyy">
Ejemplo: Solicitamos al usuario que confirme su inclusin en una lista de

correo:

<INPUT TYPE="checkbox" NAME="Lista">

S, deseo ser incluido en la lista de correo.
</FORM>
Si el usuario marca este formulario y pulsa el botn de envo, recibiremos un

email suyo con el texto: Lista=On.
no necesitar hacerlo), basta con aadir el atributo &+(&.(' dentro de la

Si queremos que el formulario aparezca inicialmente como marcado (el usuario
etiqueta. En el ejemplo anterior si sustituimos la etiqueta equivalente por:

<INPUT TYPE="checkbox" NAME="Lista" CHECKED>
%RWRQHVGHUDGLR
Cuando queremos que el usuario elija una nica opcin entre varias, podemos
hace uso de los botones de radio, que se consiguen con la etiqueta:
<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">
Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y

zzz es el nombre de cada una de las opciones en concreto.
Ejemplo: solicitamos al usuario que defina cul es su sistema operativo

preferido:

Cul es tu sistema operativo preferido?

<BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED>
Windows XP
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Linux"> Linux
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix
</FORM>
Obsrvese el atributo opcional CHECKED que se ha aadido en la primera

etiqueta. Esa ser la opcin que aparece marcada por defecto.
Obsrvese tambin que no es posible escoger ms de una opcin.
Si el usuario ha escogido la opcin Windows XP y pulsa el botn de envo,

recibiremos un email suyo con el texto: SistemaOperativo=Windows XP.
%RWRQHVGHHQYtR\GHERUUDGR
Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento
esencial en cualquier formulario, y es el botn de envo de los datos, que se
consigue con la etiqueta:
<INPUT TYPE="submit" VALUE="zzz">
En donde zzz es el texto que queremos que aparezca en el botn.
Vamos a aadirlo al primer ejemplo, en el que se solicitaba el apellido del

usuario:


Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>
Otro botn interesante es el de borrado de los datos introducidos, muy

conveniente en un formulario con muchos elementos. Es muy similar al de
envo, pues se consigue con la etiqueta:
<INPUT TYPE="reset" VALUE="zzz">
En donde zzz es el texto que queremos que aparezca en el botn.
Si aadimos al ejemplo anterior la etiqueta:
<P><INPUT TYPE="reset" VALUE="Borrar datos">
(MHPSORSUiFWLFR
Este ejemplo crea un libro de visitas.
<H2>Libro de visitas</H2>
<P><FORM ACTION="mailto:marcelovfp@msn.com" METHOD="POST"
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>

)5$0(6
Frames (en ingls, marcos o cuadros) es un procedimiento del lenguaje HTML

para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar
independientemente unas de otras, como si se trataran de pginas diferentes,
pues incluso cada una de ellas pueden tener sus propias barras deslizadoras.
Una de sus caractersticas ms importantes es que pulsando un enlace situado

en un frame, se puede cargar en otro frame una pgina determinada. Esto se
utiliza frecuentemente para tener un frame estrecho en la parte lateral (o
superior) con un ndice del contenido en forma de diferentes enlaces, que, al
ser pulsados cargan en la ventana principal las distintas pginas. De esta
manera se facilita la navegacin entre las pginas, pues aunque se vaya
pasando de unas a otras, siempre estar a la vista el ndice del conjunto.
'RFXPHQWRGHGHILQLFLyQGHORVIUDPHV
Lo primero que tenemos que hacer es crear un documento HTML en el que

definiremos cuntas zonas va a haber, qu distribucin y tamao van a tener, y
cul va ser el contenido de cada una de ellas.
En el ejemplo que vamos a desarrollar, la pgina va a tener dos frames

distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima
del otro, lo que sera una distribucin en filas).
Con respecto al tamao, haremos que el primero (el del izquierda) ocupe el
20% del ancho de la pantalla, y el otro, el 80% restante.
Con respecto al contenido, el frame de la izquierda va a contener un

documento HTML que va a servir de ndice de lo que veamos en el otro (y que
vamos a llamar mipagind.html), y el de la derecha otro documento HTML que
va a servir de pgina de presentacin (al que llamaremos mipagpre.html).
Todo lo anterior se refleja en el siguiente documento HTML:
<HTML>
<HEAD>
<TITLE>Mi pgina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
</FRAMESET>
</HTML>
Es un documento parecido a los que conocamos hasta ahora. La diferencia

est en que en vez de utilizar la etiqueta BODY, que sirve normalmente para
delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta
FRAMESET (definir los frames).

En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que

va a haber dos frames y que van a ir en columnas. Si hubiramos querido que
fueran en filas, habramos puesto ROWS (filas, en ingls). Tambin se define el
espacio en anchura que van a ocupar cada uno de ellos en la pantalla. Se ha
puesto como porcentajes del total, pero se podra tambin haber puesto una
cifra absoluta, que representara el nmero de pxeles a ocupar.
Ya se ha definido el nmero de frames, su distribucin y su tamao, pero falta

por definir el contenido de cada frame. Esto se hace con las etiquetas:
Con esto se define que el contenido del primer frame (el de la izquierda) sea el
documento HTML mipagind.html y el del segundo (el de la derecha) sea el
documento HTML mipagpre.html.
Obsrvese que en la etiqueta del segundo se ha incluido el atributo

NAME="principal", pero no as en el primero. El motivo es que se necesita dar
un nombre al segundo frame, pues, como veremos a continuacin, en el
documento del primer frame va a haber unos enlaces que van a ir dirigidos
hacia l. En este caso slo tenemos dos frames, pero podra haber ms, y es
necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no
va a haber enlaces en el segundo dirigidos hacia l.
A este documento le vamos a llamar mipagina.html, pero todava no lo vamos a

guardar, pues falta por aadir algo que veremos ms adelante.
'RFXPHQWRV+70/GHFDGDIUDPH
Necesitamos ahora confeccionar el documento HTML de cada uno de los

frames. Recurdese que son como pginas independientes, que pueden tener
cada una su propio fondo, etc., y todo lo que queramos aadir en ellos y que
hemos aprendido hasta ahora.
'RFXPHQWRGHOIUDPHGHODL]TXLHUGD
Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de

la derecha.
Adems, como muestra de que se puede aadir cualquier cosa en un frame,
vamos a incluir este logo animado (logo.gif):
<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY BGCOLOR="#FFBB00">
<P><A HREF="mipagpre.html" TARGET="principal"> Presentacin </A>
<P><A HREF="mipag13.html" TARGET="principal"> Mi pgina </A>
<P><IMG SRC="logo.gif">
</BODY>

</HTML>
Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el
atributo TARGET (en ingls: objetivo, destino), que sirve para hacer que al ser
activado el enlace no se cargue en el propio frame, sino en otro, precisamente
en el que hayamos llamado con ese nombre en el documento de definicin de
los frames.
En nuestro caso, le hemos dado el nombre de "principal" al frame de la

derecha, y es por tanto ah donde se van a cargar los documentos HTML.
Guardamos este documento con el nombre de mipagind.html. Adems,

capturamos la imagen logo.gif, y la guardamos junto con el documento.
'RFXPHQWRGHOIUDPHGHODGHUHFKD
Va a tener un fondo negro, y va a contener solamente un texto. En captulos

posteriores se irn aadiendo aqu ms cosas.
<HTML>
<HEAD>
<TITLE> Presentacin </TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#0000FF">
<CENTER>
<FONT SIZE=+3><STRONG>
<P>ESTA ES LA VERSION
<BR><FONT COLOR="#FF0000">CON FRAMES</FONT>
<BR>DE MI PAGINA
</STRONG>
</FONT>
</CENTER>
</BODY>
</HTML>
Guardamos este documento con el nombre de mipagpre.html
Alternativa para los navegadores que no soportan frames
Con lo visto anteriormente, ya tenemos las tres piezas que necesitamos:
Documento de definicin de los frames

Documento del contenido del primer frame
Documento del contenido del segundo frame
En teora no necesitamos nada ms. Slo queda un detalle: Qu ocurrira con

los navegadores que no soportan los frames? Pues que al desconocer las
etiquetas FRAMESET y FRAME del documento de definicin, no podra
ejecutarlo y no podra cargar la pgina.

Para estos casos est prevista la etiqueta <NOFRAMES> y </NOFRAMES>.

Se aaden al final del documento de definicin de los frames, y a se pone entre
ambas lo que queremos que vean los que acceden con un navegador que no
soporta frames. Puede incluso ser el cdigo HTML de una pgina completa (lo
que normalmente va entre las etiquetas <BODY> y </BODY>)
En nuestro caso, vamos a poner un mensaje advirtiendo de esta circunstancia,

y dirigiendo al usuario, con un enlace normal, hacia la pgina mipag13.html.
(Tambin podramos no decir nada sobre frames, y colocar aqu el cdigo de la
pgina de presentacin, pero aadiendo un enlace a mipag13.html, para que
se pueda pasar de pgina)
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> pgina</A>.
</NOFRAMES>
Lo incluimos dentro del documento de definicin de los frames, que hemos

visto antes, y que queda de esta manera:
<HTML>
<HEAD>
<TITLE>Mi pgina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> pgina</A>.
</NOFRAMES>
</HTML>
Ahora s podemos guardar este documento con el nombre de mipagina.html.
Se puede comprobar cmo cambiamos de pgina en el frame de la derecha,

segn el enlace que pulsemos en el frame de la izquierda.
Con este ejemplo prctico hemos aprendido la estructura bsica de los frames,
pero no hemos utilizado todas sus posibilidades. A continuacin se detallan los
distintos atributos que se pueden aadir a las etiquetas.
$WULEXWRVGHODHWLTXHWD)5$0(6(7!
La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la

distribucin, el nmero y tamao de los frames. Tiene dos atributos: COLS
(columnas) y ROWS (filas):
<FRAMESET COLS="xx, yy, zz, ..">

<FRAMESET ROWS="xx, yy, zz, ..">

Define la distribucin de los frames en columnas o en filas, segn se use uno u

otro atributo.
Define el nmero de frames que habr, pues, por ejemplo:

<FRAMESET COLS="xx, yy"> (habr dos frames en columnas)
<FRAMESET COLS="xx, yy, zz"> (habr tres frames en columnas)
Define el tamao de los frames, segn el valor que demos a xx, yy, zz.... Este
valor se puede expresar en:
8QSRUFHQWDMH del ancho del pantalla (para las columnas), o del alto de la
pantalla (para las filas). As, por ejemplo:
<FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupar el 20%
del ancho de la pantalla, y la de la derecha el 80% restante)
<FRAMESET ROWS="%10, %70, %20"> (la fila superior ocupar el 10% del
alto de la pantalla, la del medio el 70%, y la inferior el 20%)
8QQ~PHURDEVROXWR que representa el nmero de pxeles que ocupar cada
)5$0(6(7&2/6 ! (la columna de la izquierda tendr 40 pxeles

frame a lo ancho o a lo alto (segn sean filas o columnas). As, por ejemplo:
de ancho y la de la derecha 600). Pero es peligroso utilizar slo valores

absolutos, pues el tamao de la pantalla vara de un usuario a otro. Si se va a
usar algn valor absoluto para un frame, es mejor mezclarlo con alguno
relativo, como los que vamos a ver a continuacin, para que se ajuste el total a
la pantalla del usuario
8Q YDORU UHODWLYR que se consigue poniendo un asterisco (*), en vez de un

nmero.
Esto se interpreta como que ese frame debe tener el espacio restante. Por
)5$0(6(752:6 ! (Habr tres filas, la superior y la inferior de

ejemplo:
una altura fija de 100 pixels, y la del medio obtendr el espacio restante).
Si hay ms de un frame con asterisco, ese espacio restante se dividir por igual
entre ellos.
Si hay un nmero antes del asterisco, ese frame obtiene esa cantidad ms de
espacio relativo. As "2*,*" dara dos tercios para el primer frame y un tercio
para el otro.
)UDPHVVLQERUGHV
Si se desea que no haya un borde de separacin entre los frames, se deben
incluir el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No
todas las versiones de los navegadores lo implementan.
Para que tambin desaparezcan los huecos de separacin entre frames hay
que aadir otros dos atributos (el primero es para el Explorer y el segundo para
el Netscape): FRAMESPACING=0 y BORDER=0 con lo que la etiqueta
completa quedara:

<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0

COLS="xx, yy">
$WULEXWRVGHODHWLTXHWD)5$0(!
Esta etiqueta define las cararactersticas de un frame concreto, no del conjunto

de los frames, como era el caso con la etiqueta <FRAMESET>. Puede tener los
siguientes posibles atributos, que van dentro de la etiqueta <FRAME>:
65& GLUHFFLyQ Esta direccin puede ser la de un documento HTML (tal

como hemos utilizado en el ejemplo), o cualquier otro recurso del Web (o URL).
Con este atributo se indica lo que se cargar inicialmente en el frame.
Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame
aparecer inicialmente vaco, aunque tendr las dimensiones asignadas.
1$0( QRPEUHBGHBODBYHQWDQD Este atributo se usa para asignar un

nombre a un frame.
De esta manera se podr "dar en el blanco" (en ingls, target) en esta pgina,
desde un enlace situado en otra pgina. Es decir, que pulsando en otra pgina
un enlace, se cargar precisamente en sta.
El atributo NAME es opcional. Por defecto, todas las ventanas carecen de
nombre. Los nombres que se escojan deben comenzar por un carcter
0$5*,1:,'7+ Q~PHUR Se utiliza este atributo cuando se quiere controlar

alfanumrico (una letra o un nmero, pero no otro tipo de smbolo)
la el ancho de los mrgenes dentro de un frame. El nmero que se ponga

representa los pxeles de los mrgenes. Este atributo es opcional.
0$5*,1+(,*+7 Q~PHUR Igual que el anterior, pero referido a los

mrgenes en altura.
6&52//,1* \HV_QR_DXWR Este atributo se utiliza para decidir si el frame

tendr o no una barra deslizadora. Si se escoje "yes" tendr siempre una barra
deslizadora. Si se escoje "no" no la tendr nunca, y si se escoje "auto", ser el
navegador quien decida si la tendr o no. Este atributo es opcional. Su valor
por defecto es "auto".
125(6,=(. A este atributo no se le asigna un valor numrico, como a los

dems. Es un indicador para que la ventana no se pueda re-dimensionar (en
ingls, resize) por parte del usuario. Se puede comprobar en el ejemplo con
frames que si se coloca el cursor del ratn entre los dos frames, al pulsarlo y
arrastrarlo en un sentido u otro, varan las dimensiones prefijadas de los
frames. Este atributo impide que ocurra esto en un frame. Es un atributo
opcional. Por defecto, todos los frames son re-dimensionables.
)5$0(%25'(5 QR Este atributo elimina el borde en un frame, pero si se

quiere que se elimine completamente, tambin hay que ponrselo al frame
contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar
en la etiqueta FRAMESET, como hemos visto anteriormente.

(ODWULEXWR7$5*(7
En el ejemplo hemos visto que, como queramos que los enlaces situados en el
frame de la izquierda surtieran efecto no en l mismo, sino en otro frame,
tenamos que poner dentro de cada enlace el atributo TARGET="principal",
siendo "principal" el nombre que habamos dado al segundo frame, en el
documento de definicin de frames. Es decir, hemos utilizado este atributo de
esta manera:
TARGET="nombre_dado_a_otro_frame".
Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero con
la condicin que el primer carcter sea alfanumrico (letra o nmero).
Pero hay unos nombres reservados (es decir, que no se pueden usar para
denominar a un frame), que hacen que este atributo efecte unas funciones
palabras reservadas (EODQN, VHOI y WRS) en minsculas.

especiales. Para que cumplan su cometido, es imprescindible escribir estas
7$5*(7 BEODQN Hace que se abra una nueva copia del navegador, y el
enlace activado se carga en ella, a pantalla completa. Es decir, tendramos dos
copias del navegador (Netscape, Explorer, etc.) funcionando a la vez.
7$5*(7 BVHOI Hace que el enlace se cargue en el propio frame.
7$5*(7 BWRS Hace que el enlace se cargue a pantalla completa,

suprimiendo todos los frames, pero sin que se cargue una nueva copia del
navegador. Este es particularmente til. Un error muy comn es olvidarse de
poner este atributo en los enlaces que estn en un frame, con lo que resulta
que al ser activados, la pgina llamada se carga dentro del propio frame, lo
cual es muy molesto si esa pgina pertenece a otro sitio del Web, y an ms
grave si esa pgina tiene a su vez frames. Este inconveniente se evita
poniendo este atributo dentro de las etiquetas de los enlaces.
)UDPHVDQLGDGRVGHQWURGHRWURVIUDPHV
Hasta ahora hemos contemplado slo la posibilidad de tener una distribucin
de los frames bien en filas o bien en columnas, (dependiendo que se utilice el
atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez.
Se pueden obtener distribuciones ms complejas anidando filas dentro de una
columna, o a la inversa, columnas dentro de una fila.
Supongamos que queremos la siguiente distribucin:

Un frame estrecho en horizontal en la parte superior, de lado a lado de la
pantalla (altura, el 15%)
Otro frame estrecho en vertical en la parte izquierda, debajo del anterior
(anchura, el 20%)
Un tercero ocupando el resto de la pantalla.
Este esquema equivale a la siguiente distribucin:

Dos filas. La superior ocupa el 15% y la inferior el resto.

La fila inferior est a su vez dividida en dos columnas. La primera (la de la

izquierda) ocupa el 20% y la otra, el resto.
El documento de definicin de las dos filas (olvidmonos de momento

que la de abajo est subdividida), sera:
<HTML>
<HEAD>
<TITLE>Pgina con dos filas</TITLE>
</HEAD>
<FRAMESET ROWS="15%, *">
<FRAME SRC="documento_fila_superior">
<FRAME SRC="documento_fila_inferior">
</FRAMESET>
</HTML>
Como la fila inferior, en realidad, son dos columnas (con una distribucin del
20% y resto), sustituimos (anidando) la etiqueta <FRAME SRC=
"documento_fila_inferior"> por:
<FRAMESET COLS="20%, *">
<FRAME SRC="documento_columna_izqda">
<FRAME SRC="documento_columna_dcha">
</FRAMESET>
El documento definitivo ser as:
<HTML>
<HEAD>
<TITLE>Pagina con fila superior y dos columnas inferiores</TITLE>
</HEAD>
<FRAMESET ROWS="15%, *">
<FRAME SRC="documento_fila_superior">
<FRAMESET COLS="20%, *">
<FRAME SRC="documento_columna_izqda">
<FRAME SRC="documento_columna_dcha">
</FRAMESET>
</FRAMESET>

</HTML>

621,'26
Una pgina del Web puede tener sonidos incorporados, bien sea como un
fondo sonoro que se ejecuta automticamente al cargar la pgina, o como una
opcin para que la active el propio usuario.
&DSDFLGDGHVVRQRUDVGHORVQDYHJDGRUHV
Para poder escuchar los sonidos es necesario disponer, como es lgico, de

una tarjeta de sonido con sus correspondientes parlantes. Pero esto no es
suficiente, pues no todos los programas navegadores estn capacitados en la
misma medida.
)RQGRVRQRURSDUDHO0LFURVRIW,QWHUQHW([SORUHU
<BGSOUND SRC="archivo_de_sonido" LOOP=n>
El archivo de sonido puede estar en formato .mid o .wav.
El atributo /223 (en ingls, lazo) sirve para especificar el nmero (n) de veces
que se debe ejecutar el archivo de sonido. Si se escoge el nmero n=-1 o se
pone LOOP=infinite, el sonido se ejecutar indefinidamente. Se puede omitir
este atributo, y entonces el archivo se ejecutar una sola vez.
(MHPSOR
La etiqueta para que se ejecute el archivo musica.mid dos veces en el Explorer

es:
<BGSOUND SRC="musica.mid" LOOP=2>
)RQGRVRQRURSDUDHO1HWVFDSH
<EMBED SRC="archivo_de_sonido" WIDTH=xxx HEIGHT=yy>
Donde :,'7+ es la anchura y +(,*+7 la altura de una consola que aparece, y

que tiene diferentes teclas (play, stop, pausa, etc.).
Dentro de la etiqueta se pueden aadir los siguientes atributos opcionales:
$87267$57="true" (arranca automticamente)

/223="true" (se ejecuta ininterrumpidamente)
(MHPSOR
Vamos a ver una etiqueta para que aparezca en el Netscape una consola con
sus teclas. Pulsando la tecla play se ejecutar el archivo musica.mid.
<EMBED SRC="musica.mid" WIDTH=200 HEIGHT=55>

(MHPSOR
Vamos a crear una etiqueta para el Netscape, en la que la consola sea invisible
y el archivo se ejecute automticamente al cargar la pgina.
Para conseguir que la consola sea invisible hay que aadirle el atributo
HIDDEN="true".
<EMBED SRC="musica.mid" HIDDEN="true">
)RQGRVRQRURFRPELQDGRSDUDHO([SORUHU\HO1HWVFDSH
Se pueden combinar los dos tipos distintos de etiquetas para conseguir que un
fondo sonoro sea escuchado por usuarios que utilicen tanto el Explorer como el
Netscape (siempre que ste ltimo est preparado para ello). En este caso, el
Explorer ignorar la etiqueta del Netscape, y a la inversa.
(MHPSOR
Vamos a ver las dos etiquetas necesarias para que se ejecute el archivo
musica.mid como sonido de fondo, tanto por el Explorer como por el Netscape
(lo har una sola vez):
<BGSOUND SRC="musica.mid">
<EMBED SRC="musica.mid" HIDDEN="true">
(MHPSOR
Ahora vamos a las etiquetas para que el archivo musica.mid se ejecute como
sonido de fondo, tanto por el Explorer como por el Netscape y que se ejecute
indefinidamente.
A la etiqueta del Explorer basta con aadirle el atributo LOOP=infinite, como se

ha visto anteriormente.
Y con respecto a la etiqueta del Netscape, tericamente debera tambin bastar

aadirle el atributo LOOP="true", pero curiosamente esto no es as, porque hay
que poner las dimensiones de la consola (que no se va a ver).
Las dos etiquetas quedan de esta manera:
<BGSOUND SRC="musica.mid" LOOP=infinite>

<EMBED SRC="musica.mid" WIDTH=200 HEIGHT=55 AUTOSTART="true"
LOOP="true" HIDDEN="true">
$FWLYDFLyQGHOVRQLGRSRUHOSURSLRXVXDULR
Existe una opcin que es la de poner un enlace a un archivo de sonido, de tal

manera, que al pulsarlo se ejecute el archivo.

Por ejemplo, vamos a poner un enlace al archivo musica.mid:
Escucha esta <A HREF="musica.mid">msica</A>
Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el

sonido. Esto es vlido para todos los navegadores, incluso las versiones ms
antiguas, con la nica condicin de que se haya configurado un programa
auxiliar capaz de ejecutar archivos .mid o .wav.
(MHPSOR
Vamos a hacer un enlace con el icono sound1.gif al archivo de sonido

musica.wav:
<A HREF="musica.wav"><IMG SRC="parlantes.gif"></A>

7(;72(1029,0,(172
Existen distintas soluciones para conseguir texto en movimiento: haciendo uso

del lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc.
0DUTXHVLQDV
Una marquesina (en ingls, marquee) es una ventana en la que se desplaza un

texto. Slo son vlidas para el Explorer de Microsoft (en el Netscape se ver
como texto fijo).
La etiqueta bsica es:
0$548((!7H[WRTXHVHGHVSOD]D0$548((!
Como no hemos aadido ningn atributo dentro de la etiqueta, el

comportamiento de la marquesina es el que tiene por defecto: ocupa todo el
ancho de la pantalla, tiene la altura de una lnea y el texto se desplaza
lentamente de derecha a izquierda.
$WULEXWRV
:,'+7+(,*+7
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser
igual a un nmero de pxeles, o a un porcentaje de la pantalla. Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del

ancho de la pantalla y tiene una altura de 60 pxeles </MARQUEE>
$/,*1
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser
TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "Hola!"

estar alineada con la parte inferior de la marquesina</MARQUEE> Hola!
%(+$9,25
Este atributo (que quiere decir en ingls comportamiento) sirve para definir de
qu manera se va a efectuar el desplazamiento del texto. Si es igual a SCROLL
(el valor por defecto), el texto aparece por un lado, se desplaza hasta el otro
hasta desaparecer por l, y vuelve a empezar (como los casos que hemos visto
anteriormente). Si es igual a SLIDE, aparece por un lado y se desplaza hasta
llegar al otro extremo, y se para ah. Si es igual a ALTERNATE se desplaza
alternativamente hacia un lado y otro, siempre dentro de los lmites de la
marquesina. Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro,
sin desaparecer</MARQUEE>
%*&2/25
Con este atributo se modifica el color de fondo de la marquesina.

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color

rosa

</MARQUEE>
',5(&7,21
Este atributo sirve para modificar la direccin hacia la que se dirige el texto. Por
defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la
derecha igualando este atributo a RIGHT. Ejemplo:
<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha

</MARQUEE>
6&52//$02817
Define la cantidad de desplazamiento del texto en cada movimiento de avance,
expresado en pxeles. Cuanto mayor es el nmero, ms rpido avanza.
Ejemplo:
<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
6&52//'(/$<
Define el tiempo entre cada movimiento de avance, expresado en
milisegundos. Cuanto mayor es el nmero ms lento avanza. Ejemplo:
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto

</MARQUEE>
/223
Especifica el nmero de veces que aparecer el texto. Es indefinido por
defecto.
+63$&(963$&(
Definen, respectivamente, la separacin en sentido horizontal o vertical del
texto que est fuera de la marquesina.
Como se ha dicho antes, esta etiqueta no es implementada por el Netscape. El

texto que est dentro de la etiqueta de la marquesina se ver en este
navegador como texto fijo normal.
Normalmente, si se hace uso de este recurso es porque se quiere destacar de

una manera muy especial un texto, logrndose plenamente este objetivo en el
Explorer, pero no as en el Netscape, en donde dicho texto pasara totalmente
desapercibido. Una manera de paliar este inconveniente, al menos en parte, es
introducir la etiqueta de la marquesina dentro de una tabla. De esta manera, el
texto estar en cierta medida destacado en el Netscape, y en el Explorer la
marquesina se ver de una manera an ms esttica. Ejemplo:
<TABLE BORDER=1>
<TR><TD>
<MARQUEE> Marquesina dentro de una tabla </MARQUEE>
</TD></TR>
</TABLE>

+2-$6'((67,/2(1&$6&$'$
Las hojas de estilo representan un gran avance con respecto a cmo los
diseadores de pginas Web pueden aumentar grandemente su capacidad de
mejorar la apariencia de sus pginas.
En su origen el Web fue concebido en un entorno cientfico, como un medio de

intercambio de documentacin, en el que lo esencial era el contenido, siendo la
presentacin algo completamente accesorio. Pero a medida que el Web era
descubierto por toda clase personas como un fantstico medio de difusin, las
limitaciones del HTML con respecto al control sobre la presentacin se
convirtieron en una fuente continua de frustraciones.
Los nuevos diseadores de pginas Web estaban acostumbrados a los medios

tradicionales sobre papel, en los que tenan un control total sobre la apariencia.
Han ido aprendiendo a utilizar diversos trucos para suplir las limitaciones
estilsticas del HTML. Pero aunque su intencin ha sido buena - mejorar la
presentacin de las pginas - las tcnicas empleadas han tenido unos efectos
secundarios a menudo desafortunados. Estas tcnicas o trucos suelen
funcionar para algunas personas, algunas veces, pero nunca para todas las
personas y en todos los casos.
Varios ejemplos de estas tcnicas son:
Utilizacin de etiquetas no estndar, inventadas por los creadores de

algunos navegadores (como Netscape o Explorer).
Convertir el texto en imagen.
Usar imgenes transparentes para crear espacios en blanco.
Uso de tablas para forzar determinadas presentaciones.
Utilizar programas o lenguajes ajenos al HTML para conseguir
determinados fines, etc.
Estas tcnicas aumentan considerablemente la complejidad de las pginas del

Web, tienen una flexibilidad limitada, y sobre todo, provocan problemas al ser
utilizados por distintos navegadores o plataformas.
Las hojas de estilo devuelven la facilidad de controlar la presentacin y

sobrepasan la limitada gama de mecanismos de presentacin que se han ido
aadiendo al HTML durante estos ltimos aos. Por ejemplo, con ellas es fcil
determinar el espacio entre las lneas de texto, el tipo y tamao de las fuentes,
el grosor de los mrgenes, los colores usados para el texto o el fondo, as
como el formateo a voluntad de cualquier etiqueta.
Adems hay otro aspecto muy interesante de las hojas de estilo, y es que
separan por completo la informacin para la presentacin de una pgina de su
contenido, con lo que se facilita mucho el diseo y revisin de las pginas,
pues se puede variar la presentacin de una pgina, o de todo el conjunto de
ellas, sin cambiar una sola lnea del cdigo del HTML.

Las hojas de estilo en cascada nos permiten redefinir las reglas que utiliza el
navegador para presentar una pgina Web.
Hay tres maneras de aadir estilos a nuestras pginas Web.
1. Aadiendo instrucciones de estilo slo a etiquetas concretas, o a un

grupo de ellas.
2. Incluyendo las instrucciones de estilo en el documento HTML de una
pgina concreta - de una manera anloga a cmo se incluye un script de
Javascript. Esto permite cambiar la apariencia de una hoja entera,
cambiando unas pocas lneas.
3. Enlazando los documentos HTML de todas las pginas que componen
un sitio del Web con un archivo de definicin del estilo. De esta manera,
se puede cambiar la apariencia de mltiples pginas retocando un solo
archivo.
$SOLFDFLyQ
1. (VWLORSDUDHWLTXHWDVFRQFUHWDVRJUXSRVGHHWLTXHWDV
Este mtodo es el apropiado si slo se desea cambiar el estilo en unas

secciones determinadas de una pgina. Con l podemos manipular las
propiedades de alguna etiqueta o de algn grupo de etiquetas.
Se hace aadiendo el atributo 67</(, que contiene una serie de

propiedades, dentro de la etiqueta correspondiente.
(MHPSOR
3!
"Este es un prrafo normal, sin mrgenes a la izquierda ni a la derecha,
con el color de su texto en negro".
367</( PDUJLQOHIWLQPDUJLQULJKWLQFRORUJUHHQ!

Este prrafo tendr un margen izquierdo de media pulgada, al igual que
el margen derecho y el color del texto verde".
Obsrvese la sintaxis del atributo STYLE. Se ponen entre comillas una

serie de propiedades (por ejemplo, margin-left), y despus de dos
puntos se pone el valor de esa propiedad (en este caso, 0.5in o sea, 0.5
pulgadas). Las distintas propiedades debern estar separadas por punto
y coma.
un conjunto de etiquetas), se puede utilizar la etiqueta ',9! con la que

Si queremos cambiar la apariencia de una seccin entera (que agrupe
definimos el estilo globalmente para esa seccin.
(MHPSOR

En el siguiente ejemplo cambiamos el color (a rojo) y el tamao de la

fuente (a 16 puntos de altura) de un bloque de etiquetas por medio de la
etiqueta <DIV>, lo que tiene el mismo efecto que si hubiramos asignado
este estilo separadamente a cada una de las etiquetas englobadas
(<P>, <UL> y <LI>):
<DIV STYLE="font-size: 16pt; color: red">

<P>La definicin del estilo (rojo y 16 puntos), afecta a todo el bloque de
etiquetas.
<P>Este texto tambin es rojo y tiene 16 puntos de altura.
<P>Al igual que esta lnea.
</DIV>
Hay otra etiqueta, <SPAN>, que tiene una misin parecida a <DIV>, pero
que se usa para cambiar elementos ms pequeos (por ejemplo,
palabras o incluso letras), en lugar de bloques enteros. Por ejemplo:
3!
En este prrafo slamente queremos atribuir un estilo a esta <SPAN
STYLE="font-family: courier;font-size: 15pt;color:
fuchsia">palabra</SPAN>, que queremos que su fuente sea
courier, de 15 puntos de altura y de color fucsia.
2. ,QFOXVLyQJOREDOGHOHVWLORHQXQGRFXPHQWR+70/
67</(!67</(!, que deber estar colocado dentro de la cabecera

Se hace poniendo un bloque de instrucciones dentro de las etiquetas
del documento, despus del ttulo, entre las etiquetas </TITLE> y

</HEAD> (de igual manera que se hace con los scripts de Javascript).
Esta etiqueta <STYLE> tiene un atributo, TYPE, que especifica el tipo de

medio en que va a ser publicado en Internet, en nuestro caso ser
"text/css" (que permitir a los navegadores que no soporten este tipo el
ignorar la hoja de estilo). Es decir, la etiqueta queda de esta manera:
<STYLE TYPE="text/css">
Por tanto, la estructura ser la siguiente:
<HTML>
<HEAD>
<TITLE> </TITLE>
[bloque de instruciones de estilo]
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las etiquetas que componen la pgina]
</BODY>
</HTML>

(MHPSOR
BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left:
0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>
En este ejemplo, se ponen las distintas etiquetas a las que se quiere

atribuir un estilo (en este caso BODY, H1, H2 y DIV, pero podran haber
sido otras cualesquiera); a continuacin del nombre de cada etiqueta, y
englobadas por los signos "{" y "}" van las distintas propiedades con
sus respectivos valores, separadas unas de otras por un punto y coma.
Si se coloca este bloque en la cabecera del documento HTML, donde se

ha indicado antes, veremos que cada vez que se usa una de las
etiquetas que tienen una definicin de estilo, no se comportar de la
forma habitual, sino tal como la hemos definido. El resto de las etiquetas,
que no estn incluidas en el bloque de definicin del estilo, se
comportarn de la forma habitual. Puede comprobarse lo dicho, viendo
una pgina a la que se le ha aplicado el estilo del ejemplo anterior.
3. (QOD]DQGRGLVWLQWRVGRFXPHQWRVDXQDKRMDGHHVWLOR
Si nuestro sitio del Web est compuesto por muchas pginas, y

queremos darles un estilo uniforme a unas cuantas, en vez de incluir un
bloque de definicin de estilo repetido en cada una de ellas (como se ha
visto en la seccin anterior), se puede establecer un enlace a un
archivo de texto que contiene el bloque de definicin del estilo.
Supongamos que queremos aplicar a unas cuantas pginas el estilo

visto en el ejemplo anterior. Tendramos que crear un archivo de texto
como este:
BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left:

0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
Obsrvese que no tiene ninguna etiqueta, pues no es un documento

normal HTML, sino que es un archivo de texto que slo contiene el
bloque de definicin del estilo.
Se guarda con el nombre que se quiera, pero tiene que tener

necesariamente la extensin .FVV Supongamos que lo guardamos con el
nombre de miestilo.css

En todas las pginas que queremos que tengan este estilo concreto,
solamente deberemos de aadir (en el mismo sitio de la cabecera que
para el caso anterior, es decir entre </TITLE> y </HEAD>, la siguiente
etiqueta:
/,1.5(/ VW\OHVKHHW+5() PLHVWLORFVV7<3( WH[WFVV!
Aqu se ha supuesto que el archivo miestilo.css se ha dejado en el

mismo directorio donde estn los documentos HTML. Si no es as, es
decir, si est en otro subdirectorio en el servidor, habra que indicar la
ruta (por, ejemplo: HREF="subdirectorio/miestilo.css").
$WULEXWRVJHQHUDOHV
A continuacin se muestra en una tabla el resumen de los atributos que se

pueden incluir en las hojas de estilo.
AtributoDescripcinValoresEjemplofont-sizeEstablece el tamao de texto.

puntos (pt)
pulgadas (in)
centmetros (cm)
pixels (px){font-size: 12pt}font-familyEstablece la fuente. nombre de la fuente
nombre de la familia de la fuente{font-family: courier}font-weightEstablece el
espesor de la fuente. extra-light
light
demi-light
medium
demi-bold
bold
extra-bold{font-weight: bold}font-styleConvierte el texto a cursiva. normal
italic{font-style: italic}line-heightEstablece la distancia entre lneas. puntos (pt)
pulgadas (in)
centmetros (cm)
pixels (px)
porcentaje (%){line-height: 24pt}colorEstablece el color del texto. nombre del
color
valores RGB{color: blue}text-decorationSubraya o remarca el texto. none
underline
italic
line-through{text-decoration: underline}margin-leftEstablece el mrgen izquierdo
de la pgina. puntos (pt)
pulgadas (in)
centmetros (cm)
pixels (px){margin-left: 1in}margin-rightEstablece el mrgen derecho de la
pgina. puntos (pt)
pulgadas (in)
centmetros (cm)

pixels (px){margin-right: 1in}margin-topEstablece el mrgen superior de la

pgina. puntos (pt)
pulgadas (in)
centmetross (cm)
pixels (px)*{margin-top: -20px}text-alignEstablece la justificacin del texto. left
center
right{text-align: right}text-indentEstablece la indentacin del texto. puntos (pt)
pulgadas (in)
centmetros (cm)
pixels (px){text-indent: 0.5in}backgroundEstablece la imagen o el color del
fondo. URL,
nombre del color
valor RGB{background: #33CC00}
([SOLFDFLyQGHORVDWULEXWRV
IRQWVL]H
El atributo font-size establece el tamao del texto en puntos (pt), pulgadas (in),
centmetros (cm), o pixels (px). Ejemplos:
{font-size: 12pt}
{font-size: 1in}
{font-size: 5cm}
{font-size: 24px}
IRQWIDPLO\
el atributo font-family establece la fuente del texto. Se puede especificar una

nica fuente, como por ejemplo:
{font-family: Arial}
u otras fuentes alternativas, separadas por una coma, como por ejemplo:
{font-family: Arial, Helvetica}
En el ejemplo anterior, nos aseguramos que los sistemas que no soporten la

fuente Arial, uticen la fuente Helvetica. Es muy aconsejable especificar, como
timo recurso, un nombre genrico de familia de fuentes. Ejemplo:
{font-family: Arial, Helvetica, sans-serif}
Estos nombres genricos de familia de fuentes (serif, sans-serif, cursive,

fantasy, o monospace) tienen la ventaja de que son representados como las
fuentes que tenga instaladas el usuario.
Si se hace referencia a una fuente cuyo nombre consiste en varias palabras

(separadas por espacios en blanco), hay que englobarla entre comillas.
Ejemplo:

{font-family: "Courier New"}
IRQWZHLJKW
El atributo font-weight establece el espesor de la fuente:
{font-weight: medium}
{font-weight: bold}
Los valores aceptados (extra-light, light, demi-light, medium, demi-bold, bold, y

extra-bold) dependen en las fuentes que tenga instaladas el usuario. (Por
ejemplo, el sistema del usuario puede que slo permita medium y bold para
una determinada fuente).
IRQWVW\OH
El atributo font-style establece la fuente como cursiva:
{font-style: italic}
OLQHKHLJKW
Este atributo establece la separacin entre lneas, que se puede expresar en

puntos (pt), pulgadas (in), centmetros (cm), pixels (px) o porcentaje (%).
Ejemplo:
{line-height: 20pt}
Tambin se puede expresar como un porcentaje del valor por defecto:
{line-height: 150%}
FRORU
Este atributo establece el color del texto de acuerdo con su valor hexadecimal o
usando los nombres de colores:
{color: #33CC00}
{color: red}
Los nombres de los colores son los siguientes:
<Picture><Picture><Picture><Picture>blacksilvergraywhite<Picture><Picture><
Picture><Picture>maroonredpurplefuchsia<Picture><Picture><Picture><Picture
>greenlimeoliveyellow<Picture><Picture><Picture><Picture>navybluetealaqua
WH[WGHFRUDWLRQ

Este atributo permite remarcar el texto. Los valores soportados son underline
(subrayado), line-through (tachado), none (ninguno) e italic (cursiva). Ejemplos:
{text-decoration: underline}
{text-decoration: line-through}
PDUJLQOHIWPDUJLQULJKW\PDUJLQWRS
Estos atributos establecen los mrgenes (izquierdo, derecho y superior

respectivamente) en el mbito de una etiqueta. Se pueden especificar los
mrgenes en puntos, pulgadas (inches), centmetros o pixels. Por ejemplo:
BODY {margin-left: 0.5in;

margin-right: 0.5in;
margin-top: 1in}
Se pueden usar valores negativos. Entonces, en vez de contraerse el margen,

se extender en la direccin opuesta.
WH[WDOLJQ
Este atributo permite justificar los elementos HTML a la izquierda, al centro o a

la derecha. Ejemplos:
{text-align: left}
{text-align: center}
{text-align: right}
WH[WLQGHQW
Adems de establecer los mrgenes, se puede provocar una indentacin del

texto (es decir, que la primera palabra del prrafo se desplace una cantidad
deseada). Se puede expresar en puntos, pulgadas, centmetros o pixels. Por
ejemplo:
P {text-indent: 0.5cm}
Hace que los prrafos que se crean con la etiqueta <P>, empiecen con su
primera lnea indentada 0.5 centmetros.
Se pueden usar valores negativos, que sacan el texto hacia los mrgenes.
EDFNJURXQG
Se utiliza este atributo para destacar secciones de una pgina, estableciendo

un color de fondo o una imagen de fondo.
Para establecer un color de fondo, se especifica su valor hexadecimal o un

nombre de color.

(MHPSORV
{background: red}
{background: #6633FF}
Tambin se puede colocar una imagen de fondo en el mbito de la etiqueta. Es

decir, se puede poner, por ejemplo, una imagen de fondo en un prrafo
determinado.
Para colocar una imagen, se especifica el URL entre parntesis (no entre
comillas, como es lo habitual). Por ejemplo:
{background: URL(http://www.mirandaconsultoresperu.com/docs/nubes.jpg)}
En este caso se ha puesto el URL absoluto, es decir, la referencia completa en

el servidor. Pero es ms conveniente hacerlo de forma relativa, es decir con
respecto al documento HTML. Si el archivo de imagen y el documento HTML
estn en el mismo directorio, no hay que poner ningn URL, sino el nombre del
archivo de imagen directamente. En el ejemplo anterior sera:
{background: URL(nubes.jpg)}
(MHPSOR
Poner esta imagen de fondo a un prrafo, utilizando el mtodo de incluir el

estilo en la etiqueta <P>:
<P STYLE="background: URL(nubes.jpg)"> Este prrafo tiene un fondo con

imgenes, al igual que con el HTML convencional se consigue para toda una
pgina, pero en este caso est limitado al mbito de esta etiqueta.
6XJHUHQFLDV
$JUXSDQGRGLVWLQWRVDWULEXWRV
Supongamos que se quieren atribuir los mismos atributos a diferentes

etiquetas, como por ejemplo:
H1 {font-size: 15pt;
font-weight: bold;
color: maroon}
font-weight: bold;
color: maroon}
font-weight: bold;
color: maroon}
Se pueden agrupar de esta manera:

H1, H2, H3 {font-size: 15pt;

font-weight: bold;
color: maroon}
$JUXSDFLyQGHORVDWULEXWRVGHOWH[WR
Se pueden simplificar agrupndolos de una manera determinada. As, por

ejemplo, en lugar de:
P {font-weight: bold;
font-style: italic;
font-size: 12pt;
line-height: 20pt;
font-family: Times, serif; }
Se pueden agrupar en un nico atributo llamado font:
P {font: bold italic 12pt/20pt Times, serif}
El orden de los atributos es significativo. Los atributos font-wight y font-style se

deben especificar antes que los dems.
$JUXSDFLyQGHORVDWULEXWRVGHORVPiUJHQHV
Tambin se pueden agrupar los tres distintos atributos para los mrgenes
(superior, derecho e izquierdo) en un nico atributo llamado margin. As, por
ejemplo, en lugar de:
BODY {margin-top: 20px;

margin-right: -10px;
margin-left: -10px}
Se puede poner:
BODY {margin: 20px -10px-10px}

El orden de colocacin es significativo. Debe ser: superior (top), derecho (right)
e izquierdo (left). Si se pone un nico valor, ser aplicado a los tres mrgenes.
9DULDFLRQHVSRUPHGLRGHFODVHV
Uno de los mtodos era la inclusin global del estilo, en el que se definan los
estilos de un bloque de distintas etiquetas, mediante el ejemplo:
BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in;
margin-right: 0.5in}
H1 {background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
</STYLE>

Como se puede ver, se define para la etiqueta H2, por ejemplo, que su texto
sea de color rojo (red). Pero esto hace que, obligatoriamente, todas las
cabeceras de nivel H2 sean de este color en toda la pgina.
Pero nos podra interesar, por el motivo que sea, que unas veces tenga el color
rojo y otras veces sea de otros colores. Para conseguirlo, se pueden emplear
unas clases (variantes de esta etiqueta). Para ello, se define separadamente la
etiqueta H2, seguida de un punto y un nombre que queramos, como por
ejemplo:
+URMRÎRQWVL]HSWIRQWZHLJKWEROGFRORUUHG`
+YHUGHÎRQWVL]HSWIRQWZHLJKWEROGFRORUJUHHQ`
+D]XOÎRQWVL]HSWIRQWZHLJKWEROGFRORUEOXH`
Y en la pgina, podremos utilizar, segn nos convenga, una u otra de estas

variantes de la siguiente manera:
+&/$66 URMR!(VWDFDEHFHUDVHUiGHFRORUURMR+!

+&/$66 YHUGH!(VWDFDEHFHUDVHUiGHFRORUYHUGH+!

+&/$66 D]XO!(VWDFDEHFHUDVHUiGHFRORUD]XO+!
Como se ve, esto nos da una flexibilidad an mayor para obtener la apariencia
que queramos en nuestras pginas.
$SOLFDFLyQGHHVWLORDORVHQODFHV
Las hojas de estilo tambin permiten modificar a voluntad la apariencia de los

enlaces, asignando cualquiera de los atributos vistos (color del texto, tamao
de la fuente, existencia o no del subrayado, etc.).
Hay dos tipos de enlaces que se pueden modificar:
$OLQN enlaces que todava no han sido visitados (pulsados)

$YLVLWHG enlaces que ya han sido visitados (pulsados)
Por ejemplo:
A:link {color: red}

A:visited {color: green}
Hace que los enlaces sin visitar sean de color rojo, y una vez visitados se
pongan de color verde.
Si se les aplica el atributo text-decoration, ajustado al parmetro none

(ninguno), hace que los enlaces no estn subrayados.
Ejemplo:

A:visited {color: fuchsia; text-decoration: none}
Hace que los enlaces visitados sean de color fucsia y no estn subrayados.
&RPHQWDULRV
Se pueden aadir comentarios propios a las hojas de estilo, que pueden servir
de recordatorio posterior. Se pueden colocar en cualquier sitio de la
especificacin, siempre que vayan englobados entre los caracteres /* y */.
Ejemplo:
H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde para las cabeceras de

nivel 1 */

-$9$6&5,37
Javascript es un lenguaje de programacin utilizado para crear pequeos

programitas encargados de realizar acciones dentro del mbito de una pgina
Web. Con Javascript podemos crear efectos especiales en las pginas y definir
interactividades con el usuario. El navegador del cliente es el encargado de
interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos
e interactividades, de modo que el mayor recurso, y tal vez el nico, con que
cuenta este lenguaje es el propio navegador.
Javascript es el siguiente paso, despus del HTML, que puede dar un

programador de la Web que decida mejorar sus pginas y la potencia de sus
proyectos. Es un lenguaje de programacin bastante sencillo y pensado para
hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no
tengan una experiencia previa en la programacin podrn aprender este
lenguaje con facilidad y utilizarlo en toda su potencia con slo un poco de
prctica.
Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos
vertientes. Por un lado los efectos especiales sobre pginas Web, para crear
contenidos dinmicos y elementos de la pgina que tengan movimiento,
cambien de color o cualquier otro dinamismo. Por el otro, javascript nos permite
ejecutar instrucciones como respuesta a las acciones del usuario, con lo que
podemos crear pginas interactivas con programas como calculadoras.
Javascript es un lenguaje con muchas posibilidades, permite la programacin

de pequeos scripts, pero tambin de programas ms grandes, orientados a
objetos, con funciones, estructuras de datos complejas, etc. Toda esta potencia
de Javascript se pone a disposicin del programador, que se convierte en el
verdadero dueo y controlador de cada cosa que ocurre en la pgina.
-$9$6&5,376((6&5,%((1(/'2&80(172+70/
Lo ms importante y bsico que podemos destacar en este momento es que la

programacin de Javascript se realiza dentro del propio documento HTML. Esto
quiere decir que en la pgina se mezclan los dos lenguajes de programacin, y
para que estos dos lenguajes se puedan mezclar sin problemas se han de
Javascript. Estos delimitadores son las etiquetas: 6&5,37! \ 6&5,37!

incluir unos delimitadores que separan las etiquetas HTML de las instrucciones
Todo el cdigo de Javascript se introduce dentro de estas etiquetas (tags).
introducirse dentro de unas etiquetas 6&5,37! distintas. La colocacin de

En una misma pgina podemos introducir varios scripts, cada uno que podra
estos scripts es indiferente, en un principio nos da igual donde colocarlos, pero

en determinados casos esta colocacin si que ser muy importante.
pgina, como el atributo RQFOLFN. Estos atributos estn relacionados con las
Tambin se puede escribir Javascript dentro de determinados atributos de la
acciones del usuario y se llaman manejadores de eventos.

La etiqueta <SCRIPT> tiene un atributo que sirve para indicar el lenguaje que
estamos utilizando, as como la versin de este. Por ejemplo, podemos indicar
que estamos programando en Javascript o Visual Basic Script, que es otro
lenguaje para programar scripts.
El atributo en cuestin es ODQJXDJH y lo ms habitual es indicar simplemente el

lenguaje con el que se han programado los scripts. El lenguaje por defecto es
Javascript, por lo que si no utilizamos este atributo, el navegador entender
que el lenguaje con el que se est programando es Javascript.

<SCRIPT LANGUAGE=javascript>
$5&+,926(;7(5126'(-$9$6&5,37
Otra manera de incluir scripts en pginas Web, implementada a partir de
funciones que se utilicen en la pgina. Los archivos suelen tener extensin MV y
Javascript 1.1, es incluir archivos externos donde se pueden colocar muchas
se incluyen de esta manera.
<script language=javascript src=archivo_externo.js>

//Se incluye el archivo archivo_externo.js
</script>
Dentro de las etiquetas <SCRIPT> se puede escribir cualquier texto y ser

ignorado por el navegador, sin embargo, los navegadores que no entienden el
atributo SRC tendrn a este texto por instrucciones, por lo que es aconsejable
poner un comentario Javascript antes de cada lnea con el objetivo de que no
respondan con un error.

<SCRIPT>
Las lneas 2 y 4 se utilizan para
evitar que se muestre el cdigo
!
Cdigo Javascript
fuente en navegadores que no
</SCRIPT> soporten javascript.
6,17$;,6-$9$6&5,37
El lenguaje -DYDVFULSW WLHQH XQD VLQWD[LV PX\ SDUHFLGD D OD GH -DYD por
estar basado en l. Tambin es muy parecida a la del lenguaje C
&20(17$5,26
Un comentario es una parte de cdigo que no es interpretada por el navegador

y cuya utilidad radica en facilitar la lectura al programador. El programador, a
medida que desarrolla el script, va dejando frases o palabras sueltas, llamadas
comentarios, que le ayudan a l o a cualquier otro a leer fcilmente el script.

Existen dos tipos de comentarios en el lenguaje. Uno de ellos, la doble barra ,
sirve para comentar una lnea de cdigo.
con los signos para empezar el comentario y para terminarlo. Veamos unos
El otro comentario lo podemos utilizar para comentar varias lneas y se indica
ejemplos.
Este es un comentario de una lnea

<SCRIPT>
Este comentario se puede extender por varias lineas. Las que que quieras,
finalizando con
</SCRIPT>
0$<6&8/$6<0,16&8/$6
En javascript se han de respetar las maysculas y las minsculas. Si nos

equivocamos al utilizarlas el navegador responder con un mensaje de error de
sintaxis. Por convencin los nombres de las cosas se escriben en minsculas,
salvo que se utilice un nombre con ms de una palabra, pues en ese caso se
escribirn con maysculas las iniciales de las palabras siguientes a la primera.
Tambin se puede utilizar mayscula en las iniciales de las primeras palabras
en algunos casos, como los nombres de las clases.
()(&7265$3,'26
Antes de ver a detalle javascript podemos ver una serie de efectos rpidos que
se pueden programar con Javascript. Esto nos puede hacer una idea ms clara
de las capacidades y potencia del lenguaje que nos vendrn bien para tener
una idea ms exacta de lo que es Javascript a la hora de recorrer los siguientes
captulos.
)(&+$'(/7,0$02',),&$&,1
Primero vamos a ver un sencillo script para mostrar la fecha de la ltima

actualizacin del documento. A veces es muy interesante saber en qu fecha
se realiz la ltima modificacin y dar una imagen de pgina actualizada.
VFULSW!
GRFXPHQWZULWHGRFXPHQWODVW0RGLILHG
VFULSW!
Estas lneas deberan introducirse dentro del cuerpo de la pgina en el lugar

donde queramos que aparezca la fecha de ltima actualizacin. Un detalle a
destacar es que la fecha aparece en un formato un poco raro, indicando la hora
y otros atributos de la misma. Vemos que es sencillo y rpido de hacer. Es el
ejemplo tpico de la utilidad de Javascript y su facilidad de uso.

%2721'(92/9(5
Otro ejemplo rpido se puede ver a continuacin. Se trata de un botn para

volver hacia atrs, como el que tenemos en la barra de herramientas del
navegador. Ahora veremos una lnea de cdigo que mezcla HTML y Javascript
para crear este botn que muestra la pgina anterior en el historial, si es que la
hubiera.
LQSXWW\SH EXWWRQYDOXH $WUiVRQFOLFN KLVWRU\JR!
Podemos pulsarlo para ver su funcionamiento (debera llevarnos a la pgina

anterior).
Como diferencia con el ejemplo anterior hay que destacar que en este caso la
instruccin Javascript se encuentra dentro de un atributo de HTML, onclick, que
indica que esa instruccin se tiene que ejecutar como respuesta a la pulsacin
del botn.
0$1(5$6'((-(&87$56&5,376
Existen GRV PDQHUDV GH HMHFXWDU VFULSWV en la pgina. La primera de estas
maneras se trata de ejecucin directa de scripts, la segunda es una ejecucin
como respuesta a la accin de un usuario. Veremos ahora cada una de ellas.
(-(&8&,1',5(&7$
Es el mtodo de ejecutar scripts ms bsico. En este caso se incluyen las

instrucciones dentro de la etiqueta <SCRIPT>, tal como hemos comentado
anteriormente. Cuando el navegador lee la pgina y encuentra un script va
interpretando las lneas de cdigo y las va ejecutando una despus de otra.
Llamamos a esta manera ejecucin directa pues cuando se lee la pgina se
ejecutan directamente los scripts.
5(638(67$$81(9(172
Es la otra manera de ejecutar scripts, pero antes de verla debemos hablar

sobre los eventos. Los eventos son acciones que realiza el usuario. Los
programas como Javascript estn preparados para atrapar determinadas
acciones realizadas, en este caso sobre la pgina, y realizar acciones como
respuesta. De este modo se pueden realizar programas interactivos, ya que
controlamos los movimientos del usuario y respondemos a ellos. Existen
muchos tipos de eventos distintos, por ejemplo la pulsacin de un botn, el
movimiento del mouse, etc.
Las acciones que queremos realizar como respuesta a un evento se han de

indicar dentro del mismo cdigo HTML, pero en este caso se indican en
atributos HTML que se colocan dentro de la etiqueta que queremos que
responda a las acciones del usuario. En el captulo donde vimos algn ejemplo
rpido ya comprobamos que si queramos que un botn realizase acciones

cuando se pulsase sobre el, debamos indicarlas dentro del atributo onclick del
botn.
9$5,$%/(6-$9$6&5,37
8QD YDULDEOH HV XQ HVSDFLR HQ PHPRULD GRQGH VH DOPDFHQD XQ GDWR, un
espacio donde podemos guardar cualquier tipo de informacin que
necesitemos para realizar las acciones de nuestros programas. Por ejemplo, si
nuestro programa realiza sumas, ser muy normal que guardemos en variables
los distintos sumandos que participan en la operacin y el resultado de la
suma.
El efecto sera algo parecido a esto.
sumando1 = 23
sumando2 = 33
suma = sumando1 + sumando2
En este ejemplo tenemos tres variables, sumando1, sumando2 y suma, donde

guardamos el resultado.
Vemos que su uso para nosotros es como si tuvisemos un apartado donde
guardar un dato y que se pueden acceder a ellos con slo poner su nombre.
Los nombres de las variables han de construirse con caracteres alfanumricos

y el carcter subrayado (_). Aparte de esta, hay una serie de reglas adicionales
para construir nombres para variables. La ms importante es que tienen que
comenzar por un carcter alfabtico o el subrayado. No podemos utilizar
caracteres raros como el signo +, un espacio o un $.
Los nombres admitidos podran ser:
Edad
paisDeNacimiento
_nombre
ejemplo no podremos llamar a nuestra variable palabras como UHWXUQ o IRU,

Tambin hay que evitar utilizar nombres reservados como variables, por
que ya veremos que son utilizadas para estructuras del propio lenguaje.
Algunos nombres no admitidos:
12meses
tu nombre
return
pe%pe
'(&/$5$&,1'(9$5,$%/(6
Declarar variables consiste en definir y de paso informar al sistema de que vas

a utilizar una variable. Es una costumbre habitual en los lenguajes de
programacin el definir las variables que se van a usar en los programas y para

ello, se siguen unas reglas estrictas. Pero javascript se salta muchas reglas por
ser un lenguaje un tanto libre a la hora de programar y uno de los casos en los
que otorga un poco de libertad es a la hora de declarar las variables, ya que no
estamos obligados a hacerlo, al contrario de lo que pasa en la mayora de los
lenguajes de programacin.
De todos modos, es aconsejable declarar las variables, adems de una buena

costumbre y para ello Javascript cuenta con la palabra var. Como es lgico, se
utiliza esa palabra para definir la variable antes de utilizarla.
var operando1
var operando2
Tambin se puede asignar un valor a la variable cuando se est declarando
var operando1=15
var operando2 =20
Tambin se permite declarar varias variables en la misma lnea, siempre que

se separen por comas.
var operando1,operando2
$0%,72'(/$69$5,$%/(6
6HOHOODPDiPELWRGHODVYDULDEOHVDOOXJDUGRQGHHVWDVHVWiQGLVSRQLEOHV.
Por lo general, cuando declaramos una variable hacemos que est disponible
programacin y como javascript se define dentro de una pgina Web, ODV

en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de
YDULDEOHVTXH GHFODUHPRVHQODSiJLQDHVWDUiQ DFFHVLEOHVGHQWURGH HOOD.

De este modo, no podremos acceder a variables que hayan sido definidas en
otra pgina. Este es el mbito ms habitual de una variable y le llamaremos a
este tipo de variables globales a la pgina, aunque no ser el nico, ya que
tambin podremos declarar variables en lugares ms acotados.
9$5,$%/(6*/2%$/(6
Como hemos dicho, las variables globales son las que estn declaradas en el
mbito ms amplio posible, que en Javascript es una pgina Web. Para
con la palabra YDU.

declarar una variable global a la pgina simplemente lo haremos en un script,
<SCRIPT>
var variableGlobal
</SCRIPT>
Las variables globales son accesibles desde cualquier lugar de la pgina, es

decir, desde el script donde se han declarado y todos los dems scripts de la
pgina, incluidos los manejadores de eventos, como el onclick, que ya vimos
que se poda incluir dentro de determinadas etiquetas HTML.

9$5,$%/(6/2&$/(6
Tambin podremos declarar variables en lugares ms acotados, como por

ejemplo una funcin. A estas variables les llamaremos locales. Cuando se
declaren variables locales slo podremos acceder a ellas dentro del lugar
donde se ha declarado, es decir, si la habamos declarado en una funcin solo
podremos acceder a ella cuando estemos en esa funcin.
Las variables pueden ser locales a una funcin, pero tambin pueden ser
locales a otros mbitos, como por ejemplo un bucle.
<script>
function mifuncion(){
var variableLocal
}
</script>
En el script anterior hemos declarado una variable dentro de una funcin, por lo
que esa variable slo tendr validez dentro de la funcin. Se pueden ver cmo
se utilizan las llaves para acotar el lugar donde est definida esa funcin o su
mbito.
No hay problema en declarar una variable local con el mismo nombre que una
global, en este caso la variable global ser visible desde toda la pgina,
excepto en el mbito donde est declarada la variable local ya que en este sitio
ese nombre de variable est ocupado por la local y es ella quien tiene validez.
<script>
var numero=2
var numero=19
document.write(numero)//imprime 19
}

</script>
',)(5(1&,$6$/87,/,=$59$5212
YDU, pero los efectos que conseguiremos en cada caso sern distintas. En
En Javascript tenemos libertad para declarar o no las variables con la palabra
concreto, cuando utilizamos YDU estamos haciendo que la variable que estamos
Por otro lado, si no utilizamos la palabra YDU para declarar una variable, sta
declarando sea local al mbito donde se declara.
ser global a toda la pgina, sea cual sea el mbito en el que haya sido
declarada.
En el caso de una variable declarada en la pgina Web, fuera de una funcin o
YDU, desde un punto de vista funcional. Esto es debido a que cualquier variable
cualquier otro mbito ms reducido, nos es indiferente si se declara o no con
declarada fuera de un mbito es global a toda la pgina. La diferencia se puede

apreciar en una funcin por ejemplo, ya que si utilizamos YDU la variable ser
local a la funcin y si no lo utilizamos, la variable ser global a la pgina. Esta
diferencia es fundamental a la hora de controlar correctamente el uso de las
variables en la pgina, ya que si no lo hacemos en una funcin podramos
sobreescribir el valor de una variable, perdiendo el dato que pudiera contener
previamente.
<script>
var numero=2
var numero=19
}
//llamamos a la funcin
Mifuncion()
</script>
En este ejemplo, tenemos una variable global a la pgina llamada numero, que
haberla declarado con YDU, por lo que la variable numero de la funcin ser la
contiene un 2. Tambin tenemos una funcin que utiliza la variable numero sin
misma variable global numero declarada fuera de la funcin. En una situacin

como esta, al ejecutar la funcin se sobrescribir la variable numero y el dato
que haba antes de ejecutar la funcin se perder.
En una variable podemos introducir varios tipos de informacin, por ejemplo

texto, nmeros enteros o reales, etc. A estas distintas clases de informacin se
les conoce como tipos de datos. Cada uno tiene caractersticas y usos
distintos.
1~PHURV
Para empezar tenemos el tipo numrico, para guardar nmeros como 9 o 23.6
&DGHQDV
El tipo cadena de carcter guarda un texto. Siempre que escribamos una
cadena de caracteres debemos utilizar las comillas (").
%RROHDQRV
Tambin contamos con el tipo booleano, que guarda una informacin que
puede valer si (true) o no (false). Por ltimo sera relevante sealar aqu que
nuestras variables pueden contener cosas ms complicadas, como podra ser
un objeto, una funcin, o vaco (null).
En realidad nuestras variables no estn forzadas a guardar un tipo de datos en

concreto y por lo tanto no especificamos ningn tipo de datos para una variable
cuando la estamos declarando. Podemos introducir cualquier informacin en
una variable de cualquier tipo, incluso podemos ir cambiando el contenido de
una variable de un tipo a otro sin ningn problema.

Ejemplo:
var nombre_distrito=San isidro

var revisado=true
nombre_distrito=32
revisado=no
Esta ligereza a la hora de asignar tipos a las variables puede ser una ventaja
en un principio, sobretodo para personas inexpertas, pero a la larga puede ser
fuente de errores ya que dependiendo del tipo que son las variables se
comportarn de un modo u otro y si no controlamos con exactitud el tipo de las
variables podemos encontrarnos sumando un texto a un nmero. Javascript
operar perfectamente, y devolver un dato, pero en algunos casos puede que
no sea lo que estbamos esperando. As pues, aunque tenemos libertad con
los tipos, esta misma libertad nos hace estar ms atentos a posibles desajustes
difciles de detectar a lo largo de los programas. Veamos lo que ocurrira en
caso de sumar letras y nmeros.
var sumando1 = 23
var sumando2 = "33"
var suma = sumando1 + sumando2
document.write(suma)
Este script nos mostrara en la pgina el texto 2333, que no se corresponde

con la suma de los dos nmeros, sino con su concatenacin, uno detrs del
otro.
7,326'('$726
En nuestros scripts vamos a manejar variables diversas clases de informacin,

como textos o nmeros. Cada una de estas clases de informacin son los tipos
de datos. Javascript distingue entre tres tipos de datos y todas las
informaciones que se puedan guardar en variables van a estar encajadas en
uno de estos tipos de datos.
7,32'('$726180e5,&2
En este lenguaje slo existe un tipo de datos numrico, al contrario que

ocurre en la mayora de los lenguajes ms conocidos. Todos los nmeros son
por tanto del tipo numrico, independientemente de la precisin que tengan o si
son nmeros reales o enteros.
Los nmeros enteros son nmeros que no tienen coma, como 3 o 339. Los
nmeros reales son nmeros fraccionarios, como 2.69 o 0.25, que tambin se
pueden escribir en notacin cientfica, como por ejemplo 2.482e12.
Con Javascript tambin podemos escribir nmeros en otras bases, como la

hexadecimal. Las bases son sistemas de numeracin que utilizan ms o menos

dgitos para escribir los nmeros. Existen tres bases con las que podemos
trabajar
%DVH , es el sistema que utilizamos habitualmente, el sistema

decimal. Cualquier nmero, por defecto, se entiende que est escrito en
%DVH , tambin llamado sistema octal, que utiliza dgitos del 0 al 7.

base 10.

Para escribir un nmero en octal basta con escribir ese nmero
%DVH o sistema hexadecimal, es el sistema de numeracin que utiliza

precedido de un 0, por ejemplo 045.

16 dgitos, los comprendidos entre el 0 y el 9 y las letras de la A a la F,
para los dgitos que faltan. Para escribir un nmero en hexadecimal
debemos escribirlo precedido de un cero y una equis, por ejemplo 0x3EF
7,32%22/($12
El tipo bolean, boolean en ingls, sirve para guardar un si o un no o dicho de

otro modo, un verdadero o un falso. Se utiliza para realizar operaciones lgicas,
para realizar acciones si el contenido de una variable es verdadero o falso.
Si una variable es verdadero entonces Ejecuto unas instrucciones Si no ejecuto

otras.
Los dos valores que pueden tener las variables booleanas son true o false.
miBoolean = true
miBoolean = false
7,32'('$726&$'(1$'(&$5$&7(5(6
El ltimo tipo de datos es el que sirve para guardar un texto. Javascript slo
tiene un tipo de datos para guardar texto y en el se pueden introducir cualquier
nmero de caracteres, compuesto de nmeros, letras y cualquier otro tipo de
caracteres y signos. Los textos se escriben entre comillas, dobles o simples.
miTexto=Juan perez es programador web

miTexto=23%%$Letras&*--*
Todo lo que se coloca entre comillas, como en los ejemplos anteriores es

tratado como una cadena de caracteres independientemente de lo que
coloquemos en el interior de las comillas. Por ejemplo, en una variable de texto
podemos guardar nmeros y en ese caso tenemos que tener en cuenta que las
variables de tipo texto y las numricas no son la misma cosa y mientras que las
de numricas nos sirven para hacer clculos matemticos las de texto no.
&$5$&7(5(6'((6&$3((1&$'(1$6'(7(;72

Hay una serie de caracteres especiales que sirven para expresar en una
cadena de texto determinados controles como puede ser un salto de lnea o un
tabulador. Estos son los caracteres de escape y se escriben con una notacin
especial que comienza por una contra barra (una barra inclinada al revs de la
normal '\') y luego se coloca el cdigo del carcter a mostrar.
Un carcter muy comn es el salto de lnea, que se consigue escribiendo \n.

Otro carcter muy habitual es colocar unas comillas, pues si colocamos unas
comillas sin su carcter especial nos cerraran las comillas que colocamos para
iniciar la cadena de caracteres. Las comillas las tenemos que introducir
entonces con \" o \' (comillas dobles o simples).
Existen otros caracteres de escape, que veremos en la tabla de abajo ms

resumidos, aunque tambin hay que destacar como carcter habitual el que se
utiliza para escribir una contrabarra, para no confundirla con el inicio de un
carcter de escape, que es la doble contrabarra \\.
7$%/$&2172'26/26&$5$&7(5(6'((6&$3(
Salto de lnea: \n
Comilla simple: \'
Comilla doble: \"
Tabulador: \t
Enter: \r
Avance de pgina: \f
Retroceder espacio: \b
Contrabarra: \\
7(50,1265(6(59$'26
Los siguientes trminos reservados no pueden ser empleados para nombres de

variables, funciones, mtodos u objetos.
DEVWUDFW H[WHQGV LQW VXSHU
ERROHDQ IDOVH LQWHUIDFH VZLWFK
EUHDN ILQDO ORQJ V\QFKURQL]HG
E\WH ILQDOO\ QDWLYH WKLV
FDVH IORDW QHZ WKURZ
FDWFK IRU QXOO WKURZV
FKDU IXQFWLRQ SDFNDJH WUDQVLHQW
FODVV JRWR SULYDWH WUXH
FRQVW LI SURWHFWHG WU\
FRQWLQXH LPSOHPHQWV SXEOLF YDU

GHIDXOW LPSRUW UHWXUQ YRLG

GR LQ VKRUW ZKLOH
GRXEOH LQVWDQFHRI VWDWLF ZLWK
HOVH
23(5$'25(6'(&203$5$&,21
Cuando se establece una comparacin en JavaScript se debe usar un operador

de comparacin entre los dos valores a comparar. Como resultado se obtendr
un valor booleano. Los operadores de comparacin son los siguientes:

Igual ==>

!
Distinto ==>

Mayor que ==>

Menor que ==>

!
Menor o igual a ==>
Mayor o igual a ==>
23(5$'25(6'($6,*1$&,21
izquierda. Por ejemplo [ asigna el valor 10 a la variable x.

El signo = asigna el valor del operando de la derecha al resultado de la
A continuacin se presentan una serie de notaciones abreviadas para las

asignaciones. Estas notaciones se aplican a todos los operadores aritmticos y
de bits.
x += y es igual a x = x + y
x -= y es igual a x = x - y
x <<= y es igual a x =x << y
23(5$'25(6'(&$'(1$
Los operadores de cadena incluyen los operadores de comparacin

mencionados anteriormente y el operador de concatenacin (+). Por ejemplo la
instruccin
-DYD6FULSW
dar como resultado
-DYD6FULSW
Igualmente si la variable VWU contiene el valor -DYD, la instruccin
VWU 6FULSW

Dar tambin como resultado la cadena -DYD6FULSW.
23(5$'25(6$5,70(7,&26
2SHUDGRU )XQFLyQ (MHPSOR

+ suma x=a+b
- resta x=a-b
* multiplicacin x=a*b
/ divisin x=a/b
% mdulo 12 % 5 = 2
++ incremento x++
-- decremento y--
_ negacin unaria x = _y
23(5$'25(6/*,&26<'(%,76
En la siguiente tabla se describen los operadores lgicos.

&& Y, verdadero si ambos son verdaderos expr1 expr2
|| O, verdadero si uno de los dos es verdadero expr1 | | expr2
! NO, niega el operando !expr1
La siguiente tabla muestra los operadores a nivel de bit.

Y a nivel de bit.
& x=a&b
Devuelve un uno si los dos operandos son unos.
O a nivel de bit.
| Devuelve un uno si algunos de los dos operandos es x=a|b
uno.
XOR a nivel de bit.
^ Devuelve un uno si uno pero no ambos operandos es x=a^b
uno.
Desplaza bits a la izquierda un nmero especificado de x = a <<
<<
veces. 4

Los bits que sobran por la izquierda se descartan y se

incluyen los bits cero desde la derecha
Desplaza bits a la derecha un nmero especificado de
veces.
x = b >>
>> Los bits que sobran por la derecha se descartan y se
5
incluyen por la izquierda copias del bit ms a la
izquierda.
Desplaza bits a la derecha y los sustituye por ceros.
x = a >>>
>>> Los bits sobrantes por la derecha se descartan y se
2
incluyen los bit cero desde la izquierda.
35(&('(1&,$'(23(5$'25
La siguiente lista muestra la precedencia de los operadores de JavaScript, de

menor a mayor:
coma,
asignacin = += -= *= /= %= <<= >>= >>>= &= ^= |=
condicional ?:
o lgico ||
y lgico &&
o a nivel de bit |
xor a nivel de bit ^
y a nivel de bit &
igualdad == !=
relacin < <= > >=
desplazamiento << >> >>>
suma/resta + -
multiplicacin/divisin/mdulo * / %
negacin/incremento ! ~ - ++ --
llamada, miembro ( ) [ ] .
%8&/(6(,16758&&,21(6&21',&,21$/(6

Las instrucciones de bucle que emplea actualmente JavaScript son:
IRU
La sintaxis para un bucle IRU es as:
IRU>LQVWUXFFLyQLQLFLDO@>FRQGLFLyQ@>H[SUHVLyQDFWXDOL]DFLyQ@^
LQVWUXFFLRQHV`
instruccin inicial en un bucle IRU puede contener una declaracin de variable,

Las tres expresiones que se encuentran dentro del parntesis son optativas. La
que se efecta empleando la palabra clave YDU. Un ejemplo de la instruccin

IRU:
IRUYDUL LL^

WRWDO WRWDOL
GLVSOD\BWRWDOWRWDO
`
En este ejemplo el bucle IRU se ejecutar 10 veces antes de terminar. En cada
iteracin i se incrementa en 1 hasta que la instruccin i < 10 deje de ser
verdadera.
Para bloques de cdigo de una sola lnea no hace falta emplear el par de llaves
({ }).
El siguiente listado muestra un sencillo ejemplo de como se utilizan estas
instrucciones:
<HTML><BODY><SCRIPT>
for (var i=0;i<10;i++) {
document.write("Estas en el numero" + i + "!<BR>");
if (i == 5)
document.write("Hola......".<P>");
}
</SCRIPT></BODY></HTML>
Esta operacin ejecutar la operacin 10 veces mediante el bucle for, e
imprimir las palabras Estas en el numero seguidas por el nmero actual. La
instruccin if comprobar cuando se alcanza el bucle 5 e imprimir entonces
las palabra Hola....
IRULQ
La sintaxis de la instruccin IRULQ es la siguiente:
IRUYDULQREM^LQVWUXFFLRQHV`
La instruccin IRULQ itera una variable sobre todas las propiedades de un
objeto. La palabra clave LQ fija YDU para la primera propiedad de REM. Cuando
de REM. Vase el siguiente ejemplo:

termine de ejecutarse la instruccin ya habr recorrido todas las propiedades
IXQFWLRQSURSLHGDGHVBGHOBREMHFWRREMQRPEUHBREM^

YDUUHVXOWDGR
L
IRULLQREM
UHVXOWDGR QRPEUHBREML REM>L@?Q
UHWXUQUHVXOWDGR
`
Este ejemplo se ejecutar por todas las propiedades de REM y las visualizar
junto con el valor de la propiedad.
ZKLOH
Su sintaxis es la siguiente:
ZKLOHFRQGLFLyQ^LQVWUXFFLRQHV`
El siguiente ejemplo mantiene el bucle en accin hasta que la variable GLQHUR
alcanza su meta prefijada de 100.00.El segundo cero despus del punto o
coma decimal es innecesario, pero se usa para facilitar la lectura del cdigo y
GLQHUR
para indicar al lector del cdigo que se est hablando de dinero.

ZKLOHGLQHUR^

GLQHUR
`
EUHDN\FRQWLQXH
En un bucle ZKLOH o IRU, una instruccin EUHDN interrumpe el bucle y contina la

ejecucin del cdigo posterior al bucle. La sintaxis es:
EUHDN
En el siguiente ejemplo el bucle while se interrumpe cuando la variable L toma
IXQFWLRQIXQF[^
el valor 2.
YDUL
ZKLOHL^
LIL
EUHDN
L
`
UHWXUQL [
`
La instruccin FRQWLQXH finaliza la ejecucin del bloque actual en un bucle y
la instruccin EUHDN por FRQWLQXH cuando la variable L tome el valor 2, el bucle

contina el bucle con la siguiente iteracin. Si en el ejemplo anterior sustituimos
ZKLOH salta la linea i++ y contina el bucle.
LIHOVH
Su sintaxis es:
LIFRQGLFLyQ^LQVWUXFFLRQHV`>HOVH^LQVWUXFFLRQHV`@
La instruccin LIHOVH puede ser anidada.
LIWLSRBOLEUROLEURBMDYDVFULSW ^

Veamos un ejemplo:
EXHQR WUXH
`HOVH
EXHQR IDOVH
([SUHVLyQFRQGLFLRQDO
Una expresin condicional en JavaScript es un mtodo para comprobar un
HGDGBVXILFLHQWH HGDG! "0D\RUGHHGDG0HQRUGHHGDG

valor cuyo resultado puede ser uno de dos posibles valores. Por ejemplo:
Se comprueba primero la instruccin dentro del parntesis, si es verdadera se

escoge el primer valor detrs del signo de interrogacin. Si no, se escoge el
segundo valor detrs de la interrogacin.

ZLWK
Esta instruccin permite especificar un objeto como objeto predeterminado

cuando se ejecutan instrucciones dentro de su bloque de cdigo.
ZLWKREMHWR^LQVWUXFFLRQHV`
Un ejemplo utilizando el objeto 0DWK
ZLWK0DWK^
D 3, U U
[ U FRVDOID
\ U VLQDOID
`
&8$'526'(',$/2*2
La manera ms sencilla es:
alert("Texto")
Por ejemplo:
alert("Bienvenido!\n\n\tEsta Web est dedicada a JavaScript.")
Este tipo de ventanas de dilogo muestra un botn $FHSWDU que el usuario

deber pulsar para continuar.
mtodo SURPSW muestra una caja de texto en la que el usuario puede introducir
Existen otros tipos de ventanas de dilogo que interactan con el usuario. El
contenidos. Tambin muestra dos botones 2. y &DQFHO. Ejemplo:
prompt("Su color favorito es: ","Azul")
El segundo parmetro es el valor predeterminado para la caja de texto, que el

usuario podr modificar. Ejemplo:
<HTML><HEAD>
<TITLE>Cuadros de dilogo</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>
(MHPSORV
<script>

function consultar(){if (!confirm

("Est seguro de que quiere entrar? "))
history.go(-1);return " "}
document.writeln(consultar())
</script>
-----------------------------------------------------------
<script language="JavaScript">
var nombrePrompt = prompt("Por favor, introduzca su nombre.","");
function mostrarnombre (namePrompt){
document.write(" "+nombrePrompt+" ");
}
</script>Bienvenido a mi pgina personal
<script language="JavaScript">{
mostrarnombre(nombrePrompt);}
</script>
-----------------------------------------------------------
<BODY>
<FORM name=formulario1><INPUT type=texto name=texto
value='Invertir texto'>
<BR><INPUT type=button value='Invertir texto'
onclick=invertir()></FORM>
<SCRIPT>
function invertir() {
var texto=document.formulario1.texto.value;
var alreves=" ";
for(count=texto.length; count >= 0; count--)
alreves+=texto.substring(count,count-1);
alert(alreves);}
</SCRIPT>
</BODY>
</HTML>
&5($&,21<//$0$'$'()81&,21(6
La sintaxis de la instruccin IXQFWLRQ es la siguiente:

IXQFWLRQQRPEUH>SDUDP@>SDUDP@>SDUDP@^LQVWUXFFLRQHV`
Cada funcin tiene su propio y nico nombre as como una lista de parmetros
opcionales.
Para utilizar funciones en el cdigo HTML es mejor ubicarlas en la porcin
<HEAD>..</HEAD> de la pgina. As cuando se cargue la pgina, todas las
funciones que puedan necesitarse para esta pgina estarn ya cargadas.
empleando la instruccin UHWXUQ.

Una vez completadas, las funciones pueden dar valores como resultado
Las funciones no pueden anidarse.
6LQWD[LVSDUDODGHFODUDFLyQGHXQDIXQFLyQ
IXQFWLRQFHQWUDUBFDGHQDPVJ^

GRFXPHQWZULWH&(17(5!PVJ&(17(5!
`
6LQWD[LVSDUDOODPDUDODIXQFLyQ

6&5,37/$1*8$*( -DYD6FULSW!
FHQWUDUBFDGHQD(VWRHVXQDOODPDGDDXQDIXQFLyQ
6&5,37!
Tambin se puede llamar a una funcin a travs de un objeto, utilizando los

mtodos de ese objeto. Los mtodos de JavaScript son funciones asociadas a
un objeto. La definicin de una funcin como un mtodo de objeto se realiza de
la misma forma que se define una propiedad normal, pero esta vez se usa un
nombre de funcin en lugar de emplear una variable literal o de valor. Del
mismo modo para llamar a una funcin definida como parte de un objeto se
emplea el mismo procedimiento que si se estuviera accediendo a una
propiedad del objeto.
&5($&,21'(2%-(726
Para crear un nuevo objeto en JavaScript primero hay que crearse una funcin
palabra clave QHZ.

para ese objeto, y despus hay que crear un ejemplo de ese objeto con la
IXQFWLRQSHUVRQDQRPEUHHGDGDOWXUDSHVR^

Por ejemplo, en primer lugar se crea la funcin:
WKLVQRPEUH QRPEUH
WKLVHGDG HGDG
WKLVDOWXUD DOWXUD
WKLVSHVR SHVR
WKLVLPSULPH LPSULPH
`
La palabra clave WKLV da a entender a la funcin que debe referirse a s misma
a la hora de hacer las asignaciones de propiedad. Cuando se definen
funciones, pueden utilizarse tambin otros objetos como propiedades en esa
funcin.
Para aadir mtodos a los objetos hay que especificar en la definicin del
se ha aadido un mtodo denominado LPSULPH. La funcin LPSULPH tendra que

objeto la funcin que ha de emplearse para el mtodo. En el ejemplo anterior
haberse definido de forma que se especificara como mtodo en un objeto.

Aadir un mtodo a la definicin de un objeto garantiza que todos los objetos
que se creen contendrn el mtodo. Para aadir un mtodo slo al objeto que
REMHWRLPSULPH LPSULPH Para crear un nuevo objeto de la funcin SHUVRQD

se est empleando y no a la propia definicin se utilizara la instruccin:
se utilizara la instruccin siguiente: XQDSHUVRQD QHZSHUVRQD3DEOR

-(5$548,$'(2%-(726

Cuando se carga un documento se crea automticamente una nueva coleccin

de objetos para describir el documento actual y la ventana del navegador.
Estos objetos se presentan en la siguiente jerarqua:
objeto ZLQGRZ: Contiene propiedades que se aplican a toda la ventana.

Si se estn utilizando frames (tramas) habr un objeto window para cada
objeto ORFDWLRQ: Contiene propiedades para el actual URL de la pgina.

ventana de trama en la pgina.

objeto KLVWRU\: Contiene propiedades para cualquier URL visitada
objeto GRFXPHQW: Contiene propiedades para el contenido de la pgina

anteriormente.

actual.
El objeto GRFXPHQW contiene tambin otros objetos:
IRUPV y los elementos de formato de una pgina

DQFKRUV (elementos anclados en la pgina)
links existentes en la pgina

(/2%-(72ZLQGRZ
Entre las SURSLHGDGHV ms tiles del objeto window se encuentran las tramas
o frames y el status o estado.
El uso de la propiedad de frames le permite acceder a los documentos

individuales del juego de tramas en JavaScript. Por ejemplo, un
documento tiene dos frames (frame1 y frame2), para poner en rojo el
ZLQGRZIUDPHV>
IUDPH
@GRFXPHQWEJ&RORU UHG
color de fondo de frame1 se utilizara la instruccin:
La instruccin anterior podra tambin escribirse omitiendo window.
La propiedad status del objeto window le permite visualizar un mensaje
ZLQGRZVWDWXV 3URJUDPDU HQ -DYD6FULSW HV GLYHUWLGR situara

en la barra de estado de la ventana del navegador. La instruccin
en la barra de estado la frase 3URJUDPDUHQ-DYD6FULSWHVGLYHUWLGR
El objeto ZLQGRZ contiene tambin algunos PpWRGRV tiles para interaccionar

con el usuario.
El mtodo DOHUW hace aparecer una ventana con un mensaje y el

usuario podr entonces pulsar OK para continuar.
ZLQGRZDOHUW(UURU
El mtodo FRQILUP se utiliza si lo que se busca es algn tipo de

confirmacin del usuario.
ZLQGRZFRQILUP(VWiVHJXURGHTXHTXLHUHVDOLU"

El mtodo RSHQ se utiliza para que los documentos HTML puedan abrir
sus propias ventanas y escribir de forma inmediata contenidos para
ellas.
ZLQGRZ9DU ZLQGRZRSHQ85/ZLQGRZ1DPH3URSHUWLHV
(MHPSOR
function nuevaVentana() {
msgWindow=window.open("ventana.htm","OpenWindow",
"width=450,height=400,scrollbars=yes");
}
,QYRFDQGR
</script>
<input type="button" name="button" value="Abrir"

onclick="nuevaVentana()">
(MHPSOR
<BODY BGCOLOR="#FFF000"
onLoad="setTimeout('ventana2()',1000)">
<P><SCRIPT LANGUAGE="JavaScript">
function ventana2()
{
controlWindow=window.open("window.htm","","toolbar=no,l
ocation=no,directories=no,status=yes,menubar=no,scrollbar
s=yes,resizable=no,width=220,height=265");
}
</SCRIPT>
(MHPSOR
</BODY>
<A HREF="javascript:"
onMouseOver="m =
window.open('ventana.htm','','width=150,height=150');
return true;"
onMouseOut=" m.window.close(); return true;"
>Pulse aqui</A>
(/2%-(72GRFXPHQW
Con el objeto document un programa en JavaScript puede generar de forma
usuario en la pgina. Algunas de las SURSLHGDGHV importantes del objeto

inmediata cdigo HTML, as como reaccionar a la entrada o a la salida del
document son:

GRFXPHQWDOLQN&RORU UHG
alinkColor, linkColor, vlinkColor (enlaces de colores).

GRFXPHQWOLQN&RORU SXUSOH
GRFXPHQWYOLQN&RORU EOXH
bgColor, fgColor (los colores del documento)

ZKHUHIURP GRFXPHQWUHIHUHU
remitente del documento
Algunos de los PpWRGRV ms interesantes del objeto GRFXPHQW son los

siguientes:
FOHDU
FORVH\RSHQ. Permiten borrar contenidos completos de un documento,
de manera que se puede empezar a escribir en ellos sin tener en la
ZULWH\ZULWHOQPermiten generar texto en el documento actual. ZULWHOQ

ventana ms informacin que la que escriba en ella.

salta de lnea despus de generar el texto.
(MHPSORVYDULRV

<SCRIPT Language='JavaScript'>
function nuevaVentana(form1) {
var indice=form1.selector.selectedIndex;
var accion=form1.selector.options[indice].value;
msg=open(accion,"","location=yes");
}
</SCRIPT>
<FORM name="form1">
<select name="selector">
<option value="1.html">Primera ventana
<option value="2.html">Segunda ventana
<option value="3.html">Tercera ventana
</select>
<INPUT TYPE="button" value="Abrir"
onClick="nuevaVentana(this.form)">
</FORM>
--------------------------------------------------------------
<html>
<head>
var init_msg = "Centro de Cmputo Sistemas UNI "

var str = ""
var msg = ""
var leftmsg = ""
function setMessage() {
if (msg == "") {
str = " "
msg = init_msg
leftmsg = ""

}
if (str.length == 1) {
while (msg.substring(0, 1) == " ") {
leftmsg = leftmsg + str
str = msg.substring(0, 1)
msg = msg.substring(1, msg.length)
}
leftmsg = leftmsg + str

str = msg.substring(0, 1)
msg = msg.substring(1, msg.length)
for (var ii = 0; ii < 120; ii++) {

str = " " + str
}
}
else {
str = str.substring(10, str.length)
}
window.status = leftmsg + str

setTimeout(setMessage(),100)
}
</script>
</head>
<body onload="setTimeout(setMessage(),100)">
</body>
</html>
--------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>Mi primer banner</TITLE>
var velocidad = 100
var pausa = 1000
var timerID = null
var bannerRun = false
var ar = new Array()

ar[0] = "Bienvenido al mdulo de Java Developer"
ar[1] = "Fundamentos HTML - JS - XML"
ar[2] = "Java 2 - POO"
ar[3] = "Java 2 - JSP - SERVLETS - BEANS"
var actualMsg = 0
var offset = 0
function detenerBanner() {
if (bannerRun)

clearTimeout(timerID)
bannerRun = false
}
function iniciarBanner() {
detenerBanner()
mostrarBanner()
}
function mostrarBanner() {
var text = ar[actualMsg]
if (offset < text.length) {
if (text.charAt(offset) == " ")
offset++
var mensaje = text.substring(0, offset + 1)
window.status = mensaje
offset++
timerID = setTimeout("mostrarBanner()", velocidad)
bannerRun = true
} else {
offset = 0
actualMsg++
if (actualMsg == ar.length)
actualMsg = 0
timerID = setTimeout("mostrarBanner()", pausa)
bannerRun = true
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="iniciarBanner()">
</BODY>
</HTML>
<HTML>
-------------------------------------------------------------------
<HEAD><TITLE>Mi Segundo banner</TITLE>
function scrollBanner(seed) {
var velocidad = 10
var str = " "
var ar = new Array()
ar[0] = "Bienvenido al mdulo de Java Developer "
ar[1] = "Fundamentos HTML - JS - XML "
ar[2] = "Java 2 - POO "
ar[3] = "Java 2 - JSP - SERVLETS - BEANS "
var total = ar.join("")

if (seed > 0) {
for (var i = 0; i < seed; ++i) {
str += " "
}
str += total
seed--
var cmd = "scrollBanner(" + seed + ")"
window.status = str
timerID = setTimeout(cmd, velocidad)
} else
if (-seed < total.length) {
str += total.substring(-seed, total.length)
seed--
var cmd = "scrollBanner(" + seed + ")"
window.status = str
timerID = setTimeout(cmd, velocidad)
} else {
window.status = str
timerID = setTimeout("scrollBanner(100)", velocidad)
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="scrollBanner(100)">
</BODY>
</HTML>
-------------------------------------------------------------------
<html><head><title> Reloj de barra de estado</title>
</head><body onLoad="verTiempo()">
<script Language="JavaScript">
function verTiempo () {
var now = new Date();
var hora = now.getHours();
var minutos = now.getMinutes();
var segundos = now.getSeconds()
var tiempo = "" + ((hora >12) ? hora -12 :hora)
tiempo += ((minutos < 10) ? ":0" : ":") + minutos
tiempo += ((segundos < 10) ? ":0" : ":") + segundos
tiempo += (hora >= 12) ? " P.M." : " A.M."
window.status = tiempo;
setTimeout("verTiempo()",1000);
}
</script><center>Mire en su barra de estado!</center>
</body>
</html>
<HTML><HEAD><TITLE> Alimentador de noticias</TITLE>
function Arreglo() {
this.length = Arreglo.arguments.length
for (var i = 0; i < this.length; i++)

this[i+1] = Arreglo.arguments[i]
}
var fArray = new Arreglo;
fArray[0]="UNIVERSIDAD NACIONAL DE INGENIERIA "
fArray[1]="Centro de Cmputo Sistemas UNI "
fArray[2]="Bienvenido al curso de Fundamentos de HTML JAVASCRIPT -
XML "
fArray[3]="Lenguaje de Marcado de Hipertexto - HTML "
fArray[4]="HTML Dinmico basado en estilos CSS y Javascript "
fArray[5]="Lenguaje de Marcacin eXtensible - XML "
fArray[6]="Aplicaciones de ltima tecnologa "
var x = 1;
var y = 0;
var msg1 = fArray[y];
function mensaje() {
if (x==msg1.length+1) {
for (var z=0; z < 70000; z++);
y+=1;
if (y > 6) y=0
document.form1.caja.value=' '
msg1 = fArray[y];
x=0;
}
document.form1.caja.value=msg1.substring(0,x);
x+=1;
setTimeout("mensaje() ",150);
}
</script></head>
<body onLoad="mensaje()">
<form name="form1">
<textarea wrap=physical rows=3 cols=35 name="caja">
</textarea><BR><P>
<input type="button" value="cerrar" onClick="self.close()">
</form></form></body></html>
(/2%-(72IRUP
Este objeto permite denominar formularios, modificar, crear o comprobar el

valor de sus campos antes de presentarlo al servidor.
La SURSLHGDG IRUPV permite acceder a todos los campos de
Por ejemplo, tenemos el formulario PLIRUP con dos campos de texto

informacin del formulario desde los formularios actuales de la pgina.
ILHOG y ILHOG. Para acceder a los valores de esos campos se hara:
valor1 = document.forms[0].field1.value;
valor2 = document.forms[0].field2.value;

La indicacin cero en la propiedad forms indica que es el primer

formulario del documento.
Tambin se puede acceder a un formulario por el nombre:
valor1 = document.miform.field1.value
valor2 = document.miform.field2.value
El objeto IRUP contiene un objeto para cada campo de la forma a que se

refiere: FKHFNER[KLGGHQUDGLRUHVHWVXEPLWWH[W\WH[WDUHD. Todos
estos objetos tienen las propiedades QDPH\YDOXH.Los tipos de campo
UDGLR y FKHFNER[ contienen una propiedad FKHFNHG para determinar si
el elemento IRUP ha sido o no comprobado.
El objeto IRUP slo tiene unPpWRGR VXEPLW. Por ejemplo
)250$&7,21 GRLWFJL!)250!
el mtodo VXEPLW del objeto form hara que el navegador sometiera el

formulario al programa GRLWFJL
275262%-(726,1&25325$'26
HOREMHWRVWULQJ. Se crea el crear una variable, a la que asigna un valor

de cadena. Por ejemplo, la instruccin
DVWULQJ +ROD
creara un objeto de cadena denominado DVWULQJ. Los literales de cadena

son tambin objetos de cadena.
HO REMHWR 0DWK. Contiene funciones y mtodos matemticos que el
mtodos son: VLQWDQUDQGRP y SRZ. Por ejemplo:

programa en JavaScript puede llamar directamente. Algunos de estos
UHVXOWDGR 0DWKVLQ
HO REMHWR 'DWH. Se utiliza para trabajar con fechas y horas.

Para crear un nuevo objeto Date se utiliza la sintaxis:
GDWHYDU QHZ'DWHSDUDPHWHUV
Los parmetros pueden ser :
1. Nada. Crea la fecha y hora actuales.

2. Una cadena con el formato "Mes,da,ao,
hora:minutos:segundos". Si se omiten las horas, los minutos y los
segundos se fijarn a cero.

3. Un juego de valores enteros para ao, mes y da o para ao, mes,

da, hora, minutos y segundos. Ejemplo:
IHFK QHZ'DWH

IHFK QHZ'DWH
En JavaScript los segundos, minutos, horas, das y meses

comienzan por el 0, no por el 1. Por ello el mes de enero se
designar con un 0.
La funcin ms til que incorpora JavaScript es HYDO. Si toma como parmetro

una expresin numrica, se evala y da un resultado. Si toma como parmetro
una cadena, la convierte en expresin numrica y da el resultado. Esta funcin
tiene la ventaja de aceptar expresiones de formularios y evaluarlos
directamente.
(9(1726
Se llaman eventos a acciones que ocurren cuando un usuario ejecuta algn

tipo de accin.
Los manipuladores de eventos se incorporan en los documentos como
atributos de etiquetas HTML. Por ejemplo:
,13877<3( EXWWRQ9$/8( ,5RQ&OLFN PDNHLWJRWKLVIRUP!
Esta instruccin invoca la funcin PDNHLWJR cuando se pulsa el botn.

La siguiente tabla muestra los nueve manipuladores de eventos de JavaScript.
0DQLSXODGRUGH
(YHQWR 6HGDFXDQGR
HYHQWR
El usuario retira el foco de entrada del
blur onBlur
elemento form
El usuario pulsa el mouse sobre el elemento
click onClick
form o sobre un enlace
El usuario modifica el valor del texto, de un
change onChange
rea del texto, o selecciona un elemento
El usuario sita el foco de entrada en el
focus onFocus
elemento form
load El usuario carga la pgina en el Navigator onLoad
El usuario mueve el puntero del mouse sobre
mouseover onMouseOver
un enlace
El usuario selecciona elementos form como
select onSelect
campo de entrada (input)
submit El usuario envia un formulario onSubmit

unload El usuario abandona la pgina onUnload
(OPDQLSXODGRUGHHYHQWRV2Q&OLFN
El evento FOLFN se produce cuando,en un formulario, un objeto

susceptible de ser pulsado es pulsado por el usario. El manipulador de
eventos JavaScript puede llamar una funcin, que ha de existir en el
documento actual, o ejecutar cdigo JavaScript presente.Por ejemplo:
LQSXWW\SH EXWWRQQDPH 3XOVDPHRQ&OLFN DOHUW+ROD

!
La instruccin anterior abrir una ventana de aviso cuando el usuario

pulse el botn.
(OPDQLSXODGRUGHHYHQWRVRQ6XEPLW
eventos 2Q6XEPLW puede llamar una funcin o ejecutar cdigo

Se produce cuando el usuario envia un formulario. El manipulador de
JavaScript presente.Por ejemplo
IRUPQDPH PLIRUPDFWLRQ GRLWFJLRQ6XEPLW FRQILUP6XEPLVVLRQ!
La anterior instruccin llama a a la funcin FRQILUP6XEPLVVLRQ para
en el atributo DFWLRQ.
comprobar los valores de los campos antes de llamar al URL designado
(OPDQLSXODGRUGHHYHQWRVRQ&KDQJH
Se produce cuando un campo VHOHFW WH[W o WH[WDUHD deja de ser

enfocado y se ha modificado su valor. EL elemento onChange puede
llamar a una funcin o ejecutar cdigo JavaScript presente. Ejemplo:
LQSXWQDPH SKRQHRQ&KDQJH FKHFN3KRQHWKLVIRUP!
Esta instruccin llama a la funcin FKHFN3KRQH cuando el usuario deja

de enfocar el campo de entrada (input) de texto y se mueve a otro
campo. Esto permite preprocesar instantneamente la informacin y
comprobar el valor del campo con anterioridad al envio del formulario.
(OPDQLSXODGRUGHHYHQWRVRQ/RDG
Se produce cuando Netscape acaba de cargar una ventana o todas las

tramas de un <FRAMESET>.Puede llamar a una funcin o ejecutar
cdigo JavaScript presente.Ejemplo
ERG\RQ/RDG DOHUW
%LHQYHQLGRDPLSiJLQD
!
(OPDQLSXODGRUGHHYHQWRVRQ8QORDG

Se produce cuando el usuario abandona la pgina. Por ejemplo
ERG\RQ8QORDG DOHUW
*UDFLDVSRUWXYLVLWD

5()(5(1&,$'(&2/25(6
JavaScript contiene cadenas literales de color que pueden emplearse en lugar
propiedades JavaScript DOLQN&RORUEJ&RORU IJ&RORU OLQN&RORU y YOLQN&RORU.

de sus correspondientes valores de color RGB. Estos literales se usan en las
Dentro de las Pginas HTML se pueden emplear tambin para definir los
atributos COLOR de las etiquetas BODY y FONT.
)2508/$5,26,17(5$&7,926
$&&(62$/26)2508/$5,26'(81$3*,1$
accedidos desde un VFULSW JavaScript. El array IRUPV almacena un elemento

Los formularios y campos de formulario contenidos en una pgina pueden ser
por cada formulario que aparece en la pgina, en el orden en que estn en el

cdigo fuente. De este modo, en el ejemplo siguiente
<FORM METHOD=POST NAME="Formu">
Para acceder al formulario, estas tres formas son equivalentes:

document.forms[0] (primer formulario)
document.forms["Formu"]
document.Formu
3523,('$'(6'(/2%-(72)2508/$5,2
3URSLHGDG 'HVFULSFLyQ
action Cadena que contiene el valor del atributo ACTION

del tag FORM
elements Array que contiene una entrada por cada elemento

en el formulario (como campos de texto, listas de
seleccin, botones,...)
encoding Cadena que contiene el tipo MIME utilizado para

codificar los contenidos del formulario que se
envan al servidor. Refleja el atributo ENCTYPE
del tag FORM
name Cadena que contiene el valor del atributo NAME
del tag FORM
target Cadena que contiene el nombre de la ventana

objetivo del submit (ventana en la que se publican
los resultados)

length Refleja el nmero de elementos del formulario
method Cadena que contiene el valor del atributo

METHOD del Tag FORM
0e72'26'(/2%-(72)250
0pWRGR 'HVFULSFLyQ
handleEvent Invoca el manejador del evento especificado
reset Simula la pulsacin del botn del mouse sobre un
botn de reset del formulario
submit Enva el formulario
(MHPSOR
<HTML><HEAD><TITLE>Ejemplo de mtodo submit()</TITLE>


</SCRIPT></HEAD><BODY>
<FORM METHOD=POST onSubmit="alert('Respuesta correcta!');
return false">
Cunto vale 10 * 10?
<INPUT TYPE="text" NAME="respuesta"
onChange="CompruebaValor(this.form)">
</FORM></BODY></HTML>
(9(1726'()2508/$5,2
(YHQWR 'HVFULSFLyQ
onReset Captura la pulsacin del botn reset
onSubmit Captura la pulsacin del botn submit
$&&(62$/26(/(0(1726'(81)2508/$5,2

Para acceder a los elementos de un formulario desde un VFULSW, se utiliza el

DUUD\ HOHPHQWV. Este DUUD\ contiene una entrada para cada objeto del
formulario (EXWWRQ, FKHFNER[, ILOHXSORDG, KLGGHQ, SDVVZRUG, UDGLR, UHVHW, VHOHFW,
VXEPLW, WH[W, y WH[WDUHD), en el orden en que aparecen el el cdigo fuente.
Por ejemplo, si un formulario de nombre MiFormu tiene un campo de texto

(WH[W) y dos cuadros de seleccin (FKHFNER[), podemos acceder a ellos con los
elementos:
MiFormu.elements[0]
MiFormu.elements[1]
MiFormu.elements[2]
Otra posibilidad es utilizar el nombre del elemento al cual se desea acceder.

As, si el campo de texto del ejemplo anterior se llama MiTexto, las siguientes
opciones son equivalentes:
MiFormu.elements[0]
MiFormu.elements["MiTexto"]
MiFormu.MiTexto
(MHPSOR utilizacin del array HOHPHQWV en una tabla de multiplicar.

<HTML>
<HEAD>
<TITLE>Tabla de multiplicar</TITLE>
<!
function Calcula(Formu) {
var num = 1
var Numero = Formu.Numero.value
Formu.elements[num].value = Numero * num++
}
//-->
</SCRIPT>
</HEAD><BODY><FORM METHOD=POST>
Numero:
<INPUT TYPE=text NAME="Numero" VALUE=1
onChange="Calcula(this.form);"><BR>
x 1: <INPUT TYPE=text NAME="1" VALUE=1 onFocus="blur();"><BR>


x 10: <INPUT TYPE=text NAME="10" VALUE=10
onFocus="this.blur();"><BR>
<INPUT TYPE=button NAME="Calcula" VALUE="Calcula"

onClick="Calcula(this.form);">
La gran ventaja del DUUD\ HOHPHQWV es la simplificacin del cdigo mediante la
ndices. Por ejemplo, la funcin &DOFXOD del ejemplo anterior puede escribirse
utilizacin de bucles y el acceso a los elementos del formulario mediante
de la siguiente forma:
function Calcula(Formu) {
var Numero = Formu.Numero.value
for(num = 1; num <= 10; num++) {
Formu.elements[num].value = Numero * num
}
0e72'263523,('$'(6<(9(1726'(/26(/(0(1726'(81
)2508/$5,2
utilizarse en los VFULSWV para actuar sobre el formulario. A continuacin vamos a

Cada elemento de un formulario posee propiedades y mtodos que pueden
describir los ms importantes.
&8$'52'(6(/(&&,1&+(&.%2;
checked Indica el estado actual del cuadro de seleccin
defaultChecked Indica el estado por defecto del elemento
especificado en el WDJ INPUT

name Indica el nombre del elemento tal y como est

value Indica el valor el elemento tal y como est
0pWRGR 'HVFULSFLyQ
click() Simula la pulsacin del botn del mouse sobre el
cuadro de seleccin
(YHQWR 'HVFULSFLyQ

onClick Captura la pulsacin del botn del mouse sobre el

cuadro de seleccin
%271'(6(/(&&,15$',2
Es similar al cuadro de seleccin (FKHFNER[) con la diferencia de que varios

elementos de este tipo pueden agruparse con un solo nombre de modo que
slo uno de ellos podr estar seleccionado.
checked Indica el estado actual del botn de seleccin
defaultChecked Indica el estado por defecto del elemento


value Indica el valor del elemento tal y como est
index Indica el ndice del botn de seleccin actualmente

seleccionado en el grupo
length Indica el nmero de botones de seleccin en el
grupo
0pWRGR 'HVFULSFLyQ
click() Simula la pulsacin del botn del mouse sobre el
botn de seleccin
(MHPSOR
<HTML><HEAD><TITLE>Ejemplo de cuadro de seleccion</TITLE>

<SCRIPT>
<!
function Calcula(Formu, Campo) {
if (Formu.BotonAccion[1].checked) {
Formu.resultado.value = Math.sqrt(Formu.entrada.value)
} else {
Formu.resultado.value = Formu.entrada.value * Formu.entrada.value
}
}
//-->
</SCRIPT></HEAD><BODY>
<FORM METHOD=POST>
<P>Valor:<BR>
<INPUT TYPE="text" NAME="entrada" VALUE=0
onChange="Calcula(this.form, this.name);">
<P>Accin:<BR>

<INPUT TYPE="radio" NAME="BotonAccion" VALUE="cuadrado"> Al

cuadrado<BR>
<INPUT TYPE="radio" NAME="BotonAccion" VALUE="raiz2"> Raiz
cuadrada<BR>
<P>Resultado:<BR>
<INPUT TYPE=text NAME="resultado" VALUE=0>
&8$'52'(7(;727(;7
est especificado en el WDJ INPUT

defaultValue Indica el valor por defecto del elemento tal y como

value Indica el valor actual del elemento

0pWRGR 'HVFULSFLyQ
focus() Da el foco al elemento (convierte el cuadro de
texto en la zona activa actual)
blur() Quita el foco del elemento
select() Selecciona el texto actual del cuadro de texto
(YHQWR 'HVFULSFLyQ
onChange Captura el cambio de valor del campo de texto
onFocus Captura la recuperacin del foco por parte del
cuadro de texto
onBlur Captura la prdida del foco
onSelect Captura la seleccin del texto
/,67$'(6(/(&&,16(/(&7
options Array que contiene una entrada por cada
elemento de la lista de seleccin
selectedIndex Da el ndice de la opcin de la lista seleccionada
actualmente
est especificado en el WDJ OPTION

options[n]. Indica el valor del elemento n de la lista, tal y como
value

options[n]. Contiene la cadena de texto que representa la

text opcin n de la lista
options[n]. Indica si la opcin n est actualmente
selected seleccionada
options[n]. Indica si la opcin n es la seleccionada por defecto
defaultSelected
0pWRGR 'HVFULSFLyQ
focus() Da el foco al elemento
blur() Quita el foco del elemento
(YHQWR 'HVFULSFLyQ
onChange Captura el cambio de seleccin en la lista
onFocus Captura la recuperacin del foco por parte de la
lista de seleccin
onBlur Captura la prdida del foco
Como ejemplo, dado el siguiente cdigo HTML:
<SELECT NAME="Ejemplo" onFocus="Ver()">

<OPTION SELECTED VALUE="Opcin 1">1
<OPTION VALUE="Opcin 2">2
<OPTION VALUE="Opcin 3">3
</SELECT>
las propiedades de la lista de seleccin se acceden como se muestra, tomando los
valores que aparecen a la derecha:
Ejemplo.options[1].value = "Opcin 2"
Ejemplo.options[2].text = "3"
Ejemplo.selectedIndex = 0
Ejemplo.options[0].defaultSelected = true
Ejemplo.options[1].selected = false
$5($'(7(;727(;7$5($
Posee las propiedades GHIDXOW9DOXH, QDPH y YDOXH, con el mismo significado

que para el cuadro de texto. Los mtodos IRFXV, EOXU y VHOHFW pueden
utilizarse con este elemento, al igual que los eventos RQ)RFXV, RQ%OXU y
RQ6HOHFW.
%2721(668%0,7<5(6(7
Los botones VXEPLW y UHVHW poseen las propiedades QDPH y YDOXH, puediendo
utilizarse con ellos el mtodo FOLFN y el evento RQ&OLFN.
El botn submit posee un mtodo y un evento especficos: el mtodo VXEPLW
y el evento RQ6XEPLW. El mtodo VXEPLW realiza el emisin del formulario (es

equivalente a pulsar el botn VXEPLW). El evento RQ6XEPLW se produce cuando

se enva el formulario, permitiento realizar operaciones con los datos del
formulario antes de realizar el envo (por ejemplo, validacin de campos).
(-(03/26',9(5626
(MHPSOR Tenemos una caja de texto con un valor por defecto. Cuando el
usuario hace click sobre el campo, el valor "desaparece".
<form name="ejemplo1" method="POST">

<input type="text" name="usuario" value="Nombre de usuario"
onClick="ejemplo1.usuario.value=''" size="16">
<br>Password: <input type="password" name="clave" size="6"
value="123456" onClick="ejemplo1.clave.value=''">

</form>
(MHPSOR El valor introducido en una caja de texto es "reproducido" en otro
<script language="javascript">
function pasaValor(form){
ejemplo2.campo2.value = ejemplo2.campo1.value;
}
</script>
<form name="ejemplo2" method="POST">
Tu nombre: <input type="text" name="campo1"
onKeyUp="pasaValor(this.form)"><br>
Nombre introducido: <input type="text" name="campo2" ReadOnly>
</form>
(MHPSOR Ejemplo en el cual se rellenarn los campos de texto vacos con la

frase "No aportado"
function rellenar()
{
var texto = "No aportado"
if (ejemplo3.nombre.value == "") { ejemplo3.nombre.value = texto; }
if (ejemplo3.telefono.value == "") { ejemplo3.telefono.value = texto; }
if (ejemplo3.ciudad.value == "") { ejemplo3.ciudad.value = texto; }
alert("Los campos en blanco se completaron automticamente");
ejemplo3.submit()
}
</script>
<form name="ejemplo3" method="POST" target="_blank">
<b>Rellena tu perfil de usuario</b> (opcional)<br>
Nombre real: <input type="text" name="nombre"><br>
Telfono: <input type="text" name="telefono"><br>
Ciudad: <input type="text" name="ciudad"><br>
<input type="button" value="Terminar" onClick="rellenar()">
</form>

(MHPSOR ejemplo para validar campos (Primera forma)
function validar(form){
var error = "Por favor, antes de enviar el formulario,\ncomplete los
siguientes campos:\n\n";
var a = ""
if (form.nombre.value == "") { a += " Nombre \n"; }
if (form.telefono.value == "") { a += " Telfono\n"; }
if (form.ciudad.value == "") { a += " Ciudad\n"; }
if (a != "") { alert(error + a); return true; }
form.submit()
}
</script>
<b>Rellena tu perfil de usuario</b> (obligatorio)<br>
Nombre: <input type="text" name="nombre"><br>
<input type="button" value="Terminar" onClick="validar(this.form)">

</form>
(MHPSOR ejemplo para validar campos (Segunda forma)
function alerta(campo){
alert("Por favor, completa el campo "+campo) }
function validar2(form)
{
if (form.nombre.value == "")
{ alerta('\"Nombre \"'); form.nombre.focus(); return true; }
if (form.telefono.value == "")
{ alerta('\"Telfono\"'); form.telefono.focus(); return true; }
if (form.ciudad.value == "")
{ alerta('\"Ciudad\"'); form.ciudad.focus(); return true; }
form.submit()
}
</script>
<b>Rellena tu perfil de usuario</b> (obligatorio)<br>
Nombre : <input type="text" name="nombre"><br>
<input type="button" value="Terminar" onClick="validar2(this.form)">
</form>
(MHPSOR Ejemplo que toma los datos introducidos en distinto campos de

texto y transferimos todos los valores a un solo campo. Es ideal, por ejemplo,

cuando recopilamos informacin sobre el domicilio de una persona o para

tantas otras cosas.
function completar(form)
{
form.domicilio.value == ""
if (form.calle.value != "") { form.domicilio.value += form.calle.value + " "; }
if (form.nro.value != "") { form.domicilio.value += "N" + form.nro.value +
", "; }
if (form.piso.value != "") { form.domicilio.value +="Piso " + form.piso.value
+ " "; }
if (form.dto.value != "") { form.domicilio.value += "Dpto. \"" +
form.dto.value + "\" - "; }
if (form.cp.value != "") { form.domicilio.value += "(" + form.cp.value + ") ";
}
if (form.ciudad.value != "") { form.domicilio.value += form.ciudad.value +
", "; }
if (form.pais.value != "") { form.domicilio.value += form.pais.value; }
}
</script>
<form name="ejemplo6" method="POST" action="ejemplos/ej6.jsp"
target="_blank">
Por favor, complete su domicilio:<br>
<br>
Calle: <input type="text" name="calle" size="40">
Nro.: <input type="text" name="nro" size="3"><br>
Piso: <input type="text" name="piso" size="2">
Departamento: <input type="text" name="dto" size="2"><br>
Cdigo Postal: <input type="text" name="cp" size="8">
Ciudad: <input type="text" name="ciudad" size="20">
Pas: <input type="text" name="pais" size="20"><br><br>
Verifique su domicilio: <input type="text" name="domicilio" size="80"
ReadOnly onFocus="completar(this.form)">
<br>
Si los datos no son correctos, <a onClick="ejemplo6.domicilio.value=''">
presione aqu</a> y realice los cambios en los campos
correspondientes.<br>
<input type="submit" value="Confirmar">
</form>
(MHPSOR Ejemplo sencillo en el cual el campo "clave" SDVVZRUG estar

bloqueado si el campo "usuario" WH[W se encuentra vaco y se desbloquear en
caso contrario.
function bloqDesbloq(){
a = login.usuario.value
if (a != "") { a = true; }
else { a = false; }

if (a == true) { login.clave.disabled = false; }

else { login.clave.disabled = true; }
}
</script>
<form name="login" method="POST" action="pagina_de_login.jsp"
target="_blank">
Usuario: <input type="text" name="usuario" size="10"
onKeyUp="bloqDesbloq()"><br>
Clave: <input type="password" name="clave" size="10" disabled>
</form>
(MHPSOR 6LDXPHQWDHOYDORUGHOHQJWKDXPHQWDHOWDPDxRGHVL]H

function aumentarSize(){
a = ejemplo9.campo1.value.length;
if (a > 6) { ejemplo9.campo1.size =(a+1); }
if (a < 6) { ejemplo9.campo1.size = "6"; }
}
</script>
<form name="ejemplo9">
Nombres: <input type="text" name="campo1" size="6"
onKeyUp="aumentarSize()">
</form>
(MHPSOR Lmite mnimo de caracteres
function validarCampo1(form){
if (form.palabra1.value.length < 6)
{
alert('Debes introducir una palabra con un mnimo de 6 caracteres');
form.palabra1.focus(); return true;
}
}
</script>
<form name="form1" method="post">
Mnimo 6 caracteres: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo1(this.form)" value="Enviar">
</form>
(MHPSOR Lmite mximo de caracteres
if (form.palabra1.value.length > 6)
{
alert('Debes introducir una palabra con un mximo de 6 caracteres');
}

}
</script>
Mximo 6 caracteres: <input type="text" name="palabra1">
</form>
(MHPSOR Lmite absoluto de caracteres
if (form.palabra1.value.length != 6)
{
alert('Debes introducir una palabra de 6 caracteres');
}
}
</script>
Introduce solo 6 caracteres: <input type="text" name="palabra1">
</form>
(MHPSOR Lmite mnimo y mximo de caracteres
var a = form.palabra1.value.length
if ((a < 6) || ( a > 12))
{
alert('Debes introducir una palabra con un mnimo de 6 caracteres y
un mximo de 12');
}
}
</script>
Mnimo 6 caracteres, mximo 12: <input type="text" name="palabra1">
</form>
(MHPSOR Cantidad de caracteres escritos y caracteres restantes
function contar(form){
n = form.campo.value.length;
t = 50;
{
form.escritos.value = n;
form.restantes.value = (t-n);

}
}
</script>
<form name="form5" method="POST">
Mximo 50 caracteres: <input type="text" name="campo" size="50"
maxlength="50" onKeyUp="contar(this.form)"><br>
Escritos: <input type="text" ReadOnly name="escritos" size="2"
value="0">
Restantes: <input type="text" ReadOnly name="restantes" size="2"
value="50">
</form>
(MHPSOR Cantidad de caracteres excedidos y caracteres faltantes
c = 12; // cant. mxima de caracteres
L = form.campo.value.length;
// e es el excedido
// f es el faltante
if (L > c) { e = (L-c); error = 1; }
if (L < c) { f = (c-L); error = -1; }
if ((L != c) && (error == -1))
{
alert("El campo contiene " + f + " caracteres menos a los solicitados");
form.campo.focus(); return true;
}
if ((L != c) && (error == 1))
{
alert("El campo contiene " + e + " caracteres ms a los solicitados");
form.campo.focus(); return true;
}
}
</script>
Escribir solo 12 caracteres: <input type="text" name="campo"
size="12"><br>
<input type="button" value="Enviar" onClick="validarCampo5(this.form)">
</form>
(MHPSOR Conversion a MAYUSCULAS

Texto: <input type="text" name="txt1" size="20"
onKeyUp="form1.txt1.value=form1.txt1.value.toUpperCase()">
</form>
(MHPSOR Conversin a minsculas


Texto: <input type="text" name="txt1" size="20"
onKeyUp="form2.txt1.value=form2.txt1.value.toLowerCase()">
</form>
(MHPSOR En este caso se habilitarn o deshabilitarn los checkbox

dependiendo de la opcin que seleccione el usuario de un grupo de dos radio
buttons.
function habilita(form){
form.intereses[0].disabled = false;
}
function deshabilita(form)
{
form.intereses[0].disabled = true;
}
</script>
Desea suscribirse a nuestro boletn de novedades? <br>
<input type="radio" name="boletin" value="si" checked
onClick="habilita(this.form)"> SI, quiero suscribirme.
<input type="radio" name="boletin" value="no"
onClick="deshabilita(this.form)"> No, gracias.
<br><br>
Seleccione los temas de su inters:<br>
<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y
Cultura<br>
<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>
<input type="checkbox" name="intereses" value="Msica">Msica<br>
</form>
(MHPSOR En este caso se habilitarn o deshabilitarn los checkbox

dependiendo del valor de la propiedad checked de otro checkbox.
function habilitaDeshabilita(form){
if (form.boletin.checked == true)
{
}
if (form.boletin.checked == false)
{

}
}
</script>
Desea suscribirse a nuestro boletn de novedades? <input
type="checkbox" name="boletin" value="ON" checked
onClick="habilitaDeshabilita(this.form)"> SI, quiero suscribirme.
<br><br>
Seleccione los temas de su inters:<br>
<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y
Cultura<br>
<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>
<input type="checkbox" name="intereses" value="Msica">Msica<br>
</form>
(MHPSOR Ejemplo que maneja las propiedades de un checkbox
function informar(form){
nombreCasilla = form.colores[0].name
valorCasilla = form.colores[0].value
valorDisabled = ""
valorChecked = ""
valorLength = form.colores.length
// definicin de valorDisabled
if (form.colores[0].disabled == true)
{ valorDisabled = "est deshabilitada"; }
else
{ valorDisabled = "est habilitada"; }
// definicin de valorChecked
if (form.colores[0].checked == true)
{ valorChecked = "est seleccionada"; }
else
{ valorChecked = "no est seleccionada"; }
nombreCasillaStr = "El nombre de la primer casilla es: " + nombreCasilla
valorCasillaStr = "El valor de la primer casilla es: " + valorCasilla
valorDisabledStr = "La primer casilla " + valorDisabled
valorCheckedStr = "Esta casilla " + valorChecked
valorLengthStr = "La cantidad total de casillas es: " + valorLength
// escribimos el mensaje de alerta
strAlerta = nombreCasillaStr + "\n" + valorCasillaStr + "\n" +
valorDisabledStr + "\n" + valorCheckedStr + "\n\n" + valorLengthStr
// lanzamos la accin
alert(strAlerta);
}
</script>
Colores:

Verde <input type="checkbox" name="colores" value="Verde"><br>

Azul <input type="checkbox" name="colores" value="Azul"
disabled><br>
Rojo <input type="checkbox" name="colores" value="Rojo"
disabled><br>
<input type="button" value="Mostrar informacin"
onClick="informar(this.form)">

</form>
(MHPSORLanzar una accin si un checkbox no se ha marcado
function verificarCasilla(form){
if (form.acepto.checked == false)
{
alert("Debes aceptar los trminos del contrato antes de continuar");
form.acepto.focus(); return true;
}
form.submit()
}
</script>
<form name="contrato">
<b>Formulario de suscripcin al servicio de acceso a Internet </b><br>
... campos del formulario ...<br>
...<br>
<input type="checkbox" name="acepto"> Acepto los trminos del
contrato de suscripcin
<br>
<input type="button" value="Enviar" onClick="verificarCasilla(this.form)">

</form>
(MHPSORTrabajando con la propiedad disabled
function habilitar(form){
if (form.productos[0].selected == true)
{
form.cantidad.disabled = true;
}
else
{
form.cantidad.disabled = false;
}
}
</script>
<form name="ejemplo1" method="POST" target="_blank"
action="pagina.htm">
<select name="productos" onChange="habilitar(this.form)">
<option value="">[Seleccione un producto]</option>
<option value="COD 001">COD 001: Producto 1</option>


</select>
<select name="cantidad" disabled>
<option value="">[cantidad]</option>
<option value="5">5 unidades</option>
</select>

<input type="submit" value="Enviar"></form>
(MHPSOREjemplo que trabaja con el constructor new Option

function agregarOpciones(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;
if (selec[0].selected == true)
{
var seleccionar = new Option("<-- esperando seleccin","","","");
combo[0] = seleccionar;
}
{
var popular1 = new Option("Rock de los 90","Rock1","","");
var popular2 = new Option("Rock de los 80","Rock2","","");
combo[0] = popular1;
combo[1] = popular2;
}
{
var academica1 = new Option("Musica del Barroco","Barroco","","");
var academica2 = new Option("Musica del Siglo XX","Siglo XX","","");
var academica3 = new Option("Msica del
Romantisismo","Romantico","","");
combo[0] = academica1;
}
}
</script>
<select name="tipos" onChange="agregarOpciones(this.form)">
<option value="">[seleccione una opcin]</option>
<option value="musicapopular">Msica Popular (Rock)</option>
<option value="musicaacademica">Msica Acadmica</option>
</select>

<select name="estilo">
<option value=""><-- esperando seleccin</option>
</select>
<input type="submit" value="Enviar"></form>
(MHPSOR Validar un select
function validar(form){
if (form.combo1.options[form.combo1.selectedIndex].value == "")
{
alert("Por favor, seleccione una opcin vlida");
form.combo1.focus(); return true;
}
form.submit();
}
</script>
<select name="combo1">
<option value=" ">[seleccione una opcin]</option>
<option value="opcion1">Opcin 1</option>
</select>
<input type="button" value="Enviar" onClick="validar(this.form)">
</form>
(MHPSOR Convierte la primer letra de cada palabra en mayscula
function Convertir(objeto)
{
var index;
var tmpStr;
var tmpChar;
var preString;
var postString;
var strlen;
tmpStr = objeto.value.toLowerCase();
strLen = tmpStr.length;
if (strLen > 0)
{
for (index = 0; index < strLen; index++)
{
if (index == 0)
{
tmpChar = tmpStr.substring(0,1).toUpperCase();
postString = tmpStr.substring(1,strLen);
tmpStr = tmpChar + postString;

}
else
{
tmpChar = tmpStr.substring(index, index+1);
if (tmpChar == " " && index < (strLen-1))
{
tmpChar = tmpStr.substring(index+1, index+2).toUpperCase();
preString = tmpStr.substring(0, index+1);
postString = tmpStr.substring(index+2,strLen);
tmpStr = preString + tmpChar + postString;
}
}
}
}
objeto.value = tmpStr;
}
</script>
<form name="ejemplo2" method="GET" action="pagina.htm"
target="_blank">
Escribe tu nombre: <input type="text" name="campo1" size="15"
onKeyUp="Convertir(this.ejemplo2.campo1)">
<input type="submit" value="Enviar">
</form>
(MHPSOR Convierte la primer letra del texto en maysculas (al enviar el

formulario)
function Convertir2(form){
texto=form.campo1.value+" ";
texto=texto.toLowerCase();
texto1="";
punc=",.?!:;)'";
punc+='"';
while ((texto.length>0)&&(texto.indexOf(" ")>-1))
{
pos=texto.indexOf(" ");
wrd=texto.substring(0,pos);
wrdpre="";
if (punc.indexOf(wrd.substring(0,1))>-1)
{
wrdpre=wrd.substring(0,1);
wrd=wrd.substring(1,wrd.length);
}
cmp=" "+wrd+" ";
for (var i=0;i<9;i++)
{
p=wrd.indexOf(punc.substring(i,i+1));
if (p==wrd.length-1)
{

cmp=" "+wrd.substring(0,wrd.length-1)+" ";

i=9;
}
}
if (cmp.indexOf(cmp)<0)
{
ltr=wrd.substring(0,1);
ltr=ltr.toUpperCase();
wrd=ltr+wrd.substring(1,wrd.length);
}
texto1+=wrdpre+wrd+" ";
texto=texto.substring((pos+1),texto.length);
}
ltr=texto1.substring(0,1);
ltr=ltr.toUpperCase();
texto1=ltr+texto1.substring(1,texto1.length-1);
form.campo1.value=texto1;
}
</script>
target="_blank">
Escribe tu nombre: <input type="text" name="campo1" size="15">
<input type="button" value="Enviar" onClick="Convertir2(this.form)">
</form>
(MHPSOR Comprueba que el valor ingresado en dos campos no sea el

mismo.
<script language="javascritp">
function validarCampos1(form)
{
if(form.campo1.value == form.campo2.value)
{
alert("La contrasea no puede ser igual al nombre de usuario");
form.campo2.value = ""; form.campo2.focus(); return true;
}
form.submit()
}
</script>
<form name="ejemplo9" method="POST" action="pagina.htm"
target="_blank">
Usuario: <input type="text" name="campo1"><br>
Contrasea: <input type="password" name="campo2"><br>
<input type="button" value="Registrarse"
onClick="validarCampos1(this.form)">
</form>
(MHPSOR Permite seleccionar solo una determinada cantidad de checkbox

del mismo nombre

function limitarSeleccin(casilla,form) {
a = casilla.form.casilla1[0].checked;
b = casilla.form.casilla1[1].checked;
c = casilla.form.casilla1[2].checked;
d = casilla.form.casilla1[3].checked;
e = casilla.form.casilla1[4].checked;
contador = (a ? 1 : 0) + (b ? 1 : 0) + (c ? 1 : 0) + (d ? 1 : 0) + (e ? 1 : 0);
if (contador > 3)
{
alert("Solo puedes seleccionar 3 opciones");
casilla.checked = false;
}
}
</script>
target="_blank">
Por favor, seleccione 3 opciones como mximo:<br>
<input type="checkbox" name="casilla1" value="Opcion 1"
onClick="limitarSeleccin(this,this.form)">Opcin 1<br>
</form>
(MHPSOR Selecciona Deselecciona mediante un click
function todos(form)
{
for (i = 0; i < form.casilla1.length; i++)
form.casilla1[i].checked = true;
form.desmarcatodos.checked = false;
}
function ninguno(form)
{
form.casilla1[i].checked = false;
form.marcatodos.checked = false;
}
</script>
target="_blank">
<input type="checkbox" name="marcatodos"

onClick="todos(this.form)">Marcar todos |
<input type="checkbox" name="desmarcatodos"
onClick="ninguno(this.form)">Desmarcar todos
<hr>
<input type="checkbox" name="casilla1" value="Opcion 1">Opcin 1<br>
<hr>
</form>
(MHPSOR Selecciona todos los checkbox con un solo click o los
deselecciona o invierte la seleccin
function todos2(form) {
form.casilla1[i].checked = true;
form.invierte.checked = false;
}
function ninguno2(form) {
form.casilla1[i].checked = false;
form.invierte.checked = false;
}
function invertir(form) {
form.casilla1[i].checked = !form.casilla1[i].checked;
}
</script>
target="_blank">
<input type="checkbox" name="marcatodos"
onClick="todos(this.form)">Marcar todos |
<input type="checkbox" name="desmarcatodos"
onClick="ninguno(this.form)">Desmarcar todos |
<input type="checkbox" name="invierte"
onClick="invertir(this.form)">Invertir seleccin
<hr>


<hr>
</form>
(MHPSOR Cuenta la cantidad de checkbox o radio que hay seleccionados
function ContarCasillas(form){
var total = 0;
var maximo = form.casilla1.length;
for(i = 0; i < maximo; i++)
if (form.casilla1[i].checked == true)
{ total +=1; }
alert("Se han seleccionado " + total + " opciones")
}
</script>
target="_blank">
<input type="checkbox" name="casilla1" value="Rojo">Rojo<br>
<input type="checkbox" name="casilla1" value="Azul">Azul<br>
<input type="checkbox" name="casilla1" value="Amarillo">Amarillo<br>
<input type="checkbox" name="casilla1" value="Verde">Verde<br>
<input type="button" value="Contar casillas"
onClick="ContarCasillas(this.form)">
</form>
(MHPSOR Aumenta disminuye un valor
function validaCantidad(form)
{
if(form.cantidad.value < 1)
{
form.cantidad.value = 1;
alert("No puede comprar menos de 1 producto");
}
if(form.cantidad.value > 10)
{
form.cantidad.value = 10;
alert("La cantidad mxima de productos a comprar es de 100
productos");
}
}
</script>
target="_blank">
Producto seleccionado: <b>COD. 7548-65 CD-R IPC</b> Cantidad:
<input type="text" name="cantidad" value="1" size="2" ReadOnly>

<input type="button" value="aumentar"

onClick="ejemplo15.cantidad.value++; validaCantidad(this.form)">
<input type="button" value="disminuir"
onClick="ejemplo15.cantidad.value--;" validaCantidad(this.form)>
</form>
(MHPSOR Cuenta la cantidad de palabras introducidas en un textarea
function contarPalabras(form){
texto = form.mensaje.value
texto = texto.split(" ")
form.cantidad.value=texto.length
}
</script>
target="_blank">
<b>Por favor, redacte aqu su mensaje</b> Palabras escritas:
<input type="text" name="cantidad" value="0" size="2"><br>
<textarea rows="4" cols="35" name="mensaje"
onKeyPress="contarPalabras(this.form); if (event.keycode1 == 13)
form.mensaje.value +=' ';"></textarea><br>
</form>
(MHPSOR Muestra u oculta el botn submit
function esconde(form)
{
if ((form.nombre.value != "") && (form.apellido.value != ""))
{ form.enviar.style.visibility = "visible"; }
else {
form.enviar.style.visibility = "hidden"; }
}
</script>
target="_blank">
Nombre: <input type="text" name="nombre" size="20"
onKeyUp="esconde(this.form)"><br>
Apellido: <input type="text" name="apellido" size="20"
onKeyUp="esconde(this.form)"><br>
<input type="submit" name="enviar" value="Enviar" style="visibility:
hidden">
</form>
(MHPSOR Habilita deshabilita el botn submit
function deshabilita(form)

{
if ((form.nombre.value != "") && (form.apellido.value != ""))
{ form.enviar.disabled = false; }
else {
form.enviar.disabled = true; }
}
</script>
target="_blank">
Nombre: <input type="text" name="nombre" size="20"
onKeyUp="deshabilita(this.form)"><br>
Apellido: <input type="text" name="apellido" size="20"
onKeyUp="deshabilita(this.form)"><br>
<input type="submit" name="enviar" value="Enviar" disabled>
</form>
(MHPSOR Mensaje de confirmacin al borrar un formulario
function ConfirmarBorrado(form){
borrar = window.confirm('Se borrarn todos los datos del formulario');
(borrar)?form.reset():'return false';
}
</script>
target="_blank">
Nombre: <input type="text" name="nombre" size="20"><br>
Apellido: <input type="text" name="apellido" size="20"><br>
<input type="button" value="Borrar"
onClick="ConfirmarBorrado(this.form)">
</form>
(MHPSOR Mensaje de confirmacin al enviar un formulario

function ConfirmarEnvio(form){
enviar = window.confirm('Se enviarn todos los datos del formulario');
(enviar)?form.submit():'return false';
}
</script>
target="_blank">
Nombre: <input type="text" name="nombre" size="20"><br>
Apellido: <input type="text" name="apellido" size="20"><br>
<input type="button" value="Enviar"
onClick="ConfirmarEnvio(this.form)">
</form>

;0/
XML (e;tensible0arkup/anguage) es un metalenguaje que ofrece un formato

para la descripcin de datos estructurados. Esto facilita unas declaraciones de
contenido ms precisas y unos resultados de bsquedas ms significativos en
varias plataformas. Adems, XML habilitar una nueva generacin de
aplicaciones para ver y manipular datos basadas en Internet.
XML ofrece una representacin estructural de los datos que se puede

implementar ampliamente y es fcil de distribuir. XML es un subconjunto de
SGML (Standard Generalized Markup Language) optimizado para el Web.
Definido por el World Wide Web Consortium (W3C) (en ingls).
XML garantiza que los datos estructurados sean uniformes e independientes de

aplicaciones o fabricantes. La interoperabilidad resultante est creando
rpidamente una nueva generacin de aplicaciones de comercio electrnico.
XML que proporciona un estndar de datos que puede codificar el contenido, la

semntica y los esquemas de una gran variedad de casos, desde los ms
simples a los ms complejos, sirve para marcar lo siguiente:
Un documento normal.
Un registro estructurado, como un registro de usuarios o un pedido de
compra.
Un objeto con datos y mtodos, como el formulario permanente de un
objeto Java o de un control ActiveX.
Un registro de datos, como el conjunto de resultados de una consulta.
Metacontenido sobre un sitio Web, como el formato de definicin de
canal (CDF).
Representaciones grficas, como la interfaz de usuario de una
aplicacin.
Entidades y tipos de esquema estndar.
Todos los vnculos entre datos y personas que hay en el Web.
Cuando los datos llegan al escritorio del cliente, se pueden manipular, editar y
presentar en varias vistas, sin tener que regresar al servidor. Ahora los
servidores pueden ser ms escalables, gracias a la reduccin de las cargas de
ancho de banda y computacin. Adems, dado que los datos se intercambian
en el formato XML, se pueden combinar fcilmente desde distintas fuentes.
XML es muy valioso para Internet, as como para los entornos de intranets
corporativas de gran tamao, pues proporciona interoperabilidad mediante un
formato basado en estndares flexible y abierto, con formas nuevas de acceso
a las bases de datos existentes y de entregar datos a clientes de Web. Las
aplicaciones se pueden generar rpidamente, su mantenimiento es ms
sencillo y pueden ofrecer fcilmente varias vistas de los datos estructurados.

(6758&785$'(;0/
Un documento XML tiene dos estructuras, una lgica y otra fsica. Fsicamente,
el documento est compuesto por unidades llamadas entidades. Una entidad
puede hacer referencia a otra entidad, causando que esta se incluya en el
documento. Cada documento comienza con una entidad documento, tambin
llamada raz. Lgicamente, el documento est compuesto de declaraciones,
elementos, comentarios, referencias a caracteres e instrucciones de
procesamiento, todos los cuales estn indicados por una marca explcita. Las
estructuras lgica y fsica deben encajar de manera adecuada:
Los documentos XML se dividen en dos grupos, documentos bien formados y

documentos vlidos.
Un objeto textual o documento XML se dice que est bien formado si,
considerndolo como conjunto, encaja con las especificaciones XML de
produccin, lo que implica:
Contiene uno o ms elementos.

Hay exactamente un elemento, llamado raz o elemento documento, de
forma que ninguna parte del mismo aparece en el contenido de ningn
otro elemento. Para todos los dems elementos, si la etiqueta inicial est
en el contenido de otro elemento, la etiqueta final forma parte del
contenido del mismo elemento. Dicho de forma ms clara, los
elementos, delimitados por una etiqueta de inicio y otra de final, se
encuentran anidados correctamente.
Cumple todas las restricciones que proporciona su especificacin a
travs del DTD. Si no se utiliza DTD, el documento debe comenzar con
un Declaracin de Documento nico (SDD, Standalone Document
Declaration) que indique:
<?xml version="1.0" standalone="yes"?>
Cada una de sus partes procesadas esta bien formada.
Todas las etiquetas deben estar balanceadas: esto es, todos los
elementos que contengan datos de tipo carcter deben tener etiquetas
de principio y fin (no est permitida la omisin excepto para los
elementos vacos.).
Todos los valores de los atributos deben ir entrecomillados (el carcter
comilla simple [el apstrofe] puede utilizarse si el valor contiene
caracteres comillas dobles, y viceversa): si necesitas ambos, utiliza
' y "
Cualquier elemento VACO (por ejemplo aquellos que no tienen etiqueta
final como <IMG>, <HR>, y <BR> y otros de HTML) deben terminar con
'/>' o debes hacerlos no VACOS aadindoles una etiqueta de fin;
Ejemplo: <BR> se convertir en <BR/> o en <BR></BR>.

No debe haber etiquetas aisladas (< &) en el texto (p.e. debe darse
como < y &), y la secuencia ]]> debe darse como ]]> si no
ocurre esto como final de una seccin marcada como CDATA;
Los elementos deben anidar dentro de s sus

Los Archivos bien-formados sin-DTD pueden utilizar atributos en sus

elementos, pero stos deben ser todos del tipo CDATA, por defecto.
De un documento bien formado, se dice adems que es vlido, si tiene DTD

como el resto de aplicaciones SGML. Un archivo XML vlido comienza como
cualquier otro archivo SGML, con una Declaracin de Tipo de Documento:
<?xml version="1.0"?>
<!DOCTYPE anuncio SYSTEM
"http://www.mirandaconsultoresperu.com/estructura.dtd">
<anuncio>
<titulo>...<foto/>...</titulo>
<texto>...</texto>
</anuncio>
Dado que XML est diseado para ser un subconjunto de SGML, cualquier
documento XML vlido debe ser tambin un documento SGML vlido.
(6758&785$6/*,&$6
Cada documento XML contiene uno o ms elementos, cuyos lmites estn

delimitados por etiquetas de comienzo y de final o, en el caso de elementos
vacos, por una etiqueta de elemento vaco.
Cada elemento tiene un tipo, identificado por un nombre, denominado
identificador genrico, y puede tener un conjunto de especificaciones de
atributos.
Cada especificacin de atributo tiene un nombre y un valor. Estas
especificaciones no restringen la semntica, el uso o (mas all de la sintaxis)
los nombres de los tipos de los elementos y los atributos, excepto de los
nombres que comienzan por XML, que se reservan para estandarizar etiquetas
o atributos en versiones posteriores del estndar.
(6758&785$6)6,&$6

Un documento XML puede consistir en una o ms unidades de
almacenamiento virtual, llamadas entidades. Todas estas unidades tienen
contenido y todas ellas (excepto la entidad documento y el subconjunto externo
del DTD) estn identificadas por un nombre. Cada documento XML contiene
una entidad, llamada entidad documento, que sirve como punto de comienzo
para el procesador XML y puede contener el documento completo.
Las entidades pueden ser analizadas o sin analizar (tambin llamadas

procesadas o sin procesar). El contenido de una entidad analizada se conoce
tambin como texto de reemplazo, y es parte integrante del documento. Las
entidades no analizadas son recursos (tales como enlaces) cuyo contenido
puede o no ser texto, o en caso de que sea texto que no sea XML. Cada
entidad no asociada tiene una notacin asociada, identificada por un nombre.
Aparte de obligar al procesador XML a haga accesible a la aplicacin el nombre
de esta notacin y sus identificadores asociados, XML no proporciona ninguna
otra restriccin sobre el contenido de estas entidades. La forma de invocar
ambos tipos de entidades es a travs de su nombre, en el caso de las

analizadas a travs de su referencia a entidad y en el de las no analizadas a

travs de sus atributos de entidad.
Las entidades generales, son entidades analizadas que se usan en el interior

del documento.
Las entidades parametrizadas son entidades analizadas que se usan en el

mbito del DTD. Estos dos tipos de entidades usan distintos tipos de
referencias y se reconocen en contextos distintos.
XML consta de cuatro especificaciones (el propio XML sienta las bases
sintcticas y el alcance de su implementacin):
1. '7' (Document Type Definition): Definicin del tipo de documento. Es,

en general, un archivo(s) que encierra una definicin formal de un tipo
de documento y, a la vez, especifica la estructura lgica de cada
documento. Define tanto los elementos de una pgina como sus
atributos. El DTD del XML es opcional. En tareas sencillas no es
necesario construir una DTD, entonces se tratara de un documento
"bien formado" (well-formed) y si lleva DTD ser un documento
"validado" (valid).
2. ;6/ (eXtensible Stylesheet Language): Define o implementa el lenguaje

de estilo de los documentos escritos para XML. Permite modificar el
aspecto de un documento logrando mltiple columnas, texto girado,
orden de visualizacin de los datos de una tabla, mltiples tipos de letra
con amplia variedad en los tamaos. Este estndar est basado en el
lenguaje de semntica y especificacin de estilo de documento (DSSSL,
Document Style Semantics and Specification Language, ISO/IEC 10179)
y, por otro lado, se considera ms potente que las hojas de estilo en
cascada (CSS, Cascading Style Sheets), usado en el lenguaje DHTML.
XSL pueda ser utilizado donde se requiera ms potencia de diseo
como documentos XML que encierran datos estructurados (tablas,
organigramas, etc.).
3. ;// (eXtensible Linking Language): Define el modo de enlace entre

diferentes enlaces. Se considera que es un subconjunto de HyTime
(Hipermedia/Timed-based structuring Language o Lenguaje de
estructuracin Hipermedia/basado en el tiempo, ISO 10744) y sigue
algunas especificaciones del TEI (Text Encoding Initiative o Iniciativa de
codificacin de texto).
4. ;8$ (XML User Agent): Estandarizacin de navegadores XML. Todava

est en proceso de creacin de borradores de trabajo. Se aplicar a los
navegadores para que compartan todas las especificaciones XML.

$3/,&$&,21(6'(;0/
Algunas de las aplicaciones de XML son:

'20 (Document Object Model) se desarroll una API soportada por
Ofrecer mecanismos ms verstiles de mostrar datos. Bajo el nombre de
todos los procesadores de XML y HTML. La idea detrs de esta API es

que podamos representar (a travs de javascripts o JavaApplets)
documentos XML en los navegadores Web, pero de una forma ms
sofisticada que los documentos HTML, ya que XML no solo proporciona
una sintaxis, sino tambin una semntica.
Buscadores inteligentes. Debido a que la informacin en los documentos

XML est etiquetada por su significado de forma precisa, podemos
localizarla de forma mucho ms clara que en documentos HTML. Con
DTDs estandarizados para distintas aplicaciones (libreras, tiendas de
deporte, catlogos de componentes,) podramos programar
buscadores Web que recuperasen informacin sobre un producto de
cualquier website en el mundo sabiendo que todos tendrn el mismo
formato de datos (gracias al DTD), aunque no tengan necesariamente la
misma representacin grfica (gracias al XML/XSL).
Intercambio de informacin entre sistemas heterogneos. El fundamento

es el mismo que para los buscadores inteligentes. Debido a que el DTD
proporciona un formato estndar para representar la informacin de un
tema especfico, puede usarse para simplificar el intercambio de
informacin entre distintas fuentes (actualmente existen ya dos DTD
estandarizados uno para fabricantes de chips y otro para industrias
qumicas, llamado CML).
9(17$-$6'(;0/
Los autores y proveedores pueden disear sus propios tipos de

documentos usando XML, en vez de limitarse a HTML. Los tipos de
documentos pueden ser explcitamente 'hechos a la medida de una
audiencia', por lo que las difciles manipulaciones que debes hacer con
HTML para conseguir efectos especiales sern cosa del pasado: autores
y diseadores sern libres de inventar sus propias etiquetas;
La informacin contenida puede ser ms 'rica' y fcil de usar, porque las
habilidades hipertextuales de XML son mayores que las de HTML.
XML puede dar ms y mejores facilidades para la representacin en los
visualizadores.
La informacin ser ms accesible y reutilizable, porque la flexibilidad de
las etiquetas de XML pueden utilizarse sin tener que amoldarse a reglas
especficas de un fabricante, como es el caso de HTML.
(MHPSORV
Aunque a primera vista, un documento XML puede parecer similar a HTML, hay
una diferencia principal. Un documento XML contiene datos que se

autodefinen, exclusivamente. Un documento HTML contiene datos mal

definidos, mezclados con elementos de formato. En XML se separa el
contenido de la presentacin de forma total.
Una forma de entender rpidamente la estructura de un documento XML, es
viendo un pequeo ejemplo:
<!DOCTYPE MENSAJE SYSTEM "mensaje.dtd">
<mensaje>
<remite>
<nombre>Marcelo </nombre>
<email>marcelomirandam@hotmail.com</email>
</remite>
<destinatario>
<nombre>Juan </nombre>
<email>jperez@terra.com.pe</email>
</destinatario>
<asunto>Hola Juan</asunto>
<texto>
<parrafo>Hola qu tal? Hace <enfasis>mucho</enfasis> que
no escribes. A ver si llamas y quedamos para conversar </parrafo>
</texto>
</mensaje>
Este mismo documento puede ser visto de forma grfica, para comprender
mejor la estructura de un documento XML.
(6758&785$-(5548,&$'((/(0(1726
Los documentos XML deben seguir una estructura estrictamente jerrquica con
lo que respecta a las etiquetas que delimitan sus elementos. Una etiqueta debe
estar correctamente "incluida" en otra. Adems, los elementos con contenido,
deben estar correctamente "cerrados". En el siguiente ejemplo, la primera lnea
sera incorrecta en XML, no as la segunda:
<LI>HTML <B>permite <I>esto</B></I>

<LI>En XML la <B>estructura <I>es</I> jerrquica</B>.</LI>
(WLTXHWDV9DFtDV

XML permite definir elementos sin contenido de la siguiente forma: <elemento-

sin-contenido/> En el siguiente ejemplo, la primera lnea sera incorrecta en
XML, no as la segunda:
<LI>Esto es HTML<BR>en el que casi todo est permitido</LI>
8Q6ROR(OHPHQWR5DL]
<LI>En XML, somos<BR/> ms restrictivos</LI>
Los documentos XML slo permiten un elemento raiz, del que todos los dems
sean parte. Es decir, la jerarqua de elementos de un documento XML bien-
formado slo puede tener un elemento inicial.
Valores de atributos
Los valores de atributos en XML, al contrario de HTML, siempre deben estar

encerradas en comillas simples ( ' ) o dobles ( " ). En el siguiente ejemplo, la
primera lnea sera incorrecta en XML, no as la segunda:
<A HREF=http://www.mirandaconsultoresperu.com/>
<A HREF="http://www. mirandaconsultoresperu.com/">
7LSRGHOHWUDHVSDFLRVHQEODQFR
El XML es sensible al tipo de letra utilizado, es decir, trata las maysculas y

minsculas como caracteres diferentes. Si un elemento de XML est definido
como "ELEMENTO", no podemos usar "elemento", ni "Elemento", ni
"eleMENto" para referirnos a l.
Existe un conjunto de caracteres denominados "espacios en blanco" que los
procesadores XML tratan de forma diferente en el marcado XML. Estos
caracteres son los "espacios" (Unicode/ASCII 32), tabuladores (Unicode/ASCII
9), retornos de carro (Unicode/ASCII 13) y los saltos de lnea (Unicode/ASCII
10).
La especificacin XML 1.0 permite el uso de esos "espacios en blanco" para
hacer ms legible el cdigo, y en general son ignorados por los procesadores
XML.
En otros casos, sin embargo, los "espacios en blanco" resultan muy
significativos, por ejemplo, para separar las palabras en un texto, o separar
lneas de prrafos diferentes.
1RPEUDQGRFRVDV
Al utilizar XML, es necesario asignar nombres a las estructuras, tipos de

elementos, entidades, elementos particulares, etc. En XML los nombres tienen
algunas caractersticas en comn.
Segn la especificacin XML 1.0
Un nombre [empieza] con una letra o uno o ms signos de puntuacin, y
[contina] con letras, dgitos, guiones, rayas, dos puntos o puntos,
denominados de forma global como caracteres de nombre. Los nombres que

empiezan con la cadena "xml", se reservan para la estandarizacin de esta o

de futuras versiones de esta especificacin.
Resumiendo, no se pueden crear nombres que empiecen con la cadena "xml",
"xMl", "XML" o cualquier otra variante. Las letras y rayas se pueden usar en
cualquier parte del nombre. Tambin se pueden incluir dgitos, guiones y
caracteres de punto, pero no se puede empezar por ninguno de ellos. El resto
de caracteres, como algunos smbolos, y espacios en blanco, no se pueden

usar.
0DUFDGR\GDWRV
Las construcciones como etiquetas, referencias de entidad y declaraciones se

denominan "marcas". stas son las partes del documento que el procesador
XML espera entender. El resto del documento que se encuentra entre las
marcas, son los datos que resultan entendibles por las personas.
Es sencillo reconocer las marcas en un documento XML. Son aquellas
porciones que empiezan con "" y acaban con "!", o bien, en el caso de las
referencias de entidad, empiezan por " " y acaban con "".
(/35/2*2
Aunque no es obligatorio, los documentos XML pueden empezar con una lnea
que describen la versin de XML, el tipo de documento, y otras cosas.
La primera, o "declaracin XML", define la versin de XML usada. Hasta ahora
slo hay una, la "1.0" Adems, en la "declaracin XML" especificamos la
codificacin del documento, que puede ser, por ejemplo, US-ASCII (7 bits) o
UTF-8 (cdigo Unicode del que el ASCII es un subconjunto), UCS-2, EUC-JP,
Shift_JIS, Big5, ISO-8859-1 hasta ISO-8859-7. En general, y para uso con
lenguajes europeos (incluyendo el juego de caracteres especiales del
castellano, usamos UTF-7 o ISO-8859-1)
Adems, se puede incluir una declaracin de documento autnomo
(standalone), que controla qu componentes de la DTD son necesarios para
completar el procesamiento del documento.
"[POYHUVLRQ HQFRGLQJ 87)VWDQGDORQH \HV"!
La segunda, o "declaracin de tipo de documento", define qu tipo de

documento estamos creando para ser procesado correctamente. Es decir,
definimos que Declaracin de Tipo de Documento (DTD Document Type
Definition) valida y define los datos que contiene nuestro documento XML.
En ella se define el tipo de documento, y dnde encontrar la informacin sobre
su Definicin de Tipo de Documento, mediante un identificador pblico
(PUBLIC) que hace referencia a dicha DTD, o mediante un Identificador
Universal de Recursos (URI) precedido por la palabra SYSTEM.
(MHPSORV
<!DOCTYPE MENSAJE SYSTEM "mensaje.dtd">

<!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 3.2 Final/ /EN">
<!DOCTYPE LABEL SYSTEM "http://www.empresa.com/dtds/label.dtd">

(/(0(1726
Los elementos XML pueden tener contenido (ms elementos, caracteres, o

ambos a la vez), o bien ser elementos vacos.
Un elemento con contenido es, por ejemplo:
<nombre>Marcelo </nombre>
<aviso tipo="urgente" >Urgente, terminar el sistema de certificacin de
pymes</aviso>
Siempre empieza con una <etiqueta> que puede contener atributos o no, y
termina con una </etiqueta> que debe tener el mismo nombre. Al contrario que
HTML, en XML siempre se debe "cerrar" un elemento.
Hay que tener en cuenta que el smbolo "<" siempre se interpreta como inicio
de una etiqueta XML. Si no es el caso, el documento no estar bien-formado.
Un elemento vaco, es el que no tiene contenido (claro). Por ejemplo:

<identificador DNI="23123244"/>
<linea-horizontal/>
Al no tener una etiqueta de "cierre" que delimite un contenido, se utiliza la

forma <etiqueta/>, que puede contener atributos o no. La sintaxis de HTML
permite etiquetas vacas tipo <hr> o <img src="...">. En HTML reformulado para
que sea un documento XML bien-formado, se debera usar <hr/> o <img
src="..."/>
(17,'$'(635('(),1,'$6
En XML 1.0, se definen cinco entidades para representar caracteres especiales

y que no se interpreten como marcado por el procesador XML. Es decir, que
as podemos usar el carcter "<" sin que se interprete como el comienzo de
una etiqueta XML, por ejemplo.
(QWLGDG &DUDFWHU
DPS
OW
JW !
DSRV

TXRW
&20(17$5,26
A veces es conveniente insertar comentarios en el documento XML, que sean

ignorados por el procesado de la informacin y las reproducciones del
documento. Los comentarios tienen el mismo formato que los comentarios de
HTML. Es decir, comienzan por la cadena "".

<!DOCTYPE EJEMPLO [



<!ELEMENTO EJEMPLO (#PCDATA)>

]>
<EJEMPLO>texto texto texto bla bla bla

</EJEMPLO>

Se pueden introducir comentarios en cualquier lugar de la instancia o del
prlogo, pero nunca dentro de las declaraciones, etiquetas, u otros
comentarios.
'2&80(177<3('(),1,7,216'7'V
Crear una definicin del tipo de documento (DTD) es como crear nuestro propio
lenguaje de marcado, para una aplicacin especfica. Por ejemplo, podramos
crear un DTD que defina una tarjeta de visita. A partir de ese DTD, tendramos
una serie de elementos XML que nos permitiran definir tarjetas de visita.
La DTD define los tipos de elementos, atributos y entidades permitidas, y

puede expresar algunas limitaciones para combinarlos.
Los documentos XML que se ajustan a su DTD, se denominan "vlidos". El
concepto de "validez" no tiene nada que ver con el de estar "bien-formado". Un
documento "bien-fomado" simplemente respeta la estructura y sintaxis
definidas por la especificacin de XML. Un documento "bien-formado" puede
adems ser "vlido" si cumple las reglas de una DTD determinada. Tambin
existen documentos XML sin una DTD asociada, en ese caso no son "vlidos",
pero tampoco "invlidos" simplemente "bien-formados" o no.
La DTD puede residir en un fichero externo, y quiz compartido por varios

(puede que miles) de documentos. O bien, puede estar contenida en el propio
documento XML, como parte de su declaracin de tipo de documento.
(MHPSOR
<!DOCTYPE etiqueta[
<!ELEMENT etiqueta (nombre, direccion, distrito)>
<!ELEMENT nombre (#PCDATA)>
<!ELEMENT direccion (#PCDATA)>
<!ELEMENT distrito (#PCDATA)>
<etiqueta>
<nombre>Juan</nombre>
<direccion>Jr. Los alisos 245</direccion>
<distrito>San borja</distrito>
</etiqueta>
La declaracin del tipo de documento comienza en la primera lnea y termina

con "]>". Las declaraciones DTD son las lneas que empiezan con
"<!ELEMENT" y se denominan declaraciones de tipo elemento. Tambin se
pueden declarar atributos, entidades y anotaciones para una DTD.

'(&/$5$&,21(67,32(/(0(172

Los elementos son la base de las marcas XML, y deben ajustarse a un tipo de
documento declarado en una DTD para que el documento XML sea
considerado vlido.
Las declaraciones de tipo de elemento deben empezar con "<!ELEMENT"
seguidas por el identificador genrico del elemento que se declara. A
continuacin tienen una especificacin de contenido.
Por ejemplo:
<!ELEMENT receta (titulo, ingredientes, procedimiento)>
En este ejemplo, el elemento <receta> puede contener dentro elementos

<titulo>, <ingredientes> y <procedimiento>, que, a su vez, estarn definidos
tambin en la DTD y podrn contener ms elementos.
Siguiendo la definicin de elemento anterior, este ejemplo de documento XML
sera vlido:
<receta>
<titulo>...</titulo>
<ingredientes>...</ingredientes>
<procedimiento>...</procedimiento>
</receta>
Pero no este:
<receta>
<parrafo>Esto es un prrafo</parrafo>
<titulo>...</titulo>
<ingredientes>...</ingredientes>
<procedimiento>...</procedimiento>
</receta>
La especificacin de contenido puede ser de cuatro tipos:
(037<
Puede no tener contenido. Suele usarse para los atributos.
<!ELEMENT salto-de-pagina EMPTY>
$1<
Puede tener cualquier contenido. No se suele utilizar, ya que es conveniente
estructurar adecuadamente nuestros documentos XML.
<!ELEMENT batiburrillo ANY>
0L[HG
Puede tener caracteres de tipo datos o una mezcla de caracteres y sub-
elementos especificados en la especificacin de contenido mixto.

<!ELEMENT enfasis (#PCDATA)>

<!ELEMENT parrafo (#PCDATA|enfasis)*>
Por ejemplo, el primer elemento definido en el ejemplo (<enfasis>) puede

contener datos de carcter (#PCDATA). Y el segundo (<parrafo>) puede
contener tanto datos de carcter (#PCDATA) como sub-elementos de tipo
<enfasis>.
(OHPHQW
Slo puede contener sub-elementos especificados en la especificacin de
contenido.
<!ELEMENT mensaje (remite, destinatario, texto)>
02'(/26'(&217(1,'2
Un modelo de contenido es un patrn que establece los sub-elementos

aceptados, y el orden en que se acepta.
Un modelo sencillo puede tener un solo tipo de sub-elemento:
<!ELEMENT aviso (parrafo)>
Esto indica que <aviso> slo puede contener un solo <parrafo>.

<!ELEMENT aviso (titulo, parrafo)>
La coma, en este caso, denota una secuencia. Es decir, el elemento <aviso>

debe contener un <titulo> seguido de un <parrafo>.
<!ELEMENT aviso (parrafo | grafico)>

La barra vertical "|" indica una opcin. Es decir, <aviso> puede contener o bien
un <parrafo> o bien un <grafico>. El nmero de opciones no est limitado a
dos, y se pueden agrupar usando parntesis.
<!ELEMENT aviso (titulo, (parrafo | grafico))>

En este ltimo caso, el <aviso> debe contener un <titulo> seguido de un
<parrafo> o de un <grafico>.
Adems, cada partcula de contenido puede llevar un indicador de frecuencia,
que siguen directamente a un identificador general, una secuencia o una
opcin, y no pueden ir precedidos por espacios en blanco.
,QGLFDGRUHVGHIUHFXHQFLD
? Opcional (0 o 1 vez)
* Opcional y repetible (0 o ms veces)
+ Necesario y repetible (1 o ms veces)
Para entender esto, vamos a ver un ejemplo.

<!ELEMENT aviso (titulo?, (parrafo+, grafico)*)>
En este caso, <aviso> puede tener <titulo>, o no (pero slo uno), y puede tener
cero o ms conjuntos<parrafo><grafico>, <parrafo><parrafo><grafico>, etc.

(-(03/26',9(5626'(;0/
(MHPSOR
Este ejemplo crea una base de datos alumnos1.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>

<ALUMNOS>
<ALUMNO>
<NUMERO>1</NUMERO>
<NOMBRE>Miguel</NOMBRE>
<APELLIDO>Salas</APELLIDO>
<NIVEL>Bsico</NIVEL>
<CURSO>XML</CURSO>
</ALUMNO>
<ALUMNO>
<NUMERO>2</NUMERO>
<NOMBRE>Roberto</NOMBRE>
<APELLIDO>Salazar</APELLIDO>
<NIVEL>Intermedio</NIVEL>
<CURSO>Windows XP</CURSO>
</ALUMNO>
</ALUMNOS>
El siguiente archivo HTML muestra los datos de alumnos1.xml mediante una

tabla.
<html><head><title>XML 1</title>
<style type="text/css">
body {font-family:Arial,sans-serif; font-size:12px; font-weight:normal}
h3 {font-size:16px;color:Yellow}
</style>
</head>
<body><h1>XML 1</h1>
<xml id="data" src="alumnos1.xml"></xml>
<table datasrc="#data" border="0" cellspacing="4" cellpadding="2">
<caption>LISTA DE ALUMNOS</caption>
<thead>
<tr bgcolor="#aaaacc">
<th>Nm</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Curso</th>
<th>Nivel</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#ccddcc">
<td align="center"><span datafld="nmero"></span></td>
<td align="right"><span datafld="nombre"></span></td>

<td><b><span datafld="apellido"></span></b></td>
<td align="center"><span datafld="curso"></span></td>
<td bgcolor="#ffdddd"><u><span datafld="nivel"></span><u></td>
</tr>
</tbody>
</table></body></html>
(MHPSOR (alumnos2.xml)

<ALUMNOS>
<ALUMNO NMERO="1">
<NOMBRE>Raul</NOMBRE>
<APELLIDO>Mendoza</APELLIDO>
<EDAD>19</EDAD>
<CURSOS>
<CURSO1>XML</CURSO1>
<NIVEL1>Introduccin</NIVEL1>
<CURSO2>HTML</CURSO2>
<NIVEL2>Introduccin</NIVEL2>
</CURSOS>
<OBSERVACIONES>Pendiente de pago</OBSERVACIONES>
</ALUMNO>
<ALUMNO NMERO="2">
<NOMBRE>Javier</NOMBRE>
<EDAD></EDAD>
<CURSOS>
<CURSO1>Windows 2000</CURSO1>
<NIVEL1>Avanzado</NIVEL1>
<CURSO2>UNIX</CURSO2>
<NIVEL2>Bsico</NIVEL2>
</CURSOS>
<OBSERVACIONES>Hizo el curso de Iniciacin en
marzo</OBSERVACIONES>
</ALUMNO>
</ALUMNOS>

0RVWUDQGRGDWRVSRUQLYHOHV
<html><head>
<title>XML 2</title>
body {font-family:Verdana,sans-serif; font-size:12px; font-weight:normal}
h3 {font-size:16px;color:navy}
</style>
</head>
<body>
<h1>XML 2</h1>
<xml id="data2" src="alumnos2.xml"></xml>
<table datasrc="#data2" border="0" cellspacing="4" cellpadding="2">
<caption>LISTA DE ALUMNOS</caption>
<thead>
<tr bgcolor="#cc99cc">
<th>Nm</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Cursos / Niveles</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#cccccc">
<td align="center"><span datafld="nmero"></span></td>
<td align="right"><span datafld="nombre"></span></td>
<td><b><span datafld="apellido"></span></b></td>
<td>
<table datasrc="#ListaAlumnos8" datafld="cursos" cellspacing="0">
<tbody>
<tr>
<td>
<b><span datafld="curso1"></span></b> <i><span
datafld="nivel1"></span></i><br>
datafld="nivel2"></span></i><br>
datafld="nivel3"></span></i>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

(MHPSOR(alumnos3.xml)

<ALUMNOS>
<ALUMNO>
<NMERO>001</NMERO>
<NOMBRE>jose</NOMBRE>
<APELLIDO>Morales</APELLIDO>
<EDAD>29</EDAD>
<NIVEL>Introduccin</NIVEL>
<CURSO>XML</CURSO>
</ALUMNO>
<ALUMNO>
<NMERO>2</NMERO>
<EDAD></EDAD>
<NIVEL>Avanzado</NIVEL>
<CURSO>Windows 2000</CURSO>
<OBSERVACIONES>Ninguno</OBSERVACIONES>
</ALUMNO>
</ALUMNOS>
0RVWUDQGRUHJLWURVPHGLDQWHERWRQHVGHSDJLQDFLyQ
</style>
</head>
<body>
<h1>XML 3</h1>
<h3>LISTA DE ALUMNOS</h3>
<p>Nmero: <b><span datasrc="#data3" datafld="nmero"></span></b></p>
<p>Alumno: <b><span datasrc="#data3" datafld="nombre"></span>

<span datasrc="#data3" datafld="apellido"></span></b></p>

<p>Edad: <b><span datasrc="#data3" datafld="edad"></span></b></p>
<hr width="300" align="left">
<p>Curso: <b><span datasrc="#data3" datafld="curso"></span></b></p>
<p>Nivel: <b><span datasrc="#data3" datafld="nivel"></span></b></p>
<p>Observaciones: <b><span datasrc="#data3" datafld="observaciones">
</span></b></p>
<button onclick="data3.recordset.MoveFirst()" title="Principio"

id="prin">  |<  </button>
<button onclick="if (! data3.recordset.BOF) data3.recordset.MovePrevious()"

title="Anterior"> < </button>
<button onclick="if (! data3.recordset.EOF) data3.recordset.MoveNext()"

title="Siguiente"> > </button>
<button onclick="data3.recordset.MoveLast()"
title="Final">  >|  </button>
</body>
</html>
(MHPSOR(alumnos4.xml)

<ALUMNOS>
<ALUMNO>
<NMERO>1</NMERO>
<NOMBRE>Raul</NOMBRE>

<APELLIDO>Mendoza</APELLIDO>
<EDAD>19</EDAD>
<NIVEL>Introduccin</NIVEL>
<CURSO>XML</CURSO>
<SEXO>H</SEXO>
</ALUMNO>
<ALUMNO>
<NMERO>2</NMERO>
<EDAD></EDAD>
<NIVEL>Avanzado</NIVEL>
<CURSO>Windows 2000</CURSO>
<SEXO>H</SEXO>
<OBSERVACIONES>Ninguno</OBSERVACIONES>
</ALUMNO>
</ALUMNOS>
0RVWUDQGRUHJLVWURVPHGLDQWHXQIRUPXODULR
</style>
</head>
<body>
<h1>XML 4</h1>
<h3>LISTA DE ALUMNOS</h3>
<p>Nmero: <b><span datasrc="#data4" datafld="nmero"></span></b></p>

<p>Nombre: <input type="text" datasrc="#data4" datafld="nombre" size="25">
<p>Apellido: <input type="text" datasrc="#data4" datafld="apellido" size="25">
<p>Edad: <b><span datasrc="#data4" datafld="edad"></span></b></p>
<p>Curso: <select datasrc="#data4" datafld="curso" size="1">
<option value="HTML">HTML
<option value="UNIX">UNIX
<option value="Windows 2000">Windows 2000
<option value="XML">XML
</select><p>
<p>Nivel: <select datasrc="#data4" datafld="nivel" size="1">
<option value="Introduccin">Introduccin
<option value="Bsico">Bsico
<option value="Medio">Medio
<option value="Avanzado">Avanzado
</select><p>

<p>Sexo: <input type="radio" datasrc="#data4" datafld="sexo"

value="H">Hombre
<input type="radio" datasrc="#data4" datafld="sexo" value="M">Mujer</p>
<p>Observaciones: <b><span datasrc="#data4" datafld="observaciones">
</span></b></p>
<button onclick="data4.recordset.MoveFirst()" title="Principio"

id="prin">  |<  </button>
<button onclick="if (! data4.recordset.BOF) data4.recordset.MovePrevious()"

title="Anterior"> < </button>
<button onclick="if (! data4.recordset.EOF) data4.recordset.MoveNext()"

title="Siguiente"> > </button>
<button onclick="data4.recordset.MoveLast()"
title="Final">  >|  </button>
</body>
</html>

Fundamentos HTML, JavaScript y XML para el desarrollo web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Fundamentos HTML, JavaScript y XML para el desarrollo web

Cargado por

Copyright:

Formatos disponibles

,1752'8&&,1

En un mundo que cada da ms se va gobernando por el poder de la tecnologa

Desde 1992, la World Wide Web (www) constituye el servicio de Internet ms

Al termino del curso de fundamentos de HTML, Javascript y XML estar en

HTML (+\SHU7H[W0DUNXS/DQJXDJH) es un lenguaje interpretado que permite

agradable con HQODFHV (K\SHUOLQNV) que conducen a otros documentos o

fuentes de informacin relacionadas y con LQVHUFLRQHV multimedia (grficos,

La descripcin se basa en especificar en el texto la estructura lgica del

instrucciones llamadas HWLTXHWDV (WDJV que indican al navegador como se

debe visualizar el documento en la pantalla siendo el principio esencial del

El formato general para la definicin de las etiquetas es de la siguiente forma:

Las letras de la etiqueta (tag) pueden estar en maysculas o minsculas,

<HTML> [Todo el documento] </HTML>

El documento en s est dividido en dos zonas principales:

El encabezamiento, comprendido entre las etiquetas +($'! y +($'!

Dentro del encabezamiento hay informacin del documento, que no se ve en la

etiquetas 7,7/(! y 7,7/(! El ttulo debe ser breve y descriptivo de su

su ERRNPDUN (o agenda de direcciones).

Centro de Cmputo Sistemas UNI 2

Por tanto, la estructura queda de esta manera:

En el encabezado aparte del ttulo se definen las Meta Etiquetas (MetaTags)

Cuando los robots o spiders de buscadores como Google visitan un servidor, lo

<META NAME=description content=Texto descriptivo>

<META NAME=keywords content=Palabras clave>

Las palabras clave se establecen separadas por comas. No se recomienda

<META NAME=Author content=Nombre del autor>

<META NAME=lang content=es>

Este es el idioma en que se escribi el documento, algunos ejemplos son es

<META http-equiv=refresh content=0;URL=http://www.otrositio.com/>

KWWSHTXLY UHIUHVK determina la accin refrescar

Centro de Cmputo Sistemas UNI 3

FRQWHQW  determina el tiempo en segudos que se tarda en iniciar la

85/ KWWSZZZRWURVLWLRFRP Es el sitio o pgina a donde se dirige

el trfico; s no se define ninguno la pgina se recarga automticamente

En el cuerpo del documento va encerrado todo aquello que deseamos que

Antes de crear nuestra primera pgina, unas consideraciones sobre el texto:

Los encabezados se emplean para establecer ttulos y subttulos,

cortando el flujo de texto mediante la etiqueta %5! %5! La etiqueta de

cierre (</BR>) es opcional.

Una etiqueta muy interesante es la de centrado &(17(5! y &(17(5! (no

Centro de Cmputo Sistemas UNI 4

Lo importante del esquema anterior es que se mantenga el orden correcto de

Permiten controlar el aspecto de la linea horizontal.

+5VL]H QZLGWK QQDOLJQ $OLQHDFLRQQRVKDGH!

VL]H Q Permite modificar la altura (espesor) de la barra

ZLGWK QQ Indica el ancho de la lnea horizontal donde nn

DOLJQ $OLQHDFLyQ Establece la alineacin horizontal de la

Centro de Cmputo Sistemas UNI 5

1RVKDGH Elimina el efecto de sombra y tridimensional que tiene

Se puede alinear a la izquierda:

<HR WIDTH=50% ALIGN=LEFT>

<HR WIDTH=35% ALIGN=RIGHT>

Se puede variar su espesor:

Si queremos obtener mltiples lneas en blanco no basta con repetir la etiqueta

Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras

Centro de Cmputo Sistemas UNI 6

Para destacar alguna parte del texto se pueden usar:

%!\%! para establecer negrita (bold).

Otra etiqueta interesante es 35(!\35(! El texto que se encuentre entre

Con la etiqueta 77! \ 77! conseguimos tambin que el texto tenga un

La etiqueta %/2&.4827(! \ %/2&.4827(! se utiliza para

subndices, que se consiguen con las etiquetas 683! 683! y 68%!

68%! respectivamente. As, por ejemplo:

El encabezamiento, comprendido entre las etiquetas +($'! y +($'!

etiquetas 7,7/(! y 7,7/(! El ttulo debe ser breve y descriptivo de su

KWWSHTXLY UHIUHVK determina la accin refrescar

FRQWHQW determina el tiempo en segudos que se tarda en iniciar la

85/ KWWSZZZRWURVLWLRFRP Es el sitio o pgina a donde se dirige

cortando el flujo de texto mediante la etiqueta %5! %5! La etiqueta de

Una etiqueta muy interesante es la de centrado &(17(5! y &(17(5! (no

+5VL]H QZLGWK QQDOLJQ $OLQHDFLRQQRVKDGH!

VL]H Q Permite modificar la altura (espesor) de la barra

ZLGWK QQ Indica el ancho de la lnea horizontal donde nn

DOLJQ $OLQHDFLyQ Establece la alineacin horizontal de la

1RVKDGH Elimina el efecto de sombra y tridimensional que tiene

%!\%! para establecer negrita (bold).

Otra etiqueta interesante es 35(!\35(! El texto que se encuentre entre

Con la etiqueta 77! \ 77! conseguimos tambin que el texto tenga un

La etiqueta %/2&.4827(! \ %/2&.4827(! se utiliza para

subndices, que se consiguen con las etiquetas 683! 683! y 68%!

68%! respectivamente. As, por ejemplo:

OW para < (less than, menor que)

Estos cdigos empiezan siempre con el signo y acaban siempre con

&2/25 55**%% Establece el color del texto definindose

)$&( QRPEUHQRPEUHQ Permite definir el tipo de letra.

prrafo , encabezados, etc. es ',9!',9!

OHIW Alinear a la izquierda

1. Listas desordenadas (no numeradas) 8/!8/!

7\SH HVWLOR Indica el tipo de vieta.

7\SH FDUDFWHU Indica el tipo de numeracin.

6WDUW Q Indica a partir de que nmero va a empezar la lista.

englobada entre las etiquetas '/!\'/!

1) el nombre de la cosa a definir, que se consigue con la etiqueta '7!

2) la definicin de dicha cosa, que se consigue con la etiqueta ''! (definition

(O IRUPDWR -3(* El mtodo de compresin utilizado por el formato GIF es

*,)VWUDQVSDUHQWHV Una caracterstica muy til del formato GIF es la opcin

*,)VHQWUHOD]DGRV Normalmente, un archivo GIF contiene los datos de cada