ESCU ELA ACADEMI CO PR OF ESI ONAL DE I NGENI ER I A DE SI STEMAS

LABORATORIO N° 02
Escuela Profesional: Ingeniería de Sistemas. Asignatura: Ingeniería Web.
Ciclo: Octavo Semestre Académico: 2013 - I
Docente: Ing. Orleans Moisés Gálvez Tapia

Sesión 02: Formularios e IFrames

INTRODUCCION

Un sitio Web es un conjunto de documentos vinculados con atributos compartidos, tales

como temas relacionados, un diseño similar o un objetivo común.

Para facilitar la escritura de documentos HTML se utilizan programas específicos. Los más
utilizados permiten complejos diseños y evitan trabajar directamente con el código HTML.
Se llaman editores visuales porque proporcionan un entorno WYSIWYG (What You See Is
What You Get) donde se trabaja viendo el documento y sus objetos tal y como se
mostrarían en el navegador manteniéndose oculto el código HTML.

Pero la intención de esta clase es aprender la estructura de un sitio web sencillo y las
principales etiquetas de HTML por lo tanto se va a utilizar cualquiera de los siguientes
editores: Bloc de Notas, NotePad++.

I. OBJETIVOS

Codificar y ejecutar los ejercicios de aplicación con Listas, Tablas, Enlaces, Hiperenlaces
usando HTML y un editor HTML.

II. EQUIPOS Y MATERIALES

 Computadora personal.

 Editor HTML: Bloc de Notas, NotePad++

 Separata del Curso (colgada en el Campus), donde está la teoría y ejemplos

resueltos.

III. METODOLOGIA Y ACTIVIDADES

a) Codificar los ejercicios desarrollados en el aula.

b) Presentar avances y ejecución de cada uno de los ejercicios al docente o jefe de

práctica encargado para la calificación correspondiente.

c) Guardar la carpeta de sus archivos y al final enviarlo a un directorio compartido en

la PC del profesor.

d) Apagar el computador y dejarla en buen estado al retirarse del laboratorio dejar

todo en orden.
 ESCU ELA ACADEMI CO PR OF ESI ONAL DE I NGENI ER I A DE SI STEMAS

IV. IMPORTANTE

 Antes de comenzar a manipular el NotePad++ crear siempre, una carpeta, donde se

guardarán todas las aplicaciones realizadas en el presente laboratorio con el
nombre LABORAT-01.

V. EJERCICIOS

1. Crear una página HTML que muestre una lista ordenada de términos como la
siguiente:

2. Crear una página HTML que muestre una lista desordenada de términos como la
siguiente:
 ESCU ELA ACADEMI CO PR OF ESI ONAL DE I NGENI ER I A DE SI STEMAS

3. Crear una Crear una página HTML que muestre una lista de definiciones como
la siguiente:

4. Crear una página HTML que muestre una tabla como la siguiente

METODOLOGÍAS LENGUAJES DE PROGRAMACIÓN

RUP JAVA
ICONIX PHP
XP ASP
SCRUM PERL
EUP C++
CDM PHYTON
AUP RUBY

5. Crear la siguiente estructura de directorios, páginas html e imágenes. Se pide

implementar el código html de la página1.html añadiendo referencias
(HIPERVÍNCULOS) a las imágenes y páginas de tal manera que se observe en
el navegador web un listado de todas las imágenes:

Imagen01.jpg
Imagen02.jpg
Imagen03.jpg
Imagen04.jpg
Imagen05.jpg
Imagen06.jpg;

Y debajo un enlace a cada una de las páginas html teniendo en cuenta la

ubicación de los documentos en el sitio web (los directorios padre y
subdirectorios):
 ESCU ELA ACADEMI CO PR OF ESI ONAL DE I NGENI ER I A DE SI STEMAS

WWW

A Pagina01.html

Imagen01.jpg
Imagen02.jpg

B Imagen03.jpg

B1 Pagina02.html

Pagina03.html
C
Imagen04.jpg

C1 Imagen05.jpg

D Pagina04.html

D1 Imagen06.jpg