Make your own free website on Tripod.com

Practica #6. Mapas.

Objetivo

El alumno aprenderá a utilizar las imagenes para crear enlaces significativos para el usuario.

Material

  1. Notepad (Block de notas).
  2. IE (Internet Exporer).
  3. Un programa para la creación de imagenes (Paint).
  4. Revista o libro.
  5. Documento con la descripción y funcionamiento de las etiquetas para crear areas de enlace sobre imagenes (Mapas).

Procedimiento

1. Crea los siguientes archivos con los fragmentos de codigo html correspondientes con el programa notepad. Nota: Almacenarlos en el mismo folder:

Archivo: Index.html

<html>
<head>
<title>Paginas de contacto para amigos y familia</title>
</head>

<body>
<table border=0 width=450>
<tr><td align="center">
<map name="mapa1">
<area alt="Pulsa para ver la página de mis amigos" shape="CIRCLE" coords="44,36,29" href="misamigos.html">
<area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="minovia.html">
<area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="mifamilia.html">
<area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="mitrabajo.html">
</map>
<img src="mapa1.gif" width="380" height="72" alt="Mapa de imágenes. Pulsa en cada una de los círculos." border="0" usemap="#mapa1">
</td></tr></table>

</body>
</html>

Archivo: misamigos.html

<html>
<head>
<title>Mis Amigos</title>
</head>

<body>
<h1>Información acerca de mis amigos</p>

<font size="3"><p> Aquí va el contenido de la información referente a mis amigos</p></font>

</body>
</html>

Archivo: minovia.html

<html>
<head>
<title>Mi novia</title>
</head>

<body>
<h1>Información acerca de mi novia</p>

<font size="3"><p> Aquí va el contenido de la información acerca de mi novia.</p></font>

</body>
</html>

Archivo: mifamilia.html

<html>
<head>
<title>Mi Familia</title>
</head>

<body>
<h1>Información de mi familia</p>

<font size="3"><p>Aquí va el contenido de la información de mi familia.</p></font>

</body>
</html>

Archivo: mitrabajo.html

<html>
<head>
<title>Mi trabajo</title>
</head>

<body>
<h1>Información de mi trabajo</p>

<font size="3"><p> Aqui va el contenido de la información acerca de mi trabajo.</p></font>

</body>
</html>

2. Dar click en el botón derecho del mouse sobre la imagen y elegir la opción "Save Picture As". Aparecerá una ventana, en ella de indique el nombre y el folder donde la desea grabar.

3. Verificar su correcto funcionamiento con el Internet Explorer.

4. Con el programa para creación de imagenes. Realice un rectángulo con 5 divisiones, las cuales serán las opciones de un menú. En cada división coloque una frase significativa para la información a mostrar. NOTA: NO GUARDE LA IMAGEN EN FORMATO DE MAPA DE BITS (*.BMP), USE GIF, JPG O PNG.

5. Cree una pógina html (practica_m6.html) donde contenga la imagen y los mapas relativos a cada opción (división).

6. Cree una página html para cada opción de la imagen, con la información pertinente.

7. Verificar su correcto funcionamiento con el Internet Explorer.


Fecha de última actualización: Enero 30, 2005.