Enlaces Internos

1.- ENLACES INTERNOS EN EL MISMO ARCHIVO HTML.

Quizás "Enlaces internos" puede ser un poco ambiguo, porque podríamos pensar tanto en enlaces internos dentro del mismo sitio web o enlaces internos dentro de la misma página.

Nosotros en este manual nos referimos a los enlaces que apuntan a un lugar diferente dentro de la misma página. Llamamos "Enlaces locales" a los enlaces que apuntan a otra página dentro de mismo sitio web.

 Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño del texto. Es un enlace poco habitual en páginas web como blogs o páginas comerciales, que presentan un producto o un servicio. Se encuentran más en páginas de referencia, donde además el contenido está dividido en diversas secciones y queremos poder navegar entre esas secciones que se encuentran dentro del mismo archivo HTML. Otro uso habitual de los enlaces internos es ofrecer al visitante la posibilidad de ir rápidamente al principio de la página, a la parte de arriba

  

Se denominan enlaces internos aquellos que llevan a otra parte de la misma página. Para ello la página debe ser lo bastante larga para que no quepa entera en la pantalla, y haya que acceder a gran parte de ella utilizando la barra de desplazamiento, generalmente la vertical. 

En este caso se pueden colocar unos enlaces, generalmente al principio de la página, que pulsándolos nos lleven a las diferentes partes de la página.

  

Aunque estos enlaces suelen colocarse al principio de la página, en realidad podemos colocarlos en cualquier sitio, y hacer que apunten a cualquier otro lugar de la página. el punto de la página al que apuntan aparecerá lo más cerca posible de la esquina superior izquierda de la pantalla

   

Los enlaces internos constan de dos partes: ya que al estar los dos en la misma página, hay que indicar no solo el origen, sino también el destino.

Origen y destino

El punto de origen es donde pulsaremos para activar el enlace. ahi debemos colocar la etiqueta de origen que será la siguiente:

 

<a href="#destino">Texto_del_enlace</a> 

                                                                                         

La etiqueta que usamos es la misma que para un enlace normal, pero en el valor del atributo href escribiremos un nombre para el destino, siempre precedido del signo # (almohadilla).

 Este nombre que le hemos dado al destino, será la referencia para llegar hasta él, por lo tanto deberá estar en la etiqueta que marque el destino. 

El punto de destino es donde queremos que nos envie el enlace: ahí debemos colocar la etiqueta de destino, que será la siguiente:

<a name="destino">Texto_del_destino</a>

Aquí la etiqueta <a> no lleva el atributo href ya que no es de origen, sin embargo lleva el atributo name que es el que indica dónde está el destino. El valor del atributo name debe ser el mismo que el valor del atributo href en la etiqueta de origen, pero sin la almohadilla ( # ). Veamos un ejemplo del código:
 

Origen: <a href="#apartado3">Ir al apartado 3</a>

Destino: <a name="apartado3">Apartado 3</a>

El texto de la etiqueta de destino puede ser cualquiera, y al contrario que en la etiqueta de origen, éste no lleva ninguna marca ni cambio de estilo. (el texto no se distingue del resto, no aparece ni en diferente color ni subrayado). Normalmente los enlaces de destino se suelen poner en títulos o subtítulos de secciones, o en la primera línea de éstos.

2.- ENLACES INTERNOS A OTRO ARCHIVO DE LA MISMA PÁGINA.

Podemos acceder también al destino de un enlace interno desde otra página, para ello después de escribir la ruta o la URL de la página en el enlace, escribiremos el signo # (almohadilla) y el valor del atributo name que tiene en la página de destino.
 

Esto es válido tanto para enlaces locales como para enlaces externos. veamos aquí algunos ejemplos:

<a href="html3_2.php#rutas_absolutas"> Rutas absolutas </a>

Desde esta página en la que estamos podemos acceder a la página anterior e ir directamente a la sección indicada, ya que ahí hemos puesto un enlace de destino con el atributo "name" para identificarlo .El enlace quedará así: rutas absolutas

Como ya hemos dicho en la página anterior hemos puesto el enlace de destino de la siguiente forma:

<h4><a name="rutas_absolutas"> Rutas absolutas </a> </h4>

Veamos ahora un ejemplo donde escribimos a un enlace interno de una página externa a la nuestra. El enlace quedará así:

<a href="http://es.wikipedia.org/wiki/Colores_web#Tabla_de_colores"> Tabla de colores en Wikipedia</a>

Después de escribir el enlace para que nos lleve a esa página, escribimos el símbolo almohadilla (#), y el nombre de la sección, tal como está en la etiqueta de destino. El enlace quedará así: