guia n1 proyectos web html
DESCRIPTION
Curso de Proyectos Web por José Luis Ponce SeguraTRANSCRIPT
I.S.T. “F.P.G.V.” Computación e Informática Curso: Proyectos Web
Desarrollado por: José L. Ponce Segura www.redtacna.net Prac01 (1 de 2)
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> <HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <BODY> <H1>Tablas básicas</H1> <TABLE BORDER="1"> <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> <TH>Cabecera 3</TH> </TR> <TR> <TD>Dato 1</TD> <TD>Dato 2</TD> <TD>Dato 3</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 5</TD> <TD>Dato 6</TD> </TR> </TABLE> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <H1>Tablas avanzadas</H1> <TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2"> <TR> <TD COLSPAN="2" ALIGN="right">Dato 1</TD> <TD>Un texto cualquiera</TD> <TD ROWSPAN="2">Dato 3</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 4</TD> <TD ALIGN="center">Dato 5 </TD> </TR> </TABLE> </BODY> </HTML>
3. Inclusión de Imágenes: imagenes.html <HTML> <HEAD> <TITLE>Ejemplo 4</TITLE> </HEAD> <BODY>
I.S.T. “F.P.G.V.” Computación e Informática Curso: Proyectos Web
Desarrollado por: José L. Ponce Segura www.redtacna.net Prac01 (2 de 2)
<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> <HEAD> <TITLE>Ejemplo 6</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> Texto: <INPUT TYPE="text" NAME="nombre"><BR> Password: <INPUT TYPE="password" NAME="contra"><BR> Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre <INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR> Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto <INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Ejemplo 7</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <SELECT NAME="Colores" MULTIPLE> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> <BR><BR> <SELECT NAME="Colores" SIZE="1"> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>