CREACIÓN DE PÁGINAS WEB CON KOMPOzER

4. Enlaces

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

4.1 Crear varios tipos de enlaces:

4.1.1. Con enlaces internos del 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 enlaces
4.3. Modificar los colores de los enlaces
4.4. Actividad nº 4: Crear los enlaces de la web del Monstruo
4.5. Conocer las etiquetas de enlaces en lenguaje HTML

4.1. Tipos de enlaces

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 enlaces que tiene que haber en nuestra página.

4.1.1. Enlaces internos del documento

Un enlace interno (o marcador, como lo llaman otras aplicaciones) es un marcador de una sección de un documento a donde se dirigirá un enlace. El enlace 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. 

Botones de enlacesPara crear el primer enlace interno 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 la celda grande de los contenidos, no la del lateral). Después, pulsamos el icono Enlace interno de la barra superior o abrimos el menú Insertar y pulsamos en la opción Enlace interno.... Entonces aparecerá una ventanita, donde escribimos la palabra "profesion" (sin mayúsculas ni tildes ni letras especiales, porque es texto de código) en el cuadro de texto superior que corresponde al Nombre del enlace interno. Pulsamos el botón Aceptar y vemos que en el documento se ha insertado un icono del enlace interno con el dibujo de un ancla.

Ahora hay que crear el enlace que se dirige a ese marcador y para ello marcamos con un clic de ratón la palabra "Profesión" que está en la columna izquierda, abrimos el menú Insertar y elegimos la opción de Enlace..., o también podemos pulsar el botón Enlace, que se encuentra en la barra superior. Nos aparece el siguiente formulario, donde tenemos que escribir la expresión #profesion, que es el nombre del enlace interno, esta vez precedido del signo #, que utiliza HTML para identificarlo. Esa expresión se puede elegir en el menú desplegable que está a la derecha del campo de texto, donde se verán todos los enlaces internos del documento.

Enlace

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 enlace, es decir, al pulsar sobre ella con el cursor del 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. Enlace 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 enlace con el archivo de la colección de imágenes del Monstruo, coleccion.html, que hemos creado anteriormente. Tendremos que marcar la expresión "Mi colección" y después abrir la ventana de enlaces. Hay que escribir sólo el nombre del archivo en el primer cuadro de texto o buscarlo en el disco duro pulsando el icono de la carpeta que se encuentra a la derecha del campo de texto. Si, por ejemplo, coleccion.html se encontrara en una carpeta llamada aficiones, la ruta habría sido: "aficiones/coleccion.html".

Enlace a un documento interno

En la ventana aparece activada la expresión "La URL es relativa a la dirección de la página". En cuanto a la URL, cuya definición se puede leer en Wikipedia, puede ser de dos tipos:

  1. URL relativa es la que indica la dirección o URL parcial de un archivo desde la carpeta donde se encuentra el documento con el enlace. Nosotros tenemos el archivo index.html dentro de la carpeta monstruo, por tanto, cualquier enlace que hagamos partirá desde esa carpeta. Así, por ejemplo, el enlace a la imagen del monstruo que tenemos en la carpeta imagenes será: "imagenes/monstruo.jpg", con una barra de separación.
  2. URL absoluta es la dirección completa que tiene que comenzar con el protocolo http e incluye la dirección del servidor donde se encuentra ese archivo.

Para nuestra página web es mejor utilizar las URL relativas, porque así las URL no dependen del servidor en que se encuentre, de manera que podemos crear la página web en nuestro disco duro y transferir luego a cualquier servidor todos los archivos guardados en la misma carpeta principal.

El enlace lo podríamos dejar así, pero existe un atributo importante para algunas etiquetas que se llama title, y con él titulamos o describimos un enlace. El texto aparece en un recuadro de color cuando colocamos el cursor del ratón encima del enlace, y completa la información de ese enlace. Para incluir este atributo en la etiqueta del enlace, hay que pulsar el botón Edición avanzada, que está en la parte inferior derecha de la ventana Propiedades del enlace. Entonces surge otra ventana con pestañas. 

Atributo title

En la pestaña donde se abre la ventana, Atributos HTML, hay en su parte inferior izquierda un menú desplegable, del que escogemos el atributo title. A su derecha está el campo de texto para el valor del atributo, y ahí escribimos la descripción del enlace; en este caso: "Mi colección de imágenes".

4.1.3. Enlace a una página web externa

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 enlaces pulsando el botón correspondiente. Entonces, escribimos la dirección completa (absoluta) de la página en el cuadro de texto de la Ubicación del enlace

Pero como queremos que la página de Halloween se abra en una nueva ventana, tendremos que activar la casilla de la sección Destino. El enlace se puede abrir de varias formas según se ve en el menú desplegable de esa sección, pero la más útil es la de abrirlo en una nueva ventana, ya que las otras posibilidades se usan muy poco.

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 enlace.

Enlace a una página externa

4.1.4. Enlace a una dirección de correo electrónico

Un tipo de enlace muy utilizado es a una dirección de correo electrónico. En nuestra página vamos a crear un enlace de este tipo para que cualquier lector 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 enlace sobre las palabras "el Monstruo"; para ello, marcamos con el ratón esas dos palabras y abrimos la ventana de enlaces. Ahora escribimos nuestra dirección de correo electrónico inmediatamente después de esa expresión mailto:, sin dejar huecos en blanco. Cuando el usuario pulse ese enlace, se abrirá su programa de correo electrónico con esa dirección escrita.

Enlace a email

4.1.5. Enlace a un archivo para descargarlo (download)

Muy sencilla resulta la creación de un enlace a un archivo de cualquier formato que tengamos en nuestra carpeta y que queramos que el usuario descargue a su ordenador. Escribimos en nuestra página la frase "Descarga de archivo", por ejemplo, la marcamos y abrimos la ventana de enlaces. 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 campo de texto, como hemos hecho hasta hora con otros enlaces. En su página, el Monstruo no ha incluido ningún enlace de este tipo.

4.2. Mapas de enlaces

Los mapas consisten en varios enlaces 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 enlace, 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. Colores de los enlaces

Por último, se habrá observado que cuando creamos un enlace en un texto, éste cambia de color y aparece subrayado. Los navegadores utilizan tres colores predeterminados para los enlaces: 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 enlace. Estos colores los podemos modificar en la ventana de Colores y fondo de la página..., que se puede abrir desde el menú superior Formato.

Colores y fondo de la página

Cuando se activa la opción Usar colores personalizados, se ven los colores predeterminados para el texto, para los enlaces y para el fondo. No conviene cambiarlos a menos que se escojan muy bien para que los lectores distingan qué enlaces han visitado y cuáles no, porque estos colores son los que usan todos los navegadores de forma predeterminada y, por tanto, los usuarios están acostumbrados a ellos. No obstante, el Monstruo se ha atrevido a cambiar esos colores para que se vean bien en su documento de lacolección de imágenes, porque el fondo negro le obliga a cambiarlos. Y quedan así, como ya vimos en la sección 3.4.:

Colores del documento de la colección

Actividad 4.4. Actividad nº 4: Crear los enlaces de la web del Monstruo

 En esta actividad crearemos todos los enlaces que faltan por incluir en nuestra página. Ya se ha explicado en las secciones anteriores cómo realizarlos, así que no debe de resultar difícil.

  1. Primero vamos a crear los enlaces internos y sus enlaces 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 enlace 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 enlace 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 enlace desde el archivo de la colección (coleccion.html) que nos lleve de regreso a la página principal index.html; 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 enlaces impedirá que se pueda leer bien la frase "Volver al inicio". Por ello, hay que cambiar los colores predeterminados de los enlaces, como vimos en la sección 4.3 de este documento.
  5. Por último, haremos los enlaces 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.

4.5. La etiqueta de enlace 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 enlaces internos o 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 enlaces creados para dirigir al lector a esas secciones del documento son los siguientes:

<a title="Mi profesión" href="#profesion">Profesión</a>

<a title="Mis aficiones" href="#aficiones">Aficiones</a>

<a title="Enlaces de miedo" href="#enlaces">Enlaces</a>

<a title="Mi colección de imágenes" href="coleccion.html">Colección</a>

<a title="Contesta esta encuesta" href="#escribe">Escríbeme</a>

<a href="#arriba"><img src="imagenes/monstruo.jpg" align="texttop" border="0" width="39" height="28"></a>

Obsérvese que el último enlace lleva incluida la etiqueta de la imagen del monstruo. Además, todos los enlaces incorporan el atributo title, que no incorporan los siguientes para evitar que haya demasiado texto en este cuadro.

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

A una página web ajena:

<a href="http://www.halloween.com">Halloween.com</a>

A otro documento de nuestro sitio de Internet:

<a href="coleccion.html">Véase mi colección</a>

A una dirección de correo electrónico (e-mail):

<a href="mailto:el_monstruo@monstruo.com">el Monstruo</a>.

A un archivo para que sea descargado. En este caso no hemos utilizados ningún archivo en nuestra página. En el atributo href: hay que escribir el nombre del archivo con su extensión:

<a href="nombrearchivo.zip">

Las etiquetas de los colores de los enlaces 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 enlaces:

<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 enlace y al color del enlace visitado.


Anterior Arriba Siguiente


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