Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

8e. Links HyperGr·ficos

cubeEl texto no tiene el monopolio para ser "hiper"... Puede expandir la versatilidad de sus p·ginas web haciendo que las im·genes act™en como hiperlinks (°Simplemente, haga click sobre el cubo!).

Objetivos

DespuÈs de esta lecciÛn ser· capaz de:

LecciÛn

Nota: Si no tiene el documento de trabajo de la lecciÛn anterior, b·jese una copia ahora.

A HyperLink Button

Tras las lecciones anteriores (probablemente) se habr· sentido confortable creando hiperlinks, texto dentro de sus documentos que le permite a un intern·uta conectar informaciÛn especÌfica. TambiÈn puede incluso aÒadir im·genes (vea la lecciÛn 7a) para actuar de una manera "hiper". Si recuerda, en una lecciÛn anterior enlazabamos un texto desde su Web de Volcanes, index.htm, a una segunda p·gina, msh.htm, que describe el Monte Sta. Elena. Ahora, en una p·gina posterior, querremos aÒadir un botÛn que cuando se pulse sobre Èl, enlace a un lector de vuelta a la p·gina de la lecciÛn.

La manera de hacer esto es poner la etiqueta HTML para las im·genes dentro de la parte de hipertexto de la etiqueta anchor: 


   <a href="archivoX.htm"> <img src="grafico.gif">
   Ir al Documento X</a>
En su p·gina Web este HTML mostrar· una imagen y el texto Ir al Documento X. Ambos actuar·n como hiperlinks; haciendo click bien en el texto, bien en la imagen, el Browser ir· al archivo HTML archivoX.htm. La imagen sola tambiÈn podrÌa ser un hiperlink. En el World Wide Web un "hipergr·fico" generalmente viene rodeado por un recuadro del color de un hipertexto normal, e indicar· que est· activo.
NOTA: Muchos Browsers permiten alterar el color del hipertexto y algunas p·ginas han suprimido el recuadro alrededor de los hipergr·ficos. Generalmente se puede identificar un ·rea hiperlink en una p·gina web comprobando si el cursor cambia al pasar por encima de una "zona activa". Generalmente, el cursor pasa de ser una flecha a ser una mano.

Desde el punto de vista del diseÒo, recomendamos que si usa im·genes como hiperlinks, incluya tambiÈn un texto como link o que use el atributo ALT= en la etiqueta <IMG...> por si el intern·uta ha desactivado la carga de im·genes.

Ahora crearemos un botÛn "hipergr·fico". Primero necesitar· bajarse una copia de un botÛn "flecha" del Centro de Descarga de Im·genes de la LecciÛn 8e.

Ahora deberÌa disponer de una copia de las im·genes por alg™n lado en su PC (debe moverlas al directorio/carpeta pictures en su ·rea de trabajo).

DespuÈs, aÒada el siguiente HTML para hacer que su botÛn funcione:

  1. Abra el segundo archivo HTML, msh.htm en su editor de textos.
  2. Al final, modifique la ™ltima lÌnea a: 
    
<hr>
<a href="index.htm"> <img src="../pictures/left.gif"> 
Volver a la <i>Web de Volcanes</i></a>
    Nota: La etiqueta de imagen inline (<img...>) est· completamente dentro del anchor, entre el > que marca el final de la URL y el </a> que marca el final del hipertexto. Note tambiÈn cÛmo la etiqueta <i> es utilizada dentro del hipertexto activo para enfatizar el tÌtulo de la lecciÛn Y, finalmente, hemos usado la etiqueta <hr> para poner una linea por encima del gr·fico de botÛn (m·s informaciÛn sobre esta etiqueta en la lecciÛn 4).
  3. Salve el archivo HTML.
  4. Vuelva a su Browser y seleccione Abrir fichero (Open Local) del men™ Archivo (File) para ver el archivo "msh.htm".
  5. Seleccione Actualizar (Reload) del men™ Archivo (File) para actualizar los cambios.
  6. Compruebe el hiperlink a la p·gina del Monte Sta. Elena y el nuevo botÛn que debiera devolverle a la p·gina de la Web de Volcanes.

Im·genes "Sello"

Anteriormente le previnimos contra el uso de grandes im·genes en sus p·gina web porque los usuarios podrÌan tener que esperar mucho tiempo a que bajen. Un mÈtodo para evitar esto es crear copias en miniatura de las im·genes ("sellos" o "Thumbnails") que aparecer·n como gr·ficos inline. DespuÈs, usando los mismos pasos anteriores, puede hacer que el "sello" act™e como un hiperlink que enlace con la imagen real, a tamaÒo real. De este modo, las im·genes de gran tamaÒo sÛlo se bajar·n si el usuario decide verlas.

Primero necesitar· conseguir una copia de dos im·genes del Centro de Descarga de Im·genes de la LecciÛn 8e (Debe guardar estas im·genes en su directorio/carpeta pictures en su ·rea de trabajo).

DespuÈs, cree el link del sello en su archivo de texto principal:

  1. Abra el archivo index.htm en su editor de texto.
  2. Bajo el encabezado Long Valley enter the following: 
    
  Este sismÛmetro de campo mide terremotos asociados
  con fuerzas volc·nicas subsuperficiales y puede ayudar a predecir
  eventos futuros. Est· ubicado sobre una plataforma conocida como
  "Volcanic Tableland" formada por una gran erupciÛn hace 600.000 aÒos.
  <p>
  <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif">
  -- [Vea la imagen real] -- </a>
  <p>
  Este sismÛgrafo mide terremotos
  asociados con fuerzas volc·nicas subsuperficiales.
    La imagen inline, stamp.gif act™a como un hiperlink a una imagen m·s grande, seismo.jpg. Cuando un usuario hace click sobre bien el sello bien el texto "Vea la imagen real", su Browser mostrar· la imagen a tamaÒo real en un programa externo o en una p·gina en blanco.
  3. Salve y Actualice en su web Browser.

Compruebe Su Trabajo

Compare su p·gina web con un ejemplo de cÛmo este documento debrerÌa quedar. Si su p·gina resulta diferente revise en su editor de textos cÛmo introdujo el texto. Algunos de los errores m·s comunes son discrepancias con el nombre correcto de los archivos y el cÛdigo HTML para los anchor links, o que no existen las im·genes en el mismo directorio que se especifica. Si ve una imagen con una interrogaciÛn:

suele significar que el HTML no pudo encontrar el archivo solicitado por la etiqueta <img> o que la imagen no est· en formato GIF o JPEG.

RevisiÛn

Topicos a revisar en esta lecciÛn:
  1. øCÛmo se creaba un botÛn grÈfico en su p·gina web?
  2. øPara quÈ son ™tiles los "sellos" o "Thumbnails" a la hora de incluir im·genes en sus p·ginas?
  3. øCÛmo cre·bamos un link de "sello" en un documento HTML?

Pr·ctica Independiente

Intente aÒadir botones que enlacen dos p·ginas web entre sÌ.

A continuaciÛn....

Use la etiqueta de preformato para crear una tabla de texto en su lecciÛn de volcanes.

IR A.... | Õndice de Lecciones | anterior: "Links a Secciones de un P·gina" | siguiente: "Texto Preformateado" |

Writing HTML LecciÛn 8e: Links HyperGr·ficos
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al espaÒol por agma@usa.net

URL: