Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
'(),1,&,1'(//(1*8$-(+70/
diversos navegadores como Internet Explorer, Netscape, Opera, etc.
y !.
elementos de una pgina Web. Estos comandos se escriben entre los smbolos
1RPEUHBGHBODB(WLTXHWD!1RPEUHBGHBODB(WLTXHWD!
todo el documento HTML debe estar entre las etiquetas +70/! y +70/!:
Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo,
Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla
principal (texto, imgenes, etc.)
'HVFULSFLyQGHOFRQWHQLGRGHOGRFXPHQWR
3DODEUDV&ODYH
1RPEUHGHODXWRU
,GLRPD
5HGLUHFFLRQDPLHQWRGHXQDSiJLQD
Donde:
la etiqueta 3!.
tecla ENTER. Si queremos separar el texto en distintos prrafos debemos usar
(1&$%(=$'26
6LQWD[LV
<H1>Texto</H1> Texto
<H2>Texto</H2> Texto
<H3>Texto</H3> Texto
<H4>Texto</H4> Texto
<H5>Texto</H5> Texto
<H6>Texto</H6> 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($
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>
/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!
Donde:
Valores:
left: Alinear a la izquierda
right: Alinear a la derecha
center: Estar centrada
$PSOLDFLyQGHODHWLTXHWD+5!
<HR WIDTH=75%>
Ocupa el 75% de su anchura (width) normal.
<HR WIDTH=300>
Tiene una anchura de 300 pixels.
O a la derecha:
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).
<BR><P>
<BR><P>
<BR><P>
<BR><P>
&$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.
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
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:
'RQGH
6,=( Q Permite modificar el tamao de la letra. Se puede especificar
en nmeros absolutos o relativos
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>
%$6()2176,=( !
0123456789ABCDEF
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
$/,1($&,21(6
&(17(5!&(17(5!
La etiqueta que permite centrar texto, imgenes, tablas u otros objetos es
6LQWD[LV
<DIV ALIGN=ALINEACION>Elemento HTML</DIV>
Donde:
ALIGN=ALINEACION: puede ser cualquiera de los siguiente
valores:
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
<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
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
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:
&20(17$5,26129,6,%/(6(1/$3$17$//$
\!
Esto se consigue encerrando dichos comentarios entre estos dos smbolos:
Ejemplo:
<!-- Esto es un comentario al cdigo que no se ver en pantalla -->
,0*(1(6
,0*!
La etiqueta que nos sirve para incluir imgenes en nuestras pginas Web 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).
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.
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:
)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.
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.
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.
conveniente repetir la misma imagen en otras pginas, como por ejemplo para
los botones, iconos, barras de separacin, etc.
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.
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.
',0(16,21$1'2/$,0$*(1
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.
<IMG SRC="logo.gif" WIDTH=150 HEIGHT=75>
(MHPSORSUiFWLFR
Este ejemplo inserta, dimensiona y alinea las imgenes de una pgina Web.
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
(VWUXFWXUDGHORVHQODFHV
7LSRVGHHQODFHV
(QODFHVGHQWURGHODPLVPDSiJLQD
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!<<<$!
$1$0( PDUFD!$!
Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente
etiqueta:
Que resulta como: Pulsa para ir al final (Puedes comprobar cmo salta a la
pantalla final)
(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.
$+5() PLSDJKWPO!+DJDFOLFSDUDLUDOVHJXQGRHMHPSOR$!
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.
(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:
(MHPSORSUiFWLFR
<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>
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
Supongamos que queremos enlazar con la imagen isla.gif por medio de esta
otra imagen: (casa.gif):
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":
(MHPSORSUiFWLFR
<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
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:
(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.
7$%/$6
(VWUXFWXUDGHXQDWDEOD
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias
para confeccionar las tablas.
<TABLE>
[resto de las etiquetas]
</TABLE>
<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>
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>
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
&$37,21! y &$37,21!
de la tabla que indica cul es su contenido. Se consigue con la etiqueta
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:
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>)
<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
&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.
<TABLE BORDER=2>
<TR><TD><IMG SRC="logo.gif"></TD></TR>
</TABLE>
<TABLE BORDER=2>
<TR><TD><A HREF="index.html">Pgina principal </A></TD></TR>
</TABLE>
3RVLFLRQDPLHQWRGHOFRQWHQLGRGHQWURGHODFHOGD
Al centro
A la derecha
Cabecera a la izquierda
9DULDQGRODVGLPHQVLRQHVGHODWDEOD
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.
<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
Por ejemplo, en esta tabla vamos a aadir una fila con una sola celda, que
abarca a dos columnas:
O, en la misma tabla, vamos a aadir una celda en la primera fila. Pero que
abarque tambin a la siguiente:
&RORUGHIRQGRHQODVWDEODV
Se puede conseguir:
<TABLE BORDER>
<TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-
celda2</TD></TR>
<TR> <TD>fila2-celda1</TD> <TD>fila2-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):
,PiJHQHVGHIRQGRHQODVWDEODV
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:
6HSDUDFLyQHQWUHHOERUGH\HOFRQWHQLGRGHQWURGHODVFHOGDV
(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
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.
Internet son el Perl y el C.
(VWUXFWXUDGHXQIRUPXODULR
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).
(OHPHQWRVSDUDLQWURGXFLUORVGDWRV
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
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Apellido=Daz
Ejemplo:
,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.
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:
,QWURGXFFLyQSRUPHGLRGHPHQ~V
opciones visibles.
)RUPXODULRGHFRQILUPDFLyQFKHFNER[
%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:
%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:
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>
(MHPSORSUiFWLFR
<H2>Libro de visitas</H2>
<P><FORM ACTION="mailto:marcelovfp@msn.com" METHOD="POST"
ENCTYPE="TEXT/PLAIN">
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
'RFXPHQWRGHGHILQLFLyQGHORVIUDPHV
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.
<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>
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
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.
'RFXPHQWRV+70/GHFDGDIUDPH
'RFXPHQWRGHOIUDPHGHODL]TXLHUGD
</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.
'RFXPHQWRGHOIUDPHGHODGHUHFKD
<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>
<HTML>
<HEAD>
<TITLE>Mi pgina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> pgina</A>.
</NOFRAMES>
</HTML>
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!
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%)
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:
$WULEXWRVGHODHWLTXHWD)5$0(!
(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
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.
)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.
<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>
<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
)RQGRVRQRURSDUDHO0LFURVRIW,QWHUQHW([SORUHU
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
)RQGRVRQRURSDUDHO1HWVFDSH
(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.
(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".
)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.
$FWLYDFLyQGHOVRQLGRSRUHOSURSLRXVXDULR
(MHPSOR
7(;72(1029,0,(172
0DUTXHVLQDV
0$548((!7H[WRTXHVHGHVSOD]D0$548((!
$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:
$/,*1
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser
TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
%(+$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>
',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:
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:
6&52//'(/$<
Define el tiempo entre cada movimiento de avance, expresado en
milisegundos. Cuanto mayor es el nmero ms lento avanza. Ejemplo:
/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.
+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.
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.
$SOLFDFLyQ
1. (VWLORSDUDHWLTXHWDVFRQFUHWDVRJUXSRVGHHWLTXHWDV
(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".
(MHPSOR
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/
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
[bloque de instruciones de estilo]
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las etiquetas que componen la pgina]
</BODY>
</HTML>
(MHPSOR
<STYLE TYPE="text/css">
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>
3. (QOD]DQGRGLVWLQWRVGRFXPHQWRVDXQDKRMDGHHVWLOR
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:
$WULEXWRVJHQHUDOHV
([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\
{font-family: Arial}
u otras fuentes alternativas, separadas por una coma, como por ejemplo:
IRQWZHLJKW
{font-weight: medium}
{font-weight: bold}
IRQWVW\OH
{font-style: italic}
OLQHKHLJKW
{line-height: 20pt}
{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}
<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
WH[WDOLJQ
{text-align: left}
{text-align: center}
{text-align: right}
WH[WLQGHQW
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
(MHPSORV
{background: red}
{background: #6633FF}
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)}
{background: URL(nubes.jpg)}
(MHPSOR
6XJHUHQFLDV
$JUXSDQGRGLVWLQWRVDWULEXWRV
H1 {font-size: 15pt;
font-weight: bold;
color: maroon}
H2 {font-size: 15pt;
font-weight: bold;
color: maroon}
H3 {font-size: 15pt;
font-weight: bold;
color: maroon}
$JUXSDFLyQGHORVDWULEXWRVGHOWH[WR
$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:
Se puede poner:
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:
<STYLE TYPE="text/css">
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>
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^IRQWVL]HSWIRQWZHLJKWEROGFRORUUHG`
+YHUGH^IRQWVL]HSWIRQWZHLJKWEROGFRORUJUHHQ`
+D]XO^IRQWVL]HSWIRQWZHLJKWEROGFRORUEOXH`
+&/$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
Por ejemplo:
Hace que los enlaces sin visitar sean de color rojo, y una vez visitados se
pongan de color verde.
Ejemplo:
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:
-$9$6&5,37
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.
-$9$6&5,376((6&5,%((1(/'2&80(172+70/
pgina, como el atributo RQFOLFN. Estos atributos estn relacionados con las
Tambin se puede escribir Javascript dentro de determinados atributos de la
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.
<SCRIPT LANGUAGE=javascript>
$5&+,926(;7(5126'(-$9$6&5,37
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
<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
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 comentario se puede extender por varias lineas. Las que que quieras,
finalizando con
</SCRIPT>
0$<6&8/$6<0,16&8/$6
()(&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
VFULSW!
GRFXPHQWZULWHGRFXPHQWODVW0RGLILHG
VFULSW!
%2721'(92/9(5
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$
5(638(67$$81(9(172
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
Edad
paisDeNacimiento
_nombre
que ya veremos que son utilizadas para estructuras del propio lenguaje.
12meses
tu nombre
return
pe%pe
'(&/$5$&,1'(9$5,$%/(6
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.
var operando1
var operando2
var operando1=15
var operando2 =20
var operando1,operando2
$0%,72'(/$69$5,$%/(6
6HOHOODPDiPELWRGHODVYDULDEOHVDOOXJDUGRQGHHVWDVHVWiQGLVSRQLEOHV.
Por lo general, cuando declaramos una variable hacemos que est disponible
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
<SCRIPT>
var variableGlobal
</SCRIPT>
9$5,$%/(6/2&$/(6
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
function mifuncion(){
var numero=19
document.write(numero)//imprime 19
}
document.write(numero)//imprime 2
</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.
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
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
function mifuncion(){
var numero=19
document.write(numero)//imprime 19
}
document.write(numero)//imprime 2
//llamamos a la funcin
Mifuncion()
document.write(numero)//imprime 19
</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
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).
Ejemplo:
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)
7,326'('$726
7,32'('$726180e5,&2
dgitos para escribir los nmeros. Existen tres bases con las que podemos
trabajar
7,32%22/($12
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.
&$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.
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
23(5$'25(6'(&203$5$&,21
Igual ==>
!
Distinto ==>
Mayor que ==>
Menor que ==>
!
Menor o igual a ==>
Mayor o igual a ==>
23(5$'25(6'($6,*1$&,21
23(5$'25(6'(&$'(1$
-DYD6FULSW
-DYD6FULSW
VWU 6FULSW
23(5$'25(6$5,70(7,&26
23(5$'25(6/*,&26<'(%,76
35(&('(1&,$'(23(5$'25
%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`
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
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.
EUHDN\FRQWLQXH
IXQFWLRQIXQF[^
el valor 2.
YDUL
ZKLOHL^
LIL
EUHDN
L
`
UHWXUQL
[
`
LIHOVH
Su sintaxis es:
LIFRQGLFLyQ^LQVWUXFFLRQHV`>HOVH^LQVWUXFFLRQHV`@
La instruccin LIHOVH puede ser anidada.
EXHQR WUXH
`HOVH
EXHQR IDOVH
([SUHVLyQFRQGLFLRQDO
ZLWK
&8$'526'(',$/2*2
alert("Texto")
Por ejemplo:
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
<HTML><HEAD>
<TITLE>Cuadros de dilogo</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<H1>Pgina protegida por contrasea</H1>")
window.prompt("Introduzca la contrasea:","")
//-->
</SCRIPT>
</BODY>
</HTML>
(MHPSORV
<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
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.
6LQWD[LVSDUDODGHFODUDFLyQGHXQDIXQFLyQ
IXQFWLRQFHQWUDUBFDGHQDPVJ^
GRFXPHQWZULWH&(17(5!PVJ&(17(5!
`
6LQWD[LVSDUDOODPDUDODIXQFLyQ
6&5,37/$1*8$*( -DYD6FULSW!
FHQWUDUBFDGHQD(VWRHVXQDOODPDGDDXQDIXQFLyQ
6&5,37!
&5($&,21'(2%-(726
Para crear un nuevo objeto en JavaScript primero hay que crearse una 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
-(5$548,$'(2%-(726
(/2%-(72ZLQGRZ
Entre las SURSLHGDGHV ms tiles del objeto window se encuentran las tramas
o frames y el status o estado.
ZLQGRZIUDPHV>
IUDPH
@GRFXPHQWEJ&RORU UHG
color de fondo de frame1 se utilizara la instruccin:
ZLQGRZDOHUW(UURU
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.
(MHPSOR
<script language="JavaScript">
function nuevaVentana() {
msgWindow=window.open("ventana.htm","OpenWindow",
"width=450,height=400,scrollbars=yes");
}
,QYRFDQGR
</script>
(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
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
FOHDU
FORVH\RSHQ. Permiten borrar contenidos completos de un documento,
de manera que se puede empezar a escribir en ellos sin tener en la
(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>
<script language="JavaScript">
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)
}
else {
str = str.substring(10, str.length)
}
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>
<SCRIPT LANGUAGE="JavaScript">
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 "
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>
<script language="JavaScript">
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
valor1 = document.forms[0].field1.value;
valor2 = document.forms[0].field2.value;
valor1 = document.miform.field1.value
valor2 = document.miform.field2.value
)250$&7,21 GRLWFJL!)250!
275262%-(726,1&25325$'26
DVWULQJ +ROD
(9(1726
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
(OPDQLSXODGRUGHHYHQWRV2Q&OLFN
(OPDQLSXODGRUGHHYHQWRVRQ6XEPLW
en el atributo DFWLRQ.
comprobar los valores de los campos antes de llamar al URL designado
(OPDQLSXODGRUGHHYHQWRVRQ&KDQJH
(OPDQLSXODGRUGHHYHQWRVRQ/RDG
ERG\RQ/RDG DOHUW
%LHQYHQLGRDPLSiJLQD
!
(OPDQLSXODGRUGHHYHQWRVRQ8QORDG
ERG\RQ8QORDG DOHUW
*UDFLDVSRUWXYLVLWD
5()(5(1&,$'(&2/25(6
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$
3523,('$'(6'(/2%-(72)2508/$5,2
3URSLHGDG 'HVFULSFLyQ
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
(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
MiFormu.elements[0]
MiFormu.elements[1]
MiFormu.elements[2]
MiFormu.elements[0]
MiFormu.elements["MiTexto"]
MiFormu.MiTexto
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
&8$'52'(6(/(&&,1&+(&.%2;
3URSLHGDG 'HVFULSFLyQ
checked Indica el estado actual del cuadro de seleccin
defaultChecked Indica el estado por defecto del elemento
0pWRGR 'HVFULSFLyQ
click() Simula la pulsacin del botn del mouse sobre el
cuadro de seleccin
(YHQWR 'HVFULSFLyQ
%271'(6(/(&&,15$',2
3URSLHGDG 'HVFULSFLyQ
checked Indica el estado actual del botn de seleccin
defaultChecked Indica el estado por defecto del elemento
(MHPSOR
&8$'52'(7(;727(;7
3URSLHGDG 'HVFULSFLyQ
/,67$'(6(/(&&,16(/(&7
3URSLHGDG 'HVFULSFLyQ
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
$5($'(7(;727(;7$5($
%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
(-(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>
<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>
<script language="javascript">
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>
<script language="javascript">
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>
<form name="ejemplo4" method="POST" target="_blank">
<b>Rellena tu perfil de usuario</b> (obligatorio)<br>
Nombre: <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="validar(this.form)">
</form>
<script language="javascript">
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>
<form name="ejemplo5" method="POST" target="_blank">
<b>Rellena tu perfil de usuario</b> (obligatorio)<br>
Nombre : <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="validar2(this.form)">
</form>
<script language="javascript">
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>
<script language="javascript">
function bloqDesbloq(){
a = login.usuario.value
if (a != "") { a = true; }
else { a = false; }
(MHPSOR 6LDXPHQWDHOYDORUGHOHQJWKDXPHQWDHOWDPDxRGHVL]H
<script language="javascript">
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>
<script language="javascript">
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>
<script language="javascript">
function validarCampo2(form){
if (form.palabra1.value.length > 6)
{
alert('Debes introducir una palabra con un mximo de 6 caracteres');
form.palabra1.focus(); return true;
}
}
</script>
<form name="form2" method="post">
Mximo 6 caracteres: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo2(this.form)" value="Enviar">
</form>
<script language="javascript">
function validarCampo3(form){
if (form.palabra1.value.length != 6)
{
alert('Debes introducir una palabra de 6 caracteres');
form.palabra1.focus(); return true;
}
}
</script>
<form name="form3" method="post">
Introduce solo 6 caracteres: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo3(this.form)" value="Enviar">
</form>
<script language="javascript">
function validarCampo4(form){
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');
form.palabra1.focus(); return true;
}
}
</script>
<form name="form4" method="post">
Mnimo 6 caracteres, mximo 12: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo4(this.form)" value="Enviar">
</form>
<script language="javascript">
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>
<script language="javascript">
function validarCampo5(form){
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>
<form name="form6" method="POST">
Escribir solo 12 caracteres: <input type="text" name="campo"
size="12"><br>
<input type="button" value="Enviar" onClick="validarCampo5(this.form)">
</form>
<script language="javascript">
function habilita(form){
form.intereses[0].disabled = false;
form.intereses[1].disabled = false;
form.intereses[2].disabled = false;
}
function deshabilita(form)
{
form.intereses[0].disabled = true;
form.intereses[1].disabled = true;
form.intereses[2].disabled = true;
}
</script>
<form name="ejemplo1">
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>
<script language="javascript">
function habilitaDeshabilita(form){
if (form.boletin.checked == true)
{
form.intereses[0].disabled = false;
form.intereses[1].disabled = false;
form.intereses[2].disabled = false;
}
if (form.boletin.checked == false)
{
form.intereses[0].disabled = true;
form.intereses[1].disabled = true;
form.intereses[2].disabled = true;
}
}
</script>
<form name="ejemplo2">
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>
<script language="javascript">
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>
<form name="ejemplo1">
Colores:
</form>
<script language="javascript">
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>
<script language="javascript">
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>
<input type="submit" value="Enviar"></form>
<select name="estilo">
<option value=""><-- esperando seleccin</option>
</select>
<input type="submit" value="Enviar"></form>
<script language="javascript">
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>
<form name="ejemplo3" method="POST" target="_blank"
action="pagina.htm">
<select name="combo1">
<option value=" ">[seleccione una opcin]</option>
<option value="opcion1">Opcin 1</option>
<option value="opcion2">Opcin 2</option>
<option value="opcion3">Opcin 3</option>
</select>
<input type="button" value="Enviar" onClick="validar(this.form)">
</form>
<script language="javascript">
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>
<script language="javascript">
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)
{
<script language="javascript">
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>
<form name="ejemplo11" method="GET" action="pagina.htm"
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>
<input type="checkbox" name="casilla1" value="Opcion 2"
onClick="limitarSeleccin(this,this.form)">Opcin 2<br>
<input type="checkbox" name="casilla1" value="Opcion 3"
onClick="limitarSeleccin(this,this.form)">Opcin 3<br>
<input type="checkbox" name="casilla1" value="Opcion 4"
onClick="limitarSeleccin(this,this.form)">Opcin 4<br>
<input type="checkbox" name="casilla1" value="Opcion 5"
onClick="limitarSeleccin(this,this.form)">Opcin 5<br>
<input type="submit" value="Enviar">
</form>
<script language="javascript">
function todos(form)
{
for (i = 0; i < form.casilla1.length; i++)
form.casilla1[i].checked = true;
form.desmarcatodos.checked = false;
}
function ninguno(form)
{
for (i = 0; i < form.casilla1.length; i++)
form.casilla1[i].checked = false;
form.marcatodos.checked = false;
}
</script>
<form name="ejemplo12" method="GET" action="pagina.htm"
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>
<input type="checkbox" name="casilla1" value="Opcion 2">Opcin 2<br>
<input type="checkbox" name="casilla1" value="Opcion 3">Opcin 3<br>
<input type="checkbox" name="casilla1" value="Opcion 4">Opcin 4<br>
<input type="checkbox" name="casilla1" value="Opcion 5">Opcin 5<br>
<hr>
<input type="submit" value="Enviar">
</form>
(MHPSOR Selecciona todos los checkbox con un solo click o los
deselecciona o invierte la seleccin
<script language="javascript">
function todos2(form) {
for (i = 0; i < form.casilla1.length; i++)
form.casilla1[i].checked = true;
form.desmarcatodos.checked = false;
form.invierte.checked = false;
}
function ninguno2(form) {
for (i = 0; i < form.casilla1.length; i++)
form.casilla1[i].checked = false;
form.marcatodos.checked = false;
form.invierte.checked = false;
}
function invertir(form) {
for (i = 0; i < form.casilla1.length; i++)
form.casilla1[i].checked = !form.casilla1[i].checked;
form.marcatodos.checked = false;
form.desmarcatodos.checked = false;
}
</script>
<form name="ejemplo13" method="GET" action="pagina.htm"
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>
<input type="checkbox" name="casilla1" value="Opcion 1">Opcin 1<br>
<input type="checkbox" name="casilla1" value="Opcion 2">Opcin 2<br>
<input type="checkbox" name="casilla1" value="Opcion 3">Opcin 3<br>
<script language="javascript">
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>
<form name="ejemplo14" method="GET" action="pagina.htm"
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>
<script language="javascript">
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>
<form name="ejemplo15" method="POST" action="pagina.htm"
target="_blank">
Producto seleccionado: <b>COD. 7548-65 CD-R IPC</b> Cantidad:
<input type="text" name="cantidad" value="1" size="2" ReadOnly>
<script language="javascript">
function contarPalabras(form){
texto = form.mensaje.value
texto = texto.split(" ")
form.cantidad.value=texto.length
}
</script>
<form name="ejemplo16" method="POST" action="pagina.htm"
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>
<input type="submit" value="Enviar">
</form>
<script language="javascript">
function esconde(form)
{
if ((form.nombre.value != "") && (form.apellido.value != ""))
{ form.enviar.style.visibility = "visible"; }
else {
form.enviar.style.visibility = "hidden"; }
}
</script>
<form name="ejemplo17" method="POST" action="pagina.htm"
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>
<script language="javascript">
function deshabilita(form)
{
if ((form.nombre.value != "") && (form.apellido.value != ""))
{ form.enviar.disabled = false; }
else {
form.enviar.disabled = true; }
}
</script>
<form name="ejemplo18" method="POST" action="pagina.htm"
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>
<script language="javascript">
function ConfirmarBorrado(form){
borrar = window.confirm('Se borrarn todos los datos del formulario');
(borrar)?form.reset():'return false';
}
</script>
<form name="ejemplo19" method="POST" action="pagina.htm"
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>
;0/
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:
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:
<?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
(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.
XML consta de cuatro especificaciones (el propio XML sienta las bases
sintcticas y el alcance de su implementacin):
$3/,&$&,21(6'(;0/
'20 (Document Object Model) se desarroll una API soportada por
Ofrecer mecanismos ms verstiles de mostrar datos. Bajo el nombre de
9(17$-$6'(;0/
(MHPSORV
Aunque a primera vista, un documento XML puede parecer similar a HTML, hay
una diferencia principal. Un documento XML contiene datos que se
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:
(WLTXHWDV9DFtDV
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
<A HREF=http://www.mirandaconsultoresperu.com/>
<A HREF="http://www. mirandaconsultoresperu.com/">
7LSRGHOHWUDHVSDFLRVHQEODQFR
1RPEUDQGRFRVDV
usar.
0DUFDGR\GDWRV
(/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.
(MHPSORV
(/(0(1726
(17,'$'(635('(),1,'$6
(QWLGDG &DUDFWHU
DPS
OW
JW !
DSRV
TXRW
&20(17$5,26
'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.
(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>
'(&/$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:
<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>
(037<
Puede no tener contenido. Suele usarse para los atributos.
$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.
(OHPHQW
Slo puede contener sub-elementos especificados en la especificacin de
contenido.
<!ELEMENT mensaje (remite, destinatario, texto)>
02'(/26'(&217(1,'2
,QGLFDGRUHVGHIUHFXHQFLD
? Opcional (0 o 1 vez)
* Opcional y repetible (0 o ms veces)
+ Necesario y repetible (1 o ms veces)
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
<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)
0RVWUDQGRGDWRVSRUQLYHOHV
<html><head>
<title>XML 2</title>
<style type="text/css">
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>
<b><span datafld="curso2"></span></b> <i><span
datafld="nivel2"></span></i><br>
<b><span datafld="curso3"></span></b> <i><span
datafld="nivel3"></span></i>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
(MHPSOR(alumnos3.xml)
0RVWUDQGRUHJLWURVPHGLDQWHERWRQHVGHSDJLQDFLyQ
<html><head><title>XML 3</title>
<style type="text/css">
body {font-family:Verdana,sans-serif; font-size:12px; font-weight:normal}
h3 {font-size:16px;color:navy}
</style>
</head>
<body>
<h1>XML 3</h1>
<xml id="data3" src="alumnos3.xml"></xml>
<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>
<button onclick="data3.recordset.MoveLast()"
title="Final"> >| </button>
</body>
</html>
(MHPSOR(alumnos4.xml)
<APELLIDO>Mendoza</APELLIDO>
<EDAD>19</EDAD>
<NIVEL>Introduccin</NIVEL>
<CURSO>XML</CURSO>
<SEXO>H</SEXO>
<OBSERVACIONES>Pendiente de pago</OBSERVACIONES>
</ALUMNO>
<ALUMNO>
<NMERO>2</NMERO>
<NOMBRE>Javier</NOMBRE>
<APELLIDO>Salazar</APELLIDO>
<EDAD></EDAD>
<NIVEL>Avanzado</NIVEL>
<CURSO>Windows 2000</CURSO>
<SEXO>H</SEXO>
<OBSERVACIONES>Ninguno</OBSERVACIONES>
</ALUMNO>
</ALUMNOS>
0RVWUDQGRUHJLVWURVPHGLDQWHXQIRUPXODULR
<html><head><title>XML 4</title>
<style type="text/css">
body {font-family:Verdana,sans-serif; font-size:12px; font-weight:normal}
h3 {font-size:16px;color:navy}
</style>
</head>
<body>
<h1>XML 4</h1>
<xml id="data4" src="alumnos4.xml"></xml>
<h3>LISTA DE ALUMNOS</h3>