Este documento explica los diferentes tipos de hipervínculos o enlaces que se pueden crear en HTML, incluyendo enlaces absolutos, relativos al documento y al sitio, marcadores y enlaces a correos electrónicos. También describe cómo crear y formato de los enlaces a través del inspector de propiedades y menús de inserción en HTML.

1. HIPERENLACES
NOMBRE DE LOS INTEGRANTES :
COTERO MARQUEzCARINA ALEJANDRA.
MEDINA HERNANDEZ THANIA BERENICE.
GONZALEZ GARCIA NANCY.
GONZALEZ CARDENAS CRISTIAN
EDUARDO.

2. 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. Al crear un enlace
lo que realmente haremos será crear una etiqueta
<a></a> que es la que en HTML se encarga de definir
los enlaces.

3. Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. estas se
comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de
la hoja de estilo, etc.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta
completa del archivo, incluyendo el protocolo http://.
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).
Referencia relativa al documento (por defecto):
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.
Si está en una subcarpeta de la página actual, no tenemos más que indicar el
nombre de la carpeta antes del archivo, y separarlos por una barra (/).
Si queremos referirnos a carpetas que están por encima del nivel donde nos
encontramos deberemos utilizar ../
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.

4. 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 /.
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.
 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 (#).
 Podemos definir el punto dentro de un documento a través del menú Insertar, opción Anclaje con nombre.
O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde el Inspector de
Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos en la página.

 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.

5. 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.
Otra forma de crear un enlace es a través del
menú Insertar, opción Hipervínculo

6. 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://.
Destino: ventana donde se abrirá la página.

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

8. 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.
 _top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se
emplean 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
En la mayoría de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la
ruedecilla del ratón.

9. FORMATO DEL ENLACE
 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).
 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.

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

11.  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).
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.

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

13.  Lo que hace esta opción es abrir el cliente de correo predeterminado
del usuario (Outlook, Firebird...).
 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 para evitar que sea reconocida
por robots que la emplearán para el envío de correo no deseado.