Listado completo de tutoriales

Temario del Tutorial->7 - Hipervínculo a otra página del mismo sitio <a>


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. Esto es lo que hace diferente la página de un libro con la página de un sitio en internet. Normalmente un libro lo recorremos en forma secuencial, pero un sitio de internet podemos disponer estos enlaces entre un conjunto de páginas y luego tener distintas alternativas de recorrido.

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:

hipervínculo a otra página del mismo sitio

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

El contenido de pagina1.html es:

<!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:

pagina2.html

<!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>


Retornar