Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Lab Oratorio 2

    Enviado por

    Dante Mejia
    10 visualizações11 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    DOCX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    10 visualizações11 páginas

    Lab Oratorio 2

    Enviado por

    Dante Mejia

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 11

    Fundamentos de Desarrollo Web Laboratorio N 2

    LABORATORIO N 2
    Al finalizar el laboratorio el participante estar en capacidad de: Manejar las etiquetas para disear Tablas bsicas Manejar etiquetas para disear Tablas avanzadas Crear Formularios bsicos y avanzados

    ENUNCIADO 1 : Manejo de tablas


    La Escuela de Turismo Alpamayo Tours nos ha encargado crear un sitio web donde se promocione las 7 Maravillas del Per. Para ello nos proporcionan las imgenes y el contenido para el diseo. Vamos a elaborarla en base a nuestros conocimientos bsicos.
    MODELO DE LA CREACION DE LA PAGINA 7 MARAVILLAS DEL PER

    Pag. 1

    Fundamentos de Desarrollo Web Laboratorio N 2

    Paso 1:
    Crear una carpeta con el nombre 7maravillas, y del Cibercampus descargar la carpeta de imgenes adjunta al laboratorio, copiar dentro de la carpeta 7maravillas. Puedes hacer uso del programa CoffeeCup Html Editor o Dreamweaver, al crear un nuevo documento aparece la ventana Quick Start, definir color azul para el color de fondo (Page Background). Observa que este cdigo va aparecer dentro de las etiquetas head.
    Selecciona este Color para el fondo

    Observaras el siguiente cdigo creado en el documento. Se trabajara el documento en modo Code Editor:

    Pag. 2

    Fundamentos de Desarrollo Web Laboratorio N 2

    Paso 2:
    Para crear la pgina principal como se visualiza en la muestra utilizaremos tablas, para elaborar el diseo. Activar el men Insert/Quick Table y definir una tabla de 6 filas y 3 columnas. EL cdigo deber estar dentro de las etiqueta body .

    CODIGO COMPLETADO:
    <body> <table width="750" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#FFFFFF"> <table width="710" border="0" align="center" cellpadding="8" cellspacing="8"> <tr> <td colspan="3" align="center" style="font-weight: bold; font-size: 24px;"> <p>BIENVENIDOS A LA WEB SITE</p> <p>PERU Y SUS 7 MARAVILLAS</p> </td> </tr> <tr> <td colspan="3">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td align="center" <td align="center" <td align="center" </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td align="center" <td align="center" <td align="center" </tr> </table> </td> </tr> </table> </body>

    bgcolor="#CCCCCC">Baos del Inca</td> bgcolor="#CCCCCC">Bosque de Piedras</td> bgcolor="#CCCCCC">Gran Pajaten</td>

    bgcolor="#CCCCCC">Kuelap</td> bgcolor="#CCCCCC">Los Frailones </td> bgcolor="#CCCCCC">Valle de Alto Mayo</td>

    La tabla se visualizara de la siguiente forma:

    Pag. 3

    Fundamentos de Desarrollo Web Laboratorio N 2

    Aadir la etiqueta <Font size=6> a los dos prrafos de titulo de la tabla para establecer un mayor tamao de fuente:

    <td colspan="3" align="center" style="font-weight: bold; font-size: 24px;"> <p><font size="6">BIENVENIDOS A LA WEB SITE</font></p> <p><font size="6">PERU Y SUS 7 MARAVILLAS</font></p> </td>

    Paso 3:
    En la 2da fila se va a crear un men simple: Quienes Somos | Portafolio | Contctenos | Mapa del Sitio con sus respectivos hipervnculos: Quienes Somosquienes.html Portafolio portafolio.html Contctenos. contactenos.html Mapa del Sitio mapa.html

    Pag. 4

    Fundamentos de Desarrollo Web Laboratorio N 2

    Paso 4:
    Ahora procederemos a crear los hipervnculos del men: Para crear hipervnculos:

    CODIGO FINAL DESPUES DE APLICAR HIPERVINCULO:

    Pag. 5

    Fundamentos de Desarrollo Web Laboratorio N 2

    Realizar el mismo procedimiento para crear hipervnculos al resto de men. Finalmente el cdigo quedara de la siguiente manera: CDIGO PARA EL MENU:

    Paso 5
    Ahora procederemos a insertar las imgenes:

    Cdigo generado despus de insertar la imagen:

    Pag. 6

    Fundamentos de Desarrollo Web Laboratorio N 2

    Hacer este mismo proceso para insertar las otras imgenes. El cdigo final ser el siguiente:

    ENUNCIADO 2 : Diseo de formularios


    Para la Web 7 Maravillas del Per se est preparando un formulario de contactos de usuario, crear un nuevo archivo HTML y guardarlo con el nombre: contactenos.html

    Pag. 7

    Fundamentos de Desarrollo Web Laboratorio N 2

    Paso 1
    Ubicar el puntero del mouse dentro de la etiqueta body e insertar un formulario mediante el men Insert/Form Items/Insert Form:

    Aparecer la siguiente ventana en la cual indicaremos la direccin de correo electrnico donde sern enviados los datos ingresados al formulario y el mtodo de envi:

    Este ser el cdigo que aparecer:

    Pag. 8

    Fundamentos de Desarrollo Web Laboratorio N 2

    Paso 2
    Ubicar el puntero del mouse dentro de la etiqueta Form e insertar una tabla de 2 filas por 11 columnas: mediante el men Insert/Quick Table:

    Cdigo generado despus de insertar la tabla:

    Pag. 9

    Fundamentos de Desarrollo Web Laboratorio N 2

    Paso 3
    Modificar el cdigo XHTML para disear el formulario solicitado:

    Pag. 10

    Fundamentos de Desarrollo Web Laboratorio N 2

    EJERCICIO PROPUESTO 1

    El restaurante Sabor Peruano nos a encargado el diseo de la pgina web de recetas. El Webmaster sali de vacaciones y nosotros tenemos que hacernos cargo de este problema. Utilizando tablas crearemos la siguiente pgina web. PAGINA recetas.html

    EJERCICIO PROPUESTO 2

    ISIL desea saber los datos generales de los usuarios que ingresan a su pgina Web, para en el futuro crear una base de datos y enviarles informacin sobre los diferentes programas de estudios que puede ofrecer. Nos solicitan disear el formulario como se muestra en la imagen.

    Pag. 11

    Você também pode gostar