Guian1 HTML 2011 111007102644 Phpapp02

Instituto de Educacin Superior Tecnolgico Pblico
Francisco de Paula Gonzales Vigl - Tacna

Computacin e Informtica Unidad Didctica: Proyectos Web
GUA 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 bsico (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. Introduccin 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 vlidos en todo el documento.
Y el cuerpo, delimitado por <BODY> y </BODY>, donde reside la informacin del documento.
<HTML>
<HEAD>
Encabezado <TITLE>Ttulo del documento</TITLE>
</HEAD>
<BODY>
Cuerpo Texto del documento
</BODY>
</HTML>
A continuacin veremos algunos ejemplos, los cuales sern creados en un editor de textos bsico, que puede ser
el bloc de Notas, pero se sugiere el NotePad++ que es especial para editar archivos HTML, PHP, etc.
1. Etiquetas bsicas: ejercicio1.html 2. Etiquetas bsicas: ejercicio2.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>COLORES CON <TITLE>DISEO 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 TAMAO 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 PEQUEO </SMALL></P>
<P><FONT SIZE=+3> TEXTO TRES VECES <P>AQUI UTILIZAMOS SUPER <SUP> INDICE
MS GRANDE QUE LA LNEA 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 bsicas</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 espectculo.
Entre nosotros podrs encontrar humoristas, magos, showmen, etc.</p>
<p>Si usted o su empresa necesita crear un espectculo y no quiere quedar
decepcionado no dude en escribirnos AHORA MISMO. Nuestra direccin es:</p>
<center> chistera@chistera.es </center>
<h2> Un ejemplo de nuestro repertorio </h2>
<p>Cada da le mostramos ejemplos distintos de nuestro amplsimo y novedoso
repertorio de chistes:
<blockquote> Era un to tan gafe, tan gafe, que se sent en un pajar y se
clav la aguja. </blockquote>
<blockquote> Doctor, Doctor, Cunto tiempo me queda de vida?
<br> 5... 4... 3... 2... </blockquote> </p>
<h2> Enlaces a pginas relacionadas </h2>
<p> <a href="http://chistes.geomundos.com/">A Rerse Toca, Ja, ja, ja!</a>
: Si te aburres, ests deprimido, o simplemente quieres rer, psate por mi pgina
y disfrutars de los ms 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 pgina encontrars un listado de dichos populares, y las 50 cosas que se
deberan cambiar para mejorar la vida terrcola de nuestro querido planeta Tierra
</p>
<hr size="5">
<address> Pgina creada por el equipo de programacin Web de LA CHISTERA <br>
Ultima actualizacin: 31-12-2011 :-) </address>
</BODY>
</HTML>
8. Imgenes: 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>Imgenes</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 imgenes insertadas </BODY>
en la Web </HTML>
</BODY>
</HTML>
10. Formularios: formulario2.html 11. Campos de Seleccin: 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>Direccin: <INPUT TYPE="text" NAME="direccion" SIZE="50">
<P>Ciudad: <INPUT TYPE="text" NAME="ciudad" SIZE="20">
Cdigo Postal: <INPUT TYPE="text" NAME="c.p." SIZE="6" MAXLENGTH="5">
<P>Telfono: <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>Catlogo: <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 aplicacin 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

Guian1 HTML 2011 111007102644 Phpapp02

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guian1 HTML 2011 111007102644 Phpapp02

Загружено:

Авторское право:

Доступные форматы

Instituto de Educacin Superior Tecnolgico Pblico

Francisco de Paula Gonzales Vigl - Tacna

GUA DE LABORATORIO N 01 - HTML

1. Etiquetas bsicas: ejercicio1.html 2. Etiquetas bsicas: ejercicio2.html

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

5. Listas no numeradas: lista1.html 6. Listas numeradas: lista2.html

8. Imgenes: imagenes.html 9. Formularios: formulario1.html

10. Formularios: formulario2.html 11. Campos de Seleccin: campos.html

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

12. Formularios: formulario3.html

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

Вам также может понравиться