Neuralpin Logo

Enlaces HTML

Los enlaces son la mayor funcionalidad de la web

Los enlaces son quizás la funcionalidad más interesante de la web, ya que permiten navegar entre el contenido, saltando de una sección a otra del sitio.

Para introducir enlaces en nuestro contenido empleamos las etiquetas <a> y </a> encerrando el contenido que deseamos convertir en enlace, que puede ser una palabra, una frase o una imagen, y para especificar a donde ira el usuario una vez que haya hecho clic sobre nuestro enlace se emplea el atributo href.

Sintaxis básica para enlaces:

<a href="destino del enlace">Texto del enlace</a>

Enlazando recursos locales

Cuando necesitamos enlazar contenido que se encuentra en el mismo directorio que nuestra página web, basta con poner el nombre del archivo como destino del enlace.

Por ejemplo vamos a crear dos archivos HTML que se enlazaran entre sí, estos archivos tendrán los nombres pagina-uno.html y pagina-dos.html y el siguiente contenido:

pagina-uno.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Página Uno</title>
</head>
<body>
    <h1>Página Uno </h1>
    <p>Clic en el siguiente enlace para ir a la página siguiente.</p>
    <p><a href="pagina-dos.html">Página dos</a></p>
</body>
</html>

pagina-dos.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Página Dos</title>
</head>
<body>
    <h1>Página Dos</h1>
    <p>Clic en el siguiente enlace para ir a la página principal.</p>
    <p><a href="pagina-uno.html">Página uno</a></p>
</body>
</html>

Para que el ejemplo funcione ambos archivos deben estar en el mismo directorio.

Archivos dentro de otros directorios

Si deseamos apuntar a archivos locales dentro del mismo servidor pero en otros directorios tenemos que indicar la ruta desde nuestra página web hacia el archivo al que deseamos enlazar.

Supongamos que tenemos la siguiente estructura de archivos y directorios:

/proyecto
    index.html
    /categoria
        pagina-uno.html
        /subcategoria
            otra-pagina.html

Para crear un enlace desde la página index.html al archivo pagina-uno.html y otro enlace al archivo otra-pagina.html debemos construir cada ruta indicando el nombre del directorio donde se encuentran los archivos, de manera que nuestros enlaces quedara de la siguiente forma:

Enlaces dentro de index.html

<a href="categoria/pagina-uno.html">Ir al archivo /categoria/pagina-uno.html</a>
<a href="categoria/subcategoria/otra-pagina.html">Ir al archivo /categoria/subcategoria/otra-pagina.html</a>

Para poder enlazar un archivo en un directorio superior debemos construir la ruta al archivo usando ../ por cada directorio superior seguido del nombre del archivo.

Para crear un enlace en el archivo pagina-uno.html hacia el archivo index.html este debe quedar de la siguiente forma:

Enlace dentro de pagina-uno.html

<a href="../index.html">Regresar al archivo index.html</a>

Y para crear un enlace desde el archivo otro-tema.html hacia el archivo index.html este debe quedar de la siguiente forma:

Enlace dentro de otro-tema.html

<a href="../../index.html">Regresar al archivo index.html</a>
Nota: Los enlaces no necesariamente tienen que apuntar a archivos HTML, también pueden apuntar a documentos como pdf, doc o txt y archivos como imágenes, videos o audio.

Ulises Rendón

Desarrollador de Software

Es un programador apasionado por la ciencia y la tecnología, vive en la ciudad de México y fundó Neuralpin con el objetivo de divulgar conocimiento sobre tecnología y desarrollo.