jump to navigation

Enlace a una parte concreta de la página Enero 21, 2007

Publicado por lineadecodigo en : HTML , trackback

En varios artículos de Linea de Código hemos visto la importancia de los enlaces dentro de la World Wide Web y en particular dentro de la creación de páginas web HTML. Lo más normal suele ser el enlazar una página con otra. De esta forma, una vez que pulsemos en el enlace, nos posicionaremos en el principio de la página enlazada. Pero puede ser que lo que nos interese sea el llevar al usuario a una parte en concreto del nuevo documento.

HTML nos proporciona un mecanismo mediante el cual podemos enlazarnos a una parte en concreto de la página.

Para ello lo primero que tenemos que hacer es definir un ancla (queda más bonito en ingles... anchor). Este será un punto de una página al cual querremos crear, posteriormente, un enlace.
Para crear un ancla utilizaremos el elemento <A> de HTML y en especial su atributo name.

<A name="tema1">Tema 1</a>

En nuestro ejemplo hemos definido un ancla al que le hemos llamado "tema1". Ya que la parte en la que está posicionado dentro del documento sería la relativa al "Tema 1".

Recuerda que el nombre que le pongamos al ancla es muy importante, ya que será el mismo que tendremos que utilizar a la hora de realizar el enlace.

Una vez definido el ancla, lo siguiente será el realizar en enlace a dicho ancla. El elemento que necesitaremos en este caso es el mismo que para realizar el ancla, es decir, <A>.
Si bien, ahora utilizaremos el atributo href. Atributo que se utiliza para indicar la URL del enlace.

Para crear un enlace al ancla, el valor del atributo href será el nombre de la página web que contenga el ancla, seguido de una almohadilla (#) y del nombre que le dimos al ancla.

De esta manera el enlace al "Tema 1" será de la siguiente forma:

<a href="#tema1">Enlace al Tema 1</a>

En este caso, antes de la almohadilla no hemos puesto ningún nombre de página. Ya que hemos asumido que el enlace y el ancla se encuentran dentro de la misma página. Si, por ejemplo, el ancla estuviese dentro de la página "historia.html", nuestro enlace a la parte concreta de la página quedaría de la siguiente forma:

<a href="historia.html#tema1">Enlace al Tema 1</a>

Visualizar el ejemplo | Descargar el código

Articulos Similares:

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 3786 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Comentarios»

1. GILBERTO REYES BARRERA - Enero 23, 2007

LA EXPLICACION ES DIDACTICAMENTO CORRECTA Y MUY CLARA

2. Epifanio Tintinago - Enero 24, 2007

Sencilla, fácil y práctica. Sigo leyendo sus explicaciones con interés. Soy maestro y uilizo sus explicaciones. Remito además a mis alumnos a este boletín.

3. lineadecodigo - Enero 28, 2007

Gracias a ambos. Espero que los artículos sigan siendo de utilidad. Estos comentarios me dan muchos ánimos para seguir publicando.

Y Epifanio, cualquier cosa que pueda ayudar para sus explicaciones, no dude en pedirla. Encantado publicaría al respecto.

4. Kleyberjk - Febrero 13, 2010

Hoooooo me desenrredaste la vida gracias es sencillo poro me estaba comiendo yo uso nvu es un editor html muy bueno lo recomiendo ya trae para hacer esto pero gracias a esto lo descubri

5. Daniel Miranda Juarez - Agosto 26, 2010

Buen dia , tengo un problema para visualizar unos archivos … al empezar a abrir dice que la pagina es de Frames … este es el link .

me pueden apoyar en como poder abrir los registros son resultados de laboratorio .

Gracias por su ayuda.


Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen