Siempre tenemos que buscar que el usuario se sienta cómodo en nuestras páginas web. Para ello debemos de proporcionarle enlaces que le permitan navegar a la página principal, a las categorías principales,… y sobre todo, si la página que tenemos es muy grande, deberemos facilitarle que suba al principio de la página sin que tenga que arrastrar el dichoso cursor.
En este punto hay que comentar que esta situación no debería de darse mucho. No nos interesa que haya páginas kilométricas. Por varias cosas, por ejemplo, porque el usuario no va a entender tanta información de golpe, posiblemente una lectura en varias páginas ayudará al lector, por el tamaño de la página. Cuanto más texto tenga la página, más pesará, lo cual hará más costosa la descarga de la página al navegador.
Pero independientemente de lo grande que sea la página, siempre deberemos de facilitar ir al principio de esta.
Para poder realizar esto utilizaremos el elemento A. Y es que el «ancla» no solo nos sirve para enlazar páginas, sino para señalar un punto específico de esta.
Así, si queremos señalar un punto en concreto utilizaremos el atributo name
<a name="arriba"></a>
Si ponemos este código en el principio de la página podremos hacer enlaces que nos posicionen el navegador en él. Lo mismo nos servirá si lo ponemos en cualquier parte de la página web, con cualquier otro nombre.
Así, en la parte inferior de nuestra página, podríamos poner el siguiente ancla A:
<a name="abajo"></a>
Lo que vendrá a hacer referencia a la parte de abajo de la página.
Ahora solo nos quedará el crear los enlaces. Para crear un enlace se utiliza el mismo elemento A, pero en vez de con el atributo name, utilizaremos el atributo href.
<a href="pagina.htm">Texto del enlace</a>
En la línea de código que acabamos de escribir se hace un enlace a una página en concreto. Si queremos hacer referencia a una parte de la página, es decir, a una parte definida mediante el name del elemento A , deberemos de utilizar la almohadilla después del nombre de la página.
<a href="pagina.htm#arriba">Texto del enlace</a>
Si la parte de la página es en la misma página que en la que estamos insertando el enlace, podremos obviar el nombre de la página:
<a href="#arriba">Texto del enlace</a>
Nuestro ejemplo de ir al principio y al final nos quedará de la siguiente forma:
<html>
<head>
<tile>Ir Arriba e ir abajo</title>
</head>
<body>
<a name="arriba"></a>
<a href="#abajo">Ir a la parte de abajo</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#arriba">Ir a la parte de arriba</a>
<a name="abajo"></a>
</body>
</html>Solamente tenemos que copiar este código en un fichero que llamaremos PrincipioYFin.htm.
Víctor Cuervo
@Angel,
Me alegro que te haya servido. Aquí estaremos siempre para ayudar en lo que sea necesario.
Angel
Gracias Victor por tu ayuda.
Que bueno que tenemos amigos que nos ayuden en esto para los que queremos aprender.
Saludos cordiales desde Mendoza
Víctor Cuervo
@Angel, tienes que hacer dos cosas.
1. Poner un ancla detrás de la imagen. Para saber dónde tenemos que ir. Para poner el ancla tendrás que insertar el siguiente código.
2. Añadir el siguiente código script en el BODY de la página
Espero que te ayude y esperamos explicar este ejemplo en la web. Me parece interesante. :-D
Angel
hola!
por favor si me pueden ayudar.
tengo una imagen muy grande (un mapa), insertado en un html y quiero que al abrir el html se vaya al final de la imagen. como puedo hacerlo con html?
Gracias!
Gildardo
muchas gracias, me sirvio mucho !!
manerored
Muchas gracias por tu contribución , gracias de corazón. me ha servido mucho tu ayuda. que Dios te vendiga
hitokiri.red
pues nada, que mi novia no entendia esto los enlaces y se lo explique con esto, pero sobre todo nos ponemos la interrogante de porque vinculos para ir al inicio y al final de la pagina, mejor unos marcos
pero en fin…