Beruflich Dokumente
Kultur Dokumente
GUA DE LABORATORIO 1
LABORATORIO 1
Objetivos:
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:
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:
Desarrollar la primera pgina HTML llamada primera.html, que tenga como contenido
el texto Primera Pgina HTML.
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
<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.
<DL>
<LH>Cabecera de Lista</LH>
<DT>Elemento 1
<DD>Descripcin de Elemento 1.
<DT> Elemento 2
<DD> Descripcin de Elemento 2.
</DL>
<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>
<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:
<a name=ancla>
<a name=misma href=#ancla>Misma Pagina</a>
7. TABLAS HTML
<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
<HTML><BODY>
</FORM>
</BODY></HTML>
name:
action:
method:
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.
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.
<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%,*">
<FRAMESET rows="80,*">
<frame name="central"
src="central.htm">
<frame name="alto" src="top.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.
<FRAMESET cols="100,*">
< /FRAMESET>
<noframe>
< HTML>
< body>
< /body>
< /html>
< /noframe>
< /frameset>
Haz clic aqu para ver el
resultado de este marco.
< /frameset>
Haz clic aqu para ver el
resultado de este marco.
<frameset rows="80%,20%">
<frame name="alto" src="top.htm">
<frame name="bajo" src="basso.htm">
< /frameset>
<frame name="central" src="central.htm">
< /frameset>
Haz clic aqu para ver el
resultado de este marco.
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:
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.
Si insertas el cdigo:
<base target="_top">
< /frameset>
< HEAD>
< script language="JavaScript">
< !-- Hiding
function loadtwo(page2, page3) {
parent.alto2.location.href=page2;
parent.centrale3.location.href=page3;
}
// -->
< /script>
< /HEAD>
< BODY>
< FORM NAME="buttons">
<INPUT TYPE="button" VALUE="Haz clic"
onClick="loadtwo('nuovo1.htm','nuovo2.htm')">
< /FORM>
< /BODY>
Existen dos objetos que permiten controlar un formulario. Estos objetos representan los
siguientes eventos:
RESET :
SUBMIT :
<HTML><BODY>
</FORM>
</BODY></HTML>
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.
<select name=tipo>
<option value=E>Estudiante
<option value=P>Profesor
</select>:
JavaScript
En formularios
Seleccin de fechas
Mostrar un reloj
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
alert("Ingrese su clave");
document.form1.clave.focus();
return false;
return false;
} else if (isNaN(x)){
return false;
return true;
function preguntar(){
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');
</script>
</head>
<body onLoad="document.form1.codigo.focus();">
<p> </p>
<div align="center">
<tr>
</tr>
<tr>
<td width="99">Cdigo:</td>
<td width="160"><label>
</label></td>
</tr>
<tr>
<td>Clave:</td>
<td><label>
</label></td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<label>
</label>
<label>
</label>
</div>
</label></td>
</tr>
</table>
</div>
<p> </p>
</form>
</body>
</html>
<html>
<head>
<title>Ejemplo</title>
<script>
function validar(){
if(carrera[i].checked){
hayCarrerasSeleccionadas = true;
break;
if(tipoMfl[i].checked){
hayModalidadsSeleccionada = true;
break;
if( !hayModalidadsSeleccionada){
return false;
if(!hayCarrerasSeleccionadas){
return false;
</script>
</head>
<body>
<h3>Formulario</h3>
<tr>
<td>Modalidad:</td>
<td><label>
</label>
Pasanta
<label>
</label>
Prctica</td>
</tr>
<tr>
<td>Carreras:</td>
<td>
<br/>
Redes
<br/>
Electrotecnia </td>
</tr>
<tr>
<td colspan="2"><label>
</label></td>
</tr>
</table>
<p> </p>
<p> </p>
</form>
</body>
</html>
Librera Wforms
<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:
ACTIVIDADES:
FECHA DE PRESENTACIN: