Desarrollo Web Con PHP - Oscar Capuñay

Naranja

Manzana

, y luego para cada elemento la etiqueta

(List Item).

Resultado Web

Figura 11. Lista sin ordenAdems podemos anidar una lista dentro de otra. Por ejemplo:

Mamferos

Peces

Sardina

Bacalao

Aves

Resultado Web

Figura 12. Listas sin orden anidadasLas 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.

Introduccion

Conceptos Basicos

Aplicaciones

Bibliografia

El texto aparecer de la siguiente forma:

Figura 13. Lista ordenadaAl igual que las ordenadas.

listas sin orden, tambin se pueden anidar las listas

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 y . 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 (definition term) y 2) la definicin de dicha cosa, que se consigue con la etiqueta (definition definition).

HTML

Son las iniciales de HyperText Markup Language

WWW

Son las iniciales de World Wide Web

Su resultado es:

Figura 14. Lista de definiciones

Comentarios no visibles en la pantallaA 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

Ejercicio 2

Mis Cursos

Sin un orden particular, mis cursos son los siguientes:

Redes de computadoras

Ingenieria de Software

Herramientas Case

Software de Aplicacin I

Software de Aplicacin II

Sistemas de Informacin Gerencial

Los cursos que me gustan son (en orden de preferencia):

Ingenieria de Software


Redes de Computadoras

Resultado Web:

Figura 15. Resultado de ejercicio02.htmlCaracteres especialesHemos 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 "". 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 especialesPodemos 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

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

Ejercicio 3

Mis Cursos

Sin un orden particular, mis cursos son los siguientes:

Redes de computadoras

Ingeniera de Software

Herramientas Case

Software de Aplicacin I

Software de Aplicacin II


Los cursos que me gustan son (en orden de preferencia):

Ingeniera de Software


Redes de Computadoras

Resultado Web:

Figura 16. Resultado de ejercicio03.htmlEnlaces o hipervnculosEl 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: yyy

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.

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 cualquierpalabra). 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:

YYY .En el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta: Haga Click aqu para ir al final.

En el final del documento se inserta esta etiqueta: . 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: Ejemplo 2

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 . Entonces la etiqueta tiene que ser: Cursos .

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

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:

Pgina inicial de la Nasa 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:Texto del enlaceEjemplo 4: Enlaces

Ejercicio 4

Mis pginas favoritas

Estas son mis pginas favoritas:

Desarrollo Web

Foros del Web

Google

Resultado Web:

Figura 17. Resultado de ejercicio04.htmlImgenesLa 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:

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

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.

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:

Titular alineado arriba

Titular alineado en medio

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: yyy .Donde xxx era el

destino del enlace e yyy el texto del enlace (o msgeneralmente 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):

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:

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

Ejercicio 5

Ejercicio 5

Esta es una pgina Web. Tiene todos los elementos bsicos sobre todo imgenes.

Mi primera pagina Web.

Mis Cursos

Desarrollo Web con PHP

Resultado Web:

Figura 18. Resultado de ejercicio05.html

TablasLas etiquetas necesarias para crear tablas son:

Y 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:

[resto de las etiquetas]

Por ejemplo: si queremos una tabla con un borde de una unidad de espesor, escribiremos el siguiente cdigo:

[resto de las etiquetas]

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: y . Estas etiquetas tenemos que repetirlas tantas veces como filas queremos

que tenga la tabla. Las etiquetas para crear columnas son: y , 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

Ejercicio 6

Ejercicio 6

fila1-celda1 fila1-celda2 fila1-celda3

fila2-celda1 fila2-celda2 fila2-celda3

Resultado Web:

Figura 19. Tabla HTMLQue 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 fila2-celda3, resultar:

Figura 20. Tabla sin una celdaTitular de la tablaSe 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: y para su inicio y finalizacin,

respectivamente.

Tomando en cuenta el ejercicio anterior, vemos como podemos utilizar esta etiqueta:

Ejemplo de filas desiguales

fila1-celda1

fila1-celda2

fila1-celda3

fila2-celda1

fila2-celda2

Resultado Web:

Figura 21. Tabla con etiqueta CAPTIONAdems 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: y . Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existan:


Columna 1 Columna 2 Columna 3

fila1-celda1

fila1-celda2

fila1-celda3

fila2-celda1

fila2-celda2

Resultado Web

Figura 22. Tabla con etiqueta THUbicacin contenido dentro de la celdaEl 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:

Al centro

A la derecha

Cabecera a la izquierda En el caso de la etiqueta , por defecto el texto esta en el centro de la celda.

Por defecto, las

celdas tienen alineacin vertical es en el medio. Estotambin se puede cambiar, aadiendo dentro de la etiqueta de la celda los siguientes atributos:

Arriba

Centro

Abajo Cambiando las dimensiones de la tablaEl 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 podemosmodificar 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 variasA 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

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:



Celda sobre 3 columnas

fila1-celda1

fila1-celda2

fila1-celda3

fila2-celda1

fila2-celda2

Resultado Web

Figura 23. Tabla con COLSPANO, en la misma tabla, vamos a aadir una celda en la primera fila. pero que abarque tambin a la siguiente:



Celda sobre 3 columnas

fila1-celda1

fila1-celda2

Celda junto a 2 filas

fila2-celda1

fila2-celda2

Resultado Web

Figura 24. Tabla con ROWSPAN

Separacin entre las celdas de una tablaPor 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 .Por ejemplo, para obtener una separacin de ponemos:

20 pixels entre celdas

Separacin entre el borde y el contenido dentro de las celdasLa 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 .Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y los bordes, dentro de cada celda:

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:

Resultado Web

Figura 25. Tabla con CELLSPACING y CELLPADDINGEjemplo 7: Ejemplo de Tablas en HTML

ejemplo06.html

Tablas

Tablas

fila1-celda1

fila1-celda2

fila1-celda3

fila2-celda1

fila2-celda2

fila2-celda3

Resultado Web

Figura 26. Resultado de ejemplo06.html

FormulariosLos formularios permiten a los usuarios enviar informacin al servidor, en el cual hay instalado(s) programa(s) que procesan esta informacin.

Estructura de un formularioLa 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

Etiqueta de inicio

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 datosExisten tres tipos de elementos:

1. Introduccin por medio de texto

2. Introduccin por medio de mens

3. Introduccin por medio de botonesLa introduccin de los datos se consigue por medio de la etiqueta:

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.

Escribe tu apellido:

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

En el caso que hemos visto, si hubiramos cambiado la etiqueta correspondiente por:

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:

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:

(en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero de filas, y COLS el de columnas). y la de cierre:

Ejemplo 8: Formulario solicitando los comentarios del usuario:

Introduce tus comentarios:

Resultado Web:

Figura 27. Resultado de ejemplo08.html

Introduccin por medio de Listas DesplegablesSi 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 y la de cierre

. Las distintas opciones a escoger se consiguen con la etiqueta

.

Ejemplo: Pedimos al usuario que elija su color preferido:

Cul es tu color preferido?

Rojo

Verde

Azul

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:

Ejemplo 9: Confirmacin de la inclusin en una lista de correo:

S, deseo ser incluido en la lista de correo.

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 (elusuario no necesitar hacerlo), basta con aadir el atributo CHECKED

dentro de la etiqueta.Ejemplo:

Botones de radioCuando queremos que el usuario elija una nica opcin entre varias, podemos hacer uso de los botones de radio, que se consiguen con la

etiqueta:

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?

PC

Mac

Unix

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 borradoHasta 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:

En donde zzz es el texto que queremos que aparezca en el botn. Ejemplo: Escribe tu apellido:

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:

En donde zzz es el texto que queremos que aparezca en el botn. Si aadimos al ejemplo anterior la etiqueta:

Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el botn de borrado.

Consideraciones finalesHasta 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 2Ejercicio10.html

LIBRO DE VISITAS

Libro de visitas

Tu nombre:

Escribe tus comentarios:

Resultado Web:

Resultado de ejercicio10.html

HTML 4La especificacin 4.0 de HTML, nos trae algunas novedades respecto a la versin 3.2, las cuales sern comentadas a continuacin:

Elementos nuevosLos 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 atributosCasi 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:

FramesFrames (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 lanavegacin 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 framesLo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuntas zonas va a haber, qu distribucin y tamao van a

tener, y cul va ser el contenido de cada una de ellas.

En el ejemplo que vamos a desarrollar, la pgina va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sera una distribucin en filas).

Con respecto al tamao, haremos que el primero (el 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 undocumento 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

Mi pgina con frames

Estas utilizando un navegador que no soporta frames.

ir a pgina sin frames .

Ejercicio11a.html

marco 1

marco 1

Ejercicio11b.html

marco 2

marco 2

Resultado Web

Figura 28. Marcos o FramesEs 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 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: ejercicio 12. 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

y . Se aaden al final del documento de definicin de los frames, y a se pone entre ambas lo que queremos que vean los que acceden con un navegador que no soporta frames. Puede incluso

ser el cdigo HTML de una pgina completa (lo que normalmente va entre las etiquetas y )

Un segundo diseo con frames podra ser dividiendo la pgina de manera horizontal.Ejemplo11c.html

Mi pgina con frames

Estas utilizando un navegador que no soporta frames.

ir a pgina sin frames .

Resultado Web:

Figura 29. Marcos con divisin horizontal

Etiqueta ACRONYMIndica un acrnimo (es la suma de los significados de las palabras que lo forman. Por ejemplo HTML, (Hyper Text Markup Language).

Etiqueta ABBRIndica 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

Documento sin ttulo

WWW

HTML

Dr

Sr

Resultado Web:

Figura 30. Acrnimos y abreviaturasEtiqueta QEsta etiqueta inserta comillas dobles en una frase. Se utiliza para citar frases.

Ejemplo 13: Frase entre comillasEjercicio13.html

Carlos dice:

Estoy aprendiendo HTML
Jaime dice:

Es un lenguaje fcil de aprender

Resultado Web:

Figura 31. Frase entre comillasEtiquetas INS y DELINS 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

Ejemplo de texto nuevo.

Este texto fue agregado.

Esta frase tiene una palabra borrada algo borrado.

Resultado Web:

Figura 32. Acrnimos y abreviaturas

OBJECTEsta etiqueta se usa cuando un elemento Web ser representado utilizando un plug-in de algn software externo al agente o navegador utilizado.

PARAMLas 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

Ejemplo de OBJECT, PARAM y EMBED

Resultado Web:

Figura 33. Animacin flashTABLASGrupos de filas: los elementos THEAD, TFOOT y TBODYLas 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 TBODYEjercicio16.html

Ejemplo de THEAD, TFOOT y TBODY

Id

Nombres

Apellidos

Pie de la tabla

1 Kelly Quiroz Ch

2 Carlos Capuay Uceda

3 Marco Quiroz Chavil

4 Jaime Capuay Uceda

Resultado Web:

Figura 34. Tabla con THEAD, TFOOT Y TBODYTFOOT 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:

FORMULARIOSEl elemento BUTTONLos 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 botonesde 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

Ejemplo de BUTTON

Nombre:
Apellido:
email:

sexo: Hombre

Mujer

Editar

Restablecer

Resultado Web:

Figura 35. BUTTON con imagenEl elemento OPTGROUPEl 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 OPTGROUPEjercicio18.html

Ejemplo de OPTGROUP

Ninguno

Escoba

jabn

Detergente

Chocolate

Caramelo

Gelatina

PEPSI

Coca Cola

Resultado Web:

Figura 36. Lista con OPTGROUP

Estructura a los formularios: los elementos FIELDSET y LEGENDLa 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 CamposEjercicio19.html

Ejemplo FIELDSET y LEGEND

Datos Personales

Nombres:
Apellidos:
Ciudad:
Telfono:

Datos Internet

Pgina personal:

Blog:
Correo Electrnico:

Skype:

ICQ:

Enviar

Resultado Web:

Figura 37. Formulario con agrupamiento de controles

Etiquetas DIV y SPANLas 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 SPANEjercicio20.html

menu

Tablas

Universidades

Facultades

Escuelas

Semestre

2Verdadero

Menor o igual que= 2Falso

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 ysuperiores. Hay que indicar que versiones ms antiguas de Netscape tratan la igualdad normal como si fuera estricta.

Operadores lgicosEstos operadores permiten realizar expresiones lgicas complejas:

Tabla 6. Operadores lgicos

DescripcinSmboloExpresin de ejemploResultado del ejemplo

Negacin!!(2 = 2)Falso

Y&&(2 = 2) && (2 >= 0)Verdadero

||(2 = 2) || (2 2)Verdadero

Operadores de asignacinNormalmente 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

OperadorSignificadoOperadorSignificado

x += yx = x + yx -= yx = x - y

x /= yx = x / yx *= yx = x * y

x % yx = x % y

Operadores EspecialesVamos 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 : valor2Si 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 : 2Para tratar con objetos disponemos de tres operadores: Tabla 8. Operadores especiales

DescripcinSmboloEjemploResultado del ejemplo

Crear un objetonewa = new Array()a es ahora un vector

Borrar un objetodeletedelete aElimina el vector anteriormente creado

Referencia al objeto actualthis

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.

Estructuras de controlEstas 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 condicionalesUna 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.

BuclesUn 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;

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

cdigoEl cdigo

contenido en el bucle se ejecutar mientras la

condicin secumpla. 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

Pasa por aqu encima

Resultado Web:

Figura 39. Resultado de eventos.html

Figura 40. Resultado del mtodo alert

Definicin mediante cdigoHemos 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 atributosque definen controladores de evento, permiten el

acceso a dichoscontroladores por medio de propiedades con el mismo nombre. Por ejemplo, la pgina:

Ejemplo 23: Definicin mediante cdigo load1.html

...

Figura 41. Resultado de load1.html

Figura 42. Resultado del mtodo alertSe puede reescribir como:

load2.html

...

Modelo de objetos del documentoCuando 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, convieneaclarar que en esta jerarqua, contra lo

que pueda parecer, no existeherencia 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.

Objeto WindowEs el objeto principal. Define la ventana sobre la que estamos trabajando eincluye los objetos referentes

a la barra de tareas, el documento o lasecuencia 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 siguientes elementos:

los

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

function AbrirVentana() {MiVentana=open("","ventana2","toolbar=no,directories=no,menubar=no,status=yes");MiVentana.document.write("Una ventana");

nueva

MiVentana.document.write("Texto de prueba");

}

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

Figura 44. La nueva ventana abiertaclose() Cierra

la ventana. A no ser que hayamos acabado de abrirla nosotrosmostrar al usuario una ventana de confirmacin para que decida l si quiereo no cerrarla. Esto se

hace por motivos de seguridad, ya que serademasiado 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

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)

Llamaa funcin cuando hayan pasado tiempo milisegundos. Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.

Objeto DocumentEste 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 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.

Cmo escribir en el documento

A la hora de escribir en un documento por medio de write o writeln hayque tener

en cuenta un hecho fundamental. Para poder escribir en undocumento, ste debe estar abierto y, al abrirlo, se destruye todo el cdigo que haya en l.

Ejemplo 25: Escribir HTML con javascript escribir.html

Escribe y no sobreescribe

Esta pgina fue modificada por ltima vez el da

document.write(document.lastModified);

Resultado Web:

Figura 45. Resultado de escribir.html

Objeto FormLos 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.

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:

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

Ejemplo de formularios

function validar(direccion) {

if (direccion.indexOf("@") != -1)

return true;

else {

alert('Debe escribir una direccin vlida');

return false;

}

}

Envame tu e-mail:

Resultado Web

Figura 46. Resultado de formularios.html

Figura 47. Mensaje de validacin

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 funcinvalidar

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.valuethis 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 RadioEn 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 estarseleccionado 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 OptionEl objeto Select es, con mucho, el ms complicado. Esto es debido a quecontiene

en su interior un vector de objetos Option. Dispone de dospropiedades 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

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 javascriptselect.html

Ejemplo de Select

function irA(menu){

window.location.href = menu.options[menu.selectedIndex].value;}

Visitar

W3C

Capunay

Google

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

Otros objetosEl 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 HistorySe 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:

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

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 lainterrogacin, inclusive). Puede ser til para pasar parmetros de una pgina a otra.

Objeto NavigatorSe 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 ScreenComo 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.

Ficheros .jsUn 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 jsexterno.html

Mi Pgina

Lo que sea.

El cdigo que incluyamos entre un y un 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.

HOJAS DE ESTILO EN CASCADACSS 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 delusuario 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, lasaplicaciones 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 deestilo

complementan los documentos estructurados (ej., HTML yaplicaciones

XML) proveyendo informacin estilstica del textomarcado. 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 codificacinpara presentar

los contenidos. Comparado con los archivos deimgenes 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 serabiertas, 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

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

La Web de OscarCap

La Web de OscarCap

Esta pgina le ayudar a disear pginas Web.

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

---- La Web de OscarCap ----

H1 { color: blue }

La Web de OscarCap

Esta pgina Web te ensear mucho.

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:

La Web de OscarCap

La Web de OscarCap


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


BODY { color: red }

H1 { color: blue }

La Web de OscarCap


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:


BODY {

font-family: "Gill Sans", sans-serif;

font-size: 12pt;

margin: 3em;}

La Web de OscarCap


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 CSS2Esta 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 CSS

Comando DefinicinIDENT {ident}ATKEYWORD

@{ident}

STRING {string}

Comando Definicin HASH #{name} NUMBER {num} PERCENTAGE {num}% DIMENSION {num}{ident}

url${w}{string}{w}$

URI

|url${w}([!#$%&*-

~]|{nonascii}|{escape})*{w}$UNICODE- U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?RANGECDO

; ;{ \{} \}( $) $[ \[] \]S [ \t\r\n\f]+COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/FUNCTION {ident}\(INCLUDES ~=DASHMATCH |=DELIMcualquier otro carcter no equivalente con las reglas anteriores

Las macros entre llaves ({}) arriba son definidas como sigue:Macro Definicin

Tabla 13. Macros CSS

Ident

Documents

Desarrollo Web Con PHP - Oscar Capuñay