ESCUELA ACADEMICO

PROFESIONAL DE INGENIERIA DE

Sesión 01: CreaciónLABORATORIO

de Sitios Web yN° 01
paginas Web con HTML
Escuela Profesional: Ingeniería de Sistemas. Asignatura: Ingeniería Web.
Ciclo y Turno: Sexto - Noche Semestre Académico: 2021 - 0
Docente: Mgtr..Ivan Martín Pérez Farfán Fecha: 18 de Enero del 2021
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. Macromedia Dreamweaver es una herramienta de
creación y administración de sitios, por lo que puede utilizarla para crear sitios Web completos, además de
documentos individuales. Para obtener resultados óptimos, diseñe y planifique el sitio Web antes de crear
las páginas que va a contener el sitio.
HTML, acrónimo inglés de HyperText Markup Language (lenguaje de marcación de hipertexto), es un
lenguaje de marcas diseñado para estructurar textos y presentarlos en forma de hipertexto, formato
estándar de las páginas Web.

I. OBJETIVOS
Codificar y ejecutar los ejercicios de aplicación con Listas, Tablas, Enlaces, Hiperenlaces usando HTML y
Macromedia Dreamweaver cs5.

II. EQUIPOS Y MATERIALES

 Computadora personal.
 Programa Macromedia Dreamweaver correctamente instalado
 Cuaderno de clases, donde están los ejercicios resueltos en código.

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 a sus memorias.
d) Apagar el computador y dejarla en buen estado al retirarse del laboratorio dejar todo en orden.

IV. IMPORTANTE

 Antes de comenzar a manipular el Macromedia Dreamweaver crear siempre, una carpeta, donde se
guardarán todas las aplicaciones realizadas en el presente laboratorio con el nombre LABORAT-01
dentro de esta carpeta crear las carpetas sonidos, videos y imagenes.

V. MANEJO DEL SOFTWARE

MACROMEDIA DREAMWEAVER MX
Macromedia Dreamweaver es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones
Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual,
Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web. Las funciones de edición
visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. Puede ver todos los
elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el
flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks o en otra aplicación de
gráficos y su posterior importación directa a Dreamweaver, o bien añadir objetos Macromedia Flash.

Diseño del espacio de trabajo

En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las
ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño. La pantalla principal es la siguiente:

Página 1 de 9
La página de inicio permite abrir un documento reciente o crear un documento nuevo.
La barra Insertar contiene botones para la inserción de diversos tipos de “objetos”, como imágenes, tablas y capas, en un
documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por
ejemplo, puede insertar una tabla haciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos
utilizando el menú Insertar en lugar de la barra Insertar.
La barra de herramientas de documento contiene botones que proporcionan opciones para diferentes vistas de la ventana
de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes
como la obtención de una vista previa en un navegador.
La barra de herramientas Estándar (que no aparece en el diseño de espacio de trabajo predeterminado) contiene botones
para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar,
Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas >
Estándar.
Barra de herramientas Documento
La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento
rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño.
La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su
transferencia entre los sitios local y remoto.

En la barra de herramientas Documento, aparecen las siguientes opciones:

Mostrar vista de código sólo muestra la vista Código en la ventana de documento.
Mostrar vistas de código y diseño muestra la vista Código en una parte de la ventana de documento y la vista Diseño en la
otra parte. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver.
Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.
Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de documento.
Depuración del servidor muestra un informe que le ayudará a depurar la página de ColdFusion actual. El informe contiene
los errores de la página, si los hay.
Título permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya
tiene título, éste aparecerá en dicho campo. No hay errores de comprobación de navegador permite comprobar la
compatibilidad con distintos navegadores.
Administración de archivos muestra el menú emergente Administración de archivos.
Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un
navegador en el menú emergente.

Página 2 de 9
Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la
vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como
guardar el archivo o hacer clic en este botón.

Crear un Sitio Web:

1. Ejecutar el Programa Inicio/Programas/macromedia/Macromedia Dreamweaver CS5.
2. Escogemos del menú principal la opción sitio/nuevo sitio y aparecerá la siguiente pantalla:

En esta pantalla escribimos en ¿Qué nombre desea asignar la sitio? LABORAT-01 y presionamos el botón
guardar.
3. De la Pantalla Principal escogemos crear nuevo HTML y aparecerá la siguiente pantalla:

4. En la Pantalla de código desarrollemos el siguiente programa dentro de la estructura Body

<body bgcolor="#FFCC00">
<MARQUEE align=middle direction=right><B><FONT size=+3 color="#FF0000" FACE="Courier
New"><CENTER><H1>UNIVERSIDAD CESAR VALLEJO"</H1></B></FONT></CENTER></MARQUEE>

<HR size=10 width=100%>

Página 3 de 9
 <P><B><I>Mi primera Pagina</B></I></P><BR>Mi Nombre es: Ivan Perez</BR>
<BR>
<BR>
<HR>
<P><FONT size=+1 color="#FF0000" face="Times New Roman">Gracias por su Visita</FONT>
<P><B>Nos Vemos</B>
</body>

Grabar el archivo con Nombre Primer.html

5. Crear un Nuevo Programa para ello seleccionamos Archivo/nuevo del Menú Principal y escogemos de la
pantalla archivo HTML.

Estando en la pantalla de trabajo digitamos el siguiente código en las directivas body

<body bgcolor="#FF0000" text="#FFFFFF">

<font size=+2 color="#0000FF" face="currier new"><marquee bgcolor="#FFFFFF" width=50%
scrolldelay=0>LISTAS ORDENADAS</marquee></font>

<p>Ordenamos por numeros</p>

<ol type="1">
<li> Lima
<li> Ica
<li> Arequipa
</ol>

<p>Ordenamos por letras</p>

<ol type="a">
<li> Chincha
<li> Pisco
<li> Nazca
</ol>

<p>Ordenamos por números romanos empezando por el 10</p>

<ol type="i" start="10">

<li> Arequipa
<li> Cañete
<li> Los Pinos
</ol>
<p>Ciudades del mundo</p>
<ul>
<li>Argentina
<ol>
<li>Buenos Aires
<li>Bariloche
</ol>
<li>Uruguay
<ol>
<li>Montevideo
<li>Punta del Este
</ol>
</ul>

Página 4 de 9
<p>lista de Definiciones</p>

<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
 
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
 
</dl>
</body>

Grabar archivo con nombre Segunda.HTML

6. Crear un Nuevo Programa para ello seleccionamos Archivo/nuevo del Menú Principal y escogemos de la
pantalla archivo HTML.

<BODY>
<TABLE border = 3 cellspacing = 2 cellpadding = 2 width =60%>
<TH align = center>Personajes
<TH align = center>Personales Peruanos
<TH align = center>Personajes Internacionales
<TR>
<TD align = LEFT>Bush
<TD align = LEFT>Regan
<TD align = LEFT>Paz Zamora
<TR>
<TD align = LEFT>Toledo
<TD align = LEFT>Alan
<TD align = LEFT>Lurdes
<TR>
<TD align = LEFT>Fidel
<TD align = LEFT>Zapatero
<TD align = LEFT>Blair
</TABLE>
</BODY>
Grabamos el archivo con nombre listas1.html y al ejecutar aparecera

7. Crear un Nuevo Programa para ello seleccionamos Archivo/nuevo del Menú Principal y escogemos de la
pantalla archivo HTML.
<BODY>
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>Microsoft
<TD align = LEFT>IBM
<TR>
<TD align = LEFT>Infoseek
<TD align = LEFT>Apple
<TD align = LEFT>Digital
</TABLE>

Página 5 de 9
<table border="1" cellpadding="5" cellspacing="10">
<caption>Ventas Mensuales</caption>
<thead>
<tr>
<th>Productos</th>
<th>Tipo</th>
<th>CantidadTipo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mesa</td>
<td>Mueble</td>
<td>20</td>
</tr>
<tr>
<td>Silla</td>
<td>Mueble</td>
<td>5</td>
</tr>
<tr>
<td>Computadora</td>
<td>Equipo</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td></td>
<td>30</td>
</tr>
</tfoot>
</table>

</BODY>

8. Añadir el siguiente código para añadir música a la pagina

<BGSOUND src="sonidos/country.mid" loop= infinite>
9. Añadir el siguiente código para añadir un video a la pagina
<p>
<embed src="videos/can-roll.mpg" width="265" height="200"></embed>
</p>

Tarea

1. construir la siguiente pagina:

SERVICIOS DE INTERNET
Los servicios disponibles en internet son :
 Correo Electrónico (e-mail) : Es uno de los servicios más importante en Internet. Es el medio que puede enviar y
recibir un mensaje de cualquier persona del mundo desde su PC..Asimismo reenviar un mensaje a otro usuario,
archivar y borrar mensajes, mantener listas de direcciones.
La dirección de correo electrónico está formada por lo siguiente :

Nombre_usuario@máquina.organización.tipo.país

 TELNET : Permite al usuario registrarse remotamente y actuar como si estuviera al frente de la otra máquina,
siempre que tenga la autorización de registrarse en el sistema remoto. Necesita que los usuarios tengan
privilegios de acceso en el ordenador anfitrión.

 ARCHIE : Es una variación de la voz inglesa Archive (Archivo). Construye dinámicamente índices de archivos con
los contenidos en los servidores FTP de internet.

Página 6 de 9
CARACTERÍSTICAS QUE DEBE TENER LA PAGINA
Esta Página debe de tener las siguientes características:
1. Colocar un color de fondo a la página.
2. Colocar el Titulo como encabezado de nivel 1 debe color el color que crea conveniente.
3. Los subtítulos con encabezado de nivel 2, también de color que crea conveniente.
4. Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic
Sans MS" y en caso de que ésta no esté en el sistema que se coloque la fuente "Times New Roman". Ademas cada
párrafo debe tener un color de texto diferente.
5. Colocar un grafico a la página que este colocado en la parte superior derecha después del título.
6. Colocar un Sonido a la página.
7. Grabar la pagina con nombre servicio.htm

2. construir la siguiente pagina:

RESEÑA HISTORICA DE INTERNET

Internet nace, a fines de la década de los 60, por un proyecto llamado ARPANET, creado por el Departamento de
Defensa de los Estados Unidos para diseñar un sistema de comunicaciones distribuido. Su propósito era facilitar las
comunicaciones entre las autoridades en caso de un ataque nuclear, ya que las redes de comunicación en esa época
estaban diseñadas de modo que cada nodo dependía del nodo anterior.

En este experimento de conexión de una red, se conectaba el Departamento de Defensa y los centros de
investigaciones, entre los cuales estaban un gran número de Universidades haciendo investigación financiada por los
militares. La Administración de Proyectos de Investigación Avanzada (ARPA), es el área encargada de otorgar dinero para
la investigación.

Componentes de una red

o Servidor: este ejecuta el sistema operativo de red y ofrece los servicios de red a las estaciones de trabajo.
o Estaciones de Trabajo: Cuando una computadora se conecta a una red, la primera se convierte en un nodo de
la ultima y se puede tratar como una estación de trabajo o cliente. Las estaciones de trabajos pueden ser
computadoras personales :
 con el DOS,
 Macintosh,
 Unix,
 OS/2 o
 estaciones de trabajos sin discos.
o Tarjetas o Placas de Interfaz de Red: Toda computadora que se conecta a una red necesita de una tarjeta de
interfaz de red que soporte un esquema de red específico, como :
I. Ethernet
II. ArcNet
III. Token Ring
o Sistema de Cableado: El sistema de la red esta constituido por el cable utilizado para conectar entre si el
servidor y las estaciones de trabajo.
o Recursos y Periféricos Compartidos: Entre los recursos compartidos se incluyen los dispositivos de
almacenamiento ligados al :
1. Servidor
2. Las unidades de discos ópticos
3. Las impresoras
4. Los trazadores
5. Resto de equipos que puedan ser utilizados por cualquiera en la red.

CARACTERÍSTICAS QUE DEBE TENER LA PAGINA

Esta Pagina debe de tener las siguientes características:
1. Colocar un color de fondo a la página.
2. Colocar una tabla en donde en las celdas se deberá colocar el texto, las fotos, el video.
3. Un titular con encabezado de nivel 1 colocar el color adecuado. Debe de tener Marquesina que avance de
izquierda a derecha.
4. Los subtítulos con encabezado de nivel 3 de color adecuado.
5. Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo
"Arial". Además cada párrafo debe tener un color de texto diferente.
6. Colocar dos grafico en la página.
7. Colocar un sonido a la pagina
8. Colocar un video a la pagina

Página 7 de 9
 9. Grabar la pagina con nombre Historia.htm

3. 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

4. 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):

WWW

A Pagina01.html

Imagen01.jpg
Imagen02.jpg

B Imagen03.jpg

B1 Pagina02.html

Página 8 de 9
 Pagina03.html
C
Imagen04.jpg

C1 Imagen05.jpg

D Pagina04.html

D1 Imagen06.jpg

TAREA INDIVIDUAL

1. CREAR UN SITE DE VARIAS PÁGINAS WEB SOBRE SU HISTORIA DE VIDA

 Miembros de la Familia
 Niñez
 Etapa Escolar
 Vida Universitaria
 Planes de Futuro
 Pasatiempos

Página 9 de 9