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: