|
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.
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:
| 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.
|
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
|
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.
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. |
- 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.
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.
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:
- Pulsamos en el menú Modificar > Propiedades de la página.
- Seleccionamos un color para cada una de las opciones: Vínculos,
Vínculos visitados y Vínculos activos.
- 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:
- Vamos al menú Comados > Establecer combinación
de colores...
- Seleccionamos una de las combinaciones y aceptamos.
- En definitiva, estas combinaciones solo tienen como finalidad ahorrar tiempo.
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.
|
