Este documento explica los diferentes tipos de hiperenlaces, incluyendo referencias absolutas, relativas al documento y al sitio, marcadores y enlaces de correo electrónico. Describe cómo crear hiperenlaces a través del inspector de propiedades y cómo formatar los enlaces utilizando CSS.

1. HIPERENLACES (I)

2. 5.1. Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un
enlace, que al ser pulsado lleva de una página o archivo a
otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a
parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos será
crear una etiqueta <a></a> que es la que en HTML se
encarga de definir los enlaces. Esto podrás observarlo en la
barra de estado:

3. 5.2. Tipos de referencia
•Existen diferentes clases de rutas de  Referencia absoluta:
acceso a la hora de definir los vínculos. Conduce al sitio en el que se encuentra el
Estas referencias no se limitan a los documento utilizando la ruta completa del
enlaces, se comportarán igual cuando archivo, incluyendo el protocolo http:/
indiquemos la ubicación de una imagen,
de un archivo Flash, de la hoja de estilo,
etc.  La referencia absoluta es independiente de
la ubicación de la página que contiene el
enlace, y será válida siempre que no
cambie la ubicación del archivo enlazado.
Es la opción obligatoria si pretendemos
enlazar a archivos fuera de nuestro sitio
(enlaces externos).

4. 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. Por ejemplo, pagina2.htm.
 Si queremos enlazar con una página o archivo
dentro de la misma carpeta, no tenemos más que
utilizar su nombre. Si está en una subcarpeta de la página actual, no
tenemos más que indicar el nombre de la carpeta
Por ejemplo antes del archivo, y separarlos por una barra (/).
imágenes/miimagen.gif.
Por ejemplo, imagina que estamos en la siguiente dirección
http://www.misitio.com/pagina/informacion/index.html.
Si queremos referirnos a carpetas que En esta página queremos mostrar una imagen que se
están por encima del nivel donde nos encuentra en la carpeta
encontramos deberemos utilizar ../ http://www.misitio.com/pagina/secciones/seccion1.html
¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

5.  El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.
 De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y
luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
 Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si
alteramos la estructura de carpetas.
 Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar
archivos dentro del sitio.

6. Hiperenlaces (II)
 Referencia relativa
al sitio:
En el ejemplo anterior si tuviésemos definido como
Conduce a un documento situado dentro del mismo sitio la carpeta http://www.misitio.com/, un
sitio que el documento actual. Tomando como enlace en cualquier página del sitio a
origen la carpeta raíz del sitio. http://www.misitio.com/pagina/secciones/seccion1
.html se crearía como
Para indicar la ruta relativa al sitio, precedemos la /pagina/secciones/seccion1.html.
ruta de enlace por la barra /.
• Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría independientemente de
su ubicación.
• Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor de pruebas como
veremos más adelante, ya que Windows interpretará como raíz la raíz del disco duro.

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 por ejemplo #apartado2
continuación de la ruta del archivo (relativa o
absoluta) separados por una almohadilla (#). Podemos definir el punto dentro de un documento a
El formato sería través del menú Insertar, opción Anclaje con nombre.
nombre_de_documento.extension#nombre_de_ O podemos utilizar el atributo ID de cualquier
punto. elemento (se puede establecer desde el Inspector de
Si el punto de fijación está en la propia página, Propiedades HTML). En cualquier caso, los nombres no
basta con indicar únicamente el punto en el deben de estar repetidos en la página.
enlace,
Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los
nombres de los archivos y carpetas en el servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.
También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas
a la hora de referenciar tus objetos.

8. Hiperenlaces (III)
5.3. Crear enlaces
Por ejemplo, en la siguiente imagen hay
La forma más sencilla de crear un enlace es a través del
un enlace a www.aulaclic.es, que al ser
inspector de propiedades. Para ello es necesario
un archivo externo es de referencia
seleccionar el texto o el objeto que va a servir de enlace,
absoluta, por eso contiene http://
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 #. Veremos su utilidad más
adelante.
Otra forma de crear un enlace es a través del menú
Insertar, opción Hipervínculo.

9. 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.
 Texto: es el texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá ahí.
 Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás
escribirla empezando 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. Si quieres que los enlaces sean relativos al sitio visita este avanzado .
 Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente apartado.
 Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el
cursor sobre el enlace.
 Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace
mediante la pulsación de la tecla Alt más la tecla de acceso indicada.
 Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando
la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y
así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Por defecto, se
tabularán por orden de aparición.

10. Hiperenlaces (IV)
5.4. Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede
variar dependiendo de 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.
_blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en
el conjunto de marcos padre. Tiene sentido si se emplean marcos.
_self: Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el
documento vinculado en el mismo marco o ventana que el vínculo.

11. _top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se
emplean marcos. No te preocupes si no te queda del todo claro para qué sirve cada una de
estas opciones de destino, ya que se volverán a ver en el tema de Marcos.
Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos nada
para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas.
Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los enlaces
externos en ventanas nuevas. Otra tendencia dice que una página nunca debería de
abrir nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere
abrir en ventanas nuevas. En la mayoría de navegadores, para abrir un enlace un una
ventana nueva, basta con hacer clic con la ruedecilla del ratón.

12. Hiperenlaces (V)
5.5. Formato del enlace
Aquí tienes dos vínculos de ejemplo:
www.aulaclic.es www.elpais.es

13. 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.
Aunque recuerda que en 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.

14. Aquí tenemos dos vínculos en una En Tipo de selector, elegimos Compuesto, y en Nombre de
imagen: selector escribimos a Img., es decir, imágenes que estén
dentro de una etiqueta a (de enlace).
Se abrirá la ventana Definición de regla para a img:
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 En ella, seleccionamos la categoría Borde, y en Style seleccionamos
seleccionamos Nueva regla CSS en Regla de none. Pulsamos Aceptar.
destino, y pulsamos Editar regla. 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.
• Para practicar puedes realizar el Ejercicio paso a paso Crear un
hiperenlace.

15. Hiperenlaces (VI)
5.6. 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.

16. 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.
 Para practicar puedes realizar el Ejercicio paso a paso Crear vínculo de correo
electrónico.

17. Integrantes :
 Vera Núñez Francisco Daniel
 Reza Cuevas Dalia Angélica
 Palacios Ortega Jonathan
 Salazar Karla