Your SlideShare is downloading. ×
Laboratorio 03
Laboratorio 03
Laboratorio 03
Laboratorio 03
Laboratorio 03
Laboratorio 03
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Laboratorio 03

149

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
149
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Web GUÍA DE LABORATORIO N° 03 - CSSOBJETIVOS: Creación de hojas de estilo CSS, con modificaciones específicas y generales en una documentoHTML Creación de la hoja de estilos Abra su editor Notepad++ y proceda ingresar el siguiente código y guárdelo con el nombre, extensión y en la carpeta correspondiente Capas: css21.css Capas: EJEMPLO21-CSS.HTML #diez_de_diamantes { <html> position: absolute; <head> left: 100px; top: 100px; <title>Ejemplo: Capas</title> z-index: 1; <link rel="stylesheet" href="css/css21.css" type="text/css" media="all" /> } </head> #sota_de_diamantes { <body> position: absolute; left: 115px; <h1>Escalera de color</h1> top: 115px; <div id="diez_de_diamantes"> z-index: 2; <img src="graficos/diamonds_10.gif" alt="diez de diamantes"> } </div> #reina_de_diamantes { <div id="sota_de_diamantes"> position: absolute; left: 130px; <img src="graficos/diamonds_jack.gif" alt="sota de diamantes"> top: 130px; </div> z-index: 3; <div id="reina_de_diamantes"> } <img src="graficos/diamonds_queen.gif" alt="reina de diamantes"> #rey_de_diamantes { </div> position: absolute; left: 145px; <div id="rey_de_diamantes"> top: 145px; <img src="graficos/diamonds_king.gif" alt="rey de diamantes"> z-index: 4; </div> } <div id="as_de_diamantes"> #as_de_diamantes { position: absolute; <img src="graficos/diamonds_ace.gif" alt="as de diamantes"> left: 160px; </div> top: 160px; </body> z-index: 5; </html> }Más aplicaciones: css22.cssBODY { Font-Family: Arial; Font-size: 8pt; Color: black; /*background-image: url(../images/page_bg.png);*/ }P { Font-Family: Verdana, Arial; Font-size: 10pt; Color: black; }H1 { Font-Family: Arial; Font-size: 14pt; Color: rgb(0,0,153); }H2 { Font-Family: Arial; Font-size: 12pt; Color: rgb(0,0,153); }A { COLOR: #000080 }A:hover { COLOR: #FF0033 }Docente: Mgr. David Caipa Mamani Prac01 (1 de 6)
  • 2. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Web.tabla { Font-Family:Verdana, Arial, Helvetica, sans-serif; Font-size: 10pt; font-weight:bold; background:#FFFFFF; color: #FFFFFF; text-align: center; border: 1px solid #006699; }.titulotabla { Font-Family:Verdana, Arial, Helvetica, sans-serif; Font-size: 10pt; font-weight:bold; background:#006699; color: #FFFFFF; text-align: center; padding-top:5px; text-transform: uppercase; }.titulo { Font-Family:Arial, Helvetica, sans-serif; Font-size: 8pt; font-weight:bold; background:#FFFFFF; color: #000099; text-align: center; border: 1px solid #006699; text-transform: uppercase; }.lcelda { Font-Family:Arial, Helvetica, sans-serif; Font-size: 8pt; color:#000000; background: #FFFFFF; text-align: right; }.dcelda { Font-Family:Verdana, Arial, Helvetica, sans-serif; Font-size: 10pt; color: rgb(0,0,128); background:#FFFFFF; text-align: left; }.piecelda { Font-Family:Verdana, Arial, Helvetica, sans-serif; Font-size: 10pt; color: rgb(0,0,128); background:#FFFFFF; text-align: center; padding-bottom:10px; }.texto { Font-Family:Arial, Helvetica, sans-serif; Font-size: 9pt; color: rgb(0,0,128); }.listado { Font-Family:Arial, Helvetica, sans-serif; Font-size: 8pt; color:#000000; background-color:#FFFFCC; }.pie { Font-Family: Arial; Font-size: 9pt; color: rgb(0,0,0); }Más ejemplos: EJEMPLO22-CSS.HTML<html><head><title>Probando mis estilos</title><link rel="stylesheet" href="css/css22.css"></head><body><p class="titulo">instituto superior tecnológico público<br>"francisco de paulagonzáles vigil"<br>carrera profesional de computación e informática</p><p class="titulotabla">curso: proyectos web<br>docente: David Caipa Mamani</p></body></html>Docente: Mgr. David Caipa Mamani Prac01 (2 de 6)
  • 3. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Web1. VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT  ¿Qué es JavaScript? JavaScript es un lenguaje de programación utilizado para crear páginas web dinámicas, que incorpora efectos como textos que aparecen y desaparecen, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.  ¿Qué es JavaScript? La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C. Las normas básicas que definen la sintaxis de JavaScript son las siguientes:  No se tienen en cuenta los espacios en blanco y las nuevas líneas  Se distinguen las mayúsculas y minúsculas  No se define el tipo de las variables  No es necesario terminar cada sentencia con el carácter de punto y coma (;)  Se pueden incluir comentarios  Evita depender del servidor Web para cálculos sencillos.  Capturar los eventos generados por el usuario y responder a ellos sin salir a Internet.  Simular el comportamiento de las macros CGI cuando no es posible usarlas.  Comprobar los datos que el usuario introduce en un formulario antes de enviarlos.  Comunicarse con el usuario mediante diversos métodos. EJEMPLO 1 - Hola Mundo: ejem1-js.html EJEMPLO 3 – Última modificación: ejem3-js.html <html><head> <html> <title>Última modificación</title> <head> <script type="text/javascript"> <title>El primer script</title> alert("Verficar la fecha !!!!"); <script type="text/javascript"> </script> </head> Alert ("Hola Mundo!"); <body> </script> <h2>Ejemplo de Fecha con JavaScript</h2> </head> <br><br><br><br><br><br><br> <body> <div align="center"> Última modificación: <p>Esta página contiene un script usando <script language="javascript"> type</p> document.write(document.lastModified); </body> </script> </html> </div> </body> </html> EJEMPLO 2 - Hola Mundo: ejem2-js.html <html> EJEMPLO 4 – Color de fondo: ejem4-js.html <head> <html><head> <title>El primer script</title> <title>Cambiando color de fondo</title></head> </head> <body> <body> Cambio de color de fondo <p>Esta página contiene un script usando <br><br><br><br><br><br><br> language</p> <script> <script language="javascript"> alert("Ahora el fondo será color Rojo..."); Alert ("Hola Mundo!"); document.bgColor="#ff0000"; </script> </script> </body> </div> </html> </body> </html>  Validación de formularios utilizando CSS y JavaScript La validación de un formulario consiste en llamar a una función de validación cuando el usuario pulsa sobre el botón de envío del formulario. En esta función, se comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicación.Docente: Mgr. David Caipa Mamani Prac01 (3 de 6)
  • 4. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEJEMPLO 5 - Validación de campo vacío en el Nombre: {ejem5-js.html alert("no ha llenado todos los datos..."); return false;<HTML><HEAD><TITLE>Ejemplo 5: Validación de campo }vacío en el Nombre</TITLE> else<STYLE type="text/css"> { Body { return true; background-color: #cccccc; } } }</STYLE> </SCRIPT></HEAD><SCRIPT> <BODY> function validar (form1) <H1>Validación de Formularios</H1> { <FORM id="form1" name="form1" ACTION="" if (document.form1.nombre.value=="" ) METHOD="POST" onsubmit="return validar()"> { Nombre: <INPUT TYPE="text" NAME="nombre"><BR> Alert ("Debe ingresar su Nombre…...."); Apellido: <INPUT TYPE="text" NAME="apellido"><BR> return false; E-Mail:<INPUT TYPE="text" NAME="email" ><BR> } Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR> else Comentario:<textarea NAME="comentario" cols="20" { rows="2" ></textarea><BR><BR> return true; <INPUT TYPE="submit"><INPUT TYPE="Reset"> } </FORM></BODY></HTML> }</SCRIPT> EJEMPLO 7 - Validar individualmente cada uno de los</HEAD><BODY> campos de un formulario: ejem7-js.html<H1>Validación de Formularios</H1> <HTML><FORM ID="form1" NAME="form1" ACTION="" <HEAD> METHOD="POST" ONSUBMIT="return validar()"> <TITLE>Ejemplo 7: Validar individualmente cada campoNombre: <INPUT TYPE="text" NAME="nombre"><BR> </TITLE>Apellido: <INPUT TYPE="text" NAME="apellido"><BR> <style type="text/css">E-Mail:<INPUT TYPE="text" NAME="email" ><BR> body{Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR> background-color:#cccccc;Comentario:<textarea NAME="comentario" cols="20" } rows="2" ></textarea> <BR><BR> </style><INPUT TYPE="submit"><INPUT TYPE="Reset"> <script></FORM></BODY></HTML> function validar(form1) {EJEMPLO 6 - Validar todos los campos de un formulario: if (document.form1.nombre.value=="" )ejem6-js.html {<HTML> alert("Debe llenar su nombre...");<HEAD> document.form1.nombre.focus();<TITLE>Ejemplo 6: Validar todos lo campos del formulario return false;</TITLE> }<style type="text/css"> else if (document.form1.apellido.value=="") body{ { background-color:#cccccc; alert ("Debe llenar su apellido..."); } document.form1.apellido.focus();</style> return false;<SCRIPT> } function validar(form1) else if (document.form1.email.value=="") { { if (document.form1.nombre.value=="" || alert ("Debe llenar su correo electrónico..."); document.form1.apellido.value=="" || document.form1.email.focus(); document.form1.email.value=="" || return false; document.form1.telefono.value=="" || } document.form1.comentario.value=="") else if (document.form1.telefono.value=="")Docente: Mgr. David Caipa Mamani Prac01 (4 de 6)
  • 5. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Web { { alert ("Debe llenar su teléfono..."); alert("Debe ingresar sólo números en el document.form1.telefono.focus(); campo teléfono.."); return false; document.form1.telefono.focus(); } return false; else if (document.form1.comentario.value=="") } { else alert ("Debe escribir un comentario..."); { document.form1.comentario.focus(); alert("Envío satisfactorio de teléfono..."); return false; return true; } } else } { </script> alert("Envío satisfactorio..."); <BODY> return true; <H1>Validación de Formularios</H1> } <FORM id="form1" name="form1" action="" } method="post" onsubmit="return validar()"></script> Nombre: <INPUT TYPE="text" NAME="nombre"><BR></HEAD> Apellido: <INPUT TYPE="text" NAME="apellido"><BR><BODY> E-Mail:<INPUT TYPE="text" NAME="email" ><BR><H1>Validación de Formularios</H1> Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR><FORM id="form1" name="form1" action=" " Comentario:<textarea NAME="comentario" cols="20" method="post" onsubmit="return validar()"> rows="2" ></textarea><BR><BR>Nombre: <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit" VALUE="Enviar">Apellido: <INPUT TYPE="text" NAME="apellido"><BR> <INPUT TYPE="Reset" value="Limpiar">E-Mail:<INPUT TYPE="text" NAME="email" ><BR> </FORM>Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR> </BODY>Comentario:<textarea NAME="comentario" cols="20" </HTML> rows="2" ></textarea><BR><BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TAREA:TYPE="Reset" value="Limpiar"> Ubicar cada uno de los</FORM></BODY></HTML> campos en una tablaEJEMPLO 8 - Validar el campo Teléfono: ejem8-js.html EJEMPLO 9 - Validar el campo E-Mail: ejem9-js.html<HTML> <HTML><HEAD><TITLE>Ejemplo 8: Validación de números en el <HEAD>teléfono</TITLE> <TITLE>Ejemplo 9: Validación de E-Mail</TITLE><style type="text/css"> <style type="text/css"> body{ body{ background-color:#ffcc00; background-color:#ffcc00; } }</style> </style></HEAD> <script><script> function validar(form1) function validar(form1) { { var ok="no"; var ok="yes"; var temp; var temp; var valid="@"; var valid="0123456789"; var valor2=document.form1.email.value; var valor2=document.form1.telefono.value; for (var i=0; i<valor2.length; i++) for (var i=0; i<valor2.length; i++) { { temp=""+valor2.substring(i,i+1); temp=""+valor2.substring(i,i+1); if (valid.indexOf(temp)!= "-1") if (valid.indexOf (temp)== "-1") ok="yes"; ok="no"; } } if (ok=="no")Docente: Mgr. David Caipa Mamani Prac01 (5 de 6)
  • 6. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Web if (ok=="no") if (nombre.length==0 ) { { alert("Debe ingresar un E-Mail correcto .........."); alert ("Debe ingresar un Nombre…...."); document.form1.email.focus(); return false; return false; } } else else { { if(correo.length==0) alert("Envío satisfactorio de E-Mail..."); { return true; alert ("Debe ingresar un E-Mail…...."); } return false; } }</script> else</HEAD> {<BODY> return true;<H1>Validación de Formularios</H1> }<table width="349" border="2"> }<FORM id="form1" name="form1" ACTION="" } METHOD="POST" onsubmit="return validar()"> </SCRIPT> <tr> </HEAD> <td height="30">E-Mail:</td> <BODY> <td><INPUT TYPE="text" NAME="email" ></td> <H1>Validación de Formularios con varibles... y el </tr> resultado en otra Página</H1> <tr> <FORM ID="form1" NAME="form1" METHOD="POST" <td height="32"><INPUT TYPE="submit" ONSUBMIT="return validar()" ACTION="resultado.html"> VALUE="Enviar"></td> Nombre: <INPUT TYPE="text" NAME="txtnombre"><BR> <td><INPUT TYPE="Reset" value="Limpiar"></td> E-Mail:<INPUT TYPE="text" NAME="txtemail" ><BR> </tr> <INPUT TYPE="submit" value="Enviar"><INPUT</table> TYPE="Reset" value="Limpiar"></FORM> </FORM></BODY> </BODY></HTML> </HTML>EJEMPLO 10 - Validar con variables: ejem10-js.html resultado.html<HTML> <html><HEAD> <head><TITLE>Validación de formularios con variables</TITLE> <title> Resultado</title><SCRIPT Type="text/javascript"> </head> function validar () <body> { <h2>Página de Resultado... Envió correcto de datos</h2> nombre=document.form1.txtnombre.value; </body> correo=document.form1.txtemail.value; </html>Docente: Mgr. David Caipa Mamani Prac01 (6 de 6)

×