Guia N1 Proyectos Web Html
0 recomendaciones2,683 vistas
Este documento presenta una guía de laboratorio sobre el desarrollo de páginas web. Explica el funcionamiento básico de la web usando el modelo cliente-servidor y proporciona una introducción a HTML, incluyendo etiquetas comunes como <html>, <head>, <body>, y ejemplos de tablas, imágenes y formularios simples creados con HTML.
Guia N1 Proyectos Web Html
- 1. 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)
- 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)