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
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.
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:
Entonces 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.
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.
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.
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.
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.
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.
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.
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.
Cuando acabemos esta actividad, podemos comparar nuestra página con la del Monstruo. Ésta se ve pulsando el siguiente botón.
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:
<a name="arriba"></a>Página web del Monstruo
<a name="profesion"></a>Profesión
<a name="aficiones"></a>Aficiones
<a name="enlaces"></a>Enlaces de miedo
Los hipervínculos creados para dirigir al lector a esas secciones del documento son los siguientes:
<a href="#profesion"><strong>Profesión</strong></a>
<a href="#aficiones"><strong>Aficiones</strong></a>
<a href="#enlaces"><strong>Enlaces</strong></a>
<a href="#escribe"><strong>Escríbeme</strong></a>
<a href="#arriba"><img src="imagenes/monstruo.jpg"
align="texttop" border="0" width="39" height="28"></a>
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:
<a href="http://www.halloween.com">Halloween.com</a>
<a href="colec.htm">Véase mi colección</a>
<a href="mailto:alejandro.valero@fresno.pntic.mec.es">el Monstruo
</a>.
<a href="nombrearchivo.zip">
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.