Separata LP1 Unidad 1

Separata preparada para el desarrollo del curso de:
Lenguaje de Programacin I
Primera Unidad Temtica: FUNDAMENTOS DE LA PROGRAMACION WEB
Facultad de Ingeniera de Sistemas
TERCER CICLO
Semestre: 2011-I
2011
INDICE
PRIMERA UNIDAD TEMATICA FUNDAMENTOS DE LA PROGRAMACIN WEB PRIMERA SEMANA MARCO TEORICO TOPICOS BSICOS DE LA PROGRAMACION WEB CLIENTE USANDO HTML Conceptos bsicos preliminares. .................................................. 3 Construccin y Modificacin de una pgina web.................... ...................... 5 Fundamentos de HTML.................... ...................... 6 MARCO PRACTICO Actividades....................................................................................................................... 33 SEGUNDA SEMANA MARCO TEORICO TPICOS BSICOS DE LA PROGRAMACIN WEB CLIENTE USANDO JAVASCRIPT Gestores de Eventos en JavaScript.................................................................................... 35 MARCO PRACTICO Actividades....................................................................................................................... 47 TERCERA SEMANA MARCO TEORICO TPICOS BSICOS DE LA PROGRAMACIN WEB EN EL SERVIDOR Qu es PHP?................................................................................................................... Caractersticas de PHP...................................................................................................... Componentes necesarios para trabajar con PHP............................................................... Fundamentos del Lenguaje
48 49 50 54
MARCO PRACTICO Actividades........................................................................................................................ 62 CUARTA SEMANA MARCO TEORICO ENVIO Y RECEPCION DE DATOS. MANEJO DE CONTROLES USANDO PHP . 63 Envo y Recepcin de Datos con contenido Dinmico....................................................... 74 MARCO PRACTICO Actividades....................................................................................................................... 77
Universidad Privada Telesup
Pg. 3
PRIMERA SEMANA Marco Terico

Logro El alumno construya pginas Web estticas utilizando las directivas del HTML. Resumen El cdigo HTML esta basado de hipertexto el cual viaja a travs del protocolo http y es interpretado por el navegador. El HTML est compuesto por una serie de directivas que se utilizan para insertar elementos o caractersticas sobre una pgina web. Las pginas webs quedan alojadas en un servidor web.
Tpicos bsicos de la programacin web Cliente usando HTML

CONCEPTOS BSICOS PRELIMINARES
Antes de empezar a crear nuestras pginas webs, debemos repasar concisamente algunos conceptos elementales: QU ES INTERNET? Es la Red mundial de computadores: Grupo de computadores que interconectados de alguna forma pueden compartir entre ellos alguna informacin. Pueden compartir informacin almacenada en las millones de pginas webs que se encuentran almacenadas en los miles de servidores webs, todos estos equipos tanto servidores como usuarios (clientes) forman parte de la comunidad de cibernauta de Internet. SERVIDOR WEB Computador Central que aloja y administra un sitio web (site web). Internet est compuesto de miles de Servidores de este tipo a los cuales los clientes o usuarios acceden a travs de una direccin web. Esto quiere decir que las pginas webs que nosotros visualizamos vienen desde un servidor de Web. PROTOCOLO TCP/IP (Transmision Control Protocol/Internet Protocol) Es el protocolo de red ms utilizado mundialmente. Un protocolo de red contiene normas y acuerdos que todos los equipos informticos y de telecomunicaciones respetan con la finalidad de lograr una comunicacin estandarizada y universal. Este protocolo permite que los datos se dirijan como paquete de datos desde su fuente a su destino a travs de Internet (IP Internet Protocol)
Pg. 4
DIRECCIN IP Los servidores web gracias a este protocolo disponen de una direccin IP que los identifica de modo nico en la red a nivel mundial. Una direccin IP consta de 4 octetos, cada una de ellas esta comprendida en un rango de 0 a 256. Ejemplo de direcciones IP: 205.170.15.10 168.12.15.14 192.168.0.0 10.0.0.0 Direccin IP pblica Direccin IP pblica Direccin IP privada Direccin IP privada (Internet) (Internet) (Intranet) (Intranet)
Intranet: Una red local que utiliza el protocolo TCP/IP. Cada uno de los computadores estn identificados con una direccin IP privada. Esta red funcionaria como una microinternet privada cuya jurisdiccin sera una oficina, piso de un edificio, etc. Los equipos pertenecientes a una Intranet usan el siguiente rango de direcciones IP: 10.0.0.0 a 10.255.255.255 192.168.0.0 a 192.168.255.255
A modo de prueba Ud. puede abrir su navegador y escribir la siguiente direccin IP: http://64.233.169.103 Qu apareci? Ud. accedi directamente a un servidor web de Internet a travs de su direccin IP pblica DIRECCION DNS (Domain Name Server) Esta direccin es la ms utilizamos para acceder a una pgina Web, porque es ms fcil de recordar, tiene la forma de: http://www.google.com.pe
Partes de una direccin DNS: http : Protocolo de comunicacin para la transferencia de hipertexto www : Nombre o alias del servidor Web (En la mayora de casos se utiliza www) utelesup : Nombre del Dominio del sitio Web edu : Tipo de dominio (Ejemplo: edu, com, org, net, gob, mil) pe : Dominio de pas (Ejemplo: pe, cl, ec, uk, ge, cn, jp, )
SERVIDOR DNS Computador central que forma parte de Internet, que recepciona la direccin DNS por parte del cliente (usuario) y con esta, busca la direccin IP equivalente del servidor web. SERVIDOR: Computador central que administra y provee un servicio a un conjunto de usuarios o clientes. Existen muchos tipos de servidores, por ejemplo: Servidor Web, Servidor de Base de Datos (Administra la base de datos para los usuarios de una red), Servidor de correo electrnico, servidor de aplicaciones, servidor de archivos, servidor de impresiones, etc. CLIENTE: Usuario que accede a un servidor con la finalidad de utilizar un servicio de este.
Pg. 5
PAGINA WEB: Documento electrnico que contiene texto, imgenes, sonido y video basado en hipertexto HTML. La extensin de este archivo es *.htm o *.html
HTML (HiperText Markup Language / Lenguaje Marcador de HiperTexto) Cdigo de hipertexto utilizado para construir o ensamblar una pgina web. Este cdigo viaja en tramas o paquetes por Internet utilizando el protocolo de transferencia http. NAVEGADOR (Browser) Programa que interpreta el hipertexto HTML para ensamblar y presentar la pgina web en la pantalla del usuario. Ejemplo: Internet Explorer, Opera, FireFox, Google Chrome, etc.
CONSTRUCCION Y MODIFICACIN DE UNA PGINA WEB

Para construir una pgina debemos utilizar el Lenguaje de Hipertexto HTML. Este lenguaje consta de un conjunto de etiquetas donde cada una de ellas representa elementos de la pgina que se van insertando de acuerdo a la necesidad del diseo. PASOS PARA CREAR UNA PAGINA WEB USANDO BLOCK DE NOTAS: 1. Abrir el block de notas 2. Escriba el cdigo HTML 3. Grabe el archivo en alguna carpeta especfica. No olvide colocarle la extensin *.HTM (El archivo creado presentar el icono de una pgina web). Ejemplo: principal.htm 4. Haga doble clic sobre el archivo anteriormente creado para ver la ejecucin de la pgina. PASOS PARA CREAR UNA PAGINA DREAMWEAVER: 1. Abrir Macromedia Dreamweaver WEB USANDO MACROMEDIA

2. 3. 4. 5.
Pg. 6
Escoger : Crear Nuevo : HTML Mantngase en la ficha Cdigo Escriba el cdigo HTML Acceda al men Archivo / Guardar. Grabe el archivo en alguna carpeta especfica. Indique el nombre del archivo Ejemplo: principal La extensin ser asignada automticamente por el Dreamweaver 6. Haga doble clic sobre el archivo anteriormente creado para ver la ejecucin de la pgina. PASOS PARA MODIFICAR UNA PAGINA WEB USANDO BLOCK DE NOTAS: 1. Abrir la pgina web que desea modificar 2. Haga clic derecho sobre la pgina web 3. Escoger: Men Ver / Cdigo Fuente 4. Haga las modificaciones 5. Grabe los cambios / Men Archivo Guardar 6. Cierre la ventana del cdigo HTML 7. Haga doble clic para visualizar la ejecucin de la pgina PASOS PARA MODIFICAR UNA PAGINA WEB USANDO DREAMWEAVER 1. Click Derecho sobre el archivo de la pgina web que desea modificar 2. Escoger: Abrir con / Adobe Dreamweaver 3. Mantngase en la ficha Cdigo 4. Modifique el cdigo HTML 5. Acceda al men Archivo / Guardar. 6. Haga doble clic sobre el archivo anteriormente modifcado, para ver la ejecucin de la pgina.
FUNDAMENTOS DE HTML
DIRECTIVAS DE HTML Bsicamente, el HTML consta de una serie de rdenes o directivas, que indican al navegador que estemos utilizando, la forma de representar los elementos (texto, grficos, etc...) que contenga el documento. Tipos de Directivas: Las directivas de HTML pueden ser de dos tipos: 1. Directivas cerradas 2. Directivas abiertas. Las directivas cerradas: Son aquellas que tienen una palabra clave que indica el principio de la directiva y otra que indica el final. Entre la directiva inicial y la final se pueden encontrar otras directivas. Este tipo de directivas aplican su accin a un mbito o alcance.
Pg. 7
Las directivas abiertas: Constan de una sola palabra clave que indica una accin especifica. Para diferenciar las directivas del resto del texto del documento se encierran entre los smbolos < >
Nota:
Una directiva puede contener "parmetros". Los cuales configuran o personalizan la accin de la directiva.
Ejemplo : Directiva cerrada (Tiene un inicio y fin)

<CENTER> Mi pgina Web </CENTER>
El texto comprendido entre las directivas se presentar centrado.
Ejemplo : Directiva abierta (Solo indica una accin) <HR>
Representa una accin: Crea una lnea horizontal.
Ejemplo: Directiva con parmetros <BODY bgcolor=yellow> </BODY>
La directiva BODY usa el parmetro bgcolor para pintar el fondo de la pgina de color amarillo.
Los archivos que contienen documentos HTML suelen tener la extensin .html o .htm. En esta separata se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML: 1) Las directivas se indican en letra mayscula y en negrilla. 2) Los parmetros de las directivas se indican en letra minscula y negrilla. 3) El resto de elementos se indican en letra normal. 4) Las palabras a resaltar en el texto se indican en cursiva y negrilla. ESTRUCTURA BSICA DE UN DOCUMENTO HTML Toda pgina web basada en HTML tiene la siguiente estructura: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Inicio del documento. Inicio de la cabecera. Inicio del ttulo del documento. Final del ttulo del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documento.
Universidad Privada Telesup CABECERA DEL DOCUMENTO
Pg. 8
La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el ttulo de la pgina por medio de la directiva <TITLE></TITLE>. Este ttulo ser el que aparezca en la barra de nuestro navegador de pginas Web. Ejemplo : <TITLE>Universidad Privada Telesup </TITLE> Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La directiva <META> indica al navegador de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la pgina en sus bases de datos. La directiva <META> lleva generalmente dos parmetros, name y content. Ejemplos : <META name = "Pagina de Jose" content = "Mi pagina personal, Musica y Peliculas"> Indica al navegador el nombre de la pgina y sus contenidos principales. <META name = "keywords" content = "Jose musica peliculas links Per"> Indica al navegador las palabras clave para los buscadores de Internet. Otro uso de la directiva <META> es la de indicar documentos con "actualizacin automtica". Si se indica una DIRECCION URL se sustituir el documento por el indicado una vez transcurridos el nmero de segundos especificados. Si no se incluye ninguna URL se volver a cargar en el navegador el documento en uso transcurridos los segundos indicados. Esto es til para pginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra pgina Web a una nueva direccin donde se encuentra una versin actualizada de nuestra pgina Web. Ejemplo : <META http-equiv="refresh" content = "15;URL=http://www.microsoft.com"> Transcurridos 15 segundos se acceder a la pgina Web de Microsoft. La directiva <BASE> indica la localizacin de los archivos, grficos, sonidos, etc... a los que se hace referencia en nuestra pgina Web. Si no se incluye esta directiva el navegador entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra pgina Web. Ejemplo : <BASE href = "http://www.utelesup.com/jose/">
Universidad Privada Telesup CUERPO DEL DOCUMENTO
Pg. 9
La directiva <BODY></BODY> indica el inicio y final de nuestra pgina Web. Ser entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra pgina, textos, grficos, enlaces, etc.... Esta directiva tiene una serie de parmetros opcionales que nos permiten indicar la "apariencia" global del documento. Ejemplos del uso de la directiva body: <BODY background=/imagenes/tapiz.jpg text=yellow> </BODY> Coloca en el fondo de la pgina web una tapiz correspondiente al contenido de tapiz.jpg que se encuentra dentro de la carpeta imgenes. <BODY bgcolor=blue text=yellow> </BODY> Coloca el color del fondo de la pgina a un color azul y el color del texto a amarillo. Parmetros de la Directiva BODY background= "nombre del archivo grafico" Indica el nombre de un archivo grfico que servir como "fondo" de nuestra pgina. Si la imagen no rellena todo el fondo del documento, esta ser reproducida tantas veces como sea necesario. Se pueden utilizar imgenes *.jpg, *.bmp. bgcolor = "cdigo de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parmetro background. text = "cdigo de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link = "cdigo de color" Indica el color de los textos que dan acceso a un Hipervnculo. Por defecto es azul. vlink = "cdigo de color" Indica el color de los textos que dan acceso a un Hipervnculo que ya hemos visitado con nuestro navegador. Por defecto es prpura. EL CDIGO DE COLOR: Con la finalidad de establecer una tonalidad de color en HTML, se utiliza un nmero compuesto por tres pares de cifras hexadecimales que indican la proporcin de los colores primarios: rojo, verde y azul. El cdigo de color se antecede del smbolo #.

Ejemplos de tonalidad de color en Hexadecimal: #000000 #FF0000 #00FF00 #0000FF #FFFFFF Color Negro Color Rojo Color Verde Color Azul Color Blanco
Pg. 10
El primer par de cifras indican la proporcin de color Rojo, el segundo par de cifras la proporcin de color Verde y las dos ltimas la proporcin de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores. Ejemplo: <BODY bgcolor=#aa6533> </BODY> Este color de fondo representa: En Numeracin Hexadecimal Rojo aa Verde 65 Azul 33
En Numeracin Decimal 170 117 51
Rango Disponible en Numeracin Decimal 0 a 255 0 a 255 0 a 255
De cualquier forma la mayora de los editores de HTML nos permiten obtener el cdigo de color correspondiente escribindolo directamente en ingls. Ejemplo: <BODY BGCOLOR=#0000ff TEXT=yellow LINK=white VLINK=cyan> </BODY> Establece el fondo de la pagina de color azul, el color de texto amarillo, el color de los hipervnculo blanco y el color de los hipervnculos que ya fueron visitados de color cyan. JUEGO DE CARACTERES DEL DOCUMENTO Todos los navegadores de pginas Web actuales soportan todos los caracteres grficos del la especificacin ISO 8859-1, que permiten escribir textos en la mayora de los pases occidentales. De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el cdigo ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un cdigo numrico o un nombre de "entidad". Asimismo hay caracteres que se utilizan para las directivas de HTML, por ejemplo < y >. Estos caracteres pueden ser representados por un cdigo numrico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el smbolo & (ampersand) y terminan con el smbolo; (punto y coma).
Pg. 11
A continuacin veamos una tabla con las principales entidades:

Carcter ! # % ' ) + / ; = ? [ ] _ { } Cdigo ! # % ' ) + - / ; = ? [ ] _ { } ¢ ¤ ¦ ¨ ª ¬ ® ° ² ´ ¶ ¸ Entidad Carcter Cdigo Entidad ----------------nbsp cent curren brvbar uml ordf not reg deg sup2 acute para cedil " $ & ( * , . : < > @ \ ^ ` | ~ " $ & ( * , . : < > @ \ ^ ` ---------------
| -~ -¡ iexcl £ pound ¥ yen § sect © copy « laquo shy ¯ macr ± plusmn ³ sup3 µ micro · middot ¹ sup1

º ¼ ¾ À Â Ä Æ È Ê Ì Î Ð Ò Ô Ö Ø Ú Ü Þ à â ä æ è ê ì î ð ò ô ö ordm frac14 frac34 Agrave Acirc Auml AElig Egrave Ecirc Igrave Icirc ETH Ograve Ocirc Ouml Oslash Uacute Uuml THORN agrave acirc auml aelig egrave ecirc igrave icirc eth ograve ocirc ouml » raquo ½ frac12 ¿ iquest Á Aacute Ã Atilde Å Aring Ç Ccedil É Eacute Ë Euml Í Iacute Ï Iuml Ñ Ntilde Ó Oacute Õ Otilde × times Ù Ugrave Û Ucirc Ý Yacute ß szlig á aacute ã atilde å aring ç ccedil é eacute ë euml í iacute ï iuml ñ ntilde ó oacute õ otilde ÷ divide
Pg. 12

ø ú ü þ oslash uacute uuml thorn ù ugrave û ucirc ý yacute ÿ yuml
Pg. 13
Por lo tanto la palabra pgina la podramos escribir como : pgina página página Es por ello que si deseamos que cualquier navegador de pginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o cdigos para representarlas. ESPACIADOS Y SALTOS DE LNEA En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios sern ignorados por el navegador. Ejemplo Esto es una Se ver como frase Esto es una frase
DIRECTIVA <PRE></PRE> Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de directivas que indican estos cdigos. La directiva <PRE></PRE> obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.. Ejemplo <PRE> Este texto Se ver como ha sido Este texto ha sido
preformateado . </PRE>
preformateado .
DIRECTIVA <BR> y DIRECTIVA <P > Para indicar un salto de lnea se utiliza la directiva <BR> y para un cambio de prrafo (deja una lnea en blanco en medio) se utiliza la directiva <P>. Ejemplo Se vera como
Este texto tiene Este texto tiene<BR>saltos de lnea y saltos de lnea y <P> de prrafo. de prrafo.
Pg. 14
La directiva <P> puede usarse tambin como directiva "cerrada" <P></P> indicando de esta manera los atributos de un prrafo en concreto. Cuando se usa de esta manera tiene el parmetro align que indica al navegador la forma de "justificar" el prrafo. Los valores posibles de este parmetro son LEFT, RIGHT, CENTER y JUSTIFY. Ejemplo Se ver como
Este es un ejemplo de <P Align=right>Este es un ejemplo de un prrafo de texto prrafo de texto justificado a justificado a la derecha.</P> la derecha <P Align=center>Este es un ejemplo de prrafo de texto centrado.</P> Este es un ejemplo de prrafo de texto centrado
Este es un ejemplo de <P Align=justify>Este es un ejemplo de prrafo de texto prrafo de texto justificado centrado.</P> (todas las lneas terminan simtricamente iguales.) DIRECTIVA <HR> La directiva <HR> muestra una lnea horizontal de tamao determinable. Tiene los siguientes parmetros opcionales: align = posicion Alinea la lnea a la izquierda (left), a la derecha (right) o la centra (center). noshade No muestra sombra, evitando el efecto en tres dimensiones. size = numero Indica el grosor de la lnea en pxeles. width = num / % Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la ventana del navegador. Tambin se puede especificar un nmero que indicara el ancho de la lnea en pxeles. Ejemplo : <HR align=center size=5 width=50%> La directiva <HR> sin ningn parmetro mostrara una lnea horizontal que ocupara todo el ancho de la pgina. Estas lneas sencillas son las que ves en este manual para separar las diferentes secciones
Pg. 15
CABECERAS (Tipos de texto para cabeceras)

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva ser el afectado por las cabeceras. La cabecera <H1> ser la que muestre el texto en mayor tamao. Ejemplo <H1>Texto de Prueba</H1> <H2>Texto de Prueba</H2> <H3>Texto de Prueba</H3> <H4>Texto de Prueba</H4> <H5>Texto de Prueba</H5> <H6>Texto de Prueba</H6> Se vera como
Texto de prueba
Texto de Prueba
Texto de Prueba
Texto de Prueba
Texto de Prueba
Texto de Prueba
Los textos marcados como "cabeceras" provocan automticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Por ejemplo Ejemplo <H3>Pagina de Jos</H3>Esta es mi pgina personal. Se vera como Pagina de Jos Esta es mi pgina personal
ATRIBUTOS DEL TEXTO

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que segn el navegador que est ud. utilizando, ver el resultado correctamente o no.
Atributo Negrita Cursiva Teletype Directiva <B></B> <I></I> <TT></TT> <S></S> <BLINK></BLINK> <SUB></SUB> Ejemplo <B>Texto de prueba</B> <I>Texto de prueba</I> <TT>Texto de prueba</TT> <U>Texto de prueba</U> <S>Texto de prueba</S> <BLINK>Texto de prueba</BLINK> <SUP>Texto de prueba</SUP> <SUB>Texto de prueba</SUB> Resultado Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba
Texto de prueba
Subrayado <U></U> Tachado Parpadeo
Superndice <SUP></SUP> Subndice Centrado
Texto de prueba
<CENTER></CENTER> <CENTER>Texto de prueba</CENTER>
Texto de prueba

DIRECTIVA <FONT></FONT>
Pg. 16
Por otro lado la directiva <FONT></FONT> nos permite variar el tamao, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parmetros size, bgcolor y face. size = valor Da al texto un tamao en puntos determinado. size = +/- valor Da al texto un tamao tantas veces superior (+) o inferior (-) como indique el valor. color = "cdigo de color" Escribe el texto en el color cuyo cdigo se especifica. face = "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en las fuentes se usar el font predeterminado del navegador. Ejemplo Se vera como de
<FONT size=+2 color="#FF0000 face="Arial"> Texto de prueba Texto </FONT> prueba
Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto. Directiva <STRONG></STRONG> <CITE></CITE> <STRIKE></STRIKE> Hace lo mismo que <B></B> <I></I> <S></S>
TEXTO EN MOVIMIENTO
DIRECTIVA <MARQUEE></MARQUEE> Podemos poner un texto que se desplace por la pantalla; esto recibe el nombre de Marquesina (marquee en ingls). La etiqueta es... <MARQUEE> Este texto se desplaza </MARQUEE> Parmetros del Marquee WIDHT, HEIGHT ajustan el ancho y alto de la marquesina. Pueden ser igual a un nmero de pixels, o a un porcentaje de la pantalla...
Pg. 17
BEHAVIOR (comportamiento en ingls) definir la forma de ejecutar el desplazamiento del texto. Sus valores pueden ser: BEHAVIOR=SCROLL (el texto aparecer por el lado derecho y desaparecer por el izquierdo). BEHAVIOR=SLIDE (el texto aparecer por el lado derecho y se detendr al llegar al izquierdo). BEHAVIOR=ALTERNATE... lo ponemos en una pgina y vemos qu pasa...
BGCOLOR="#FF0000" (color de fondo de la marquesina). DIRECTION=LEFT o RIGHT (modifica la direccin de desplazamiento). SCROLLAMOUNT=XX (define la cantidad de desplazamiento en en pixeles de cada movimiento de avance). LOOP=XX (veces que el texto aparecer, si no est, aparecer indefinidamente). HSPACE=XX, VSPACE=XX (separa la marquesina del texto de la pgina en lo horizontal y vertical tantos pxeles como se le indique).
Ejemplos: <MARQUEE WIDTH=70% HEIGHT=60> Esta marquesina ocupa el 70 % del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE> <MARQUEE BEHAVIOR=ALTERNATE>Movimiento alternado de izquierda a derecha y viceversa</MARQUEE>
COMENTARIOS
Para incluir comentarios en la pgina Web se utiliza la directiva . Ejemplo :  Los comentarios no sern mostrados por el navegador y son tiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos mas adelante que la directiva de comentario nos ser de utilidad para incluir cdigo JavaScript en nuestra pagina Web.
LISTAS DE ELEMENTOS
Existen tres tipos de listas: Lista numeradas, Lista sin numerar Lista de definicin.
Pg. 18
LAS LISTAS NUMERADAS: Representarn los elementos de la lista numerando cada uno de ellos segn el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista ir precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parmetros: start = num Indica que nmero ser el primero de la lista. Si no se indica se entiende que empezar por el nmero 1. type = tipo Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista ordenada numricamente. Los tipos posibles son: 1 = Numricamente. (1,2,3,4,... etc.) a = Letras minsculas. (a,b,c,d,... etc.) A = Letras maysculas. (A,B,C,D,... etc.) i = Nmeros romanos en minsculas. (i.ii,iii,iv,v,... etc.) I = Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.) Ejemplo en cdigo HTML Resultado <OL> <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </OL> <OL type=A > <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </OL> 1. Espaa 2. Francia 3. Italia 4. Portugal
A. Espaa B. Francia C. Italia D. Portugal
LAS LISTAS SIN NUMERAR : Representan los elementos de la lista con una "vieta" o marca que antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el parmetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un circulo o un cuadrado. Ejemplo en cdigo HTML <UL type=disk> Resultado Espaa

<LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </UL> <UL type=square> <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </UL> Francia Italia Portugal
Pg. 19
Espaa Francia Italia Portugal
IMGENES
DIRECTIVA <IMG></IMG> Hasta el momento hemos visto como se puede escribir texto en una pgina Web, as como sus posibles formatos. Para incluir una imagen en nuestra pgina Web utilizaremos la directiva <IMG>. Hay dos formatos de imgenes que todos los navegadores modernos reconocen. Son las imgenes GIF, JPG, PNG. La directiva <IMG> tiene varios parmetros: src = "imagen" Indica el nombre del archivo grfico a mostrar. alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la pgina no sea capaz de visualizar la imagen. align = TOP / MIDDLE / BOTTOM Indica cmo se alinear el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior. border = tamao Indica el tamao del "borde" de la imagen. A toda imagen se le asigna un borde que ser visible cuando la imagen forme parte de un Hipervnculo. height = tamao Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. width = tamao Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. hspace = margen
Pg. 20
Indica el nmero de espacios horizontales, en puntos, que separarn la imagen del texto que la siga y la anteceda. vspace = margen Indica el nmero de puntos verticales que separaran la imagen del texto que le siga y la anteceda. ismap / usemap Indica que la imagen es un MAPA. Veremos estos parmetros mas adelante en esta separata. Ejemplo <IMG src="caution.gif" alt="Cuidado!!" > Se vera como
Si el navegador no pudiese visualizar el grfico.....
La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen. Ejemplo <IMG src= "http://www.microsoft.com/iexplorer.gif"> Veamos varios ejemplos "jugando" con los tamaos de la imagen, as como comprobando la alineacin de los textos. (Recuerde que en funcin del navegador que ud. utilice pueden verse o no los efectos de cada parmetro). Ejemplo Se vera como
<IMG src="caution.gif" width=100>
<IMG src="caution.gif" height=20> Atencion !!! <IMG src="caution.gif" align=TOP>Atencion !!!
<IMG src="caution.gif" align=MIDDLE>Atencion !!!
Atencion !!!
Pg. 21
<IMG src="caution.gif" align=BOTTOM>Atencion !!!
Atencion !!!
HIPERVNCULOS
DIRECTIVA <A></A> La caracterstica principal de una pgina Web es que podemos incluir Hipervnculos. Un Hipervnculo es un enlace de la pgina que hace que el navegador acceda a otro recurso, otra pgina Web, un archivo, etc... Para incluir un Hipervnculo se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los lmites de esta directiva ser sensible, esto quiere decir que si pulsamos con el ratn sobre el, se realzar la funcin de Hipervnculo indicada por la directiva <A></A>. Si el Hipervnculo esta indicado por un texto, este aparecer subrayado y en distinto color, si se trata de una imagen, esta aparecer con un borde rodendola. Esta directiva tiene el parmetro href que indica el lugar a donde nos llevar el Hipervnculo si lo pulsamos. Ejemplo Se vera como
<A href = "http://www.microsoft.com/"> Pulse para ir a la pgina Pulse para ir a la pgina de de Microsoft</A> Microsoft Si situamos el ratn encima de la frase y pulsamos, el navegador acceder a la pgina Web indicada por el parmetro href, es decir, acceder a la pgina situada en http://www.microsoft.com/ Lo mismo podramos hacer con un grfico. Ejemplo Para buscar en Internet : <A href = "http://www.google.com/" > <IMG src = "google.gif"></A> Se vera como Para buscar en Internet :
Pulsando sobre la imagen se accedera a la pgina situada en http://www.google.com/. Marcar una Seccin en la pgina web Un Hipervnculo tambin puede llevarnos a una zona de nuestra pgina. Para ello debemos marcar en nuestra pgina las diferentes secciones en las que se divide. Lo haremos con el parmetro name. Ejemplo:

<A name = "seccion1"></A>
Pg. 22
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccin se llamar seccion1. Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos de la siguiente forma: <A href = "#seccion1">Primera Parte</A> O tambin : <A href = "http://www.jet.es/mipagina.htm#seccion1">Primera Parte</A> Un Hipervnculo puede hacerse a cualquier tipo de archivo. Ejemplo Ejemplo: <A href = "tutor.pdf">Manual de HTML</A> Asimismo podemos hacer que el Hipervnculo de como resultado el envo de un correo electrnico a una direccin de correo determinada. Ejemplo: <A href = "mailto:joseatunga@yahoo.com">Envame tus sugerencias</A> El parmetro onMouseOver permite que se muestre en la barra inferior del navegador un texto explicativo sobre el Hipervnculo, en vez de mostrar su direccin. Este parmetro no funciona en todos los navegadores.
TABLAS
DIRECTIVA <TABLE></TABLE> Una tabla es una manera muy compacta y clara de mostrar la informacin. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra. Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR>.. </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo. El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas anteriormente Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineacin del contenido de la celda, y mucho ms.
Pg. 23
Para entender mejor el comando <TABLE> ... </TABLE>, est disponible una muy amplia gama de ejemplos. Ejemplo de tabla: Aqu se muestra una tabla muy simple: <TABLE> <TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR> <TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR> <TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR> </TABLE> Ttulo de la tabla Es conveniente que las tablas tengan un ttulo que las identifique y aclare su contenido. Aunque ese ttulo puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma: <TABLE> <CAPTION> Nombre de la tabla </CAPTION> . </TABLE> Esta etiqueta tiene la ventaja que el texto formateado se coloca automticamente en el centro de la anchura de la tabla. Bordes de la tabla Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta <TABLE>. La sintaxis es: <TABLE BORDER="anchura"> . </TABLE> Donde anchura indica la anchura en pixels del borde exterior de la tabla. El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica solo afecta a los bordes externos. El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes interiores, debemos hacer BORDER=1. Cabeceras de filas y de columnas La inclusin de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla.
Pg. 24
No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado como el de las otras celdas. Tamao de la tabla Por defecto el tamao de la tabla viene dado por el texto o los grficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla. La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta <TABLE>. La sintaxis es: <TABLE WIDTH="anchura"> </TABLE> Aqu anchura puede ser un nmero que especifique en pixels la anchura absoluta de la tabla, o bien un porcentaje que indique la anchura de la tabla en relacin a la anchura del rea del documento del navegador. A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una anchura mayor, la tabla tomar la anchura mnima para que el texto de las celdas pueda verse ntegramente. Justificacin de la tabla Por defecto, nuestra tabla quedar justificada a la izquierda. La forma de centrarla es mediante la etiqueta <CENTER>. Espacio dentro de las celdas Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista ms espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores: CELLPADDING: establece la distancia mnima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1. CELLSPACING: establece la anchura en pixels de los bordes de cada celda. Ejemplo: <TABLE BORDER="anchura" CELLPADING=4> . </TABLE> <TABLE BORDER="anchura" CELLSPACING=4> . </TABLE>

FORMA DE LAS CELDAS INDIVIDUALES DIRECTIVA <TD></TD>
Pg. 25
Justificacin del texto de las celdas. HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo es: <TABLE> <TR> <TD ALIGN=horizontal VALIGN=vertical> .. </TD> </TR> . </TABLE> donde: horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT. vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER. Si queremos que una determinada justificacin horizontal o vertical afecte a todas las celdas de una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>. Celdas de diferentes tamaos. Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamao. Sin embargo, es posible establecer el tamaos de una determinada celda mediante dos modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT: WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla. HEIGHT: establece la altura de una celda individual. No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La nica forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y HEIGHT.
Pg. 26
Celdas irregulares (Combinar Celdas) Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma de hacerlo es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>: COLSPAN= especifica la cantidad de celdas (a modo de columna) que se desea combinar. ROWSPAN: especifica la cantidad de celdas (a modo de fila) que se desea combinar. Color de cada celda. Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres. Texto en una solo lnea Si hemos indicado la anchura de una celda y sta es menor que el texto incluido en ella, y queremos que el texto no ocupe ms lneas, sino que se ample la anchura de la celda, debemos aadir el modificador NOWRAP dentro de la etiqueta <TD>.
<HTML> <HEAD> <TITLE>Ejemplo 7 - Tablas</TITLE> </HEAD> <BODY> <CENTER><H1>Tablas</H1></CENTER> <H2>Demostracion de COLSPAN y Encabezados</H2> <TABLE WIDTH="100%" BORDER="1"> <TR> <TH COLSPAN="2">Head1</TH> <TH COLSPAN="2">Head2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE> </BODY> </HTML>
FORMULARIOS
DIRECTIVA <FORM></FORM> Los formularios nos permiten dentro de una pgina Web solicitar informacin al visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los
Pg. 27
cuales quedar asociado a una variable. Una vez se hayan introducido los valores en los campos o controles, el contenido de estos ser enviado a un lugar destino definido en el parmetro ACTION del la directiva <FORM></FORM>. La declaracin del formulario se pone entre las directivas <FORM></FORM>. En el interior de la declaracin se indican los controles de entrada. La directiva <FORM> tiene los parmetros action y method. action = "programa" Indica el lugar destino hacia donde se enviarn los datos recogidos en el formulario. method = POST / GET Indica el mtodo de transferencia de datos recogidos por el formulario. El mtodo POST enva datos a travs de la entrada estndar STDIO en otras palabras se pasa los datos codificados en el flujo de datos HTTP y los datos no son visibles para los usuarios. El mtodo GET enva los datos usando la URL. Ejemplo: <form name=frmdatos action=procesar.php method=get> </form> CONTROLES DEL FORMULARIO Los controles son objetos del formulario que permiten el ingreso de datos, los controles ms utilizados son: Caja de texto Caja de texto para password Casilla de verificacin Botn de Opcin Lista Desplegable Cuadro de rea de texto Campo oculto Botn de Comando Botn de Accin Botn de Reinicio
Para la introduccin de la mayora CONTROLES se utiliza la directiva <INPUT>. Esta directiva tiene el parmetro type que indica el tipo de control y name que indica el nombre que se le dar al control. Cada tipo de control tiene sus propios parmetros.
CONTROL CUADRO DE TEXTO

Indica que el campo a introducir ser un texto. Codigo HTML: <input type=type name=txtnombre maxlenght=30 size=30 value=>

Sus parmetros son: maxlenght = numero Nmero mximo de caracteres a introducir en el campo. size = numero Tamao en caracteres que se mostrar en pantalla. value = "texto" Valor inicial del campo. Normalmente ser " ", o sea, vaco. Ejemplo: Inserta dentro del formulario un control caja de texto <form method=post action=procesa.php> Ingrese sus apellidos <input type=text name=txtapellidos> <form>
Pg. 28
CUADRO DE TEXTO PARA PASSWORD

Indica que el campo ser una palabra de paso. Mostrar asteriscos (*) en lugar de las letras escritas. Sus parmetros opcionales son los mismos que para text. Codigo HTML: <input type=password name=txtclave size=6>
CASILLA DE VERIFICACIN (CHECKBOX)

El campo se elegir marcando una casilla. Se permite marcar varias casillas. Los valores de las casillas sern indicados por: checked La casilla aparecer marcada por defecto. Codigo HTML:
Seleccione sus temas <input type=checkbox <input type=checkbox <input type=checkbox de inters<br> name=chkmusica value=Musica checked>Musica<br> name=chkdeportes value=Deportes>Deporte<br> name=chklectura value=Lectura>Lectura<br>
Explicacin: Creamos 3 casillas de verificacin de las cuales se podr seleccionar una o varias opciones, cada opcin tiene un valor asociado diferente.
Universidad Privada Telesup BOTON DE OPCION (RADIO)
Pg. 29
El campo se elegir marcando una opcin. Solo permite marcar una sola opcin. Los valores de las casillas sern indicados por : value = "valor" Cdigo HTML:
Seleccione sus temas de inters<br> <input type=radio name=rbidioma value=Ingls>Ingls<br> <input type=radio name=rbidioma value=Frances>Frances<br> <input type=radio name=rbidioma value=Italiano>Italiano<br>
Explicacin: Creamos 3 botones de opcin los cuales pertenecen a un solo grupo, de las cuales solo se podr seleccionar una opcin, cada opcin tiene un valor asociado diferente.
CONTROL INVISIBLE
El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parmetro: Cdigo HTML: <input type=hidden name=txttipo value=3>
BOTON DE COMANDO PARA ENVIO DE DATOS

Representa un botn. Al pulsar este botn la informacin de todos los campos se enva al destino especificado en el parmetro ACTION de la directiva FORM. Tiene el parmetro value = "texto" que indica el texto que aparecer como etiqueta del botn. Codigo HTML: <input type=submit name=btnenviar value=Enviar>
BOTON DE COMANDO PARA CANCELAR ENVIO DE DATOS

Representa un botn. Al pulsar este botn se borra el contenido de todos los campos. El parmetro value = "texto" indica el texto que aparecer en el botn. Codigo HTML: <input type=reset name=btnlimpiar value=Limpiar>
BOTON DE ACCIN
Representa un botn. Al pulsar este botn se puede activar una accin definida en una funcin JavaScript. El parmetro value = "texto" indica el texto que aparecer en el botn. Codigo HTML:

<input type=buttom name=btnaccion value=Mostrar>
Pg. 30
LISTA DESPLEGABLE (ComboBox)

Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la directiva <SELECT> </SELECT>. Sus parmetros son: name = campo Nombre del campo size = num Nmero de opciones visibles. Si se indica 1 se presenta como un men desplegable, se indica ms de uno se presenta como una lista con barra de desplazamiento. mltiple Permite seleccionar ms de un valor para el campo. Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede incluir el parmetro selected para indicar cul es la opcin por defecto. En caso de que no se especifique, se tomara por defecto la primera opcin de la lista. Cdigo HTML: <SELECT NAME=cbociudad > <OPTION value=Lima selected>Lima</OPTION> <OPTION value=Tacna>Tacna</OPTION> <OPTION value=Arequipa>Arequipa</OPTION> <OPTION value=Huaraz>Huaraz</OPTION> </SELECT>
CONTROL DE AREA DE TEXTO

Representa un campo de texto de mltiples lneas. Normalmente se utiliza para que se incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parmetros : name = campo Nombre del campo. cols = num. Numero de columnas de texto visibles. rows = num. Numero de filas de texto visibles. wrap = VIRTUAL / PHYSICAL Justifica el texto automticamente en el interior de la caja. La opcin PHYSICAL enva las lneas de texto separadas en lneas fsicas. La opcin VIRTUAL enva todo el texto seguido.
Pg. 31
Veamos a continuacin un ejemplo de formulario utilizando todas las formas de introduccin de datos.
<FORM action="procesar.php" method=post> Tu Nombre:<INPUT type=text name=nombre size=30> Tu Clave: <INPUT type=password name=clave size=8> <P> Archivos a Enviar: <INPUT type=checkbox name=archivo1 value="Manual">Manual de Html <INPUT type=checkbox name=archivo2 value=Mapthis">Programa Mapthis <INPUT type = checkbox name=archivo3 value="Help" >Archivo de Ayuda <P> Tu Edad : <INPUT type=radio name=edad value="-20">Menos de 20 aos <INPUT type=radio name=edad value="20-40">Entre 20 y 40 aos <INPUT type=radio name=edad value="+40">Mas de 40 aos <P> <INPUT type=hidden name=lugar value="pgina personal"> Como encontraste mi pgina: <SELECT name=donde> <OPTION>De casualidad</OPTION> <OPTION>Por el buscador Ole</OPTION> <OPTION>Por el buscador Yahoo</OPTION> <OPTION>Me la comentaron </SELECT> <P> Tus Comentarios: <BR> <TEXTAREA name=comentario rows=5 cols=40 wrap=virtual></TEXTAREA> <P> <INPUT type=submit value="Enviar"> <INPUT type=reset value="Borrar"> </FORM>
Ahora veamos el efecto producido en la pgina Web: Principio del formulario Tu Nombre: Archivos a Enviar: Manual de Html Tu Edad : Menos de 20 aos Entre 20 y 40 aos Mas de 40 aos Como encontraste mi pgina : Tu Clave: Programa Mapthis Archivo de Ayuda

De casualidad
Pg. 32
Tus Comentarios:
Enviar
Borrar
Final del formulario
Pg. 33
PRIMERA SEMANA Marco Prctico Actividad 1

Objetivo: Que el alumno domine las distintas directivas HTML con la finalidad de crear una pgina web a su medida. Crear un sitio web basado en cdigo HTML donde puedas aplicar todas las directivas aprendidas en esta leccin e investigando otras. Esta aplicacin debe cumplir las siguientes caractersticas: Debes dividir la ventana del navegador en dos partes verticalmente usando frames. En el frame izquierdo se encontrarn los siguientes hipervnculos: o Mis datos Personales o Mi Formacin Profesional o Mi fotos o Mis videos o Mis Canciones Preferidas o Djame tus datos El contenido de cada uno de los hipervnculos debe presentarse en el frame Derecho.
NOTA: Usar la mejor presentacin posible, usando los colores apropiados, alineacin y distribucin simtrica. Debes alojarlo en un servidor web gratuito y conseguir una direccin URL pblica; luego enva un correo electrnico al profesor informando la direccin de tu pgina.
Pg. 34
SEGUNDA SEMANA Marco Terico

Logro Que el alumno construya funciones JavaScript y que los asocie a gestores de eventos para enriquecer la interactividad de la pgina en modo cliente. Resumen JavaScript es un script que se ejecuta en el navegador del cliente, est basado en objetos, permite procesar los datos que se ingresan mediante un formulario, y permite manejar eventos. El cdigo se escribe dentro de la diretiva <SCRIPT> del HTML.
Tpicos bsicos de la programacin web Cliente usando JavaScript

Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseado especficamente para el desarrollo de aplicaciones cliente-servidor dentro del mbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos, etc. Donde insertar el cdigo JavaScript
Existen distintos modos de incluir lenguaje JavaScript en una pgina HTML, la forma ms frecuente de hacerlo es utilizando la directiva <script> en un documento HTML (se pueden incluir tantas directivas <script> como se quiera en un documento). El formato es el siguiente: <SCRIPT LANGUAGE="JAVASCRIPT 1.3"> </SCRIPT>
El atributo language hace referencia a la versin de JavaScript que se va a utilizar en dicho script. Otro atributo de la directiva script es src, que puede usarse para incluir un archivo externo que contiene JavaScript y que quiere incluirse en el cdigo HTML. <script language="JavaScript" src="archivo.js"> </script> El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuya extensin es js.

Puede incluirse tambin cdigo JavaScript como respuesta a algn evento: <input type="submit" onclick="alert('Acabas de hacer un click');return false;" value="Click">
Pg. 35
Se ha programado mediante Javascript el evento onclick del botn. Cuando se lleve a cabo el evento click aparecer una ventana emergente con el mensaje Acabas de hacer un click. GESTORES DE EVENTOS EN JAVASCRIPT Los eventos son sucesos que ocurren, en la programacin es lo mismo, los eventos estn asociados a los sucesos que ocurren a un determinado objeto por accin del usuario o por accin del mismo sistema. Se puede asociar a la ocurrencia de un determinado evento la ejecucin de una determinada accin JavaScript.
Gestores de Eventos
Gestor de Evento onDragDrop onError onFocus onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOver onMouseOut onMouseUp onMove onReset onResize onSelect onSubmit onUnLoad onChange Ocurre al Arrastrar un objeto a la ventana del navegador. Producirse un error en la carga de un documento Posicionarse en una ventana o cuadro de texto de un formulario Pulsar una tecla Pulsa o libera una tecla Soltar una tecla Cargar un documento en el navegador Pulsar un botn del ratn Mover el cursor Posicionar el puntero del ratn sobre un enlace Salir con el puntero del mouse de un enlace o imagen mapa Liberar un botn del ratn. Moverse una ventana. Esta accin tambin la puede realizar el script Pulsar sobre el botn reset del formulario. Cambiar el tamao de una ventana. Seleccionar una de las opciones de un cuadro combo del formulario. Pulsar el botn submit del formulario Salirse o cerrar la pgina. Actua al detectar un cambio de seleccin en una lista desplegable
Ejemplos con Java Script usando Gestores de Eventos Ejemplo 1 Elaborar una pgina web que cambie el color del fondo de la pgina al presionar un botn de accin.
Pg. 36
Al desarrollar este ejemplo utilizaremos el gestor de eventos onclick asociado a cada botn de accin del formulario, al producirse el evento onClick se invoca a la funcin JavaScript quien cambia el color del fondo de la pgina. Colores.html 1. <HTML> 2. <HEAD> 3. <TITLE>Mensajes</title> 4. <script language="javascript"> 5. function changecolor(code) 6. { 7. document.bgColor=code; 8. } 9. </script> 10. </head> 11. <body> 12. <form> 13. <br><p> 14. <input type=button name=button1 Value="rojo pasion" onClick="changecolor('red')"> 15. <input type=button name=button2 Value="verde selva" onClick="changecolor('green')"> 16. <input type=button name=button3 Value="Azul profundo" onClick="changecolor('blue')"> 17. <input type=button name=button4 Value="Blanco" onClick="changecolor('white')"> 18. <input type=button name=button5 Value="petroleo" onClick="changecolor('teal')"> 19. <input type=button name=button6 Value="gris nublado" onClick="changecolor('gray')"> 20. <input type=button name=button7 Value="morado" onClick="changecolor('purple')"> 21. <input type=button name=button8 Value="marron" onClick="changecolor('brown')"> 22. <input type=button name=button9 Value="Anaranjado" onClick="changecolor('orange')"> 23. <input type=button name=button10 Value="Amarillo" onClick="changecolor('yellow')"> 24. <input type=button name=button11 Value="Celeste" onClick="changecolor('sky blue')"> 25. <input type=button name=button12 Value="Negro" onClick="changecolor('black')"> 26. <input type=button name=button13 Value="cafe" onClick="changecolor('marrown')"> 27. </form> 28. </body> 29. </html>
Comentario: El objeto document en JavaScript:

Con el objeto document controla la pgina web y todos los elementos que contiene. El objeto document es la pgina actual que se est visualizando en ese momento. Depende del objeto window, pero tambin puede depender del objeto frame en caso de que la pgina se est mostrando en un frame.

Ejemplo 2
Pg. 37
Elaborar una pgina web que direccione a otras direcciones URL al presionar un botn de accin. Al desarrollar este ejemplo tambin utilizaremos el gestor de eventos onclick asociado a cada botn de accin del formulario. Direccionar.html 1. <HTML> 2. <HEAD> 3. <TITLE>Mensajes</title> 4. <script language="javascript"> 5. function direccionar(code) 6. { 7. if(code==1){ 8. location.href="http://www.facebook.com"; 9. } 10. if(code==2){ 11. location.href="http://www.google.com"; 12. } 13. if(code==3){ 14. location.href="http://www.youtube.com"; 15. } 16. } 17. </script> 18. </head> 19. <body> 20. <form> 21. <br><p> 22. <input type=button name=button1 Value="Facebook" onClick="direccionar(1)"> 23. <input type=button name=button2 Value="Google" onClick="direccionar(2)"> 24. <input type=button name=button3 Value="YouTube" onClick="direccionar(3)"> 25. </form> 26. </body> 27. </html> Comentario: El objeto Location en JavaScript Es el encargado de guardar la informacin del URL actual. Cada propiedad posee una parte del URL. Este objeto carece de mtodos y de manejadores de eventos. Su finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL, y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso. En este ejemplo se utilizado location para direccionar a otra url.

Ejemplo 3
Pg. 38
Elaborar una pgina web que realice las cuatro operaciones aritmticas, primero seleccione el tipo de operacin y luego de la orden de operar Al desarrollar este ejemplo aprenderemos la forma de acceder a cada uno de los datos de los controles del formulario.
Operaciones.html
1. 2. 3. 4. 5. 6. 7. 8. 9. <HTML> <HEAD> <TITLE>Calculadora</TITLE> </HEAD> <script language=javascript> function operar() { if (calcu.roper[0].checked==true) { sumar() }
10. if (calcu.roper[1].checked==true) 11. { restar() } 12. if (calcu.roper[2].checked==true) 13. { multiplicar() } 14. if (calcu.roper[3].checked==true) 15. { dividir() } 16. } 17. 18. 19. 20. function sumar() { document.calcu.result.value=eval(calcu.valor1.value)+eval(calcu.valor2.value); }

21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. function restar() { document.calcu.result.value= eval(calcu.valor1.value)-eval(calcu.valor2.value); } function multiplicar() { document.calcu.result.value= eval(calcu.valor1.value)*eval(calcu.valor2.value); } function dividir() { if (eval(calcu.valor2.value)==0) {alert("Si el divisor es igual a cero, el resultado es INFINITO"); } document.calcu.result.value= eval(calcu.valor1.value)/eval(calcu.valor2.value); } </script> <BODY onLoad=document.calcu.valor1.focus() background=fondo51.jpg> <P align=center><FONT color=royalblue face=Tahoma size=5>OPERACIONES ARITMETICAS </U></FONT></P> <h2><P align=center>(Java Script)</P></h2> <h3><P align=center>Ingrese dos nmeros:</P></h3>
Pg. 39
<form name=calcu> <center> <table border=4 bgcolor=beige> <tr> <td><center>Valor 1:</center></td> <td><center><input name=valor1 value=0 align=middle title="Cuadro 1"></center></td> </tr> <tr> <td><center>Valor 2:</center></td> <td><center><input name=valor2 value=0></center></td> </tr> <tr> <td colspan=2><INPUT onclick=sumar() type=button value=Sumar> <INPUT onclick=restar() type=button value=Restar id=button1 name=button1> <INPUT onclick=multiplicar() type=button value=Multiplicar id=button2 name=button2> <INPUT onclick=dividir() type=button value=Dividir id=button3 name=button3> </td> </tr> <tr> <td colspan=2> <input type=radio name=roper onclick=sumar()>+ <input type=radio name=roper onclick=restar()><input type=radio name=roper onclick=multiplicar()>* <input type=radio name=roper onclick=dividir()>/ <input type=button value=operar onclick=operar();>

69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82.
Pg. 40
</td> </tr> <tr> <td><center>Resultado:</center></td> <td><center><input name=result value=0 align=middle border=3 readOnly></center></td> </tr> </table> <script> calcu.roper[2].checked=true; //Activa el radio por defecto </script> </center> </form> </BODY> </HTML>
Comentario: En este ejemplo empleado el gestor de eventos onLoad en la directiva BODY, el cual permite que el cursor se direccione hacia una caja de texto, luego que la pgina se haya cargado completamente. Al hacer un click en cualquiera de los botones de opcin del formulario se activa el gestor de evento onClick el cual llama a alguno de las funciones para realizar la operacin aritmtica, dentro de esta funcin podemos notar que para escribir dentro de un control, debemos acceder primero a travs del nombre del formulario, nombre del formulario y propiedad value. (Si lo desea inclusive antes del nombre del formulario, usted puede colocar el primer objeto document, pero este caso, document esta por defecto). La funcin eval() de JavaScript, convierte a numrico el dato que se encuentre dentro de la caja, para poder procesarlo matemticamente. La funcin alert() genera una caja de dialogo con un mensaje emergente. Ejemplo 4 Elaborar una pgina web que presente una imagen inicial y que luego sta imagen cambie automticamente al pasar el mouse sobre ella. Al desarrollar este ejemplo aprenderemos el uso de los gestores de eventos onMouseOver y onMouseOut Imagenes.html 1. <HTML> 2. <HEAD> 3. <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> 4. <TITLE></TITLE> 5. </HEAD> 6. <BODY background=fondo160.gif> 7. <center>

8. <A href="javascript://" onMouseOut="imagen.src='dog1.jpg'"; onMouseOver="imagen.src='dog2.bmp'"> 9. <IMG name=imagen src="dog1.jpg" height="200" width="200"> 10. </a> 11. </center> 12. </BODY> 13. </HTML>
Pg. 41
Comentario: El gestor de eventos onMouseOut, funciona cuando el puntero de mouse se encuentra fuera del rea del vnculo y el gestor de eventos onMouseOver, funciona cuando el puntero del mouse se encuentra sobre el rea del vnculo. Cada uno de estos gestores al ocurrir cambian el contenido de la imagen, el cual tiene el name=imagen en el cuerpo de la pgina. Ejemplo 5 Elaborar una pgina web que presente un banner con imgenes que cambian dinmicamente, al hacer un click Al desarrollar este ejemplo aprenderemos el uso del mtodo setTimeout() del objeto window. Hipergraficos.html 1. <HTML> 2. <HEAD> 3. <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> 4. <TITLE>Banner</TITLE> 5. </HEAD> 6. <script> 7. var auspicio=0; 8. function ir() 9. { if (auspicio==1) 10. { location.href="http://www.elcomercioperu.com.pe" } 11. if (auspicio==2) 12. { location.href="http://www.expreso.com.pe" } 13. if (auspicio==3) 14. { location.href="http://www.ojo.com.pe" } 15. if (auspicio==4) 16. { location.href="http://www.larepublica.com.pe" } 17. } 18. function rotar() {

19. auspicio++; 20. if(auspicio>4) { auspicio=1 } 21. if(auspicio==1) { 22. banner.src="comercio.png"; 23. window.status="El Comercio"; } 24. if(auspicio==2) { 25. banner.src="expreso.gif"; 26. window.status="El Expreso"; } 27. if(auspicio==3) { 28. banner.src="ojo.gif"; 29. window.status="El ojo"; } 30. if(auspicio==4) { 31. banner.src="republica.gif"; 32. window.status="La Republica"; } 33. window.setTimeout("rotar();",2000); 34. } 35. </script> 36. <BODY onLoad="rotar();" onunload=alert("Adios");> 37. <center> 38. <a href="javascript:ir();"> 39. <img src="expreso.gif" name=banner width="400" height="120"> 40. </a> 41. </center> 42. </body> 43. </html> 44. </BODY> 45. </HTML>
Pg. 42
Comentario: El mtodo setTimeout() del objeto window retarda la accin del programa; debe expresarse la cantidad de retardo en milisegundos. Tambin podemos ver el uso del gestor de evento onunload(), el cual se ocurre al cerrar la ventana. Ejemplo 6 Elaborar una aplicacin web que presente una lista desplegable con varias opciones de frutas, al seleccionar una de las opciones, mostrar la imagen y la descripcin de la fruta seleccionada. Al desarrollar este ejemplo aprenderemos capturar el valor seleccionado de una lista desplegable y el uso del gestor de evento onChange. frutas.html 1. <html> 2. <head>

3. <title>Frutas</title> 4. </head> 5. <script> 6. function vista() { 7. if(frutas.lista.value=="manzanas") 8. { document.imagen.src="manzanas.jpg"; 9. document.frutas.memo.value="Existen muchas variedades de manzanas"; } 10. if(frutas.lista.value=="mangos") 11. { document.imagen.src="mango.jpg"; 12. document.frutas.memo.value="La temporada de los mangos es en verano"; } 13. if(frutas.lista.value=="peras") 14. { document.imagen.src="peras.jpg"; 15. document.frutas.memo.value="Existen muchas variedades de peras"; } 16. } 17. </script> 18. <body bgcolor=beige> 19. <center><h2>Java Script</h2></center> 20. <hr> 21. En esta pgina encontrar informacin sobre su fruta favorita: 22. <p> 23. <table> 24. <form name=frutas> 25. <td width=20%> 26. </td> 27. <td> 28. Eliga su preferida:<br> 29. <select name=lista size=1 onchange=vista()> 30. <option value="#">Elige un elemento 31. <option value=manzanas>Manzanas 32. <option value=mangos>Mangos 33. <option value=peras>Peras 34. </select> 35. </td> 36. <td> 37. <img src=frutas.jpg name=imagen width=200 height=200> 38. </td> 39. <tr> 40. <td> 41. </td> 42. <td> 43. <br>Descripcin<br> 44. <textarea name=memo rows="10" cols="50"> 45. </textarea> 46. </td>
Pg. 43

47. </form> 48. </table>
Pg. 44
Comentario: El gestor de eventos onChange ocurre al cambiar una opcin seleccionada de la lista desplegable Ejemplo 7 Elaborar una aplicacin web que divida la pantalla del navegador en dos columnas usando Frames, en el frame izquierdo debe aparecer una lista desplegable con los diferentes diarios, al seleccionar un diario, automticamente debe mostrarse en el frame de la derecha el contenido de la pgina seleccionada Al desarrollar este ejemplo aprenderemos a direccionar una pgina web, dentro de un frame. principal.html Esta pgina divida la pantalla del navegador en dos frames. 1. <HTML> 2. <HEAD> 3. <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> 4. <TITLE></TITLE> 5. </HEAD> 6. <frameset cols="20%,*" border=3> 7. <frame name=lista src=listado.htm> 8. <frame name=conte src=http://www.elcomercioperu.com.pe> 9. </frameset> 10. <BODY background=fondo51.jpg> 11. </BODY> 12. </HTML> Comentario: En el frame de la izquierda se presentar el contenido de la pgina listado.htm y el frame de la derecha se presentar el contenido de la URL http://www.elcomercioperu.com.pe El frame de la izquierda se llama lista y el frame de la derecha se llama conte listado.html Esta pgina presenta la lista desplegable con las opciones de los distintos diarios del Per y al seleccionar alguno de ellos, muestra el contenido de una URL en el frame de la derecha. 1. 2. 3. 4. <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE>

5. </HEAD> 6. <script> 7. function ingreso() 8. { 9. if (document.lista.opciones.value==1) 10. { parent.conte.location.href="http://www.elcomercioperu.com.pe" } 11. if (document.lista.opciones.value==2) 12. { parent.conte.location.href="http://www.expreso.com.pe" } 13. if (document.lista.opciones.value==3) 14. { parent.conte.location.href="http://www.ojo.com.pe" } 15. if (document.lista.opciones.value==4) 16. { parent.conte.location.href="http://www.larepublica.com.pe" } 17. } 18. </script> 19. <BODY background=fondo54.jpg> 20. Elige el diario de tu preferecia: 21. <form name=lista> 22. <select name=opciones onchange=ingreso() onclick=ingreso()> 23. <option value=1>El Comercio 24. <option value=2>El Expreso 25. <option value=3>El Ojo 26. <option value=4>La Repblica 27. </form> 28. </BODY> 29. </HTML> Comentario:
Pg. 45
Al seleccionar un elemento de la lista desplegable se modifica el contenido del frame de la derecha o conte. Para hacer referencia al frame de la derecha, primero debe acceder al objeto parent, el cual representa a la ventana superior o ventana principal (puesto que en estos momentos nos encontramos en el frame de la izquierda o lista), luego debemos referirnos al frame de la derecha o conte y con location modificamos la url que mostrar el contenido en dicho frame. Ejemplo 8
Elaborar una aplicacin web que presente una lista desplegable con los distintos diarios del Per, al seleccionar uno de ellos, abrir una ventana emergente con la pgina web de dicho diario.
Al desarrollar este ejemplo aprenderemos el manejo del objeto window para abrir ventanas emergentes con contenido. listado.html
1. 2. <HTML> <HEAD>

3. 4. 5. 6. 7. 8. 9. 10.
Pg. 46
11. 12. 13.
14. 15. 16.
17. 18. 19.
20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33.
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> </HEAD> <script> function ingreso() { if (document.lista.opciones.value==1) { window.open("http://www.elcomercioperu.com.pe","diario","height=500,width=800,directories =yes,location=no,menubar=no,resizable=no,scrollbar=no,status=no,toolbar=no"); } if (document.lista.opciones.value==2) { window.open("http://www.expreso.com.pe","diario","height=500,width=800,directories=yes,lo cation=no,menubar=no,resizable=no,scrollbar=no,status=no,toolbar=no"); } if (document.lista.opciones.value==3) { window.open("http://www.ojo.com.pe","diario","height=500,width=800,directories=no,location =no,menubar=no,resizable=no,scrollbar=no,status=no"); } if (document.lista.opciones.value==4) { window.open("http://www.larepublica.com.pe","diario","height=500,width=800,directories=no, location=no,menubar=no,resizable=no,scrollbar=no,status=no"); } } </script> <BODY background=fondo54.jpg> Elige el diario de tu preferecia: <form name=lista> <select name="opciones" onchange="ingreso()"> <option value=1>El Comercio <option value=2>El Expreso <option value=3>El Ojo <option value=4>La Repblica </form> </BODY> </HTML>
Comentario: El mtodo open del objeto window nos permite abrir una ventana emergente.
Pg. 47
SEGUNDA SEMANA Marco Prctico Actividad 2

Objetivo: Que el alumno conozca las ventajas de utilizar archivos de estilo CSS. INVESTIGACIN a. Qu son archivos de estilo CSS? b. Cmo se puede personalizar la presentacin de directivas HTML? c. Cmo se pueden definir nuevos estilos? d. Cmo se puede vincular un archivo de estilos CSS a nuestra pgina? Crear un archivo de estilo CSS que personalice la presentacin de los siguientes elementos: a. Color de fondo b. Encabezado 1 c. Tablas y bordes d. Celdas de Encabezado e. Celdas de contenido f. Hipervnculo g. Caja de texto h. Lista desplegable i. Botn submit Aplique la hoja de estilos en una pgina web.
NOTA: Enviar el resultado de esta actividad a: joseatunga@yahoo.com
Pg. 48
TERCERA SEMANA Marco Terico

Logro El alumno instala el servidor web para trabajar con paginas dinmicas PHP y conoce los fundamentos elementales del lenguaje. Resumen El servidor Apache es el servidor web con el que trabaja PHP, es el responsable del procesamiento dinmico de los datos enviados por parte del cliente. Las respuestas del proceso son enviadas en HTML. PHP como todo lenguaje tiene una sintaxis muy similar al lenguaje C y Java.
Tpicos bsicos de la programacin web en el Servidor

QU ES PHP? PHP es un lenguaje interpretado que sirve principalmente para realizar pginas webs dinmicas. El significado de sus siglas es PHP HyperText Preprocessor.
Nota: Una pgina web dinmica es aquella cuyo contenido es el resultado de un proceso, por lo tanto el contenido no siempre es lo mismo, cambia en tiempo de ejecucin, a diferencias de las pginas basadas en HTML que son estticas.
PHP es una tecnologa del lado del servidor, que funciona embebida (es decir, incrustada) dentro del cdigo HTML de una pgina, dndole mayor dinamismo a la misma, con acceso a bases de datos, creacin de foros, libros de visita, rotacin de banners, etc. Se ejecuta en un servidor web, hacia el cual los clientes acceden para enviar datos y reciben respuestas de dicho proceso.
Su sintaxis es heredada de C y Java y posee gran cantidad de funciones que permiten realizar todas las acciones que soporta el PHP.
Pg. 49
Esta tecnologa inici como un pasatiempo de Rasmus Lerdorf pero hoy en da, gracias a ser gratis, cuenta con miles de adeptos y actualizaciones muy constantes. Muchas empresas se han fijado en el potencial de PHP, y han dado su apoyo a esta, como es el caso de Zend, uno de los principales contribuyentes para el lanzamiento de la versin 5 de este lenguaje. La forma ms fcil de averiguar cuando una pgina es o no PHP, es verificando su extensin, que puede ser generalmente .php, .phtml, .php3, .php4 CARACTERSTICAS DE PHP: Alto rendimiento PHP es muy eficaz Mediante el uso de un nico servidor, puede atender millones de accesos al da. Los indicadores comparativos de rendimiento publicados por Zend Technologies (http://www.zend.com) muestra que PHP supera ampliamente a sus competidores en esta faceta. Interfaces Para Diferentes Sistemas De Base De Datos PHP dispone de una conexin propia a todos los sistemas de base de datos. Adems de MySQL, puede conectarse directamente a las base de datos de PostgreSQL, MySql, Oracle, DBM, etc. El uso de ODBC permite establecer una conexin a cualquier base de datos que suministre un controlador ODBC. Entre ellas, se incluyen los productos de Microsoft y muchos otros. Bibliotecas incorporadas para muchas tareas Web habituales Como se ha diseado para su uso en la Web, PHP incorpora una gran cantidad de funciones integradas para realizar tiles tareas relacionadas con la Web. Puede generar imgenes GIF al instante, establecer conexiones a otros servicios de red, enviar electrnicos, trabajar con cookies y generar documentos PDF, todo con unas pocas lneas de cdigo. Es gratuito, es un software libre respaldado por el GNU PHP es gratuito. Puede descargar la ltima versin de http://www.php.net cuando lo desee sin coste alguno. Facilidad de aprendizaje y uso La sintaxis de PHP se basa en otros lenguajes de programacin, principalmente en C y Perl. Si ya conoce estos lenguajes o tal vez conoce Java, no tardar nada en utilizar PHP de manera productiva. Portabilidad PHP est disponible para una gran cantidad de sistemas operativos diferentes. Puede escribir cdigo PHP en todos los sistemas operativos gratuitos de tipo Unix, como Linux y FreeBSD, versiones comerciales de Unix, como Solaris e IRIX o en las diferentes versiones de Microsoft Windows. Su cdigo funcionar sin necesidad de aplicar ninguna modificacin a los diferentes sistemas que ejecute PHP.
Pg. 50
Disponibilidad del cdigo abierto Dispone de acceso al cdigo fuente de PHP. A diferencia de los productos comerciales y de cdigo cerrado, si desea modificar algo o agregar un elemento al programa, puede hacerlo con total libertad. No necesitar a que el fabricante publique parches, ni tendr que preocuparse porque el fabricante cierre sus puertas o decida abandonar el producto. COMPONENTES NECESARIOS PARA TRABAJAR CON PHP Para trabajar con PHP necesitamos instalar los siguientes componentes: 1. Servidor Web: El servidor web para PHP es el Apache Server y puede descargar el instalador de www.apache.org 2. Manejador de Base de Datos: Aunque PHP puede trabajar con mltiples bases de datos, pero el manejador de base de datos que especialmente ha sido creado para trabajar con PHP es el MySQL y se puede descargar desde: http://www.mysql.com 3. Motor de Ejecucin de PHP: Contiene al compilador e interprete de sentencias PHP, la versin actual de PHP es la versin 5, podemos descargarlo de http://www.php.net 4. IDE (Integrated Developer Environment): Contiene al entorno de desarrollo, este programa nos suministra una interfaz con herramientas que facilitan la labor de programacin en PHP. Algunos de estos IDES gratuitos lo podemos conseguir desde la pgina de sus fabricantes. Ejemplo: XAMP, Maguma Studio, WAMP, etc. Tambin podemos utilizar el Macromedia DreamWeaver como diseador de pgina para PHP. NOTA: Tambin podemos utilizar algunos integradores que instalan y configuran automticamente TODOS los componentes anteriores, excepto el IDE. Estos integradores son: Appserv, EasyPHP, etc. INSTALACIN DE APPSERV Para trabajar con PHP, Utilizaremos el integrador Appserv, el cual lo puedes descargar gratuitamente de http://www.appservnetwork.com Pasos: 1. 2. 3. 4. 5.
Copia el instalador del appserv hacia el disco duro Ejecutar el instalador haciendo doble clic Saldr la pantalla de Bienvenida. Haga clic en el botn NEXT Luego deberemos aceptar los trminos de Licencia, Haga clic en el botn I Agree Indique la ruta donde se instalarn los componentes del Appserv, por defecto es: c:\Appserv, Haga clic en el botn Next 6. Marcar los componentes que desea instalar (Marque todas las casillas de verificacin). Haga clic en el botn NEXT.
Pg. 51
7. Ingrese la informacin necesaria para el servidor Apache. No olvide que el puerto para el servidor web debe ser uno que no est siendo utilizado en el equipo. (Nosotros utilizaremos el puerto 8080). Luego haga clic en el botn NEXT
8. Ingrese el password para el Servidor de base de datos (2 veces), nosotros utilizaremos el password telesup. Luego haga clic en el botn Install
Pg. 52
9. En este punto empezar el proceso de copia de los archivos. Al finalizar dicho proceso aparecer la siguiente ventana (marque ambos casilleros, para que el servicio del servidor Apache y del Servidor de Base de Datos MySQL se encuentren activados). Haga clic en el botn Finsh para finalizar la instalacin.
ESTRUCTURA DE DIRECTORIOS DESPUES DE LA INSTALACIN Luego de finalizada la instalacin Ud. encontrar la siguiente estructura de directorios en su disco duro:
CREACION DE UNA PAGINA PHP Las pginas web con cdigo de PHP deben ser archivos con extensin PHP y deben estar almacenadas en la carpeta www. Pasos para crear una pgina PHP: 1. Abra el Block de Notas 2. Escriba el siguiente cdigo:

<html> <head> <title> Mi primera pagina php </title> </head> <body bgcolor="aquamarine"> <h1><?php echo "Bienvenidos a Php";?></h1> <h2><?php echo "Pronto seremos amigos...";?></h2> ?> <body> </html>
Pg. 53
3. Grbelo con el nombre demo.php (Menu Archivo / Guardar Como, indique el nombre y en tipo de archivo: Indique todos los archivos). No olvide grabar la pgina dentro de: c:\Appeserv\www EJECUCION DE UNA PAGINA PHP Ejecutaremos la pgina creada anteriormente: Pasos: 1. Abra el navegador 2. Ingrese la siguiente direccin: http://localhost:8080/demo.php Nota: localhost representa el nombre del servidor web. Se usa localhost cuando el servidor web est instalado en la misma mquina donde queremos ejecutar la pgina PHP. En el caso que el servidor se encuentre en otro equipo, Ud tendr que ejecutar la pgina PHP, accediendo a travs de la direccin IP del servidor, de la siguiente manera. http://192.168.1.70:8080/demo.php (Verifique que el puerto 8080, no este bloqueado por el firewall o por algn antivirus) CREACION DE UNA PAGINA PHP USANDO DREAMWEAVER Como todos sabemos, las ventajas que nos ofrece Dreamweaver, en cuanto a diseo de pginas web es insuperable, por lo que el trabajo de la edicin de pginas PHP, lo realizamos en esta herramienta. PASOS 1. Ingresar a DreamWeaver 2. Crea un sitio web (Opcional) a. Men Sitio / Escoger: Administrar Sitios / Botn: Nuevo - Sitio b. Indique un nombre para su sitio. Ejemplo: Demostracion. De igual forma ingrese la direccin web necesaria para ejecutar la pgina PHP: htttp://localhost:8080/Demostracion/ (Al final de la direccin se debe colocar el nombre del sitio) c. Indique que trabajaremos con Tecnologa de Servidor: PHP MySQL
Pg. 54
d. Indique la ruta donde se guardarn la pgina PHP (No olvide crear dentro de www, una carpeta con el nombre del sitio, esa es la carpeta que Ud. debe seleccionar en este paso). Haga clic en el botn SIGUIENTE
e. Ingrese nuevamente la direccin con la ejecutar nuestra pgina PHP: http://localhost:8080/Demostracion/ (Haga clic en el botn Comprobar URL). Si la respuesta es satisfactoria, significa que el sitio se va a crear correctamente, de lo contrario haga clic en el botn Anterior y verifique los datos ingresados. f. Indique que no trabajaremos con servidor remoto, dado a que el servidor ser de tipo local. Luego haga clic en el botn Siguiente g. Para finalizar los pasos, haga clic en el botn Completado 3. Acuda a la pestaa CODIGO 4. Escriba el cdigo de una pgina PHP 5. Grabe la pgina (Menu archivo / Guardar o CTRL S) 6. Para ejecutarlo, presione la tecla F12 (siempre en cuando haya creado el sitio), de lo contrario, abra el navegador, y ejecuta la siguiente direccin: http://localhost:8080/Demostracion
FUNDAMENTOS DEL LENGUAJE

A. DIRECTIVAS DE PHP
Pg. 55
El cdigo PHP puede incluirse dentro del cdigo HTML de la pgina. Para delimitar la seccin de cdigo PHP podemos hacerlo de varias formas: -Usando las etiquetas: <?php ?> -Usando las etiquetas <? ?> -Mediante la directiva SCRIPT <script language="php"> </script> Comentario: Fuera de las directivas de PHP, solo se podr utilizar cdigo cliente, tal como: HTML o JavaScript B. VARIABLES Una variable podra definirse como una posicin de memoria creada para introducir o asignar cualquier valor o dato. Durante la ejecucin del script el valor de la variable puede "variar" (valga la redundancia) tanto de tipo como de valor. En PHP (al igual que en JavaScript) no hace falta declarar la variable ya que simplemente anteponiendo el carcter $ al nombre de la variable estamos indicando que es una variable. Otro hecho que cabe destacar a la hora de programar en PHP y la declaracin de variables es que PHP es un lenguaje "CASE SENSITIVE", es decir que diferencia el uso de maysculas y minsculas y debido a esta razn no sera lo mismo. Ejemplo: <?php $a=23; $apellidos=Universidad Privada Telesup; ?> Comentario: Estamos creando dos variables: uno de tipo numrico y otro de tipo string. Una variable se crea al recibir su primera asignacin de datos y puede cambiar de tipo al recibir otro tipo de dato.

Los tipos de datos posibles que puede almacenar una variable son los siguientes: Integer : Nmeros enteros positivos y negativos Double : Nmeros decimales o de coma flotante String : Cadenas de texto Boolean : Valores True o False Array : Tipo especial de coleccin de valores Object : Tipo especial de dato complejo
Pg. 56
Convertir tipos PHP es un lenguaje que realiza la conversin automtica de tipos en funcin de los operandos y del operador. De esta forma si intentamos sumar la cadena '10' y el nmero 20 la accin que realizara sera convertir la primera variable a numrica y de esa forma podra sumar 10+20=30. Aparte de que PHP en algunos casos realiza la conversin existen dos funciones especiales del propio lenguaje que nos permiten saber el tipo de variable que estamos usando y tambin convertir el tipo de variable, estos son: gettype() Indica el tipo de variable que es. settype($variable,'tipo variable') Transforma el tipo de variable del modo actual a el modo que le introduzcamos. MOSTRAR DATOS Para mostrar mensajes o el contenido de una variable utilizaremos la sentencia echo, de la siguiente manera: <?php $a=23; $cadena=Universidad Privada Telesup; echo Yo estudio en la $cadena; echo <br>; echo <font color=red>Tengo $a aos de edad</font>; ?> Comentario: La instruccin echo visualiza todo tipo de datos. Si dentro de una cadena, incluimos una variable, esta ser reconocida como tal, puesto que tiene antepuesta el signo $. La instruccin echo tambin puede interpretar cdigo HTML Tambin se puede mostrar un dato de la siguiente forma: <?php $a=23;

$cadena=Universidad Privada Telesup; ?> Yo estudio en la <?=$cadena?> Comentario: Cuando se desea visualizar directamente una variable puede usarse: <?=$cadena?> CONCATENACION Concatenar significa unir valores, el operador de concatenacin en PHP es el . (punto). Ejemplo: <?php $a=23; $cadena=Universidad Privada Telesup;
Pg. 57
echo Yo estudio en la .$cadena; echo <br>; echo <font color=red>.Tengo .$a. aos de edad</font>; ?> COMENTARIOS Existen varias formas de incluir comentarios y estas son: // Esto da comienzo a una lnea con comentarios. $a=23; // Esta es una asignacin /* Esto es un comentario que incluye varias lneas. Es por eso que uso este tipo de inclusin. */ OPERADORES ARITMETICOS $a + $b $a - $b $a * $b $a / $b $a % $b Adicin Resto Multiplicacin Divisin Mdulo Suma de $a y $b. Diferencia entre $a y $b. Producto de $a and $b. Cociente de $a entre $b. Resto de $a dividido entre $b.
OPERADORES DE COMPARACION $a == $b $a === $ $a != $b $a < $b $a > $b Igualdad Identidad Desigualdad Menor que Mayor que Cierto si $a es igual a $b. Cierto si $a es igual a $b y si son del mismo tipo Cierto si $a no es igual a $b. Cierto si $a es estrictamente menor que $b. Cierto si $a es estrictamente mayor que $b.

$a <= $b $a >= $b Menor o igual que Mayor o igual que Cierto si $a es menor o igual que $b. Cierto si $a es mayor o igual que $b.
Pg. 58
OPERADORES LOGICOS Conjuncin (Y) Todas las expresiones lgicas deben ser verdaderas para que toda la expresin sea verdadera. Para expresar la conjuncin se emplea: && o and Ejemplo: (7>2) && (2<4)
Devuelve verdadero cuando ambas condiciones son verdaderas.
Disyuncin(O) Si una expresin lgica es verdadera, toda la expresin sea verdadera. Si todas son falsas, toda la expresin es falsa. Para expresar la disyuncin se emplea: || o or Ejemplo: (7>2) || (2<4) Devuelve verdadero cuando al menos una de las dos es verdadera.
Negacin (NOT) Niega una expresin lgica. Ejemplo: ! (7>2) Niega el valor de la expresin. Nos da como resultado: false
ESTRUCTURAS LOGICAS
ESTRUCTURA CONDICIONAL IF $edad=10; if($edad=='12') { echo "Su edad es de $edad aos"; } else { echo "Su edad es de $edad aos"; } ESTRUCTURA CONDICIONAL MULTIPLE switch($i) { case 0: { echo "i es igual a 0"; } break; case 1: { echo "i es igual a 1"; } break; case 2: { echo "i es igual a 2"; } break;

} ESTRUCTURA REPETITIVA FOR for($i=1 ; $i<=10 ;$i++) { echo "$i <br>" } ESTRUCTURA REPETITIVA WHILE $numero=1; while($numero<=10) { echo"<br>".numero; $numero++; } ESTRUCTURA REPETITIVA DO WHILE do { instrucciones; instrucciones; }while ( condicin) CODIGO EMBEBIDO (Cdigo incrustado)
Pg. 59
El cdigo HTML puede ser enriquecido con cdigo PHP, para darle un aspecto dinmico a la ejecucin del cdigo HTML en el cliente. A continuacin tenemos algunos ejemplos de este tipo de cdigo: Ejemplo 9 Utilizar cdigo embebido para mostrar una frase con los distintos tipos de encabezado. Encabezados.php 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5. <title>Encabezados</title> 6. </head> 7. <body> 8. <? for($i=1;$i<=6;$i++){?> 9. <h<?=$i?>>Hola, Bienvenido a PHP...</h<?=$i?>> 10. <? } ?> 11. </body>

12. </html>
Pg. 60
Comentario: El cdigo en negritas es el cdigo incrustado en el HTML, en el ejemplo anterior, en tiempo de ejecucin muestra se lneas de mensaje, cada una de ellas con un tamao de encabezado diferente. Ejemplo 10 Utilizar cdigo embebido para mostrar una lista de opciones con checkbox, cada checkbox debe tener un nombre y value diferente en tiempo de ejecucin. Adicionalmente mostrar cada una de las filas con colores de fondo distinto. opciones.php 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5. <title>Documento sin título</title> 6. </head> 7. <body> 8. <h1>Lista de Opciones</h1> 9. <hr> 10. <form id="form1" name="form1" method="post" action=""> 11. <table border="1" align="center" width="35%" cellpadding="4"> 12. <? 13. $x=1; 14. while($x<12){ ?> 15. <? if($x%2==0){ ?>

16. <tr bgcolor="#E3F3FD"> 17. <? } 18. else { ?> 19. <tr bgcolor="#B3D6FD"> 20. <? } ?> 21. <td width="10%" align="center"> 22. <input type="checkbox" name="chk<?=$x?>" value=<?=$x?>> 23. </td> 24. <td> 25. Opcin <? echo $x?> 26. </td> 27. </tr> 28. <? 29. $x=$x+1; 30. } ?> 31. </table> 32. </form> 33. </body> 34. </html>
Pg. 61
Comentario: El cdigo en negritas es el cdigo incrustado en el HTML. En este ejemplo, en tiempo de ejecucin se muestra una lista de checkboxes con nombres y values diferentes, adicionalmente se muestra la filas pares de un color diferente a las filas impares.
Universidad Privada Telesup Actividad 3

Desarrollar las siguientes aplicaciones webs utilizando el cdigo PHP:
Pg. 62
Generar un listado numrico del 1 al 100, donde se visualice los nmeros contenidos en este rango con colores alternados (rojo y blanco). Use una tabla para la presentacin.
Mostrar una lista desplegable con los nmeros pares del 2 al 100 Mostrar un textarea con la lista de nmeros mltiplos de 3 del 3 al 90. Mostrar una lista de opciones basados en radiobuttoms, con las siguientes opciones : (Cada radiobuttom debe tener un value diferente, solo se debe escoger una opcin de la lista) o Fila 1 o Fila 2 o Fila 3 o Fila 4 o o Fila 20
Mostrar una tabla con 2 columnas y 20 filas. En Titulo de la primera columna debe ser Apellidos y el de la segunda columna Distrito. El resto de filas debe mostrar una caja de texto en cada columna para ingresar los datos que corresponden. El nombre de cada caja debe ser: txtape1, txtape2, txtape3, . txtdis1,txtdis2, txtdis3, .
Nota: Para todos los casos use la mejor presentacin esttica.
Pg. 63
CUARTA SEMANA Marco Terico

Logro Aprende a enviar datos usando formularios HTML y a recepcionar los datos y procesarlos en el servidor Apache. Resumen El control submit permite el envo de datos hacia el servidor web. Los mtodos de envo son el GET(envo de datos a travs de la url) y el POST (envo de datos de manera invisible). Las instrucciones que nos permiten recepcionar estos datos en el servidor son: $_POST, $_GET y $_REQUEST
Envo y Recepcin de Datos. Manejo de controles usando PHP

Los Formularios no forman parte de PHP, sino del lenguaje estndar de Internet, HTML. Vamos a recordar brevemente lo aprendido en la primera semana. Todo formulario comienza con la etiqueta <FORM ACTION="recibir.php" METHOD="post/get"> Con ACTION indicamos el script que va recepcionar y procesar la informacin que recogemos en el formulario, mientras que METHOD nos indica si el usuario del formulario va a enviar datos de manera invisible (POST) o visible (GET). La etiqueta </FORM> indica el final del formulario. Dentro de la etiqueta <FORM> vienen los campos de entrada de datos o controles, los cuales pueden ser: CUADRO DE TEXTO: <input type="text" name="txtnombre" size="20"> CUADRO DE TEXTO MULTILNEA CON BARRAS DE DESPLAZAMIENTO: <textarea rows="5" name="txtdescripcion" cols="20">Es de color rojo</textarea> CASILLA DE VERIFICACIN: <input type="checkbox" name="chkingles" value="ON"> Ingls BOTN DE OPCIN: <input type="radio" value="azul" checked name="rbcolor"> LISTA DESPLEGABLE: <select size="1" name="cbolista">

<option selected value="lunes">Lunes</option> <option value="martes">Martes</option> <option value="miercoles">Mircoles</option> </select> BOTON DE COMANDO: <Input Type="Submit" Value="Enviar" Name="cmdEnviar">
Pg. 64
CAMPO OCULTO: <input type="hidden" name="edad" value="55"> Este ltimo tipo de campo resulta especialmente til cuando queremos pasar datos ocultos en un formulario. Como habrs observado todos los tipos de campo tienen un parmetro llamado name, que no es otro que el nombre del control con la cual recogeremos los datos en el script indicado por el modificador ACTION de la etiqueta FORM y value establece el valor por defecto del control.
ENVIO Y RECEPCIN DE DATOS

Ejemplo 11: Crear un formulario web que recepcione el apellido y edad de una persona y luego que lo enve al servidor para que la pgina procesar.php muestre dichos datos enviados. En el siguiente ejemplo utilizaremos un formulario (ficha.htm), y la pgina procesar.php Ficha.htm (Interface de Usuario) Procesar.php (Pgina PHP que procesa los datos enviados y responde al usuario) FICHA.HTM
1. <html> 2. <head> 3. <title>Documento sin título</title>

4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. </head> <body> <span class="Estilo1">Ingreso de Datos</span> <hr /> <form id="form1" name="form1" method="post" action="procesar.php"> <table width="200" border="1"> <tr> <td>Apellidos</td> </tr> <tr> <td><input type="text" name="txtape" id="txtape" /></td> </tr> <tr> <td>Edad</td> </tr> <tr> <td><input type="text" name="txteda" id="txteda" /></td> </tr> <tr> <td><div align="center"> <input type="submit" name="btnenv" id="btnenv" value="Enviar datos" /> </div></td> </tr> </table> </form> </body> </html>
Pg. 65
PROCESAR.PHP
1. 2. 3. 4. 5. 6. 7. <? $ape=$_POST["txtape"]; $eda=$_POST["txteda"]; echo "Los datos fueron recepcionados con xito...<br>"; echo $ape."<br>"; echo $eda."<br>"; ?>
Comentario: Los datos son capturados con la instruccin $_POST y el nombre del control que se us para enviar datos, estos datos capturados se almacenan en variables y luego se visualizan dichas variables con las instruccin echo.
Pg. 66
Ejemplo 12: Haremos el mismo ejemplo, pero utilizando solamente una sola pgina PHP, que recepcione, enve y procese los datos. Este formulario ser recursivo, porque los datos sern enviados haca s mismo.
ficha.php 1. <? 2. // Capturar los datos enviados 3. $benviar=$_REQUEST["btnenv"]; 4. $ape=$_REQUEST["txtape"]; 5. $eda=$_REQUEST["txteda"]; 6. ?> 7. <html> 8. <head> 9. <title>Documento sin título</title> 10. </style> 11. </head> 12. <body bgcolor="#C8FBDF"> 13. <font face="arial" size="+2" color="blue">Ingreso de Datos</font> 14. <hr /> 15. <form id="form1" name="form1" method="post" action=""> 16. <table width="255" border="0" align="center" bgcolor="#BAEFFE"> 17. <tr> 18. <td>Apellidos</td> 19. </tr> 20. <tr> 21. <td><input type="text" name="txtape" id="txtape" value="<?=$ape?>"></td> 22. </tr> 23. <tr>

24. <td>Edad</td> 25. </tr> 26. <tr> 27. <td><input type="text" name="txteda" id="txteda" value=<?=$eda?>></td> 28. </tr> 29. <tr> 30. <td><div align="center"> 31. <input type="submit" name="btnenv" id="btnenv" value="Enviar" /> 32. </div></td> 33. </tr> 34. </table> 35. </form> 36. <p> </p> 37. </body> 38. </html> 39. <? 40. if($benviar=="") { //Si no se presiono el botn enviar? 41. echo "Es mi primera vez que se carga la pgina...<br>"; 42. } 43. if($benviar!="") { //Se presiono el botn enviar? 44. echo "Datos recepcionados...<br>"; 45. echo $ape."<br>"; 46. echo $eda."<br>"; 47. } 48. ?>
Pg. 67
Comentario: El destino del envo de datos (clusula action) es hacia la misma pgina, esto se consigue cuando el valor del parmetro action es vacio. <form id="form1" name="form1" method="post" action=""> Al inicio de la pgina se capturan los datos enviados (incluido el botn). $benviar=$_REQUEST["btnenv"]; $ape=$_REQUEST["txtape"]; $eda=$_REQUEST["txteda"]; Se pregunta si se envi datos por intermedio del botn: if($benviar!="") { //Se presiono el botn enviar? echo "Datos recepcionados...<br>"; echo $ape."<br>"; echo $eda."<br>";

}
En el caso de no haber enviado datos: if($benviar=="") { //Si no se presiono el botn enviar? echo "Es mi primera vez que se carga la pgina...<br>"; }
Pg. 68
Ejemplo 13: Haremos el mismo ejemplo, pero esta vez mejorando la apariencia de los datos resultantes.
Ficha.php 1. <? 2. //Capturar los datos enviados 3. $benviar=$_REQUEST["btnenv"]; 4. $ape=$_REQUEST["txtape"]; 5. $eda=$_REQUEST["txteda"]; 6. ?> 7. <html> 8. <head> 9. <title>Documento sin título</title> 10. </head> 11. <body> 12. <h1>Ingreso de Datos</h1> 13. <hr /> 14. <form id="form1" name="form1" method="post" action=""> 15. <table width="255" border="0" align="center" bgcolor="#BAEFFE"> 16. <tr> 17. <td>Apellidos</td> 18. </tr>

19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55.
Pg. 69
<tr> <td><input type="text" name="txtape" id="txtape" /></td> </tr> <tr> <td>Edad</td> </tr> <tr> <td><input type="text" name="txteda" id="txteda" /></td> </tr> <tr> <td><div align="center"> <input type="submit" name="btnenv" id="btnenv" value="Enviar" /> </div></td> </tr> </table> </form> <p> </p> <? if($benviar!="") { ?> <div id="datos"> <table width="250" border="0" align="center"> <tr> <td colspan="2" bgcolor="#FFFFFF"><div align="center"><span class="Estilo6">Respuestas</span></div></td> </tr> <tr> <td width="87" bgcolor="#00FF99"><span class="Estilo6">Apellidos</span></td> <td width="153" bgcolor="#00FF99"><span class="Estilo4"><? echo $ape; ?></span></td> </tr> <tr> <td bgcolor="#00FF99"><span class="Estilo6">Edad</span></td> <td bgcolor="#00FF99"><span class="Estilo4"><? echo $eda; ?></span></td> </tr> </table> </div> <? } ?> <p> </p> </body> </html>
ENVIO Y RECEPCION DE DATOS USANDO OTROS CONTROLES

Ejemplo 14 Mostrar una lista de ciudades usando radio buttom, recibir la opcin seleccionada y mostrar la imagen de la ciudad escogida. El formulario debe ser recursivo.
Pg. 70
Ficha.php 1. <? 2. $ciu=$_REQUEST["rbciu"]; 3. ?> 4. <body bgcolor=cyan> 5. <h1>Envio de Datos</h1> 6. <form method=post action=""> 7. <input type=radio name=rbciu value="Cusco">Cusco<br> 8. <input type=radio name=rbciu value="Lima">Lima<br> 9. <input type=radio name=rbciu value="Iquitos">Iquitos<br> 10. <input type=submit value=Enviar name=btnenviar> 11. </form> 12. </body> 13. <? 14. if($ciu=="Cusco"){ ?> 15. <img src="cusco.jpg" width=200 height=200> 16. <? 17. } 18. elseif($ciu=="Lima"){ ?> 19. <img src="Lima.jpg" width=200 height=200> 20. <? 21. } 22. elseif($ciu=="Iquitos"){ ?> 23. <img src="iquitos.jpg" width=200 height=200> 24. <? 25. } 26. ?> Comentario:
Los radiobuttom tienen un value para cada opcin, al ser capturado, solo se recepciona el value de la opcin marcada.
Pg. 71
Ejemplo 15 Mostrar una lista de ciudades usando radio checkboxes, recibir las opciones seleccionadas y mostrar las imgenes de las ciudades escogidas. El formulario debe ser recursivo.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.
<? $cus=$_REQUEST["chkcus"]; $li=$_REQUEST["chkli"]; $iqui=$_REQUEST["chkiqui"]; ?> <body bgcolor=cyan> <h1>Envio de Datos</h1> <form method=post action=""> <input type=checkbox name=chkcus value="Cusco">Cusco<br> <input type=checkbox name=chkli value="Lima">Lima<br> <input type=checkbox name=chkiqui value="Iquitos">Iquitos<br> <input type=submit value=Enviar name=btnenviar> </form> </body> <? if($cus=="Cusco"){ ?> <img src="cusco.jpg" width=200 height=200> <? } if($li=="Lima"){ ?> <img src="Lima.jpg" width=200 height=200> <? } if($iqui=="Iquitos"){ ?> <img src="iquitos.jpg" width=200 height=200> <? } ?>

Comentario:
Pg. 72
Los checkboxes tienen un values para cada opcin, al ser capturado, se recepcionan cada value de la opciones marcadas para luego evaluarlas y mostrar las imgenes que corresponden. Ejemplo 16 Mostrar una lista de ciudades usando una lista desplegable, recibir la opcin seleccionada y mostrar la imagen de la ciudad escogida. El formulario debe ser recursivo.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
<? $ciu=$_REQUEST["cbociu"]; ?> <body bgcolor=cyan> <h1>Envio de Datos</h1> <form method=post action=""> <select name=cbociu> <option value="">Seleccione ciudad</option> <option value="Cusco">Cusco</option> <option value="Lima">Lima</option> <option value="Iquitos">Iquitos</option> </select> <input type=submit name=btnenviar value=Enviar> </form> </body> <? if($ciu=="Cusco"){ ?> <img src="cusco.jpg" width=200 height=200> <? } elseif($ciu=="Lima"){ ?> <img src="Lima.jpg" width=200 height=200> <?

24. 25. 26. 27. 28. 29. } elseif($ciu=="Iquitos"){ ?> <img src="iquitos.jpg" width=200 height=200> <? } ?>
Pg. 73
Comentario:
Cada tem de la lista desplegable tiene value diferente, al ser capturado, se recepciona el value que corresponde para la opcin, luego se evala y se muestra la imagen que corresponde. Ejemplo 17 Mostrar una lista de ciudades usando una lista desplegable, recibir la opcin seleccionada y mostrar la imagen de la ciudad escogida. En esta ocasin no usar el botn enviar o submit. El formulario debe ser recursivo.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.
<? $ciu=$_REQUEST["cbociu"]; ?> <body bgcolor=cyan> <h1>Envio de Datos</h1> <form method=post action=""> <select name=cbociu onchange=submit()> <option value="">Seleccione ciudad</option> <option value="Cusco">Cusco</option> <option value="Lima">Lima</option> <option value="Iquitos">Iquitos</option> </select> </form> </body> <? if($ciu=="Cusco"){ ?>

17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. <img src="cusco.jpg" width=200 height=200> <? } elseif($ciu=="Lima"){ ?> <img src="Lima.jpg" width=200 height=200> <? } elseif($ciu=="Iquitos"){ ?> <img src="iquitos.jpg" width=200 height=200> <? } ?>
Pg. 74
Comentario: Se invoca al gestor de eventos onchange para disparar un submit cada vez que se selecciona una opcin de lista desplegable. <select name=cbociu onchange=submit()>
ENVIO Y RECEPCION DE DATOS CON CONTENIDO DINMICO

Ejemplo 18 Realizar una aplicacin PHP que solicite la cantidad de alumnos que se desean ingresar, luego de ingresar la cantidad, se debe presentar n filas con sus respectivas cajas de texto para ingresar los apellidos y nombres de los alumnos, luego de ingresar los datos, al presionar el botn Mostrar se debe visualizar la lista de los datos enviados.
Pg. 75
<? //capturando los datos de los controles (del anterior envio) $n=$_REQUEST["txtn"]; $benviar=$_REQUEST["btnenviar"]; $bmostrar=$_REQUEST["btnmostrar"]; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 8. <html xmlns="http://www.w3.org/1999/xhtml"> 9. <head> 10. <script language="javascript"> 11. function nuevo() { 12. location.href="principal.php"; 13. } 14. </script> 15. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 16. <title>Documento sin título</title> 17. </head> 18. <link rel="stylesheet" type="text/css" href="css/estilo.css"> 19. <body> 20. <h1>Matricula de Alumnos</h1> 21. <form id="form1" name="form1" method="post" action=""> 22. <table width="383" border="0"> 23. <tr> 24. <td width="127">Cantidad de Alumnos</td> 25. <td width="180"><input name="txtn" type="text" class="campoEditar" id="txtn" value=<?=$n?>></td> 26. <td width="62"><input name="btnenviar" type="submit" class="boton" id="btnenviar" value="Enviar" /></td> 27. </tr> 28. </table> 29. <? if($benviar!="") { // se presiono el boton enviar ? ?> 30. <div id="entrada"> 31. <table width="518" border="0"> 32. <tr>
1. 2. 3. 4. 5. 6. 7.
Pg. 76
33. <th width="73" scope="col">Nro</th> 34. <th width="263" scope="col">Apellidos</th> 35. <th width="168" scope="col">Nombres</th> 36. </tr> 37. <? for($i=1;$i<=$n;$i++) { ?> 38. <tr> 39. <td><?=$i?></td> 40. <td><input type="text" name="txtape<?=$i?>"></td> 41. <td><input type="text" name="txtnom<?=$i?>"></td> 42. </tr> 43. <? } ?> 44. </table> 45. <input type=submit name=btnmostrar value=Mostrar /> 46. </div> 47. <? } // fin del if del boton enviar ?> 48. </form> 49. <? if($bmostrar!=""){ ?> 50. <div id="mostrar"> 51. <table width="520" border="1"> 52. <tr> 53. <th width="99" scope="col">Nro</th> 54. <th width="247" scope="col">Apellidos</th> 55. <th width="152" scope="col">Nombres</th> 56. </tr> 57. <? 58. for($i=1;$i<=$n;$i++){ 59. $vape="txtape".$i; 60. $vnom="txtnom".$i; 61. $vaape=$_REQUEST["$vape"]; 62. $vanom=$_REQUEST["$vnom"]; 63. ?> 64. <tr> 65. <td><?=$i?></td> 66. <td><?=$vaape?></td> 67. <td><?=$vanom?></td> 68. </tr> 69. <? 70. } 71. ?> 72. </table> 73. <input type="button" name="btnnuevo" value="Nuevo Ingreso" onclick="nuevo()"> 74. </div> 75. <? } ?> 76. <p> </p>

77. </body> 78. </html>
Pg. 77
Comentario: Se genera en tiempo de ejecucin n filas con n cajas de textos, luego de enviar los datos se capturan en tiempo de ejecucin los distintos valores y se muestran en forma de listado
Ejemplo 19 Realizar una aplicacin PHP que solicite el apellido y edad de una persona, luego de enviar los datos, estos deben ser analizados para determinar si se trata de una persona mayor o menor de edad, si la persona es de mayor edad, adicionalmente se le debe pedir su DNI y estado civil, en caso contrario se debe solicitar el nombre de sus padres. Al final deben enviarse nuevamente los datos y mostrarse todos los datos enviados en una pantalla exclusiva.

ContenidoDinamico.php
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42.
Pg. 78
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php //Capturamos los datos $ape=$_POST["txtape"]; $edad=$_POST["txtedad"]; $btnsiguiente1=$_POST["btnSiguiente1"]; $btnsiguiente2=$_POST["btnSiguiente2"]; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Datos Personales</title> </head> <body bgcolor="#666666" text="#FFFFFF"> <h1>Datos Personales</h1> <hr> <? //Si an no se presionado el botn siguiente2 if($btnsiguiente2==""){ ?> <form method="post" name="frmdatos" action=""> <table width="27%" align="center"> <tr> <td width="35%">Apellidos:</td> <td width="65%"><input type="text" name="txtape" value='<?php echo $ape; ?>'></td> </tr> <tr> <td> Edad:</td> <td><input type="text" name="txtedad" value='<?php echo $edad; ?>'></td> </tr> <?php if(!isset($_POST["btnSiguiente1"])){ //si no se presion el botn siguiente1 //mostramos el botn siguiente1 ?> <tr> <td colspan="2" align="center"> <input type="submit" name="btnSiguiente1" value="Siguiente" id="btnSiguiente1"><br> </td> </tr> <?php }?> <?php if(isset($edad)){ //Si existe el dato edad?

43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. //Evaluamos la edad if($edad>=18){ //Si es mayor de edad? ?> <tr> <td> DNI: </td> <td> <input type="text" name="txtdni"><br> </td> </tr> <tr> <td> Estado Civil: </td> <td> <select name="cboec"> <option value="Soltero">Soltero</option> <option value="Casado">Casado</option> <option value="Otros">Otro</option> </select> </td> </tr> <?php } else{ // en caso contrario, si es menor de edad ?> <tr> <td> Nombre de papa:</td> <td> <input type="text" name="txtpapa"><br> </td> </tr> <tr> <td> Nombre de mama:</td> <td> <input type="text" name="txtmama"></td>> </tr> <?php }?> <tr> <td colspan="2" align="center"> <input type="submit" value="Enviar" name="btnSiguiente2" id="btnSiguiente2"><br> </td> </tr>
Pg. 79

87. </table> 88. <?php }?> 89. </form> 90. <? } ?> 91. <p></p> 92. <?php 93. //Si se ha presionado el botn siguiente2 94. if($btnsiguiente2!=""){ 95. echo "<hr>"; 96. echo "los datos que fueron recepcionados son:"; 97. echo "<br>"; 98. echo "Apellidos: $ape<br>"; 99. echo "Edad: $edad<br>"; 100. } 101. //Si se ha presionado el botn siguiente2 102. if($btnsiguiente2!=""){ 103. if($edad>=18){ 104. echo "DNI: " .$_POST['txtdni']."<br>"; 105. echo "Estado Civil: " .$_POST['cboec']."<br>"; 106. } 107. else{ 108. echo"Nombre de Papa: " .$_POST['txtpapa']."<br>"; 109. echo"Nombre de Mama: " .$_POST['txtmama']."<br>"; 110. } 111. } 112. ?> 113. </body> 114. </html>
Pg. 80
Ejemplo 20 Realizar una aplicacin PHP que permita seleccionar una provincia mediante una lista desplegable, luego de seleccionar una provincia, mostrar una segunda lista con los distritos de la provincia seleccionada, luego de esta ltima seleccin se debe mostrar las dos selecciones anteriores.
Pg. 81
Principal.php
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30.
<? //capturar valores $ciu=$_REQUEST["cbociu"]; $disL=$_REQUEST["cbolima"]; $disC=$_REQUEST["cbocallao"]; //Creamos 3 arreglos para usarlos como fuente de datos en las listas desplegables $aciu=array("Lima","Callao","Arequipa","Cajamarca"); $adisL=array("Ate","Brea","Carabayllo","Pueblo Libre","Lince"); $adisC=array("La Perla","La Punta","Ventanilla","Carmen de la Legua","Bellavista"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> </head> <script > function nuevo(){ location.href="principal.php"; } </script> <link rel="stylesheet" type="text/css" href="css/estilo.css"> <body> <h1>Listas Desplegables</h1> <input type=button value="Nuevo ingreso" onclick="nuevo()"> <form id="form1" name="form1" method="post" action=""> <table width="285" border="1"> <tr> <td width="90">Provincia</td> <td width="179">
31. 
32. <select name="cbociu" id="cbociu" onchange="submit()">

33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. <option value="">Seleccione Ciudad</option> <? for($i=0;$i<count($aciu);$i++) { if($ciu==$aciu[$i]) {?> <option value="<?=$aciu[$i]?>" selected><?=$aciu[$i]?></option> <? } else {?> <option value="<?=$aciu[$i]?>"><?=$aciu[$i]?></option> <? } } ?> </select> </td> </tr> <? //Si la seleccin fue Lima? if($ciu=="Lima") { ?> <tr> <td>Distrito</td> <td><select name="cbolima" id="cbolima" onchange=submit()> <option value="">Seleccione Distrito</option> <? for($i=0;$i<count($adisL);$i++) { if($disL==$adisL[$i]){ ?> <option value="<?=$adisL[$i]?>" selected><?=$adisL[$i]?></option> <? } else { ?> <option value="<?=$adisL[$i]?>"><?=$adisL[$i]?></option> <? } } ?> </select></td> </tr> <? } ?> <? //Si la seleccin fue Callao if($ciu=="Callao") { ?> <tr> <td>Distrito</td> <td><select name="cbocallao" id="cbocallao" onchange=submit()> <option value="">Seleccione Distrito</option> <? for($i=0;$i<count($adisC);$i++) { //Si es el elemento seleccionado? Mantenerlo seleccionado en la lista if($disC==$adisC[$i]){?> <option value="<?=$adisC[$i]?>" selected><?=$adisC[$i]?></option> <? } else { //De lo contrario sern elementos normales dentro de la lista ?> <option value="<?=$adisC[$i]?>"><?=$adisC[$i]?></option> <?} }?>
Pg. 82

81. </select></td> 82. </tr> 83. <? } ?> 84. </table> 85. </form> 86. <p> </p> 87. </body> 88. </html> 89. <? 90. //Mostrar datos seleccionados 91. if($ciu!=""){ 92. echo "Ud seleccion la ciudad $ciu"."<br>"; 93. } 94. if($disL!=""){ 95. echo "Ud selecciono el distrito $disL"."<br>"; 96. } 97. if($disC!=""){ 98. echo "Ud selecciono el distrito $disC"."<br>"; 99. } 100. ?>
Pg. 83
Actividad 4
Crear las siguientes aplicaciones webs: Realizar una aplicacin PHP que solicite la cantidad de alumnos que se desean ingresar, luego de ingresar la cantidad, se debe presentar n filas con sus respectivas cajas de texto para ingresar los apellidos y nombres de los alumnos, cada fila debe tener un radiobuttom. Luego de ingresar los datos, al presionar el botn Mostrar se debe visualizar el apellido y nombre seleccionado. Realizar una aplicacin PHP que solicite la cantidad de alumnos que se desean ingresar, luego de ingresar la cantidad, se debe presentar n filas con sus respectivas cajas de texto para ingresar los apellidos y nombres de los alumnos, cada fila debe tener un checkbox. Luego de ingresar los datos, al presionar el botn Mostrar se debe visualizar el apellido y nombre de los alumnos seleccionados. Realizar una aplicacin PHP que solicite la cantidad de alumnos que se desean ingresar, luego de ingresar la cantidad, se debe presentar n filas con sus respectivas cajas de texto para ingresar los apellidos y nombres de los alumnos, cada fila debe tener un checkbox. Luego de ingresar los datos, al presionar el botn Mostrar debe aparecer una lista desplegable con la relacin de apellidos y nombres de los alumnos seleccionados. Crear una aplicacin Web para un empresa de transportes interprovincial que solicite los datos de un pasajero: El tipo de servicio y el Destino (ambos datos deben ser solicitados utilizando dos listas desplegables), dependiendo de la informacin seleccionada, muestre el costo del pasaje y la hora de salida. Utilice la informacin del siguiente cuadro. Nota: No utilice el botn Submit, las listas desplegables deben disparar automticamente el submit al
Pg. 84
seleccionar un elemento. Fije los valores de la lista a fin de que no se pierdan despus de un submit. Tipo de Servicio Bus Cama Ejecutivo Econmico Bus Cama Ejecutivo Econmico Bus Cama Ejecutivo Econmico Destino Tacna Tacna Tacna Cajamarca Cajamarca Cajamarca Huancayo Huancayo Huancayo Costo del Pasaje 120 80 60 85 70 60 45 35 25 Hora de Salida 16:00 14:00 12:00 19:00 18:00 17:00 23:00 22:30 22:00
Crear una aplicacin Web para un empresa de transportes interprovincial que solicite los datos de un pasajero: El tipo de servicio y el Destino (ambos datos deben ser solicitados utilizando dos listas desplegables), dependiendo de la informacin seleccionada, muestre otra la lista desplegable que permita seleccionar el numero de asiento, considere que en el servicio Bus Cama los asientos disponibles son del 1 al 70 y el resto de servicios los asientos disponibles son del 1 al 50. Luego dependiendo de la informacin seleccionada, muestre el costo del pasaje y la hora de salida. Utilice la informacin del siguiente cuadro. Nota: No utilice el botn Submit, las listas desplegables deben disparar automticamente el submit al seleccionar un elemento. Fije los valores de la lista a fin de que no se pierdan despus de un submit. Tipo de Servicio Bus Cama Ejecutivo Econmico Bus Cama Ejecutivo Econmico Bus Cama Ejecutivo Econmico III. BIBLIOGRAFIA
Autor GUTIERREZ RODRIGUEZ, Abraham. Titulo PHP 5 a travs de ejemplos Edicin Editorial Alfa Omega & Rama Editorial 2011 Macro, Ao 2008 2011
Destino Tacna Tacna Tacna Cajamarca Cajamarca Cajamarca Huancayo Huancayo Huancayo
Costo del Pasaje 120 80 60 85 70 60 45 35 25
Hora de Salida 16:00 14:00 12:00 19:00 18:00 17:00 23:00 22:30 22:00
CORONEL, PHP Profesional. Gustavo

IV. AUTOEVALUACION PARA LA UNIDAD 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.
Pg. 85
Defina qu es un Servidor Web Defina que es el Protocolo TCP/IP Cules son los parmetros de la directiva BODY Cules son los parmetros de la directiva FONT Cules son los parmetros de la directiva TABLE / TR /TD Cules son los parmetros de la directiva FORM Indique las directivas para insertar una caja de texto Indique las directivas para insertar una radio buttom Indique las directivas para insertar una lista desplegable Qu es JavaScript Qu son los gestores de eventos Indique el nombre del gestor de evento que actan al abrirse y cerrarse una pgina web Indique el nombre del gestor de evento que acta al cambiar una seleccin dentro de una lista desplegable 14. Indique el nombre del gestor de evento que acta al ingresar un carcter a una caja de texto 15. Cul es la finalidad del objeto document 16. Cul es la finalidad del objeto location 17. Cul es la finalidad del objeto window 18. Cules son los componentes necesarios para trabajar con PHP? 19. Cules son las caractersticas de PHP? 20. Qu es el cdigo embebido 21. Que realiza el siguiente cdigo embebido <? for($i=1;$i<=6;$i++){?> <h<?=$i?>>Hola, Bienvenido a PHP...</h<?=$i?>> <? } ?> 22. Que realiza el siguiente cdigo PHP $ape=$_REQUEST["txtape"]; $eda=$_REQUEST["txteda"]; 23. Que realiza el siguiente cdigo PHP if($benviar=="") { //Si no se presiono el botn enviar? echo "Es mi primera vez que se carga la pgina...<br>"; } 24. Qu realiza el siguiente cdigo PHP if($benviar!="") { //Se presiono el botn enviar? echo "Datos recepcionados...<br>"; echo $ape."<br>"; echo $eda."<br>"; } 25. Qu realiza el siguiente cdigo PHP

<? for($i=1;$i<=$n;$i++){ $vape="txtape".$i; $vnom="txtnom".$i; $vaape=$_REQUEST["$vape"]; $vanom=$_REQUEST["$vnom"]; ?> V. RESOLUCION DEL CUESTIONARIO
Pg. 86
1. Defina qu es un Servidor Web Computador Central que aloja y administra un sitio web (site web). Internet est compuesto de miles de Servidores de este tipo a los cuales los clientes o usuarios acceden a travs de una direccin web. Esto quiere decir que las pginas webs que nosotros visualizamos vienen desde un servidor de Web. 2. Defina que es el Protocolo TCP/IP Es el protocolo de red ms utilizado mundialmente. Un protocolo de red contiene normas y acuerdos que todos los equipos informticos y de telecomunicaciones respetan con la finalidad de lograr una comunicacin estandarizada y universal. Este protocolo permite que los datos se dirijan como paquete de datos desde su fuente a su destino a travs de Internet (IP Internet Protocol) 3. Cules son los parmetros de la directiva BODY background= "nombre del archivo grafico" Indica el nombre de un archivo grfico que servir como "fondo" de nuestra pgina. Si la imagen no rellena todo el fondo del documento, esta ser reproducida tantas veces como sea necesario. Se pueden utilizar imgenes *.jpg, *.bmp. bgcolor = "cdigo de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parmetro background. text = "cdigo de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link = "cdigo de color" Indica el color de los textos que dan acceso a un Hipervnculo. Por defecto es azul. vlink = "cdigo de color"
Pg. 87
Indica el color de los textos que dan acceso a un Hipervnculo que ya hemos visitado con nuestro navegador. Por defecto es prpura. 4. Cules son los parmetros de la directiva FONT size = valor Da al texto un tamao en puntos determinado. size = +/- valor Da al texto un tamao tantas veces superior (+) o inferior (-) como indique el valor. color = "cdigo de color" Escribe el texto en el color cuyo cdigo se especifica. face = "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en las fuentes se usar el font predeterminado del navegador. 5. Cules son los parmetros de la directiva TABLE / TR /TD
<TABLE BORDER=3 CELLPADING=4 CELLSPACING=4 WIDTH=50% ALIGN=CENTER> <TR BGCOLOR=YELLOW> <TD>REGION</TD><TD>CAPITAL</TD> </TR> </TABLE>
6. Cules son los parmetros de la directiva FORM action = "programa" Indica el lugar destino hacia donde se enviarn los datos recogidos en el formulario. method = POST / GET Indica el mtodo de transferencia de datos recogidos por el formulario. El mtodo POST enva datos a travs de la entrada estndar STDIO en otras palabras se pasa los datos codificados en el flujo de datos HTTP y los datos no son visibles para los usuarios. El mtodo GET enva los datos usando la URL. 7. Indique las directivas para insertar una caja de texto <form method=post action=procesa.php> Ingrese sus apellidos <input type=text name=txtapellidos> <form> 8. Indique las directivas para insertar una radio buttom
Seleccione sus temas de inters<br> <input type=radio name=rbidioma value=Ingls>Ingls<br> <input type=radio name=rbidioma value=Frances>Frances<br> <input type=radio name=rbidioma value=Italiano>Italiano<br>
Pg. 88
9. Indique las directivas para insertar una lista desplegable <SELECT NAME=cbociudad > <OPTION value=Lima selected>Lima</OPTION> <OPTION value=Tacna>Tacna</OPTION> <OPTION value=Arequipa>Arequipa</OPTION> <OPTION value=Huaraz>Huaraz</OPTION> </SELECT> 10. Qu es JavaScript Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseado especficamente para el desarrollo de aplicaciones cliente-servidor dentro del mbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos, etc. 11. Qu son los gestores de eventos Los eventos son sucesos que ocurren, en la programacin es lo mismo, los eventos estn asociados a los sucesos que ocurren a un determinado objeto por accin del usuario o por accin del mismo sistema. Se puede asociar a la ocurrencia de un determinado evento la ejecucin de una determinada accin JavaScript. 12. Indique el nombre del gestor de evento que actan al abrirse y cerrarse una pgina web onLoad Cargar un documento en el navegador onUnLoad Salirse o cerrar la pgina. 13. Indique el nombre del gestor de evento que acta al cambiar una seleccin dentro de una lista desplegable onChange Actua al detectar un cambio de seleccin en una lista desplegable 14. Indique el nombre del gestor de evento que acta al ingresar un carcter a una caja de texto onKeyDown Pulsar una tecla Cul es la finalidad del objeto document
Con el objeto document controla la pgina web y todos los elementos que contiene. El objeto document es la pgina actual que se est visualizando en ese momento. Depende
15.
Pg. 89
del objeto window, pero tambin puede depender del objeto frame en caso de que la pgina se est mostrando en un frame.
16. Cul es la finalidad del objeto location Es el encargado de guardar la informacin del URL actual. Cada propiedad posee una parte del URL. Este objeto carece de mtodos y de manejadores de eventos. Su finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL, y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso. 17. Cul es la finalidad del objeto window Este objeto maneja las ventanas emergente o popus que pueden invocarse desde una instruccin JavaScript, existen mtodos para abrir, cerrar o redimensionar la pgina. 18. Cules son los componentes necesarios para trabajar con PHP? Para trabajar con PHP necesitamos instalar los siguientes componentes: Servidor Web: El servidor web para PHP es el Apache Server y puede descargar el instalador de www.apache.org Manejador de Base de Datos: Aunque PHP puede trabajar con mltiples bases de datos, pero el manejador de base de datos que especialmente ha sido creado para trabajar con PHP es el MySQL y se puede descargar desde: http://www.mysql.com Motor de Ejecucin de PHP: Contiene al compilador e interprete de sentencias PHP, la versin actual de PHP es la versin 5, podemos descargarlo de http://www.php.net IDE (Integrated Developer Environment): Contiene al entorno de desarrollo, este programa nos suministra una interfaz con herramientas que facilitan la labor de programacin en PHP. Algunos de estos IDES gratuitos lo podemos conseguir desde la pgina de sus fabricantes. Ejemplo: XAMP, Maguma Studio, WAMP, etc. Tambin podemos utilizar el Macromedia DreamWeaver como diseador de pgina para PHP. 19. Cules son las caractersticas de PHP? Alto rendimiento PHP es muy eficaz Mediante el uso de un nico servidor, puede atender millones de accesos al da. Los indicadores comparativos de rendimiento publicados por Zend Technologies (http://www.zend.com) muestra que PHP supera ampliamente a sus competidores en esta faceta. Interfaces Para Diferentes Sistemas De Base De Datos PHP dispone de una conexin propia a todos los sistemas de base de datos. Adems de MySQL, puede conectarse directamente a las base de datos de PostgreSQL, MySql, Oracle, DBM, etc. El uso de ODBC permite establecer una conexin a cualquier base
Pg. 90
de datos que suministre un controlador ODBC. Entre ellas, se incluyen los productos de Microsoft y muchos otros. Bibliotecas incorporadas para muchas tareas Web habituales Como se ha diseado para su uso en la Web, PHP incorpora una gran cantidad de funciones integradas para realizar tiles tareas relacionadas con la Web. Puede generar imgenes GIF al instante, establecer conexiones a otros servicios de red, enviar electrnicos, trabajar con cookies y generar documentos PDF, todo con unas pocas lneas de cdigo. Es gratuito, es un software libre respaldado por el GNU PHP es gratuito. Puede descargar la ltima versin de http://www.php.net cuando lo desee sin coste alguno. Facilidad de aprendizaje y uso La sintaxis de PHP se basa en otros lenguajes de programacin, principalmente en C y Perl. Si ya conoce estos lenguajes o tal vez conoce Java, no tardar nada en utilizar PHP de manera productiva. Portabilidad PHP est disponible para una gran cantidad de sistemas operativos diferentes. Puede escribir cdigo PHP en todos los sistemas operativos gratuitos de tipo Unix, como Linux y FreeBSD, versiones comerciales de Unix, como Solaris e IRIX o en las diferentes versiones de Microsoft Windows. Su cdigo funcionar sin necesidad de aplicar ninguna modificacin a los diferentes sistemas que ejecute PHP. 20. Qu es el cdigo embebido Es la interaccin del cdigo HTML con cdigo PHP, para darle un aspecto dinmico a la ejecucin del cdigo HTML en el cliente. 21. Que realiza el siguiente cdigo embebido <? for($i=1;$i<=6;$i++){?> <h<?=$i?>>Hola, Bienvenido a PHP...</h<?=$i?>> <? } ?> R. Este cdigo muestra el mismo texto con diferentes tamaos de letras, se utiliza cdigo embed para darle dinamismo al tiempo de ejecucin. 22. Que realiza el siguiente cdigo PHP $ape=$_REQUEST["txtape"]; $eda=$_REQUEST["txteda"];
Pg. 91
R. Este cdigo captura los valores enviados desde un formulario a travs de las cajas de texto txtape y txteda 23. Que realiza el siguiente cdigo PHP if($benviar=="") { //Si no se presiono el botn enviar? echo "Es mi primera vez que se carga la pgina...<br>"; } R. Este cdigo evala si se la variable benviar no tiene datos (esta variable captura datos, si aun no se ha realizado un submit, esta variable se encontrar vacia) 24. Qu realiza el siguiente cdigo PHP if($benviar!="") { //Se presiono el botn enviar? echo "Datos recepcionados...<br>"; echo $ape."<br>"; echo $eda."<br>"; } R. Este cdigo evala si se la variable benviar tiene datos (esta variable captura el dato enviado por el botn enviar, si tiene datos es porque se ha realizado un submit) 25. Qu realiza el siguiente cdigo PHP <? for($i=1;$i<=$n;$i++){ $vape="txtape".$i; $vnom="txtnom".$i; $vaape=$_REQUEST["$vape"]; $vanom=$_REQUEST["$vnom"]; ?> R. Este cdigo captura los datos de diferentes cajas de texto en tiempo de ejecucin.

Separata LP1 Unidad 1

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Separata LP1 Unidad 1

Încărcat de

Drepturi de autor:

Formate disponibile

Separata preparada para el desarrollo del curso de:

Primera Unidad Temtica: FUNDAMENTOS DE LA PROGRAMACION WEB

Facultad de Ingeniera de Sistemas

Universidad Privada Telesup

PRIMERA SEMANA Marco Terico

Tpicos bsicos de la programacin web Cliente usando HTML

Universidad Privada Telesup

Universidad Privada Telesup

CONSTRUCCION Y MODIFICACIN DE UNA PGINA WEB

Universidad Privada Telesup

Universidad Privada Telesup

Ejemplo : Directiva cerrada (Tiene un inicio y fin)

El texto comprendido entre las directivas se presentar centrado.

Ejemplo : Directiva abierta (Solo indica una accin) <HR>

Representa una accin: Crea una lnea horizontal.

Ejemplo: Directiva con parmetros <BODY bgcolor=yellow> </BODY>

Universidad Privada Telesup CABECERA DEL DOCUMENTO

Universidad Privada Telesup CUERPO DEL DOCUMENTO

Universidad Privada Telesup

En Numeracin Decimal 170 117 51

Rango Disponible en Numeracin Decimal 0 a 255 0 a 255 0 a 255

Universidad Privada Telesup

A continuacin veamos una tabla con las principales entidades:

Universidad Privada Telesup

Universidad Privada Telesup

Universidad Privada Telesup

Universidad Privada Telesup

CABECERAS (Tipos de texto para cabeceras)

ATRIBUTOS DEL TEXTO

Subrayado <U></U> Tachado Parpadeo

Superndice <SUP></SUP> Subndice Centrado

<CENTER></CENTER> <CENTER>Texto de prueba</CENTER>

Universidad Privada Telesup

<FONT size=+2 color="#FF0000 face="Arial"> Texto de prueba Texto </FONT> prueba

Universidad Privada Telesup

Universidad Privada Telesup

A. Espaa B. Francia C. Italia D. Portugal

Universidad Privada Telesup

Espaa Francia Italia Portugal

Universidad Privada Telesup

Si el navegador no pudiese visualizar el grfico.....

<IMG src="caution.gif" width=100>

<IMG src="caution.gif" height=20> Atencion !!! <IMG src="caution.gif" align=TOP>Atencion !!!

<IMG src="caution.gif" align=MIDDLE>Atencion !!!

Universidad Privada Telesup

<IMG src="caution.gif" align=BOTTOM>Atencion !!!

Universidad Privada Telesup

Universidad Privada Telesup

Universidad Privada Telesup

Universidad Privada Telesup

Universidad Privada Telesup

Universidad Privada Telesup

CONTROL CUADRO DE TEXTO

Universidad Privada Telesup

CUADRO DE TEXTO PARA PASSWORD

CASILLA DE VERIFICACIN (CHECKBOX)

Universidad Privada Telesup BOTON DE OPCION (RADIO)

BOTON DE COMANDO PARA ENVIO DE DATOS

BOTON DE COMANDO PARA CANCELAR ENVIO DE DATOS

Universidad Privada Telesup

LISTA DESPLEGABLE (ComboBox)

CONTROL DE AREA DE TEXTO

Universidad Privada Telesup

Universidad Privada Telesup

1. <html> 2. <head> 3. <title>Documento sin título</title>