4 - Hipervínculo

El elemento más importante que tiene una página de internet es el hipervínculo, estos nos permiten cargar otra página en el navegador. 

Normalmente un navegador al encontrar esta etiqueta HTML muestra un texto subrayado, y al hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho hipervínculo.

Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros).

El elemento de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:

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

Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin de marca. Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página (normalmente subrayado).

Lo nuevo que aparece en éste elemento es el concepto de una propiedad. Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor.

El valor de la propiedad debe ir entre comillas dobles.

La propiedad href del elemento a hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo.

Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las páginas HTML serán: pagina1.html y pagina2.html

<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página 1</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Página principal.</h1>
        <a href="pagina2.html">Noticias</a>
    </body>
</html> 

Como podemos observar lo nuevo en la pagina1.html es el hipervínculo a la pagina2.html:

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

Toda propiedad toma el valor que se encuentra seguidamente del caracter «=»

El valor de la propiedad href en este caso es pagina2.html (es otro archivo HTML que debe encontrarse en nuestro sitio y en el mismo directorio), si lo probamos en nuestro equipo disponer los dos archivos en la misma carpeta.

El segundo archivo pagina2.html tiene un hipervínculo a la primer página:

<a href="pagina1.html">Salir.</a> 

Para recordar el nombre de esta etiqueta HTML:

<a> viene de anchor que significa ancla. 

La segunda página en nuestro ejemplo es:

<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página 2</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Noticias.</h1>
        <a href="pagina1.html">Salir.</a>
    </body>
</html>