informaticaPC

Tutorial de HTML

Hiperenlaces


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Enlaces

Los enlaces o hiperenlaces (también llamados hipervínculos) permiten abrir tanto abrir otra página web (esté o no en nuestro servidor), así saltar a otro punto de la misma página.

Algunos de sus atributos que usaremos a continuación son:


<a
    href:especifica la URL que debe cargarse al hacer clic en el enlace, pudiendo ser también una dirección
    de correo electrónico o la ruta y/o nombre de un archivo existente. En caso de poner una almohadilla '#'
    no realizará acción alguna. También se puede escificar el nombre de un <frame> o <iframe>.

    name: da un nombre al enlace. Este atributo puede ser utilizado para crear enlaces internos dentro de la
    misma página web.

    target: indica dónde se debe cargar la página, pudiendo tomar principalmente como valores: _blank (en
    una pestaña o ventana nueva), _parent (en el frame o marco que contiene al actual), _self (en el frame
    actual) o _top (en la ventana principal del navegador web)
>
</a>

Más información

Relacionado: [ Enlaces en CSS ]

Enlaces locales

Con los enlaces locales podemos cargar otra página web de nuestro sitio:

Si el otro archivo se encuentra en otra carpeta podemos indicar una ruta relativa a la actual.

<html>
    <head>
        <title>Página WEB de ejemplo: hiperenlaces</title>
    </head>
    <body>
        <a href="otra_pagina.html">Ir a la otra página</a><br />
        <a href="extra/otra_pagina_1.html">Ir a la otra página 1</a><br />
        <a href="../extra/otra_pagina_2.html">Ir a la otra página 2</a>
    </body>
</html>

Descargar ejemplo

Supongamos por ejemplo que tenemos la siguiente estructura de carpetas:

Enlaces

Cuando se haga clic en el primer enlace se cargará el archivo otra_pagina.html que está en la misma carpeta o directorio que el actual.

En el segundo enlace se cargará el archivo otra_pagina_1.html, que está en el subdirectorio 'extra'.

En el tercer ejemplo se cargará el archivo otra_pagina_2.html, que se encuentra en el directorio 'extra', que se halla fuera del actual y al mismo nivel (con los dos puntos '..' indicamos que se debe retroceder al directorio anterior).

Enlaces externos

Con los enlaces podemos abrir una página web que se encuentre en otra web, introduciendo la URL deseada:

<html>
    <head>
        <title>Página WEB de ejemplo: hiperenlaces</title>
    </head>
    <body>
        <a href="http://www.google.es/">Ir a Google</a><br />
        <a href="http://www.yahoo.es/" target="_blank">Ir a Yahoo</a>
    </body>
</html>

Descargar ejemplo

Según el ejemplo, al hacerse clic en el primer enlace se cargará la URL del buscador de Google en la ventana o pestaña actual (dependiendo del navegador web usado), y al hacer clic en el segundo en una nueva ventana o pestaña.

También es posible usar este método para cargar páginas web de tu mismo sitio web.

Enlaces internos

Con los enlaces internos podemos acceder rápidamente a otras partes de una misma página web.

Para que veas cómo funciona, en el siguiente código HTML de ejemplo creamos al final del documento un hiperenlace identificándolo con el atributo name, y otro al principio indicando dicho nombre en el atributo href, de modo que cuando hagamos clic en él iremos al final de la página:

<html>
    <head>
        <title>Página WEB de ejemplo: hiperenlaces</title>
    </head>
    <body>
        <a href="#fin">Ir al final</a>

        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>

        <a name="fin"></a>
        <p><font color="cyan">Estamos en el final</font></p>
    </body>
</html>

Descargar ejemplo

Otros enlaces

Es posible usar hiperenlaces como acceso para que el usuario envíe un E-Mail: tras hacer clic en el enlace se abrirá el programa de correo electrónico configurado por el usuario.

También podemos usar un enlace para descargar un archivo, tal y como mostramos en el siguiente ejemplo (se descargará el archivo 'documento.pdf' que se encuentra en el subdirectorio 'pdf'):

<html>
    <head>
        <title>Página WEB de ejemplo: hiperenlaces</title>
    </head>
    <body>
        <a href="mailto:micorreo@gmail.com">Contacto</a><br/>
        <a href="pdf/documento.pdf">Descarga el documento en formato PDF</a>
    </body>
</html>

Descargar ejemplo

Enlaces en imágenes

Si lo deseamos, podemos usar imágenes en lugar de texto en los hiperenlaces, para ello usaremos la etiqueta <img>:

<html>
    <head>
        <title>Página WEB de ejemplo: hiperenlaces</title>
    </head>
    <body>
        <a href="mailto:micorreo@gmail.com"><img src="imagen_email.jpg" border="0"/></a><br/>
        <a href="pdf/documento.pdf"><img src="descargar_pdf.gif"/></a>
    </body>
</html>

Descargar ejemplo

Con el atributo border="0" indicamos que no se debe mostrar un borde alrededor de la imagen, al estar siendo usada como hiperenlace.

Primera página Anterior Anterior Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso