Este documento explica los diferentes tipos de enlaces hipertextuales, incluyendo referencias absolutas, relativas al documento y al sitio, marcadores o puntos de fijación, y enlaces a correo electrónico. También describe cómo crear y personalizar enlaces a través del inspector de propiedades y menú insertar en Dreamweaver.

4. Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando
la ruta completa del archivo, incluyendo el protocolo http://. Por
ejemplo, http://www.aulaclic.com, o
http://misitio.com/seccion2/pagina1html

5. Referencia relativa al documento (por defecto):
La ubicación del archivo enlazado se toma en relación con la
ubicación del la página. Es decir, partimos de la carpeta en la que se
encuentra el documento.
Si queremos enlazar con una página o archivo dentro de la misma
carpeta, no tenemos más que utilizar su nombre. Por ejemplo,
pagina2.htm.
Subcarpeta de la pagina inicial (carpeta imágenes)
Nombre del archivo
Juntaremos el nombre de la carpeta mas el nombre del
Archivo ( para acceder al archivo q deseamos ir)

6. Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el
documento actual. Tomando como origen la carpeta raíz del sitio.
Para indicar la ruta relativa al sitio, precedemos la ruta de enlace
por la barra /.
Si tuviésemos definido como sitio la carpeta (1)
http://www.tudiscovery.com/, un enlace en cualquier
Pagina del sitio a (2) http://www.tudiscovery.com/
imágenes/galleries/americana-chopper-y-susmotocicletas/ se crearía como (3)
/ imágenes/galleries/american-chopper-y-susmotocicletas/
(1)
(3)
(2)

7. Marcadores o Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea
dentro del actual o de otro diferente. Para ello, indicamos
el nombre del punto de fijación a continuación de la ruta
del archivo (relativa o absoluta) separados por una
almohadilla (#).
Ejemplo
deciencias.net/disenoweb/elaborardw/pagi
nas/hipervinculos.htm#arriba, en este
ejemplo el punto de fijación es
htm#arriba, con esta terminación no nos
conducirá a otra pagina, si lo queremos así
entonces tendremos que agregar "
nombre_documento#nombre_anclaje"

8. La forma más sencilla de crear un enlace es a través del inspector de
propiedades. Para ello es necesario seleccionar el texto o el objeto que va
a servir de enlace, y seguidamente establecer el Vínculo en el inspector
HTML.
Es posible crear también vínculos vacíos,
que pueden ser útiles cuando se utilizan
comportamientos, etc. Para ello es
necesario escribir en Vínculo únicamente
una almohadilla

9. Otra forma de crear un enlace
es a través del menú Insertar,
opción Hipervínculo.
Crear vínculos de esta forma es muy sencillo, sólo deberás
rellenar los campos que explicaremos a continuación y el
enlace se colocará en el lugar en el que estaba situado el
cursor.

10.  Es la página a la que irá
dirigida el enlace, si se
 Es el texto que mostrará trata de un enlace
el enlace. Si teníamos externo deberás
un texto seleccionado, escribirla empezando
aparecerá ahí. siempre por http://. Haz
clic sobre el icono de
carpeta para buscar los
archivos que existan
dentro del sitio. Por
defecto Dreamweaver te
creará un enlace
relativo al documento.

11.  es la ayuda contextual del
vinculo, que aparecerá al  la ventana donde se abrirá la
mantener el cursor sobre el página, este campo se aplica
enlace. en el siguiente apartado.
 facilita el acceso a las páginas,
 podrás establecer un índice habilitando el acceso al enlace
indicando la prioridad del
enlace y así configurar el pulsando Alt más la tecla de
modo en el que actuara el acceso indicada.
tabulador en sus diferentes
saltos

12. El destino del enlace determina en qué ventana va a ser
abierta la página vinculada, puede variar dependiendo
si el documento está basado en marcos.
Puede especificarse en el inspector de propiedades HTML
a través de destino, o en la ventana que aparece a
través del menú insertar, opción hipervínculo.

13. .

14.  En general, un texto que tiene asociado un vínculo
suele aparecer subrayado. Al mismo tiempo, puede
adquirir cuatro colores diferentes que pueden
especificarse a través de las propiedades de la
página. Estos cuatro colores diferentes
corresponden a los tres estados del vínculo: vínculo
normal, vínculo activo (el último pulsado), vínculo
visitado o vínculo de sustitución (cuando el cursor
está sobre el vínculo).
 Aquí tienes dos vínculos de ejemplo:
 www.aulaclic.es www.elpais.es

15.  como todo en nuestra página, los vínculos tienen
un formato por defecto, pero es totalmente
personalizable por CSS. Para ello, basta con
crear una Regla de estilo para la etiqueta a.
 Si queremos distinguir entre los tres estados
del enlace, emplearemos los siguientes
selectores:
 a:link para los enlaces normales.
 a:visited para los enlaces visitados.
 a:active para los enlaces activos.
a:hover para los enlaces con el cursor encima.

16.  las propiedades del documento teníamos la
categoría Vínculos CSS que nos permite
establecer estos valores.

 Cuando el vínculo está definido sobre una
imagen, en el borde aparecen una serie de
puntitos al pulsar sobre ella. Cuando el vínculo
está definido sobre una zona de una imagen
(un mapa), aparece el contorno de esa zona.
 Aquí tenemos dos vínculos en una imagen:


17.  Como puedes ver, la primera imagen que hace de
vínculo contiene un recuadro alrededor. Este es el
formato por defecto, pero no suele quedar
bien, sobre todo en imágenes con el fondo
transparente.
 Veamos como quitarlo utilizando CSS.
 En el Inspector de propiedades
CSS seleccionamos Nueva regla CSS en Regla de
destino, y pulsamos Editar regla.
 En Tipo de selector, elegimos Compuesto, y
en Nombre de selector escribimos a img, es
decir, imágenes que estén dentro de una
etiqueta a (de enlace).

18. Se abrirá la
ventana Definición de regla
para a img
En ella, seleccionamos la categoría Borde, y
en Style seleccionamos none. Pulsamos Aceptar.
Esta regla hará que las imágenes con enlace se muestren sin borde.
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor
cambia de forma al situarse encima del vínculo. Suele adquirir la
apariencia de una mano señalando.

19. Enlace a correo electrónico
Es posible especificar vínculos a direcciones de correo electrónico.
Esto resulta útil cuando se desea que los visitantes de la web puedan
contactar con nosotros.
La sintaxis del vínculo en este caso es mailto:direccióndecorreo.
Puede definirse el vínculo a través de Vínculo, del inspector de
propiedades, seleccionando previamente el texto o la imagen
deseados.
También es posible a través del menú Insertar, opción Vínculo de
correo electrónico.
En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el
texto que contendrá el vínculo de correo.

20. Enlace a correo electrónico
 Lo que hace esta opción es abrir el cliente de correo
predeterminado del usuario (Outlook, Firebird...). Por lo
que puede no ser práctica si el usuario no lo tiene, se
conecta en un ordenador público, o emplea el correo web
directamente.
 Siempre que se pueda, es mejor crear un formulario de
contacto, aunque esto requerirá una página dinámica
como veremos a lo largo del curso. Otra opción sería
mostrar nuestra dirección de correo, para que el usuario
pueda enviarnos el correo como quiera. Si publicamos
nuestra dirección en la web es mejor hacerlo como una
imagen, o escribiéndola de forma que la pueda entender
un humano (por ejemplo micorreo(arr)sitio.com) para
evitar que sea reconocida por robots que la emplearán
para el envío de correo no deseado.

21. Trabajo hecho por :
 Juan Luis Hernández
 Ivonne Santiago Salas
 María Luisa López Vázquez
 Olga Barriga Arellano
6-f