Creando enlaces

Los enlaces son el corazón de la Internet. Te ayudan a seguir un flujo de información y detalles de una manera en la que los libros o revistas no pueden.

En una página web, los enlaces son indicados por el marcador <a href=""></a>, que significa ancla. El marcador tiene dos partes y se usa de la siguiente manera:

Para enlazar a otra página de tu mismo sitio

Si deseas enviar a un usuario a otro documento web dentro de tu mismo sitio, usas el marcador y señalas el siguiente archivo. Por ejemplo:

<a href="tupaginadecontacto.htm">escríbeme aquí</a>

A esto se le conoce como un enlace relativo puesto que el archivo de destino está en la misma página. El texto que aparece en el marcador se subrayará en azul, a menos que una hoja de estilo dé al navegador otras instrucciones.

Para enlazar a una página en otro sitio web

Si, en cambio, lo que deseas es enviar al usuario a una página web alojada en otro sitio, usas el marcador para señalar la dirección web completa del documento web que se encuentra en otro sitio. Si, por ejemplo, quisieras enviar a un usuario a esta página, necesitarías hacer lo siguiente:

<a href="//heptagrama.com/como-hacer-un-enlace.htm">Cómo crear un enlace</a>
<a href="//heptagrama.com/">Heptagrama</a>

A este se le conoce como enlace absoluto, puesto que la dirección de destino está escrita totalmente en la instrucción href="" del marcador ancla.

Nota que el primer ejemplo apunta a esta página específica de Heptagrama, mientras que la segunda solo apunta al dominio. Si alguna vez apuntas solo al dominio, puedes opcionalmente incluir una barra (/) más al final, como en el ejemplo. A esta última barra se le conoce como trailing slash en inglés, e indica que estás enviando al usuario a la portada de la otra web.

Para enlazar a otra sección dentro de la misma página web

Para enlazar a otra sección dentro de la misma página web —un subtítulo, por ejemplo— hay dos opciones:

Los usuarios de HTML y XHTML crearán un marcador <a name=""></a> en la sección deseada de la página web. Luego incluirán un enlace hacia este utilizando <a href="#"></a> e incluyendo el nombre de la sección marcada en name="".

Por ejemplo, para saltar desde el inicio de una página hasta la sección "créditos" de la misma, primero se creará un marcador...

<a name="creditos"></a>

...en la parte donde están los créditos, y luego se les enlazará poniendo...

<a href="#creditos">ir a los créditos</a>

Este símbolo # indica al navegador que el enlace está en la misma página web.

Los usuarios de HTML5 no usarán name="" sino id="". La ventaja de usar id="" es que puede usarse en cualquier párrafo o subtítulo deseado, incluso en una imagen. El enlace, así, solo se coloca una vez.

Por ejemplo, para ir a la sección "créditos" de una página web, puede ponerse el id="" en el encabezado...

<h3 id="creditos">Créditos</h3>

...y luego enlazar a este...

<a href="#creditos">ir a los créditos</a>

Es todo. Ahora veamos cómo añadir fotos a nuestra nueva página web.


Aprender + Computadores e Internet + Desarrollo web