Taller de creación de página WEB

GRADO 10
INSTITUTO TECNICO CENTRAL
2000
Por: URIEL CASTAÑEDA SIERRA

Página 1 de 7
Objetivos:
Al finalizar el desarrollo de esta guía, usted habrá desarrollado las habilidades
básicas para:

- Crear una página web personal con enlaces básicos a una segunda rama de
navegación.
- Conocer un editor de código Html
- Conocer procedimientos para crear enlaces (links) a otras páginas mediante
texto o imágenes.
- Conocer proveedores y modelos de plantillas.

Reconocimiento de la herramienta KOMPOZER para edición HTML

Kompozer es un software gratuito para aprendizaje básico de edición html. Se puede

obtener e instalar desde la página web www.kompozer.net. Seleccionamos la página
de descargas [DOWNLOADS] . Buscamos en el listado de versiones el grupo
identificado como: Latest development version: 0.8b3 (2010-02-28). Podemos
observar que se encuentran varias columnas, en la cual se puede identificar el
sistema operativo. Si nuestro sistema operativo es WINDOWS, elegimos el archivo
correspondiente al lenguaje ESPAÑOL (spanish) y la columna [zip archive] de
Windows.

Realizar el proceso de instalación de la herramienta descargando el archivo

empaquetado .ZIP en la carpeta WEB, creada en el escritorio del computador.
(Recordemos que debimos haber descargado la versión [zip archive] que es una
versión de tipo portable, es decir, no requiere instalador en el sistema operativo).

Ejecutar el KOMPOZER.EXE ubicado en la carpeta WEB\Kompozer, desde el

escritorio.

Realizar un recorrido por las diferentes opciones de edición y reconocimiento del

menú de herramientas de este aplicativo.

Desarrollar ejercicios prácticos para comprobar su funcionamiento y comportamiento

con las diferentes opciones de edición. Seguir las instrucciones entregadas por el
instructor.

Reconocer los botones y pestañas ubicados en la pantalla principal de edición, tales

como ver código fuente, pantalla dividida y Vista de edición.

Inicio del Ejercicio:

Página 2 de 7
Sin grabar los ejemplos de prueba del editor, cerrar el trabajo actual y crear un
nuevo archivo a partir del menú de Archivo.

De acuerdo con el siguiente ejemplo de estructura de página web y navegación, se

deberán varios archivos, uno por cada página así:

Pagina principal
Nosotros
Servicios
Contactenos

Archivo: index.html

Datos de la empresa Servicios

Datos de contacto
(dirección, correos,
Archivo: como llegar)
Archivo: nosotros.html
servicios.html Archivo:
contactenos.html

Diseño de la estructura de navegación:

1) Para este modelo se creará una plantilla modelo que se aplicará para las 4
páginas. Esta plantilla será la base para el archiv INDEX.HTML y las otras
tres páginas.
2) Dejar en blanco unos 4 renglones, cuyo espacio será utilizado posteriormente
para el título de la página. En este primer archivo escribir un título temporal
denominado “Home Page”

3) Para enlazar las páginas de “datos de la empresa” (nosotros), “Servicios” y

“Contacto”, se creará un menú utilizando la herramienta de Inserción de
TABLAS, con una fila y cuatro columnas, cada una para el acceso a las
páginas tituladas así:

Inicio Nosotros Servicios Contáctenos

Página 3 de 7
 4) Luego de la tabla del menú, dejar en blanco unos espacios, que después
serán llenados con os contenidos de las diferentes páginas ( Nuestra
empresa, Nuestros servicios y datos de contacto.

5) Finalmente, insertar una nueva tabla de una fila y dos columnas, que se
utilizarán posteriormente para crear links a otros sitios o páginas web.

6) El modelo básico de página WEB estaría visible de la siguiente forma,

Home Page

Inicio Nosotros Servicios Contáctenos

7) Crear una carpeta dentro de la carpeta WEB, nombrarla como

“EJEMPLO_NAVEGACIÓN_WEB”. Esta carpeta se destinará para alojar
todos los archivos que se crearán para el sitio WEB del ejercicio.

8) Grabar el archivo con el nombre “INDEX.HTML” dentro de la carpeta

“Ejemplo_Navegación_WEB”.
Este nombre es utilizado como estándar para nombrar la página principal de
la mayoría de sitios WEB elaborados con HTML.

9) Continuar la edición agregando los enlaces a las 4 opciones del menú,

utilizando el botón “Enlace” de la barra de herramientas del editor. Para cada
opción establecer el link correspondiente, así:

Inicio: index.html
Nosotros: nosotros.html
Servicios: servicios.html
Contáctenos: contactenos.html

Importante tener en cuenta que para Internet no es conveniente utilizar espacios en

blanco ni caracteres especiales (“ñ” o tildes) en los nombres de los archivos.
Igualmente evitar la utilización de letras mayúsculas en los nombres, puesto que si
nuestra página es instalada en un servidor que opere con sistemas operativos
diferentes de Windows, se podrían presentar inconvenientes con la identificación de
los archivos, si en un sitio los nombres de los archivos están escritos con letras
minúsculas y en los programas se han ingresado con letras mayúsculas.

Página 4 de 7
10) Realizar procesos de edición para colocar colores a los botones del menú,
título y fondo de la plantilla.

11) Finalmente grabar la plantilla básica quedando con un diseño similar al

siguiente modelo:

12) A partir de la plantilla utilizada para el Home Page, copiar tres veces el
archivo, renombrarlo para cada uno de los otros tres componentes y realizar
el proceso de ajuste a los títulos y colores del menú.

En total deben quedar 4 archivos html, con los siguientes nombres:

 index.html
 nosotros.html
 servicios.html
 contactenos.html

Observen y verifiquen que el nombre de estos archivos sea exactamente el

mismo que fueron registrados los links en el menú de nuestra página
(preferiblemente con letras minúsculas).

13) Para terminar nuestra página, editar cada uno de los tres nuevos archivos
modificando el menú, cambiando el color RESALTADO para la opción a la
cual corresponde la página y volviendo a color normal la opción INICIO. Es
decir, si estamos editando el archivo nosotros.html, la opción [NOSOTROS]
debe quedar en color resaltado y las otras tres opciones en color normal del
menú.

Página 5 de 7
 14) Concluido el proceso de edición del menú de cada uno de los 4 archivos html,
ya tenemos lista la plantilla base de nuestro sitio WEB. Para terminar solo
resta personalizar la parte central de cada una de las páginas, teniendo en
cuenta que la página principal siempre será la que corresponde al archivo
index.html. Edite cada una de las páginas html escribiendo algún texto o
insertando alguna imagen en la parte central, de forma que cada página
tenga diferente contenido.

15) Comprobar la navegación: A través del explorador de archivos de Windows,

seleccionamos el archivo index.html y marcamos doble clic sobre él. El
sistema deberá abrir el explorador de Internet y mostrarnos la página principal
de nuestro sitio web.

16) Con el mouse marque cada una de las opciones del menú y observe que el
sistema deberá cambiar a la página que corresponde a la opción del menú
resaltado. El nombre del archivo lo podremos observar en la parte superior
de la ventana del explorador, en la barra de direcciones. Rote a través de las
diferentes opciones.

index.html nosotros.html servicios.html contactenos.html

Página 6 de 7
 17) Concluida la verificación de nuestra plantilla, ya podremos comprender el
esquema de estructura básica de una página WEB elaborada en HTML y su
esquema de navegación a través de un menú elaborado con hipervínculos
(enlaces o links).

Actividad:

Tomando como base el ejercicio anteriormente desarrollado, construir un sitio WEB

conformado por varias páginas (entre 4 y 6), mediante el cual el aprendiz pueda
mostrar su información personal destinada a sus fans o a las personas que deseen
consultar su hoja de vida.

El sitio debería contener como mínimo:

Pagina
principal
(Inicio)
Mi Profesión
Mi Experiencia
Contactame
Archivo: index.html

Mi Profesión y Mi Experiencia Datos de contacto

Estudios (dirección, correos,
Archivo: PIN)
Archivo: miexperiencia.html Archivo:
miprofesion.html contacto.html

Página 7 de 7