HiperEnlaces - Curso Rapido Dreamweaver

Popular

Curso Rapido Dreamweaver

Curso Rapido de Dreamweaver

Bienvenidos!

domingo, 19 de abril de 2020

HiperEnlaces


Vamos a ver quĆ© son los hiperenlaces, para quĆ© sirven y cómo crearlos, ya que son un elemento esencial para cualquier pĆ”gina web.

    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:



    Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, 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://.

Por ejemplo, http://www.cursorapidodreamweaver.blogspot.com, o http://www.misitio.com/seccion2/pagina1.html.

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):

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.

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 (/). Por ejemplo imagenes/miimagen.gif.

Si queremos referirnos a carpetas que estĆ”n por encima del nivel donde nos encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta pĆ”gina queremos mostrar una imagen que se encuentra en la carpeta 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.

El resultado de la ruta serĆ­a el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, 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 puede 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.

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

En el ejemplo anterior si tuviĆ©semos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier pĆ”gina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearĆ­a como /pagina/secciones/seccion1.html.

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 (#).

El formato serĆ­a nombre_de_documento.extension#nombre_de_punto.

Si el punto de fijación estĆ” en la propia pĆ”gina, basta con indicar Ćŗnicamente el punto en el enlace, por ejemplo #apartado2

Podemos definir el punto dentro de un documento estableciendo el atributo ID de cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML) y despuĆ©s crear el vĆ­nculo con el formato ya indicado. De cualquier modo, los nombres utilizados en el atributo ID son Ćŗnicos y no deben repetirse 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.

    Crear enlaces


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.

Por ejemplo, en la siguiente imagen hay un enlace a www.cursorapidodreamweaver.blogspot.com, que al ser un archivo externo es de referencia absoluta, por eso contiene http://


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.



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. 
  • 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.
  • Clave 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 fichas: 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.

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.

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

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

AquĆ­ tienes dos vĆ­nculos de ejemplo:

www.google.com www.w3schools.com

Si has visitado alguno, verƔs que sale en un tono morado, si no, sale en azul.

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

Aunque recuerda que en las propiedades del documento tenĆ­amos la categorĆ­a VĆ­nculos CSS que nos permite establecer estos valores.

 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.




Lo que hace esta opción depende del navegador que estemos utilizando, teóricamente, el navegador debería abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Pero en la prÔctica cada navegador se comporta de una forma distinta, sobre todo si no tenemos instalado un cliente de correo electrónco y vemos el correo con webmail (Gmail, Hotmail, ...)

Por lo tanto usar mailto es una opción que puede no ser prĆ”ctica si el usuario no tiene instalado un cliente de correo (Outlook, Firebird...), tampoco si se conecta en un ordenador pĆŗblico, o si utiliza un telĆ©fono móvil o una tableta.

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@sitio.com) para evitar que sea reconocida por robots que la emplearĆ”n para el envĆ­o de correo no deseado.

En ocasiones es posible que existan en nuestro sitio lo que se conoce como VĆ­nculos rotos

No hay comentarios:

Publicar un comentario