Anda di halaman 1dari 2

I.S.T. “F.P.G.V.


Computación e Informática Curso: Proyectos Web

GUÍA DE LABORATORIO N° 01

OBJETIVOS: Conocer el funcionamiento de 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 de la WEB
La Web funciona siguiendo el modelo cliente-
servidor. Existe un servidor, que es quien presta el
servicio, y un cliente, que es quien 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>
Encabezado <HEAD>
<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 como el bloc de
Notas, se sugiere el NotePad++ que es especial para editar archivos HTML, PHP, etc.

1. Tablas básicas: tabla.html 2. Tablas extendidas: tablaavanzada.html


<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo 2</TITLE> <TITLE>Ejemplo 3</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"
<TH>Cabecera 3</TH> ALIGN="right">Dato 1</TD>
</TR> <TD>Un texto cualquiera</TD>
<TR> <TD ROWSPAN="2">Dato 3</TD>
<TD>Dato 1</TD> </TR>
<TD>Dato 2</TD> <TR>
<TD>Dato 3</TD> <TD>Dato 4</TD>
</TR> <TD>Dato 4</TD>
<TR> <TD ALIGN="center">Dato 5
<TD>Dato 4</TD> </TD>
<TD>Dato 5</TD> </TR>
<TD>Dato 6</TD> </TABLE>
</TR> </BODY>
</TABLE> </HTML>
</BODY>
</HTML>

3. Inclusión de Imágenes: imagenes.html


<HTML>
<HEAD>
<TITLE>Ejemplo 4</TITLE>
</HEAD>
<BODY>
Desarrollado por: José L. Ponce Segura www.redtacna.net Prac01 (1 de 2)
I.S.T. “F.P.G.V.”
Computación e Informática Curso: Proyectos Web

<H1>Imagenes</H1>
<IMG SRC="/graficos/imagen.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Una imagen"
ALIGN="RIGHT">
<IMG SRC="/graficos/imagen.gif" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Otro imagen;"
ALIGN="LEFT">
Un texto cualquiera.
</BODY>
</HTML>
4. Formularios Básicos: formulario.html
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION=mailto:unaprueba METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>
5. Formularios Básicos: extensión.html 6. Campos de Selección: campos.html
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo 6</TITLE> <TITLE>Ejemplo 7</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1>Formularios</H1> <H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" <FORM ACTION="mailto:unaprueba"
METHOD="POST"> METHOD="POST">
Texto: <INPUT TYPE="text" <SELECT NAME="Colores" MULTIPLE>
NAME="nombre"><BR> <OPTION
Password: <INPUT TYPE="password" VALUE="r">Rojo</OPTION>
NAME="contra"><BR> <OPTION
Sexo:<INPUT TYPE="radio" VALUE="g">Verde</OPTION>
NAME="boton1" VALUE="1"> Hombre <OPTION
<INPUT TYPE="radio" VALUE="b">Azul</OPTION>
NAME="boton1" </SELECT>
VALUE="2">Mujer<BR> <BR><BR>
Vehiculo:<INPUT TYPE="checkbox" <SELECT NAME="Colores" SIZE="1">
NAME="Moto" VALUE="Si">Moto <OPTION
<INPUT TYPE="checkbox" VALUE="r">Rojo</OPTION>
NAME="Coche" VALUE="" <OPTION
CHECKED>Coche VALUE="g">Verde</OPTION>
<BR><BR> <OPTION
<INPUT TYPE="submit"><INPUT VALUE="b">Azul</OPTION>
TYPE="Reset"> </SELECT>
</FORM> <BR><BR>
</BODY> <INPUT TYPE="submit"><INPUT
</HTML> TYPE="Reset">
</FORM>
</BODY>
</HTML>

Desarrollado por: José L. Ponce Segura www.redtacna.net Prac01 (2 de 2)