Introducción

Se introduce el concepto de hipervínculo, fundamental para poder navegar entre páginas web, y
cómo podemos representarlo en el código HTML. Se estudian los distintos tipos de
hipervínculos: vínculos a otras páginas del sitio web, vínculos a páginas externas al sitio web,
vínculos a lugares concretos de una página web o vínculos que apuntan a direcciones de correo
electrónico. Finalmente, se comprueba que las imágenes también pueden funcionar como
hipervínculos. En esta lección se estudian:
Trabajo con vínculos.
Introducción.

1. INTRODUCCIÓN
En 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.
Introduce la dirección es.wikipedia.org y acepta. Haz clic en el hipervínculo Portal de la
comunidad de la barra de la izquierda. Pulsa . Pulsa en el botón Atrás de Firefox.
Pulsa en el hipervínculo Portales temáticos que aparece en la sección Búsquedas y
consultas. Vuelve a la página principal de la Wikipedia pulsando en su logotipo de la esquina
superior izquierda de la página.

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.

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.
Pulsa en el botón que da acceso al menú de Firefox y elige Opciones. Pulsa en la parte
inferior de la barra de desplazamiento vertical. Pulsa en el botón Colores de la sección
Tipografías y colores.
Al navegar por la World Wide Web, es fácil olvidar qué lugares se han visitado. Por ello, el

Copyright © Computer Aided Elearning, S.A.

 Introducción

navegador indicará con un determinado color qué hipervínculo ha sido utilizado y cuál no.

Por ejemplo, en este cuadro de diálogo puedes ver el caso de Firefox. Así pues, podrías cambiar
los colores para los vínculos visitados y no visitados. Sin embargo, estos ajustes son los
predeterminados, ya que podremos cambiar estos colores a través de las hojas de estilo en
cascada.
Cancela este cuadro de diálogo y después cierra la pestaña de opciones.
Con esta lección completamos el estudio de los elementos básicos de las páginas web: texto,
imágenes e hipervínculos.

Copyright © Computer Aided Elearning, S.A.

 Introducción

2. VÍNCULOS A OTRAS PÁGINAS WEB

La forma de insertar hipervínculos es la misma independientemente de adónde accede el usuario
al usarlos: 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.
Pulsa en el botón del menú de Firefox y elige Abrir archivo. Haz doble clic en la carpeta
Hipervínculos. Abre la página index.html.
He creado esta sencilla página web donde incorporaremos hipervínculos. La página no tiene
ningún elemento que no conozcas: he incluido texto e imágenes únicamente, aunque para mejorar
su aspecto, he aplicado una hoja de estilo en cascada.

Pulsa y cargaré esta página en el Bloc de notas para trabajar con su código.

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. Sin preocuparnos
ahora por algunas etiquetas del código de la página que no conocemos, vamos a insertar unos
hipervínculos en la parte superior de la misma para permitir acceder a las distintas páginas del
sitio web.
Haz clic en la línea en blanco que aparece debajo del título de primer nivel <h1>.
Escribe lo siguiente:
<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 deberíamos 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/Hipervinculos/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.

Copyright © Computer Aided Elearning, S.A.

 Introducción

Pulsa y crea dos hipervínculos más:

<a href="servicios.html">Servicios</a>
<a href="contacto.html">Contacto</a>
Guarda los cambios efectuados. Vuelve a Firefox y actualiza la página.
En la parte superior, tras el nombre de la empresa ficticia que estamos utilizando, aparecen tres
hipervínculos. El aspecto de los hipervínculos puede variar mucho, ya que su formato se puede
ajustar mediante CSS (como en esta página), 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.
Compruébalo.
Sitúa el puntero del ratón por encima de los tres hipervínculos. Para continuar, pulsa en el que
da acceso a la página de Servicios.
Fíjate que el aspecto del hipervínculo utilizado es distinto ahora. También es una costumbre que
los hipervínculos visitados tengan un aspecto distinto. De esta forma es fácil averiguar cuáles has
utilizado. Lo importante es fijarse que hemos accedido a una página web distinta, la cual ha sido
indicada a través de la URL relativa del atributo href.

Haz clic ahora en el hipervínculo a la página ¿Quiénes somos?

La etiqueta <a> representa un "elemento en línea", por lo que no inicia una nueva línea, como
has podido comprobar.

Copyright © Computer Aided Elearning, S.A.

 Introducción

3. VÍNCULOS A UNA PARTE DE UNA PÁGINA WEB

Ademá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.
Vuelve a pulsar en el hipervínculo a la página de servicios.
Si pierdes un momento para leer el texto de la página, comprobarás que aquí se está hablando de
los distintos servicios que proporciona nuestra empresa ficticia.

Pulsa .

Bien, pues esos servicios se explican más detalladamente en la parte inferior de la página. Vemos
que podría ser interesante incluir un enlace en la parte superior, donde simplemente se mencionan
los servicios, que apunte a la parte inferior, donde vienen explicados. 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.

Pulsa y cargaré esta página en el Bloc de notas.

Lo que queremos es crear dos marcadores para las líneas que he resaltado. De esa forma, cuando
se pulse en el hipervínculo para obtener detalles acerca del servicio "Adaptación a la
administración electrónica" o "Seguridad informática", se accederá directamente a la sección
adecuada de la página. 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.
Haz clic tras la primera etiqueta <h3>.
Escribe:
<a id="e-admin">
Haz clic antes de la etiqueta de cierre </h3>. Cierra la etiqueta de hipervínculo: </a>
Lo mismo haríamos con el segundo marcador. Lo haré por ti...

Aquí lo importante es el atributo id. En lugar de href, que se utiliza en el hipervínculo, utilizamos
id. Con el atributo id 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 creados los marcadores, vamos a crear los correspondientes hipervínculos.

Copyright © Computer Aided Elearning, S.A.

 Introducción

La idea es que al pulsar en el texto "administración electrónica" de este párrafo, accedamos al

marcador correspondiente, donde se describe el servicio con más detalle.
Bueno, pues simplemente tenemos que añadir un hipervínculo para este texto.
Haz clic delante de la palabra administración.
Escribe la etiqueta de hipervínculo, incluyendo el atributo href.
La duda que tenemos es cómo escribir la URL que apunta al marcador de esta misma página.
Continúa escribiendo:
="#e-admin">
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.
Haz clic detrás de la palabra "electrónica" y cierra la etiqueta de hipervínculo.
Lo mismo haríamos para el segundo hipervínculo, el que apunta a la sección donde se explica el
servicio de seguridad informática.
Lo haré por ti...
Aquí lo vemos. En este caso la única diferencia es el nombre del marcador. Si antes era e-admin,
ahora es seguridad-inf, es decir, los nombres utilizados al crear cada uno de los dos marcadores.
Guarda los cambios efectuados y actualiza la página en Firefox.

Pulsa .

Fíjate que ya aparecen los dos hipervínculos nuevos en el cuerpo de la página.

Haz clic en el hipervínculo "administración electrónica".
De esta forma accedemos a esta sección concreta de la página.

Pulsa en el botón Atrás .

Y ahora utiliza el hipervínculo "seguridad informática".

Copyright © Computer Aided Elearning, S.A.

 Introducción

Lo mismo podemos decir ahora.

De esta forma, en lugar de acceder a una página distinta, lo hemos hecho a una parte concreta de
la misma página.
En este caso, la URL del hipervínculo simplemente incluía 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.

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.

Por ejemplo:
<a href="servicios.html#e-admin">

Copyright © Computer Aided Elearning, S.A.

 Introducción

4. VÍNCULOS A LUGARES DE INTERNET

Hasta 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.
Vuelve al Bloc de notas donde está abierto el archivo servicios.html. Pulsa la combinación de
teclas + para situar el cursor al principio del código. Elige Buscar en el menú
Edición del Bloc de notas. Escribe Microsoft en el campo de búsqueda y pulsa Buscar
siguiente. Cierra el cuadro de diálogo Buscar.
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.
Haz clic delante de la palabra Microsoft.
Escribe lo siguiente:
<a href="https://www.microsoft.com/es-es">
Haz clic tras la palabra Microsoft. Añade la etiqueta de fin de hipervínculo.
Veamos las distintas partes que componen la dirección de Internet:

https: representa el protocolo utilizado. Es decir, a qué tipo de recurso situado en Internet
deseamos acceder.

En este caso, https 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 http, que es la versión sin seguridad.
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 o https.
www.microsoft.com: 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.

Copyright © Computer Aided Elearning, S.A.

 Introducción

/es-es: ruta necesaria para acceder a la página deseada, que en este caso es una página
predeterminada, por lo que no se especifica explícitamente sino que solo se indica la ruta a
seguir.
Existen otros protocolos aplicables en Internet: file, ftp, telnet, gopher, news, mailto, etc., pero el
más utilizado es http.
Guarda los cambios efectuados y vuelve a Firefox.
Actualiza la página.
Pulsa en el hipervínculo a la página de Microsoft.
De esta forma 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.

Copyright © Computer Aided Elearning, S.A.

 Introducción

5. VÍNCULOS A DIRECCIONES DE CORREO ELECTRÓNICO

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

Pulsa en el botón Atrás . Pulsa . Haz clic en el hipervínculo Contacto.

En esta página vemos que aparece un hipervínculo cuyo texto coincide con una dirección de
correo electrónico.

De hecho, 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 escribir @, utilizar la entidad %40.
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.

El texto no es lo importante, sino la URL utilizada en la definición del hipervínculo.

Haz clic con el botón derecho del ratón en dicho hipervínculo y elige Inspeccionar elemento.

El comando Inspeccionar elemento suele aparecer en los navegadores modernos

(aunque puede que con un nombre distinto) y es de gran ayuda para el diseñador.

Esta es otra forma de acceder al código de la página, pero resaltando el elemento sobre el que
hemos utilizado el comando de inspeccionar.

Copyright © Computer Aided Elearning, S.A.

 Introducción

En el código resaltado puedes ver cómo se ha creado el 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.
Cierra la ventana de código.
Pulsa en el hipervínculo.
Como puedes ver, se ha creado una ventana con un nuevo mensaje en la aplicación de correo
electrónico que utilizas.

Copyright © Computer Aided Elearning, S.A.

 Introducción

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 href="mailto:info@canovas.com?subject=Solicitud de
información">info@canovas.com</a>

El mensaje ya incluye la dirección del correo del destinatario, por lo que el usuario simplemente
tiene que rellenar el contenido del mensaje y enviarlo.
Cierra la ventana del mensaje.

Copyright © Computer Aided Elearning, S.A.

 Introducción

6. IMÁGENES QUE ACTÚAN COMO VÍNCULOS

Finalizamos 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.
Vuelve a la ventana del Bloc de notas de la página servicios.html. Pulsa la combinación de
teclas + .

La imagen en cuestión tiene el nombre logo.gif y está incluida dentro de una etiqueta de título de
primer nivel.
Haz clic delante del carácter < de apertura de la etiqueta <img>.
Escribe:
<a href="index.html">

Pulsa la tecla . Haz clic delante del texto Cánovas, en esta misma línea. Cierra la etiqueta
de hipervínculo: </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>. Ahora tendrías que repetir este proceso en todas las
páginas del sitio web para que el logotipo actúe siempre como hipervínculo a la página principal.
Guarda la página y vuelve a Firefox. Pulsa el hipervínculo a la página Servicios. Pulsa en el
logotipo que aparece en la parte superior de la página.
Es posible que, al hacer que la imagen actúe como un hipervínculo, el navegador muestre la
imagen con un determinado borde. 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.
Para crear hipervínculos, se utiliza la etiqueta <a>. Esta etiqueta engloba el elemento que
queremos que actúe como hipervínculo, por ejemplo, un determinado texto.
Con el atributo href de esta etiqueta indicamos la ubicación a la que apunta el hipervínculo.
Puede ser una página web e incluso una dirección de correo electrónico. Por ejemplo:
<a href="index.html">¿Quiénes somos</a>

Copyright © Computer Aided Elearning, S.A.

 Introducción

<a href="mailto:info@canovas.com">info@canovas.com</a>
Se puede crear un marcador utilizando la etiqueta <a>, pero sin indicar el atributo href. Es
importante establecer, en este caso, el atributo id. Por ejemplo:
<a id="e-admin">
Después se puede hacer referencia al identificador del marcador como destino de un
hipervínculo, es decir, en el atributo href. Por ejemplo:
<a href="#e-admin">
(marcador en la misma página).
o
<a href="servicios.html#e-admin">
(marcador en una página distinta).
Para que una imagen actúe como hipervínculo, incluye la etiqueta <a> rodeando a la de la
imagen <img>. Por ejemplo:
<a href="index.html><img src="images/logo.gif" alt="logotipo"></img></a>

Copyright © Computer Aided Elearning, S.A.