Hipervínculos o enlaces

Transcripción

1 1. INTRODUCCIŁN E n la mayoría de los casos, es conveniente repartir la información en varias páginas en lugar de incluir demasiado contenido en una única página. Por ello, cuando nuestro proyecto incluye numerosas páginas web, es muy importante que permitamos alguna forma de navegar o moverse entre ellas. El elemento fundamental en este caso es el hipervínculo o enlace. Al insertar hipervínculos en las páginas, estarás permitiendo que los usuarios se desplacen de un lugar a otro. Se puede decir que la presencia de hipervínculos es la diferencia fundamental entre un documento de texto normal y un documento web y es uno de los principales motivos del éxito de la Web. Cuando lees un texto escrito, lo haces de forma secuencial, leyendo un párrafo tras otro. Sin embargo, la visita a una página web puede implicar la visita a distintos lugares, navegando de un lugar a otro, avanzando, retrocediendo, etc. Es importantísimo evitar páginas web donde no se incluya ningún hipervínculo. Por lo menos deben existir hipervínculos para acceder a la página principal o anterior en la estructura del sitio web. No es excusa el hecho de que el navegador incluya un botón Atrás o Adelante. Al navegar por la World Wide Web, es fácil olvidar qué lugares se han visitado. Por ello, el navegador indicará con un determinado color qué hipervínculo ha sido utilizado y cuál no. Estos colores pueden ser cambiados entre las opciones del navegador, pero, en mayor medida, a través de las hojas de estilo en cascada (CSS). Al hacerlo así, el diseñador de la página web consigue el aspecto que desea tener para los hipervínculos. Con esta lección completamos el estudio de los elementos básicos de las páginas web: texto, imágenes e hipervínculos. 2. V NCULOS A OTRAS P GINAS WEB L a forma de insertar hipervínculos es la misma indepen dientemente de adónde accede el usuario al usarlos: Copyright Computer Aided Elearning, S.A. 1

2 Otra parte de la misma página web, otras páginas del mismo sitio web o incluso cualquier página que se encuentre en la World Wide Web. Para crear hipervínculos, utilizaremos la etiqueta <a>. Esta etiqueta engloba el elemento que queremos que actúe como hipervínculo, por ejemplo, un determinado texto: En la barra de estado del navegador, que se encuentra en la parte inferior de la ventana, puedes ver la dirección a la que apunta un hipervínculo. <a href="index.html"> Quiénes somos?</a> Aquí vemos cómo se utiliza la etiqueta <a>. Es muy sencilla, ya que con un par de atributos suele ser suficiente. Así pues, con el atributo href estamos indicando la ubicación a la que apunta el hipervínculo. O lo que es lo mismo, a qué ubicación accederá el usuario cuando haga clic en el hipervínculo. Entre la etiqueta de apertura <a> y de cierre </a> se incluye el elemento que hará de hipervínculo. En este caso es el texto " Quiénes somos?" Lo más importante es indicar correctamente la ubicación a la que apunta el hipervínculo. Esto se consigue mediante la inclusión de una URL correcta como valor de href. Como ya sabemos, esa URL puede ser relativa (como la que se ha utilizado) o absoluta. En este caso estamos indicando que queremos acceder a la página index.html, que estará en la misma carpeta que la página actual (de hecho es la misma página). De ahí que se trate de una URL relativa. Si quisiéramos incluirla como absoluta, ya sabemos que deberemos especificar tanto el protocolo a utilizar como el camino completo a la página. Por ejemplo, podríamos especificarlo como: file://ordenador/c:/users/administrador1/documents/hipervi nculos/index.html En este caso el protocolo es file, ya que se trata de un archivo situado en un ordenador, y el resto indica el camino para acceder al recurso o página web. En la figura de la página siguiente podemos ver la presencia de tres hipervínculos que dan acceso a cada una de las páginas del sitio web. El texto utilizado en cada uno de ellos es Quienes somos?, Servicios y Contacto, respectivamente. 2 SE PERMITE EL USO DE ESTE MANUAL ÚNICAMENTE A LOS ALUMNOS DE ESTE CURSO

3 El aspecto de los hipervínculos puede variar mucho, ya que su formato se puede ajustar mediante CSS, pero normalmente aparecerán subrayados. En cualquier caso, lo que nos permite descubrir que se trata de un hipervínculo es comprobar que el puntero del ratón se convierte en una "pequeña mano" al pasar por encima de él. Al utilizar un hipervínculo, su aspecto cambiará (por ejemplo, su color) para indicar que ya ha sido visitado. Finalmente, indicar que la etiqueta <a> representa un "elemento en línea", por lo que no inicia una nueva línea. 3. V NCULOS A UNA PARTE DE UNA P GINA WEB A demás de hacer referencia a otra página, también es posible insertar un hipervínculo que apunte a una posición distinta de la misma página o de otra en concreto. Por ejemplo, podríamos tener un listado de los servicios que proporciona una empresa en la parte superior de una página y esos mismos servicios, pero detallados, en la parte inferior. En este caso, sería interesante que el listado de la parte superior incluyera hipervínculos para acceder a la información detallada de la parte inferior de la página. Copyright Computer Aided Elearning, S.A. 3

4 Para ello, debemos realizar dos tareas: 1. Crear el marcador o destino del hipervínculo. 2. Crear el hipervínculo en sí, como ya hemos visto, indicando correctamente la URL de destino, que ahora incluirá dicho marcador. Para crear el marcador, utilizaremos también la etiqueta <a>, pero sin indicar el atributo href, ya que no actuará como un hipervínculo normal, sino como un marcador: También es posible utilizar el atributo name en lugar de id, pero es mejor utilizar id. <a id="e-admin">adaptación a la administración electrónica</a> Aquí lo importante es el atributo id. En lugar de href, que se utiliza en el hipervínculo, utilizamos id con el que estamos dando un nombre a esta parte de la página para poder hacer referencia a la misma en algún otro sitio. Por ejemplo, en un hipervínculo. Lo único que hay que recordar es que el nombre o identificador que incluimos como valor del atributo id tiene que ser único en toda la página. Es decir, que no podemos repetirlo. Una vez creado el marcador, se puede utilizar en el hipervínculo: <a href="#e-admin">administración electrónica</a> Es decir, en lugar de indicar el nombre de un determinado archivo, lo hacemos con el nombre del marcador previamente creado, pero antecediéndolo el carácter # (almohadilla). Lo importante es que el nombre indicado aquí coincida con el nombre o identificador establecido mediante el atributo id. 4 SE PERMITE EL USO DE ESTE MANUAL ÚNICAMENTE A LOS ALUMNOS DE ESTE CURSO

5 En este caso, la URL del hipervínculo simplemente incluye el nombre del marcador, pero, qué pasa si queremos acceder a alguno de estos marcadores desde una página distinta a la actual? La respuesta es sencilla: incluiremos en la URL del hipervínculo tanto la página como ese marcador. Por ejemplo: <a href="servicios.html#e-admin"> Un uso muy habitual de los marcadores lo encontramos en aquellas páginas extensas donde el diseñador proporciona un hipervínculo para volver al principio de la página. Lo que ha hecho es simplemente crear un marcador al principio de la página y utilizarlo en un hipervínculo del final. 4. V NCULOS A LUGARES DE INTERNET H asta ahora hemos accedido siempre a direcciones que estaban en nuestro ordenador. Sin embargo, en un apartado anterior ya vimos cómo era posible acceder a otros ordenadores, indicando la dirección absoluta. Un caso muy utilizado es el de acceder a direcciones que se encuentran en otros ordenadores de Internet. Es exactamente igual que indicar una dirección absoluta, es decir, deberemos especificar el protocolo a utilizar, el ordenador o servidor al que queremos acceder y la ruta del recurso deseado. Vamos a añadir un hipervínculo que permita acceder a la página principal de Microsoft. Esta página, lógicamente, se encuentra en Internet, por lo que es un caso distinto a los que hemos visto: <a href=" Veamos las distintas partes que componen la dirección de Internet: http : representa el protocolo utilizado. Es decir, a qué tipo de recurso situado en Internet deseamos acceder. En este caso, http se refiere a documentos de hipertexto o, lo que es lo mismo, páginas situadas en la World Wide Web. Es el protocolo más utilizado, ya que la mayoría de recursos de Internet son de este tipo. También tenemos https, que es para "sitios seguros". Copyright Computer Aided Elearning, S.A. 5

6 Fíjate que para hacer referencia a una página situada en el propio equipo, se utiliza el protocolo file; mientras que para acceder a una página situada en Internet, utilizamos http. ordenador o servidor al que deseamos acceder. El prefijo "www" forma parte del nombre del servidor, por lo que no tiene nada que ver con el protocolo http. /es/es/default.aspx: ruta necesaria para acceder a la página deseada, que en este caso es default.aspx. Existen otros protocolos aplicables en Internet: file, ftp, telnet, gopher, news, mailto, etc., pero el más utilizado es http. Al pulsar en este hipervínculo accedemos a la página principal de Microsoft. Como puedes ver, la forma de crear un hipervínculo es la misma en todos los casos. Lo único que cambia es el tipo de URL que introducimos a través del atributo href. 5. V NCULOS A DIRECCIONES DE CORREO ELECTRŁNICO E n ocasiones habrás visto hipervínculos en páginas web que realmente no permiten acceder a otra ubicación, sino que sirven para enviar mensajes de correo electrónico. 6 SE PERMITE EL USO DE ESTE MANUAL ÚNICAMENTE A LOS ALUMNOS DE ESTE CURSO

7 Esos hipervínculos son exactamente igual que los que ya hemos visto, pero cambiando la forma de la URL a la que hacen referencia. En este caso, en lugar de utilizar el http o file, utilizaremos mailto. <a href="mailto:info@canovas.com">info@canovas.com</a> Se trata de un hipervínculo cuyo texto coincide con una dirección de correo electrónico, pero el texto no es lo importante, sino la URL utilizada en la definición del hipervínculo. Se utiliza la palabra mailto, dos puntos y la dirección de correo electrónico. Entre las etiquetas de apertura y cierre se incluye el texto del hipervínculo. No es muy buena idea incluir direcciones de correo electrónico en las páginas web, ya que pueden ser recolectadas por programas preparados para rastrear las páginas y después utilizar esas direcciones para enviar "correo basura" o "spam". Hay algunas alternativas al uso de direcciones de correo electrónico: Utilizar imágenes con la dirección en lugar de texto. La imagen actuará como hipervínculo. Encriptar o codificar las direcciones de correo electrónico mediante programas especiales que utilizan JavaScript para que no sean comprensibles. Codificar las direcciones de correo electrónico mediante el uso de entidades. Por ejemplo, en lugar de utilizar la entidad %40. Si no utilizamos una aplicación de correo electrónico (por ejemplo, empleamos correo web en su lugar), el enlace no funcionará, ya que no será capaz de crear un mensaje. Sin embargo, hoy en día lo más común es utilizar un formulario de contacto. El formulario puede ser enviado a una dirección de correo o, lo que es más frecuente, los datos enviados son recogidos en otra página que los trata adecuadamente. Al utilizar un hipervínculo de este tipo, se crea una ventana con un nuevo mensaje en la aplicación de correo electrónico que utiliza el usuario, como puedes ver en la figura de la página siguiente. El mensaje ya incluye la dirección de correo del destinatario, por lo que el usuario simplemente tiene que rellenar el contenido del mensaje y enviarlo. Copyright Computer Aided Elearning, S.A. 7

8 También podrías incluir el asunto del mensaje que se crea al pulsar en el hipervínculo. Para ello, incluye?subject=... detrás de la dirección de correo: Por ejemplo: <a de 6. IM GENES QUE ACTÐAN COMO V NCULOS F inalizamos la lección indicando que las imágenes también pueden actuar como hipervínculos, es decir, podemos hacer que, al pulsar sobre ellas, el navegador salte a otra ubicación. La forma de hacerlo es la misma que con el texto, ya que incluiremos la etiqueta <a> rodeando a la de imagen <img>. Por ejemplo, es una costumbre bastante extendida en la Web que en todas las páginas de un sitio web haya una forma rápida de acceder a la página principal o frontpage del sitio. Una forma a la que está acostumbrado el usuario es pulsar en el logotipo de la empresa o sitio web, que suele aparecer en la parte superior de todas las páginas. 8 SE PERMITE EL USO DE ESTE MANUAL ÚNICAMENTE A LOS ALUMNOS DE ESTE CURSO

9 A continuación puedes ver cómo lo podríamos hacer: <a href="index.html"><img src="images/logo.gif" alt="logotipo" width="180" height="90"></a> Observa que es exactamente lo mismo que con el texto. Lo único que ocurre es que una imagen debe mostrarse utilizando la etiqueta <img>. Es posible que, al hacer que la imagen actúe como un hipervínculo, el navegador muestre la imagen con un determinado borde. Esto puedes verlo en el logotipo de la parte superior de la página en esta figura. Si no deseas que se produzca dicho efecto, puedes utilizar CSS para modificar el estilo e indicar el formato de imagen sin borde. Recuerda que la etiqueta de imagen <img> debe aparecer en el interior de la de hipervínculo <a> para indicar que la imagen actuará como un hipervínculo. Copyright Computer Aided Elearning, S.A. 9

10