[ La sintaxis del HTML ] [ Haciendo documentos HTML ] [ Formateando el texto ] [ Añadiendo listas ] [ Enlazando las páginas ] [ Tablas ] [ Marcos ] [ Formularios ]
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:
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.
