Volver a la portada de Duiops
Volver al
Web de Duiops


Portada | Fundamentos del HTML | Enlazando las páginas | Enlaces dentro de la misma página

 

La sintaxis del HTML ] Haciendo documentos HTML ] Formateando el texto ] Añadiendo listas ] Enlazando las páginas ] Tablas ] Marcos ] Formularios ]

 


Atrás Arriba Siguiente

 

Enlaces dentro de la misma página

Una método para ayudar en la navegación de una misma página es hacer enlaces dentro de ella. Esta técnica hace que los navegantes accedan de una manera más rápida a la información, sin duda muchos lo apreciarán.

Consiste en hacer clic en algún texto o imagen, y desplazarse a otra parte dentro de la misma página. Por ejemplo, en todo el WEB de Duiops, dispones de un enlace en la parte inferior de las páginas que te permite saltar a la parte superior de las mismas.

Para hacer este tipo de enlaces hay que hacer dos operaciones:
bulletEstablecer marcadores a lo largo de la página (son los lugares a los que queremos saltar con los enlaces).
bulletPoner enlaces que salten a los marcadores.

El código de los marcadores es el siguiente:

<A name="nombre_del_marcador"></A>

Hay quien encierra con el código del marcador el elemento a donde quiere saltar:

Código al lado del elemento que queremos marcar:

<A name="Principio"></A><H1>Título de la página</H1>

Código que encierra el elemento que queremos marcar.

<A name="Principio"><H1>Título de la página</H1></A>

Se recomienda usar el primero para enlazar lugares de la página (por ejemplo, el principio) y el segundo para enlazar elementos (imágenes o textos concretos colocados a lo largo de la página).

Por otro lado, el código de un enlace para que salte a un marcador.

Pulsa para volver al <A href="#principio">principio</A>

 

CUIDADO

Los marcadores reconocen mayúsculas y minúsculas. <A NAME="Principio"></A> y <A NAME="principio"></A> no es el mismo enlace.

 

Aquí tienes un claro ejemplo que te ayudará a comprender los enlaces dentro de la misma página.

En tu editor HTML, escribe la estructura básica:

<HTML>
<HEAD>

<TITLE>Página con marcadores - Ejemplo</TITLE>

</HEAD>
<body>

</body>
</HTML>

Añade varios elementos que puedan enlazarse:

<HTML>
<HEAD>

<TITLE>Página con marcadores - Ejemplo</TITLE>

</HEAD>
<body>

En esta página puedes ir al primer apartado, al segundo o al tercero .

</body>
</HTML>

Ahora añade texto para que puedas poner después los marcadores:

<HTML>
<HEAD>

<TITLE>Página con marcadores - Ejemplo</TITLE>

</HEAD>
<body>

En esta página puedes ir al primer apartado, al segundo o al tercero .

<H1>Primer apartado</H1>

Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.

<H1>Segundo apartado</H1>

Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.

<H1>Tercer apartado</H1>

Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.

</body>
</HTML>

Coloca los marcadores en los títulos de los apartados, de la siguiente forma:

<A name="primero"><H1>Primer apartado</H1></A>

Una vez hecho eso, pon los enlaces a los marcadores en las palabras que están en el primer párrafo, de esta forma:

En esta página puedes ir al <A href="#primero">primer</A> apartado, al segundo o al tercero.

Guarda tu archivo como marcadores.htm y comprueba los enlaces en tu navegador.

Y un último detalle, hay mucha gente que utiliza el típico enlace de "Volver arriba". Es una práctica muy recomendable, y absolutamente todas las páginas deberían tener en la parte inferior de las mismas un enlace que lleve a la parte superior. Esto facilita a los navegantes moverse dentro de la página con gran velocidad.

Para hacer esto, coloca este marcador en la parte superior de la página (la parte superior de body):

<A name="arriba"></A>

Y a continuación, en la parte inferior, coloca el enlace para saltar a la parte superior de la página:

Volver <A href=#arriba"></A>

 

CUIDADO

Mientras que el uso de marcadores es muy recomendable y a veces imprescindible para organizar el contenido dentro de una página, es importante mantener la longitud de las páginas en un tamaño razonable. Seguramente habrás visto páginas en Internet que se desplazan varias pantallas hacia abajo, en ese caso, la solución no es poner marcadores, sino fragmentar la página larga en páginas más cortas. Procura que tus páginas no excedan de los 30 kb de tamaño. Esto hará felices a tus navegantes.

 

Y ahora que ya sabes todos los pasos para hacer una página con marcadores, aquí tienes el código para comprobar si lo has hecho correctamente:

 

<HTML>
<HEAD>

<TITLE>Página con marcadores - Ejemplo</TITLE>

</HEAD>
<body>

<A name="arriba"></A>

En esta página puedes ir al <A href="#primero">primer</A> apartado, al <A href="#segundo">segundo</A> o al <A href="#tercero">tercero</A>.

<A name="primero"><H1>Primer apartado</H1></A>

Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.

<A name="segundo"><H1>Segundo apartado</H1></A>

Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.

<A name="tercero"><H1>Tercer apartado</H1></A>

Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.

<P>Volver <A href="#arriba">arriba</A>.

</body>
</HTML>

 

Pulsa aquí para ver la página.

 

Atrás Arriba Siguiente


 © 1997-2009 Duiops (http://www.duiops.net)
 Prohibida la reproducción parcial o total de los textos o las imágenes.

 Para comentarios, usar las direcciones e-mail de contacto