• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Crear enlaces

Log in or subscribe for free to enjoy all this course has to offer!

En el capítulo anterior habéis aprendido cómo crear una página HTML sencilla. Vale, en realidad no era para tanto, pero era una página HTML real a pesar de todo.

Como sabréis un sitio web está formado por varias páginas. ¿Cómo vais de una página a otra? ¡Usando enlaces por supuesto! Entonces, la forma en la que se crean los enlaces entre las páginas es lo que vais a aprender en este capítulo.

Supongo que todos sabéis lo que es un enlace: es un texto en el que hacéis clic para ir a otra página.
Podéis crear un enlace para ir de la página a.html a la página b.html, pero también podéis crear un enlace a otro sitio web, por ejemplo http://www.google.com. Veremos que ambos casos funcionan de la misma forma.

Un enlace a otro sitio web

Estos enlaces se reconocen fácilmente en una página: están escritos de una forma diferente (de forma predeterminada en azul y subrayados) y un cursor que se parece a una mano aparece cuando se pone el ratón sobre ellos.

Os sugiero que intentéis codificar un enlace que os lleve a Google como se muestra en la figura siguiente.

Enlace a Google
Enlace a Google

Para insertar un enlace, la etiqueta que vamos a usar es muy fácil de recordar: <a>. Sin embargo, necesita un atributo, href, que indica la página a la que debería llevar el enlace.

Por ejemplo el código que está a continuación lleva a Google, localizado en la dirección http://www.google.com:

<a href="http://www.google.com">Google</a>

Vamos a incluir este enlace en un párrafo. Entonces, así es cómo reproducís el ejemplo en la figura siguiente:

<p>Hola. ¿Queréis visitar el sitio web <a href="http://www.google.com">Google</a>?<br />
¡Es un buen sitio web! ;-)</p>

Si queréis crear un enlace a otra página podéis simplemente copiar y pegar su dirección (llamada URL) en http://. Tomad en cuenta que algunas veces algunos enlaces empiezan con https:// (sitios web seguros) u otros prefijos ( ftp://, etc.).

Los enlace que hemos visto se denominan enlaces absolutos debido a que muestran la dirección completa. Ahora vamos a ver que podemos escribir los enlaces de algún modo diferente, lo que será útil para crear enlaces entre las páginas de nuestro sitio web.

Un enlace a otra página de vuestro sitio web

Acabamos de aprender la forma de crear enlaces a sitios web que existen. Pero estoy seguro de que os gustaría crear enlaces entre las páginas de vuestro sitio web, ¿verdad?

Sí, ¿qué tengo que hacer exactamente para crear un enlace a otra página de mi sitio web? ¡No sé su dirección http://…… ya que acabo de empezar a crear mi sitio web aquí! No tengo una dirección.

De hecho, de momento habéis creado vuestro sitio web en vuestro ordenador. Sois los únicos que podéis verlo y aún no tiene una «dirección web» que empiece con http:// como la mayoría de los sitios web. Afortunadamente esto no impedirá que trabajemos.

Dos páginas ubicadas en la misma carpeta

Para empezar vamos a crear dos archivos que correspondan a dos páginas HTML diferentes. Como estoy inspirado os propongo que los llamemos pagina1.html y pagina2.html. Por tanto, tendremos estos dos archivos en nuestro disco duro en la misma carpeta(ver figura a continuación).

Varios archivos HTML en la misma carpeta
Varios archivos HTML en la misma carpeta

¿Cómo hacéis un enlace de la página 1 a la página 2 sin que tengáis una dirección en http://? De hecho, si ambos enlaces están ubicados en la misma carpeta es fácil, simplemente escribid el nombre del archivo al que queráis moveos como el enlace de destino. Por ejemplo: <a href="pagina2.html">. Esto se denomina enlace relativo.

Aquí tenemos el código que vamos a usar en nuestros archivos página1.html y página2.html.

página1.html
<p>Hola. ¿Queréis ver la <a href="pagina2.html">página2</a> ?</p>
página2.html

La página 2 (página de llegada) simplemente mostrará un mensaje que indicará que efectivamente habéis llegado a la página 2:

<h1>¡Bienvenidos a la página 2 !</h1>

Dos páginas ubicadas en carpetas diferentes

Las cosas se ponen un poco más difíciles si las páginas se encuentran en carpetas diferentes. Lo ideal sería que no estuvieran muy lejos las unas de las otras (por ejemplo en una subcarpeta).

Vamos a imaginar que la pagina2.htmlse encuentra en una subcarpeta denominada contenido como en la figura siguiente.

El archivo página2.html se encuentra en la carpeta contenido
El archivo página2.html se encuentra en la carpeta contenido

En este caso el enlace debería estar escrito de esta forma:

<a href="contenido/pagina2.html">

Si hay varias carpetas deberíais escribir esto:

<a href="contenido/otracarpeta/pagina2.html">

¿Y qué ocurre si el archivo no está ubicado en una subcarpeta sino en una carpeta raíz? ¿Qué hacemos entonces?

Si tu archivo de destino se encuentra en una carpeta ubicada "más arriba" en la estructura de árbol, tienes que escribir dos puntos como estos:

<a href="../pagina2.html">

Resumen gráfico

Los enlaces relativos no son muy difíciles de utilizar una vez que hayas entendido el procedimiento. Para saber cómo escribir tu enlace, solo tienes que mirar el "nivel de carpeta" en el que se encuentra el archivo de destino. La siguiente imagen resume los diferentes enlaces relativos posibles.

Enlaces relativos
Enlaces relativos

Un enlace a un hipervínculo

Un hipervínculo es una especie de punto de referencia que puedes incluir en tus páginas HTML cuando son muy largas.
De hecho, pueden ser útiles para crear un enlace a un punto situado más abajo en la misma página para permitir a los visitantes saltar directamente a la parte que les interesa.

Para crear un hipervínculo nuevo, Puede ser cualquier etiqueta, por ejemplo un título.
Para dar un nombre al hipervínculo, se utiliza el atributo id. Entonces podremos usarlo para crear un enlace a este hipervínculo. Por ejemplo:

<h2 id="my_anchor">Título</h2>

Ahora solo tienes que crear un enlace como siempre, pero esta vez el atributo href incluirá una almohadilla (#) seguida del nombre del enlace. Ejemplo:

<a href="#my_anchor">Ir al hipervínculo</a>

Normalmente, si haces clic en el enlace, te llevará a un punto más abajo de la misma página (siempre que la página contenga texto suficiente para que las barras de desplazamiento se muevan automáticamente).
Este es un ejemplo de página con mucho texto que utiliza hipervínculos (he utilizado texto antiguo para rellenar la página):

<h1>>Mi gran página</h1>

<p>
Ir directamente a la parte que trata sobre:<br />
<a href="#cocina">La cocina</a><br />
<a href="#rodillos">Rodillos</a><br />
<a href="#tiro con arco">Tiro con arco</a><br />
</p>
<h2 id="cocina">La cocina</h2>

<p>... (mucho texto) ...</p>

<h2 id="rodillos">Rodillos</h2>

<p>... (mucho texto) ...</p>

<h2 id="tiro con arco">Tiro con arco</h2>

<p>... (mucho texto) ...</p>

Si no ocurre nada cuando hagamos clic sobre los enlaces, esto significa que no hay suficiente texto. En este caso, puedes optar por añadir texto antiguo a la página para que tenga (incluso) más texto, o bien reducir el tamaño de la ventana del navegador para que aparezcan las barras de desplazamiento en el lateral.

Enlace a un hipervínculo situado en otra página

Ok, estáis avisados. ¡Esto va a ser un auténtico megamix!

La idea es crear un enlace que abra otra página Y que te lleve directamente a un hipervínculo situado más abajo de esta página.
En la práctica es muy fácil hacerlo: escribe el nombre de la página, seguido por una almohadilla ( #), seguido del nombre del hipervínculo.

Por ejemplo: <a href="anchors.html#rodillos">

... te llevará a la página anchors.html, directamente al hipervínculo llamado rodillos.

Esta página contiene tres enlaces, cada uno de los cuales lleva a uno de los hipervínculos de la página del ejemplo anterior:

<h1>Megamix</h1>
<p>
Referencia a otro lugar de la misma página:<br />
<a href="anchors.html#kitchen">La cocina</a><br />
<a href="anchors.html#rollers">Rodillos</a><br />
<a href="anchors.html#arc">Tiro con arco</a><br />
</p>

Ejemplos prácticos del uso de enlaces

Ahora voy a intentar mostraros varios ejemplos prácticos del uso de enlaces. Por ejemplo, ¿sabías que es muy fácil crear enlaces que inician una descarga? ¿Que crean un nuevo correo electrónico? ¿Que abren una ventana nueva?

¿No? Bueno, pues vamos a ver todo esto.

Un enlace que muestra una descripción emergente

Puedes utilizar el atributo title que muestra una descripción emergente cuando coloques el curso sobre el enlace. Este atributo es opcional

Debes obtener un resultado similar al de la imagen siguiente.

Una descripción emergente
Una descripción emergente

La descripción emergente puede ser útil para proporcionar información a los visitantes incluso antes de que hayan hecho clic sobre el enlace.
Aquí tenemos la forma de reproducir este resultado:

<p>Hola. ¿Queréis visitar <a href="http://www.google.com" title="Dicen que es un motor de búsqueda">Google</a> ?</p>

Un enlace que abre una ventana nueva

Un enlace se puede "obligar" a abrir una nueva ventana. Para hacer esto, se añade target="_blank" a la etiqueta <a>.

<p>Hola. ¿Queréis visitar <a href="http://www.google.com" target="_blank">Google</a> ?<br />
Este sitio web se mostrará en otra ventana.</p>

Un enlace para enviar un correo electrónico

Si quieres que tus visitantes puedan enviarte un correo electrónico, puedes usar enlaces del tipo mailto. A nivel de etiqueta no cambia nada. Solo cambias el valor del atributo href así:

<p><a href="mailto:nombre@email.com">¡Envíame un correo electrónico!</a></p>

Así que solo tienes que empezar el enlace con mailto: e introducir la dirección de correo electrónico a la que quieres que te escriban. Si haces clic en el enlace, se abre un nuevo mensaje en blanco, listo para ser enviado a tu dirección de correo electrónico.

Un enlace para descargar un archivo

Muchos de vosotros os estaréis preguntando cómo funciona esto para descargar un archivo... En realidad, el procedimiento es exactamente el mismo que para enlazar a una página web, pero esta vez tenemos que indicar el nombre del archivo que queremos que se descargue.

Por ejemplo, imaginad que queréis descargar myfile.zip. Solo tenéis que colocar este archivo en la misma carpeta que vuestra página web (o en una subcarpeta) y crear un enlace a este archivo:

<p><a href="myfile.zip">Descargar el archivo</a></p>

¡Eso es todo! Cuando el navegador vea que no hay ninguna página web que mostrar, comenzará el proceso de descarga cuando el usuario haga clic sobre el enlace.

En resumen

  • Los enlaces sirven para moverse de una página a otra y por defecto son texto subrayado de color azul.

  • Para introducir un enlace, utiliza la etiqueta <a> con el atributo href para indicar la dirección de la página de destino. Ejemplo: <a href="http://www.google.com">.

  • Puedes crear un enlace a otra página de tu sitio web con tan solo escribir el nombre del archivo: <a href="pagina2.html">.

  • Los enlaces también se pueden usar para saltar a otras secciones de la misma página. Tienes que crear un hipervínculo con el atributo id para "marcar" una sección de la página y después crear un enlace al hipervínculo como este: <a href="#anchor">.

Example of certificate of achievement
Example of certificate of achievement