Buscador

Cursos subvencionados para trabajadores

Realiza el curso gratis a través de tu empresa.

Cursos Subvencionados

Inicio » Informática técnica. » Versiones anteriores » Curso de Dreamweaver MX » 3.- Hipervínculos

Curso de Dreamweaver MX

Cursos Relacionados:

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

Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....

Referencias HTML

Inscríbete ahora y accede a 3 unidades gratis

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 dónde 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:

Inscríbete ahora y accede a 3 unidades gratis

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 posicionarse sobre el enlace en un letrero amarillo.

Inscríbete ahora y accede a 3 unidades gratis

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 clic) de la página Web

Inscríbete ahora y accede a 3 unidades gratis

Cuestiones generales

Inscríbete ahora y accede a 3 unidades gratis

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 clic 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 también que el enlace sea a hacia un archivo que no esté registrado en nuestro ordenador y en este caso se mostrará un cuadro ofreciendo la posibilidad de abrir el archivo o bien de descargarlo.

Inscríbete ahora y accede a 3 unidades gratis

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 especifica 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 cómo 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 les falta algo.

Inscríbete ahora y accede a 3 unidades gratis

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, éstas 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 ubicació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 practicar 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 archivos del sitio es movido a otra carpeta del web.

Inscríbete ahora y accede a 3 unidades gratis

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.

Inscríbete ahora y accede a 3 unidades gratis

Apariencia de los enlaces

Cuando creamos un enlace con texto éste se muestra de forma predeterminada en 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 ellos.

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

De todas formas, mediante Propiedades de página podremos definir bastante bien el aspecto de todos los vínculos de una página en sus diferentes estados: normal, sobre, activado y visitado. Para ello:

Pulsamos en el menú Modificar > Propiedades de la página. y elegimos la categoría Vínculos:

Podemos determinar una fuente y un tamaño para los vínculos, diferente al resto del texto de la página.
También un color determinado para los diferentes estados de los enlaces.

1.	Estado inicial.
2.	El ratón está encima.
3.	Ya se ha visitado
4.	Se está visitando.

Por último, podemos decidir cuándo va a aparecer ese subrayado predeterminado de los enlaces, desde la opción Estilo subrayado.

Por ejemplo, elijo que los vínculos aparezcan en Verdana y negrita, a un buen tamaño en píxeles (14).
En su estado normal aparecerán azules, cuando este por encima será más luminoso y desaparecerá el subrayado. Y gris una vez que ya lo hayan visitado.

Este es un ejemplo de cómo sería su aspecto: vínculo de ejemplo
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 las características indicados en este cuadro.

Recuerda:
Para que esta opción de Propiedades de la pagina... sea visible debemos de estar trabajando con la opción predeterminada de DW 2004 de trabajar con Estilos CSS.

Recuerda: Edición>Preferencias... En la categoría General activamos la opción "Utilizar CSS en lugar de etiquetas HTML" .

Estas opciones se traducen en Estilos CSS específicos (a:link, a:visited, a:hover, a:active), por lo que se encuentran en la cabecera del código de la 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:

Vamos al menú Comandos > Establecer combinación de colores...
Seleccionamos una de las combinaciones y aceptamos.
En definitiva, estas combinaciones solo tienen como finalidad ahorrar tiempo... y también imaginación¡

Esta aplicación NO utiliza Estilos CSS, sino que inserta atributos de color a la etiqueta <body> para el fondo, el texto y cada uno de los estados de los vínculos, por ejemplo:

Para que no haya contradicciones es aconsejable que si utilizamos esta opción de Establecer combinación de colores... NO apliquemos Propiedades de página a los Vínculos.

Inscríbete ahora y accede a 3 unidades gratis

Volver al curso de Dreamweaver MX 2.- Destino >

Si desea obtener un acceso sin restricciones a los contenidos del curso de Dreamweaver MX y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.