Páginas web con FrontPage Express

4. Hipervínculos

Los objetivos de la cuarta lección son los siguientes:

4.1 Crear varios tipos de hipervínculos:

4.1.1 Con marcadores dentro de un documento
4.1.2 A una página web externa
4.1.3 A otro documento interno
4.1.4 A una dirección de correo electrónico
4.1.5 A un archivo para descargarlo (download)

4.2 Conocer los mapas de hipervínculos
4.3 Modificar las propiedades de la página
4.4 Actividad nº 4: Realizar los hipervínculos que faltan
4.5 Conocer las etiquetas de hipervínculos en lenguaje HTML

4.1. Tipos de hipervínculos

No podían faltar en un curso de páginas web los enlaces o hipervínculos, que son la esencia misma de la Red. Los también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otro archivo del mismo sitio de Internet o a otra página de Internet, entre otras funciones.

Habíamos dejado nuestra página en la lección anterior diseñada en una tabla que ocupaba todo el documento. En esta lección vamos a insertar todos los hipervínculos que tiene que haber en nuestra página.

4.1.1 Hipervínculo con marcadores dentro de un documento

Un hipervínculo con marcador es un enlace entre un hipertexto y una sección de un documento. El hipervínculo puede unir un documento con una parte concreta de otro, pero los marcadores de la página web del Monstruo se van a realizar sobre secciones del mismo documento. Para crear el primer marcador colocamos el cursor al comienzo de la primera sección, es decir, a la izquierda de la palabra "Profesión" (la que está escrita en en la segunda columna). Después, abrimos el menú edición y pulsamos en la opción Marcador.... Entonces aparecerá una ventanita, donde escribimos la palabra "profesion" (sin mayúsculas ni acentos ni letras especiales) en el cuadro de texto superior que corresponde al Nombre del marcador. Pulsamos en aceptar y vemos que en el documento se ha insertado un icono del marcador con forma de banderita. Ahora hay que crear el hipervínculo, y para ello marcamos con un clic del ratón la palabra "Profesión" que está en la columna izquierda, abrimos el menú Insertar y elegimos la opción de Hipervínculo..., o también podemos pulsar el botón de hipervínculos, que se encuentra en la barra de herramientas, el último de esta imagen:

Hipervínculo

Modificar hipervínculoEntonces aparece la ventana Modificar hipervínculo. Si vamos a la sección de Páginas abiertas, veremos que en ella aparece el título de la página ("Web del Monstruo"); si no está marcado, hay que marcarlo con un clic del ratón. Debajo hay un menú desplegable denominado Marcador. Lo abrimos y pulsamos la palabra "profesion", que automáticamente se coloca en el cuadro de texto del menú. Ya hemos creado el enlace. Para comprobarlo, pulsamos en la pestaña WWW, que está en la parte superior de la ventana, y en el cuadro de texto de Dirección URL: vemos que aparece la expresión "#profesion", que es la expresión del hipervínculo con marcador. Cuando cerremos la ventana, observaremos que la palabra "Profesión" de la columna izquierda está subrayada, lo que indica que esa palabra es ya un hipervínculo, es decir, al pulsar sobre ella con el ratón la pantalla del ordenador nos mostrará en la parte superior la sección donde el Monstruo nos habla de su profesión.

4.1.2 Hipervínculo a un documento interno

También se puede crear otro tipo de enlace: vínculos entre archivos del mismo sitio de Internet. En nuestro caso vamos a crear un hipervínculo con el archivo de la colección de imágenes del Monstruo, colec.htm, que hemos creado anteriormente. Tendremos que marcar la expresión "Mi colección" y después abrir la ventana de hipervínculos. Pulsamos en la pestaña WWW y, como el archivo colec.htm se encuentra en la misma carpeta que el archivo desde el cual lo enlazamos, hay que escribir sólo el nombre del archivo en el cuadro de texto Dirección URL:. Si, por ejemplo, colec.htm se encontrara en una carpeta llamada aficiones, la ruta sería: "aficiones/colec.htm".

Si no hubiéramos creado todavía el archivo colec.htm, lo podríamos haber creado directamente desde la la sección Página nueva de la ventana de hipervínculos. Allí se rellenan los cuadros de texto correspondientes al título de la página y a la dirección URL de la página; después, se pulsa el botón Aceptar y aparece otra ventana con la Plantilla o Asistente. Elegimos la opción predeterminada, es decir, "Página normal" y al aceptar, se abre la nueva ventana en el programa. Cuando terminemos de trabajar en ella, hay que guardarla abriendo el menú Archivo y eligiendo la opción Guardar como.

Página nueva

4.1.3 Hipervínculo a una página web externa

El tipo de enlace que hemos creado ha sido dentro del mismo documento. Pero también se puede crear un vínculo con otra página web ajena a la nuestra. Aquí vamos a crear un enlace de este tipo en la sección Enlaces de miedo de nuestra página. Después de marcar la expresión "http://www.halloween.com" vamos a abrir la ventana de hipervínculos pulsando el botón correspondiente. Pulsamos en la pestaña WWW si la ventana no está abierta en esa sección, abrimos el menú desplegable denominado Tipo de hipervínculo y elegimos http:, que es el protocolo propio de las páginas web de Internet. Entonces, escribimos la dirección de la página en el cuadro de texto Dirección URL inmediatamente después de la expresión "http://". Pero como queremos que la página de Halloween se abra en una ventana nueva, tendremos que escribir la palabra blank en el cuadro llamado Marco de destino. Por último, pulsamos el botón aceptar y la expresión "http://www.halloween.com" queda subrayada, lo que indica que ya se ha creado el hipervínculo.

Hipervínculo de http

4.1.4 Hipervínculo a una dirección de correo electrónico

Un tipo de hipervínculo muy utilizado es a una dirección de correo electrónico. En nuestra página vamos a crear un hipervínculo de este tipo para que cualquier lector de nuestra página pueda enviarnos un mensaje. En la última línea de nuestro documento aparece el siguiente texto: "Página creada por el Monstruo en octubre de 2001". Vamos a crear el hipervínculo sobre las palabras "el Monstruo"; para ello, marcamos con el ratón esas dos palabras y en la sección WWW de la ventana de hipervínculos elegimos mailto: como Tipo de hipervínculo. Entonces aparece la expresión "mailto:" en el cuadro de texto Dirección URL. Ahora escribimos nuestra dirección de correo electrónico inmediatamente después de esa expresión, sin dejar huecos en blanco. Cuando el usuario pulsa ese hipervínculo, se abre su programa de correo electrónico con esa dirección escrita.

Hipervínculo de email

4.1.5 Hipervínculo a un archivo para descargarlo (download)

Muy sencilla resulta la creación de un hipervínculo a un archivo de cualquier formato que tengamos en nuestra carpeta y que queramos que el usuario descargue (o "se baje") a su ordenador. Escribimos en nuestra página la frase "Descarga de archivo", por ejemplo, la marcamos y abrimos la ventana de hipervínculos. Entonces sólo tenemos que escribir el nombre del archivo con su extensión (son muy habituales los archivos comprimidos de extensión ZIP) en el cuadro de texto "Dirección URL" de la sección "WWW", como hemos hecho hasta hora con otros hipervínculos. En su página, el Monstruo no ha incluido ningún hipervínculo de este tipo.

4.2 Mapas de hipervínculos

Los mapas consisten en varios hipervínculos creados dentro de una misma imagen. Aunque se utilizan mucho en páginas web muy profesionales, no son fundamentales en los documentos, y muchas veces retardan la apertura total de una página. Con algunos programas se pueden crear fácilmente, pero exigen una gran minuciosidad si se quieren escribir en el código fuente de la página.

Un ejemplo muy habitual en la Red son los menús creados con dibujos pequeños a modo de navegación y que constituyen una sola imagen. Dentro de esa imagen, se delimitan las zonas correspondientes a cada hipervínculo, de manera que cuando el usuario haga clic en cada una de esas zonas, se abra un archivo distinto. También se suelen construir estos menús con textos creados como imágenes.

4.3 Propiedades de página

Por último, se habrá observado que cuando creamos un hipervínculo en un texto, éste cambia de color y aparece subrayado. Los navegadores utilizan tres colores predeterminados para los hipervínculos: uno para cuando aún no se ha pulsado sobre él, otro para cuando se ha visitado el documento al que va dirigido, y un último color que aparece en el momento en que se pulsa el hipervínculo.

Todos estos atributos y otros más del documento los podemos modificar en la ventana de Propiedades de página, que se puede abrir apretando el botón derecho del ratón y pulsando en la opción adecuada, o desde el menú Archivo.

Cuando aparece la ventana, se abre en la sección General, donde podemos cambiar, entre otras cosas, el título interno de la página. Si pulsamos la pestaña Fondo, podremos introducir una imagen de fondo, que se repetirá por todo el documento en forma de mosaico. O podremos modificar los colores del fondo, del texto o de los hipervínculos. Cuando abramos los menús desplegables para elegir el color, pulsaremos en uno de los diecisiete colores seleccionados o pulsaremos en Personalizar si queremos escoger otro distinto.

Modificar fondo

Actividad 4.4 Actividad nº 4: Realizar los hipervínculos que faltan

En esta actividad crearemos todos los hipervínculos que faltan por incluir en nuestra página. Ya se ha explicado en la sección anterior cómo realizarlos, así que no debe de resultar difícil.

  1. Primero vamos a crear los marcadores y sus hipervínculos correspondientes para las otras tres secciones del documento: "Aficiones", "Enlaces de miedo" y "Escríbeme". A los marcadores los llamaremos "aficiones", "enlaces" y "escribe". La sección de la encuesta la introduciremos en el siguiente capítulo.
  2. También vamos a crear un marcador en la parte superior del documento, a la izquierda del título, que se llame "arriba", y su hipervínculo correspondiente lo haremos sobre la imagen pequeña del Monstruo que se encuentra en la parte inferior del documento, de forma que cuando el lector llegue al final del documento, pueda subir enseguida al inicio del documento sin necesidad de utilizar la barra de desplazamiento.
  3. Además, vamos a volver a crear el hipervínculo al archivo de la colección de imágenes desde la expresión "(Véase mi colección)", que se encuentra en el número 2 de la lista numerada de la sección de Aficiones. Y también tendremos que hacer un hipervínculo desde el archivo de la colección (colec.htm) que nos lleve de regreso a la página principal (index2.htm); lo haremos sobre la siguiente frase: "Volver al inicio", que escribiremos debajo de las dos imágenes que introdujimos en la lección 2.
  4. Con el fondo negro de la página, el color que adquieren los hipervínculos impedirá que se pueda leer bien la frase "Volver al inicio". Por ello, hay que cambiar los colores predeterminados de los hipervínculos, como vimos en la sección 4.3 de este documento.
  5. Por último, haremos los hipervínculos de las otras dos páginas web de la sección de enlaces que todavía no hemos hecho.

Cuando acabemos esta actividad, podemos comparar nuestra página con la del Monstruo. Ésta se ve pulsando el siguiente botón.

Página con tablas


4.5 La etiqueta de hipervínculos en HTML

La etiqueta de enlace o hipervínculo es <a> y su atributo principal href. Los marcadores incluyen el atributo name, que nombra la localización a la que va dirigido el enlace. El texto que delimitan puede estar a la derecha de la etiqueta de cierre, como en nuestro caso. Los marcadores de nuestra página son los siguientes:

Los hipervínculos creados para dirigir al lector a esas secciones del documento son los siguientes:

Obsérvese que el último hipervínculo lleva incluida la etiqueta de la imagen del monstruo.

En cuanto a los otros cuatro tipos de hipervínculos creados en nuestra página, éstas son las etiquetas y sus atributos:

Las etiquetas de los colores de los hipervínculos se incluyen dentro de la etiqueta <BODY> como atributos. En nuestra página no las hemos cambiado, por eso no aparecen, aunque sí aparece el color de fondo, que lo hemos modificado. En cambio, en la página de la colección de fotos sí hemos modificado los colores de los hipervínculos:

<body bgcolor="#000000" text="#FFFFFF" link="#FFFF00" vlink="#FFFF00">

Los atributos, por orden, se refieren al color del fondo, al color del texto, al color del hipervínculo y al color del hipervínculo visitado.


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3