cursos online, formacion on-line, teleformación, Elearning, Cursos online de ofimática, diseño gráfico, web, gestión, idiomas, programacion - ADR Formación

Hipervínculos

Los vínculos o enlaces son la Web en sí. Cualquier otro elemento podría reemplazarse, pero sin los vínculos no existiría la World Wide Web como tal. En esta unidad veremos las herramientas de Dreamweaver para crear enlaces a partir de texto. Pero antes de nada, veamos una introducción a las etiquetas HTML que definen los enlaces de nuestras páginas Web y sus diferentes atributos.

Referencias HTML

Etiqueta <A> y </A>

Lo que ha hecho tan importante al HTML ha sido la posibilidad de "navegar" de uno a otro documento (independientemente de donde se ubique) sin que el usuario tenga que cambiar su forma de trabajo ni preocuparse de ello.

La etiqueta <a> nos permite definir un enlace, de tal forma que el texto o imagen encerrado entre la etiqueta de inicio <a> y la etiqueta de cierre </a> será el que nos sirva de enlace hacia el destino que marquemos.

Ejemplo: Pulsa para ir a Google

Código HTML: <a href="http://www.google.com"> Pulsa para ir a Google</a>

Como vemos en el ejemplo el texto "Pulsa para ir a Google" funciona como enlace y el destino es marcado por el modificador href de la etiqueta. Las etiquetas html y los modificadores implicados en la creación de enlaces son estos:

Atributos de <A>

Atributo
Descripción
href="..."
Es necesaria. Indica la dirección URL a la que se va a saltar al hacer clic sobre el enlace
name="..."
Convierte al contenido de la etiqueta <A> en un destino (llamado marcador o punto de ancla)
target="..."
Determina el marco o ventana de destino donde se abrirá el archivo enlazado.
title="..."
Opcionalmente podemos añadir un texto alternativo que se muestra al posicionarte sobre el enlace en un letrero amarillo.

Atributos de <BODY>

La etiqueta <BODY> puede tener tres modificadores que definen el aspecto de los enlaces de toda la página web.

Atributo
Descripción
link="..."
Determina el color general de los enlaces de la página Web
vlink="..."
Determina el color general de los enlaces ya visitados de la página Web
alink="..."
Determina el color general de los enlaces activos (al hacer click) de la página Web

Cuestiones generales

Hipervínculos

Un hipervínculo (link, enlace, vínculo) es una conexión entre una página Web y otro destino. El destino es con frecuencia otra página Web, pero también puede ser una imagen, una dirección de correo electrónico, un archivo (como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa. Por otro lado los elementos que sirven como enlace pueden ser textos o imágenes.

Al hacer click sobre un hipervínculo de una página web pueden ocurrir varias cosas:

  • Lo mas frecuente es que el destino del enlace sea otra página web, y por lo tanto esa página se muestre en el navegador.
  • Puede ocurrir que el destino sea un archivo diferente a una página web, pero conocido por nuestro ordenador, como por ejemplo un archivo en formato .PDF en cuyo caso lo abrirá la aplicación registrada para ello, en este caso Acrobat Reader. Lo mismo ocurre para cualquier formato de archivo registrado en nuestro sistema.
  • Puede ocurrir que el destino sea una dirección de correo electrónico en cuyo caso se abrirá en nuestro programa de correo un nuevo mensaje con la dirección del destinatario.
  • Puede ocurrir tambien que el enlace sea a hacia un archivo que no este registrado en nuestro ordenador y en este caso se mostrará un cuadro ofreciendo la posibilidad de abrir el archivo o bien de descargarlo.

URL

Al crear un hipervínculo, su destino se codifica como dirección URL. URL significa Localizador uniforme de recursos (Uniform Resource Locator), complicada frase que no nos describe con precisión su significado. La función de este localizador consiste en proporcionar una forma estándar para encontrar las cosas en Internet. Todo puede ser localizado con el sistema URL.

Una dirección URL está formada por los siguientes elementos:

Por ejemplo:http://www.larioja.com/ocio/exposiciones/exposiciones.htm

Protocolo
http://
Servidor Web
www.larioja.com/
Ruta de acceso
ocio/exposiciones/
Nombre de Archivo
exposiciones.html
  • El protocolo específica el protocolo de comunicaciones empleado entre el cliente (el usuario) y el servidor.
  • El servidor web específica el dominio donde se encuentra la página. (Este dominio es traducido por un DNS Servidor de nombres de dominio que indica el número IP del servidor donde está alojada la página.)
  • La ruta de acceso indica las carpetas donde se encuentra ubicada la página.
  • Finalmente el nombre del archivo y su extensión.
Resumiendo, hasta ahora se ha visto como se codifica una dirección de una página a traves de la URL. Pero cuando diseñamos una página web y creamos enlaces no siempre escribimos la URL completa para enlazar. Básicamente cuando el enlace se realiza a una página externa se escribe la URL completa (dirección absoluta), pero si el enlace es a una página de nuestro sitio se utilizan direcciones relativas, es decir direcciones incompletas a las cuales falta algo.

Direcciones absolutas y relativas

  • Absolutas: Una dirección absoluta contiene la URL completa. Las direcciones absolutas presentan la ventaja de que el destino está perfectamente localizado ya que está indicado por todos los elementos de su dirección. Estas direcciones requieren ser comprobadas periodicamente como una labor de mantenimiento.
    Ejemplo : direccion absoluta en vista código <a href="http://www.fer.es/aula/mar/index.htm">direccion absoluta</a>
  • Relativas. Son direcciones a las que falta alguna de las secciones de la URL. Cuando a una dirección le falta alguna de las secciones, estas son obtenidas de la propia página desde la que se hace el enlace.
    Así por ejemplo imaginemos que la página index del ejemplo anterior tiene un enlace como este:
    direccion relativa en vista código <a href="productos.htm">direccion relativa</a> Como vemos la dirección de destino solo contiene el nombre de la página productos.htm, faltándole el resto. Pues bien cuando un usuario hace click sobre el enlace el navegador genera la URL con los datos existentes en el enlace y los restantes los toma de la página actual en la que se encuentra http://www.fer.es/aula/mar/productos.htm
    Desde un punto de vista práctico las direcciones relativas se usan para enlazar páginas pertenecientes al mismo sitio con lo cual se coloca en el destino solamente el nombre del archivo al que se enlaza. En el caso de que el archivo al que se realiza el enlace no se encuentre dentro de la misma carpeta del sitio web, se le antepone el nombre de la carpeta para que el archivo sea localizado a partir de la ubiación actual.

Dreamweaver presenta dos tipos de enlace relativo pero el que se usa siempre es el relativo al documento. El uso de enlaces relativos a la raíz del sitio tiene escasa aplicación y no va a ser explicado en este curso.

Para prácticar un poco con la sintaxis de los enlaces relativos, supongamos que tenemos un sitio web con la siguiente estructura:

  • Para establecer un vínculo desde tienda.htm a consultas.htm (ambos en la misma carpeta) la ruta relativa será solamente el nombre de archivo: consultas.htm
  • Para establecer un vínculo desde tienda.htm a registro.htm (situada en la subcarpeta llamada clientes) la ruta relativa será: clientes/registro.htm
    Cada barra diagonal supone un nivel por debajo en la jerarquía de carpetas.
  • Para establecer un vínculo desde tienda.htm a la página principal index.htm (en la carpeta padre, un nivel por encima de tienda.htm) la ruta relativa será: ../index.htm
    Cada ../ supone un nivel por encima en la jerarquía de carpetas.
  • Para establecer un vínculo desde tienda.htm a la página principal catalogo.htm (en otra subcarpeta distinta) la ruta relativa será: ../productos/catalogo.htm
    ../ sube un nivel, y productos/ baja a la subcarpeta productos.

Naturalmente al realizar un hipervínculo a un destino del mismo sitio Web, Dreamweaver crea automáticamente la dirección URL relativa. Si se cambia el nombre o mueve un archivo en la carpeta raíz, Dreamweaver actualiza todas las direcciones URL que señalan el archivo. De esta forma Dreamweaver nos ahorra el trabajo de determinar la ruta completa,y la actualiza si alguno de los arhivos del sitio es movido a otra carpeta del web.

Elementos del enlace

Un hipervínculo de texto es simplemente texto, como por ejemplo una palabra o frase, a la que se le asigna una dirección URL de destino.

Un hipervínculo de imagen es una imagen a la que se le asigna una dirección URL de destino, se puede asignar esta dirección de dos modos:

  • Se puede asignar a toda la imagen un hipervínculo predeterminado. En este caso, se puede hacer clic en cualquier parte de la imagen para mostrar el destino. Un botón es un ejemplo de imagen con un hipervínculo predeterminado.
  • Se puede asignar a la imagen una o más zonas activas, que son regiones de hipervínculo en la imagen. Una imagen que contiene zonas activas se llama mapa de imagen. Por ejemplo, un mapa de imagen puede ser una imagen que representa diferentes partes de un sitio Web (como la página principal, una página de catálogo, etc.). Habrá que hacer clic en una zona determinada del mapa de imagen para mostrar la página correspondiente.

Los hipervínculos de imagen en sus dos modalidades los veremos en la Unidad 4.

Apariencia de los enlaces

Cuando creamos un enlace con texto éste se muestra de forma predeterminada de color azul y subrayado. Los enlaces que han sido visitados presentan un color morado, y rojo es el color de los enlaces en el momento justo de pulsar sobre él.

En la unidad 9 estudiaremos cómo se pueden establecer efectos para que los hipervínculos cambien de apariencia cuando se coloca el puntero del ratón encima, como por ejemplo cambiar la fuente del hipervínculo, el color, etc...

Por ahora podemos establecer para toda la página el color del texto de los enlaces en sus diferentes estados (normal, visitado y activo). Para ello:

  1. Pulsamos en el menú Modificar > Propiedades de la página.
  2. Seleccionamos un color para cada una de las opciones: Vínculos, Vínculos visitados y Vínculos activos.
  3. Aceptamos y a partir de este momento todos los enlaces de la página tanto los ya creados como los nuevos que hagamos tendrán los colores indicados en este cuadro.

Estas opciones se traducen an atributos ( link="..." / vlink="..." / alink="...") de la etiqueta <body>. por lo que afectan a todos los enlaces dentro del cuerpo de la página Web.

Colores de los vínculos desde Propiedades de página

 

Además Dreamweaver ofrece la posibilidad de elegir combinaciones de colores prediseñadas de enlaces y fondo, siendo todos estos colores "seguros". Para elegir entre una combinación predeterminada seguimos estos pasos:

  1. Vamos al menú Comados > Establecer combinación de colores...
  2. Seleccionamos una de las combinaciones y aceptamos.
  3. En definitiva, estas combinaciones solo tienen como finalidad ahorrar tiempo.

Destino

Un hipervínculo puede tener como destino los siguientes objetos:

  • Una página Web o un archivo de un servidor de Internet externo.
  • Una página Web o un archivo del Web dónde estamos trabajando.
  • Una posición determinada dentro de una página Web. (Marcador)
  • Enlace con una dirección de correo electrónico.

Todos los derechos reservados © Copyright 2004 ADR Infor S.L.
Contacto: soporte@adrinfor.com