Guía de Laboratorio 1-Gc-26.09.17

Universidad Nacional del Santa Laboratorio1-Aplicaciones Web
GUA DE LABORATORIO 1
Aplicaciones Web HTML y JavaScript
EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 1

LABORATORIO 1
Objetivos:
Reconocer las etiquetas bsicas del lenguaje HTML.

Escribir pginas HTML.
Escribir formularios HTML.
Escribir funciones en lenguaje JavaScript para la validacin de formularios.
Equipos, Materiales, Programas y Recursos:
Sistema Operativo Windows.

Navegador Web.
Editor de texto.
Introduccin:
En este laboratorio crearemos las primeras pginas HTML desde cdigo fuente. Al mencionar
desde cdigo fuente hacemos referencia a que no utilizaremos alguna herramienta de diseo
Web. En los primeros ejercicios utilizaremos el Bloc de Notas.
Seguridad:
Ubicar maletines y/o mochilas al final del aula de laboratorio.

No ingresar con lquidos ni comida al aula de laboratorio.
Al culminar la sesin de laboratorio, apagar correctamente la computadora y el
estabilizador.
Preparacin:
Durante el desarrollo de los temas de clase se tendrn ejercicios explicativos en cada uno de
los puntos, ello le dar a la sesin una interaccin de la teora y la parte prctica, ya que en
todo el momento el alumno podr comprobar en su propia PC, todos los tems del manual.
Procedimiento y Resultados:
1. 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
2. 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 name="title" content="EMPRESA DESARROLLO WEB PERU>

<meta name="keywords" content="desarrollo php peru, php5, capacitacin, programacin>
<meta name="description" content=" Empresa especializada en el desarrollo Web">
<meta name="author" content=" EMPRESA DESARROLLO WEB PERU ">
<meta name="DC.Creator" content=" EMPRESA DESARROLLO WEB PERU>
<meta http-equiv="keywords" content=" desarrollo php peru, php5, capacitacin">
<meta http-equiv="description" content="Empresa especializada en el desarrollo Web>
3. PROPIEDADES (ATRIBUTOS) DE CUERPO
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

4. 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>
5. LISTAS
Las listas HTML permiten ordenar algunos elementos. HTML soporta diferentes tipos
de listas: Listas de definicin, listas ordenadas, listas desordenadas, etc.
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>
<li type="a"> Elemento</li>
<li type="I"> Elemento</li>
<li type="i"> Elemento</li>
<li type="1"> Elemento</li>
</ol>
Ejercicio: Crear una lista desordenada HTML
<UL>
<LI TYPE="CIRCLE"> Elemento
<LI TYPE="DISC"> Elemento
<LI TYPE="SQUARE"> Elemento
</UL>

6. 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>
7. TABLAS HTML
<table border="1" cellspacing="0"

cellpadding="3 width="700">
<tr>
<th>ID</th><th>Nombre</th>
</tr>
<tr>
<td>1</td><td>Jorge</td>
</tr>
<tr>
<td>2</td><td>Santiago</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="3" width="700">

<caption>Lista de Usuarios</caption>
<colgroup>
<col width="60" />
<col width="500" />
<col width="140" />
</colgroup>
<thead>
<tr>
<th>Codigo</th>
<th>Nombre</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">100</td>
<td>jorge</td>
<td><a ref="mailto:jorgesam@gmail.com">jsam@gmail.com</a></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="3">1 Registro encontrado</td>
</tr>
</thead>
</table>
8. 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:
9. GESTIONAR MARCOS (FRAMES)
Los marcos son instrumentos que forman ya parte habitual del web y que los navegadores
gestionan hoy da a la perfeccin. Los detractores de los marcos afirman la inutilidad de
subdividir ulteriormente las pginas web, las cuales, en ltima instancia, pueden resultar
poco legibles. Otros, como yo, consideran que los marcos pueden llegar a ser muy tiles
ya que se evita cargar las mismas imgenes y se mantienen ordenados el contenido y la
estructura del sitio. Naturalmente, abusar de los marcos puede producir como resultado
psimas impostaciones grficas, obteniendo un efecto contrario al previsto.
Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas
de navegacin grfica destinados a invidentes, los cuales se bloquean impidiendo la lectura
de las pginas.
Una buena solucin es crear una versin con marco y una versin sin marco para notar la
diferencia.

Cmo se crean los marcos?

Antes de nada, repasemos rpidamente las marcas HTML de gestin de
marcos.
N2.0 Documento <FRAMESET></FRAMESET> (en lugar de

Marco <BODY>)
N2.0 altura en filas <FRAMESET (pxel %)
ROWS=,,,></FRAMESET>
N2.0 altura en filas <FRAMESET (* = tamao
ROWS=*></FRAMESET> relativo)
N2.0 anchura en <FRAMESET (pxel %)
columnas COLS=,,,></FRAMESET>
N2.0 anchura en <FRAMESET (* = tamao
columnas COLS=*></FRAMESET> relativo)
N3.0b anchura del <FRAMESET BORDER=?>
borde
N3.0b borde <FRAMESET
FRAMEBORDER="yes|no">
N3.0b color del borde <FRAMESET
BORDERCOLOR="#$$$$$$">
N2.0 Definicin del <FRAME> (contenido de
marco cada uno de
los recuadros)
N2.0 documento que <FRAME SRC="URL">
se debe mostrar
N2.0 denominazione <FRAME
del frame NAME="***"|_blank|_self|
_parent|_top>
N2.0 anchura de los <FRAME MARGINWIDTH=?> (margen
mrgenes izquierdo y
derecho)
N2.0 altura de los <FRAME MARGINHEIGHT=?> (margen
mrgenes superior e
inferior)
N2.0 barra de <FRAME
desplazamiento SCROLLING="YES|NO|AUTO">
o no
N2.0 no <FRAME NORESIZE>
redimensionable
N3.0b borde <FRAME
FRAMEBORDER="yes|no">
N3.0b color del borde <FRAME
BORDERCOLOR="#$$$$$$">
N2.0 contenido en <NOFRAMES></NOFRAMES> (para
ausencia de navegadores
marco antiguos)
Para crear una pgina dividida en marcos, es necesario crear varios archivos
HTML referidos a un archivo principal, que es el que permite su gestin. As
pues, antes de nada hace falta impostar este archivo "fuente", y,
posteriormente, los dems archivos que componen el marco.

Imaginemos que debemos crear una ventana

dividida en marcos como la de la figura, con un
marco en la parte superior fijo (en el cual cargaremos
el archivo "top.htm", que deberemos crear aparte) y
un marco central (en el cual cargaremos el archivo
"central.htm", que deberemos, asimismo, crear
aparte) que cambiar segn cual sea la pgina que
deba mostrar. Como hemos sealado antes, la
gestin de estos dos marcos correr a cargo de un tercer archivo, el cual
deber invocarlos asignndoles una parte de la pgina. He aqu el cdigo de
esta pgina:
<FRAMESET rows="80,*">
<frame name="alto" src="top.htm">
<frame name="central"
src="central.htm">
< /FRAMESET>
Como podemos ver, el cdigo del marco est encerrado entre las marcas
<FRAMESET></FRAMESET> que se comportan como las marcas usuales
<HTML></HTML>.
El tamao de los marcos, o mejor dicho, el espacio que cada uno de ellos
debe ocupar en la pgina, queda establecido mediante la marca
rows="80,*, que significa que el marco alto (que en este caso es una fila,
"row") debe tener 80 pxel, mientras que "*" significa que todo el resto debe
asignarse al marco central. Asimismo, habramos podido expresar el tamao
de los marcos en tantos por ciento de esta manera:
<FRAMESET rows="20%,*">
Una vez impostados los dos parmetros <FRAMESET></FRAMESET>,

dentro de ellos se definen los nombres y los archivos que debern invocarse
en los dos marcos creados. Es necesario dar un nombre al marco
(name="alto") e indicar el archivo HTML que deber cargarse dentro del
marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos
de nombre "top.htm" y "central.htm".
Fjate bien en lo importante que es la colocacin dentro del cdigo para una
correcta interpretacin por parte del navegador. As, si se invirtiera el orden
de esta manera:
<FRAMESET rows="80,*">
<frame name="central"
src="central.htm">
< /FRAMESET>
el navegador invertira el orden de asignacin y cargara el archivo
"central.htm" en el marco superior, y el archivo "top.htm" en el marco central.
Haz clic aqu para ver el resultado de este marco.

Para crear dos marcos verticales basta sustituir el

trmino "rows" (filas) con el trmino "cols"
(columnas):
<FRAMESET cols="100,*">
<frame name="sx" src="sx.htm">

<frame name="central" src="central.htm">
< /FRAMESET>
Haz clic aqu para ver el resultado de este marco.
Los antiguos navegadores no soportaban los marcos por lo cual, dada la

posibilidad de que se use uno de estos viejos programas para visualizar las
pginas, es til insertar un cdigo que advierta de la presencia de marcos y
de la imposibilidad de que el navegador los muestre. ste es el cdigo que
debes incluir:
<noframe>
< HTML>
< body>
Atencin. Tu navegador no soporta la opcin de los

marcos. Para ver estas pginas es necesario descargar
un navegador que soporte dicha opcin. Te aconsejo
Netscape 3.0 o superior.
< /body>
< /html>
< /noframe>
Es posible adoptar simultneamente una divisin tanto en columnas como

en filas, de manera que se cree una ventana dividida en varios marcos.
Veamos cmo debemos intervenir en el cdigo HTML del documento segn
el nmero y la posicin de los marcos que queremos crear.
< frameset rows="100,*">

<frameset cols="150,*">
<frame name="sx" src="sx.htm.htm">
< /frameset>
< /frameset>
Haz clic aqu para ver el
resultado de este marco.

< frameset cols="120,*">

< /frameset>
< /frameset>

< frameset rows="20%,60%,20%,*">
<frame name="bajo" src="basso.htm">
< /frameset>
Haz clic aqu para ver el < /frameset>

< frameset cols="75%,25%">
< frameset rows="20%,80%*">

< /frameset>
<frame name="dx" src="dx.htm">
< /frameset>

< frameset cols="20%,80%*">
< /frameset>< /frameset>
Haz clic aqu para ver el < /frameset>

< /frameset> < frameset rows="24%,76%">
<frame name="top" src="top2.htm"> <frame
name="dx" src="dx.htm">
Haz clic aqu para ver el < /frameset> < /frameset>

<frameset rows="80%,20%">
< /frameset>
< /frameset>
< frameset rows="20%,60%,20%">

< /frameset>

< frameset cols="20%,60%,20%">

< /frameset>

Para eliminar el borde gris de los marcos, se debe insertar el siguiente

cdigo:
<frameset cols="20%,60%,20%" border=0>
Para impedir que los marcos sean redimensionados por el visitante:

<frame name="alto" src="top.htm" noresize>
Para eliminar siempre las barras de desplazamiento (scrollbars):

<frame name="alto" src="top.htm" scrolling="no">
Para mostrarlas siempre:

<frame name="alto" src="top.htm" scrolling="yes">
Para mostrarlas slo cuando son necesarias:

<frame name="alto" src="top.htm" scrolling="auto">
Para regular la distancia del contenido del marco al margen superior

(marginheight) y a los mrgenes izquierdo y derecho (marginwidth):
<frame name="alto" src="top.htm" marginheight=2 marginwidth=5>

Por lo que se refiere a los enlaces dentro de los marcos (es decir, cmo
cargar una pgina en un marco diverso de aqul en que se encuentra el
enlace) hay que hacer referencia al nombre que hemos asignado a los
diferentes marcos en la fase de realizacin. Este nombre no se refiere al
archivo sino a lo que aparece escrito despus de "name=". Por ejemplo, en
este caso:
el nombre asignado es "alto".
Tomemos la siguiente pgina subdividida en marcos:
< frameset cols="20%,60%,20%">

< /frameset>
Pongamos que de un enlace presente en "SX" tengamos que cargar otra

pgina en el marco "central".
Si el enlace presente en el marco "SX", fuera simplemente:
< A HREF="nuova.htm">Haz clic</A>
la pgina se cargara dentro del mismo marco (es decir, "SX") porque sin
adecuadas marcas especficas el navegador interpreta que debe cargar la
nueva pgina en el mismo marco en que est presente el enlace.
El cdigo exacto sera:
<A HREF="nuova.htm" TARGET="central">Haz clic</A>
Haz clic aqu para probar.
Otro uso fundamental de la marca <TARGET> es el de llamar un enlace a

otra pgina, la cual se visualizar ocupando la pantalla completa y
eliminando todos los marcos preexistentes.
Aqu est el cdigo:
<A HREF="nuova.htm" TARGET="_parent">Haz clic</A>
Haz clic aqu para probar.
Si insertas el cdigo:
<base target="_top">
a la cabeza del documento HTML todos los enlaces presentes en las

pginas eliminarn los marcos existentes, sin necesidad de ir enlace por
enlace.

Es posible tambin que queramos cargar, con un solo clic, dos o ms

marcos (naturalmente, la ventana tiene que estar dividida por lo menos en
tres marcos).
Tomemos una pgina subdividida como en la figura:

<frame name="alto2" src="top.htm">
<frame name="centrale3" src="central.htm">
< /frameset>
< /frameset>
Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue

simultneamente dos pginas diversas en los dos marcos de la derecha:
"alto" y "central". Para ello, es necesario insertar algunas lneas con cdigo
JavaScript. La primera parte del cdigo va insertada entre <HEAD></HEAD>:
< HEAD>
< script language="JavaScript">
< !-- Hiding
function loadtwo(page2, page3) {
parent.alto2.location.href=page2;
parent.centrale3.location.href=page3;
}
// -->
< /script>
< /HEAD>
mientras que la segunda parte deber quedar comprendida entre

<BODY></BODY>, donde se quiere insertar el enlace:
< BODY>
< FORM NAME="buttons">
<INPUT TYPE="button" VALUE="Haz clic"
onClick="loadtwo('nuovo1.htm','nuovo2.htm')">
< /FORM>
< /BODY>
10. 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>
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>
11. 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>:
<input type="hidden" name="codigo" value="100">:
<input type="file" name="foto" >:
* Si se usa el elemento input type=file se debe aadir el atributo enctype="multipart/form-data" a

la etiqueta form, para indicar que el formulario adjunta un archivo.

Ejercicio: Crear un formulario HTML que tenga la siguiente estructura o contenido.

JavaScript
1. El JavaScript nos servir para lo siguiente:
Usos del JavaScript
En formularios
Validacin de campos obligatorios
Validacin de campos slo numricos
Validacin de campos de longitud mnima
Colocar el foco en un campo
Crear botones que direccionen a otras pginas
Seleccione por lo menos un botn de radio
Seleccione por lo menos un checkbox
Cantidad de caracteres en un textarea
Seleccin de fechas
Validacin de campos de correos electrnicos
Generar ventanas de alerta (alert)
Generar ventanas de confirmacin (confirm)
Abrir una ventana flotante (popup)
Generar ventanas de ingreso de datos (prompt)
Redimencionar una imange
Mostrar un reloj
2. Crear una pgina HTML con la siguiente informacin:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ingreso al Sistema</title>
<script>
function validar(){
var x = document.form1.codigo.value;
var y = document.form1.clave.value;
if ( x == ""){
alert("Ingrese su codigo");
document.form1.codigo.focus();
return false;
} else if( y == "") {
alert("Ingrese su clave");
document.form1.clave.focus();
return false;
} else if ( x.length < 6 ) {
alert("El codigo debe tener por lo menos 6 caracteres");
return false;
} else if (isNaN(x)){
// isNaN significa is not a number
alert ("El codigo debe contener numeros");
return false;

return true;
function preguntar(){
var z = confirm("Esta seguro que desea crear nueva cuenta?");
if (z == true) {
document.location='nueva.html';
} else {
return false;
function abrirVentana(){
window.open('contrato.html','Contrato','toolbar=no,location=no,directories=no,
status=yes,menubar=no,scrollbars=no,resizable=no,width=595,height=340');
// 1.= Nombre del archivo
// 2.= Nombre de la ventana
// 3.= Parmetros de configuracin
</script>
</head>
<body onLoad="document.form1.codigo.focus();">

<form onSubmit="return validar();" id="form1" name="form1" method="post"

action="principal.html">
<p> </p>
<div align="center">
<table width="300" border="1" cellspacing="1" cellpadding="3">
<tr>
<td colspan="2"><div align="center"><strong>Ingreso al Sistema</strong></div></td>
</tr>
<tr>
<td width="99">Cdigo:</td>
<td width="160"><label>
<input name="codigo" type="text" id="codigo" maxlength="11" />
</label></td>
</tr>
<tr>
<td>Clave:</td>
<td><label>
<input name="clave" type="password" id="clave" maxlength="16" />
</label></td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="submit" name="button" id="button" value="Ingresar" />

<input type="reset" name="button2" id="button2" value="Limpiar" />

<label>

<input type="button" name="button3" id="button3" value="Olvidé clave"

onClick="document.location='olvide.html'" />
</label>
<label>
<input type="button" name="button4" id="button4" value="Crear nueva cuenta"

onClick="preguntar();"/>
</label>
</div>
</label></td>
</tr>
</table>
</div>
<p align="center"><a href="#" onClick="abrirVentana();">Ver acuerdos del contrato</a></p>
<p> </p>
</form>
</body>
</html>

Validacin de botn de radio y botn de check
<html>
<head>
<title>Ejemplo</title>
<script>
function validar(){
var carrera = document.f1.carrera;
var tipoMfl = document.f1.tipoMfl;
var hayCarrerasSeleccionadas = false;
for(var i=0; i < carrera.length; i++){
if(carrera[i].checked){
hayCarrerasSeleccionadas = true;
break;
var hayModalidadsSeleccionada = false;
for(var i=0; i < tipoMfl.length; i++){
if(tipoMfl[i].checked){

hayModalidadsSeleccionada = true;
break;
if( !hayModalidadsSeleccionada){
alert("Seleccione una Modalidad");
return false;
if(!hayCarrerasSeleccionadas){
alert("Seleccione alguna(s) carrera");
return false;
</script>
</head>
<body>
<form id="form1" name="f1" method="post" action="2.html" onsubmit="return

validar();">
<h3>Formulario</h3>
<table width="325" height="106" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Modalidad:</td>
<td><label>
<input type="radio" name="tipoMfl" value="pas" />
</label>

Pasanta
<label>
<input type="radio" name="tipoMfl" value="pra" />
</label>
Prctica</td>
</tr>
<tr>
<td>Carreras:</td>
<td>
<input type="checkbox" name="carrera" value="1"/>Qumica
<br/>
<input type="checkbox" name="carrera" value="2" />
Redes
<br/>
<input type="checkbox" name="carrera" value="3" />
Electrotecnia </td>
</tr>
<tr>
<td colspan="2"><label>
<input type="submit" name="button" id="button" value="Guardar" />
</label></td>
</tr>
</table>
<p> </p>
<p> </p>
</form>
</body>
</html>

Librera Wforms
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="wforms-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="wforms.js"></script>
<script type="text/javascript" src="wforms-localization-es.js"></script>
</head>
<body>
<fieldset>
<legend>Formulario</legend>
<FORM name="uno" action="#" method="post">
<table cellpadding="5" border="1">
<tr>
<td><label>Nombre:</label> </td>
<td><input type="text" name="nombre" class="required validate-alpha" /></td>
</tr>
<tr>
<td><label>Usuario:</label> </td>
<td><input type="text" name="usuario" class="required validate-alphanum" /></td>
</tr>
<tr>
<td><label>Clave:</label> </td>
<td><input type="password" name="clave" class="required validate-strongpassword"></td>
</tr>
<tr>
<td><label>Email:</label> </td>
<td><input type="text" name="nombre" class="required validate-email " /></td>
</tr>
<tr>
<td><label>Sexo:</label></td>
<td><div class="allrequired">
<input type="radio" name="sexo" value="m"/>
<label>Masculino:</label>
<input type="radio" name="sexo" value="f"/> <label>Femenino:</label>
</div></td>
</tr>
<tr>
<td><label>Prefiero Java:</label>
<input type="checkbox" name="ch1" value="1"/></td>
<td><label>Prefiero PHP:</label>
<input type="checkbox" name="ch2" value="1"/></td>
</tr>
<tr>
<td><input type="Submit" value="Aceptar"></td> <td><input type="Reset" value="Cancelar"></td>
</tr>
</table>
</FORM>
</fieldset>
</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.

ACTIVIDADES:
1. Qu es PHP?. Mencionar si trabaja del lado del cliente o del servidor.

2. Qu es HTML?. Mencionar diez diferencias con el HTML5.
3. Qu es Android? Cul es la forma ms fcil de implementar aplicaciones en
Android?.
4. Cul es la diferencia entre una pgina web y una website?
5. Construir una pgina web e indicar:
-Divisin de la pgina en tres partes horizontales (baner, opciones de men y
parte principal donde se coloque informacin de men), considerando
porcentajes de divisin de pgina 20%,10% y 70%.
Las opciones de men son:
-Datos Personales.
-Estudios Realizados.
-Conferencias.
-Fotos.
-Videos.
-Msica.
Hacer uso de:
-Tipos de letras.
-Frames.
-Fondos de pginas.
-Vnculos.
-Vietas.
-Tablas.
-Videos embebidos.
6. Hacer una aplicacin en HTML5 y mostrar el mapa de ubicacin donde te

encuentras actualmente y mostrar efectos de letras e imgenes.
7. Hacer una pgina web en PHP y mostrar:
-Un formulario.
-Que calcule el cuadrado de un nmero.
-Que calcule si un ao es bisiesto.
FECHA DE PRESENTACIN:
Lo que no se complet en clase enviar al email: dianauns@yahoo.es hasta el

sbado 30-09-17, 12 a.m.

Guía de Laboratorio 1-Gc-26.09.17

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guía de Laboratorio 1-Gc-26.09.17

Uploaded by

Copyright:

Available Formats

Universidad Nacional del Santa Laboratorio1-Aplicaciones Web

Aplicaciones Web HTML y JavaScript

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 1

Reconocer las etiquetas bsicas del lenguaje HTML.

Equipos, Materiales, Programas y Recursos:

Sistema Operativo Windows.

Ubicar maletines y/o mochilas al final del aula de laboratorio.

1. PRIMERA PGINA HTML

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 2

BLOQUES HTML Ingrese el cdigo HTML en esta columna

2. PROPIEDADES BSICAS DE CABECERA

La Cabecera permite definir o configurar diferentes parmetros de una pgina HTML.

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

En la cabecera tambin podemos agregar informacin de la pgina.

<meta name="title" content="EMPRESA DESARROLLO WEB PERU>

3. PROPIEDADES (ATRIBUTOS) DE CUERPO

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 3

La etiqueta ms utilizada en el diseo de pginas Web es <FONT> (que representa las

Existen otras etiquetas que permiten formatear un texto. A continuacin defina la

Ejercicio: Crear una lista de definicin HTML

Ejercicio: Crear una lista ordenada HTML

Ejercicio: Crear una lista desordenada HTML

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 4

Enlace a otra pgina:

<a name=otra href=otrapagina.htmll>Otra Pagina</a>

Enlace en una misma pgina:

<table border="1" cellspacing="0"

<table border="1" cellspacing="0" cellpadding="3" width="700">

La etiqueta <FORM> permite crear un entorno de formularios. Esta etiqueta es la base

Ejercicio: Desarrollar una pgina con un cuerpo de formulario.

Escriba el cdigo de la pgina a continuacin:

<FORM name=uno action=destino1.html method=post>

Defina las propiedades del formulario:

9. GESTIONAR MARCOS (FRAMES)

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 2

Cmo se crean los marcos?

N2.0 Documento <FRAMESET></FRAMESET> (en lugar de

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 3

Imaginemos que debemos crear una ventana

Una vez impostados los dos parmetros <FRAMESET></FRAMESET>,

Haz clic aqu para ver el resultado de este marco.

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 4

Para crear dos marcos verticales basta sustituir el

<frame name="sx" src="sx.htm">

Haz clic aqu para ver el resultado de este marco.

Los antiguos navegadores no soportaban los marcos por lo cual, dada la

Atencin. Tu navegador no soporta la opcin de los

Es posible adoptar simultneamente una divisin tanto en columnas como

< frameset rows="100,*">

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 5

< frameset cols="120,*">

< frameset cols="120,*">

Haz clic aqu para ver el < /frameset>

< frameset cols="75%,25%">

< frameset rows="20%,80%*">

< frameset cols="75%,25%">

< frameset rows="20%,80%*">

< frameset cols="75%,25%">

< frameset rows="20%,80%*">

EPISI Dra. Diana Cecilia Muoz Casanova dianauns@yahoo.es Pg. 6

< frameset cols="25%,75%">

< frameset rows="20%,60%,20%">