Lab Oratorio 1

Aplicaciones Web HTML y JavaScript
LABORATORIO
Objetivos: Reconocer las etiquetas bsicas del lenguaje HTML. Escribir pginas HTML. Escribir formularios HTML. Escribir funciones en lenguaje JavaScript para la validacin de formularios. PRIMERA PGINA HTML Desarrollar la primera pgina HTML llamada primera.html, que tenga como contenido el texto Primera Pgina HTML. BLOQUES HTML
Ingrese el cdigo HTML en esta columna
Inicio de Pgina HTML Cabecera HTML
<html>
<head> </head>
Cuerpo HTML
<body> </body>
</html>
Fin de Pgina HTML

-
PROPIEDADES BSICAS DE CABECERA La Cabecera permite definir o configurar diferentes parmetros de una pgina HTML. Las principales etiquetas de la cabecera son: <TITLE>: Define el Ttulo de la Pgina (mostrado en la barra de ttulo) <LINK>: Define una referencia de recurso <META>: Contiene informacin general de la pgina (palabras claves, descripcin, etc) En la cabecera tambin podemos agregar informacin de la pgina.
<meta <meta <meta <meta <meta <meta <meta name="title" content="EMPRESA DESARROLLO WEB PERU> name="keywords" content="desarrollo php peru, php5, capacitacin, programacin> name="description" content=" Empresa especializada en el desarrollo Web"> name="author" content=" EMPRESA DESARROLLO WEB PERU "> name="DC.Creator" content=" EMPRESA DESARROLLO WEB PERU> http-equiv="keywords" content=" desarrollo php peru, php5, capacitacin"> http-equiv="description" content="Empresa especializada en el desarrollo Web>
PROPIEDADES DE CUERPO
Pg. 1
Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com
Si bien la creacin del cuerpo de HTML comprende una sola etiqueta (<BODY>) podemos configurar algunos parmetros comunes a todo el cuerpo. Defina la funcin de los siguientes parmetros: bgcolor background leftmargin topmargin marginwidth marginheight
FORMATO DE TEXTO La etiqueta ms utilizada en el diseo de pginas Web es <FONT> (que representa las fuentes). Existen otras etiquetas que permiten formatear un texto. A continuacin defina la funcin de las siguientes etiquetas: <B> <I> <U> <S> <SUB> <SUP> <BIG> <SMALL> <BLINK> <H1>
LISTAS Las listas HTML permiten ordenar algunos elementos. HTML soporta diferentes tipos de listas: Listas de definicin, listas ordenadas, listas desordenadas, etc.
Pg. 2
Ejercicio: Crear una lista de definicin HTML <DL> <LH>Cabecera de Lista</LH> <DT>Elemento 1 <DD>Descripcin de Elemento 1. <DT> Elemento 2 <DD> Descripcin de Elemento 2. </DL> Ejercicio: Crear una lista ordenada HTML <OL> <LI TYPE="A"> Elemento <LI TYPE="a"> Elemento <LI TYPE="I"> Elemento <LI TYPE="i"> Elemento <LI TYPE="1"> Elemento </OL> Ejercicio: Crear una lista desordenada HTML <UL> <LI TYPE="CIRCLE"> Elemento <LI TYPE="DISC"> Elemento <LI TYPE="SQUARE"> Elemento </UL> ENLACES DE PGINA Existen dos tipos de enlaces HTML: enlaces a otras pginas y enlaces en una misma pgina. La diferencia de enlaces se puede apreciar en el cdigo: Enlace a otra pgina: <a name=otra href=otrapagina.htmll>Otra Pagina</a> Enlace en una misma pgina: <a name=ancla> <a name=misma href=#ancla>Misma Pagina</a>
TABLAS HTML <table border=1> <tr> <th>ID</th><th>Nombre</th> </tr>
Pg. 3
<tr> <td>1</td><td>David</td> </tr> <tr> <td>2</td><td>Juan</td> </tr> </table> ETIQUETA FORM La etiqueta <FORM> permite crear un entorno de formularios. Esta etiqueta es la base para la creacin de formularios HTML. Ejercicio: Desarrollar una pgina con un cuerpo de formulario.
Escriba el cdigo de la pgina a continuacin:

<HTML><BODY> <FORM name=uno action=destino1.html method=post> </FORM> </BODY></HTML>
Defina las propiedades del formulario: name: action: method:
OBJETOS DE CONTROL DE FORMULARIO Existen dos objetos que permiten controlar un formulario. Estos objetos representan los siguientes eventos:

RESET : SUBMIT :
Estos eventos se manejan por medio de botones predefinidos. Para manejarlos manualmente se debe utilizar JavaScript: <input type=Submit name=boton1 value=Aceptar> <input type=Reset name=boton2 value=Cancelar>
Pg. 4
Ejercicio: Desarrollar un formulario HTML que contenga: Un botn Submit. Un botn Reset.

<HTML><BODY> <FORM name=uno action=destino1.htmll method=post> <input type=Submit name=boton1 value=Aceptar> <input type=Reset name=boton2 value=Cancelar> </FORM> </BODY></HTML>
OBJETOS DE DATOS DE FORMULARIO Los formularios HTML son los componentes HTML que permiten al usuario ingresar datos. Mediante el uso de lenguajes de programacin orientados a Web podemos procesar esos datos y mostrar un resultado en HTML. Existen diferentes tipos de ingreso de datos, cada uno representado en un objeto distinto. Defina el uso de los siguientes objetos: <input type=text name=nombre > : <input type=password name=clave>: <select name=tipo> <option value=E>Estudiante <option value=P>Profesor </select>: <input type="radio" name="sexo" value="m">: <input type="checkbox" name="intereses" value="0">: <textarea name="comentario" cols="50" rows="4"></textarea>: Ejercicio: Crear un formulario HTML que tenga la siguiente estructura o contenido.
Pg. 5
Pg. 6
JavaScript 1. Crear un archivo js01.html cuyo contenido sea el siguiente:
<html><head> <title>JS 01</title> <script> /* Comentario de varias lneas Linea 1 Linea 2*/ numero = 3; cadena = 'Hola Tecsup\nLnea nueva\tTabulacion\n\'Holas\'\n\"MUNDO\"\\'+ "\n Adios" vf=true v1 = ['Navidad',28] </script> </head><body> <script> //Comentario de una lnea alert(cadena); alert(v1[0]) alert(v1[1]+4); document.write('Numero = '+ numero*2 +'<br>'); document.write('Booleano = '+ vf +'<br>'); document.write('Vector = '+ v1); </script> </body></html>
2.
Crear un archivo js02.html cuyo contenido sea el siguiente:
<html><head> <title>JS 02</title> <script> //Variables globales var a="global"; b="fuera"; function local() { //Variable local declarada var a="local"; alert(a); alert(b); alert(c); } function global() { //Variable local no declarada c = "dentro"; alert(a); alert(b); alert(c); } </script>
Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com Pg. 7
</head><body><form> <input type="Button" value=local onclick=local()> <input type="Button" value=global onclick=global()> </form></body></html>
3.
<html><head><title>JS 03</title> <script> v_vector=["jueves",22,'mayo']; v_vector[10]='Tecsup'; alert(v_vector[0] v_vector[3]); alert(v_vector);
', '
v_vector[1] +' de '+v_vector[2]+' - '+
o_vector=new Array(); o_vector=["miercoles",21,'mayo']; o_vector[10]='Tecsup'; alert(o_vector[0]+', '+o_vector[1]+' de '+o_vector[2]+' - '+ o_vector[3]); alert(o_vector); </script> </head><body></body></html>
4.
<html><head><title>JS 04</title> <script> persona1 = ['Juan',"Perez"]; persona2 = new Array(); persona2[0] = 'Jorge'; persona2[1] = "Lpez"; alumno = [persona1,"ESTU"]; docente = [persona2,'PROF']; tecsup = [alumno,docente]; </script></head><body><table> <tr> <td colspan=4>Tecsup</td> <td><script>document.write(tecsup);</script></td> </tr><tr> <td>L</td> <td colspan=3>Alumno</td> <td><script>document.write(tecsup[0]);</script></td> </tr><tr> <td>| </td><td>L</td> <td colspan=2>Persona1</td> <td><script>document.write(tecsup[0][0]);</script></td> </tr><tr> <td>| </td><td> </td><td>L</td> <td>Persona1.Apellido</td>
<td><script>document.write(tecsup[0][0][1]);</script></td> </tr><tr> <td>L</td> <td colspan=3>Docente</td> <td><script>document.write(tecsup[1]);</script></td> </tr><tr> <td> </td><td>L</td> <td colspan=2>Persona2</td> <td><script>document.write(tecsup[1][0]);</script></td> </tr><tr> <td> </td><td> </td><td>L</td> <td>Persona2.Nombre</td> <td><script>document.write(tecsup[1][0][0]);</script></td> </tr></table></body></html>
5.
<html><head> <title>JS 05</title> <script> a=1; b='1'; c="1"; alert(a==b); alert(b==c); alert(a==c); alert(a!=b); alert(b!=c); alert(a!=c); alert(a==b); alert(!a==b); alert ((a==b) && (a===b)); alert ((a==b) && (a===a)); alert ((a==b) || (a===b)); alert ((a===b) || (a!==a)); </script> </head><body></body></html>
6.
<html><head> <title>JS 06</title> </head><body> <script> a=5; b=2; a+=b; document.write('a+=b ->'+ a +'<br>'); a-=b document.write('a-=b ->'+ a +'<br>'); a/=b
document.write('a/=b ->'+ a +'<br>'); a*=b document.write('a*=b ->'+ a +'<br>'); a%=b document.write('a%=b ->'+ a +'<br>'); </script> </body></html>
7.
<html><head><title>JS 07</title> <script> var a=prompt('Ingrese un nmero',5); if(a>5) { b='a es mayor que 5'; document.write('Ingres al IF<br>'); } else b='a es menor o igual que 5'; document.write(b); </script> </head><body></body></html> 8. Crear un archivo js08.html cuyo contenido sea el siguiente:
<html><head> <title>JS 08</title> <script> v=parseInt(prompt('Ingrese un nmero')); switch(v) { case 1: document.write('Ingres el nmero 1'); alert('Nmero '+ v); break; case 2: document.write('Ingres el nmero 2'); alert('Nmero '+ v); break; default: document.write('Ingres un nmero diferenta a 1 o 2'); alert('x defecto'); } </script> </head><body></body></html>
9.
<html><head> <title>JS 09</title> <script> numero=parseInt(prompt('Ingrese un nmero'));

while(numero<=5) { document.write('While Nro. '+ numero +'<br>'); numero++; } do { document.write('Do While Nro.'+ numero +'<br>'); numero++; } while(numero<=10); for(v=numero; v<=15; v+=2) { document.write('For Nro. '+ v +'<br>'); } </script> </head><body></body></html>
EJERCICIO: Seleccin de fechas con JavaScript <html> <head> <script language="javascript" type="text/javascript" src="datetimepicker.js"> </script> </head> <body> Seleccionar Fecha: <form name=" " method="post" action=""> <input name="inicio_evento" type="text" id="inicio_evento" class="caja_fecha"> <a href="javascript:NewCal('inicio_evento','ddmmmyyyy',true,12)"> <img src="cal.gif" width="16" height="16" border="0" alt="Seleccione la fecha y hora"> </a> </form> </body> </html> Nota: El archivo datetimepicker.js ser proporcionado por el profesor.
Pg. 11
EJERCICIO: Validacin de Formularios con JavaScript <html> <head> <script language="Javascript"> function validar(){ var n = document.f1.nom.value; var c = document.f1.clave.value; if (n == ""){ alert('Ingrese nombre'); return false; } else if( c == ""){ alert('Ingrese clave'); return false; } return true; } </script> </head> <body> <form name="f1" action="" method="" onSubmit="return validar();"> Nombre: <input type="text" name="nom"> <br/> Clave: <input type="password" name="clave"> <br/> <input type="submit" value="Enviar"> </form> </body> </html>
Conclusiones: En la presente sesin, se detall la estructura de los documentos HTML con la finalidad de embeber cdigo PHP cuando lo necesitemos. Adems, se detall la creacin de formularios HTML, los cuales son las vas de ingreso de datos al servidor. Finalmente, se detall los fundamentos y sintaxis del lenguaje JavaScript, el cual sirve para realizar validaciones en las pginas HTML.
Pg. 12

Lab Oratorio 1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lab Oratorio 1

Cargado por

Copyright:

Formatos disponibles

Aplicaciones Web HTML y JavaScript

Ingrese el cdigo HTML en esta columna

Inicio de Pgina HTML Cabecera HTML

Fin de Pgina HTML

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

Aplicaciones Web HTML y JavaScript

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

Aplicaciones Web HTML y JavaScript

TABLAS HTML <table border=1> <tr> <th>ID</th><th>Nombre</th> </tr>

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

Aplicaciones Web HTML y JavaScript

Escriba el cdigo de la pgina a continuacin:

Defina las propiedades del formulario: name: action: method:

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

Aplicaciones Web HTML y JavaScript

Escriba el cdigo de la pgina a continuacin:

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

Aplicaciones Web HTML y JavaScript

Escriba el cdigo de la pgina a continuacin:

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

Aplicaciones Web HTML y JavaScript

JavaScript 1. Crear un archivo js01.html cuyo contenido sea el siguiente:

Crear un archivo js02.html cuyo contenido sea el siguiente:

Aplicaciones Web HTML y JavaScript

Crear un archivo js03.html cuyo contenido sea el siguiente:

<html><head><title>JS 03</title> <script> v_vector=["jueves",22,'mayo']; v_vector[10]='Tecsup'; alert(v_vector[0] v_vector[3]); alert(v_vector);

v_vector[1] +' de '+v_vector[2]+' - '+

Crear un archivo js04.html cuyo contenido sea el siguiente:

Aplicaciones Web HTML y JavaScript

Crear un archivo js05.html cuyo contenido sea el siguiente:

Crear un archivo js06.html cuyo contenido sea el siguiente:

Aplicaciones Web HTML y JavaScript

Crear un archivo js07.html cuyo contenido sea el siguiente:

Crear un archivo js09.html cuyo contenido sea el siguiente:

<html><head> <title>JS 09</title> <script> numero=parseInt(prompt('Ingrese un nmero'));

Aplicaciones Web HTML y JavaScript

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

Aplicaciones Web HTML y JavaScript

Ing Sergio Chapoan Chapoan, email: sersystemperu@gmail.com

También podría gustarte