Scribd Logo
Upload

Welcome to Scribd!

  • Guia n1 - 2012 - HTML

    Uploaded by

    Jose Canahuiri Mamani
    15 views2 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views2 pages

    Guia n1 - 2012 - HTML

    Uploaded by

    Jose Canahuiri Mamani

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Universidad Nacional Jorge Basadre Grohmann Instituto de Informtica y Telecomunicaciones

    Curso: Desarrollo Aplicaciones Web I

    GUA DE LABORATORIO N 01 OBJETIVOS: Conocer el funcionamiento de la Web, los diferentes lenguajes para el desarrollo de Pginas Web, iniciando con HTML en un editor de texto bsico (sugerido: Notepad++) 1. Funcionamiento de la WEB La Web funciona siguiendo el modelo clienteservidor. Existe un servidor, que es quien presta el servicio, y un cliente, que es quien 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> Encabezado <HEAD> <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 como el bloc de Notas, se sugiere el NotePad++ que es especial para editar archivos HTML, PHP, etc.

    1. Tablas bsicas: tabla.html


    <HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <BODY> <H1>Tablas bsicas</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>

    2. Tablas extendidas: tablaavanzada.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>

    Docente: Jos Luis Ponce Segura Material desarrollado por Jos Luis Ponce Segura

    Prac01 (1 de 2)

    e-mail: jose.ponce@sitelsur.com www.sitelsur.com

    Universidad Nacional Jorge Basadre Grohmann Instituto de Informtica y Telecomunicaciones

    Curso: Desarrollo Aplicaciones Web I

    3. Inclusin de Imgenes: imagenes.html


    <HTML> <HEAD> <TITLE>Ejemplo 4</TITLE> </HEAD> <BODY> <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 Bsicos: 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 Bsicos: extensin.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>

    6. Campos de Seleccin: campos.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>

    Docente: Jos Luis Ponce Segura Material desarrollado por Jos Luis Ponce Segura

    Prac01 (2 de 2)

    e-mail: jose.ponce@sitelsur.com www.sitelsur.com

    You might also like