Desarrollo Web Con PHP - Oscar Capuñay Uceda

Desarrollo Web con
PHP
Oscar Capuay Uceda
http://alexyniorlls.blogspot.com 2 of 328.
Contenido
DEDICATORIA
AGRADECIMIENTOS
INTRODUCCIN
I.
PREPARANDO LA PLATAFORMA DE DESARROLLO
11
INSTALACIN DEL SERVIDOR WEB Y PHP

INSTALACIN EN WINDOWS
INSTALACIN EN LINUX
INSTALACIN DE APACHE
INSTALACIN DE PHP
INSTALACIN DE MYSQL
11
11
16
16
16
17
II. DHTML
18
HTML
FORMATO DE TEXTO CON HTML
LISTAS
COMENTARIOS NO VISIBLES EN LA PANTALLA
CARACTERES ESPECIALES
ENLACES O HIPERVNCULOS
IMGENES
TABLAS
FORMULARIOS
HTML 4
JAVASCRIPT
ELEMENTOS BSICOS
COMENTARIOS
LITERALES
TIPOS DE DATOS
VARIABLES
OPERADORES
ESTRUCTURAS DE CONTROL
OBJETOS
OBJETOS PREDEFINIDOS
EVENTOS
DEFINICIN MEDIANTE CDIGO
MODELO DE OBJETOS DEL DOCUMENTO
OBJETO WINDOW
OBJETO DOCUMENT
OBJETO FORM
OTROS OBJETOS
18
21
21
24
25
27
30
33
40
47
63
64
64
65
66
66
67
70
72
73
77
79
80
81
84
85
90
FICHEROS .JS
HOJAS DE ESTILO EN CASCADA
SINTAXIS Y TIPOS BSICOS DE DATOS EN CSS2
PALABRAS CLAVE
92
93
97
99
III. INICIANDO LA PROGRAMACIN CON PHP
101
QUE ES PHP?
VARIABLES
CONSTANTES
TIPOS DE DATOS
EXPRESIONES
OPERADORES
OPERADORES DE ARITMTICA
OPERADORES DE ASIGNACIN
OPERADORES DE COMPARACIN
OPERADORES DE CONTROL DE ERRORES
OPERADORES DE EJECUCIN
OPERADORES DE INCREMENTO/DECREMENTO
OPERADORES DE LGICA
OPERADORES DE CADENA
OPERADORES DE MATRICES
OPERADORES DE TIPO
101
101
101
102
102
104
105
105
106
107
108
108
110
110
111
112
IV. ESTRUCTURAS DE CONTROL
115
SI (CONDICIONAL): IF
ELSE
ELSEIF
FOR
WHILE
DO..WHILE
115
116
116
117
117
117
V. ACCESO A DATOS CON PHP
119
FORMULARIOS HTML Y PHP

SUBIENDO ARCHIVOS AL SERVIDOR
ACCESO A BASES DE DATOS
CREANDO UNA BASE DE DATOS MYSQL EN MYSQL ADMINISTRATOR
CREANDO UNA BASE DE DATOS MYSQL EN PHPMYADMIN
ACCESO A MYSQL DESDE PHP
INSTALACIN DE POSTGRESQL SOBRE WINDOWS XP
CREANDO UNA BASE DE DATOS POSTGRESQL EN PGADMIN III
CREANDO UNA BASE DE DATOS POSTGRESQL EN PHPPGADMIN
ACCESO A POSTGRESQL DESDE PHP
ACCESO A MS SQL-SERVER DESDE PHP
126
131
134
134
139
145
153
160
167
172
179
VI. PHP ORIENTADO A OBJETOS
189
CLASES EN PHP
INSTANCIA DE UN OBJETO
EXTENDIENDO OBJETOS
AUTO CARGA DE OBJETOS
ACCESO A MYSQL CON PHP ORIENTADO A OBJETOS
MYSQLI
MYSQLI_STMT
MYSQLI_RESULT
PAGINANDO RESULTADOS
ARQUITECTURA MVC
MVC CON PHP
MVC Y PHP CON ACCESO A BASE DE DATOS
PDO PHP DATA OBJECT
CLASES PREDEFINIDAS
CONEXIONES CON PDO
EJECUCIN DE SENTENCIAS PREPARADAS CON PDO
189
189
190
191
193
193
195
196
204
207
207
214
217
217
220
223
VII. SEGURIDAD WEB
227
SEGURIDAD EN EL SISTEMA DE ARCHIVOS

SEGURIDAD EN BASE DE DATOS
INYECCIN SQL
SESIONES
AUTENTIFICACIN HTTP CON PHP
LOGIN
CAPTCHA
227
229
231
244
248
250
255
VIII. GENERACIN DE ARCHIVOS CON PHP
259
IMGENES
ARCHIVOS PDF
FPDF
ARCHIVOS XLS
259
266
266
276
IX. PHP + AJAX
283
AJAX
XAJAX
EVENTOS CON XAJAX
TRABAJO CON FORMULARIOS EN XAJAX
ERROR COMN
BSQUEDA EN BASE DE DATOS CON XAJAX
ADMINISTRACIN DE DATOS CON AJAX
CONTROLADOR CON AJAX
CAPA DE DATOS CON AJAX
283
284
293
295
300
301
303
303
308
VISTA CON AJAX
310
X. REFERENCIAS BIBLIOGRAFICAS
315
XI. ANEXOS
316
LISTA DE EJEMPLOS
LISTA DE TABLAS
LISTA DE FIGURAS
316
320
321
Dedicatoria
Este libro lo dedico a Dios, a mi esposa Kelly, y a mi
hijo Oscar Armando.
Agradecimientos
Este libro es gracias a la bendicin de Dios, al apoyo y
aliento de mis padres, a la colaboracin de mis
hermanos Carlos, Jaime y Benjamn y al amor de mi
esposa Kelly.
Introduccin
Introduccin
PHP desde el ao 1997 ha crecido aceleradamente, su versin 4 lanzada en
el 2000 gan mucha popularidad y logr estar instalado en mas de la cuarta
parte de los servidores Web a nivel mundial, esto la convirti en el 2003 en la
plataforma Web con mayor presencia en Internet en comparacin con sus
similares.
En la actualidad muchas empresas han optado por el desarrollo de sus
aplicaciones con PHP, esto ha generado una creciente demanda de
profesionales con habilidades y conocimiento de este lenguaje, es por este
motivo que decid escribir este libro, y aportar algunos conocimientos
basados en la experiencia obtenida en los ltimos seis aos desarrollando
aplicaciones Web.
Oscar E Capuay Uceda
Preparando la plataforma de desarrollo
I.
Instalacin del servidor Web y PHP

Instalacin en Windows
Para trabajar con PHP vamos a utilizar WAMP un software que instala el
servidor Web APACHE, PHP y el manejador de base de datos MySQL.
Veamos a continuacin los pasos de la instalacin:
Figura 1.
Inicio de la instalacin de WAMP
11
Figura 2.
Licencia de uso de WAMP
Si estamos de acuerdo con los trminos de la licencia, seleccionamos I

accept the agreement y presionamos el botn Next para continuar.
Figura 3.
Destino de la instalacin de WAMP
Luego seleccionamos la ubicacin de los paquetes que vamos a instalar.
12
Figura 4.
Seleccionar men de inicio de WAMP
Luego indicamos el nombre del acceso directo que nos permitir cargar
WAMP desde el men de inicio.
Figura 5.
Inicio de WAMP en el arranque del Sistema Operativo.
Despus elegimos si queremos que WAMP se inicie automticamente

cuando se inicie una sesin en el sistema operativo.
13
Figura 6.
Resumen de la configuracin de la instalacin
Ahora nos muestra el resumen de la configuracin elegida antes del inicio de

la instalacin. Slo nos queda presionar el botn Install para instalar los
programas.
Figura 7.
Instalando WAMP
14
Figura 8.
Instalacin de WAMP completa
Finalmente la instalacin termina y nos muestra la pantalla anterior en la que

podemos elegir si se carga WAMP en ese momento o posteriormente.
Hay que cerciorarnos que cuando WAMP se inicie los servicios deben estar
iniciados correctamente, haciendo clic en el icono que aparece en la barra de
tareas:
. Luego de hacer clic aparecer un men:
Figura 9.
Men de WAMP
15
Instalacin en Linux
Instalacin de Apache
Primero debemos ubicarnos en el directorio donde hemos descargado
apache:
cd /usr/src/web/apache
Luego descomprimimos apache de la siguiente forma:
tar xzvf apache_2.2.4.tar.gz
Ahora pasamos a instalarlo:
./configure --prefix=/usr/local/web/apache
module=userdir
--enable-module=so
--enable-
make && make install
Instalacin de PHP
El primer paso es descomprimir el archivo descargado: forma:
tar xjvf php-5.0.2.tar.bz2
Ahora hay que instalarlo de la siguiente forma:
cd php-5.2.4
/configure --prefix=/usr/local/web/php --withapxs=/usr/local/web/apache/bin/apxs
make && make install
cp php.ini-dist /usr/local/lib/php.ini
Ahora hay que modificar el archivo de configuracin de Apache: httpd.conf,
para que Apache reconozca el PHP:
AddType application/x-httpd-php .php .phtml
Si queremos configurar las pginas que sern el inicio de de los directorios,
entonces debemos ir a la lnea DirectoryIndex del archivo httpd.conf y
modificarla.
Para probar PHP podemos escribir una pgina llamada index.php muy
simple que imprima un saludo: Hola PHP utilizando el siguiente cdigo:
< ?php
echo Hola PHP;
?>
16

Cada vez que modifiquemos el archivo de configuracin debemos guardarlo,
y reiniciar el servicio para que los cambios tengan efecto.
Instalacin de MySQL
Nos ubicamos en el directorio donde descargamos el programa y luego
descomprimimos el archivo:
tar xzvf mysql-max-4.1.7-pc-linux-i686.tar.gz
Una vez descomprimo el archivo realizamos los siguientes pasos:
groupadd mysql
useradd -g mysql mysql
cp -R mysql-max-4.1.7-pc-linux-i686 /usr/local/web/mysql
cd /usr/local/web/mysql
scripts/mysql_install_db --user=mysql
chown -R root .
chown -R mysql data
chgrp -R mysql .
bin/mysqld_safe --user=mysql &
Con estos pasos realizados quedar instalado nuestro servidor de base de
datos en /usr/local/web/mysql/.
17
DHTML
II.
DHTML
Para desarrollar aplicaciones Web con PHP es necesario tener

conocimientos de HTML Dinmico DHTML, debido a que en los
documentos Web no slo se escribe un lenguaje sino que es necesario
utilizar diferentes lenguajes para la implementacin de las diversas rutinas
que se pueden requerir para un buen funcionamiento de la aplicacin.
Debido a esto a continuacin veremos un repaso rpido de los temas
relacionados con DHTML.
HTML
HTML es un lenguaje que permite definir los elementos que conforman una
pgina Web. Los diseadores y programadores de pginas Web utilizan el
lenguaje HTML de modo que los navegadores que utilizamos los usuarios
muestran las pginas Web despus de interpretar su contenido HTML.
El W3C define el lenguaje HTML como un lenguaje reconocido
universalmente y que permite publicar informacin de forma global. Desde
su primera definicin, el lenguaje HTML ha sido un lenguaje utilizado
exclusivamente para crear documentos electrnicos pero es un lenguaje que
se utiliza en la mayora de aplicaciones electrnicas (aplicaciones Web
comerciales, educativas, financieras y tambin muy utilizada en buscadores,
etc.).
El lenguaje HTML, cuenta con un conjunto de etiquetas o tambin llamadas
"Tags", las cuales funcionan de la siguiente manera:
<tag> Modelo de Inicio de una etiqueta.
</tag> modelo de Cierre de una etiqueta.
El texto o cualquier elemento de la pgina Web, que est entre ambas
etiquetas (de inicio y cierre), estar influenciado por la accin que stas
realicen. Por ejemplo, todo el documento HTML debe estar entre las
etiquetas <HTML> y </HTML>.
<HTML>
[Documento Web]
</HTML>
Hay que considerar que no todos los tags tienen etiqueta de cierre. Aunque
se recomienda que las etiquetas o tags que no tienen incluyan un / antes
del cierre. Por ejemplo la etiqueta BR se recomienda escribirla as: <br />.
Es indiferente escribir las etiquetas en maysculas o minsculas. Pero se
recomienda escribirlas en minsculas. Para diferenciarlas del texto comn,
las escribiremos en maysculas.
18
DHTML
Toda pgina Web, esta dividida en dos partes bien definidas: la primera es la
cabecera o encabezado y la segunda es el cuerpo o contenido del
documento.
La cabecera se define con la etiqueta <HEAD> y su finalizacin es con
</HEAD>. En la cabecera se coloca la informacin sobre la pgina Web,
pero hay que tener en cuenta que esta informacin no se muestra en el
navegador, excepto el ttulo de la pgina que se muestra en la barra de ttulo
de la ventana del navegador, el cual se encuentra entre las etiquetas
<TITLE> y </TITLE>.
El cuerpo, est comprendido entre las etiquetas <BODY> y </BODY>.
Dentro de ste est todo lo que queremos que aparezca en la pantalla
principal (texto, imgenes, etc.)
Por lo mencionado anteriormente, podemos concluir que la estructura de un
documento Web (pgina Web) tiene dos partes: el encabezado y el cuerpo, y
que de acuerdo a las etiquetas utilizadas para delimitar estas partes, las
etiquetas HTML para construir una pgina Web deben estar en el siguiente
orden:
<HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[En este lugar escribiremos el contenido de la pgina]
</BODY>
</HTML>
Antes de crear nuestra primera pgina Web, debemos tener ciertas
consideraciones sobre el texto que vamos a incluir en el documento: No hay
necesidad de tratar de justificar el texto al ancho del navegador, pues el texto
de una pgina Web se caracteriza por justificarse de acuerdo al ancho que
tome la ventana, adems cuando queramos pasar a un nuevo prrafo, es
necesario utilizar la etiqueta <P>.
El contenido de la pgina puede tener varios ttulos, los cuales escribiremos
entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta H6), el nmero
en la etiqueta de ttulo indica el tamao de los caracteres de la frase o
palabra. El tamao mayor es el correspondiente al nmero 1.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER>
(debemos tomar en cuenta que a esta etiqueta no la soportan todos los
navegadores, aunque s la mayora de ellos). Esta etiqueta centra todo lo
que est dentro de ella, ya sea texto, imgenes, etc.
Existen otros tags como por ejemplo, los separadores horizontales
(horizontal rules), que se insertan con la etiqueta <HR> (este tag no tiene la
correspondiente etiqueta de cierre). Con ella se obtiene una raya horizontal
19
DHTML
tan ancha como la pantalla, y con la apariencia de estar embutida sobre el
fondo, o podemos tambin especificar su ancho en pxeles o en porcentaje
respecto al ancho de la ventana.
Ejemplo 1:
Primera pgina Web
Ejercicio01.html
<HTML>
<HEAD>
<TITLE> Mi Primer Ejercicio </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Ejercicio 1 </CENTER> </H1>
<HR>
Esta es mi primera pgina Web programando con HTML, aun es muy sencillo el
diseo pero pronto haremos pginas ms complejas.
<P> Este es el segundo prrafo.
</BODY>
</HTML>
Resultado Web
Figura 10. Resultado de ejercicio01.html

Cuando programemos, tratemos de colocar algunas lneas en blanco cuando
sea necesario, mayormente para separar la cabecera del cuerpo de la
pgina, y adems justificar a la izquierda las lneas en varios niveles, para
identificar con mucha mayor claridad el cdigo que se encuentra dentro de
ciertas etiquetas, como lo podemos notar en el ejemplo anterior. De hecho,
todo el cdigo podra estar escrito dentro de una sola lnea. Lo importante es
el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar
anidada dentro de otra. En el ejemplo podemos notar 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.
20
DHTML
Formato de Texto con HTML

En ejemplo anterior, podemos notar que cuando colocamos texto, este
aparece sin ningn formato en especial. Slo, cuando quisimos crear un
nuevo prrafo, utilizamos la etiqueta <P>, esta etiqueta inserta una lnea en
blanco despus de la ltima del prrafo anterior. Pero si deseamos realizar
un salto de lnea, es decir pasar a la siguiente lnea sin incluir una en blanco,
utilizaremos el tag <BR>. Esta etiqueta por su funcionamiento no tiene una
etiqueta de cierre.
Negrita y Cursiva
Cuando trabajamos con texto formateado, las caractersticas ms utilizadas
son: negrita y cursiva. Pues en HTML, podemos darle esas caractersticas al
texto utilizando las etiquetas: <B> para poner el texto en negrita, y <I> para
formato cursiva. Cada una de ellas si cuenta con su respectiva etiqueta de
cierre (</B> y </I>).
Espacios en blanco
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 " " (nonbreaking space).
Superndices y Subndices
En las frmulas matemticas puede interesar poder escribir ndices y
subndices, que se consiguen con las etiquetas <SUP> </SUP> y <SUB>
</SUB> respectivamente. Por ejemplo: m2 se obtiene con: m<SUP>2</SUP>
y vx con: v<SUB>x</SUB>.
Listas
Cuando tenemos un conjunto de elementos es necesario mostrarlos en
forma de listas, las cuales pueden ser de diferentes tipos:
1. Listas sin orden (sin numerar)
2. Listas ordenadas (numeradas)
3. Listas de definicin.
Una lista sin orden (Unordered List) sirve para presentar cosas que, por no
tener un orden determinado, no necesitan ir precedidas por un nmero. Su
estructura es la siguiente:
<UL>
<LI> Naranja
<LI> Manzana
<LI> Fresa
<LI> Etc.
</UL>
Como se puede apreciar, para crear una lista de este tipo se utiliza la
etiqueta <UL>, y luego para cada elemento la etiqueta <LI> (List Item).
21
DHTML
Resultado Web
Figura 11. Lista sin orden

Adems podemos anidar una lista dentro de otra. Por ejemplo:
<UL>
<LI> Mamferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
Resultado Web
Figura 12. Listas sin orden anidadas

Las Listas Ordenadas (Ordered Lists) sirven para presentar tems en un
orden determinado. Su estructura es muy similar a la anterior. La diferencia
est en que en el resultado aparecer automticamente un nmero
correlativo para cada elemento de la lista.
<OL>
<LI> Introduccion
<LI> Conceptos Basicos
<LI> Aplicaciones
22
DHTML
<LI> Bibliografia
</OL>
El texto aparecer de la siguiente forma:
Figura 13. Lista ordenada

Al igual que las listas sin orden, tambin se pueden anidar las listas
ordenadas.
El tercer tipo lo forman las listas de definicin. Como su nombre indica, son
apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir
englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que
hemos visto, cada rengln de la lista tiene dos partes: 1) el nombre de la
cosa a definir, que se consigue con la etiqueta <DT> (definition term) y 2) la
definicin de dicha cosa, que se consigue con la etiqueta <DD> (definition
definition).
<DL>
<DT> HTML
<DD> Son las iniciales de HyperText Markup Language
<DT> WWW
<DD> Son las iniciales de World Wide Web
</DL>
Su resultado es:
Figura 14. Lista de definiciones
23
DHTML
Comentarios no visibles en la pantalla

A veces es muy til escribir comentarios en el documento HTML sobre todo
cuando creamos pginas dinmicas, el cdigo que escribimos, 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:
 .
Por ejemplo:


Ejemplo 2:
Comentarios
Ejercicio02.html
<HTML>
<HEAD>
<TITLE> Ejercicio 2 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cursos </H1>
</CENTER>
<HR>
Sin un orden particular, mis <B> cursos </B> son los siguientes:
<UL>
<LI> Redes de computadoras
<LI> Ingenieria de Software
<UL>
<LI> Herramientas Case
<LI> Software de Aplicacin I
<LI> Software de Aplicacin II
</UL>
<LI> Sistemas de Informacin Gerencial
</UL>
Los cursos que me gustan son <I> (en orden de preferencia): </I>
<OL>
<LI> Ingenieria de Software
<LI> Sistemas de Informacin Gerencial
<LI> Redes de Computadoras
</OL>
</BODY>
</HTML>
24
DHTML
Resultado Web:
Caracteres especiales
Hemos podido notar en los ejemplos anteriores, que las palabras no
aparecen con tildes, y no hemos utilizado algunos otros caracteres
especiales, esto debido a que 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, provocara una
ambigedad, ya que el navegador podra interpretarlos como el comienzo o
final de una etiqueta, en vez de un carcter ms del texto.
Para superar estas limitaciones, existen cdigos para escribir estos
caracteres y otros relacionados junto con las etiquetas.
Tabla 1.
<
>
&
"
Cdigos HTML para caracteres especiales
obtenemos
obtenemos
obtenemos
obtenemos
< (less than, menor que)

> (greater than, mayor que)
& (ampersand)
" (double quotation)
Podemos ver, que estos cdigos empiezan siempre con el signo & y
acaban siempre con ;. De igual manera, existen cdigos para escribir letras
especficas de distintos idiomas. Los cdigos de las vocales acentuadas se
25
DHTML
forman comenzando con &, seguido de la vocal en cuestin, seguido de la
palabra acute (aguda) y terminando con el signo: ; (punto y coma).
Tabla 2.
Cdigos HTML para caracteres especiales
- á
- é
- í
- ó
- ú
- ñ
- ¿
- Á
- É
- Í
- Ó
- Ú
- Ñ
- ¡
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.
Para corregir el ejercicio anterior con vocales acentuadas utilizaremos el
siguiente ejemplo.
Ejemplo 3:
Uso de tildes
Ejercicio03.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cursos </H1>
</CENTER>
<HR>
Sin un orden particular, mis <B> cursos </B> son los siguientes:
<UL>
<LI> Redes de computadoras
<LI> Ingeniería de Software
<UL>
<LI> Herramientas Case
<LI> Software de Aplicación I
<LI> Software de Aplicación II
</UL>
<LI> Sistemas de Información Gerencial
</UL>
Los cursos que me gustan son <I> (en orden de preferencia): </I>
<OL>
<LI> Ingeniería de Software
26
DHTML
<LI> Sistemas de Información Gerencial

<LI> Redes de Computadoras
</OL>
</BODY>
</HTML>
Resultado Web:
Enlaces o hipervnculos
El xito de la Web, se basa justamente en este elemento: el Hipervnculo o
enlace, pues nos da la posibilidad de unir los distintos documentos repartidos
por todo el mundo.
Estructura de los enlaces
Los enlaces, en general, tienen la siguiente estructura:
<A REF = "xxx" > yyy </A>
xxx : es el destino del hipervnculo.
yyy : es el texto que generalmente aparece subrayado y con un color
especial, el cual indicar en la pantalla la existencia de un enlace.
27
DHTML
Tipos de enlaces
Los enlaces los podemos clasificar en cuatro tipos:
Enlaces dentro de la misma pgina
Enlaces con otra pgina nuestra
Enlaces con una pgina fuera de nuestro sistema
Enlaces con una direccin de correo electrnico
Enlaces dentro de la misma pgina
Cuando tenemos documentos (o pginas Web) muy extensos, es
adecuado trabajar con este tipo de enlaces, pues nos permite dar un salto
desde una posicin a otra determinada, dentro de la misma pgina. 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 #marcador (la palabra marcador puede ser cualquier
palabra). 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:
<A HREF="#marcador"> YYY </A>.
En el sitio exacto a donde queremos saltar, debemos poner la siguiente
etiqueta: <A NAME="marcador"> </A>
Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente
etiqueta:<A HREF="#final"> Haga Click aqu para ir al final</A>.
En el final del documento se inserta esta etiqueta: <A NAME="final"> </A>.
Enlaces con otra pgina nuestra
Generalmente cuando vamos a crear un Sitio Web, contamos con varias
pginas, las cuales necesitamos enlazar unas con otras. Contamos siempre
con una pgina que ser la Inicial o principal y otras enlazadas a ella.
Supongamos que queremos enlazar con la pgina creada en el ejemplo del
captulo anterior, que la hemos llamado ejemplo2.html. En este caso,
simplemente sustituimos lo que hemos llamado XXX (el destino del enlace)
por el nombre del archivo: <A HREF="ejemplo2.html"> Ejemplo 2 </A>
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 o marcador (ver seccin anterior), y completar el enlace
con la referencia a ese marcador.
En este ejemplo podremos hacer un enlace de este tipo:
Deseo poner un enlace desde aqu a otra pgina (supongamos que se llame
pag5.html), pero a un sitio concreto de esa pgina, donde he puesto el
marcador <A NAME="cursos"></A>. Entonces la etiqueta tiene que ser: <A
HREF="pag5.html#cursos"> Cursos </A>.
28
DHTML
Si la pgina a la que quiero saltar est, por ejemplo en el subdirectorio
cursos, entonces en la etiqueta tendra que haber puesto "cursos/pag5.html".
Segn el prrafo anterior, la etiqueta tiene que ser: <A
HREF="cursos/pag5.html#cursos"> Cursos </A>.
Y a la inversa, si quiero saltar desde una pgina a otra que est en un
directorio anterior o nivel superior, en la etiqueta tendra que haber puesto
"../pag5.html". Esos dos puntos (..) hace 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. Podemos evitar todas
estas complicaciones colocando todos los archivos en un solo directorio,
pero si tenemos muchas pginas lo mejor es tenerlas en directorios, pues
nos facilitar el mantenimiento de ellas.
Enlaces con una pgina fuera de nuestro sistema
Si queremos enlazar con una pgina que est fuera de nuestro Sitio Web (es
decir, que est en un servidor distinto), es necesario conocer su direccin
completa, o URL (Uniform Resource Locator). El URL podra ser, adems de
la direccin de una pgina del Web, una direccin de ftp, gopher, etc.
Una vez conocida la direccin (o URL), la colocamos en vez de lo que
hemos llamado anteriormente xxx (el destino del enlace). Si queremos
enlazar con la pgina de la Nasa (cuyo URL es: http://www.nasa.com), la
etiqueta sera:
<A HREF="http://www.nasa.com/">Pgina inicial de la Nasa </A>
Es importante escribir estas direcciones correctamente (respetando las
maysculas y minsculas, pues los servidores UNIX s las distinguen)
Enlaces con una direccin de Correo Electrnico
En este caso, sustituimos lo que se ha llamado antes xxx (el destino del
enlace) por mailto: seguido de la direccin de correo electrnico. La
estructura de la etiqueta es:
<A HREF="mailto: usuario@servidoremail">Texto del enlace</A>
Ejemplo 4:
Enlaces
<HTML><HEAD><TITLE> Ejercicio 4 </TITLE></HEAD>

<BODY>
<CENTER><H1> Mis páginas favoritas </H1></CENTER>
<HR>
Estas son mis páginas favoritas:
<P><A HREF="http://www.desarrolloweb.com">Desarrollo Web</A>
<BR><A HREF="http://www.forosdelweb.com">Foros del Web</A>
<BR> <A HREF="http://www.google.com">Google</A>
</BODY>
</HTML>
29
DHTML
Resultado Web:
Imgenes
La etiqueta que nos sirve para incluir imgenes en las pginas Web es muy
similar a la de enlaces a otras pginas. A esta etiqueta se le indica el nombre
y la localizacin de un archivo que contiene una imagen.
La estructura de la etiqueta es:
<IMG SRC="imagen.gif">
Con el comando IMG SRC (Image Source, origen o fuente de la imagen) se
indica que se quiere mostrar una imagen llamada imagen.gif (el nombre que
tenga el archivo).
Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT
<IMG SRC="imagen.gif" ALT="descripcin">

Con ALT se inserta una descripcin (una palabra o una frase breve) de la
imagen. ALT 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.
Si el archivo se encuentra en el mismo directorio, es suficiente escribir el
nombre. Pero si se encontrara en otro lugar es necesario indicar su
ubicacin exacta, utilizando los criterios que vimos en la parte de enlaces.
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.
30
DHTML
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
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.
Segn vimos anteriormente, la estructura general de un enlace es:
<A HREF="xxx"> yyy </A>.
Donde xxx era el destino del enlace e yyy el texto del enlace (o ms
generalmente hablando, lo que aparece en la pantalla como el enlace;
anteriormente era un texto, y en ste va a ser una imagen). 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 (flecha.gif) para acceder al
ejercicio 2 (ejercicio2.html):
<A HREF="ejercicio2.html"><IMG SRC="flecha.gif"></A>

Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina
deseada. Obsrvese adems que la imagen est rodeada de un rectgulo
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="ejercicio2.html"> <IMG SRC="flecha.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.
Ejemplo 5:
Imgenes
<HTML>
<HEAD>
31
DHTML

</HEAD>
<BODY>
<CENTER><H1>Ejercicio 5</H1></CENTER>
<HR>
Esta es una pgina Web. Tiene todos los elementos básicos sobre todo
imágenes.
<P><A HREF ="ejercicio1.html"> <IMG SRC ="iconos/nuevo.gif" width="20"
height="22" border="0"> </A> Mi primera pagina Web.
<P><A HREF ="ejercicio2.html"> <IMG SRC ="iconos/buscar.gif" width="15"
height="15" border="0"> </A> Mis Cursos
<CENTER>
<H3> Desarrollo Web con PHP </H3>
<IMG SRC="imagenes/teclado.jpg" ALT="playa" height="145">
</CENTER>
</BODY>
</HTML>
Resultado Web:
32
DHTML
Tablas
Las etiquetas necesarias para crear tablas son:
<TABLE> Y </TABLE> para especificar el inicio y final de la tabla.
A esta etiqueta le podemos aadir un comando: BORDER, que sirve para
especificar el grosor del borde de las celdas. La manera de especificar esta
caracterstica es la siguiente:
<TABLE BORDER=[espesor]>
[resto de las etiquetas]
</TABLE>
Por ejemplo: si queremos una tabla con un borde de una unidad de espesor,
escribiremos el siguiente cdigo:
<TABLE BORDER=1>
[resto de las etiquetas]
</TABLE>
Dentro de estas etiquetas, es necesario especificar las filas y columnas que
contendr la tabla.
Las etiquetas para formar cada fila (row) de la tabla, que son: <TR> y </TR>.
Estas etiquetas tenemos que repetirlas tantas veces como filas queremos
que tenga la tabla. Las etiquetas para crear columnas son: <TD> y </TD>,
que engloban el contenido de cada celda concreta (texto, imgenes, etc.).
Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
Ejemplo 6: Tablas
Ejercicio06.html
<HTML>
<HEAD><TITLE> Ejercicio 6 </TITLE></HEAD>
<BODY BGCOLOR="#CCFFFF" TEXT="#AA0000">
<CENTER>
<H1> Ejercicio 6 </H1>
</CENTER>

<HR width=75%>
<A HREF="ejercicio01.html"> <IMG SRC="iconos/nuevo.gif" WIDTH=20 HEIGHT=22
border="0"> </A>
<TABLE BORDER=1>
<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>
</BODY>
</HTML>
33
DHTML
Resultado Web:
Figura 19. Tabla HTML

Que pasara si creamos filas con diferente numero de columnas?, el
navegador crear un espacio vaco en dicha posicin. Si en la tabla del
ejercicio 6 eliminamos la tercera celda de la segunda fila, es decir si
borramos <TD>fila2-celda3</TD>, resultar:
Figura 20. Tabla sin una celda

Titular de la tabla
Se puede aadir un titular a la tabla, es decir un texto situado en la parte
superior de la tabla que indica cul es su contenido. ste titular se consigue
con las etiquetas: <CAPTION> y </CAPTION> para su inicio y finalizacin,
respectivamente.
Tomando en cuenta el ejercicio anterior, vemos como podemos utilizar esta
etiqueta:
<table BORDER="1">
<caption>Ejemplo de filas desiguales </caption>
<tr>
34
DHTML
<td>fila1-celda1</td>
</tr>
<tr>
</tr>
</table>
Resultado Web:
Figura 21. Tabla con etiqueta CAPTION

Adems de las celdas que contienen datos normales, podemos poner, si nos
conviene, celdas de cabecera, que se distinguen por estar el texto de dichas
celdas en negrita y centrado. Estas celdas se insertan escribiendo la
etiqueta: <TH> y </TH>. Vamos a aadir, en el ejemplo anterior, una fila de
estas celdas de cabecera, antes de las otras dos que ya existan:
<TABLE BORDER="1">
<CAPTION>Ejemplo de filas desiguales </CAPTION>
<TR>
<TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH>
</TR>
<TR>
<TD>fila1-celda1</TD>
</TR>
<TR>
</TR>
</TABLE>
35
DHTML
Resultado Web
Figura 22. Tabla con etiqueta TH

Ubicacin contenido dentro de la celda
El contenido de una celda por defecto est alineado a la izquierda. Pero se
puede cambiar 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>
En el caso de la etiqueta <TH>, por defecto el texto esta en el centro de la
celda.
Por defecto, las celdas tienen alineacin vertical es en el medio. Esto
tambin se puede cambiar, aadiendo dentro de la etiqueta de la celda los
siguientes atributos:
<TD VALIGN=TOP> Arriba </TD>

<TD VALIGN=CENTER> Centro </TD>
<TD VALIGN=BOTTOM> Abajo </TD>
Cambiando las dimensiones de la tabla
El navegador normalmente dimensiona el tamao de la tabla de acuerdo con
el nmero de filas, de columnas, por el contenido de las celdas, espesor de
los bordes, etc. Pero nosotros por medio de atributos tambin podemos
modificar las dimensiones de una tabla. Estos atributos son: WIDTH y
HEIGHT (ancho y alto), los cuales pueden estar expresados en pixeles o en
porcentaje de la dimensin de la pantalla.
Celdas que abarcan a otras varias
A veces puede interesarnos que una celda se extienda sobre otras varias.
Esto se consigue aadindo dentro de la etiqueta de la celda los atributos
COLSPAN=nmero para extenderse sobre un nmero determinado de
36
DHTML
columnas, o ROWSPAN=nmero para extenderse verticalmente sobre un
nmero determinado de filas.
Por ejemplo, en la tabla anterior vamos a aadir una fila con una sola celda,
que abarca a tres columnas:
<TABLE BORDER="1">
<TR>
</TR>
<TR>
<TD COLSPAN=3> Celda sobre 3 columnas </TD>
<TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
Resultado Web
Figura 23. Tabla con COLSPAN

O, en la misma tabla, vamos a aadir una celda en la primera fila. pero que
abarque tambin a la siguiente:
<TABLE BORDER="1">
<TR>
37
DHTML

</TR>
<TR>
<TD COLSPAN=3> Celda sobre 3 columnas </TD>
<TR>
<TR>
<TD ROWSPAN=2> Celda junto a 2 filas </TD>
</TR>
<TR>
</TR>
</TABLE>
Resultado Web
Figura 24. Tabla con ROWSPAN

Separacin entre las celdas de una tabla
Por defecto, la separacin entre celdas de una tabla es de dos pixels. 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>
Separacin entre el borde y el contenido dentro de las celdas
La separacin entre el borde y el contenido dentro de las celdas es de un
pixel. Si queremos cambiar esto, lo hacemos con el atributo
CELLPADDING, que se pone dentro de la etiqueta <TABLE>.
Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y
los bordes, dentro de cada celda: <TABLE BORDER CELLPADDING=20>
38
DHTML
Se puede combinar este atributo con CELLSPACING, visto lneas atrs. 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>

Resultado Web
Figura 25. Tabla con CELLSPACING y CELLPADDING

Ejemplo 7:
Ejemplo de Tablas en HTML
ejemplo06.html
<HTML>
<HEAD>
<TITLE> Tablas </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Tablas </H1>
</CENTER>
<HR width=75%>
39
DHTML
<TABLE BORDER=3 CELLSPACING=10 CELLPADDING=8>

<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Resultado Web
Figura 26. Resultado de ejemplo06.html
Formularios
Los formularios permiten a los usuarios enviar informacin al servidor, en el
cual hay instalado(s) programa(s) que procesan esta informacin.
Estructura de un formulario
La estructura de un formulario es la siguiente:
Etiqueta de inicio:
Cuerpo del formulario, con los distintos elementos para poder
introducir los datos.
Botones de envo y de borrado.
Etiqueta de cierre </FORM>
40
DHTML
Etiqueta de inicio
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE = "TEXT/PLAIN">

El atributo ACTION indica la accin que se debe efectuar.
El atributo METHOD=POST indica que los datos sean inmediatamente
enviados a la direccin de email u a otro destino establecido segn el
atributo ACTION.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas
las recibamos como un archivo de texto, perfectamente legible y sin
codificar.
Elementos para introducir los datos
Existen tres tipos de elementos:
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">
En 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 el nombre de la variable que contendr el valor del elemento.
Introduccin por medio de texto (una lnea)
En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE
no procede en este caso.
Vamos a poner un ejemplo: solicitamos el apellido del usuario.
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN">

Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Si el usuario introduce su apellido, por ejemplo: Ruiz, y pulsa el botn de
envo (que veremos ms adelante), recibiremos un email suyo con el
siguiente texto:
Apellido=Ruiz
La longitud de esta caja de texto es por defecto de 20 caracteres. Se puede
variar incluyendo en la etiqueta el atributo SIZE="nmero". Por otra parte,
sea cual sea la longitud, si no se indica nada, el usuario puede introducir el
nmero de caracteres que quiera. Se puede limitar esto, incluyendo en la
etiqueta el atributo MAXLENGTH="nmero".
41
DHTML
En el caso que hemos visto, si hubiramos cambiado la etiqueta
correspondiente por:
<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 etiquea correspondiente por:
<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Los caracteres introducidos se representan por asteriscos.
Introduccin por medio de texto (mltiples lneas)
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">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero
de filas, y COLS el de columnas). y la de cierre: </TEXTAREA>
Ejemplo 8:
Formulario solicitando los comentarios del usuario:

Introduce tus comentarios:
<BR>
<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>
Resultado Web:
Figura 27. Resultado de ejemplo08.html
42
DHTML
Introduccin por medio de Listas Desplegables
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 listas desplegables.
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>
<OPTION>Verde </OPTION>
<OPTION>Azul </OPTION>
</SELECT >
</FORM>
Si el usuario escoge, por ejemplo: 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 que sean visibles mltiples opciones a la vez, aadimos en la
etiqueta los atributos MLTIPLE SIZE="nmero", donde especificamos el
nmero de opciones visibles.
Formulario de confirmacin (checkbox)
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 9: Confirmacin de la 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.
Si queremos que el formulario aparezca inicialmente como marcado (el
usuario no necesitar hacerlo), basta con aadir el atributo CHECKED
dentro de la etiqueta.
Ejemplo: <INPUT TYPE="checkbox" NAME="Lista" CHECKED>
43
DHTML
Botones de radio
Cuando queremos que el usuario elija una nica opcin entre varias,
podemos hacer 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> PC
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
<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.
Si el usuario ha escogido la opcin PC y pulsa el botn de envo, recibiremos
un email suyo con el texto: SistemaOperativo=PC.
Botones de envo y de borrado
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="Enviar">
En donde zzz es el texto que queremos que aparezca en el botn. Ejemplo:

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:
44
DHTML
<P><INPUT TYPE="reset" VALUE="Borrar datos">
Se puede comprobar su funcionamiento, escribiendo algo en el formulario y
pulsando luego el botn de borrado.
Consideraciones finales
Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden
utilizar. Pero no hay ningn inconveniente en usar, dentro del mismo
formulario, distintos tipos de introduccin de datos. Al pulsar el usuario el
botn de envo recibiramos en email suyo con las distintas parejas
NAME=VALUE de cada elemento, encadenadas con el smbolo &.
Ejemplo 10:
Formulario 2
Ejercicio10.html
<HTML>
<HEAD><TITLE>LIBRO DE VISITAS</TITLE></HEAD>
<BODY>
<P><CENTER>
<H2>Libro de visitas</H2>
<P>
<FORM ACTION=mailto:xy@ab 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>
<P><HR><P>
</BODY>
</HTML>
Resultado Web:
45
DHTML
Resultado de ejercicio10.html
46
DHTML
HTML 4
La especificacin 4.0 de HTML, nos trae algunas novedades respecto a la
versin 3.2, las cuales sern comentadas a continuacin:
Elementos nuevos
Los nuevos elementos en HTML 4.0 son: ABBR, ACRONYM, BDO,
BUTTON, COL, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET,
IFRAME, INS, LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT,
OPTGROUP, PARAM, SPAN, TBODY, TFOOT, THEAD y Q.
Cambios en los atributos
Casi todos los atributos que especifican el formato (tamao, color,
alineacin, etc) de un documento HTML han sido desaprobados en
favor de las hojas de estilo en cascada.
La lista de atributos del apndice indica qu atributos han sido
desaprobados.
Los atributos id y class permiten a los autores asignar informacin de
nombre y clase a los elementos para las hojas de estilo, como
identificadores de vnculo, para los scripts, para declaraciones de
objetos, para tratamientos genricos del documento, etc.
Veamos a continuacin detalles de algunas nuevas etiquetas:
Frames
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
de desplazamiento. Los navegadores que lo implementan son el Netscape
2.0, y el Explorer 2.0 en adelante. 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.
Para comprender los distintos conceptos vamos a desarrollar un ejemplo,
creando una pgina con dos frames. El de la izquierda va a servir de ndice
de lo que veamos en el de la derecha, y en ste veremos inicialmente una
pgina de presentacin. Se podr acceder tambin aqu a las pginas
creadas anteriormente, si se pulsa un enlace en el frame de la izquierda.
Documento de definicin de los frames
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.
47
DHTML
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 de la izquierda) ocupe el
20% del ancho de la pantalla, y el otro, el 80% restante.
Y 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 pagind.html), y el de la derecha otro documento HTML
que va a servir de pgina de presentacin (al que llamaremos pagpre.html).
Todo lo anterior se refleja en el siguiente documento HTML:
Ejemplo 11:
Uso de frames
Ejercicio11.html
<HTML>
<HEAD>
<TITLE>Mi página con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="ejercicio11a.html">
<FRAME SRC="ejercicio11b.html" NAME="principal">
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<A HREF="ejercicio12.html"> ir a página sin frames </A>.
</NOFRAMES>
</HTML>
Ejercicio11a.html
<html>
<head>
<title>marco 1</title>
</head>
<body>
marco 1
</body>
</html>
Ejercicio11b.html
<html>
<head>
<title>marco 2</title>
</head>
<body>
marco 2
</body>
</html>
48
DHTML
Resultado Web
Figura 28. Marcos o Frames

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 ancho 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 ejercicio11a.html y el del segundo (el de la derecha) sea
el documento HTML ejercicio11b.html.
Podemos ver en la etiqueta del segundo marco que se ha incluido el atributo
NAME="principal", pero no as en el primero, debido a que se necesita dar
un nombre al segundo frame, pues, podramos utilizar hipervnculos en el
primer marco que muestren pginas Web en el segundo, utilizando la
etiqueta
TARGET,
por
ejemplo:
<a
href=ejercicio12.html
TARGET=principal>ejercicio 12</a>. Segn este ejemplo la pgina
ejercicio12.html se abrir en el frame del lado derecho de la pgina.
Para el caso que el navegador no soporte FRAMES se utiliza 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
49
DHTML
ser el cdigo HTML de una pgina completa (lo que normalmente va entre
las etiquetas <BODY> y </BODY>)
Un segundo diseo con frames podra ser dividiendo la pgina de manera horizontal.
Ejemplo11c.html
<HTML>
<HEAD>
<TITLE>Mi página con frames</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 80%">
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<A HREF="ejercicio12.html"> ir a página sin frames </A>.
</NOFRAMES>
</HTML>
Resultado Web:
Figura 29. Marcos con divisin horizontal
50
DHTML
Etiqueta ACRONYM
Indica un acrnimo (es la suma de los significados de las palabras que lo
forman. Por ejemplo HTML, (Hyper Text Markup Language).
Etiqueta ABBR
Indica una forma abreviada (etc, Dr, Ing, Corp, etc.).
Los elementos ABBR y ACRONYM permiten a los autores indicar claramente la
aparicin de abreviaturas y acrnimos.
Ejemplo 12:
Acrnimos y Abreviaturas
Ejemplo12.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<ACRONYM title="World Wide Web">WWW</ACRONYM>
<ACRONYM lang="en"
title="Hyper Text Markup language">
HTML
</ACRONYM>
<br>
<ABBR lang="es" title="Doctor">Dr</ABBR>
<ABBR title="Señor">Sr</ABBR>
</body>
</html>
Resultado Web:
Figura 30. Acrnimos y abreviaturas

Etiqueta Q
Esta etiqueta inserta comillas dobles en una frase. Se utiliza para citar
frases.
Ejemplo 13:
Frase entre comillas
Ejercicio13.html
51
DHTML
Carlos dice:
<Q lang="es"> Estoy aprendiendo HTML </Q><br>
Jaime dice:
<Q lang="es"> Es un lenguaje fácil de aprender </Q>
Resultado Web:
Figura 31. Frase entre comillas

Etiquetas INS y DEL
INS y DEL se usan para marcar secciones del documento que han sido
insertadas o borradas con respecto a una versin diferente de un
documento.
Estos dos elementos son especiales dentro de HTML, ya que pueden actuar
o bien como elementos en bloque o bien como elementos en lnea (pero no
como ambos a la vez). Pueden contener una o ms palabras dentro de un
prrafo o uno o ms elementos en bloque como prrafos, listas y tablas.
Ejemplo 14:
INS y DEL
Ejercicio14.html
<INS datetime="2008-09-25T08:15:30-05:00"
cite="http://oscar.capunay.com/index.php">Ejemplo de texto nuevo.
Este texto fue agregado.
</INS>
<P>
Esta frase tiene <DEL>una palabra borrada</DEL> algo borrado.
</P>
Resultado Web:
Figura 32. Acrnimos y abreviaturas

52
DHTML
OBJECT
Esta etiqueta se usa cuando un elemento Web ser representado utilizando
un plug-in de algn software externo al agente o navegador utilizado.
PARAM
Las etiquetas PARAM especifican un conjunto de valores que pueden ser
necesarios para un objeto en tiempo de ejecucin. Puede aparecer cualquier
nmero de elementos PARAM en el contenido de un elemento OBJECT o
APPLET, y en cualquier orden, pero deben ser colocados al principio del
contenido del elemento OBJECT o APPLET que los contienen.
Ejemplo 15:
OBJECT Y PARAM
Ejemplo15.html
<html>
<head>
<title>Ejemplo de OBJECT, PARAM y EMBED</title>
</head>
<body>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfl
ash.cab#version=6,0,0,0"
WIDTH="100%" HEIGHT="100%" ALIGN="" id="intro2">
<PARAM NAME=movie VALUE="intro2.swf">
<PARAM NAME=loop VALUE=false>
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=scale VALUE=exactfit>
<PARAM NAME=bgcolor VALUE=#080638>
<EMBED src="intro2.swf" loop=false menu=false quality=high scale=exactfit
bgcolor=#080638
WIDTH="100%"
HEIGHT="100%"
NAME="intro2"
ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED
>
</OBJECT>
</body>
</html>
Resultado Web:
53
DHTML
Figura 33. Animacin flash

TABLAS
Grupos de filas: los elementos THEAD, TFOOT y TBODY
Las filas de una tabla pueden agruparse en una cabecera de tabla, un pie de
tabla, y una o ms secciones de cuerpo de tabla, usando los elementos
THEAD, TFOOT y TBODY, respectivamente. Esta divisin permite a los
agentes de usuario ofrecer la posibilidad de desplazar la informacin de los
cuerpos de la tabla independientemente de la cabecera y el pie. Cuando se
imprimen tablas largas, la informacin de cabecera y pie de tabla puede
repetirse en todas las pginas que contengan datos de la tabla.
La cabecera de tabla y el pie de tabla deberan contener informacin sobre
las columnas de la tabla. El cuerpo de tabla debera contener filas de datos
de tabla.
En caso de estar presentes, cada elemento THEAD, TFOOT y TBODY contiene
un grupo de filas. Cada grupo de filas debe contener al menos una fila.
Ejemplo 16:
Uso de TABLA, THEAD, TFOOT y TBODY
Ejercicio16.html
<html>
<head>
<title>Ejemplo de THEAD, TFOOT y TBODY</title>
</head>
<body>
54
DHTML
<table>
<thead>
<tr>
<th>Id</th>
<th>Nombres</th>
<th>Apellidos</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">Pie de la tabla</th>
</tr>
</tfoot>
<tbody>
<tr><td>1</td> <td>Kelly</td> <td>Quiroz Ch</td> </tr>
<tr> <td>2</td> <td>Carlos</td> <td>Capuay Uceda</td> </tr>
<tr> <td>3</td> <td>Marco</td> <td>Quiroz Chavil</td> </tr>
<tr> <td>4</td> <td>Jaime</td> <td>Capuay Uceda</td> </tr>
</tbody>
</table>
</body>
</html>
Resultado Web:
Figura 34. Tabla con THEAD, TFOOT Y TBODY

TFOOT debe aparecer antes de TBODY dentro de una definicin de TABLE
de modo que el navegador pueda representar el pie antes de recibir todas
las (potencialmente numerosas) filas de datos. A continuacin se resume
qu etiquetas son obligatorias y cules pueden omitirse:
55
DHTML
FORMULARIOS
El elemento BUTTON
Los botones creados con el elemento BUTTON funcionan exactamente igual
que los botones creados con el elemento INPUT, pero ofrecen posibilidades
ms ricas de representacin: el elemento BUTTON puede tener contenido.
Por ejemplo, un elemento BUTTON que contenga una imagen se parece y
funciona como un elemento INPUT cuyo atributo type sea igual a "image",
pero el tipo de elemento BUTTON permite un contenido.
Los navegadores pueden representar los botones BUTTON con un relieve y
un movimiento arriba/abajo al pulsarlos, mientras que pueden representar los
botones INPUT como imgenes "planas".
El siguiente ejemplo extiende un ejemplo previo, pero creando los botones
de envo y de restablecer con BUTTON en lugar de INPUT. Los botones
contienen imgenes sacadas de elementos IMG.
Ejemplo 17:
Button con imagen
Ejercicio17.html
<html>
<head>
<title>Ejemplo de BUTTON</title>
</head>
<body>
<FORM action="http://oscar.capunay.com/datos/formulario" method="post">
<P>
Nombre: <INPUT type="text" name="txtnombre"><BR>
Apellido: <INPUT type="text" name="txtapellido"><BR>
email: <INPUT type="text" name="txtemail"><BR>
sexo: <INPUT type="radio" name="optsexo" value="H"> Hombre

<INPUT type="radio" name="optsexo" value="M"> Mujer<BR>
<BUTTON name="enviar" value="enviar" type="submit">
Editar<IMG src="iconos/editar.gif" alt="Enviar Datos"></BUTTON>
<BUTTON name="reiniciar" type="reset">
Restablecer<IMG
src="iconos/nuevo.gif"
alt="Limpiar"
width="12"></BUTTON>
</P>
</FORM>
</body>
</html>
Resultado Web:
56
DHTML
Figura 35. BUTTON con imagen

El elemento OPTGROUP
El elemento OPTGROUP permite a los autores agrupar opciones lgicamente.
Esto es particularmente til cuando el usuario debe elegir de entre una larga
lista de opciones; es ms fcil apreciar y recordar grupos de opciones
relacionadas que una larga lista de opciones sueltas. En HTML 4, todos los
elementos OPTGROUP deben especificarse directamente dentro de un
elemento SELECT (es decir, no pueden anidarse unos grupos dentro de
otros).
Ejemplo 18:
Formulario con OPTGROUP
Ejercicio18.html
<html>
<head>
<title>Ejemplo de OPTGROUP</title>
</head>
<body>
<FORM
action="http://oscar.capunay.com/datos/registro.php"
method="post">
<P>
<SELECT name="Producto" size="1">
<OPTION selected label="ninguno" value="ninguno"> Ninguno</OPTION>
<OPTGROUP label="Limpieza">
<OPTION label="escoba" value="limp001">Escoba</OPTION>
<OPTION
label="jabón"
value="limp002">jabón</OPTION>
<OPTION label="detergente" value="limp003">Detergente</OPTION>
</OPTGROUP>
<OPTGROUP label="Dulces">
<OPTION label="chocolate" value="dulc001">Chocolate</OPTION>
57
DHTML
<OPTION label="caramelo" value="dulc002">Caramelo</OPTION>
<OPTION label="gelatina" value="dulc003">Gelatina</OPTION>
</OPTGROUP>
<OPTGROUP label="Bebidas">
<OPTION label="pepsi" value="bebi001">PEPSI</OPTION>
<OPTION label="cola-cola" value="bebi002">Coca Cola</OPTION>
</OPTGROUP>
</OPTGROUP>
</SELECT>
</FORM>
</body>
</html>
Resultado Web:
Figura 36. Lista con OPTGROUP

Estructura a los formularios: los elementos FIELDSET y LEGEND
La etiqueta FIELDSET agrupa controles, lo que permite a los usuarios
entender su propsito y al mismo tiempo facilita la navegacin. El uso
correcto de esta etiqueta le da mayor nivel de accesibilidad al documento
Web.
La etiqueta LEGEND permite asignar un ttulo a un FIELDSET. La leyenda
mejora la accesibilidad cuando el FIELDSET no se representa visualmente.
Ejemplo 19:
Ejemplo de Conjunto de Campos
Ejercicio19.html
<html>
<head>
<title>Ejemplo FIELDSET y LEGEND</title>
58
DHTML
</head>
<body>
<FORM action="data/proceso1.php" method="post">
<FIELDSET>
<LEGEND>Datos Personales </LEGEND>
Nombres:<INPUT name="txtnombres" type="text" tabindex="1"><br>
Apellidos:<INPUT name="txtapellidos" type="text" tabindex="2"><br>
Ciudad: <INPUT name="txtciudad" type="text" tabindex="3"><br>
Teléfono: <INPUT name="txtfono" type="text" tabindex="4"><br>
</FIELDSET>
<FIELDSET>
<LEGEND>Datos Internet</LEGEND>
Página personal:<INPUT name="txtpagina" type="text" size="50"
tabindex="5"><br>
Blog:<INPUT name="txtblog" type="text" size="40" tabindex="2"><br>
Correo Electrónico: <INPUT name="txtcorreo" type="text" size="30"
tabindex="3"><br>
Skype: <INPUT name="txtfono" type="text" size="10" tabindex="4"><br>
ICQ: <INPUT name="txtfono" type="text" size="10" tabindex="4"><br>
</FIELDSET>
<button type="submit">Enviar</button>
</FORM>
</body>
</html>
Resultado Web:
Figura 37. Formulario con agrupamiento de controles

59
DHTML
Etiquetas DIV y SPAN
Las etiquetas DIV y SPAN, junto con los atributos id y class, ofrecen un
mecanismo genrico para aadir estructura a los documentos. Estos
elementos especifican si su contenido es en lnea (SPAN) o en bloque (DIV)
pero no imponen ningn otro estilo de presentacin al contenido, por este
motivo, se pueden aplicar hojas de estilo en cascada a estas etiquetas.
Ejemplo 20:
DIV y SPAN
Ejercicio20.html
<html>
<head>
<script type="text/javascript">
<!-function toggle(obj){
var objID = document.getElementById(obj);
objID.style.display = (objID.style.display == "none")?"":"none";
}
// -->
</script>
<title>menu</title>
</head>
<body>
<table>
<tr>
<th width="16"><a href="#" onClick="toggle('tablas');return false;"
title="Ocultar o Mostrar Menu">
<img src="iconos/nuevo.gif" alt="despliegue" width="16" height="16"
border="0"></a></th>
<th><SPAN>Tablas</SPAN></th>
</tr>
</table>
<div id="tablas" style="display: none;">
<table>
<tr>
<td><a
href="universidad.php"
target="principal">Universidades</a></td>
</tr>
<tr>
<td><a href="facultad.php" target="principal">Facultades</a></td>
</tr>
<tr>
<td><a href="escuela.php" target="principal">Escuelas</a></td>
</tr>
<tr>
<td><a href="semestre.php" target="principal">Semestre</a></td>
</tr>
60
DHTML
</table>
</div>
<table>
<tr>
<th width="16"><a href="#" onClick="toggle('academico');return
false;" title="Ocultar o Mostrar Menu">
<img src="iconos/nuevo.gif" alt="despliegue2" width="16" height="16"
border="0"></a></th>
<th><SPAN>Maestros</SPAN></th>
</tr>
</table>
<div id="academico" style="display: block;">
<table>
<tr>
<td><a href="alumno.php" target="principal">Alumnos</a></td>
</tr>
<tr>
<td><a href="curso.php" target="principal">Cursos</a></td>
</tr>
<tr>
<td><a href="evaluacion.php" target="principal"> Evaluaciones
</a></td>
</tr>
<tr>
<td><a href="registro.php" target="principal">Registro</a></td>
</tr>
<tr>
<td><a href="asistencia.php"
target="principal">Inasistencias</a></td>
</tr>
<tr>
<td><a href="resultado.php" target="principal">Resultados</a></td>
</tr>
<tr>
<td><a href="mensaje.php" target="principal">Mensajes</a></td>
</tr>
<tr>
<td><a href="encuesta.php" target="principal">Encuestas</a></td>
</tr>
</table>
</div>
</body>
</html>
Podemos ver en este ejemplo que podemos ocultar o hacer visible las DIV.
Resultado Web:
61
DHTML
Figura 38. Ejemplo de pgina con DIVs y SPANs
62
DHTML
JavaScript
JavaScript, al igual que Java o VRML, es una de las mltiples maneras que
han surgido para extender las capacidades del lenguaje HTML. Al ser la ms
sencilla, es por el momento la ms extendida. Es importante saber que:
JavaScript no es un lenguaje de programacin propiamente dicho. Es un
lenguaje script u orientado a documento, como pueden ser los lenguajes de
macros que tienen muchos procesadores de texto. Nunca se podr hacer un
programa con JavaScript, tan slo se podr mejorar una pgina Web con
algunas cosas sencillas. JavaScript y Java son dos cosas distintas,
principalmente porque Java s que es un lenguaje de programacin
completo. Lo nico que comparten es la misma sintaxis. Existen tres
versiones de JavaScript. Casi todo lo que se ha escrito en este documento
funciona con la versin 1.0, que naci con el Netscape Navigator 2.0.
Tambin existe una versin 1.3, introducida en la versin 4.06. Esta versin
es una pequea revisin de la 1.2 creada para ajustarse al estndar
internacional ECMA que regula el lenguaje JavaScript.
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir
una ventana que nos muestre el mensaje "hola, Web". As podremos ver los
elementos principales del lenguaje. El siguiente cdigo es una pgina Web
completa con un botn que, al pulsarlo, muestra el mensaje.
Ejemplo 21:
funcin alert
HolaWeb.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaWeb() {
alert("Hola, Web!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaWeb()">
</FORM>
</BODY>
</HTML>
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos
extraos que tiene la pgina anterior:
</SCRIPT>
63
DHTML
Dentro de estos elementos ser donde se puedan poner funciones en
JavaScript.
Por otra parte el cdigo de JavaScript puede ser incluido en la pgina Web
de la siguiente manera:
<script language="JavaScript" src ="archivo.js"> </script>

El archivo externo simplemente es un archivo del texto que contiene cdigo
JavaScript, y cuyo nombre acaba con la extensin js.
El cdigo de Java Script puede ser escrito en cualquier lugar de la pgina
Web, en este ejemplo, se ha escrito en la cabecera con la finalidad de hacer
el cdigo ms legible. Si un navegador no acepta JavaScript no leer lo que
hay entre estos elementos.
function HolaWeb() {
alert("Hola, Web!");
}
Aunque JavaScript est orientado a objetos no es de ningn modo tan
estricto como Java, donde nada est fuera de un objeto. En el cdigo de la
funcin vemos una llamada al mtodo alert (que pertenece al objeto
window) que es la que se encarga de mostrar el mensaje en pantalla.
<FORM>
onClick="HolaWeb()">
</FORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa
nueva: onClick. Es un controlador de evento. Cuando el usuario pulsa el
botn, el evento click se dispara y ejecuta el cdigo que tenga entre comillas
el controlador de evento onClick, en este caso la llamada a la funcin
HolaWeb(), que tendremos que haber definido con anterioridad. Existen
muchos ms eventos que iremos descubriendo segn avancemos. En
realidad, podramos haber escrito lo siguiente:
<FORM>
onClick="alert('Hola,Mundo!')">
</FORM>
Elementos bsicos
Comentarios
Un comentario es una parte de nuestro programa que el ordenador ignora y
que, por tanto, no realiza ninguna tarea. Se utilizan generalmente para poner
64
DHTML
en lenguaje humano lo que estamos haciendo en el lenguaje de
programacin y as hacer que el cdigo sea ms comprensible.
En JavaScript existen dos tipos de comentarios. El primero nos permite que
el resto de la lnea sea un comentario. Para ello se utilizan dos barras
inclinadas:
var i = 1; // Aqui esta el comentario
Sin embargo, tambin permite un tipo de comentario que puede tener las
lneas que queramos. Estos comentario comienzan con: /* y terminan por */.
Literales
Se llama as a los valores que puede tomar una variable o una constante.
Aparte de los distintos tipos de nmeros y valores booleanos:
"Soy una cadena"
3434
3.43
true, false
Tambin podemos especificar arrayso vectores:
vacaciones = ["Navidad", "Semana Santa", "Verano"];
alert(vacaciones[0]);
Dentro de las cadenas podemos indicar varios caracteres especiales, con
significados especiales. Estos son los ms usados:
Tabla 3.
Carcter
\n
\t
\'
\"
\\
\999
Caracteres especiales para cadenas en JavaScript
Significado
Nueva lnea
Tabulador
Comilla simple
Comilla doble
Barra invertida
El nmero ASCII (segn la codificacin Latin-1) del carcter en
hexadecimal
De este modo, el siguiente literal:

"Javascript (\xA9 2002)"
se corresponde con la cadena:
Javascript ( 2002)
Por ltimo, tambin se pueden especificar objetos como literales, aunque no
funcione en ms que en Netscape 4 y superiores:
65
DHTML
miNavegador = {nombre: "Netscape", version: 4.5, idioma: "Espaol",

plataforma: "PC"};
alert(miNavegador.plataforma);
Sentencias y bloques
En Javascript las sentencias se separan con un punto y coma, y se agrupan
mediante llaves ({ y }).
Tipos de datos
En Javascript los tipos de datos se asignan dinmicamente segn
asignamos valores a las distintas variables y son los clsicos: cadenas de
texto, varios tipos de enteros y reales, valores booleanos, vectores, matrices,
referencias y objetos.
Variables
Las variables son nombres que ponemos a los lugares donde almacenamos
la informacin. En Javascript, deben comenzar por una letra o un subrayado
(_), pudiendo haber adems dgitos entre los dems caracteres.
No es necesario declarar una variable, pero cuando se hace es por medio
de la palabra reservada var. Una variable, cuando no es declarada, tiene
siempre mbito global, mientras que en caso contrario ser de mbito
global si est definida fuera de una funcin, y local si est definida dentro:
var x;
// Accesible fuera y dentro de pruebas
y = 2;
function pruebas() {
var z;
// Accesible slo dentro de pruebas
w = 1;
}
Se pueden declarar varias variables en una misma sentencia separndolos
por comas:
var x, y, z;
El tipo de datos de la variable ser aquel que tenga el valor que asignemos a
la misma, a no ser que le asignemos un objeto por medio del operador new.
Vectores y matrices
Estos tipos de datos complejos son un conjunto ordenado de elementos,
cada uno de los cuales es en s mismo una variable distinta. En Javascript,
los vectores y las matrices son objetos. Como veremos que hacen todos
los objetos, se declaran utilizando el operador new:
miVector = new Array(20)
66
DHTML
El vector tendr inicialmente 20 elementos (desde el 0 hasta el 19). Si
queremos ampliarlo no tenemos ms que asignar un valor a un elemento
que est fuera de los lmites del vector:
miEstupendoVector[25] = "Algn valor"
De hecho, podemos utilizar de ndices cualquier expresin que deseemos
utilizar. Ni siquiera necesitamos especificar la longitud inicial del vector si no
queremos:
vectorRaro = new Array();

vectorRaro["insertar en los favoritos"] = "Esto es Javascript";
Hacer una matriz bidimensional es ms complicado, ya que tenemos que
hacer un bucle que cree un vector nuevo en cada elemento del vector
original.
Nota importante: JavaScript es sensible a maysculas y minsculas, todos
los elementos de JavaScript deben referenciarse cmo se definieron, no es
lo mismo "Salto" que "salto".
Operadores
Los operadores nos permiten unir identificadores y literales para formar
expresiones. Las expresiones son el resultado de operaciones matemticas
o lgicas. Un literal o una variable son expresiones, pero tambin lo son esos
mismos literales y variables unidos entre s mediante operadores.
JavaScript dispone de muchos ms operadores que la mayora de los
lenguajes, si exceptuamos a sus padres C, C++ y Java. Algunos de ellos no
los estudiaremos debido a su escasa utilidad y con algunos otros
(especialmente el condicional) deberemos andarnos con cuidado, ya que
puede lograr que nuestro cdigo no lo entendamos ni nosotros.
Operadores aritmticos
JavaScript dispone de los operadores aritmticos clsicos y algn que otro
ms:
Tabla 4.
Operadores aritmticos
Descripcin
Smbolo
Expresin
ejemplo
de Resultado
ejemplo
Multiplicacin
2*4
Divisin
5/2
2.5
Resto de una divisin

%
entera
5%2
Suma
2+2
Resta
7-2
Incremento
++
++2
Decremento
--
--2
del
67
DHTML
Menos unario
-(2+4)
-6
Los operadores de incremento y decremento merecen una explicacin

auxiliar. Se pueden colocar tanto antes como despus de la expresin que
deseemos modificar pero slo devuelven el valor modificado si estn
delante.
a = 1;
b = ++a;
En este primer caso, a valdr 2 y b 2 tambin. Sin embargo:
a = 1;
b = a++;
Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores
modifican siempre a su operando, pero si se colocan detrs del mismo se
ejecutan despus de todas las dems operaciones.
Operadores de comparacin
Podemos usar los siguientes:
Tabla 5.
Operadores de comparacin
Descripcin
Smbolo Expresin de ejemplo Resultado del ejemplo
Igualdad
==
2 == '2'
Verdadero
Desigualdad
!=
2 != 2
Falso
Igualdad estricta
===
2 === '2'
Falso
Desigualdad estricta !==
2 !== 2
Falso
Menor que
<
2<2
Falso
Mayor que
>
3>2
Verdadero
Menor o igual que
<=
2 <= 2
Verdadero
Mayor o igual que
>=
1 >= 2
Falso
La igualdad y desigualdad estricta son iguales a las normales pero hacen

una comprobacin estricta de tipo. Han sido incluidos en el estndar
ECMAScript y lo soportan Netscape 4.06 y superiores y Explorer 3 y
superiores. Hay que indicar que versiones ms antiguas de Netscape tratan
la igualdad normal como si fuera estricta.
Operadores lgicos
Estos operadores permiten realizar expresiones lgicas complejas:
Tabla 6.
Operadores lgicos
Descripcin Smbolo Expresin de ejemplo Resultado del ejemplo

Negacin
!(2 = 2)
Falso
68
DHTML
Y
&&
(2 = 2) && (2 >= 0)
Verdadero
||
(2 = 2) || (2 <> 2)
Verdadero
Operadores de asignacin
Normalmente los lenguajes tienen un nico operador de asignacin, que en
JavaScript es el smbolo =. Pero en este lenguaje, dicho operador se puede
combinar con operadores aritmticos y lgicos para dar los siguientes:
Tabla 7.
Operadores de asignacin
Operador Significado Operador Significado

x += y
x=x+y
x -= y
x=x-y
x /= y
x=x/y
x *= y
x=x*y
x%y
x=x%y
Operadores Especiales
Vamos a incluir en este apartado operadores que no hayan sido incluidos en
los anteriores. La concatenacin de cadenas, por ejemplo, se realiza con el
smbolo +. El operador condicional tiene esta estructura:
condicin ? valor1 : valor2
Si la condicin se cumple devuelve el primer valor y, en caso contrario, el
segundo. El siguiente ejemplo asignara a la variable a un 2:
a=2>3?1:2
Para tratar con objetos disponemos de tres operadores:
Tabla 8.
Operadores especiales
Descripcin
Smbolo Ejemplo
Resultado del ejemplo
Crear un objeto
new
a = new Array() a es ahora un vector
Borrar un objeto
delete
delete a
Referencia al
objeto actual
this
Elimina
el
anteriormente creado
vector
this se suele utilizar en el cdigo de los mtodos de un objeto para referirse

a otros mtodos o a propiedades de su mismo objeto.
69
DHTML
Estructuras de control
Estas estructuras se pueden clasificar en dos grandes grupos: bifurcaciones
condicionales y bucles. Aparte de los dos tipos clsicos de estructuras de
control, en JavaScript disponemos de algunas estructuras adicionales para
facilitar el manejo de objetos.
a) Bifurcaciones condicionales
Una bifurcacin condicional en una estructura que realiza una tarea u otra
dependiendo del resultado de evaluar una condicin. La primera que vamos
a estudiar es la estructura if...else. Esta estructura es la ms sencilla y
antigua de todas:
a=5;
b=7;
if (a>b)
alert(a es mayor que b);
else
alert(a no es mayor que b);
Hay que indicar que el else es opcional..
La siguiente estructura bifurca segn los distintos valores que pueda tomar
una variable especfica. Es la sentencia switch:
switch(color) {
case "azul":
alert( El color elegido es el azul);
break;
case "rojo":
alert( El color elegido es el rojo);
break;
default:
alert( El color por defecto es negro);
}
Hay que indicar que no es compatible con estndar ECMA y no es soportado
por el Explorer 3.
Bucles
Un bucle es una estructura que permite repetir una tarea un nmero de
veces, determinado por una condicin. Para hacer bucles podemos utilizar
las estructuras while y do...while. Estos bucles iteran indefinidamente
mientras se cumpla una condicin. La diferencia entre ellas es que la primera
comprueba dicha condicin antes de realizar cada iteracin y la segunda lo
hace despus:
var numero=0;
70
DHTML
while (numero==1) {
alert('Soy un while');
}
do {
alert('Soy un do...while');
} while (numero==1);
En este caso solo veramos aparecer una ventana diciendo que es un
do...while. Qu por qu? Veamos. El while comprueba primero si

numero es igual a 1 y, como no lo es, no ejecutara el cdigo que tiene
dentro del bucle. En cambio, el do...while primero ejecuta el cdigo y luego,
viendo que la condicin es falsa, saldra. Hay que resaltar que do...while no
pertenece al estndar y no es soportado por el Explorer 3.
En Javascript, el bucle for es singularmente potente. No se reduce a casos
numricos como en muchos otros lenguajes sino que nos da mucha ms
libertad. Tiene la siguiente estructura:
for (inicio; condicin; incremento)

cdigo
El cdigo contenido en el bucle se ejecutar mientras la condicin se

cumpla. Antes de comenzar la primera iteracin del bucle se ejecutar la
sentencia inicio y en cada iteracin lo har incremento. La manera ms
habitual de usar estas posibilidades es, claro est, la numrica:
var numero = 4;
for (n = 2, factorial = 1; n <= numero; n++)
factorial *= n;
Por ltimo, hay que decir que la ejecucin de la sentencia break dentro de
cualquier parte del bucle provoca la salida inmediata del mismo. Aunque a
veces no hay ms remedio que utilizarlo, es mejor evitarlo para mejorar la
legibilidad y elegancia del cdigo.
Estructuras de manejo de objetos

JavaScript dispone de dos bien distintas. La primera es el bucle for...in, que
nos permitir recorrer todas las propiedades de un objeto. Se usa
principalmente con vectores. Por ejemplo:
var vector = [1, 2, 2, 5];

for (i in vector)
vector[i] += 2;
71
DHTML
Este ejemplo sumara dos a todos los elementos del vector. Sin embargo,
conviene tener cuidado ya que, de los navegadores de Microsoft, slo la
versin 5 lo soporta.
La otra estructura es with, que nos permitir una mayor comodidad cuando
tengamos que tratar con muyas propiedades de un mismo objeto. En lugar
de tener que referirnos a todas ellas con un objeto.propiedad podemos
hacer:
with (objeto) {
propiedad1 = ...
propiedad2 = ...
...
}
Objetos
Un objeto es una estructura que contiene tanto variables (llamadas
propiedades) como las funciones que manipulan dichas variables (llamadas
mtodos).
A partir de esta estructura se ha creado un nuevo modelo de programacin
(la programacin orientada a objetos) que atribuye a los objetos propiedades
como herencia o polimorfismo.
Como veremos, JavaScript simplifica en algo este modelo.
Creacin mediante constructores
Un constructor es una funcin que inicializa un objeto. Cuando creamos un
objeto nuevo del tipo que sea, lo que hacemos en realidad es llamar al
constructor pasndole argumentos. Por ejemplo, si creamos un objeto Array
de esta manera:
vector = new Array(9);
En realidad, estamos llamando a un constructor llamado Array que admite
un parmetro. Sera algo as:
function Array(longitud) {
...
}
Vamos a crear nuestro primero objeto. Supongamos que queremos codificar
en Javascript una aplicacin que lleve nuestra biblioteca de libros tcnicos
de Informtica. Para lograrlo, crearemos un objeto Libro que guarde toda la
informacin de cada libro. Este sera el constructor:
function Libro(titulo, autor, tema) {

this.titulo = titulo;
this.autor = autor;
this.tema = tema;
}
72
DHTML
Como vemos, accederemos a las propiedades y mtodos de nuestros
objetos por medio de la referencia this. Ahora podemos crear y acceder a
nuestros objetos tipo Libro:
miLibro = new
"JavaScript");
Libro("JavaScript
Bible",
"Danny
Goodman",
alert(miLibro.autor);
Los mtodos tambin podemos incluirlos de la siguiente forma:
function escribirLibro() {
alert("El libro " + this.titulo + " de " + this.autor +
" trata sobre " + this.tema);
}
Para incluirlo en nuestro objeto aadimos la siguiente lnea a nuestra funcin
constructora:
this.escribir = escribirLibro;
Y podremos acceder al mismo de la manera normal:
miLibro.escribir();
Objetos predefinidos
JavaScript dispone de varios objetos predefinidos para acceder a muchas de
las funciones normales de cualquier lenguaje, como puede ser el manejo de
vectores o el de fechas. En algunos casos estaremos tratando con objetos
aunque no nos demos cuenta, ya que los usos ms habituales de los
mismos disponen de abreviaturas que esconden el hecho de que sean
objetos.
a) Objeto Array
Como dijimos antes, este objeto permite crear vectores. Se inicializa de
cualquiera de las siguientes maneras:
vector = new Array(longitud);

vector = new Array(elemento1, elemento2, ..., elementoN);
En el primer caso crearemos un vector con el nmero especificado de
elementos, mientras que en el segundo tendremos un vector que contiene
los elementos indicados y de longitud N. Para acceder al mismo debemos
recordar que el primero elemento es el nmero cero.
El objeto Array tiene, entre otros, los siguientes mtodos y propiedades:
length: Propiedad que contiene el nmero de elementos del vector.
73
DHTML
concat(vector2): Aade los elementos de vector2 al final de los del vector
que invoca el mtodo, devolviendo el resultado. No funciona en Explorer 3 y
no forma parte del estndar ECMA.
sort(funcionComparacion):
Ordena
los
elementos
del
vector
alfabticamente. Si se aade una funcin de comparacin como parmetro
los ordenar utilizando sta. Dicha funcin debe aceptar dos parmetros y
devolver 0 si son iguales, menor que cero si el primer parmetro es menor
que el segundo y mayor que cero si es al revs.
function compararEnteros(a,b) {
return a<b ? -1 : (a==b ? 0 : 1);
}
Usando esta funcin ordenara numricamente (y de menor a mayor) los
elementos del vector.
b) Objeto Date
Este objeto nos permitir manejar fechas y horas. Se invoca as:
fecha = new Date();

fecha = new Date(ao, mes, dia);
fecha = new Date(ao, mes, dia, hora, minuto, segundo);
Si no utilizamos parmetros, el objeto fecha contendr la fecha y hora
actuales, obtenidas del reloj del sistema. En caso contrario hay que tener en
cuenta que los meses comienzan por cero. As, por ejemplo:
navidad99 = new Date(1999, 11, 25)

El objeto Date dispone, entre otros, de los siguientes mtodos:
getTime()
setTime(milisegundos)
Obtienen y ponen, respectivamente, la fecha y la hora tomados como
milisegundos transcurridos desde el 1 de enero de 1970.
getYear()
setYear(ao)
Obtienen y poner, respectivamente, el ao de la fecha. ste se devuelven
como nmeros de 4 dgitos excepto en el caso en que estn entre 1900 y
1999, en cuyo caso se devolvern las dos ltimas cifras. Hay que tener
cuidado, ya que la implementacin de stos mtodos puede variar en las
ltimas versiones de Netscape.
getFullYear()
setFullYear(ao)
74
DHTML
Realizan la misma funcin que los anteriores, pero sin tantos los, ya que
siempre devuelven nmeros con todos sus dgitos. Funciona en Explorer 4 y
Netscape 4.06 y superiores.
getMonth()
setMonth(mes)
getDate()
setDate(dia)
getHours()
setHours(horas)
getMinutes()
setMinutes(minutos)
getSeconds()
setSeconds(segundos)
Obtienen y ponen, respectivamente, el mes, da, hora, minuto y segundo de
la fecha, tambin respectivamente, respectivamente hablando.
getDay()
Devuelve el da de la semana de la fecha en forma de nmero que va del 0
(domingo) al 6 (sbado).
c) Objeto Math
Este objeto no est construido para que tengamos nuestras variables Math,
sino como un contenedor donde meter diversas constantes (como Math.E y
Math.PI) y los siguientes mtodos matemticos:
Tabla 9.
Mtodos matemticos del Objeto Math
Mtodo
Descripcin
Expresin
ejemplo
abs
Valor absoluto
Math.abs(-2)
Funciones
sin, cos,
reciben el
tan
radianes
de Resultado
del ejemplo
2
trigonomtricas,
argumento en Math.cos(Math.PI) -1
asin,
acos,
atan
Funciones
inversas
exp, log
Exponenciacin
base E
ceil
Devuelve
el
entero
ms
pequeo mayor o igual al Math.ceil(-2.7)
argumento
-2
floor
Devuelve el entero ms grande

Math.floor(-2.7)
menor o igual al argumento
-3
trigonomtricas
y
logaritmo,
Math.asin(1)
1.57
Math.log(Math.E)
75
DHTML
round
Devuelve
el
entero
ms
Math.round(-2.7)
cercano o igual al argumento
-3
min, max
Devuelve el menor (o mayor) de

Math.min(2,4)
sus dos argumentos
pow
Exponenciacin,
siendo
el
primer argumento la base y el Math.pow(2,4)
segundo el exponente
16
sqrt
Raz cuadrada
Math.sqrt(4)
d) Objeto Number
Al igual que en el caso anterior, no se pueden crear objetos de tipo
Number, sino que debemos referirnos al genrico. Este objeto contiene
como propiedades los siguientes valores numricos.
Tabla 10.
Propiedades del objeto Number
Propiedad
Descripcin
NaN
Valor que significa "no es un nmero"
MAX_VALUE y MIN_VALUE
Mximo y mnimo nmero representable
NEGATIVE_INFINITIVE
POSITIVE_INFINITIVE
Infinito negativo y positivo, se utilizan

cuando hay desbordamiento al realizar
alguna operacin matemtica
e) Objeto String
Al crear una cadena estamos creando a la vez un objeto String asociado.
Su utilidad est en sus mtodos, entre los que cabe destacar:
charAt(pos) y charCodeAt(pos)
Devuelven el caracter o el cdigo numrico del carcter que est en la
posicin indicada de la cadena.
indexOf(subcadena)
Devuelven la posicin de la subcadena dentro de la cadena, o -1 en caso de
no estar.
split(separador)
Devuelven un vector con subcadenas obtenidas separando la cadena por el
carcter separador. No funciona en Explorer 3.
cadena = "Navidad,Semana Santa,Verano";
vector = cadena.split(",");
En el ejemplo, el vector tendr tres elementos con cada una de las
vacaciones de un escolar espaol normal.
concat(cadena2)
Devuelve el resultado de concatenar cadena2 al final de la cadena. No
funciona en Explorer 3 y no forma parte del estndar ECMA.
76
DHTML
substr(indice,longitud) y substring(indice1, indice2)
Devuelven una subcadena de la cadena, ya sea cogiendo un nmero de
caracteres a partir de un ndice o pillando todos los caracteres entre dos
ndices.
toLowerCase()y toUpperCase()
Transforman la cadena a minsculas y maysculas, respectivamente.
Eventos
Un evento, como su mismo nombre indica, es algo que ocurre. Para que una
rutina nuestra se ejecute slo cuando suceda algo extrao deberemos
llamarla desde un controlador de eventos. Estos controladores se asocian a
un elemento HTML y se incluyen as:
<A HREF="http://home.netscape.com" onMouseOver="MiFuncion()">
Lista de eventos
Aqu tienes una pequea gua de eventos definidos en JavaScript.
Tabla 11.
Eventos de JavaScript
Elementos que lo admiten
Evento
Descripcin
OnLoad
Terminar de cargarse una <BODY...>

pgina
<FRAMESET...>
OnUnLoad
Salir
de
una
(descargarla)
pgina
<BODY...><FRAMESET...>
<A
<AREA...>
HREF..>
onMouseOut
Que el ratn deje de estar <A

encima
<AREA...>
HREF..>
onSubmit
Enviar un formulario
<FORM...>
onClick
Pulsar un elemento
<INPUT TYPE="button, checkbox, link,

radio"...>
onBlur
Perder el cursor
<INPUT
<TEXTAREA...>
TYPE="text"...>
OnChange
Cambiar de contenido o <INPUT

perder el cursor
<TEXTAREA...>
TYPE="text"...>
OnFocus
Conseguir el cursor
<INPUT
<TEXTAREA...>
TYPE="text"...>
OnSelect
Seleccionar texto
<INPUT
<TEXTAREA...>
TYPE="text"...>
onMouseOver Pasar el ratn por encima
Como ejemplo, vamos a hacer que una ventana aparezca automticamente

en cuanto pasemos un cursor por encima de un elemento <A> (e
77
DHTML
impidiendo, de paso, que quien est viendo la pgina pueda hacer uso del
mismo).
Ejemplo 22:
Eventos
eventos.html
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aqu encima
</A>
</BODY>
</HTML>
Resultado Web:
Figura 39. Resultado de eventos.html
Figura 40. Resultado del mtodo alert
78
DHTML
Definicin mediante cdigo

Hemos visto como declarar un controlador de eventos desde etiquetas
HTML. Sin embargo, y desde las versiones 3 de Netscape y 4 de Explorer,
existe otro modo de hacerlo mediante cdigo.
Muchos objetos cuyas etiquetas HTML correspondientes permiten atributos
que definen controladores de evento, permiten el acceso a dichos
controladores por medio de propiedades con el mismo nombre. Por ejemplo,
la pgina:
Ejemplo 23:
Definicin mediante cdigo
load1.html
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY onLoad="Saludo()">
...
</BODY>
</HTML>
Figura 41. Resultado de load1.html
79
DHTML
Figura 42. Resultado del mtodo alert

Se puede reescribir como:
load2.html
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Modelo de objetos del documento

Cuando funciona en un navegador, el lenguaje JavaScript dispone de una
serie de objetos que se refieren a cosas como la ventana actual, el
documento sobre el que trabajamos, o el navegador que estamos utilizando.
Para los ms iniciados en la programacin orientada a objetos, conviene
aclarar que en esta jerarqua, contra lo que pueda parecer, no existe
herencia alguna. Los objetos se relacionan por composicin, es decir, un
objeto Window se compone (entre otras cosas) de un objeto Document, y
ste a su vez se compone de diversos objetos Form, Image, etc..
El padre de esta jerarqua es el objeto Window, que representa una ventana
de nuestro navegador. Dado que cada marco se considera una ventana
distinta, cada uno de ellos dispone de su propio objeto Window. El objeto
Document representa el documento HTML y cada uno de los objetos que lo
componen se corresponde con diversas etiquetas HTML.
80
DHTML
Objeto Window
Es el objeto principal. Define la ventana sobre la que estamos trabajando e
incluye los objetos referentes a la barra de tareas, el documento o la
secuencia de direcciones de la ltima sesin. En este captulo veremos los
mtodos y propiedades ms utilizadas, al menos por m, dejando el estudio
de dichos objetos para sus captulos correspondientes.
An cuando el objeto se llame Window, disponemos siempre de una
referencia a l llamada window (recuerde que Javascript distingue entre
maysculas y minsculas). Ser con esa referencia con la que trabajemos.
Por ltimo, indicar que en Javascript, se supone que todas las propiedades y
mtodos que llamamos sin utilizar ninguna referencia, en realidad se hacen
utilizando esa referencia window. As, por ejemplo, cuando ejecutamos el
mtodo alert en realidad lo que estamos haciendo es ejecutar el mtodo
window.alert.
[Variable=][window.]open(URL, nombre, propiedades)
Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella
desde la ventana donde la creamos deberemos asignarle una variable, si no
simplemente invocamos el mtodo: el navegador automticamente sabr
que pertenece al objeto window. El parmetro URL es una cadena que
contendr la direccin de la ventana que estamos abriendo: si est en
blanco, la ventana se abrir con una pgina en blanco. El nombre ser el
que queramos que se utilice como parmetro de un TARGET y las
propiedades son una lista separada por comas de algunos de los
siguientes elementos:
toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels
Debemos tener cuidado con las propiedades que modifiquemos, es posible
que algunas combinaciones de los mismos no funcionen en todos los
navegadores. El Explorer 4, por ejemplo, da error ante la combinacin
toolbar=no, directories=no, menubar=no. Veamos un ejemplo:
Ejemplo 24:
Funcin open()
ventanas.html
<HTML>
<HEAD>
81
DHTML
function AbrirVentana() {
MiVentana=open("","ventana2","toolbar=no,directories=no,menubar=no,status=yes");
MiVentana.document.write("<HEAD><TITLE>Una
nueva
ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>Texto
de
prueba</B></H1></CENTER>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abrir otra ventana"
onClick="AbrirVentana()">
</FORM>
</BODY>
</HTML>
Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro
navegador con JavaScript. Se llama a la funcin AbrirVentana desde el
evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta
funcin crea la nueva ventana MiVentana y escribe en ella por medio del
objeto Document todo el cdigo HTML de la pgina.
Resultado Web:
Figura 43. Resultado de ventanas.html
82
DHTML
Figura 44. La nueva ventana abierta

close()
Cierra la ventana. A no ser que hayamos acabado de abrirla nosotros
mostrar al usuario una ventana de confirmacin para que decida l si quiere
o no cerrarla. Esto se hace por motivos de seguridad, ya que sera
demasiado fcil hacer un script de esos mal intencionados que nos cerrase
la ventana del navegador, con lo que fastidia eso.
alert(mensaje)
Muestra una ventana de dilogo con el mensaje especificado.
confirm(mensaje)
Muestra una ventana de dilogo con el mensaje especificado y dos
botones. Si el usuario pulsa OK, el mtodo devuelve true. Si, en cambio,
pulsa Cancelar, devolver false.
prompt(mensaje, sugerencia)
Muestra una ventana de dilogo con el mensaje especificado y un campo
de texto en el que el usuario pueda teclear, cuyo valor inicial ser igual a
sugerencia. Si el usuario pulsa OK, el mtodo devuelve la cadena
introducida en el campo de texto. Si, por el contrario, pulsa Cancelar,
devolver el valor null. Dado que este valor se considera igual a false,
podemos comprabarlo directamente en una condicin para ver que ha hecho
el usuario.
Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha
pulsado el botn de Aceptar:
var contestacion = prompt("Cmo te llamas, criatura?", "");

if (contestacion)
alert("Hola, " + contestacion);
status
Define la cadena de caracteres que saldr en la barra de estado en un
momento dado.
defaultStatus
83
DHTML
Define la cadena de caracteres que saldr por defecto en la barra de estado.
Cuando no la especificamos, defaultStatus ser igual al ltimo valor que
tom status.
setTimeout("funcin",tiempo)
Llama a funcin cuando hayan
pasado tiempo milisegundos.

Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a
cierta velocidad.
Objeto Document
Este objeto representa el documento HTML en el que estamos. Se accede a
l por medio de la referencia document. Su mayor importancia viene por el
nmero de vectores que posee, que referencian a objetos Image, Form o
Link, los cuales permiten acceder a las imgenes, formularios y enlaces del
documento, respectivamente.
lastModified
Contiene la fecha y hora en que se modific el documento por ltima vez y
se suele usar en conjuncin con write para aadir al final del documento
estas caractersticas.
bgColor
Modifica el color de fondo del documento. El color deber estar en el formato
usado en HTML. Es decir, puede ser red o FF0000.
forms[]
Vector que contiene los formularios del documento. El primero ser el
nmero 0, el segundo el 1, etc..
images[]
Vector que contiene las imgenes del documento. Se ordenan igual que en
el anterior caso, aunque tambin permiten ser accedidas con el nombre
como ndice. Es decir, a una imagen definida como <IMG SRC=".."
NAME="miImagen">
se
puede
acceder
con
document.inages["miImagen"].
links[]
Vector que contiene los enlaces del documento. Se ordenan igual que en los
dos anterioers, aunque no se suele utilizar en el cdigo Javascript. Su razn
de ser es que, al ser los enlaces objetos, permiten incluir cdigo Javascript
en ellos por medio de la pseudo-URL javascript:codigo.
write(cadena) y writeln(cadena)
Escribe el cdigo HTML indicado en cadena en nuestro documento HTML.
writeln hace lo mismo, pero incluyendo al final un retorno de carro.
close()
Cierra el documento, impidiendo escribir de nuevo en l.
84
DHTML
Cmo escribir en el documento
A la hora de escribir en un documento por medio de write o writeln hay
que tener en cuenta un hecho fundamental. Para poder escribir en un
documento, ste debe estar abierto y, al abrirlo, se destruye todo el
cdigo que haya en l.
Ejemplo 25:
Escribir HTML con javascript
escribir.html
<HTML>
<HEAD>
<TITLE>Escribe y no sobreescribe</TITLE>
</HEAD>
<BODY>
Esta página fue modificada por ltima vez el da
<script language="JavaScript" type="text/javascript">
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
Resultado Web:
Figura 45. Resultado de escribir.html
Objeto Form
Los formularios siempre han sido la mejor manera de facilitar la
comunicacin entre los usuarios y los creadores de una Web. Sin embargo,
la implementacin de los mismos en el lenguaje HTML ha provocado ciertos
problemas debido a sus carencias. Estos problemas han intentado
solventarse con scripts, situados tanto en el servidor como en el navegador.
Los programas que se ejecutan en el navegador suelen estar escritos en
JavaScript, y realizan tareas simples de validacin. En muchas ocasiones
estn combinados con scripts CGI que modifican el mensaje generado por
un formulario para facilitar su lectura y manejo.
85
DHTML
El vector document.forms contiene todos los formularios de un
documento. As, se accedera al primer formulario definido como
document.forms[0]. Sin embargo, si usamos el parmetro NAME en la
etiqueta HTML:
<FORM NAME="miFormulario">
Entonces podremos acceder al formulario con document.miFormulario,
que resulta bastante ms cmodo y estable ante la posibilidad de variacin
del nmero y posicin de formularios en el documento. Estos son los
mtodos y propiedades del objeto Form:
submit()
Enva el formulario.
reset()
Devuelve los valores de un formulario a su estado inicial.
elements[]
Contiene todos y cada uno de los elementos de los que consta el formulario,
es decir, los botones, cajas de textos, listas desplegables, etc. que
componen un formulario. Cada elemento puede ser un objeto distinto, por lo
que deberemos averiguar de qu tipo son por medio de la propiedad comn
type.
Objetos Text
Cuatro elementos HTML distintos (text, textarea, password y hidden) son,
desde el punto de vista del DOM, objetos tan parecidos entre s que vamos a
estudiarlos conjuntamente. En realidad, slo tienen tres propiedades
verdaderamente importantes: name, type y value.
Los mtodos que podemos utilizar en estos objetos son:
blur(). Pierde el foco del ratn sobre el objeto especificado.
focus(). Obtiene el foco del ratn sobre el objeto especificado.
select(). Selecciona el texto dentro del objeto dado.
Como ejemplo de su uso, vamos a ver ahora el cdigo de nuestro primer
formulario con validacin, que comprueba si la direccin de correo
electrnico que introduce el usuario es correcta:
formularios.html
<HTML>
<HEAD>
<TITLE>Ejemplo de formularios</TITLE>
function validar(direccion) {
if (direccion.indexOf("@") != -1)
return true;
else {
alert('Debe escribir una direccin vlida');
86
DHTML
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1" METHOD="POST" ACTION="mailto:[email protected]"
ENCTYPE="text/plain" onSubmit="return validar(this.email.value)">
Envíame tu e-mail: <INPUT NAME="email" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Enviame tu e-mail">
</FORM>
</BODY>
</HTML>
Resultado Web
Figura 46. Resultado de formularios.html
Figura 47. Mensaje de validacin
87
DHTML
El cdigo es sencillo: el cdigo llamado por el controlador de evento
onSubmit debe devolver false si deseamos que el formulario no sea
enviado. As pues, llamamos a la funcin que comprueba si hay alguna
arroba en el campo email del formulario.
La manera de llamar a esta funcin es quizs lo ms complicado. La funcin
validar recibe una cadena de caracteres, devolviendo verdadero o falso
dependiendo de que haya o no una arroba dentro de ella. El controlador
utiliza para llamar a esta funcin lo siguiente:
this.email.value
this es una referencia estndar. Cuando veamos this en algn cdigo en

realidad deberemos sustituirlo mentalmente por el nombre del objeto en el
que est el cdigo. En este caso, como estamos dentro de miFormulario,
this ser equivalente a document.miFormulario. email es el nombre
del campo que queremos investigar y value el atributo que contiene lo que
haya tecleado el usuario.
Objetos Checkbox y Radio

En estos objetos, tanto el atributo HTML VALUE como su correspondiente
propiedad value accesible desde Javascript no corresponden a nada visible.
En ambos casos, el estado del elemento es de tipo lgico: puede estar
seleccionado o no. Este valor lgico se contiene en la propiedad checked.
Por tanto, para comprobar si est pulsado o no una caja de confirmacin o
un botn de seleccin especfico deberemos preguntar por dicha propiedad.
Objetos Select y Option

El objeto Select es, con mucho, el ms complicado. Esto es debido a que
contiene en su interior un vector de objetos Option. Dispone de dos
propiedades interesantes:
selectedIndex
Empezando a contar a partir de cero, indica qu opcin est seleccionada. Si
hay varias seleccionadas, indica la opcin con el ndice ms bajo.
options[]
Vector que contiene los objetos Option correspondientes a todas y cada
una de las opciones. El objeto Option, por otro lado, dispone de otras dos
propiedades a estudiar (aparte de las comunes, como type o value):
selected: Valor lgico que ser verdadero si la opcin est seleccionada.
Text : Texto que acompaa a la opcin.
Como ejemplo, vamos a ver una lista desplegable que nos permita navegar
por diversas pginas. Cada etiqueta OPTION tendr como parmetro
VALUE la direccin de la pgina Web e incluiremos un controlador del
88
DHTML
evento onChange (que se ejecuta cuando el usuario cambia la opcin
escogida en la lista) que llamar a una rutina que explicamos ms adelante:
Ejemplo 26:
Select con javascript
select.html
<HTML>
<HEAD>
<TITLE>Ejemplo de Select</TITLE>
function irA(menu){
window.location.href = menu.options[menu.selectedIndex].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="formulario">
<SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
<OPTION VALUE="">Visitar
<OPTION VALUE="http://www.w3c.org">W3C
<OPTION VALUE="http://www.capunay.com">Capunay
<OPTION VALUE="http://www.google.com.pe">Google
</SELECT>
</FORM>
</BODY>
</HTML>
La funcin irA simplemente utiliza la opcin elegida para obtener por medio
de su valor la direccin de la pgina a la que debe acudir.
Resultado Web:
Figura 48. Resultado de select.html
89
DHTML
Otros objetos
El modelo de objetos del documento define varios objetos, por as decirlo,
"menores", que no tienen relacin con nada fsico de la pgina en la que
estamos. Es decir, no guardan relacin con las etiquetas HTML que estn en
ellas escritas.
Objeto History
Se accede a este objeto por medio de la referencia document.history y
contiene todas las direcciones que se han visitado en la sesin actual.
Aunque no permite acceder a ellas, dispone de varios mtodos para sustituir
el documento actual por alguno que el usuario ya haya visitado:
back()
Volver a la pgina anterior. Es muy sencillo de utilizar:
<A HREF="javascript:window.history.back()">
forward()
Ir a la pgina siguiente.
go(donde)
Ir a donde se indique, siendo donde un nmero tal que go(1)=forward()
y go(-1)=back().
Objeto Location
Se accede a este objeto por medio de la referencia document.location y
contiene informacin sobre la direccin de la pgina actual en varias
propiedades.
href
Permite el acceso a la direccin de la pgina actual. Si lo cambiamos, pues
cambiaremos de pgina.
protocol
Protocolo de la pgina actual. Habitualmente http.
host
Mquina donde se alberga la pgina actual.
pathname
Camino de la pgina actual.
hash
Si hemos accedido a una pgina por medio de un ancla, contiene una
almohadilla seguida de ese ancla. Por ejemplo, #location.
search
90
DHTML
Puede que hallas notado que muchas pginas (especialmente en los
motores de bsqueda) tienen unas direcciones inmensas con una estructura
como: pagina.php?busq=HTML+en+espanol&tipo=Y. Esta propiedad
permite acceder a esa ltima parte de la direccin (a partir de la
interrogacin, inclusive). Puede ser til para pasar parmetros de una pgina
a otra.
Objeto Navigator
Se accede a l por medio de la referencia navigator y nos permite
averiguar varias caractersticas del navegador que usamos. Por ejemplo:
appName
Nombre del navegador.
appVer
Nmero principal de versin.
language
Idioma del mismo.
platform
Plataforma donde esta ejecutndose.
No podemos sobreescribir estos atributos, pero s leerlos.
Objeto Screen
Como caba esperarse, se puede acceder a este objeto por medio de la
referencia screen. Nos permitir conocer la configuracin de la pantalla del
usuario. Al igual que en el anterior objeto, todos sus atributos son de slo
lectura. Conviene indicar que este objeto slo est disponible desde las
versiones 4.0 de ambos navegadores.
height :Altura de la resolucin de la pantalla.
width :Anchura de la resolucin de la pantalla.
pixelDepth :Nmero de bits por pixel.
Ejemplo:
if (window.screen)
texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + "
colores.";
else
texto="quien sabe cuantos colores, necesito que tengas Communicator o IE4 para
averiguarlo.";
document.write(texto);
Puede verse que antes de acceder al objeto, investigo si ste existe,
mostrando un mensaje de circunstancias en caso de que no sea as.
91
DHTML
Ficheros .js
Un fichero .js es un archivo donde podremos guardar funciones y variables
globales que podrn leerse desde cualquier pgina HTML. Gracias a ellos
podremos evitar el tener que duplicar funciones que se necesiten en ms de
un documento. Podremos incorporarlos a nuestras pginas de esta manera:
Ejemplo 27:
Uso de archivos js
externo.html
<HTML>
<HEAD>
<TITLE>Mi Pgina</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="funciones.js">
<!-alert('Error con el fichero js');
// -->
</SCRIPT>
</HEAD>
<BODY>
Lo que sea.
</BODY>
</HTML>
El cdigo que incluyamos entre un <SCRIPT SRC> y un </SCRIPT> slo se
ejecutar en caso de que la lectura del fichero .js falle. Por otra parte, hay
que indicar que el fichero en cuestin contendr slo cdigo en Javascript,
no etiquetas HTML de ningn tipo, ni siquiera las de apertura y cierre de
SCRIPT.
92
DHTML
HOJAS DE ESTILO EN CASCADA

CSS Cascade Style Sheet (Hojas de Estilo en Cascada).
Dentro del diseo de pginas Web, se presenta esta como la vanguardia en
cuanto a definicin de estilos dentro de las plantillas de diseo. A travs de
instrucciones en cdigo HTML se definen los estndares del conjunto de
pginas que conforman el proyecto.
CSS2, como fue antes CSS1, se basa en una serie de reglas de diseo:
Compatibilidad hacia atrs y hacia adelante. Las aplicaciones del
usuario CSS2 sern capaces de entender las hojas de estilo CSS1.
Las aplicaciones del usuario CSS1 podrn leer las hojas de estilo
CSS2 y descartar las partes que no entienden. Adems, las
aplicaciones del usuario que no soporten CSS sern capaces de
mostrar los documentos estilsticamente mejorados. Por supuesto, el
efecto estilstico hecho posible por CSS no ser procesado, pero
todo el contenido ser presentado.
Complementariedad con documentos estructurados. Las hojas de
estilo complementan los documentos estructurados (ej., HTML y
aplicaciones XML) proveyendo informacin estilstica del texto
marcado. Debe ser fcil cambiar la hoja de estilo con poco o ningn
impacto en el sistema de marcas.
Independencia del vendedor, la plataforma y el dispositivo. Las hojas
de estilo permiten a los documentos permanecer independientes del
vendedor, la plataforma y el dispositivo. Las mismas hojas de estilo
son tambin independientes del vendedor y la plataforma, pero
CSS2 permite dirigir una hoja de estilo a un grupo de dispositivos
(ej., impresoras).
Mantenibilidad. Apuntando a una hoja de estilo desde los
documentos, los responsables de los sitios en la Web pueden
simplificar el mantenimiento y conservar un estilo y un efecto
consistente a todo lo largo del sitio. Por ejemplo, si el color del fondo
de las pginas de una organizacin cambia, slo un archivo necesita
ser cambiado.
Simplicidad. CSS2 es ms compleja que CSS1, pero sigue siendo
un lenguaje de estilo simple que es humanamente legible y posible
de escribir. Las propiedades CSS se mantienen independientes unas
de otras en la medida de lo posible y generalmente slo hay un
modo de conseguir un efecto determinado.
Rendimiento de la red. CSS proporciona una compacta codificacin
para presentar los contenidos. Comparado con los archivos de
imgenes o de audio que son usados frecuentemente por los
autores para conseguir ciertos efectos en el procesamiento, las
hojas de estilo, la mayora de las veces, disminuyen el tamao del
contenido. Adems, menos conexiones de la red tienen que ser
abiertas, lo cual ayuda a incrementar el rendimiento de la red.
Flexibilidad. Las CSS pueden ser aplicadas al contenido de varias
maneras. La caracterstica clave es la capacidad de formar una
cascada de estilos con la informacin especificada en la hoja de
93
DHTML
estilo predeterminada (aplicacin del usuario), las hojas de estilo del

usuario, las hojas de estilo vinculadas, el encabezamiento del
documento y en los atributos de los elementos que forman el cuerpo
del documento.
Riqueza. Proporcionando a los autores un abundante juego de
efectos de procesamiento, aumenta la riqueza de la Web como
medio de expresin. Los diseadores han estado ambicionando la
funcionalidad comnmente encontrada en los programas de edicin
y de presentaciones grficas. Algunos de los efectos requeridos
entran en conflicto con la independencia del dispositivo, pero CSS2
llega muy lejos satisfaciendo las demandas de los diseadores.
Combinacin con lenguajes alternativos. El juego de propiedades de
CSS descriptas en esta especificacin conforman un slido modelo
de aplicacin de formatos para presentaciones visuales y auditivas.
Este modelo puede ser accedido mediante el lenguaje CSS, pero la
combinacin con otros lenguajes tambin es posible. Por ejemplo,
un programa en JavaScript puede cambiar dinmicamente el valor
de la propiedad 'color' de un determinado elemento.
Accesibilidad. Varias caractersticas de CSS harn a la Web ms
accesible para los usuarios con discapacidades:
Las propiedades para controlar la apariencia de las fuentes permiten
a los autores eliminar las inaccesibles imgenes de texto
renderizado.
Las propiedades de posicionamiento permite a los autores eliminar
los artilugios con el sistema de marcas (ej., imgenes invisibles) para
forzar la composicin.
La semntica de las reglas !important indica que los usuarios con
particulares requerimientos de presentacin pueden suplantar las
hojas de estilo del autor.
El nuevo valor 'inherit' (heredado) para todas las propiedades mejora
la generalidad del funcionamiento en cascada y permite una ms
fcil y consistente sintona en el estilo.
El avanzado soporte de medios, incluyendo grupos de medios y los
tipos de medios braille, de relieve y tty permitirn a los usuarios y
autores confeccionar pginas para esos dispositivos.
Las propiedades auditivas ofrecen control sobre la salida de voz y
audio.
Los selectores de atributos, la funcin 'attr()' y la propiedad 'content'
brindan acceso al contenido alterno.
Los contadores y la numeracin de secciones y prrafos pueden
mejorar la navegabilidad del documento y economizar espacio de
sangrado (importante en los dispositivos braille). Las propiedades
'word-spacing' y 'text-indent' tambin eliminan la necesidad de usar
espacios en blanco extras en el documento.
Aqu Mostraremos cun fcil puede ser disear unas simples hojas de estilo.
Para esta gua, necesitar saber un poco del cdigo HTML y alguna
terminologa bsica de composicin grfica. Comenzamos con un pequeo
documento HTML:
Ejemplo 28:
HTML y CSS
94
DHTML
<HTML>
<HEAD>
<TITLE>La Web de OscarCap</TITLE>
</HEAD>
<BODY>
<H1>La Web de OscarCap</H1>
<P>Esta página le ayudará a diseñar páginas Web.
</BODY>
</HTML>
Para establecer el color azul para el texto de los elementos H1, puede
escribir la siguiente regla CSS:
H1 { color: blue }
Una regla CSS consta de dos partes principales: un selector ('H1') y una
declaracin ('color: blue'). La declaracin tiene dos partes: una propiedad
('color') y un valor ('blue').
La especificacin HTML 4.0 define de qu manera las reglas de las hojas de
estilo pueden especificarse para los documentos HTML: ya sea dentro del
documento HTML o a travs de una hoja de estilo externa. Para poner la
hoja de estilo dentro del documento, use el elemento STYLE:
Ejemplo 29:
Style
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>
<HEAD>
<TITLE> ---- La Web de OscarCap ---- </TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<P>Esta página Web te enseñará mucho.
</BODY>
</HTML>
Para una mayor flexibilidad, recomiendo que los diseadores especifiquen
hojas de estilo externas; ellas pueden cambiarse sin modificar el documento
fuente HTML y pueden compartirse entre varios documentos. Para vincular
una hoja de estilo externa puede usar el elemento LINK:
<HTML>
<HEAD>
<TITLE>La Web de OscarCap</TITLE>
<LINK rel="stylesheet" href="oscar.css" type="text/css">
</HEAD>
<BODY>
<P> Esta página Web te enseñará mucho.
95
DHTML
</BODY>
</HTML>
El elemento LINK especifica:
el tipo de vnculo: a una hoja de estilo ("stylesheet").
la ubicacin de la hoja de estilo a travs del atributo "href".
el tipo de hoja de estilo que se vincula: "text/css".
Para mostrar la ntima relacin entre una hoja de estilo y el sistema
estructurado de marcas, continuamos usando el elemento STYLE en esta
gua. Agreguemos ms colores:
Ejemplo 30:
Colores con CSS

<HTML>
<HEAD>
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
La hoja de estilo contiene ahora dos reglas: la primera establece el color del
elemento BODY como 'red' , en tanto la segunda coloca el color del
elemento H1 en 'blue'. Como no se ha especificado ningn valor para el color
del elemento P, ste heredar el color de su elemento padre, es decir,
BODY. El elemento H1 tambin es un elemento hijo de BODY pero la
segunda regla reemplaza el valor heredado. En CSS existen a menudo tales
conflictos entre diferentes valores y esta especificacin describe cmo
resolverlos.
CSS2 tiene ms de 100 propiedades diferentes, incluyendo 'color'. Veamos
algunos otros:
<HTML>
<HEAD>
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
96
DHTML
</BODY>
</HTML>
Lo primero que se puede observar es que varias declaraciones se agrupan
en un bloque encerrado por llaves ({...}) y separado por un punto y coma, no
obstante la ltima declaracin tambin debe estar seguida por un punto y
coma.
La primera declaracin en el elemento BODY establece la familia de fuentes
"Gill Sans". Si esa fuente no est disponible, el navegador del usuario usar
la familia 'sans-serif' que es una de las cinco familias de fuentes genricas
que todas las aplicaciones del usuario reconocen. Los elementos hijos de
BODY heredarn el valor de la propiedad 'font-family'.
La segunda declaracin establece el tamao de la fuente del elemento
BODY en 12 puntos. La unidad de medida "punto" es normalmente usada en
la tipografa impresa para indicar el tamao de la fuente y otras dimensiones.
Es un ejemplo de unidad de medida absoluta que no vara segn el entorno.
La tercera declaracin usa una unidad de medida relativa que vara de
acuerdo a las circunstancias. La unidad "eme" est relacionada con el
tamao de la fuente del elemento. En este caso el resultado es que el
margen alrededor del elemento BODY es tres veces mayor que el tamao de
la fuente.
Sintaxis y tipos bsicos de datos en CSS2

Esta seccin describe una gramtica (y reglas de anlisis con compatibilidad
futura) comn a cualquier versin de CSS (incluyendo CSS2). Las futuras
versiones de CSS adherirn a esta sintaxis central, aunque pueden agregar
restricciones sintcticas adicionales.
Comandos
Todos los niveles de CSS --nivel 1, nivel 2 y cualquier futuro nivel-- usan la
misma sintaxis central. Los diseadores pueden usar esta caracterstica para
crear hojas de estilo que funcionen con aplicaciones de usuario antiguas,
mientras ejercitan tambin las posibilidades de los niveles ms nuevos de
CSS.
A nivel de lxico, las hojas de estilo CSS consisten de una secuencia de
comandos. La lista de comandos para CSS2 es la que sigue. Las
definiciones usan expresiones regulares al estilo de Lex. Los cdigos octales
se refieren a ISO 10646. Como en Lex, en caso de mltiples equivalencias,
la equivalencia ms larga determina el comando.
Tabla 12.
Comando
Definicin
IDENT
ATKEYWORD
STRING
{ident}
@{ident}
Comando CSS
{string}
97
DHTML
Comando
HASH
NUMBER
PERCENTAGE
DIMENSION
URI
UNICODERANGE
CDO
CDC
;
{
}
(
)
[
]
S
COMMENT
FUNCTION
INCLUDES
DASHMATCH
Definicin
#{name}
{num}
{num}%
{num}{ident}
url${w}{string}{w}$
|url${w}([!#$%&*~]|{nonascii}|{escape})*{w}$
U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?

314
Referencias Bibliogrficas
X.
REFERENCIAS BIBLIOGRAFICAS
[1] ACHOUR Mehdi, BETZ Friedhelm, DOVGAL Antony, Manual Oficial de

PHP Que es PHP, http://www.php.net/docs.php, Abril 2007
[2] RAYA CABRERA Jos Luis. HTML 4 Gua de referencia y tutorial.
http://www.bio.cam.ac.uk/cgi-lib/
PHP Expresiones, http://www.php.net/docs.php, Abril 2007
PHP Operadores, http://www.php.net/docs.php, Abril 2007
[5] OMER, MVC con PHP, http://www.phpizza.com/es/. 2007
[6] AJAX. http://es.wikipedia.org/wiki/AJAX . mayo 2007
[7] WHITE Jare, J. WILSON Max, ROBB Eion. XAJAX PHP Class Library.
http://wiki.xajaxproject.org/0.2.5_Release_Notes.
[8] CAPTCHA. http://www.wikipedia.org . Web visitada el 5 de junio del 2008.
315
Anexos
XI. Anexos
Lista de Ejemplos
Ejemplo 1:
Ejemplo 2:
Ejemplo 3:
Ejemplo 4:
Ejemplo 5:
Ejemplo 6:
Ejemplo 7:
Ejemplo 8:
Ejemplo 9:
Ejemplo 10:
Ejemplo 11:
Ejemplo 12:
Ejemplo 13:
Ejemplo 14:
Ejemplo 15:
Ejemplo 16:
Ejemplo 17:
Ejemplo 18:
Ejemplo 19:
Ejemplo 20:
Ejemplo 21:
Ejemplo 22:
Ejemplo 23:
Ejemplo 24:
Ejemplo 25:
Ejemplo 26:
Ejemplo 27:
Ejemplo 28:
Ejemplo 29:
Ejemplo 30:
Ejemplo 31:
Ejemplo 32:
Ejemplo 33:
Ejemplo 34:
Ejemplo 35:
Ejemplo 36:
Ejemplo 37:
Ejemplo 38:
Ejemplo 39:
Ejemplo 40:
Ejemplo 41:
Ejemplo 42:
Ejemplo 43:
Ejemplo 44:
Ejemplo 45:
UT
TU
TU
UT
TU
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
Primera pgina Web _______________________________ 20

Comentarios _____________________________________ 24
Uso de tildes _____________________________________ 26
Enlaces _________________________________________ 29
Imgenes ________________________________________ 31
Tablas __________________________________________ 33
Ejemplo de Tablas en HTML _________________________ 39
Formulario solicitando los comentarios del usuario: _______ 42
Confirmacin de la inclusin en una lista de correo: _______ 43
Formulario 2 _____________________________________ 45
Uso de frames ___________________________________ 48
Acrnimos y Abreviaturas __________________________ 51
Frase entre comillas_______________________________ 51
INS y DEL ______________________________________ 52
OBJECT Y PARAM _______________________________ 53
Uso de TABLA, THEAD, TFOOT y TBODY _____________ 54
Button con imagen ________________________________ 56
Formulario con OPTGROUP ________________________ 57
Ejemplo de Conjunto de Campos ____________________ 58
DIV y SPAN _____________________________________ 60
funcin alert _____________________________________ 63
Eventos ________________________________________ 78
Definicin mediante cdigo _________________________ 79
Funcin open() ___________________________________ 81
Escribir HTML con javascript ________________________ 85
Select con javascript ______________________________ 89
Uso de archivos js ________________________________ 92
HTML y CSS ____________________________________ 94
Style ___________________________________________ 95
Colores con CSS _________________________________ 96
Definicin de constantes __________________________ 102
Considera la siguiente funcin ______________________ 102
Operador de asignacin___________________________ 105
Operadores de asignacin combinados ______________ 105
Operador ternario _______________________________ 106
Comportamiento Ternario No-Obvio _________________ 107
Control de errores _______________________________ 108
Operador de ejecucin____________________________ 108
Operadores de incremento y decremento _____________ 109
Incremento y decremento con variables tipo carcter. ___ 109
Operadores de cadena ___________________________ 110
Operadores de matrices __________________________ 111
Comparacin de matrices _________________________ 112
Uso de instanceof con clases ______________________ 112
Uso de instanceof con clases heredadas _____________ 113
TU
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
UT
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
UT
TU
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
316
Anexos
Ejemplo 46:
Ejemplo 47:
Ejemplo 48:
Ejemplo 49:
Ejemplo 50:
Ejemplo 51:
Ejemplo 52:
Ejemplo 53:
Ejemplo 54:
Ejemplo 55:
Ejemplo 56:
Ejemplo 57:
Ejemplo 58:
Ejemplo 59:
Ejemplo 60:
Ejemplo 61:
Ejemplo 62:
Ejemplo 63:
Ejemplo 64:
Ejemplo 65:
Ejemplo 66:
Ejemplo 67:
Ejemplo 68:
Ejemplo 69:
Ejemplo 70:
Ejemplo 71:
Ejemplo 72:
Ejemplo 73:
Ejemplo 74:
Ejemplo 75:
Ejemplo 76:
Ejemplo 77:
Ejemplo 78:
Ejemplo 79:
Ejemplo 80:
Ejemplo 81:
Ejemplo 82:
Ejemplo 83:
Ejemplo 84:
Ejemplo 85:
Ejemplo 86:
Ejemplo 87:
Ejemplo 88:
Ejemplo 89:
Ejemplo 90:
Ejemplo 91:
Ejemplo 92:
Ejemplo 93:
Ejemplo 94:
Ejemplo 95:
Ejemplo 96:
UT
TU
TU
UT
TU
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
Uso de instanceof para una clase ___________________ 113

Uso de instanceof con otras variables ________________ 114
If ejecuta una sentencia si la condicin es verdadera ____ 115
If con varias sentencias si la condicin es verdadera ____ 115
If anidado ______________________________________ 116
Uso de else en una sentencia if _____________________ 116
Uso de elseif ___________________________________ 116
Imprimir los nmeros del 1 al 10 utilizando la sentencia for 117
Imprimir los nmeros del 1 al 10 utilizando while _______ 118
Pagina01.php ___________________________________ 119
Comentarios ___________________________________ 121
Sentencia if (1) __________________________________ 121
Sentencia if (2) __________________________________ 121
Sentencia if (3) __________________________________ 122
Sentencia for (1) ________________________________ 123
Sentencia for (2) ________________________________ 124
Sentencia for (3) ________________________________ 125
Envo de datos de un formulario a una pgina PHP _____ 126
Subir un archivo al servidor Web ____________________ 131
Conexin a MySQL ______________________________ 145
Listado de registros ______________________________ 145
Listado de registros en una tabla ____________________ 146
Insercin de registros en una tabla __________________ 147
Edicin de registros ______________________________ 149
Eliminacin de registros ___________________________ 151
Conexin a PostgreSQL __________________________ 172
Listado de registros en una tabla HTML. ______________ 173
Insercin de registro en PostgreSQL. ________________ 174
Edicin de registro en PostgreSQL.__________________ 176
Eliminacin de registro en PostgreSQL. ______________ 178
Conexin a MS-SQLServer ________________________ 182
Listado de registros ______________________________ 183
Insercin de registro en MS-SQLServer ______________ 184
Edicin de registro en MS-SQLServer ________________ 186
Eliminacin de registros en MS-SQLServer ___________ 187
Definicin de una clase ___________________________ 189
Creando una instancia ____________________________ 189
Herencia simple de una Clase ______________________ 190
Auto carga _____________________________________ 191
Conexin a MySQL con mysqli _____________________ 197
Listado con mysqli _______________________________ 198
Insercin de registro con mysqli ____________________ 199
Edicin de registro con mysqli ______________________ 201
Eliminacin de registros con mysqli __________________ 203
Paginacin de resultados__________________________ 204
MODELO MVC con PHP ________________________ 211
Una plantilla usada por el modelo ___________________ 211
CONTROLADOR MVC con PHP ___________________ 212
VISTA MVC con PHP ____________________________ 212
modelo_bd.php _________________________________ 214
lista_bd.php ____________________________________ 215
TU
UT
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
TU
UT
317
Anexos
Ejemplo 97: vista_bd.php ___________________________________
Ejemplo 98: controlador_bd.php ______________________________
Ejemplo 99: Conexin a MySQL con PDO ______________________
Ejemplo 100: Lista de personas con PDO y manejo de errores ______
Ejemplo 101: Listado de registros con PDO, con eliminacin mltiple _
Ejemplo 102: Insercin de registros con PDO ____________________
Ejemplo 103: Eliminacin mltiple de registros con PDO ___________
Ejemplo 104: Edicin de registros con PDO. _____________________
Ejemplo 105: Borrar un archivo de un usuario____________________
Ejemplo 106: Ataque mediante el borrado de archivos _____________
Ejemplo 107: Md5 _________________________________________
Ejemplo 108: Script para acceso de usuarios ____________________
Ejemplo 109: Inyeccin SQL en una sentencia SELECT ___________
Ejemplo 110: Paginacin de resultados con Inyeccin SQL _________
Ejemplo 111: get_magic_quotes_gpc y addslashes _______________
Ejemplo 112: mysqli_real_escape_string _______________________
Ejemplo 113: Ingreso de un usuario a la aplicacin _______________
Ejemplo 114: Verifica datos del usuario_________________________
Ejemplo 115: Autenticacin HTTP _____________________________
Ejemplo 116: Formulario para el logeo de usuarios _______________
Ejemplo 117: Logeo de usuarios ______________________________
Ejemplo 118: Verifica si el usuario se ha logeado _________________
Ejemplo 119: Formulario CAPTCHA ___________________________
Ejemplo 120: Generador CAPTCHA ___________________________
Ejemplo 121: Ver configuracin GD____________________________
Ejemplo 122: Mi primera imagen ______________________________
Ejemplo 123: Rectngulo y texto ______________________________
Ejemplo 124: Grfico de barras _______________________________
Ejemplo 125: Pie __________________________________________
Ejemplo 126: Crculo _______________________________________
Ejemplo 127: FPDF ________________________________________
Ejemplo 128: PDF con salto de pgina _________________________
Ejemplo 129: PDF con captulos ______________________________
Ejemplo 130: PDF con datos de MySQL ________________________
Ejemplo 131: XLS simple ____________________________________
Ejemplo 132: XLS con frmulas ______________________________
Ejemplo 133: XLS con xlsStream _____________________________
Ejemplo 134: XLS con datos de MySQL ________________________
Ejemplo 135: Asignacin de valores a propiedades de un objeto HTML
Ejemplo 136: Asignacin de HTML a innerHTML de una etiqueta DIV _
Ejemplo 137: Asignacin de innerHTML y estilos con XAJAX _______
Ejemplo 138: Ocultar y Mostrar un DIV _________________________
Ejemplo 139: Imprimir nmeros del 1 a N _______________________
Ejemplo 140: Cargar una imagen con XAJAX ____________________
Ejemplo 141: Cambiar el cdigo javascript establecido para un evento
Ejemplo 142: Obtener datos de un formulario ____________________
Ejemplo 143: Obtener datos incluyendo objetos deshabilitados. _____
Ejemplo 144: Archivo con una lnea en blanco antes de iniciar PHP. __
Ejemplo 145: Bsqueda del nombre segn el cdigo con XAJAX ____
Ejemplo 146: Controlador para mantenimiento con AJAX ___________
Ejemplo 147: Modelo para mantenimiento con AJAX ______________
TU
UT
TU
TU
UT
TU
TU
UT
UT
UT
TU
UT
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
TU
UT
TU
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
UT
215
215
220
220
221
222
224
224
227
228
229
230
231
231
241
242
245
246
248
251
252
253
255
256
259
259
260
261
262
264
267
269
271
274
276
277
279
280
284
286
287
289
290
291
293
295
297
300
301
303
308
318
Anexos
Ejemplo 148:
Ejemplo 149:
Vista para mantenimiento con AJAX ________________ 310

Sombreado de registros con JavaScript _____________ 312
TU
UT
TU
TU
UT
TU
UT
UT
319
Anexos
Lista de Tablas
Tabla 1.
Tabla 2.
Tabla 3.
Tabla 4.
Tabla 5.
Tabla 6.
Tabla 7.
Tabla 8.
Tabla 9.
Tabla 10.
Tabla 11.
Tabla 12.
Tabla 13.
Tabla 14.
Tabla 15.
Tabla 16.
Tabla 17.
Tabla 18.
Tabla 19.
Tabla 20.
Cdigos HTML para caracteres especiales ____________ 25

Cdigos HTML para caracteres especiales ____________ 26
Caracteres especiales para cadenas en JavaScript _____ 65
Operadores aritmticos ___________________________ 67
Operadores de comparacin _______________________ 68
Operadores lgicos ______________________________ 68
Operadores de asignacin_________________________ 69
Operadores especiales ___________________________ 69
Mtodos matemticos del Objeto Math _______________ 75
Propiedades del objeto Number ____________________ 76
Eventos de JavaScript ____________________________ 77
Comando CSS __________________________________ 97
Macros CSS____________________________________ 98
Secciones CSS _________________________________ 99
Operadores aritmticos de PHP ___________________ 105
Operadores de comparacin de PHP _______________ 106
Operadores de incremento y decremento de PHP _____ 108
Operadores lgicos _____________________________ 110
Operadores de matrices _________________________ 111
Controladores PDO _____________________________ 217
320
Anexos
Lista de Figuras
Figura 1.
Figura 2.
Figura 3.
Figura 4.
Figura 5.
Figura 6.
Figura 7.
Figura 8.
Figura 9.
Figura 10.
Figura 11.
Figura 12.
Figura 13.
Figura 14.
Figura 15.
Figura 16.
Figura 17.
Figura 18.
Figura 19.
Figura 20.
Figura 21.
Figura 22.
Figura 23.
Figura 24.
Figura 25.
Figura 26.
Figura 27.
Figura 28.
Figura 29.
Figura 30.
Figura 31.
Figura 32.
Figura 33.
Figura 34.
Figura 35.
Figura 36.
Figura 37.
Figura 38.
Figura 39.
Figura 40.
Figura 41.
Figura 42.
Figura 43.
Figura 44.
Figura 45.
Figura 46.
Figura 47.
Figura 48.
U
TU
Inicio de la instalacin de WAMP____________________

Licencia de uso de WAMP_________________________
Destino de la instalacin de WAMP__________________
Seleccionar men de inicio de WAMP________________
Inicio de WAMP en el arranque del Sistema Operativo. __
Resumen de la configuracin de la instalacin _________
Instalando WAMP _______________________________
Instalacin de WAMP completa _____________________
Men de WAMP_________________________________
Resultado de ejercicio01.html ______________________
Lista sin orden __________________________________
Listas sin orden anidadas _________________________
Lista ordenada __________________________________
Lista de definiciones _____________________________
Tabla HTML ____________________________________
Tabla sin una celda ______________________________
Tabla con etiqueta CAPTION ______________________
Tabla con etiqueta TH ____________________________
Tabla con COLSPAN _____________________________
Tabla con ROWSPAN ____________________________
Tabla con CELLSPACING y CELLPADDING __________
Resultado de ejemplo06.html ______________________
Resultado de ejemplo08.html ______________________
Marcos o Frames ________________________________
Marcos con divisin horizontal______________________
Acrnimos y abreviaturas _________________________
Frase entre comillas______________________________
Acrnimos y abreviaturas _________________________
Animacin flash _________________________________
Tabla con THEAD, TFOOT Y TBODY ________________
BUTTON con imagen_____________________________
Lista con OPTGROUP ____________________________
Formulario con agrupamiento de controles ____________
Ejemplo de pgina con DIVs y SPANs _______________
Resultado de eventos.html ________________________
Resultado del mtodo alert ________________________
Resultado de load1.html __________________________
Resultado del mtodo alert ________________________
Resultado de ventanas.html _______________________
La nueva ventana abierta _________________________
Resultado de escribir.html _________________________
Resultado de formularios.html ______________________
Mensaje de validacin ____________________________
Resultado de select.html __________________________
11
12
12
13
13
14
14
15
15
20
22
22
23
23
25
27
30
32
34
34
35
36
37
38
39
40
42
49
50
51
52
52
54
55
57
58
59
62
78
78
79
80
82
83
85
87
87
89
321
Anexos
Figura 49.
Figura 50.
Figura 51.
Figura 52.
Figura 53.
Figura 54.
Figura 55.
Figura 56.
Figura 57.
Figura 58.
Figura 59.
Figura 60.
Figura 61.
Figura 62.
Figura 63.
Figura 64.
Figura 65.
Figura 66.
Figura 67.
Figura 68.
Figura 69.
Figura 70.
Figura 71.
Figura 72.
Figura 73.
Figura 74.
Figura 75.
Figura 76.
Figura 77.
Figura 78.
Figura 79.
Figura 80.
Resultado de operadores_i.php____________________ 110

Resultado de operadores_m.php___________________ 111
Resultado de comp_matrices.php __________________ 112
Resultado de instanciade.php _____________________ 113
Resultado de instanciadehe.php ___________________ 113
Resultado de pagina01.php _______________________ 120
Resultado de formulario01.html ____________________ 127
URL incluyendo datos enviados ___________________ 128
Resultado de formulario03.html (segundo caso) _______ 131
Resultado de pagina10.php (segundo caso) __________ 131
Seleccin de un archivo en un formulario ____________ 132
Datos de un archivo enviado al servidor _____________ 133
Conexin al servidor MySQL con MySQL Administrador 134
Inicio de MySQL Administrator ____________________ 134
Men de MySQL Administrator ____________________ 135
Creando una base de datos_______________________ 135
Base de datos creada en MySQL Administrator _______ 136
Creando una tabla ______________________________ 136
Ingreso del nombre de la tabla ____________________ 137
Definicin de campos de la tabla ___________________ 137
Estructura de la tabla ____________________________ 137
Confirmacin para la creacin de la tabla ____________ 138
Lista de elementos incluyendo la tabla recientemente creada
138
Figura 81.
Interfaz de phpMyAdmin _________________________ 139
Figura 82.
Interfaz para cear una nueva base de datos __________ 140
Figura 83.
Creando la base de datos dbdemo._________________ 140
Figura 84.
Creando la tabla persona. ________________________ 141
Figura 85.
Especificacin de los campos de la tabla ____________ 141
Figura 86.
Autoincremento en el campo idpersona. _____________ 141
Figura 87.
Estructura de la tabla creada ______________________ 142
Figura 88.
Men de operaciones que se pueden realizar sobre las
tablas de la base de datos. ____________________________________ 142
Figura 89.
Formularios para la insercin de registros____________ 143
Figura 90.
Datos para los nuevos registros ___________________ 143
Figura 91.
Operacin realizada con xito y el script SQL que ha sido
ejecutado.
144
Figura 92.
Listado de registros de la tabla persona _____________ 144
Figura 93.
Figura 94.
Figura 95.
Formulario05.html ______________________________ 148
Figura 96.
U
322
Anexos
Figura 97.
Figura 98.
Figura 99.
Figura 100.
Figura 101.
Figura 102.
Figura 103.
Figura 104.
Figura 105.
Figura 106.
Figura 107.
Figura 108.
Figura 109.
Figura 110.
Figura 111.
Figura 112.
Figura 113.
Figura 114.
Figura 115.
Figura 116.
Figura 117.
Figura 118.
Figura 119.
Figura 120.
Figura 121.
Figura 122.
Figura 123.
Figura 124.
Figura 125.
Figura 126.
Figura 127.
Figura 128.
Figura 129.
Figura 130.
Figura 131.
Figura 132.
Figura 133.
Figura 134.
Figura 135.
Figura 136.
Figura 137.
Figura 138.
Figura 139.
Figura 140.
Figura 141.
Figura 142.
Figura 143.
Figura 144.
Figura 145.
Figura 146.
Figura 147.
U
Formulario de edicin de un registro ________________

Resultado de pagina17.php _______________________
Archivos de instalacin de PostgreSQL______________
Asistente de instalacin de PostgreSQL _____________
Inicio del asistente de instalacin __________________
Notas de instalacin_____________________________
Opciones de instalacin__________________________
onfiguracin del servicio _________________________
Error en la cuenta ______________________________
Password aleatorio _____________________________
Cuenta del superusuario _________________________
Habilitar lenguaje procedural ______________________
El asistente est listo para iniciar la instalacin________
Instalando PostgreSQL __________________________
Instalacin completa ____________________________
pgAdmin III____________________________________
Conexin al servidor desde pgAdmin III _____________
Listado de elementos del servidor __________________
Creando una base de datos_______________________
Datos de la nueva base de datos __________________
Creando una nueva tabla_________________________
Propiedades de la tabla __________________________
Propiedades de una nueva columna ________________
Columna nombres de la tabla persona ______________
Clave primaria de la tabla persona _________________
Columnas pertenecientes a la clave primaria _________
Script SQL generado para la creacin de la tabla ______
Final de la creacin de la tabla ____________________
Men desplegable de la tabla _____________________
Vista de datos de la tabla_________________________
Editando datos en la tabla ________________________
Interfaz de phpPgAdmin _________________________
Logeo de usuarios al servidor PostgreSQL ___________
Interfaz de ingreso a phpPgAdmin__________________
Creando una nueva base de datos _________________
Base de datos dbdemo creada ____________________
Men de elementos de la base de datos _____________
creando la tabla persona _________________________
Ingresando los campos de la tabla _________________
Autoincremento para la clave primaria ______________
Estructura de la tabla ____________________________
Formulario de ingreso de nuevos registros ___________
Listado de registros _____________________________
Activando la extensin php_pgsql __________________
Resultado de formulario06.html ____________________
151
151
153
153
154
154
155
155
156
156
156
157
157
158
158
159
159
160
160
161
161
162
162
163
163
164
164
165
165
166
166
167
167
168
168
169
169
169
170
170
170
171
171
172
173
174
175
176
177
178
178
323
Anexos
Figura 148.
Figura 149.
Figura 150.
Figura 151.
Figura 152.
Figura 153.
Figura 154.
Figura 155.
Figura 156.
Figura 157.
Figura 158.
Figura 159.
Figura 160.
Figura 161.
Figura 162.
Figura 163.
Figura 164.
Figura 165.
Figura 166.
Figura 167.
Figura 168.
Figura 169.
Figura 170.
Figura 171.
Figura 172.
Figura 173.
Figura 174.
Figura 175.
Figura 176.
Figura 177.
Figura 178.
Figura 179.
Figura 180.
Figura 181.
Figura 182.
Figura 183.
Figura 184.
Figura 185.
Figura 186.
Figura 187.
Figura 188.
Figura 189.
Figura 190.
Figura 191.
Figura 192.
Figura 193.
Figura 194.
Figura 195.
Figura 196.
Figura 197.
Figura 198.
U
Creando un nueva base de datos __________________

Nombre de la nueva base de datos _________________
Creando una nueva tabla_________________________
Especificacin de los campos de la tabla ____________
Activando la extensin php_mssql__________________
Creando un usuario para acceso a la base de datos ___
Establecimiento de los permisos del usuario__________
Resultado de autocarga.php ______________________
Resultado de mysqli-connect.php __________________
Resultado de mysqli-lista.php _____________________
Resultado de mysqli-listado.php ___________________
Resultado de formulario08.htm ____________________
Resultado de mysqli-insertar.php __________________
Resultado de mysqli-editar.php ____________________
Resultado de mysqli-actualizar.php _________________
Resultado de mysqli-eliminar.php __________________
Resultado de mysqli-listado-paginacion.php __________
MVC_________________________________________
Tres capas ____________________________________
Resultado de controlador_bd.php __________________
Resultado de pdo-lista.php _______________________
Resultado de pdo-listado.php _____________________
Resultado de pdo-nuevo.php______________________
Resultado de pdo-editar.php ______________________
Resultado de md5.php___________________________
Resultado de inyeccion01.php_____________________
Nuevo resultado de inyeccion01.php________________
Tercer resultado de inyeccion01.php________________
URL con inyeccin SQL__________________________
Resultado de la inyeccin SQL ____________________
Evitando la inyeccin SQL ________________________
Resultado sin inyeccin realizada __________________
Tabla usuario __________________________________
Logeo con inyeccin SQL ________________________
Nuevo resultado de inyeccion03.php________________
Tercer resultado de inyeccion03.php________________
Resultado de comillas-magicas.php ________________
Resultado de ingreso01.php ______________________
Ingreso01.php con datos incorrectos________________
Logeo incorrecto _______________________________
179
179
180
180
181
181
182
183
185
187
187
188
190
191
192
197
198
199
200
201
202
203
203
205
207
209
216
221
222
223
225
229
233
233
234
234
234
236
236
237
238
238
239
239
240
241
241
243
246
247
247
324
Anexos
Figura 199.
Figura 200.
Figura 201.
Figura 202.
Figura 203.
Figura 204.
Figura 205.
Figura 206.
Figura 207.
Figura 208.
Figura 209.
Figura 210.
Figura 211.
Figura 212.
Figura 213.
Figura 214.
Figura 215.
Figura 216.
Figura 217.
Figura 218.
Figura 219.
Figura 220.
Figura 221.
Figura 222.
Figura 223.
Figura 224.
Figura 225.
Figura 226.
Figura 227.
Figura 228.
Figura 229.
Figura 230.
Figura 231.
Figura 232.
Figura 233.
Figura 234.
Figura 235.
Figura 236.
Figura 237.
Figura 238.
Figura 239.
Figura 240.
Figura 241.
Figura 242.
Figura 243.
Figura 244.
Figura 245.
Figura 246.
Figura 247.
Figura 248.
Figura 249.
U
Autenticacin http con PHP _______________________

Resultado de auth01.php_________________________
Autenticacin con datos correctos __________________
Resultado de auth01.php con datos correctos ________
Tabla usuario __________________________________
registro de un usuario ___________________________
Resultado de entrar.php _________________________
Resultado de entrar.php con datos incorrectos ________
Resultado de mysqli-listadologeado.php _____________
Ejemplo1 de CAPTCHA__________________________
Resultado de gdinfo.php _________________________
Resultado de imagen01.php ______________________
Resultado de pdf01.php__________________________
Segunda pgina de pdf01.php_____________________
Abriendo xls01.php _____________________________
Hoja de calculo con xls01.php _____________________
Abriendo xls02.php _____________________________
resumen.xls generado con xls02.php _______________
Resultado de xls03.php __________________________
Abriendo xls05.php _____________________________
Resultado de xajax01.php ________________________
Cambio de contenido con xajax02.php ______________
Ocultando un DIV_______________________________
Imagen cargada con xajax06.php __________________
Segunda imagen cargada con xajax06.php___________
Ventana nueva con xajax07.php ___________________
Mensaje utilizando eventos en xajax07.php __________
Ingreso de datos en xajax08.php___________________
Mensaje resultante en xajax08.php _________________
Formulario de xajax09.php _______________________
Deshabilitando una caja de texto con xajax___________
Mensaje de resultado de xajax09.php _______________
248
249
249
249
250
250
251
253
254
258
258
258
259
260
260
261
262
264
265
267
270
270
274
275
277
277
278
278
280
281
282
282
285
286
287
288
290
290
291
292
293
293
294
295
295
296
297
297
298
299
299
325
Anexos
Figura 250.
Figura 251.
Figura 252.
Figura 253.
Figura 254.
Figura 255.
Figura 256.
Figura 257.
Figura 258.
Figura 259.
Figura 260.
U
Incluyendo objetos inhabilitados ___________________

Mensaje resultante incluyendo objetos inhabilitados ____
Error comun en xajax____________________________
Resultado de xajax-buscar.php ____________________
Datos de bsqueda en xajax-buscar.php ____________
Resultado de la bsqueda en xajax-buscar.php _______
Listado de persona con xajax _____________________
Insercin de registros con xajax ___________________
Edicin de registro con xajax ______________________
Seleccin de registros con xajax ___________________
Bsqueda de registros con xajax___________________
299
299
300
302
302
302
306
307
307
308
308
326
Libros, Manuales, Cursos, Revistas, Software, Video

Tutoriales, Trucos, Pelculas, Series, Juegos, Utilidades, y
mucho ms Gratis para el Conocimiento Continuo.
https://www.facebook.com/IngAlexisLlontop
VISTANOS EN NUESTRAS DIFERENTES WEBS PARA DIFERENTES

SERVICIOS!
LIBROS, MANUALES, SOFTWARE SOBRE PROGRAMACIN Y

OTRAS UTILIDADES
AQU:
a
http://alexyniorlls.blogspot.com
TODA INGENIERA EN UNA SOLA COMUNIDAD, LIBROS

UNIVERSITARIOS Y DE TODA INGENIERA AQU:
http://fullengineeringbook.blogspot.com
REVISTAS, PROGRAMAS FULL AQU:
http://reprofull.blogspot.com

Desarrollo Web Con PHP - Oscar Capuñay Uceda

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web Con PHP - Oscar Capuñay Uceda

Cargado por

Información del documento

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

Desarrollo Web Con PHP - Oscar Capuñay Uceda

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web con

PREPARANDO LA PLATAFORMA DE DESARROLLO

INSTALACIN DEL SERVIDOR WEB Y PHP

III. INICIANDO LA PROGRAMACIN CON PHP

IV. ESTRUCTURAS DE CONTROL

V. ACCESO A DATOS CON PHP

FORMULARIOS HTML Y PHP

VI. PHP ORIENTADO A OBJETOS

VII. SEGURIDAD WEB

SEGURIDAD EN EL SISTEMA DE ARCHIVOS

VIII. GENERACIN DE ARCHIVOS CON PHP

IX. PHP + AJAX

VISTA CON AJAX

Oscar E Capuay Uceda

Preparando la plataforma de desarrollo

Preparando la plataforma de desarrollo

Instalacin del servidor Web y PHP

Inicio de la instalacin de WAMP

Oscar E Capuay Uceda

Preparando la plataforma de desarrollo

Licencia de uso de WAMP

Si estamos de acuerdo con los trminos de la licencia, seleccionamos I

Destino de la instalacin de WAMP

Luego seleccionamos la ubicacin de los paquetes que vamos a instalar.

Oscar E Capuay Uceda

Preparando la plataforma de desarrollo

Seleccionar men de inicio de WAMP

Inicio de WAMP en el arranque del Sistema Operativo.

Despus elegimos si queremos que WAMP se inicie automticamente

Oscar E Capuay Uceda

Preparando la plataforma de desarrollo

Resumen de la configuracin de la instalacin

Ahora nos muestra el resumen de la configuracin elegida antes del inicio de

Oscar E Capuay Uceda

Preparando la plataforma de desarrollo

Instalacin de WAMP completa

Finalmente la instalacin termina y nos muestra la pantalla anterior en la que

. Luego de hacer clic aparecer un men:

Oscar E Capuay Uceda

Preparando la plataforma de desarrollo

make && make install

Oscar E Capuay Uceda

Preparando la plataforma de desarrollo

Oscar E Capuay Uceda

Para desarrollar aplicaciones Web con PHP es necesario tener

Oscar E Capuay Uceda

Primera pgina Web

Figura 10. Resultado de ejercicio01.html

Oscar E Capuay Uceda

Formato de Texto con HTML

Oscar E Capuay Uceda

Figura 11. Lista sin orden

Figura 12. Listas sin orden anidadas

Figura 13. Lista ordenada

Figura 14. Lista de definiciones

Oscar E Capuay Uceda

Comentarios no visibles en la pantalla

Figura 15. Resultado de ejercicio02.html

Cdigos HTML para caracteres especiales

<LI> Sistemas de Información Gerencial