Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Guia N1 - Proyectos Web - HTML

    Загружено:

    joselo27
    302 просмотров2 страницы
    Curso de Proyectos Web por José Luis Ponce Segura

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

    © Attribution Non-Commercial (BY-NC)

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

    PDF, TXT или читайте онлайн в Scribd

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

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

    Пожаловаться на этот документ
    Curso de Proyectos Web por José Luis Ponce Segura

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

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    302 просмотров2 страницы

    Guia N1 - Proyectos Web - HTML

    Загружено:

    joselo27
    Curso de Proyectos Web por José Luis Ponce Segura

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

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 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)

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