Ir al principio y al final de una página web

10/Nov/2006 HTML , 7 Comentarios

Siempre tenemos que buscar que el usuario se sienta comodo en nuestras páginas web. Para ello debemos de propocionarle enlaces que le permitan navegar a la página principal, a las categorias 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á 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 la etiqueta 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.

  1. <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:

  1. <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 la misma etiqueta A, pero en vez de con el atributo name, utilizaremos el atributo href.

  1. <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 de la etiqueta A , deberemos de utilizar la almohadilla despues del nombre de la página.

  1. <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:

  1. <a href="#arriba">Texto del enlace</a>

Nuestro ejemplo de ir al principio y al final nos quedará de la siguiente forma:

  1. <head><title>Ir al principio y al final</title></head>
  2.  
  3. <a name="arriba"></a>
  4. <a href="#abajo">Ir a la parte de abajo</a>
  5.  
  6. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  7. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  8. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  9. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  10. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  11. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  12.  
  13. <a href="#arriba">Ir a la parte de arriba</a>
  14. <a name="abajo"></a>
  15.  
  16. </body>
  17. </html>

Solamente tenemos que copiar este código en un fichero que llamaremos PrincipioYFin.htm.

Vídeos sobre HTML


7 comentarios en “Ir al principio y al final de una página web”

Víctor Cuervo

Víctor Cuervo

@Angel,

Me alegro que te haya servido. Aquí estaremos siempre para ayudar en lo que sea necesario.

Víctor Cuervo

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

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.

<a name="finalmapa"/ rel="nofollow">

2. Añadir el siguiente código script en el BODY de la página

<body onload="location='#finalmapa';">

Espero que te ayude y esperamos explicar este ejemplo en la web. Me parece interesante. 😀

Víctor Cuervo

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!

Víctor Cuervo

Gildardo

muchas gracias, me sirvio mucho !!

Víctor Cuervo

manerored

Muchas gracias por tu contribución , gracias de corazón. me ha servido mucho tu ayuda. que Dios te vendiga

Víctor Cuervo

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…

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*