Programacion Web

Curso Programacin Web
Pg. 1
ndice
LENGUAJE HTML 1. INTRODUCCIN ...................................................................................................... 9 2. ESTRUCTURA DE UN DOCUMENTO HTML .................................................... 9 .- Estructura General..................................................................................................... 9 .- Formato del texto .................................................................................................... 10 3. LISTAS...................................................................................................................... 11 .- Listas no numeradas ................................................................................................ 11 ..- Listas numeradas .................................................................................................... 11 .- Listas de definicin ................................................................................................. 11 4. COMENTARIOS NO VISIBLES EN LA PANTALLA....................................... 11 5. ENLACES ................................................................................................................. 12 .- Enlaces dentro de la misma pgina ......................................................................... 12 ..- Enlaces a otra pgina del sistema........................................................................... 12 .- Enlaces a otra pgina exterior ................................................................................. 12 .- Enlaces a una direccin de correo electrnico ........................................................ 13 6. IMGENES .............................................................................................................. 13 .- Mapas en las imgenes............................................................................................ 13 7. FONDOS ................................................................................................................... 14 .- Fondos con un color uniforme ................................................................................ 14 - Fondos con una imagen............................................................................................ 15 8. TABLAS .................................................................................................................... 15 .- Propiedades de las tablas......................................................................................... 15 .- Propiedades de las filas ........................................................................................... 16 .- Propiedades de las celdas ........................................................................................ 16 9. FORMULARIOS...................................................................................................... 17 .- Propiedades de los formularios ............................................................................... 17 .- Elementos de un formulario .................................................................................... 17 .- Cajas de texto: ......................................................................................................... 18 .- Texto oculto: ........................................................................................................... 18 .- rea de texto: .......................................................................................................... 18 .- Listas de opciones: .................................................................................................. 19 .- Botones de radio:..................................................................................................... 19 .- Cajas de validacin: ................................................................................................ 19 .- Botones:................................................................................................................... 20 10. CAPAS..................................................................................................................... 20 .- Propiedades de las capas ......................................................................................... 20 11. FRAMES ................................................................................................................. 22 .- Propiedades de los frames ....................................................................................... 22 .- Atributos de le etiqueta <FRAMESET>: ................................................................ 22 .- Atributos de le etiqueta <FRAME>: ....................................................................... 23 .- Enlaces a frames...................................................................................................... 24 12 IFRAMES................................................................................................................. 25 LENGUAJE CSS 1. INTRODUCCIN .................................................................................................... 31 2. DEFINICIN DE ESTILOS ................................................................................... 31 .- Agrupacin de varias marcas HTML con una misma regla de estilo. .................... 32 .- Definicin de mltiples estilos para una misma marca HTML .............................. 32 Pg. 2
3.- DEFINICIN DE ESTILOS DE LAS FUENTES DE TEXTO ......................... 32 .- font-family............................................................................................................... 32 ,. font-size ................................................................................................................... 32 .- font-style ................................................................................................................. 33 .- font-weight .............................................................................................................. 33 .- font-variant .............................................................................................................. 33 4. PROPIEDADES RELACIONAS CON EL TEXTO............................................. 33 .- color: ....................................................................................................................... 33 .- text-decoration......................................................................................................... 33 .- text-indent: .............................................................................................................. 34 .- text-transform:......................................................................................................... 34 .- letter-spacing: .......................................................................................................... 34 .- word-spacing : ......................................................................................................... 34 5. HERENCIA DE PROPIEDADES DE ESTILO. ................................................... 34 6.- DEFINICIN DE UN ESTILO EN FUNCIN DEL CONTEXTO.................. 34 7.- DEFINICIN DE HOJAS DE ESTILO EN UN ARCHIVO EXTERNO......... 35 8.- DEFINICIN DE ESTILOS POR MEDIO DE CLASES .................................. 35 9.- DEFINICIN DE ESTILOS POR MEDIO DE ID ............................................. 35 10.- PROPIEDADES RELACIONADAS CON LOS BLOQUES ........................... 36 11.- MANIPULAR ........................................................................................................ 37 .- Posicionamiento ...................................................................................................... 37 .- Visibilidad ............................................................................................................... 38 .- Dimensin ............................................................................................................... 38 .- Overflow ................................................................................................................. 38 .- Recorte .................................................................................................................... 39 .- Orden de visualizacin ............................................................................................ 39 .- Transparencia .......................................................................................................... 40 .- Display .................................................................................................................... 40 12. PROPIEDADES RELACIONADAS CON EL FONDO .................................... 40 13.- PROPIEDADES RELACIONADAS CON LAS LISTAS................................. 41 14. PROPIEDADES RELACIONADAS CON LAS TABLAS ................................ 41 15.- PSEUDOCLASES ................................................................................................. 42 16- CURSOR ................................................................................................................. 42 17.- FLOAT ................................................................................................................... 43 LENGUAJE JAVASCRIPT 1. INTRODUCCIN .................................................................................................... 47 2. INCORPORACIN DE JAVASCRIPT EN HTML ............................................ 47 .- Funciones bsicas.................................................................................................... 47 .- Inclusin en etiquetas Script ................................................................................... 48 .- Inclusin en archivo externo ................................................................................... 48 3. SINTAXIS ................................................................................................................. 48 .- Variables.................................................................................................................. 48 .- Operadores .............................................................................................................. 49 .- Sentencias secuenciales........................................................................................... 50 .- Sentencias condicionales......................................................................................... 50 .- Sentencias iterativas ................................................................................................ 50 .- Comentarios ............................................................................................................ 51 .- Funciones ................................................................................................................ 51 4. Objetos....................................................................................................................... 52
Pg. 3
.- Cadenas ................................................................................................................... 52 .- Arrays ...................................................................................................................... 53 .- Fecha ....................................................................................................................... 54 ,- Math ........................................................................................................................ 55 5.- EVENTOS................................................................................................................ 56 .- Manejadores de eventos .......................................................................................... 57 .- Objeto Event............................................................................................................ 57 .- Eventos de Teclado ................................................................................................. 58 .- Eventos de Ratn..................................................................................................... 59 6.- CONTROL DE FORMULARIOS......................................................................... 59 7. DOOM ....................................................................................................................... 59 .- Objeto WINDOW ................................................................................................... 61 .- Objeto LOCATION ................................................................................................ 63 .- Objeto HISTORY.................................................................................................... 64 .- Objeto NAVIGATOR ............................................................................................. 64 .- Objeto DOCUMENT .............................................................................................. 65 .- Objeto FRAMES ..................................................................................................... 66 8.- ESTRUCTURA DE UN DOCUMENTO HTML................................................. 67 .- innerHTML ............................................................................................................. 68 .- Acceso directo a los nodos ...................................................................................... 68 .- Acceso directo a los atributos de los nodos. ........................................................... 69 .- Creacin de Nodos on the fly.................................................................................. 69 9.- PASO DE PARMETROS .................................................................................... 69 LENGUAJE PHP 1. INTRODUCCIN .................................................................................................... 75 2. EL LENGUAJE PHP ............................................................................................... 75 .- Delimitadores .......................................................................................................... 75 .- Instruccin echo ...................................................................................................... 76 .- Definicin de etiquetas HTML en el cdigo PHP .................................................. 76 .- Definicin de etiquetas PHP en el cdigo HTML................................................... 76 .- Comentarios ............................................................................................................ 76 .- Variables.................................................................................................................. 76 .- Tipos de datos ......................................................................................................... 76 .- Constantes ............................................................................................................... 77 .- Operadores Aritmticos........................................................................................... 77 .- Operadores Lgicos................................................................................................. 78 .- Estructuras de control.............................................................................................. 79 .- Inclusin .................................................................................................................. 81 3. CADENAS................................................................................................................. 81 4. MANIPULACIN DE ARRAYS............................................................................ 82 5. FORMULARIOS...................................................................................................... 82 .- Envo de ficheros en el formulario.......................................................................... 84 .- Manipulacin de Ficheros ....................................................................................... 84 6. PASO DE PARAMETROS POR URL................................................................... 86 7. SESIONES................................................................................................................. 86 8. MANIPULACIN DE BASES DE DATOS .......................................................... 87 Formateado de los datos extrados de una base de datos............................................ 89 .- Insercin de nuevos datos ....................................................................................... 90
Pg. 4
AJAX 1. INTRODUCCIN .................................................................................................... 95 2. EL OBJETO XMLHttpRequest ............................................................................. 95 3. Funcionamiento ........................................................................................................ 97 .- Crear el elemento XMLHttpRequest....................................................................... 97 .- Crear el elemento XMLHttpRequest....................................................................... 98 Realizar la peticin al servidor ................................................................................... 98 .- Ejecutar la funcin de respuesta.............................................................................. 99 4. Invocacin ficheros HTM ...................................................................................... 101 5. Invocacin a fichero JavaScript ............................................................................ 102 6. Invocacin a fichero PHP ...................................................................................... 103
Pg. 5
Pg. 6
Pg. 7
Pg. 8
1. INTRODUCCIN
HTML es el acrnimo ingls de HyperText Markup Language, que se traduce al espaol como Lenguaje de Marcas Hipertextuales. Es un lenguaje de marcacin diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web. Gracias a Internet y a los navegadores como Internet Explorer, Opera, Firefox, Netscape o Safari, el HTML se ha convertido en uno de los formatos ms populares y fciles de aprender que existen para la elaboracin de documentos para web. El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Cada etiqueta define una propiedad que deber ser aplicada sobre el documento. Las etiquetas se representan de la siguiente manera:. <ETIQUETA> .La mayora de las etiquetas tienen una marca de inicio y otra de fin y la propiedad que representan ser aplicada entre ambas marcas. <ETIQUETA> TEXTO HTML </ETIQUETA> Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Por claridad, se usarn en este manual solamente las maysculas.
2. ESTRUCTURA DE UN DOCUMENTO HTML

.- Estructura General Un documento HTML se encuentra entre las etiquetas <HTML> y </HTML>. El documento en s est dividido en dos zonas principales: el encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> y el cuerpo, comprendido entre las etiquetas <BODY> y </BODY>. Dentro del encabezamiento hay informacin del documento, que no se ve en pantalla, principalmente el ttulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra pgina a su bookmark (o agenda de direcciones). Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.) Antes de crear la primera pgina, unas consideraciones sobre el texto: el texto se acomoda a la pgina, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos prrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de cierre </P>)
Pg. 9
.- Cabeceras El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el nmero 6), siendo el nmero indicativo del tamao. El tamao mayor es el correspondiente al nmero 1. Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el atributo SIZE, que es un nmero entre 1 y 7. El valor por defecto del texto es 3, por lo que valor puede ser positivo (+) o negativo (-) respecto a 3. Una gran ventaja de esta notacin respecto a la anterior es que no se produce un salto de prrafo despus de cada cambio. .- Formato del texto Otro atributo que se puede incorporar a la etiqueta <FONT> es FACE. Este atributo permite forzar el tipo de letra que el diseador de la pgina quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador. Para alinear un prrafo en la pgina web se usa la etiqueta <P> junto con la propiedad ALIGN. As, las diferentes alineaciones se indicaran de la siguiente manera: Alineacin Izquierda: <P ALIGN=LEFT> Alineacin Derecha: <P ALIGN=RIGHT> Alineacin Centrada:<P ALIGN=CENTER> Alineacin Justificada:<P ALIGN=JUSTIFY> Tambin tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo. Si queremos separar los prrafos, o cualquier otra cosa, pero sin dejar una lnea en blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta de cierre. Si queremos obtener mltiples lneas en blanco, no basta con repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta <BR>. Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde xxx es el nombre en ingls del color que se desea. Algunas etiquetas adicionales para dar formato al texto son las siguientes: Texto en negrita: Texto realzado: Texto en itlica Texto con nfasis: <B>Texto en negrita</B> <STRONG>Texto realzado</STRONG> <I>Texto en itlica</I> <EM>Texto con nfasis</EM>
Pg. 10
Texto subrayado: Texto tachado:
<U>Texto subrayado</U> <STRIKE>Texto tachado</STRIKE>
3. LISTAS
Este elemento se utiliza para organizar un conjunto de componentes. Existen diferentes tipos de listas, y su utilizacin depender del tipo de organizacin que se quiera representar. .- Listas no numeradas Son listas sin numeracin. s decir, toda la lista est dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida de la etiqueta <LI> (list item). ..- Listas numeradas Sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecer automticamente un nmero correlativo para cada cosa. Son listas sin numeracin. Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas. .- 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 anteriores, 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) 2. La definicin de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). Son listas sin numeracin.
4. COMENTARIOS NO VISIBLES EN LA PANTALLA

A veces es muy til escribir comentarios en el documento HTML sobre el cdigo que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos smbolos:  Ejemplo: 
Pg. 11
5. ENLACES
La caracterstica que ms ha influido en el espectacular xito del Web ha sido la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. En general, los enlaces tienen la siguiente estructura: <A HREF=destino">Texto del enlace</A> Donde destino es el destino del enlace (obsrvese las comillas), Texto del enlace es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado). Se distinguen cuatro tipos de enlaces: .- Enlaces dentro de la misma pgina A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin a otra determinada dentro de la misma pgina web. Para realizar este tipo de enlaces, se deben realizar dos pasos en el siguiente orden: 1. Crear la marca: que es la posicin a donde se quiere saltar. Para ello se utiliza la etiqueta <A NAME="marca"></A>. La palabra marca se puede sustituir por cualquier palabra que se quiera. 2. Crear el enlace: que es el texto desde el cual queremos saltar. Para ello se utiliza la etiqueta <A HREF=destino>Texto del enlace</A>. Donde destino se sustituye por #marca ( la palabra marca se sustituir por el nombre de la marca empleado en el paso 1) ..- Enlaces a otra pgina del sistema Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Para crear un enlace a otra pgina web creada por nosotros, utilizaremos la siguiente sintaxis: <A HREF=pagina.html>Saltar a Pagina</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 (vase la seccin anterior), y completar el enlace con la referencia a esa marca. <A HREF=pagina.html#salto>Saltar dentro de Pagina</A> .- Enlaces a otra pgina exterior Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est en un servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin
Pg. 12
completa, o URL (Uniform Resource Locator). Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos llamado anteriormente destino (el destino del enlace). .- Enlaces a una direccin de correo electrnico En este caso, sustituimos lo que se ha llamado antes destino (el destino del enlace) por mailto: seguido de la direccin de email. Cuando el usuario pulse sobre el enlace, automticamente se le abrir su lector de correo electrnico y activar la accin de crear nuevo mensaje.
6. IMGENES
La etiqueta que nos sirve para incluir imgenes en nuestras pginas del Web es <IMG>. Las propiedades de esta etiqueta son las siguientes: SRC : ALT: WIDTH: El nombre y ubicacin del fichero que contiene la imagen Texto indicativo Anchura de la imagen.
HEIGHT: Altura de la imagen BORDER: Tamao del borde (0 Sin borde) ALIGN: TARGET: Tipo de alineacin del texto con respecto a esta imagen (Top: Superior, Middle: Medio, Bottom:Inferior) Destino del salto (este atributo se explica detalladamente al final del apartado de los frames)
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra pgina. Para ello se mezclan las etiquetas de enlace y las de imagen. En lugar de colocar el texto en la etiqueta de enlace, colocamos la etiqueta con la imagen correspondiente. .- Mapas en las imgenes Los mapas son zonas de una imagen que pueden actuar como enlaces. De esta manera, una misma imagen puede tener varias zonas que permitan al usuario navegar. Cada mapa puede definir varias zonas. La etiqueta que permite definir un mapa es <MAP>, y la etiqueta para que define una zona dentro de un mapa es <AREA>. Los atributos de la etiqueta <MAP> son los siguientes: name: indica el nombre del mapa
Los atributos de la etiqueta <AREA> son los siguientes: Pg. 13
Shape:
Tipo de figura que define la zona. Este atributo puede tener los valores rect (rectngulo), circle (crculo), poly (figura)
Coords: Son las coordenadas de la figura.

En el caso de que el tipo de figura sea un rectngulo, este atributo consta de 4 nmeros que sern las coordenadas x1, y1, x2, y2. En el caso de que el tipo de figura sea un circulo, este atributo consta de 3 nmeros que sern las coordenadas x, y del centro y el radio. En el caso de que sea una figura, este atributo contendr una lista de dos nmeros x, y que sern los puntos que definen los vrtices de la figura.
Href:
Direccin del enlace.
Target: Destino del salto. Alt: Texto indicativo
Para indicar que una imagen posee un mapa, debe usarse la propiedad USEMAP dentro de la etiqueta <IMG>, tal y como se muestra en el siguiente cdigo. En la imagen siguiente se muestra un mapa sobre una imagen, formado por varias figuras. Cada una de estas figuras corresponde a un determinado rea de la imagen. Cada una de estas reas puede indicar la ejecucin de una accin diferente.
7. FONDOS
.- Fondos con un color uniforme Se consigue aadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento). La numeracin hexadecimal se caracteriza por que cada dgito puede tener 16 valores diferentes (en lugar de los diez de la numeracin decimal habitual). Estos dgito son: 0 1 2 3 4 5 6 7 8 9 A B C D E F. Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF.
Pg. 14
Las dos primeras letras indican un nmero, en formato hexadecimal, que representa la cantidad de color rojo. Las dos siguientes letras indican un nmero, en formato hexadecimal, que representa la cantidad de color verde Las dos ltimas letras indican un nmero, en formato hexadecimal, que representa la cantidad de color azul As, por ejemplo, el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores. Algunos ejemplos de colores son los siguientes:
#FF0000 Rojo #00FF00 Verde #0000FF Azul - Fondos con una imagen
#FFFFFF Blanco #000000 Negro #FFFF00 - Amarillo
El fondo de una pgina puede ser tambin una imagen. Esta imagen se repite por toda la pgina, de una manera anloga al tapiz de Windows.
8. TABLAS
.La etiqueta para definir una tablas <TABLE> y </TABLE>. Entre ambas etiquetas se definen toda la informacin de la tabla de la siguiente manera:

Cada nueva fila se indica con la etiquetas <TR> </TR>. Entre ambas etiquetas slo podrn definirse las celdas de la fila. Cada nueva celda dentro de una fila se indica con las etiquetas <TD> </TD>. Entre ambas etiquetas podrn incorporarse todos los elementos HTML.
El nmero de columnas de la tabla viene definido por el nmero de etiquetas <TD>...</TD> definidas dentro de una fila, mientras que el nmero de filas tendr relacin con el nmero de veces que aparece la etiqueta <TR>...</TR> Adems de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado. Esto se consigue con la etiqueta <TH> y </TH>. .- Propiedades de las tablas Pueden indicarse un conjunto de propiedades generales sobre la tabla. Estas propiedades se indican en la etiqueta <TABLE> y son las siguientes: BORDER: WIDTH: HEIGHT: indica el grosor del borde de la tabla. Si su valor es cero, la tabla no tendr borde. especifica la anchura de la tabla. Puede especificarse en porcentaje de pantalla (%)o en puntos. especifica la altura de la tabla. Puede especificarse en porcentaje de pantalla (%)o en puntos.
Pg. 15
ALIGN
alinea horizontalmente la tabla con respecto a su entorno.
BACKGROUND: permite colocar una imagen como fondo de la tabla. BGCOLOR: indica el color de fondo a la tabla.
BORDERCOLOR: define el color del borde. CELLPADDING: CELLSPACING: define el espacio entre los bordes de la celda y el contenido de la misma. define el espacio entre los bordes.
.- Propiedades de las filas Las siguientes propiedades se pueden aplicar a una fila (<TR>) son: ALIGN: VALIGN: Alineacin horizontal. Los valores que puede tener son [left, rigth, center] Alineacin vertical. Los valores que puede tener son [top, middle, bottom]
.- Propiedades de las celdas Las siguientes propiedades se pueden aplicar a una celda individual (<TD>) son: Indica la alineacin horizontal del dato dentro de la celda, se especificar individualmente para cada una de las celdas. Su significado es igual que el expresado para la etiqueta TR. Indicar la alineacin vertical del dato dentro de la celda. Se especifica individualmente para cada celda, el formato es el mismo que el expresado para TR. Especifica el ancho que tendr la columna de la tabla, se puede especificar el valor absoluto, en puntos de la pantalla o en tanto por ciento del tamao de la tabla. Indicar el color de fondo que tendr la celda de la tabla. El color hay que indicarlo independientemente para cada una de las celdas de la columna.
ALIGN:
VALIGN:
WIDTH:
BGCOLOR:
Indicar el nmero de filas que ocupar est celda en la misma fila. En ROWSPAN: este caso la celda se expandir ocupando tantas celdas de la tabla inicial como se especifique. COLSPAN: Indicar el nmero de columnas que ocupar la celda actual, obtendremos una celda que ocupa varias columnas. Se usar para que no se divida la lnea por defecto. Si la usamos las lneas de texto no se dividirn dentro de la celda en varias lneas. Por tanto si la lnea es muy larga la columna de la tabla ser tan ancha como la lnea.
NOWRAP:
Pg. 16
9. FORMULARIOS
Los formularios son componentes HTML que permiten al usuario introducir informacin y enviarla a travs de la web. Los formularios son definidos por medio de las etiquetas <FORM> y </FORM>.Entre ambas etiquetas aparecern todos los componentes del formulario. .- Propiedades de los formularios Las propiedades de la etiqueta <FORM> son las siguientes: ACTION: Define el tipo de accin a llevar a cabo con el formulario. Si la informacin del formulario debe ser enviada a travs del correo electrnico, contendr la direccin de correo del destinatario. Si por el contrario, la informacin debe ser enviada a un programa, contendr la direccin del archivo que contiene al programa. <form action="mailto:direccion@correo.com" ...> <form action="direccin del archivo" ...> METHOD: Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get. El mtodo GET aade los argumentos del formulario al URL recogido en action (utilizando como separador de las variables la "?"). El mtodo de uso ms normal es POST, y en el caso de que estemos mandando el formulario a nuestra direccin de correo electrnico es obligado usarlo. Con GET los datos son encadenados al URL especificado en action , utilizando el tipo de codificacin especificado en el atributo enctype. Este mtodo se utiliza cuando los datos no modifican la base de datos, por ejemplo, al realizar una bsqueda, y los caracteres a enviar tienen que pertenecer obligatoriamente al conjunto ASCII. Con el mtodo POST se realiza una transaccin mediante el protocolo HTTP, utilizando la codificacin enctype. Se utiliza para aplicaciones que modifican la base de datos de destino. A efectos prcticos y, salvo que se os diga lo contrario, daremos siempre el valor post.
ENCTYPE: Se utiliza para indicar la forma en la que viajar la informacin que se mande por el formulario. En el caso ms corriente, enviar el formulario por correo electrnico, el valor de este atributo debe de ser "text/plain". As conseguimos que se enve el contenido del formulario como texto plano dentro del email. Si queremos que el formulario se procese automticamente por un programa, generalmente no se utiliza este atributo, de modo que tome su valor por defecto. .- Elementos de un formulario HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros formularios. Estas van desde la clsica caja de texto hasta la lista de opciones pasando por las cajas de validacin.
Pg. 17
.- Cajas de texto: Las cajas de texto permiten al usuario introducir texto de una longitud limitada. Se definen por medio de la etiqueta <INPUT>. Atributos: Type: Name: Size: indica el tipo de componente. En este caso su valor debe ser "text". indica el nombre del componente dentro del formulario. Define el tamao de la caja en nmero de caracteres. Si al escribir el usuario llega al final de la caja, el texto ira desfilando a medida que se escribe haciendo desaparecer la parte de texto que queda a la izquierda.
Maxlength: Indica el tamao mximo del texto que puede ser tomado por el formulario. Es importante no confundirlo con el atributo size. Mientras el primero define el tamao aparente de la caja de texto, maxlength indica el tamao mximo real del texto que se puede escribir. Podemos tener una caja de texto con un tamao aparente (size) que es menor que el tamao mximo (maxlength). Lo que ocurrir en este caso es que, al escribir, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamao mximo definido por maxlength, momento en el cual nos ser imposible continuar escribiendo. Value: En algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestin. Esto puede ayudar al usuario a rellenar ms rpidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser expresado mediante el atributo value.
.- Texto oculto: Este componente permite ocultar el texto introducido por el usuario para mayor seguridad. Este tipo de campos son anlogos a los de texto con una sola diferencia: remplazamos el atributo type="text" por type="password".
.- rea de texto: Las reas de texto permiten al usuario introducir texto de una longitud ilimitada. Se definen por medio de la etiqueta <TEXTAREA> </TEXTAREA>. Atributos: Name: Rows: Cols : indica el nombre del componente dentro del formulario. Define el nmero de lneas del campo de texto. Define el nmero de columnas del campo de texto.
Pg. 18
.- Listas de opciones: Las listas de opciones son mens desplegables que permiten elegir una (o varias) de las mltiples opciones que se proponen. La etiqueta para definir una lista de opciones es <SELECT> </SELECT>. Entre ambas etiquetas se podrn cada una de las opciones utilizando la etiqueta <OPTION> </OPTION>. Atributos de la etiqueta <SELECT> Name: Size: indica el nombre del componente dentro del formulario. Indica el nmero de opciones visibles. Si le asignamos 1, la seleccin se presentar como un men desplegable. Si le asignamos un valor mayor se presentar como una lista con barra de desplazamiento.
Multiple Indica si se pueden realizar mltiples selecciones. Atributos de la etiqueta <OPTION> Value: Indica el valor que tomar el select cuando esta opcion sea la seleccionada
Selected: Cuando un option es selected, aparece seleccionado por defecto.
.- Botones de radio: La etiqueta empleada en este caso es <INPUT TYPE="RADIO">. Atributos: Name: Value: indica el nombre del componente dentro del formulario. define un valor posible de la variable para cada uno de los radio botones.
Checked: marca por defecto uno de los radio botones del grupo. Disabled: Desactiva el radio botn, por lo que el usuario no podr marcarlo. Tabindex: especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario. .- Cajas de validacin: Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestin. La sintaxis utilizada es muy similar a las vistas anteriormente: <INPUT TYPE="CHECKBOX"> Atributos:
Pg. 19
Name: Value: Checked: .- Botones:
indica el nombre del componente dentro del formulario. define un valor posible de la variable para cada uno de los radio botones. marca por defecto uno de los radio botones del grupo.
En los formularios se pueden usar diferentes tipos de botones.
Un botn que sirve para enviar la informacin a la direccin indicada por el atributo action del formulario. Se indica con la etiqueta <INPUT TYPE="SUBMIT"> Un botn que sirve para limpiar la informacin de todos los campos del formulario. Se indica con la etiqueta <INPUT TYPE="RESET"> Tambin se pueden definir botones genricos con la etiqueta <INPUT TYPE="BUTTON">
Atributos: Name Value: : indica el nombre del componente dentro del formulario. especifica el texto que aparece dentro del botn
10. CAPAS
Una capa es una divisin de la pgina, es decir, una parte de la pgina que tiene un comportamiento independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y la podremos mover por ella independientemente. Para definir una capa se usa la etiqueta <DIV> ... <DIV> ESTO ES UNA CAPA </DIV> ....
. .- Propiedades de las capas Id: Es el nombre e identificador de la capa.
Pg. 20
Style: Define el estilo de la capa. Este atributo contiene todas las caractersticas de la capa. Cada caracterstica esta definida por su nombre y su valor. Aunque se vern ms detalladamente en el captulo sobre CSS, algunas de estas caractersticas son las siguientes: Height: Width: position: indica la altura de la capa. Indica la anchura de la capa. Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute. Relative indica que la posicin de la capa es relativa al lugar donde se estaba escribiendo en la pgina en el momento de escribir la capa con su etiqueta Absolute indica que la posicin de la capa se calcula con respecto al punto superior izquierdo del elemento que contiene la capa. indica la distancia en vertical donde se colocar la capa. Se utilizan las medidas de longitud Si el atributo position es absolute, top indica la distancia del borde superior de la capa con respecto a la esquina superior izquierda de la caja que contiene el elemento. Si nuestro elemento absoluto no est contenido dentro de ningn otro, la posicin de las coordenadas se mide respecto del inicio de la etiqueta BODY (contenedor principal). Si nuestro elemento absoluto est contenido dentro de otro elemento, las coordenadas del elemento absoluto "contenido" se calculan desde el origen de su elemento contenedor. Si el atributo position es relative, top indica la distancia desde el ltimo elemento que sigue el flujo normal del documento. El origen es la posicin natural que tendra en caso de no estar posicionados. bsicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la distancia en horizontal a la que estar situada la capa. Se utilizan medidas de longitud. Define el borde de la capa sirve para indicar qu capas se ven encima de qu otras. Sirve para indicar la posicin que tendrn las distintas capas de la pgina. Dicho de otra forma, con z-index podemos decir qu capas se vern encima o debajo de otras, en caso de que estn superpuestas. El atributo z-index toma valores numricos y a mayor z-index, ms arriba se ver la pgina. Los valores que toma son: 0 y 1. sirve para recortar una capa y hacer que partes de ella no sean visibles. Es decir, permite definir el rea que se podr ver dentro de la capa. De esta manera se pueden recortar determinadas reas (trozos) de la capa y que no se puedan ver. El cliping se indica por medio de 4 valores, con esta sintaxis. rect (<top>, <right>, <bottom>, <left>) Los valores
Top:
Left:
Border: z-index:
clip:
Pg. 21
<top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar en este esquema Visibility: define si la capa es visible o no, es decir, indica si la capa se puede ver en la pgina o permanece oculta al usuario. Este atributo puede tener tres valores

visible: sirve para indicar que la capa se podr ver. hidden: indicar que la capa est oculta. inherit: es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde est metida la capa en cuestin. Si la capa no est metida dentro de ninguna otra se supone que est metida en la capa documento, que es toda la pgina y que siempre est visible.
11. FRAMES
Los frames, o tambin llamados marcos, permiten partir la ventana del navegador en diferentes reas. Cada una de estas reas son independientes y han de ser codificadas con archivos HTML tambin independientes. Como resultado, cada frame contiene las propiedades especficas que le indiquemos en el cdigo HTML a presentar en ese espacio. As mismo, y dado que cada marco es independiente, tendrn sus propias barras de desplazamiento, horizontales y verticales, por separado. La creacin de una pgina con frames se realiza con las etiquetas <FRAMESET> y <FRAME>. Adems, la pgina web que contiene la definicin de frames, no puede contener otra cosa salvo la propia definicin de los frames. La etiqueta <FRAMESET> indica las particiones de la ventana del navegador y la etiqueta .- Propiedades de los frames .- Atributos de le etiqueta <FRAMESET>: Rows: indica la forma de partir la ventana en filas. El valor de este atributo indica el nmero de filas y el tamao que ocupa cada una. Esto se indica con una lista de nmeros separados por comas. Si uno de los valores es * significa que ocupa el resto de la pgina que quede libre. Los tamaos pueden indicarse en porcentaje o en pxeles. indica la forma de partir la ventana en columnas. El valor de este atributo indica el nmero de columnas y el tamao que ocupa cada una. Esto se indica con una lista de nmeros separados por comas. Si uno de Pg. 22
Cols:
los valores es * significa que ocupa el resto de la pgina que quede libre. Los tamaos pueden indicarse en porcentaje o en pxeles. Frameborder Border: Bordercolor: Especifica si el frame tiene borde. Sus valores son yes, no. Especifica el tamao del borde. Especifica el color del borde.
Framespacing Indica los mrgenes de los frames. Ejemplo de la definicin de un Frame: <frameset rows="50%,10,*" framespacing="0" frameborder="yes" border="2" bordercolor="#FF0000"> Este ejemplo define un conjunto de dos frames colocados en filas, donde el primero ocupa el 50% de la pantalla, el segundo ocupa 10 pxeles y el ltimo ocupa el resto de la pantalla. Adems, tiene borde con una anchura de 2 y un color Rojo. La etiqueta <FRAME> indica cada uno de los frames cul ser la pgina web que se colocar en su interior. .- Atributos de le etiqueta <FRAME>: Src: name: Indica el archivo que contiene la pgina web que se va a mostrar dentro del frame. Nombre del frame
frameborder: Especifica si el frame tiene borde. Sus valores son yes, no. border: Indica la anchura del borde.
marginwidth Indica los mrgenes laterales marginheight Indica los mrgenes superior e inferior. bordercolor Especifica el color del borde
Si se pretende incluir varios frames dentro de otro frame, la pgina web del frame deber apuntar a una pgina web que a su vez define nuevos frames. Para ilustrar todo lo que venimos explicando podemos ver el ejemplo sobre cmo se creara la definicin de frames de la siguiente imagen.
<HTML> <HEAD> <TITLE>DEFINICIN DE FRAMES</TITLE> </HEAD>
Pg. 23
<FRAMESET ROWS="50%,10,*" FRAMESPACING="0" FRAMEBORDER="YES" BORDER="2" BORDERCOLOR="#FF0000"> <FRAME NAME="SUPERIOR" SRC="PAGINA1.HTML"> <FRAME NAME="MEDIO" SRC="PAGINA2.HTML"> <FRAME NAME="INFERIOR" SRC="PAGINA3.HTML"> </FRAMESET> </HTML> .
SUPERIOR ( 50% )
MEDIO ( 10 PIXELES) SUPERIOR ( RESTO) ATENCIN: La pgina que define los frames no debe contener la etiqueta <BODY>. .- Enlaces a frames Los enlaces tiene un atributo especial que permite abrir la pgina web indicada en un frame especfico, este atributo se llama TARGET. Los valores que puede tomar este atributo son los nombres de los frames. Adems puede tener los siguientes valores adicionales: _self: _blank: _parent: Abre la pgina web en el mismo marco donde est el enlace. Abre la pgina web en una nueva ventana del navegador. Abre la pgina web en el frame padre
Ejemplo de un enlace dirigido hacia el frame llamado Inferior: <A href="WWW.UNEX.ES" target="INFERIOR">Acceder la Universidad de Extremadura</A> Si se coloca este enlace en la PAGINA3.HTML, el usuario ver la pgina web de la Universidad de Extremadura en el frame inferior justo cuando pulse sobre el enlace.
Pg. 24
12 IFRAMES
Los iframes son frames especiales que pueden ser colocados en cualquier lugar de una pgina web. A diferencia de los frames tradicionales que deben seguir una estructura para poder ser colocados en la pgina web, este tipo de frames pueden ser colocados de manera individual y sin necesidad de organizar ningn tipo de estructura.
Pg. 25
ANEXO. LISTA DE ETIQUETAS HTML <HTML> <HEAD> <BODY> <TITLE> <P> <H1> ... <H6> <FONT > <HR> <BR> <B> <STRONG> <I> <EM> <U> <STRIKE> <UL> <LI> <OL> <DL> <DT> <DD>  <A HREF="> <A NAME=""> <IMG> <TABLE> <TR> <TD> <TH> <FORM> <INPUT TYPE="TEXT"> <INPUT TYPE="PASSWORD"> <TEXTAREA> <SELECT> <OPTION> <INPUT TYPE="RADIO"> Pgina Web Definiciones Cuerpo del documento Ttulo de la pgina web Salto de prrafo Tamaos de letra Atributos del texto Lnea horizontal Separacin de prrafos Letra Negrita Letra Realzada Letra Itlica Letra con nfasis Letra Subrayada Letra Tachada Lista desordenada Apartado de una lista Lista Ordenada Lista de definicin Trmino a definir en una lista Definicin de trmino en una lista Comentarios Enlace Marca Imagen Tabla Fila de una tabla Celda de una tabla Cabecera de una tabla Formulario Caja de Texto Texto Oculto rea de texto Lista de opciones Opcin de una lista de opciones Botn de radio
Pg. 26
<INPUT TYPE="CHECKBOX"> <INPUT TYPE="SUBMIT"> <INPUT TYPE="RESET"> <INPUT TYPE="BUTTON"> <DIV> <FRAMESET> <FRAME> <IFRAME>
Caja de validacin Envo de formulario Vaciado de formulario Botn genrico Capa Particin en frames Definicin de un frame Definicin de un iframe
Pg. 27
Pg. 28
Pg. 29
Pg. 30
1. INTRODUCCIN
CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnologa que nos permite controlar la apariencia de una pgina web y permiten describir cmo los elementos dispuestos en la pgina son presentados al usuario. Con CSS podemos especificar estilos como el tamao, fuentes, color, espaciado entre textos y recuadros as como el lugar donde disponer texto e imgenes en la pgina. Hay que tener en cuenta que la forma en que los diferentes navegadores interpretan CSS puede diferir. Incluso existen algunas caractersticas que pueden funcionar en unos navegadores y no en otros. Adems, la misma caracterstica puede que se necesite definir de forma diferente segn el tipo de navegador. Todo esto es debido a que aunque las caractersticas de CSS son lo ms estndar posible, cada compaa ha interpretado de forma diferente la forma de definir algunas caractersticas CSS. Para hacer que el cdigo CSS de la pgina web sea los ms estndar posible y funcione en todo tipo de navegadores, en el presente tutorial se explicarn los casos en los que puede existir diferencias en la definicin de la caracterstica o en su funcionamiento dependiendo del navegador.
2. DEFINICIN DE ESTILOS
Para indicar en HTML un estilo determinado, se aade una nueva propiedad llamada style a una etiqueta HTML. La sintaxis para definir un estilo a una marca HTML es la siguiente: <etiqueta style=propiedad:valor;propiedad:valor;.> Por defecto, todo navegador tiene un estilo definido para cada marca HTML, lo que se hace con la propiedad style es redefinir el estilo por defecto. Cuando se definen estilos directamente en las marcas HTML, hay que tener en cuenta que el estilo se aplica nicamente a la marca donde se inicializa la propiedad style, es decir, si tenemos dos prrafos <p>, deberemos definir la propiedad style para cada uno de ellos: <p style="color:#ff0000;background-color:#ffff00">Primer prrafo <p style="color:#ff0000;background-color:#ffff00">Segundo prrafo Como se puede observar, aunque los dos estilos son exactamente iguales, es obligatorio definirlos para cada marca HTML. El problema del concepto anterior donde era necesario crear un estilo similar para la marca <p>, se puede resolver de forma ms adecuada empleando la definicin de estilos a nivel de pgina. Si se pretende definir reglas de estilo para una sola pgina completa, podemos usar, las etiquetas <style></style> en la cabecera (dentro de <head></head>). Pg. 31
La etiqueta style tiene el atributo type, que permite al navegador identificar el tipo de instrucciones que siguen. El valor que debe tomar esta propiedad estext/css. Dentro de style se pueden incluir cualquier nmero de definiciones de estilo. Se puede observar que en la cabecera de la pgina se define la seccin: <style type="text/css"> P {color:#ff0000;background-color:#ffff00} </style> El cdigo de este ejemplo indica que en todos los lugares de esta pgina donde se utilice la marca <p>, se debe aplicar como estilo de color rojo y fondo amarillo. Se pueden definir estilos para todas las etiquetas HTML. .- Agrupacin de varias marcas HTML con una misma regla de estilo. Las reglas de estilo pueden ser agrupadas, para ello, se colocan entre comas todas aquellas etiquetas HTML que tiene el mismo estilo, seguido de la definicin del estilo. Esta caracterstica nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML. .- Definicin de mltiples estilos para una misma marca HTML Es posible definir una serie reglas comunes para un conjunto de etiquetas HTML, y ms tarde aadir nuevos estilos de manera individual a estas mismas etiquetas. Con esto se consigue inicialmente establecer un estilo comn que ms tarde pueda ser especializado para cada uno de los diferentes elementos de la pgina web.
3.- DEFINICIN DE ESTILOS DE LAS FUENTES DE TEXTO

.- font-family Esta propiedad permite definir el tipo letra. Se pueden definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto se hace separando por coma todas las fuentes (se eligen de izquierda a derecha). Algunas de las fuentes ms comunes que puede acceder el navegador son: Arial, Arial Black, Arial Narrow, Courier New, Georgia, Impact, Tahoma, Times New Roman Verdana. En caso que la fuente no est disponible el navegador selecciona el estilo por defecto para esa marca HTML. As por ejemplo: body {font-family:"Arial",Times New Roman } ,. font-size Determina el tamao de la fuente. Los valores pueden especificarse indicando el tamao de la fuente con su valor en unidades: cm, in, pt, px. Hay varias medidas para indicar el tamao de la fuente, en el Anexo adjunto al tutorial, se pueden comprobar estas medidas.
Pg. 32
body {font-size: 30 } Ambas propiedades pueden ser indicadas separndolas por punto y coma, tal y como muestra el siguiente ejemplo. body {font-family:Arial;font-size: 30 } .- font-style Permite elegir como valor un tipo de fuente normal , italic o oblique . El valor normal visualiza una letra normal. El valor italic visualiza letra en cursiva . El valor oblique visualiza una fuente an ms inclinada que la cursiva. La diferencia entre italic y oblique pasar desapercibida en la mayor parte de las fuentes. .- font-weight El valor 'font-weight' determina el grosor de la fuente:
Valores: normal, bold
.- font-variant Define si la fuente se muestra en maysculas tipo normal o pequeas. Los valores:

normal: son letras normales small-caps. Son letras maysculas de un tamao mas pequeo que el normal. Si el tipo de fuente seleccionado no tiene versin smalls-caps, el navegador visualizar el texto en maysculas ordinarias.
4. PROPIEDADES RELACIONAS CON EL TEXTO

.- color: Permite definir el color del texto, lo podemos indicar de varias formas: por su nombre (red), por el valor rgb (255,0,0 ),por medio de tres valores hexadecimales que indican la mezcla de rojo, verde y azul (#ff0000) y con un porcentaje entre 0% y 100% para cada componente: background-color:rgb(100%,0%,0%) Ejemplos de nombres: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red silver teal white yellow .- text-decoration Permite decorar el texto (que aparezca subrayado, tachado o una lnea en la parte superior). Los valores posibles de esta propiedad son:

none: sin subrayado (muy til para quitar el subrayado a los enlaces) underline : subrayado debajo overline :subrayado en la parte superior. line-through : tachado
Pg. 33
El color de la lnea de subrayado, es tomado del color del texto. Utilizando esta propiedad, es posible eliminar el subrayado de los enlaces. .- text-indent: Sangra la primera lnea de un bloque. A partir de la segunda lnea, el texto aparece sin sangrar. Los valores admitidos son unidades de longitud. Podemos indicar un valor negativo con lo que la sangra es hacia la izquierda. .- text-transform: Permite cambiar el texto a maysculas o minsculas. Puede inicializarse con alguno de los siguientes valores:

capitalize: Dispone en maysculas el primer carcter de cada palabra. lowercase: Convierte a minsculas todas las letras del texto. uppercase: Convierte a maysculas todas las letras del texto. none: No provoca cambios en el texto.
.- letter-spacing: Permiten indicar el espacio que debe haber entre los caracteres (utiliza unidades de longitud (puntos, pixeles,cm.). .- word-spacing : Permite indicar el espacio que debe haber entre las palabras (utiliza unidades de longitud: puntos, pixeles,cm.)
5. HERENCIA DE PROPIEDADES DE ESTILO.

Todas las etiquetas HTML que estn contenidas dentro de otras etiquetas HTML heredan sus estilos. As por ejemplo si se define un estilo en la etiqueta <body>, todas las etiquetas que es incluyan dentro, heredarn el estilo. Ahora bien, si no se requiere heredar alguna caracterstica, sta deber ser redefinida.
6.- DEFINICIN DE UN ESTILO EN FUNCIN DEL CONTEXTO

Este otro recurso que posee las CSS, es la definicin de un estilo para una marca HTML siempre y cuando esta marca est contenida en otra marca. Slo en ese caso el estilo para dicha marca se activar.
Pg. 34
7.- DEFINICIN DE HOJAS DE ESTILO EN UN ARCHIVO EXTERNO

La metodologa ms empleada para la definicin de estilos es la inclusin de una hoja de estilo en un archivo separado que deber tener la extensin css. Este archivo contendr las reglas de estilo que estarn separadas del archivo HTML. Para indicar el archivo de estilos externo, debemos agregar en la cabecera (head) del archivo HTML la siguiente marca: <link rel="StyleSheet" href="Fichero.css" type="text/css"> La propiedad href hace referencia al archivo donde se encuentran almacenados los estilos. La propiedad type, indica al navegador cual es el formato de archivo (una hoja de estilo en cascada normal). El atributo rel se usa para definir la relacin entre el archivo enlazado y el documento HTML.
8.- DEFINICIN DE ESTILOS POR MEDIO DE CLASES

En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML, en esos casos conviene plantear una regla de estilo con un nombre genrico que posteriormente se puede aplicar a varias marcas de HTML. Para definir una clase se debe empezar con el carcter punto y seguidamente un nombre de clase y dentro se definen las reglas de estilo(El nombre de la clase no puede comenzar con un nmero). Para indicar que una marca sea afectada por esta regla se indica la palabra class= y el nombre de la clase entre comillas. .clase{........}
9.- DEFINICIN DE ESTILOS POR MEDIO DE ID

Los ID funcionan de forma similar a las clases, pero estn limitados a su utilizacin con un solo elemento (una sola marca de HTML). La diferencia fundamental entre utilizar un identificador (ID) o una clase para definir un estilo, es que mediante un ID estamos identificando algn elemento de la pgina de forma unvoca, y por tanto slo debemos utilizarlo con ese elemento. Mientras que con una clase, estamos definiendo un estilo genrico que luego podremos utilizar sobre cualquier elemento de HTML. Utilizamos el carcter numeral (#) para indicar que se trata de un estilo de tipo Id. #Id{........}
Pg. 35
10.- PROPIEDADES RELACIONADAS CON LOS BLOQUES

Los navegadores visualizan los documentos HTML en su ventana principal, tratando cada elemento que forma el documento como un bloque. El bloque principal es el formado por las etiquetas <body>< /body>. Cuando el navegador visualiza un documento HTML, crea un bloque para el elemento BODY. Este bloque a su vez contiene todas los bloques creados por las etiquetas HTML (Por ejemplo, p, h1, h2..., pre, ul, div etc), que son visualizadas una a continuacin de otra. Es decir, cada etiqueta HTML que genera un bloque en el documento. El navegador visualiza estos elementos como rectngulos (box) segn un orden, y mostrando unas distancias entre ellos predeterminadas por unas reglas que se pueden manejar mediante hojas de estilo. Estructura del bloque

En el centro del bloque est el contenido, es decir, el texto o elementos que se visualizan. Alrededor del contenido hay un rea llamada 'padding' , que se extiende hasta el borde. El borde (' border' ) es la lnea que separa el contenido y el rea de padding de los mrgenes. Los mrgenes (' margin' ) son los espacios entre los bordes de la bloque o box, y los bordes de otros bloques que pueda haber alrededor. Los mrgenes se sitan fuera de los bordes, y son, pues la parte mas exterior del bloque.
Los mrgenes, bordes o padding pueden tener un valor 0, en cuyo caso no se visualizan. El valor (ancho) de los mrgenes, padding y bordes puede ser diferente en cada lado de la bloque. En la imagen siguiente se muestra cada uno de estos elementos dentro de un bloque.
Las propiedades relacionadas con los bloques son:
Margin (mrgenes) El margen es el espacio que est despus del borde. Los valores pueden expresarse en cualquiera de las unidades admisibles en CSS1: px, pt.... Los mrgenes son transparentes, no recogen el background de su
Pg. 36
elemento, sino el del fondo. Simplemente se aade un espacio vaco alrededor del elemento. Las cuatro propiedades que controlan los mrgenes alrededor de un elemento son: margin-top, margin-bottom, margin-left, margin-right.
padding: Padding es el espacio entre el contenido y el borde de la bloque. Al igual que con los mrgenes, se pueden usar unidades de longitud o porcentajes. Los valores que pueden tomar son: padding-top, padding-bottom, padding-left, padding-right border: Todo objeto HTML tiene un borde, que normalmente no se visualiza y tiene un valor fijo que determina el propio navegador. Sabemos que el borde es la lnea que separa los mrgenes del padding. Hay tres caractersticas esenciales de los bordes que pueden ser definidas: color, estilo o anchura (border-color, border-style y border-width), cuyos valores podrn ser distintos para cada uno de sus cuatro lados. o Border-color (color del borde). El color se puede asignar de cualquiera de las formas vistas en apartados anteriores. Podemos modificar independientemente cada uno de los cuatro bordes del rectngulo. Contamos con las siguientes propiedades: border-top-color border-rightcolor border-bottom-color border-left-color. o Border-width (anchura) los valores son thin, medium y thick. Se pueden usar porcentajes, o indicar unidades de medida. o Border-style (estilo del borde) los valores son: none, dotted, dashed, solid, double, groove, ridge, inset, outset. El valor inicial es none.
Esta caracterstica puede no ser soportada por los distintos navegadores. El estilo del borde se puede asignar con la propiedad reducida border-style, o para cada lado:. border-top-style border-right-style border-bottom-style border-left-style
11.- MANIPULAR
Existen en CSS diferentes propiedades que sirven para manipular los elementos. Estas propiedades permiten hacer un elemento visible o invisible, colocarlo en un lugar determinado de la pantalla o incluso recortarlo. A continuacin se definen cada una de estas propiedades. .- Posicionamiento La propiedad position determina el punto de referencia donde se debe localizar cada elemento HTML. Los valores que puede tomar son:
static:. cada elemento HTML se localiza de izquierda a derecha y de arriba hacia abajo (es el valor por defecto). Este es el posicionamiento que tiene cualquier elemento HTML. relative: En caso de fijar la propiedad position con el valor relative, podemos modificar la posicin por defecto del elemento HTML modificando los valores left y top (con valores positivos o inclusive negativos). El posicionamiento relativo siempre ser relativo al elemento anterior.
Pg. 37
absolute: El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la pgina. La posicin absoluta no depender de ningn otro elemento que se encuentre en la pgina.
Una vez indicado el tipo de posicionamiento, para colocar el elemento en una posicin, se utilizan las siguientes propiedades:

left: Permite definir la posicin horizontal del elemento. Indica la distancia con respecto a la izquierda. top: Permite definir la posicin vertical del elemento. Indica la distancia con respecto .a la parte superior
.- Visibilidad Este atributo permite indicar si la capa (<div>) se verse en la pgina o permanece oculta al usuario. Este atributo puede tener tres valores:

visible: sirve para indicar que la capa se podr ver. hidden: indicar que la capa est oculta. inherit: es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde est metida la capa en cuestin. Si la capa no est metida dentro de ninguna otra se supone que est metida en la capa documento, que es toda la pgina y que siempre est visible.
.- Dimensin Existen dos propiedades fundamentales que nos permiten fijar el ancho y el alto de una marca HTML:

width: Permite definir la anchura del elemento. height: Permite definir la altura del elemento.
.- Overflow Overflow sirve indicar qu es lo que debe hacer con el contenido que no cabe dentro de una capa (<div>), segn las dimensiones que se le han asignado. Los valores que puede tomar este atributo son:
visible: Este valor indica que se debe mostrar todo el contenido de la capa, aunque no quepa en tamao. En Internet Explorer ocurre que capa crece en tamao lo suficiente para que quepa todo el contenido que hemos colocado dentro. En Firefox ocurre que la capa tiene el tamao marcado, pero el contenido se sigue viendo, aunque fuera del espacio donde de la capa, pudiendo superponerse a un texto o imagen que hubiera debajo. El contenido no se recorta en caso alguno, es decir, siempre estar visible. hidden: Este valor indica que los contenidos que, por el tamao de la capa, no quepan en la misma, se deben recortar. Por ello, la capa tendr siempre el tamao configurado, pero los contenidos en ocasiones podrn no verse por completo.
Pg. 38
scroll: Este valor indica que la capa debe tener el tamao que se haya configurado inicialmente y que adems se deben mostrar unas barras de desplazamiento, para mover el contenido de la capa dentro del espacio de la misma. Las barras de desplazamiento siempre salen, se requieran o no. auto: Con este valor tambin se respetarn las dimensiones asignadas a una caja. El contenido ser recortado, pero aparecern las barras de desplazamiento para moverlo. Sin embargo, en este caso las barras de desplazamiento podrn salir o no, depende de si son necesarias o no para ver todo el contenido de la capa.
.- Recorte Atributo clip es un atributo que sirve para recortar determinadas reas de la capa. Una capa que est visible se puede recortar para que no se vea algn trozo de sta. El cliping se indica por medio de 4 valores, con esta sintaxis. Para que funcione es obligatorio que la posicin de la capa sea Absolute. rect (<top>, <right>, <bottom>, <left>) Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar en este esquema:
.- Orden de visualizacin La propiedad z-index sirve para especificar el orden de los elementos en el eje z, o dicho de otra forma, qu elementos van encima de otros. Solamente funciona cuando se ha definido en la misma regla la propiedad position, con los valores absolute o relative. Los valores de la propiedad z-index son los siguientes:

auto: la posicin asignada por defecto. nmero: en este caso el valor es un nmero entero, todo lo grande que se quiera, que podr ser positivo o negativo.
Para que un elemento quede por encima de otro, el valor de su z-index ha de ser mayor.
Pg. 39
.- Transparencia La transparencia permite indicar que un elemento puede dejar visualizar los elementos que estn detrs. Adems, es posible indicar el grado de transparencia que tiene un elemento. La propiedad para indicar la transparencia es diferente segn el navegador que se utilice.
Interner Explorer: La transparencia se indica con dos propiedades o filter: indica el tipo de filtro. El valor Alpha indica el tipo de filtro utilizado para la transparencia o opacity: es el grado de transparencia indicado con un valor entre el 0 y el 100. Mozilla: la propiedad se llama opacity. Almacena valores decimales entre 0 y 1, e indica el grado de transparencia
Para darle valores a esta propiedad slo se van a dar valores que puedan ser interpretados por ambos navegadores. As, en Internet Explorer se usar slo el filtro Alpha. Adems, para que un estilo con transparencia funcione en ambos navegadores, habr que indicar ambos mtodos en el estilo. .- Display Esta propiedad indica el tipo de caja en la que se encuentra un elemento. Algunos de los valores que puede tomar esta propiedad son:

none: no existe ninguna caja. inline la caja se comporte de manera en lnea. block: la caja se comporte como un bloque .
12. PROPIEDADES RELACIONADAS CON EL FONDO

Las propiedades relacionadas con el color del fondo son las siguientes:

background-color:: Se puede aplicar un color a cualquier elemento HTML. Se puede especificar color, o asignar un valor 'transparent'. background-image: Se puede especificar una imagen de fondo, indicando su direccin por medio de una url, o sealar que no hay ninguna (none). Para indicar un archivo, se debe poner la instruccin url(archivo). background-repeat: Permite determinar si la imagen de fondo ha de repetirse (si no ocupa toda el bloquea), y la forma de hacerlo. Los valores son: repeat repeatx repeat-y no-repeat o repeat: la imagen se repetir horizontal y verticalmente. o repeat-x, repeat-y: hacen que la imagen se repita horizontal o verticalmente, respectivamente, creando una banda de imgenes de un lado a otro. o no-repeat: la imagen no se repite
Pg. 40
background-position: Controla la ubicacin de la imagen. Para que tenga sentido esta propiedad debemos inicializar la propiedad background-repeat con el valor no-repeat. Se debe indicar la posicin horizontal (left, center, right) y la posicin vertical (top, center, bottom). Ambos valores se indicarn en este orden y separados por un espacio en blanco. Tambin se pueden utilizar otras medidas como porcentajes o pxeles. background-attachment: Si se especifica una imagen de fondo, el parmetro 'background-attachment' especifica si permanecer fija o acompaar al contenido si deslizamos la pgina con la barra de scroll. Los valores son: Scroll: se mueve la imagen y el texto, Fixed: la imagen permanece fija y slo se mueve el texto.
13.- PROPIEDADES RELACIONADAS CON LAS LISTAS

Las listas se utilizan para enumerar una serie de elementos, se utiliza la marca HTML ul (Unordered List), y cada item de la lista con la marca HTML li (List Item). Las CSS nos permiten configurar las las listas por medio de tres propiedades: list-style-type list-styleposition list-style-image. Los valores permitidos son los siguientes:
Los valores de list-style-type: none disc circle square decimal decimal-leadingzero lower-roman (nmeros romanos minsculas) upper-roman (nmeros romanos maysculas) lower-alpha (letras minsculas) upper-alpha (letras maysculas) Los valores de list-style-position: inside: muestra texto dispuesto directamente bajo el delimitador de la lista. outside (valor por defecto): el texto se alinea bajo el primer carcter de la lista, que est a la derecha del delimitador. Los valores de list-style-image: none url
14. PROPIEDADES RELACIONADAS CON LAS TABLAS

La propiedades para tablas son:

caption-side: Indica la posicin del ttulo con respecto a la tabla. Los valores que puede tomar son: Top, bottom, Left, Right border-collapse: Esta propiedad determina como deben mostrarse los bordes de elementos contiguos de las tablas. Admite dos valores: collapse y separate. o collapse indica que los bordes contiguos se solapan, mostrando uno solo. o separate muestra los dos bordes contiguos con unos pxeles de separacin border-spacing: Esta propiedad determina el espacio entre celdas contiguas en la tabla. Posible valor es una unidad o dos unidades de medida. Si pasamos una sola unidad de medida, todos los lados de cada celda la usaran para su separacin. Si pasamos dos unidades de medida el primero se usa para la separacin horizontal entre celdas y el segundo para la separacin vertical.
Pg. 41
Empty-cells: Por defecto una tabla HTML no dibuja las celdas que estn en blanco. La visualizacin de las celdas vacas se regula con la propiedad emptycells. Los valores que admite son: o show :se dibujan los bordes y fondos como en las celdas normales. o hide en cuyo caso los bordes o fondos no se dibujan alrededor de las celdas vacas.
15.- PSEUDOCLASES
Las pseudoclases son unas clases especiales, que se refieren a algunos estados especiales del elemento HTML, las que se utilizan fundamentalmente son las que se aplican a la marca <a> (ancla). La sintaxis vara con respecto al concepto de clase visto anteriormente: a:pseudoclase { propiedad: valor;} Para la marca HTML <a> existen las siguientes pseudoclases:

link :Enlace sin visitar visited :Enlace visitado hover :Enlace que tiene la flecha del mouse encima active :Es la que tiene foco en ese momento.
Es importante hacer notar que el orden en que se definen las pseudoclases es fundamental para su funcionamiento (debe respetarse el orden: link-visited-hoveractive)
16- CURSOR
La propiedad cursor tiene por objetivo definir el cursor a mostrar cuando la flecha del mouse se encuentra sobre cualquier elemento de nuestra pgina Su sintaxis es la siguiente: estilo {cursor: tipo} Los tipos de cursores son los siguientes:

auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize
Pg. 42

sw-resize s-resize w-resize text wait progress help
17.- FLOAT
El Esta propiedad permite definir el tipo de colocacin que tiene un elemento. Un elemento posicionado mediante la propiedad float, se desplaza hasta la zona ms a la izquierda o ms a la derecha de la lnea en la que se debera mostrar si no se desplazara. Los elementos colocados con float, se muestran de manera independiente al resto de los elementos de la pgina web. Esta propiedad admite tres valores: left, right, none.
Pg. 43
Pg. 44
Pg. 45
Pg. 46
1. INTRODUCCIN
JavaScript es un lenguaje interpretado, es decir, el cdigo ser ejecutado en el ordenador del usuario lnea a lnea. Son los navegadores los que interpretan (y por tanto ejecutan) los programas escritos en JavaScript. Las dos principales caractersticas de JavaScript son, por un lado, que es un lenguaje basado en objetos (es decir, el paradigma de programacin es bsicamente el de la programacin dirigida a objetos, pero con menos restricciones), y, por otro, JavaScript es un lenguaje orientado a eventos. Esto implica que gran parte de la programacin en JavaScript se centra en describir objetos (con sus variables de instancia y mtodos de "clase") y escribir funciones que respondan a movimientos del ratn, pulsacin de teclas, apertura y cerrado de ventanas o carga de una pgina, entre otros eventos. Ante todo no es un lenguaje de propsito general. No permite un control absoluto sobre los recursos del ordenador. Cada programa en JavaScript normalmente, solo tiene acceso al documento HTML en el que va inmerso y, si acaso, a las ventanas en las que se ejecuta el navegador dentro del cual se est ejecutando el programa en JavaScript.
2. INCORPORACIN DE JAVASCRIPT EN HTML

Los programas en JavaScript se ejecutan en el propio navegador y van literalmente escritos dentro de una pgina HTML, es decir, formando parte del propio cdigo HTML de dicha pgina; lo cual nos lleva a escribir el programa en JavaScript al mismo tiempo que creamos la pgina HTML. El cdigo Javascript puede incorporarse de diferentes maneras a una pgina HTML. .- Funciones bsicas Para probar cada una de estas tcnicas necesitamos conocer las siguientes funciones bsicas de Javascript:
Alert : Crea una caja de dilogo con un botn 'Aceptar' y un texto definido por el parmetro enviado a la funcin. alert("Mensaje");
Confirm : Crea una caja de confirmacin con los botones Aceptar y Cancelar y un texto definido por el parmetro enviado a la funcin. Devuelve true cuando el usuario abandona el dilogo pulsando Aceptar y false si lo hace pulsando Cancelar o se cierra la ventana. confirm("Mensaje")
Pg. 47
Prompt : Muestra un dilogo de campo de formulario con botones Aceptar y Cancelar, un texto definido por el primer parmetro enviado a la funcin y un input de texto con valor predeterminado definido por el segundo parmetro. La funcin devuelve el valor insertado en el campo de formulario si el usuario pulsa en Aceptar o null si pulsa Cancelar o cierra la ventana. prompt("Mensaje","valor inicial ")
.- Inclusin en etiquetas Script Esta es la forma ms usual para hacer uso de JavaScript en una pgina web. En pocas palabras, este mtodo consiste en poner el cdigo JavaScript anteponiendo al mismo la etiqueta <SCRIPT> y postponiendo la etiqueta </SCRIPT>. El uso de la etiqueta <SCRIPT> es idntico al de cualquier otra etiqueta. Adems, tiene el siguiente atributo:
LANGUAGE: establece la versin de JavaScript en la cual est escrita el programa. Los posibles valores para este atributo son: JavaScript, JavaScript 1.1, JavaScript 1.2, que son las diferentes versiones de Javascript
.- Inclusin en archivo externo Es posible definir aparte un fichero con el cdigo javascript y referenciarlo desde le fichero html. Es necesario que el fichero con el cdigo javascript tenga la extensin .js Esta forma de insertar el cdigo JavaScript es muy til porque no permite al usuario ver el cdigo JavaScript.
3. SINTAXIS
JavaScript toma su sintaxis de los lenguajes de programacin ms conocidos, fundamentalmente C, aunque tambin algo de Pascal.

JavaScript es sensible al contexto, o sea, que distingue maysculas de minsculas. Es un lenguaje orientado a eventos y basado en objetos. Lo cual significa que existen objetos, que tienen propiedades y mtodos Permite detectar eventos, es decir, pueden definir qu accin realizar cuando ocurre el evento
.- Variables En Javascript NO hay tipificacin de las variables, ni tampoco constantes. Por ende, tampoco se pueden definir nuevos tipos de variables. Para usar una variable slo tenemos que darle un valor con el signo =. Numero=100;
Pg. 48
cadena="Curso Programacion Web"; El punto y coma del final NO es realmente necesario si se separan las instrucciones en lneas distintas, como suele ser el caso. No obstante, si deseamos escribir varias de ellas en la misma lnea debemos usar el ; para separarlas. Las variables pueden ser declaras antes de usarlas, para ello es necesario anteponer al nombre de la variable la palabra var, as por ejemplo: var Numero; ..... Numero=100;
Los tipos de las variables son: numricas, cadenas, y booleanas (true, false). El tipo de la variable ser el del primer valor que se le asigne. En Javascript se intentan hacer conversiones de tipo siempre que haga falta. El mbito de las variables es siempre el ms amplio posible. Es decir, si usamos una variable fuera de cualquier funcin, desde ese momento estar disponible dentro de cualquier funcin como variable global. .- Operadores Operadores aritmticos + * / % ++ -Suma de dos valores Resta de dos valores Multiplicacin de dos valores Divisin de dos valores El resto de la divisin de dos nmeros Incremento en una unidad Decremento en una unidad
Operadores lgicos && || ! Y Lgico O Lgico Negacin
Pg. 49
Operadores condicionales == != > < >= <= Igualdad Distinto Mayor Menor Mayor igual: Menor igual
.- Sentencias secuenciales La asignacin se realiza con el operador = variable=expresin .- Sentencias condicionales
Si: La sintaxis de esta instruccin es la siguiente: If ( condicion ) { sentencias_true; } else { sentencias_false; }
Switch: La sintaxis de esta instruccin es la siguiente: switch( variable ) { case valor1 : sentencias; break; case valor2 : sentencias; break; case valor3 : sentencias; break; case valor4 : sentencias; break; default: sentencias; }
.- Sentencias iterativas
For: La sintaxis de esta instruccin es la siguiente: for( inicializacion; condicin; incremento ) { sentencias; }
While: La sintaxis de esta instruccin es la siguiente:
Pg. 50
while( condicion ) { sentencias; }
Do: La sintaxis de esta instruccin es la siguiente: do { sentencias; } while ( condicion );
.- Comentarios

Con // obtendremos comentarios hasta el final de la lnea. Con /* .... */ obtendremos comentarios de varias lneas.
.- Funciones La definicin de una funcin en Javascript se realiza de la siguiente manera:

Empieza por la palabra function Seguida del nombre de la funcin (que ser una nica palabra) Finalmente se indican los parmetros. Solo se indicarn los nombres de los parmetros separados por comas. La devolucin de un valor se realizar utilizando la instruccin return(valor) dentro de la propia funcin. Esta instruccin es opcional.
Las funciones de JavaScript reciben los argumentos por valor, es decir, que si la funcin cambia el valor de los parmetros recibidos, este cambio no se reflejar globalmente, sino que slo ser efectivo en el mbito de la propia funcin, ni siquiera si la misma funcin es llamada desde otro punto del programa function nombrefuncion (parametro1, parmetro 2,...){ instrucciones de la funcin return (0); } Para realizar la llamada a una funcin slo hay que indicar el nombre de la funcin seguida entre parntesis de los parmetros. Aunque no haya parmetros hay que seguir manteniendo los parntesis. Con el objetivo de agrupar todas las funciones en un lugar, normalmente se colocan antes de la etiqueta <BODY> utilizando las etiquetas <SCRIPT> ... </SCRIPT>. Funciones generales de JavaScript: eval La funcin eval tiene como argumento una expresin y devuelve el valor de la misma. Esta funcin resulta til para evaluar una cadena de caracteres que representa una expresin numrica.
Pg. 51
isNaN
Funcin que comprueba si el valor pasado por parmetros es numrico o no. El resultado de esta funcin es un booleano.
parseFloat Convierte una string a un nmero en punto flotante. Si se encuentra otros caracteres que no sean nmeros, el signo '+', el '-' o un exponente, devuelve el valor encontrado hasta ese punto. Del mismo modo, si el primer carcter no se puede convertir a nmero devolver cero. parseInt Convierte una cadena de caracteres de entrada a un nmero entero con una base especificada. Si se encuentra otros caracteres que no sean nmeros, el signo '+', el '-' o un exponente, devuelve el valor encontrado hasta ese punto. Del mismo modo, si el primer carcter no se puede convertir a nmero devolver cero.
4. Objetos
La Programacin Orientada a Objetos (POO) es una clase de programacin que define un programa como un conjunto de objetos relacionados entre s. Aunque el objetivo de este apartado no es explicar detalladamente la Programacin Orientada a Objetos, es necesario dar unos conocimientos breves. Las caractersticas fundamentales de la POO son las siguientes:

Un programa est formado por objetos Todo objeto pertenece a una clase. Para que se pueda entender, esto sera como similar a decir que todo objeto es de un tipo concreto Una clase es la definicin genrica de una entidad que posee un conjunto de propiedades y acciones. Las propiedades de un objeto definen su estado. Es como si dentro de objeto tuviramos un conjunto de variables que almacenan el estado del objeto Los mtodos son acciones que puede realizar un objeto. Normalmente sern funciones que se encuentran dentro del objeto. Para crear un objeto antes hay que definir su clase y luego indicar que el objeto pertenece a esa clase. Para ejecutar las acciones de un objeto se indica el nombre del objeto seguido de un punto y el nombre de la accin.
Existen en JavaScript varias clases diferentes. A continuacin se explicarn algunas de ellas. .- Cadenas Las cadenas de texto en JavaScript se pueden utilizar por medio de una clase espacial denominada String. Cuando se define un objeto de la clase String, contendr automticamente las siguientes propiedades y acciones: Propiedades:
Pg. 52
Length : La clase String slo tiene una propiedad: length, que guarda el nmero de caracteres del String.
Acciones de la clase String : charAt(indice) : Devuelve el carcter que hay en la posicin indicada como ndice. Las posiciones de un string empiezan en 0. indexOf(carcter,desde) : Devuelve la posicin de la primera vez que aparece el carcter indicado por parmetro en un string. Si no encuentra el carcter en el string devuelve -1. El segundo parmetro es opcional y sirve para indicar a partir de que posicin se desea que empiece la bsqueda. lastIndexOf(carcter,desde) : Busca la posicin de un carcter exactamente igual a como lo hace la funcin indexOf pero desde el final en lugar del principio. El segundo parmetro indica el nmero de caracteres desde donde se busca, igual que en indexOf. replace(substring_a_buscar,nuevoStr) : Sirve para reemplazar porciones del texto de un string por otro texto, por ejemplo, podramos utilizarlo para reemplazar todas las apariciones del substring "xxx" por "yyy". El mtodo no reemplaza en el string, sino que devuelve un resultante de hacer ese reemplazo. split(separador) : Sirve para crear un vector a partir de un String en el que cada elemento es la parte del String que est separada por el separador indicado por parmetro. substring(inicio,fin) : Devuelve el substring que empieza en el carcter de inicio y termina en el carcter de fin. Si intercambiamos los parmetros de inicio y fin tambin funciona. Simplemente nos da el substring que hay entre el carcter menor y el mayor. toLowerCase() : Pone todas los caracteres de un string en minsculas. toUpperCase() : Pone todas los caracteres de un string en maysculas. toString() : Este mtodo lo tienen todos los objetos y se usa para convertirlos en cadenas. .- Arrays La sintaxis para crear un array es la siguiente: var miArray = new Array(10) Esto provoca que se cree un array llamado miArray con 10 celdas. Para acceder a cada una de las celdas se utiliza la siguiente sintaxis: miArray[0] = 1; Propiedades:
Pg. 53
Length : Nmero de elementos del array.
Mtodos:

concat(): Une dos arrays y devuelve como resultado un array con la unin join(): Devuelve una cadena de texto que contiene la unin de los elementos del array pop(): Borra y devuelve el ltimo elemento de un array push(): Aade un elemento a un array y devuelve ese elemento reverse(): Refleja el contenido de un array (el primer elemento pasa a ser el ltimo) shift(): Borra y devuelve el primer elemento de un array slice(): Extrae una seccin de un array y la devuelve como un nuevo array: splice(): Aade y/o elimina elementos de un array sort(): Ordena los elementos de un array. Por defecto utiliza ordenacin lexicogrfica (alfabtica). toString (): Devuelve una cadena que representa al array unshift (): Aade uno o ms elementos al comienzo de un array y devuelve el nmero actualizado de elementos
Los arrays empiezan en la posicin 0 y terminan en la N-1. Los tipos de las celdas puede ser cualquier tipo simple de JavaScript .- Fecha Es posible obtener y manipular datos de tipo fecha a travs de las clase DATE de la siguiente manera. var Fecha= new Date() Mtodos:

getDate(): Devuelve el da del mes getDay(): Da de la semana getHours(): Devuelve la hora getMinutes(): Devuelve los minutos getMonth(): Devuelve el mes getSeconds(): Devuelve los segundos getTime(): Devuelve un valor numrico asociado al instante para la fecha especificada GetTimezoneOffset(): Devuelve el desfase horario (en minutos) del sistema local con respecto al meridiano cero GetYear(): Devuelve el ao. El formato utiliza dos dgitos para aos comprendidos entre 1900 y 1999. Para el resto utiliza cuatro dgitos. Parse(): Devuelve el nmero de milisegundos desde las 00 horas del 1 de enero de 1970 hasta el instante representado por la fecha que recibe como parmetro: SetDate(): Asigna el da del mes a un objeto Date setHours(): Asigna la hora setMinutes(): Asigna los minutos setMonth(): Asigna el mes setSeconds (): Asigna los segundos Pg. 54

setTime(): Asigna el valor del objeto Date setYear(): Asigna el ao toGMTString(): Convierte la fecha a cadena de texto, utilizando como referencia la hora del meridiano cero (GMT). toLocaleString(): Convierte la fecha a cadena de texto, utilizando como referencia la configuracin horaria del sistema. UTC: Devuelve el nmero de milisegundos desde las 00 horas del 1 de enero de 1970 hasta la fecha almacenada por el objeto Date.
,- Math Este objeto se utiliza para realizar operaciones matemticas Propiedades:

E: Constante de Euler. Base de los logaritmos neperianos (2.7818). LN10: Logaritmo neperiano de 10. Aprox. 2.302... LN2: Logaritmo neperiano de 2. Aprox. 0.693... LOG10E: Logaritmo en base 10 de E. Aprox. 0.434... LOG2E: Logaritmo en base 2 de E. Aprox. 1.442... PI: Constante PI SQRT1_2: Raz de 1/2. Aprox. 0.707... SQRT2: Raz de 2. Aprox. 1.442...
Mtodos:

abs(): Valor absoluto de un nmero acos(): Arco coseno de un nmero (en radianes) asin(): Arco seno de un nmero (en radianes) atan(): Arco tangente de un nmero (en radianes) Atan2(x,y): Angulo que forma el punto (x,y) con respecto al eje X ceil(): Entero inmediatamente superior del nmero cos(): Coseno de un ngulo expresado en radianes exp(): Funcin exponencial floor(): Entero inmediatamente inferior al nmero dado log(): Logaritmo neperiano de un nmero max(x,y): Devuelve el mayor de los dos nmeros min(x,y): Devuelve el menor de los dos nmeros pow(a,b): Devuelve 'a' elevado a 'b' random(): Devuelve un nmero pseudoaleatorio comprendido entre 0 y 1 round(): Redondea un nmero al entero ms cercano sin (): Seno de un ngulo expresado en radianes sqrt(): Raz cuadrada de un nmero tan(): Tangente de un ngulo expresado en radianes
Esta clase es especia,l ya que no es necesario crar un objeto de la clase Math para poder utilizarla.
Pg. 55
5.- EVENTOS
En JavaScript, la interaccin con el usuario se consigue mediante la captura de los eventos que ste produce. Un evento es una accin del usuario ante la cual puede realizarse algn proceso. Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos. Los eventos, para poder interrelacionar HTML con Javascript, no se definen en la marca <SCRIPT> (excepto en algn caso), sino que se insertan dentro de las marcas HTML: el navegador compatible con Javascript, al encontrarse con un evento, lo interpreta y lo activa La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, y su significado. Evento onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onload Descripcin Deseleccionar el elemento Elementos para los que est definido <button>, <input>, <label>, <select>, <textarea>, <body>
Deseleccionar un elemento que se ha <input>, <select>, <textarea> modificado Pinchar y soltar el ratn Todos los elementos Pinchar dos veces seguidas con el Todos los elementos ratn Seleccionar un elemento Pulsar una tecla (sin soltar) Pulsar una tecla Soltar una tecla pulsada La pgina completamente se ha cargado <button>, <input>, <label>, <select>, <textarea>, <body> Elementos de formulario y <body> Elementos de formulario y <body> Elementos de formulario y <body> <body> Todos los elementos Todos los elementos
onmousedown Pulsar (sin soltar) un botn del ratn onmousemove Mover el ratn onmouseout onmouseover onmouseup
El ratn sale del elemento (pasa Todos los elementos por encima de otro elemento) El ratn entra en el elemento (pasa Todos los elementos por encima del elemento) Soltar el botn que estaba pulsado en Todos los elementos el ratn
Pg. 56
onreset onresize onselect onsubmit onunload
Inicializar el formulario (borrar todos <form> sus datos) Se ha modificado el tamao de la <body> ventana del navegador Seleccionar un texto Enviar el formulario <input>, <textarea> <form>
Se abandona la pgina (por ejemplo al <body> cerrar el navegador)
.- Manejadores de eventos Un evento de JavaScript por s mismo carece de utilidad. Para que los eventos resulten tiles, se deben asociar cdigo JavaScript a cada evento. De esta forma, cuando se produce un evento se ejecuta el cdigo indicado, por lo que la aplicacin puede responder ante cualquier evento que se produzca durante su ejecucin. Las funciones o cdigo JavaScript que se definen para cada evento se denominan manejador de eventos y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores: Manejadores como atributos de los elementos HTML. En este mtodo, se incluyen a etiquetas HTML atributos con el nombre del evento que se quieren manejar. Manejadores como funciones JavaScript externas. La definicin de los manejadores de eventos en los atributos HTML es el mtodo ms sencillo pero menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente es que se complica en exceso en cuanto se aaden algunas pocas instrucciones, por lo que solamente es recomendable para los casos ms sencillos. Si se realizan aplicaciones complejas es aconsejable agrupar todo el cdigo JavaScript en una funcin externa y llamar a esta funcin desde el elemento HTML. .- Objeto Event JavaScript permite obtener informacin sobre el ratn y el teclado mediante un objeto especial llamado event. Desafortunadamente, los diferentes navegadores presentan diferencias muy notables en el tratamiento de la informacin sobre los eventos. La principal diferencia reside en la forma en la que se obtiene el objeto event. Internet Explorer considera que este objeto forma parte del objeto window, y en el resto de navegadores se debe pasar el objeto event a la funcin que controla el evento. Obtener el Evento En los navegadores tipo Internet Explorer, el objeto event se obtiene de la siguiente manera:
Pg. 57
var evento = window.event; Mientras que en el resto de navegadores, el objeto event se obtiene como argumento de la funcin donde se va a tratar el evento: function ComprobarEvento(Evento) { } Una funcin genrica para ambos navegadores sera la siguiente: function ComprobarEvento(Evento) { var e = Evento || window.event; } Para explicar esta funcin, hay que indicar que recordar que el operador || es la o lgica, y la funcin significa que, la variable e tomar el valor del parmetro Evento si no es nulo, en caso contrario tomar el valor del objeto event que est dentro de window. Datos del Evento: Una vez obtenido el objeto event, ya se puede acceder a toda la informacin relacionada con el evento, que depende del tipo de evento producido. La propiedad type indica el tipo de evento producido, lo que es til cuando una misma funcin se utiliza para manejar varios eventos: var tipo = e.type; La propiedad type devuelve el tipo de evento producido, que es igual al nombre del evento pero sin el prefijo on. .- Eventos de Teclado En el momento de pulsar una tecla, se producen tres eventos seguidos y en este orden: onkeydown, onkeypress y onkeyup. El evento onkeydown se corresponde con el hecho de pulsar una tecla y no soltarla; el evento onkeypress es la propia pulsacin de la tecla y el evento onkeyup hace referencia al hecho de soltar una tecla que estaba pulsada. La forma ms sencilla de obtener la informacin sobre la tecla que se ha pulsado es mediante el evento onkeypress. La informacin que proporcionan los eventos onkeydown y onkeyup se puede considerar como ms tcnica, ya que devuelven el cdigo interno de cada tecla y no el carcter que se ha pulsado. A continuacin se incluye una lista con todas las propiedades diferentes de todos los eventos de teclado tanto en Internet Explorer como en el resto de navegadores:

Evento keydown: o Propiedad keyCode: cdigo interno de la tecla Evento keypress: o Internet Explorer:
Pg. 58
Propiedad keyCode: el cdigo del carcter de la tecla que se ha pulsado o Resto de navegadores: Propiedad keyCode: para las teclas normales, no definido. Para las teclas especiales, el cdigo interno de la tecla. Propiedad charCode: para las teclas normales, el cdigo del carcter de la tecla que se ha pulsado. Para las teclas especiales, 0. Evento keyup: o Propiedad keyCode: cdigo interno de la tecla
.- Eventos de Ratn La informacin ms relevante sobre los eventos relacionados con el ratn es la de las coordenadas de la posicin del puntero del ratn. El origen de las coordenadas siempre se encuentra en la esquina superior izquierda. Para obtener las coordenadas del ratn se utilizan las siguientes propiedades:

clientX y clientY: Contienen las coordenadas del ratn con respecto a la ventana del navegador. screenX y screenY: Contienen las coordenadas del ratn con respecto a la pantalla.
6.- CONTROL DE FORMULARIOS

El control de los formularios se puede realizar con JavaScript. Por norma general este lenguaje se utiliza para validar la informacin que se introduce en un formulario antes de ser enviada.. Lo primero que se debe tener en cuenta es que un formulario se puede manejar como si fuera un objeto. El nombre del objeto que contiene el formulario es el nombre que se le haya dado al formulario. Cada elemento que contenga el formulario ser a su vez un nuevo objeto que estar contenido en el objeto que representa al formulario. Por lo general, se deben comprobar los datos antes de enviarlos. En lugar de tener un botn para enviar y otro para validar, se crea una solo que primero valide y luego enve la informacin. Este botn ser del tipo "button". Adems, se debe utilizar la accin submit() del objeto que representa el formulario. Esta accin provoca que el formulario se enve.
7. DOOM
La creacin del Document Object Model o DOM es una de las innovaciones que ms ha influido en el desarrollo de las pginas web dinmicas y de las aplicaciones web ms complejas. DOM permite a los programadores web acceder y manipular las pginas HTML como si fueran documentos HML.
Pg. 59
Los navegadores web transforman automticamente todas las pginas web en una estructura ms eficiente de manipular, ya que el formato texto es muy difcil de controlar. As pues, los navegadores leen el texto HTML de la pgina web, y transforman esta informacin en una estructura de datos. Esta estructura de datos tiene forma de Arbol y pueden encontrarse los siguientes nodos:
Cada vez que se carga una pgina en el navegador, el intrprete de JavaScript crea automticamente una serie de objetos que pueden ser usados al programar en JavaScript. De entre los distintos objetos destacan los siguientes: Window: Se trata del objeto ms alto en la jerarqua del navegador (navigator es un objeto independiente de todos en la jerarqua), pues todos los componentes de una pgina web estn situados dentro de una ventana. El objeto window hace referencia a la ventana actual. Navigator: contiene informacin acerca del navegador, tal como nombre, versin, tipos MIME soportados por el cliente y plugs-in instalados. Location: con informacin acerca del URL que estemos visualizando. History: historial en el que se guardan los URL ya visitados. Document: es el contenedor de todos los objetos que se hayan insertado en la pgina web: enlaces, formularios, imgenes o marcos.
Pg. 60
Frames: Matriz conteniendo los distintos objetos frame que puede contener una ventana. Cada frame es a su vez otra ventana. .- Objeto WINDOW Propiedades closed: Es un booleano que nos dice si la ventana est cerrada ( closed = true ) o no ( closed = false ). frames: Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno de los frames que contiene la ventana. Su orden se asigna segn se definen en el documento HTML. history: Se trata de un array que representa las URLS visitadas por la ventana (estn almacenadas en su historial). length: Variable que nos indica cuntos frames tiene la ventana actual. location: Cadena con la URL de la barra de direccin. name. Contiene el nombre de la ventana, o del frame actual. opener: Es una referencia al objeto window que lo abri, si la ventana fue abierta usando el mtodo open(). parent: Referencia al objeto window que contiene el frameset. self: Es un nombre alternativo del window actual. status: String con el mensaje que tiene la barra de estado. top: Nombre alternativo de la ventana del nivel superior. window: Igual que self: nombre alternativo del objeto window actual.
Mtodos alert(mensaje). Muestra ul mensaje en un cuadro de dilogo blur(): Elimina el foco del objeto window actual. clearInterval(id): Elimina el intervalo referenciado por 'id' (ver el mtodo setInterval(), tambin del objeto window. clearTimeout(nombre): Cancela el intervalo referenciado por 'nombre' (ver el mtodo setTimeout().
Pg. 61
close(): Cierra el objeto window actual. confirm(mensaje): Muestra un cuadro de dilogo con un mensaje y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar. focus():. Captura el foco del ratn sobre el objeto window actual. moveBy(x,y):. Mueve el objeto window actual el nmero de pixels especificados por (x,y). moveTo(x,y): Mueve el objeto window actual a las coordenadas (x,y). open(URL,nombre,caracteristicas):. Abre la URL que le pasemos como primer parmetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrir una ventana nueva en la que mostrar el contenido con las caractersticas especificadas. Las caractersticas que podemos elegir para la ventana que queramos abrir son las siguientes: toolbar = [yes|no|1|0]. Nos dice si la ventana tendr barra de herramientas (yes,1) o no la tendr (no,0). location = [yes|no|1|0]. Nos dice si la ventana tendr campo de localizacin o no. directories = [yes|no|1|0]. Nos dice si la nueva ventana tendr botones de direccin o no. status = [yes|no|1|0]. Nos dice si la nueva ventana tendr barra de estado o no. menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendr barra de mens o no. scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendr barras de desplazamiento o no. resizable = [yes|no|1|0]. Nos dice si la nueva ventana podr ser cambiada de tamao (con el ratn) o no. width = px. Nos dice el ancho de la ventana en pixels. height = px. Nos dice el alto de la ventana en pixels. outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. outerHeight = px. Nos dice el alto *total* de la ventana el pixels. left = px. Nos dice la distancia en pixels desde el lado izquierdo de la pantalla a la que se debe colocar la ventana. top = px. Nos dice la distancia en pixels desde el lado superior de la pantalla a la que se debe colocar la ventana.
Pg. 62
prompt(mensaje,respuesta_por_defecto): Muestra un cuadro de dilogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El parmetro 'respuesta_por_defecto' es opcional, y mostrar la respuesta por defecto indicada al abrirse el cuadro de dilogo. El mtodo retorna una cadena de caracteres con la respuesta introducida. scroll(x,y):. Desplaza el objeto window actual a las coordenadas especificadas por (x,y). scrollBy(x,y):. Desplaza el objeto window actual el nmero de pixels especificado por (x,y). scrollTo(x,y): Desplaza el objeto window actual a las coordenadas especificadas por (x,y). setInterval(expresion,tiempo): Evala la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). setTimeout(expresion,tiempo): Evala la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). .- Objeto LOCATION Propiedades: hash: Cadena que contiene el nombre del enlace, dentro de la URL. host: Cadena que contiene el nombre del servidor y el nmero del puerto, dentro de la URL. hostname: Cadena que contiene el nombre de dominio del servidor (o la direccin IP), dentro de la URL. href: Cadena que contiene la URL completa. pathname: Cadena que contiene el camino al recurso, dentro de la URL. port: Cadena que contiene el nmero de puerto del servidor, dentro de la URL. protocol: Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la URL. search: Cadena que contiene la informacin pasada en una llamada a un script, dentro de la URL.
Mtodos:
Pg. 63
reload(): Vuelve a cargar la URL especificada en la propiedad href del objeto location. replace(cadenaURL): Reemplaza el historial actual mientras carga la URL especificada en cadenaURL. .- Objeto HISTORY Propiedades: current:. Cadena que contiene la URL completa de la entrada actual en el historial. next: Cadena que contiene la URL completa de la siguiente entrada en el historial. length: Entero que contiene el nmero de entradas del historial (i.e., cuntas direcciones han sido visitadas). previous: Cadena que contiene la URL completa de la anterior entrada en el historial.
Mtodos back(): Vuelve a cargar la URL del documento anterior dentro del historial. forward(): Vuelve a cargar la URL del documento siguiente dentro del historial. go(posicion): Vuelve a cargar la URL del documento especificado por posicin dentro del historial. Posicin puede ser un entero, en cuyo caso indica la posicin relativa del documento dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte de una URL que est en el historial. .- Objeto NAVIGATOR Propiedades: appCodeName:. Cadena que contiene el nombre del cdigo del cliente. appName: Cadena que contiene el nombre del cliente. appVersion: Cadena que contiene informacin sobre la versin del cliente. language: Cadena de dos caracteres que contiene informacin sobre el idioma de la versin del cliente. mimeTypes: Array que contiene todos los tipos MIME soportados por el cliente. platform: Cadena con la plataforma sobre la que se est ejecutando el programa cliente. plugins: Array que contiene todos los plug-ins soportados por el cliente.
Pg. 64
userAgent: Cadena que contiene la cabecera completa del agente enviada en una peticin HTTP. Contiene la informacin de las propiedades appCodeName y appVersion.
Mtodos: javaEnabled(): Devuelve true si el cliente permite la utilizacin de Java, en caso contrario, devuelve false.
.- Objeto DOCUMENT Propiedades: alinkColor: Esta propiedad tiene almacenado el color de los enlaces activos anchors: Se trata de un array con los enlaces internos existentes en el documento applets: Es un array con los applets existentes en el documento bgColor: Propiedad que almacena el color de fondo del documento cookie: Es una cadena con los valores de las cookies del documento actual domain: Guarda el nombre del servidor que ha servido el documento embeds: Es un array con todos los EMBED del documento fgColor: En esta propiedad tenemos el color del primer plano forms: Se trata de un array con todos los formularios del documento. Los formularios tienen a su vez elementos (cajas de texto, botones, etc) que tienen sus propias propiedades y mtodos. images: Array con todas las imgenes del documento lastModified: Es una cadena con la fecha de la ltima modificacin del documento linkColor: Propiedad que almacena el color de los enlaces links: Es un array con los enlaces externos location: Cadena con la URL del documento actual referrer: Cadena con la URL del documento que llam al actual, en caso de usar un enlace. title: Cadena con el ttulo del documento actual Pg. 65
vlinkColor: Propiedad en la que se guarda el color de los enlaces visitados
Mtodos clear(): Limpia la ventana del documento open(): Abre la escritura sobre un documento. close(): Cierra la escritura sobre el documento actual write(): Escribe texto en el documento. writeln(): Escribe texto en el documento, y adems lo finaliza con un salto de lnea
.- Objeto FRAMES La ventana del navegador puede ser dividida en varios frames que contengan cada uno de ellos un documento en el que mostrar contenidos diferentes. Al igual que con las ventanas, cada uno de estos frames puede ser nombrado y referenciado, lo que nos permite cargar documentos en un marco sin que esto afecte al resto. Realmente, cada frame se representa con un objeto window, esto quiere decir que el objeto frame tiene todas las propiedades y mtodos del objeto window. Cuando una pgina web contiene frames, cada uno estar definido en un archivo diferente. Adems, la creacin de frames obliga a crear una estructura que permita indicar su organizacin dentro de la pgina web. Para acceder a los diferentes frames, se puede acceder al objeto Frames, que ser un array que contiene los frames de la pgina web. Supongamos que una pgina web tiene definido dos frames (frame 1 y frame 2). Esto quiere decir que su objeto Frames tendr dos entradas, una para cada frame. Si ahora desde el frame1 se quisiera acceder a frame 2, no se podra hacer directamente, ya que frame1 no conoce a frame2. Esto es as debido a que la organizacin de la estructura est en la pgina principal. La imagen siguiente muestra la estructura organizativa de este ejemplo.
Pg. 66
Si desde el Frame 1 se quiere acceder al Frame2, es necesario subir en la estructura jerrquica de la pgina. Para hacer esto, se utiliza la instruccin parent. Una vez obtenido el frame, se puede utilizar como si fuera una pgina web completa, es decir tendr su propios objetos window, document,
8.- ESTRUCTURA DE UN DOCUMENTO HTML

Una vez cargada la pgina web, se transforma todo el documento HTML en un conjunto de elementos llamados nodos, que estn interconectados y que representan los contenidos de las pginas web y las relaciones entre ellos. Por su aspecto, la unin de todos los nodos se llama rbol de nodos. Todos los nodos se cargarn dentro del objeto Document. As por ejemplo:
Texto del HTML <html> <head> <title>Pgina sencilla</title> </head> <body> <p>Esta pgina es <strong>muy sencilla</strong></p> </body> </html>
rbol de nodos del ejemplo
Pg. 67
En el esquema anterior, cada rectngulo representa un nodo DOM y las flechas indican las relaciones entre nodos. Dentro de cada nodo, se ha incluido su tipo y su contenido. La raz del rbol de nodos de cualquier pgina HTML siempre es la misma: un nodo de tipo especial denominado Documento. A partir de ese nodo raz, cada etiqueta HTML se transforma en un nodo de tipo Elemento. La conversin de etiquetas en nodos se realiza de forma jerrquica. De esta forma, del nodo raz solamente pueden derivar los nodos HEAD y BODY. A partir de esta derivacin inicial, cada etiqueta HTML se transforma en un nodo que deriva del nodo correspondiente a su etiqueta padre. Una vez construido automticamente el rbol completo de nodos DOM, ya es posible utilizar las funciones DOM para acceder de forma directa a cualquier nodo del rbol. Como acceder a un nodo del rbol es equivalente a acceder a un trozo de la pgina, una vez construido el rbol, ya es posible manipular de forma sencilla la pgina: acceder al valor de un elemento, establecer el valor de un elemento, mover un elemento de la pgina, crear y aadir nuevos elementos, etc. .- innerHTML innerHTML es una propiedad de los nodos y permite acceder al texto HTML que define al nodo. Sin embargo, la utilizacin de esta instruccin no es estndar y puede dar algunos problemas dependiendo del navegador que se utilice. .- Acceso directo a los nodos getElementsByTagName() : Obtiene todos los elementos de la pgina HTML cuya etiqueta sea igual que el parmetro que se le pasa a la funcin.
Pg. 68
getElementsByTagName()
getElementById() Devuelve el nodo del elemento HTML cuyo atributo id coincide con el parmetro indicado en la funcin. Como el atributo id debe ser nico, la funcin devuelve nicamente el nodo deseado. Es muy utilizado en el uso de capas. .- Acceso directo a los atributos de los nodos. Los atributos HTML de los elementos de la pgina se transforman automticamente en propiedades de los nodos. Para acceder a su valor, simplemente se indica el nombre del atributo HTML detrs del nombre del nodo. .- Creacin de Nodos on the fly Es posible crear nuevos nodos incluso cuando la pgina web ya est visualizndose en el Navegador del usuario, a esta tecnologa se le denomina on the fly. Para ello es necesario utilizar la siguiente instruccin: var Variable=document.createElement(Tipo de Nodo) La funcin createElement es una nueva funcin que pertenece al objeto document. Esta funcin devuelve un nodo creado del tipo indicado. Los tipos de nodos que se pueden crear son cada una de las diferentes etiquetas de HTML. As por ejemplo si se quisiera crear un nodo para contener un <input> se escribira la siguiente instruccin: var Variable=document.createElement("input") Una vez creado el nuevo nodo, se debe aadir a la pgina web. Para ello es necesario utilizar la instruccin appendChild. El siguiente cdigo crea un nodo de tipo input y lo aade al cuerpo del documento. var Variable=document.createElement("input") ; document.body.appendChild(Variable);
9.- PASO DE PARMETROS

Envo de parmetros:
Pg. 69
Es posible enviar informacin desde una pgina web a otra. Cada dato que se enva se le denomina 'parmetro'. Para definir cada parmetro es necesario indicar la siguiente informacin: Nombre del parmetro y dato que almacena. As pues, si desde una pgina web se quiere llamar a otra pgina web y enviarle un conjunto de datos, ser necesario enviarle tantos parmetros como datos se necesiten enviar. Para enviar los parmetros se debe indicar la direccin url de la nueva pgina, seguido de ? y a continuacin por cada parmetro un nombre, el carcter '=' y el valor. Los parmetros debe separarse con el carcter '&'. El siguiente cdigo muestra la llamada a una pgina web con dos parmetros direccion_url?dato1=100&dato2=500 Este cdigo llama a una pgina web indicada por direccion_url con dos parmetros. dato1 es el primer parmetro que contiene el valor 100 y dato2 es el segundo parmetro que contiene el valor 500. Recepcin de parmetros: En el caso de la una pgina web reciba parmetros, es necesario procesar estos parmetros por medio de cdigo (JavaSCript, PHP,...). Este cdigo deber identificar cada uno de los parmetros enviados y obtener los valores. Los pasos para realizar esta tarea son los siguientes:

PASO 1: Obtener la direccin url PASO 2: Limpiar la direccin url de caracteres extraos. Es necesario 'limpiar' la direccin URL dado que el navegador cambia los caracteres de espacio por los signos '%'. Para ellos se utiliza la funcin replace indicando una expresin para identificar caracteres extraos. Esta expresin est definida segn una terminologa propia denominada expresiones regulares. PASO 3: Separar cada uno de los parmetros. Se deben almacenar cada uno de los parmetros en un Array PASO 4: Obtener el valor de cada parmetros: Para cada parmetro identificado, es necesario obtener su valor. PASO 5: Definir las variables. Por cada parmetro identificado, se debe definir una variable del mismo nombre con el valor del parmetros // PASO 1 // PASO 2 // PASO 3 // PASO 4 // PASO 5
var Url = location.href; Url = Url.replace(/.*\?(.*?)/,"$1"); Parametros = Url.split ("&"); for (i = 0; i < Parametros.length; i++) { Param = Parametros[i].split("="); Eval ('var '+Param[0]+'="'+Param[1]+'"'); }
Pg. 70
En el ejemplo anterior, se almacena en la variable url la direccin Url y se eliminan los caracteres extraos (con expresiones regulares). A continuacin, se almacena en un array llamado "Parametros " cada uno de los parmetros, ya que la funcin split separa en diferentes cadenas cada vez que encuentra el carcter "&". En el Array Param se almacena por cada parmetro encontrado por un lado su nombre y por otro su valor, ya que la funcin split separa en dos cadenas el nombre del parmetro y su valor. Finalmente se evala la creacin de una variable que se llamar igual que el parmetro identificado y tendr como valor, el valor recibido
Pg. 71
Pg. 72
Pg. 73
Pg. 74
1. INTRODUCCIN
PHP (acrnimo de "PHP: Hypertext Preprocessor") es un lenguaje de "cdigo abierto" interpretado, de alto nivel, embebido en pginas HTML y ejecutado en el servidor. PHP es un lenguaje interpretado basado principalmente en C, C++ y Java, con los que comparte prcticamente toda su sintaxis y semntica, y aporta tambin algunas caractersticas de lenguajes interpretados como Perl y Bash. Debido a esto, una de sus principales caractersticas y una gran baza a su favor es que la curva de aprendizaje para programadores que ya conozcan estos lenguajes es muy suave, prcticamente pueden sentarse delante del ordenador y comenzar a escribir cdigo. A diferencia de HTML y JavaScript que son lenguajes ejecutados por el navegador, el cdigo PHP ser ejecutado siempre en el servidor y enviada la respuesta al navegador del usuario como una pgina web. Por tanto, al usuario nunca se le proporcionar el cdigo php del programa, sino que nicamente le llegar la respuesta de la ejecucin del programa php.
2. EL LENGUAJE PHP
Los programas en JavaScript se ejecutan en el propio navegador y van literalmente escritos dentro de una pgina HTML, es decir, formando parte del propio cdigo HTML de dicha pgina; lo cual nos lleva a escribir el programa en JavaScript al mismo tiempo que creamos la pgina HTML. El cdigo Javascript puede incorporarse de diferentes maneras a una pgina HTML. Para probar cada una de estas tcnicas necesitamos conocer las siguientes funciones bsicas de Javascript: .- Delimitadores En PHP disponemos de cuatro opciones para delimitar el cdigo: <?php .........; ?> El cdigo PHP se incluye entre etiquetas especiales de comienzo (<?php) y final (?> ), que nos permitirn entrar y salir del modo PHP. Adems, el fin de sentencia se marca con un carcter de punto y coma.
Pg. 75
.- Instruccin echo Esta instruccin permite devolver al navegador un texto que ser visualizado en la pgina web del usuario. Su sintaxis es la siguiente: echo ("Texto"); .- Definicin de etiquetas HTML en el cdigo PHP Tal y como se ha descrito, la ejecucin de un programa php devuelve una pgina web con el resultado de la ejecucin. Si la respuesta es una pgina web, adems podrn darse formato HTML a la informacin devuelta. .- Definicin de etiquetas PHP en el cdigo HTML Para introducir cdigo php en una pgina HTML, es necesario colocar el cdigo php entre las etiquetas especiales de comienzo (<?php) y final (?> ). El archivo con contiene este cdigo deber ser guardado con la extensin .php, ya que contiene instrucciones en este lenguaje. La ejecucin de este programa devuelve una pgina web con el cdigo HTML que contenga, y el resultado de la ejecucin del cdigo php. .- Comentarios En PHP hay tres formas de introducir comentarios en el cdigo:

Comentarios de varias lneas: /* .... */ Comentarios hasta el final de la lnea: // .... Comentarios hasta el final de la lnea: # ...
Hay que hacer notar que los comentarios de una lnea cubren hasta final de lnea o hasta el fin del bloque php ('?>' o el que corresponda.) .- Variables Al contrario que en la mayora de lenguajes de programacin, en PHP NO hace falta declarar las variables antes de usarlas: tras la primera aparicin en el cdigo quedan declaradas. En PHP todas las variables llevan delante el signo del dlar $. Las variables en PHP estn dbilmente tipadas. Una variable se asocia a un contenido, del tipo que sea, estando el tipo indicado en el contenido, no en la variable en s. Visto de otra forma, una misma variable se puede reutilizar asignndole a lo largo del tiempo datos de distinto tipo. .- Tipos de datos PHP soporta los siguientes tipos de datos bsicos:
Pg. 76
Tipo Enteros (int, integer)
Caractersticas Nmeros enteros Los nmeros en punto flotante Nmeros en punto admiten decimales y su rango de flotante (float, double, valores es mayor que el de los real) enteros Los arrays representan vectores unidimensionales o multidimensionales. Se definen y acceden como en C, mediante el Arrays (array) nombre de la variable que los contiene e indicando el ndice (que comienza en el 0) entre corchetes. Los elementos de un mismo array pueden ser de tipos distintos. Almacenan cadenas de Texto. .- Para concatenar cadenas se Cadenas de texto utiliza el operador . (string) .- Se puede acceder a cada carcter de la cadena igual que en una array. .- Constantes
Ejemplo $var1 = 1234 $var1 = 1.234;
$MiArray[0] = 1; $MiArray[1] = hola!!; $MiArray[2] = 5; echo $MiArray[1];
$cadena="Curso" $cadena=$cadena." Web". echo $cadena[1]
En PHP se pueden definir constantes utilizando la funcin define() de la siguiente manera: int define(string nombre, mixed valor [, int noMayusculas])
Donde nombre es el nombre que le queremos dar a la constante, valor su valor, y el campo opcional no maysculas indica si est a 1 que podemos acceder a la variable independientemente con maysculas o minsculas, mientras que si est a 0 (valor por defecto) slo podremos acceder a ella de la misma forma como la hayamos definido. Las constantes en PHP se diferencian de las variables en que:

No llevan el smbolo del dlar delante. Puede accederse a ellas desde cualquier parte del cdigo donde han sido definidas, sin restricciones de mbito como en las variables. No pueden ser redefinidas o borradas una vez definidas. Slo pueden contener valores escalares, no vectores.
.- Operadores Aritmticos Dispone de los siguientes operadores aritmticos: Operador Caracterstica
Pg. 77
$a + $b $a - $b $a * $b $a / $b $a % $b ++$a $a++ --$a $a--
Suma de $a y $b. Diferencia entre $a y $b. Producto de $a y $b. Divisin entre $a y $b. Resto de la divisin entre $a y $b. Pre-incremento Incrementa $a en 1, y devuelve $a (ya incrementado). Post-incremento Devuelve $a (sin incrementar), y despus lo incrementa en 1. Pre-decremento Decrementa $a en 1, y despus lo devuelve. Post-decremento Devuelve $a, y despus lo incrementa en 1.
.- Operadores Lgicos Dispone de los siguientes operadores lgicos: Operador Caracterstica $a and $b Y Cierto si $a y $b son ciertos. $a && $b $a or $b O Cierto si $a o $b es cierto. $a || $b O Exclusivo. Cierto si $a o $b es cierto, pero no $a xor $b ambos. ! $a No Cierto si $a es falso. Asignacin, igualdad e identidad Operador Caracterstica Asignacin Asigna el valor de una variable o $a = $b expresin del segundo trmino a la variable del primer trmino. Igualdad Compara si el valor de los dos operandos es $a == $b el mismo. Identidad Compara si el valor es el mismo y, adems, $a === $b el tipo coincide.
Comparacin Operador Caracterstica
Pg. 78
No igual Cierto si el valor de $a no es igual al de $b. No idntico Cierto si $a no es igual a $b, o si no $a !== $b tienen el mismo tipo. $a < $b Menor que Cierto si $a es estrictamente menor que $b. $a > $b Mayor que Cierto si $a es estrictamente mayor que $b. Menor o igual que Cierto si $a es menor o igual que $a <= $b $b. Mayor o igual que Cierto si $a es mayor o igual que $a >= $b $b.
$a != $b
.- Estructuras de control Las estructuras de control permiten bifurcar el flujo del programa y as ejecutar unas partes u otras del cdigo segn ciertas condiciones. PHP dispone de todas las estructuras clsicas de los lenguajes de alto nivel, con la sintaxis de C, C++ o Java.. IF ... ELSE ... if (expresin) { comandos_cierto } else { comandos_falso } WHILE while (expresin) { comandos } DO do { comandos } while (expresin); FOR for (expresin1; expresin2; expresin3) { comandos Pg. 79
expresin1 es la iniciacin del bucle. Generalmente da un valor inicial a una o varias variables (separadas por comas). Slo se ejecuta una vez, al principio, cuando el flujo del programa llega al bucle. expresin2 es la condicin. Mientras que expresin2 se evale a cierto, el bucle estar iterando. Se evala al inicio de cada iteracin, y si no se verifica la condicin la siguiente iteracin ya no se realiza y finaliza el bucle, continuando la ejecucin del programa con el resto del cdigo de despus del for. expresin3 es el paso de iteracin. Se ejecuta despus de cada iteracin, y generalmente modifica el valor de alguna variable (separadas por comas si hay ms de una).
FOR EACH
El bucle foreach representa una estructura de control tpica de lenguajes interpretados, en la que a una variable se le van asignando todos los valores de una lista. Su sintaxis es la siguiente: foreach (array as $variable) { comandos } En cada iteracin del bucle, se coloca en $variable un elemento de array, comenzando por el primero y siguiendo un orden ascendente. SWITCH switch (variable) { case valor1: comandos1;break; case valor2: comandos2;break; ... case valorN: comandosN;break; default: comandosDefault;break; } .- FUNCIONES function nombre ($arg_1, $arg_2, ..., $arg_n) { comandos return valor; }
Pg. 80
Los parmetros se pasan por valor, es decir, se crea en $arg_1 ... $arg_n copias locales de las variables, y se trabaja sobre estas copias locales, de forma que al salir de la funcin los valores originales no han sido modificados. El comando return es opcional, y sirve para que la funcin devuelva un valor de salida. Los parmetros de las funciones se pueden pasar por referencia, de forma que si que se pueda modificar su valor dentro de la funcin. Esto se consigue utilizando el smbolo & en la definicin de la funcin. .- Inclusin En PHP es posible realizar la inclusin de cdigo de dos maneras diferentes:
require(fichero): esta instruccin se sustituye por el contenido del fichero antes de que este se ejecute por el contenido de fichero, que puede ser un fichero local o una URL. Esta sustitucin se realiza una sola vez, mientras se est preprocesando el contenido del fichero .php y antes de ejecutarlo. include(fichero): esta instruccin tambin se sustituye por el contenido de fichero, pero en lugar de realizarse una nica vez durante el preproceso del fichero, se realiza durante la ejecucin, cada vez que el flujo del programa llega a esa lnea.
3. CADENAS
PHP contiene un conjunto de funciones para el manejo de las cadenas. Estas funciones son similares a las que se encuentran en el lenguaje C, y son las siguientes: Funcin Concatenacin La concatenacin de cadenas se realiza con el punto. As por ejemplo para concatenar dos cadenas se pondra: cadena1.cadena2 int strcmp (string str1, string str2) Compara dos cadenas str1 y str2. Devuelve 0 si ambas cadenas son iguales, un nmero menor que cero si str1 es menor que str2, y mayor que cero si str1 es mayor que str2. string substr (string cadena, int inicio [, int tamao]) Si inicio es positivo, devuelve la subcadena que empieza en esa posicin. Si es negativo, la subcadena que empieza en esa posicin contando desde el final. Si se indica el tamao, se devuelve una subcadena de hasta ese nmero de caracteres. int strrpos (string cadena, string referencia,inicio) Devuelve el ndice de la primera ocurrencia de la cadena referencia en cadena a partir de la posicin inicio. string strstr (string cadena, string referencia) Devuelve la subcadena de cadena que comienza en la primera ocurrencia de referencia string trim (string cadena)
Pg. 81
Elimina los espacios que haya al principio o final de una cadena string strtoupper (string cadena) Convierte la cadena a maysculas. string strtolower (string cadena) Convierte la cadena a minsculas.
4. MANIPULACIN DE ARRAYS
Los arrays se pueden utilizar como en cualquier lenguaje de programacin. Para acceder a una celda del array se utilizan los corchetes '[ ]'. Adems, todos los arrays de PHP disponen de un puntero que seala al elemento actual, puntero que sirve para recorrer el array secuencialmente con las funciones current(), next(), prev(), reset() y end(), que devuelven el elemento actual, siguiente, anterior, inicial o final del array, y a la vez actualizan el puntero a esa posicin. $arr = array(1,"Curso","Programacion","Web",1.5); current($arr); next($arr); prev($arr); end($arr); current($arr); reset($arr); 1 Curso 1 1.5 1.5 1
Existen algunas funciones adicionales para manipular arrays: Funcin Caracterstica sort() Ordena el array por contenido en orden ascendente. rsort() Ordena por contenido en orden descendente.
5. FORMULARIOS
PHP es capaz de gestionar formularios de HTML. El concepto bsico que es importante entender es que cualquier elemento de los formularios estar disponible automticamente en su cdigo PHP. Un formulario HTML puede ser procesado por un programa PHP. Para ello, el formulario debe ser enviado al fichero que contiene el programa php. Esto se consigue
Pg. 82
indicando en la propiedad action del formulario el nombre del fichero que contiene el programa php. Un programa php al cual se le enva un formulario, es capaz de acceder a todos y cada uno de los elementos de formulario y a la informacin rellenada por el usuario. PHP definen unas variables de uso global denominadas $_POST, $_GET, $_REQUEST que almacenarn la informacin del formulario de la siguiente manera:

La variable $_POST almacena la informacin del formulario si ste es enviado a travs del mtodo post. La variable $_GET almacena la informacin del formulario si es enviado a travs del mtodo get. La variable $_REQUEST almacena la informacin del formulario independientemente de como se haya enviado el formulario. Tanto $_POST como $_GET son arrays de longitud igual al nmero de elementos de formulario enviado. Para acceder a la informacin de cada elemento del formulario se debe indicar entre comillas el nombre del elemento.
Para entender mejor el funcionamiento de esta variable, se propone el siguiente ejemplo de formulario HTML: <html> <body> INTRODUCE TUS DATOS <form action="accion.php" method="POST"> Nombre: <input type="text" name="Nombre" /> Apellidos: <input type="text" name="Apellidos" /> <input type="submit"> </form> </body> </html>
Cuando el usuario llena el formulario y oprime el botn etiquetado "Submit", se enva ejecuta el programa accion.php, y se le enva el formulario. El cdigo del archivo accion.php podra ser algo as: <?php echo "BIENVENIDO "; echo $_REQUEST["Nombre"]; echo " "; echo $_REQUEST["Apellidos"]; ?>
Pg. 83
.- Envo de ficheros en el formulario Los ficheros puedes ser enviados desde el ordenador del usuario hasta el servidor a travs de un formulario, para ello se debe aadir al formulario un componente "<input>", cuyo tipo se "file". Este componente permite seleccionar un fichero del ordenador del usuario. Para tratar el fichero que es enviado, PHP define una variable de uso global llamada $_FILES. Esta variable contiene toda la informacin referente a los ficheros enviados a un programa PHP. $_FILES es un array bidimensional con las siguientes caractersticas:
La primera dimensin hace referencia a cada un de los ficheros enviados. Se accede a cada uno por medio del nombre del componente del formulario original que hace referencia al fichero. La segunda dimensin hace referencia a las caractersticas individuales de cada uno de los ficheros. Estas caractersticas son: o $_FILES['archivo']['name']: se refiere al nombre del archivo. o $_FILES['archivo']['type']: se refiere al tipo del archivo. o $_FILES['archivo']['size']: se refiere al tamao del archivo. o $_FILES['archivo']['tmp_name']: se refiere al fichero temporal donde se almacena el archivo. o $_FILES['archivo']['error']: contiene el nmero del error al transferir el archivo..
.- Manipulacin de Ficheros Los ficheros enviados a travs de un formulario HTML pueden ser almacenados en cualquier carpeta del servidor siempre y cuando se tengan los permisos correspondientes. Para realizar esta tarea se utiliza la funcin move_uploaded_file. Funcin move_uploaded_file bool move_uploaded_file ( string nombre_archivo, string destino ) Esta funcin realiza un chequeo para asegurar que el archivo indicado por nombre_archivo sea un archivo cargado vlido (lo que quiere decir que fue cargado a travs del mecanismo de carga HTTP POST de PHP). Si el archivo es vlido, ser movido al nombre de archivo dado por destino. Si nombre_archivo no es un archivo cargado vlido, entonces no se tomar ninguna accin, y move_uploaded_file() devolver FALSE. Si nombre_archivo es un archivo cargado vlido, pero no puede ser movido por alguna razn, no se tomar ninguna accin, y move_uploaded_file() devolver FALSE. Adicionalmente, se emitir una advertencia. $_SERVER es un array que contiene informacin importante sobre la configuracin del servidor web (es este caso Apache). Es un array asociativo, es decir, en lugar de acceder a la celda por su posicin, se accede por medio de un nombre. El nombre de una de las celdas de este array es DOCUMENT_ROOT, y almacena el camino donde Apache
Pg. 84
busca los ficheros que publica. Por tanto, es necesario mover el archivo que contiene la imagen, indicado en $_FILES["fichero"]["tmp_name"], y guardarlo donde apache busca sus archivos $_SERVER['DOCUMENT_ROOT'] con el nombre de archivo $_FILES["fichero"]["name"]. Si se quisiera especificar un subdirectorio, bastar con indicarlo entre ambos elementos. Otras funciones para manejar los ficheros son las siguientes: int fopen (string nombre, string modo) Esta funcin abre el fichero nombre (que puede ser local o remoto, si se indica con http:// o ftp://) segn modo: 'r' Modo de slo lectura. El puntero se coloca al inicio del fichero. 'r+' Modo lectura/escritura. El puntero se coloca al inicio. 'w' Modo de slo escritura. Si el fichero existe, se borran sus contenidos. Si no existe, se crea. 'w+' Modo lectura/escritura. Si el fichero existe, se borran sus contenidos. Si no existe, se crea. 'a' Modo slo escritura. Si el fichero existe, el puntero se coloca al final del fichero. Si no existe se crea. 'a+' Modo lectura/escritura. Se coloca el puntero al final del fichero. Si no existe se crea. int fclose (int identificador) Cierra un fichero. string fgets (int identificador, int tamao) Devuelve la siguiente lnea del fichero apuntado por identificador, o tamao 1 caracteres si la lnea era ms larga. int feof (int identificador) Comprueba si es el fin del fichero. array file (string fichero) Lee todo el contenido de un fichero con la funcin file(), que no necesita de un fopen() y almacena el contenido del fichero ledo lnea a lnea en un array: int fwrite (int identificador, string cadena [, int tamao]) Escribe en el fichero apuntado por identificador el contenido del string cadena, o tamao bytes si cadena es ms larga. int copy (string origen, string destino) Copia un fichero int rename (string origen, string destino) Renombra un fichero int unlink (string fichero) Borra un fichero
Pg. 85
6. PASO DE PARAMETROS POR URL

Es posible enviar informacin a un programa php a travs de parmetros. La utilizacin de parmetros en PHP es similar a lo explicado para JavaScript. En una url se pueden colocar parmetros de la siguiente manera direccion_url?dato1=100&dato2=500 La direccin url puede ser una direccin a un archivo php. Sin embargo, la recepcin de los parmetros en el archivo php es mucho ms sencilla que en JavaScript, ya que cada parmetro se almacena en el array llamado $_REQUEST. Para acceder a cada uno de los parmetros, se utiliza este array de manera asociativa, es decir, se indica el nombre del parmetro al que se quiere acceder dentro del array $_REQUEST. En el siguiente ejemplo se muestra el paso de parmetros a un archivo PHP.
7. SESIONES
Las sesiones sirven para almacenar informacin que se memorizar durante toda la visita de un usuario a una pgina web. Las permiten almacenar informacin de cada usuario que visita la pgina web. Cada usuario que entra en un sitio abre una sesin, que es independiente de la sesin de otros usuarios. En la sesin de un usuario podemos almacenar todo tipo de datos, como su nombre, productos de un hipottico carrito de la compra, preferencias de visualizacin o trabajo, pginas por las que ha pasado, etc. Todas estas informaciones se guardan en lo que denominamos variables de sesin. PHP internamente genera un identificador de sesin nico, que sirve para saber las variables de sesin que pertenecen a cada usuario. Funciones para el manejo de sesiones:
session_start: Inicia una sesin para el usuario o contina la sesin que pudiera tener abierta en otras pginas. Una vez inicializada la sesin con session_start() podemos a partir de ahora utilizar variables de sesin, es decir, almacenar datos para ese usuario, que se conserven durante toda su visita o recuperar datos almacenados en pginas que haya podido visitar. La sesin se tiene que inicializar antes de escribir cualquier texto en la pgina. Esto es importante y de no hacerlo as corremos el riesgo de recibir un error, porque al iniciar la sesin se deben leer las cookies del usuario, algo que no se puede hacer si ya se han enviado las cabeceras del HTTP. Una vez iniciada la sesin podemos utilizar variables de sesin a travs de $_SESSION, que es un array asociativo, donde se accede a cada variable a partir de su nombre, de este modo: $_SESSION["nombre_de_variable"] Otras funciones tiles para la gestin de sesiones son: o Session_id(): devuelve el identificador de la sesin o Session_destroy(): abandona la sesin eliminando variables e identificador. Pg. 86

o o
Session_unregister('variable'): Abandona una variable sesin isset(): devuelve si la variable ha sido declarada previamente.
8. MANIPULACIN DE BASES DE DATOS

PHP dispone de varias funciones para acceder a Bases de Datos, pero son propias de cada una de estas Bases de Datos, es decir, no hay una funcin conectar genrica, si no una para conectar a MySQL, otra para conectar a Informix, etc. Para evitar confusiones entre las funciones de unas BD y otras, el nombre de todas estas funciones sigue este patrn: <nombreBD>_<nombreFUNCION>. De forma que existe una funcin mysql_connect, una funcin ifx_connect. int mysql_connect ([string servidor [:puerto] [:/camino/al/socket] [, string usuario [, string contrasea]]]) Conecta con una base de datos. Todos los parmetros son opcionales. Si no se indican, se utiliza localhost como servidor por defecto, el nombre del usuario que est ejecutando PHP como usuario, y la cadena vaca como contrasea. La funcin devuelve un identificador de la conexin que necesitaremos ms tarde para hacer referencia a este enlace en concreto con la BD, o un error si algo ha ido mal. int mysql_close ([int identificador]) Cierra la conexin indicada por el identificador o la ltima conexin que se haya abierto si se omite, y devuelve TRUE o FALSE segn si la operacin ha finalizado con xito o no. int mysql_select_db (string nombre_bd [, int identificador]) Seleccionar la base de datos con la que va a trabajar. Nombre_bd especifica el nombre de la BD a la que queremos acceder, y el campo opcional identificador es el nmero de identificacin de enlace devuelto por mysql_connect. Si se omite este ltimo campo, se utiliza el ltimo enlace abierto, y si no existiera, se trata de crear uno con mysql_connect (sin parmetros). La funcin devuelve TRUE o FALSE, segn si todo ha ido bien o no. int mysql_query (string query [, int identificador]) Realiza consultas SQL a una BD se utiliza mysql_query: En query va la sentencia en SQL que queremos ejecutar. Si se omite el identificador se usa el ltimo o se trata de crear. Esta funcin devuelve FALSE si ha habido un error, o un valor no negativo (TRUE) que identifica el resultado y que ms tarde deber ser tratado para extraer la informacin necesaria. array mysql_fetch_array(int resultado [, int tipo_resultado]) Extrae informacin del resultado del query. Cada llamada sucesiva a esta funcin devuelve un array con la siguiente fila del resultado, hasta que no queden filas y devuelva FALSE. Las columnas estn indexadas por orden en el array, comenzando la primera en la posicin 0.
Pg. 87
Para utilizar una base de datos desde internet, se puede acceder por medio de php. Los pasos para poder utilizar una base de datos desde un programa PHP son los siguientes:
Establecer una conexin con la base de datos: Esta conexin se realizar de manera diferente dependiendo del gestor de base de datos que se utilice. En este caso el gestor de base de datos es mySQL, y por tanto la conexin se realizar con la instruccin mysql_connect., tal y como muestra la tabla siguiente: $Enlace = mysql_connect (direccion, nombre,contrasea);
Seleccionar la base de datos: Para realizar esta tarea se utiliza la instruccin mysql_select_db. mysql_select_db(BasedeDatos, $Enlace);
Definir la instruccin SQL: La manipulacin de la base de datos siempre se realiza a travs de una instruccin SQL. $ConsultaSQL=" .................................... ";
Ejecucin de la instruccin SQL: Una vez definida la consulta SQL, es necesario ejecutarla sobre la base de datos. mysql_query($ConsultaSQL, $Enlace);
Extraccin de Informacin de una Base de datos: Una de las principales tareas que se debe realizar en una pgina web que tiene una conexin sobre una base de datos, es mostrar en pantalla los datos almacenados. Para ello, se deben seguir los pasos anteriormente explicados, teniendo en cuenta que la consulta SQL ser de tipo seleccin. As por ejemplo, para mostrar algunos datos, los pasos seran los siguientes: <?php $link = mysql_connect (direccion,nombre,contrasea); if (!$link) MensajeError("No se pudo conectar"); else{ if (!mysql_select_db(BD, $link)) MensajeError ("No existe la Base de datos"); else{ $ConsultaSQL="SELECT .. from ."; $resultado = mysql_query($ConsultaSQL, $link); ..................
Pg. 88
?> Sin embargo, no vale con establece la conexin sobre la base de datos y ejecutar la consulta SQL, sino que hay que extraer los datos devueltos por la consulta y mostrarlos convenientemente. Para realizar esta tarea se utiliza la siguiente instruccin: $fila = mysql_fetch_array($resultado); Esta instruccin devuelve en un array los datos de la primera fila seleccionada por la consulta. Cada vez que se ejecuta esta instruccin, devolver la siguiente fila, hasta que no quede ninguna ms, en cuyo caso devolver false. Teniendo en cuenta esta nueva instruccin, el cdigo para mostrar los primeros dos datos de todas las filas de una tabla de la base de datos es el siguiente: <?php $link = mysql_connect (direccion,nombre,contrasea); if (!$link) MensajeError("No se pudo conectar"); else{ if (!mysql_select_db(BD, $link)) MensajeError ("No existe la Base de datos"); else{ $ConsultaSQL="SELECT . from ."; $resultado = mysql_query($ConsultaSQL, $link); $fila = mysql_fetch_array($resultado); while ($fila!=false) { echo ($fila[0].",".$fila[1]); $fila = mysql_fetch_array($resultado); } } } ?> Es necesario mencionar, que una vez extrada una fila con la instruccin mysql_fetch_array, se puede acceder a cada dato individual de la misma forma que en un array. Formateado de los datos extrados de una base de datos El ejemplo anterior muestra los dos primeros datos de todas las filas de una tabla, pero sin un formato adecuado. Lo ideal, es mostrar esta informacin con un formato correcto. El siguiente programa muestra los datos de los conductores en una tabla. <?php $link = mysql_connect (direccion,nombre,contrasea); if (!$link) MensajeError("No se pudo conectar");
Pg. 89
else{ if (!mysql_select_db(BD,$link)) MensajeError ("No existe la Base de datos"); else{ $ConsultaSQL="SELECT .. from "; $resultado = mysql_query($ConsultaSQL, $link); $fila = mysql_fetch_array($resultado); echo("<p align='center'><strong> LISTADO<p></strong>"); echo("<table align='center' border=1>"); echo("<tr><td><strong><p align='center'>DATO 1 </strong></td><td><strong> <p align='center'>DATO 2</strong></td></tr>"); while ($fila!=false) { echo ("<tr><td>".$fila[0]."</td><td>".$fila[1]."</td>"); $fila = mysql_fetch_array($resultado); } echo("</table>"); } } ?> .- Insercin de nuevos datos La insercin de nuevos datos en una base de datos por medio de un programa php, se puede realizar utilizando la instruccin SQL "insert". El siguiente programa PHP inserta al conductor "Antonio Rodrguez Snchez" en la base de datos, en la tabla conductores. <?php $link = mysql_connect (direccion,nombre,contrasea); if (!$link) echo("ERROR"); else{ if (!mysql_select_db(BD,$link)) echo("ERROR"); else{ $Consulta = "insert into values()"; $resultado = mysql_query($Consulta, $link); } } ?>
Por lo general, para insertar nueva informacin en una base de datos a travs de un programa PHP, se utiliza un formulario donde el usuario pueda introducir los datos que desea almacenar. Este formulario invocar a un programa PHP que reciba los datos del formulario e inserte automticamente toda la informacin en la base de datos. A continuacin se muestra el cdigo de ambos ficheros.
Formulario HTML: permite al usuario introducir todos los datos de una tabla. Pg. 90
<html> <body> <form name="formulario" method="post" action="Insertar.php"> <p align="center"><strong>FORMULARIO</strong></p> <table width="70%" border="0" align="center"> <tr> <td width="40%" valign="top"><strong>Dato 1</strong></td> <td width="60%" valign="top"> <input name="dato1" type="text" id="dato1" size="50"></td> </tr> <tr> <td valign="top"><strong>Dato 2</strong></td> <td valign="top"> <input name="dato2" type="text" id="dato2" size="50"></td> </tr> </table> <p align="center"> <input type="submit" name="Submit" value="INSERTAR"> <input type="reset" name="Submit2" value="LIMPIAR"> </p> </form> <p align="justify"></p> </body> </html> Fichero PHP: recibe los datos del formulario y los inserta en la base de datos. Este ser el fichero Insertar.php, referenciado por el formulario anterior. El programa php recibe los datos del formulario en una variable denominada $_POST. Esta variable es un array donde se almacenan todos los datos recibidos de un formulario. A cada dato individual se puede acceder por medio de su posicin, o bien, por medio del nombre del campo del formulario donde se encuentra el dato. <?php $link = mysql_connect (direccion,nombre,contrasea); if (!$link) echo("ERROR"); else{ if (!mysql_select_db(BD,$link)) echo("ERROR"); else{ $Consulta = "insert into . values('".$_POST["dato1"]."','".$_POST["dato2"]."')"; $resultado = mysql_query($Consulta, $link); echo ($resultado); } } ?>
Pg. 91
Pg. 92
Pg. 93
Pg. 94
1. INTRODUCCIN
El trmino AJAX es un acrnimo de Asynchronous JavaScript + XML, que se puede traducir como "JavaScript asncrono + XML". Las aplicaciones web tradicionales, las acciones del usuario en la pgina (pinchar en un botn, seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor. Esta llamada es procesada en el servidor, y se devuelve una respuesta que ser una nueva una nueva pgina HTML al navegador del usuario. El principal problema de este funcionamiento es que el usuario debe esperar la recarga completa de una nueva pgina HTML cada vez que realiza una peticin al servidor. Las aplicaciones construidas con AJAX eliminan la recarga constante de pginas mediante la creacin de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicacin, ya que el usuario nunca se encuentra con una ventana del navegador vaca esperando la respuesta del servidor. En AJAX las peticiones al servidor se realizan de manera asncrona, es decir, el usuario puede seguir trabajando en la pgina mientras se espera la respuesta del servidor. Gracias a este proceso, la interaccin del usuario no se ve interrumpida por recargas de pgina o largas esperas por la respuesta del servidor. Aunque la utilizacin de los componentes AJAX requiere un conocimiento precio de Programacin Orientada a Objeto (POO) que est fuera del propsito de este curso. Esta documentacin procurar simplificar algunas definiciones para poder comprender correctamente el funcionamiento de AJAX.
2. EL OBJETO XMLHttpRequest
El Elemento principal de Ajax es el objeto XMLHttpRequest que permite realizar una conexin al servidor, enviarle una peticin y recibir la respuesta. AJAX usa el objeto XMLHttpRequest para hacer peticiones asncronas al servidor El elemento XMLHttpRequest es un objeto que contiene en su interior una serie de informacin (denominado atributos en POO) y un conjunto de acciones que pueden ejecutarse sobre este objeto (denominados mtodos en POO). Los atributos que se encuentran dentro del objeto XMLHttpRequest son los siguientes: Atributo Detalles Valor numrico (entero) que almacena el estado de la peticin. Los valores definidos para esta propiedad son los siguientes: readyState Valor 0 Detalle No inicializado (objeto creado, pero no se ha invocado el mtodo open)
Pg. 95
1 2
Cargando (objeto creado, pero no se ha invocado el mtodo send) Cargado (se ha invocado el mtodo send, pero el servidor an no ha respondido) Interactivo (se han recibido algunos datos, aunque no se puede emplear la propiedad responseText) Completo (se han recibido todos los datos de la respuesta del servidor)
3 4
responseText responseXML Status statusText
El contenido de la respuesta del servidor en forma de cadena de texto El contenido de la respuesta del servidor en formato XML. El objeto devuelto se puede procesar como un objeto DOM El cdigo de estado HTTP devuelto por el servidor (200 para una respuesta correcta, 404 para "No encontrado", 500 para un error de servidor, etc.) El cdigo de estado HTTP devuelto por el servidor en forma de cadena de texto: "OK", "Not Found", "Internal Server Error", etc.
Los mtodos que se pueden invocar del objeto XMLHttpRequest son los siguientes: Nombre abort() getAllResponseHeaders() getResponseHeader("cabecera") Detalles Detiene la peticin actual Devuelve una cadena de texto con todas las cabeceras de la respuesta del servidor Devuelve una cadena de texto con el contenido de la cabecera solicitada Responsable de manejar los eventos que se producen. Se invoca cada vez que se produce un cambio en el estado de la peticin HTTP. Normalmente es una referencia a una funcin JavaScript Establece los parmetros de la peticin que se realiza al servidor. Los parmetros necesarios son el mtodo HTTP empleado y la URL destino (puede indicarse de forma absoluta o relativa) Realiza la peticin HTTP al servidor. Si la invocacin necesita enviar parmetros se indicar especficamente.
onreadystatechange
open("metodo", "url")
send(parametros)
Pg. 96
setRequestHeader("cabecera", "valor")
Permite establecer cabeceras personalizadas en la peticin HTTP. Se debe invocar el mtodo open() antes que setRequestHeader()
3. Funcionamiento
La utilizacin de peticiones AJAX implica la creacin y utilizacin de un objeto XMLHttpRequest. Las fases que deben seguirse para utilizar correctamente este objeto son las siguientes: 1. 2. 3. 4. Crear el elemento XMLHttpRequest Preparar la funcin de respuesta Realizar la peticin al servidor Ejecutar la funcin de respuesta
A continuacin se explicarn ms detenidamente cada una de estas fases. .- Crear el elemento XMLHttpRequest La creacin de un elemento XMLHttpRequest requiere que se realice diferentes acciones dependiendo del navegador en el que el objeto es generado. Para Safari y Mozilla, se utilizara la siguiente instruccin: var llamada= new XMLHttpRequest(); Mientras que para el caso de Internet Explorer, la instruccin sera:. var llamada= new ActiveXObject("Microsoft.XMLHTTP"); Una vez creada un objeto XMLHttpRequest (en el caso anterior llamada), para acceder a todos sus atributos y mtodos, se debe indicar el nombre del objeto seguido por un punto y justo a continuacin el nombre del atributo o mtodo. As por ejemplo si se quiere acceder al atributo readyState del objeto llamada, se deber indica lo siguiente: llamada.readyState Para desarrollar un cdigo que permita crear el objeto XMLHttpRequest de una manera automtica, primero se debe detectar el navegador que el usuario est utilizando, y luego crear el objeto XMLHttpRequest. El siguiente cdigo define una funcin que se encargar de crear este objeto de manera automtica function CrearLlamada() {
Pg. 97
if(window.XMLHttpRequest) llamada = new XMLHttpRequest(); else if(window.ActiveXObject) llamada = new ActiveXObject("Microsoft.XMLHTTP"); }
Los navegadores que siguen los estndares (Firefox, Safari, Opera, Internet Explorer 7 y 8) implementan el objeto XMLHttpRequest de forma nativa, por lo que se puede obtener a travs del objeto window. Otros navegadores (Internet Explorer 6 y anteriores) implementan el objeto XMLHttpRequest como un objeto de tipo ActiveX. .- Crear el elemento XMLHttpRequest Una vez creado el objeto XMLHttpRequest, se debe indicar el nombre de la funcin que se encargar de procesar la respuesta del servidor. La propiedad onreadystatechange del objeto XMLHttpRequest permite indicar esta funcin directamente incluyendo su cdigo mediante una funcin annima o indicando una referencia a una funcin independiente. llamada.onreadystatechange = NombreFuncion; Este cdigo indica que cuando la aplicacin reciba la respuesta del servidor, se debe ejecutar la funcin NombreFuncion. La referencia a la funcin se indica mediante su nombre sin parntesis, ya que de otro modo se estara ejecutando la funcin y almacenando el valor devuelto en la propiedad onreadystatechange. Realizar la peticin al servidor Despus de preparar la aplicacin para la respuesta del servidor, se realiza la peticin HTTP al servidor. Para ello se invocar al mtodo open y send del objeto XMLHttpRequest creado previamente. El siguiente cdigo muestra la peticin al servidor: llamada.open('GET', 'Ajax.txt'); llamada.send(null); Las instrucciones anteriores realizan el tipo de peticin ms sencillo que se puede enviar al servidor. En esta caso se enviar una peticin a nuestro propio servidor (localhost). Se trata de una peticin de tipo GET simple que no enva ningn parmetro al servidor. Una vez creada la peticin HTTP, se enva al servidor mediante el mtodo send(). Este mtodo no incluye ningn parmetro (null).
Pg. 98
.- Ejecutar la funcin de respuesta Finalmente, en el momento de recibir la respuesta de la peticin,, se ejecutar de forma automtica la funcin establecida anteriormente en onreadystatechange. Esta funcin deber comprobar que existe una respuesta (status=200), y que se han recibido los datos de respuesta (readystate=4). El cdigo de la funcin sera el siguiente function Recibir() { if(llamada.readyState == 4) { if(llamada.status == 200) { alert(llamada.responseText); } } } El cdigo alert(llamada.responseText) permitir mostrar en una ventana la respuesta que ha sido enviada. Una vez explicado el funcionamiento para la realizacin de peticiones y recepcin de la respuesta, se proceder al agrupamiento del cdigo para terner una visin ms completa del funcionamiento de las llamada AJAX. Para poder probar este cdigo es necesario tener en cuenta las siguientes consideraciones: 1. Debe existir un archivo llamado Ajax.txt que contenga un texto cualquiera. Este archivo deber guardarse, en este caso, en la misma carpeta donde se almacene el cdigo AJAX. 2. Para poder visualizar correctamente este programa, desde el navegador se debe acceder al archivo HTML que contiene la peticin AJAX poniendo la direccin url (http://localhost/...), nunca abrirlo directamente en el navegador.
El ejemplo siguiente muestra en pantalla el contenido del archivo Ajax.txt, utilizando para ello una peticin AJAX.
<html> <script> var READY_STATE_NOINICIALIZADO = 0; var READY_STATE_CARGANDO = 1;
Pg. 99
var READY_STATE_CARGADO = 2; var READY_STATE_INTERACTIVO = 3; var READY_STATE_COMPLETO = 4; var Llamada; function CrearLlamada() { if(window.XMLHttpRequest) Llamada = new XMLHttpRequest(); else if(window.ActiveXObject) Llamada = new ActiveXObject("Microsoft.XMLHTTP"); } function Cargar(url, metodo, funcion) { CrearLlamada(); if (Llamada) { Llamada.onreadystatechange = funcion; Llamada.open(metodo, url, true); Llamada.send(null); } } function Recibir() { if(Llamada.readyState == 4) { if(Llamada.status == 200) { alert(Llamada.responseText); } } }
Pg. 100
function Iniciar() { Cargar("Ajax.txt", "GET",Recibir); } </script> </head> <body onload="Iniciar()"></body> </html>
Explicacin del cdigo:

En primer lugar, se definen unas variables que se utilizan en la funcin que procesa la respuesta del servidor (0,..,4). A continuacin, se define la variable Llamada que almacenar la instancia del objeto XMLHttpRequest. Esta variable se define como una variable global para que todas las funciones que hacen uso de ese objeto tengan acceso directo al mismo. La funcin CrearLlamada sirve para encapsular la creacin del objeto XMLHttpRequest: La funcion Cargar se crea para realizar la carga de contenidos mediante AJAX. Esta funcin admite tres parmetros: la URL del contenido que se va a cargar, el mtodo utilizado para realizar la peticin HTTP y una referencia a la funcin que procesa la respuesta del servidor. La funcin Recibir sirve para mostrar la respuesta de la peticin. La funcin Iniciar realiza una llamada a la funcin Cargar con los parmetros adecuados. Para que comience la peticin, se activa el evento onload con la funcin Iniciar.
4. Invocacin ficheros HTM

Para entender mejor cmo funciona la llamada a una peticin AJAX, se van a llamar a diferentes tipos de ficheros (htm, js y php) para comprobar cul ser la respuesta final. El siguiente ejemplo muestra dos archivos.

Fichero.htm: contiene el cdigo de una pgina web AJAX.htm: contiene el cdigo necesario para invocar a travs de AJAX al fichero.htm Archivo AJAX.htm .........................
Archivo Fichero.htm <HTML>
Pg. 101
<BODY> Curso de Programacin web<br> Julio de 2005<br>
function Iniciar() { Cargar("http://localhost/Fichero.htm", "GET",Recibir); }
HTML, CSS, JavaScript, PHP y AJAX<br> </BODY> </HTML>
......................
Los puntos suspensivos indican que el resto del cdigo no cambia. Con respecto al ejemplo anterior, slo se ha modificado la funcin Iniciar, ya que al invocar a la funcin cargar, se indica el nuevo fichero que se est solicitando. Al recibir la respuesta del servidor, se activar la funcin Recibir() y mostrar en pantalla la respuesta. En este caso es el cdigo HTML de la pgina solicitada (Fichero.htm)
5. Invocacin a fichero JavaScript

El siguiente ejemplo muestra dos archivos.

Fichero.js: contiene el cdigo de una pgina web AJAX.htm: contiene el cdigo necesario para invocar a travs de AJAX al fichero.js Archivo Fichero.js function Mostrar(){ function Iniciar() { alert("Curso de Programacin web"); } } ...................... Cargar("http://localhost/Fichero.js", "GET",Recibir); Archivo AJAX.htm .........................
Al recibir la respuesta del servidor, se activar la funcin Recibir() y mostrar en pantalla la respuesta siguiente:
Pg. 102
En este caso se muestra el cdigo de fichero.js, en ningn caso se ejecuta este cdigo.
6. Invocacin a fichero PHP

El siguiente ejemplo muestra dos archivos.

Fichero.php: contiene el cdigo de una pgina web AJAX.htm: contiene el cdigo necesario para invocar a travs de AJAX al fichero.php Archivo Fichero.php <?PHP $Cadena1="Curso de programacin web"; $Cadena2="Julio de 2009"; echo $Cadena1."<p><br>".$Cadena2; ?> Archivo AJAX.htm ......................... function Iniciar() { Cargar("http://localhost/Fichero.php", "GET",Recibir); } ......................
Al recibir la respuesta del servidor, se activar la funcin Recibir() y mostrar en pantalla la respuesta. En este caso se muestra la ejecucin del cdigo de Fichero.php, ya que este tipo de archivos se deben ejecutar slo en el servidor. Por tanto la invocacin AJAX a Fichero PHP implica que se recibir como respuesta la ejecucin del cdigo PHP.
Pg. 103
Pg. 104

Programacion Web

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Programacion Web

Hochgeladen von

Copyright:

Verfügbare Formate

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

2. ESTRUCTURA DE UN DOCUMENTO HTML

Curso Programacin Web

Curso Programacin Web

Texto subrayado: Texto tachado:

<U>Texto subrayado</U> <STRIKE>Texto tachado</STRIKE>

4. COMENTARIOS NO VISIBLES EN LA PANTALLA

Curso Programacin Web

Curso Programacin Web

Los atributos de la etiqueta <AREA> son los siguientes: Pg. 13

Curso Programacin Web

Coords: Son las coordenadas de la figura.

Direccin del enlace.

Target: Destino del salto. Alt: Texto indicativo

Curso Programacin Web

#FFFFFF Blanco #000000 Negro #FFFF00 - Amarillo

Curso Programacin Web

alinea horizontalmente la tabla con respecto a su entorno.

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Selected: Cuando un option es selected, aparece seleccionado por defecto.

Curso Programacin Web

Name: Value: Checked: .- Botones:

En los formularios se pueden usar diferentes tipos de botones.

. .- Propiedades de las capas Id: Es el nombre e identificador de la capa.

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

<HTML> <HEAD> <TITLE>DEFINICIN DE FRAMES</TITLE> </HEAD>

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web

3.- DEFINICIN DE ESTILOS DE LAS FUENTES DE TEXTO

Curso Programacin Web

Valores: normal, bold

4. PROPIEDADES RELACIONAS CON EL TEXTO

Curso Programacin Web

5. HERENCIA DE PROPIEDADES DE ESTILO.

6.- DEFINICIN DE UN ESTILO EN FUNCIN DEL CONTEXTO

Curso Programacin Web

7.- DEFINICIN DE HOJAS DE ESTILO EN UN ARCHIVO EXTERNO

8.- DEFINICIN DE ESTILOS POR MEDIO DE CLASES

9.- DEFINICIN DE ESTILOS POR MEDIO DE ID

Curso Programacin Web

10.- PROPIEDADES RELACIONADAS CON LOS BLOQUES

Las propiedades relacionadas con los bloques son:

Curso Programacin Web

Curso Programacin Web

Curso Programacin Web