Guía HTML Lab 1

Instituto de Educación Superior Tecnológico Público
“Francisco de Paula Gonzales Vigíl” - Tacna
Computación e Informática Unidad Didáctica: Proyectos Web

GUÍA DE LABORATORIO N° 01 - HTML

OBJETIVOS: Conocer el funcionamiento de las aplicaciones en la Web, los diferentes lenguajes para el desarrollo de
Paginas Web, iniciando con HTML en un editor de texto básico (sugerido: Notepad++)

1. Funcionamiento en la WEB
La Web funciona siguiendo el modelo cliente-
servidor. Es decir, existe un servidor, que presta
el servicio y un cliente, que lo recibe.

2. Introducción a HTML
Un documento HTML comienza con la etiqueta
<HTML>, y termina con </HTML>.
Dentro del documento hay dos zonas bien
diferenciadas: el encabezamiento, delimitado por
<HEAD> y</HEAD>, que sirve para definir diversos valores válidos en todo el documento.
Y el cuerpo, delimitado por <BODY> y </BODY>, donde reside la información del documento.
<HTML>
<HEAD>
Encabezado <TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
Cuerpo Texto del documento
</BODY>
</HTML>
A continuación veremos algunos ejemplos, los cuales serán creados en un editor de textos básico, que puede ser
el bloc de Notas, pero se sugiere el NotePad++ que es especial para editar archivos HTML, PHP, etc.

1. Etiquetas básicas: ejercicio1.html 2. Etiquetas básicas: ejercicio2.html
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>COLORES CON <TITLE>DISEÑO DE ASPECTO DE LA WEB </TITLE>
HTML</TITLE></HEAD> </HEAD>
<BODY> <BODY>
<P><FONT FACE= "VERDANA" COLOR= <P> <B>TEXTO EN NEGRITA </B></P>
"BLUE" SIZE=1> TEXTO EN VERDANA <P> <I>TEXTO EN CURSIVA </I></P>
AZUL Y TAMAÑO DE 1 </FONT></P> <P> <U>TEXTO SUBRAYADO </U></P>
<P><FONT FACE= "ARIAL" SIZE=3> <P> <BIG>TEXTO GRANDE </BIG></P>
TEXTO EN ARIAL </FONT></P> <P> <SMALL>TEXTO PEQUEÑO </SMALL></P>
<P><FONT SIZE=+3> TEXTO TRES VECES <P>AQUI UTILIZAMOS SUPER <SUP> INDICE
MÁS GRANDE QUE LA LÍNEA ANTERIOR </SUP></P>
</FONT></P> <P>AQUI UTILIZAMOS SUB <SUB> INDICE </SUB></P>
</BODY> </BODY>
</HTML> </HTML>
3. Tablas: tabla1.html 4. Tablas: tabla2.html
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo 1 - Tablas</TITLE> <TITLE>Ejemplo 2 - Tablas</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1>Tablas básicas</H1> <H1>Tablas avanzadas</H1>
<TABLE BORDER="1"> <TABLE WIDTH="50%" BORDER="1" CELLSPACING="3"
<TR> CELLPADDING="2">
<TH>Cabecera 1</TH> <TR>
<TH>Cabecera 2</TH> <TD COLSPAN="2" ALIGN="right">Dato 1</TD>
<TH>Cabecera 3</TH> <TD>Un texto cualquiera</TD>
</TR> <TD ROWSPAN="2">Dato 3</TD>
<TR> </TR>
<TD>Dato 1</TD> <TR>

Docente: Mgr. David Caipa Mamani Prac01 (1 de 4)

<TD>Dato 2</TD> <TD>Dato 4</TD>
<TD>Dato 3</TD> <TD>Dato 4</TD>
</TR> <TD ALIGN="center">Dato 5
<TR> </TD>
<TD>Dato 4</TD> </TR>
<TD>Dato 5</TD> </TABLE>
<TD>Dato 6</TD> </BODY>
</TR> </HTML>
</TABLE>
</BODY>
</HTML>

5. Listas no numeradas: lista1.html 6. Listas numeradas: lista2.html
<HTML> HTML>
<HEAD> <HEAD>
<TITLE>Listas</TITLE> <TITLE>Listas Numeradas</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H3>Listas</H3> <H3>Listas</H3>
<H1>Listas no clasificadas</H1> <H1>Listas Numeradas</H1>
<HR> <HR>
<H2>Grupos de Plantas</H2> <H2>Grupos de Plantas</H2>
<UL> <OL>
<LI>Árboles</LI> <LI>Árboles</LI>
<UL> <OL>
<LI>Árboles con hoja de aguja</LI> <LI>Árboles con hoja de aguja</LI>
<LI>Árboles caducifolios</LI> <LI>Árboles caducifolios</LI>
<UL> <OL>
<LI>Haya</LI> <LI>Haya</LI>
<LI>Roble</LI> <LI>Roble</LI>
<LI>Abedul</LI> <LI>Abedul</LI>
<LI>Arce</LI> <LI>Arce</LI>
</UL> </OL>
</UL> </OL>
<LI>Arbustos</LI> <LI> Arbustos</LI>
<LI>Matorrales</LI> <LI>Matorrales</LI>
<LI>Flores</LI> <LI>Flores</LI>
</UL> </OL>
</BODY> </BODY>
</HTML> </HTML>
7. Enlaces: enlace1.html
<HTML>
<HEAD> <TITLE> La chistera - Humor y magia </TITLE> </HEAD>
<body> <center> <h1>
<img src="graficos/delincuente-03.gif"> LA CHISTERA - Humor y magia </h1> </center>
<h2> Quienes somos </h2>
<p>La chistera es un grupo de artistas dedicados al mundo de la magia, la comedia y
el espectáculo.
Entre nosotros podrás encontrar humoristas, magos, showmen, etc.</p>
<p>Si usted o su empresa necesita crear un espectáculo y no quiere quedar
decepcionado no dude en escribirnos AHORA MISMO. Nuestra dirección es:</p>
<center> chistera@chistera.es </center>
<h2> Un ejemplo de nuestro repertorio </h2>
<p>Cada día le mostramos ejemplos distintos de nuestro amplísimo y novedoso
repertorio de chistes:
<blockquote> Era un tío tan gafe, tan gafe, que se sentó en un pajar y se
clavó la aguja. </blockquote>
<blockquote> Doctor, Doctor, ¿Cuánto tiempo me queda de vida?
<br> 5... 4... 3... 2... </blockquote> </p>
<h2> Enlaces a páginas relacionadas </h2>
<p> <a href="http://chistes.geomundos.com/">¡A Reírse Toca, ¡Ja, ja, ja!</a>
: Si te aburres, estás deprimido, o simplemente quieres reír, pásate por mi página

y disfrutarás de los más de 110 chistes que tiene. ¡Con posibilidad de enviar tú el
tuyo!
<p> <a href="http://blogs.heraldo.es/tinta/?p=2734">1er Concurso de feos por
Internet</a>
: 1er Concurso de Feos por Internet participa y gana tu premio. </p>
<p> <a href="http://www.geocities.com/Hollywood/8620">Refranes Web</a>
: En esta página encontrarás un listado de dichos populares, y las 50 cosas que se
deberían cambiar para mejorar la vida terrícola de nuestro querido planeta Tierra
</p>
<hr size="5">
<address> Página creada por el equipo de programación Web de LA CHISTERA <br>
Ultima actualización: 31-12-2011 :-) </address>
</BODY>
</HTML>

8. Imágenes: imagenes.html 9. Formularios: formulario1.html
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo 8</TITLE> <TITLE>Ejemplo 9</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
 <FORM ACTION=
<H1>Imágenes</H1> “mailto:dcaipa@hotmail.com”
<IMG SRC="imagenes/wacky.gif" WIDTH=140 METHOD="POST">
HEIGHT=210 BORDER=0 ALT="Una imagen" <INPUT TYPE="text" NAME="nombre">
ALIGN="RIGHT"> <BR>
<IMG SRC="imagenes/bebe.gif" WIDTH=140 <INPUT TYPE="submit"><INPUT
HEIGHT=210 BORDER=3 ALT="Otra imagen;" TYPE="Reset">
ALIGN="LEFT"> </FORM>
Texto correspondiente a las imágenes insertadas </BODY>
en la Web </HTML>
</BODY>
</HTML>

10. Formularios: formulario2.html 11. Campos de Selección: campos.html
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo 10</TITLE> <TITLE>Ejemplo 11</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1>Formularios</H1> <H1>Formularios</H1>
<FORM ACTION="mailto:mailto:dcaipa@hotmail.com" <FORM
METHOD="POST"> ACTION="mailto:dcaipa@hotmail.com"
Texto: <INPUT TYPE="text" METHOD="POST">
NAME="nombre"><BR> <SELECT NAME="Colores" MULTIPLE>
Password: <INPUT TYPE="password" <OPTION VALUE="r">Rojo</OPTION>
NAME="contra"><BR> <OPTION VALUE="g">Verde</OPTION>
Sexo:<INPUT TYPE="radio" <OPTION VALUE="b">Azul</OPTION>
NAME="boton1" VALUE="1"> Hombre </SELECT>
<INPUT TYPE="radio" NAME="boton1" <BR><BR>
VALUE="2">Mujer<BR> <SELECT NAME="Colores" SIZE="1">
Vehiculo:<INPUT TYPE="checkbox" <OPTION VALUE="r">Rojo</OPTION>
NAME="Moto" VALUE="Si">Moto <OPTION VALUE="g">Verde</OPTION>
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" <OPTION VALUE="b">Azul</OPTION>
CHECKED>Coche </SELECT>
<BR><BR> <BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset"> <INPUT TYPE="submit">
</FORM> <INPUT TYPE="Reset">
</BODY> </FORM>
</HTML> </BODY>
</HTML>


12. Formularios: formulario3.html

<FORM>
<P>Nombre completo: <INPUT TYPE="text" NAME="nombre" SIZE="30">
<P>Dirección: <INPUT TYPE="text" NAME="direccion" SIZE="50">
<P>Ciudad: <INPUT TYPE="text" NAME="ciudad" SIZE="20">
Código Postal: <INPUT TYPE="text" NAME="c.p." SIZE="6" MAXLENGTH="5">
<P>Teléfono: <INPUT TYPE="text" NAME="telefono" SIZE="10" MAXLENGTH="9">
<P>Fax: <INPUT TYPE="text" NAME="FAX" SIZE="10" MAXLENGTH="9">
<P>Email: <INPUT TYPE="text" NAME="email" SIZE="30">
<P>Catálogo: <SELECT> <OPTION VALUE="nacional"> Nacional
<OPTION VALUE="internacional" SELECTED> Internacional
<OPTION VALUE="completo"> Completo </SELECT>
<P>
<INPUT TYPE="image" BORDER="0" SRC="imagenes/est3.jpg" VALUE="Enviar" WIDTH=180
HEIGHT=50>
</FORM>

TAREAS:
1. Analizar cada una de las etiquetas HTML usadas en los ejemplos, interpretando su utilidad en el programa y su
factibilidad de aplicación en otros casos.
2. Descargar 05 Applest de Java e insertarlos en los ejemplos realizados
3. Dar formatos de color al fondo y texto a todos los ejemplos


Guía HTML Lab 1

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Guía HTML Lab 1

Similar a Guía HTML Lab 1 (20)

Último

Último (20)

Guía HTML Lab 1