Curso de HTML, Tema 6

En este nuevo tema del curso de HTML voy a tratar de las anclas dentro de una pagina web. Es algo que no se usa mucho, pero que nos puede resultar útil. Sobre todo se usan cuando queremos escribir un texto muy largo dentro de una pagina web y queremos dividirlo en secciones y dar la posibilidad al usuario que visite nuestra web de ir a una sección o a otra.

Las anclas con enlaces a partes de una pagina web y lo mejor para entenderlas es hacer un ejemplo. La siguiente pagina tiene tres anclas que nos llevaran a la parte de la pagina en la cual se trata sobre un tema en concreto:

<html>
<head></head>
<body>
<h1>Sistemas operativos</h1>
<a href="#windows">Windows</a><br>
<a href="#linux">Linux</a><br>
<a href="#macos">MacOS</a><br>
<a name="windows"></a>
<h2>Windows</h2>
<p>
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
</p>
<a name="linux"></a>
<h2>Linux</h2>
<p>
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
</p>
<a name="macos"></a>
<h2>MacOS</h2>
<p>
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
Este es un texto de ejemplo que solo sirve para ocupar espacio en la pagina del navegador
web que estemos usando para visualizar la pagina en cuestión. Solo quiero poner este texto
para rellenar por que en el momento en el cual estaba haciendo esta pagina de ejemplo no
tenia conexión a Internet y no podía coger ningún texto, pero en cuanto tenga conexión a
Internet lo cogeré y lo pondré aquí para que el relleno que pretendo poner sea algo mas
decente
</p>
</body>
</html>

Si ejecutáis esta pagina en un navegador se vera todo el texto, y al principio se vera un indice con tres opciones, cada opción sera un enlace a cada parte de la pagina, pinchando en el accederemos a dicha parte de la pagina.

También se pueden utilizar las anclas con otras paginas, solo habría que poner la ruta exacta en los "href" de los enlaces, al inicio del código de la pagina. No voy a hacer mas hincapié en esto ya que es algo que no se usa actualmente y simplemente pretendía que supieseis lo que es por si lo veis en alguna web.

Si te ha gustado el contenido o te ha servido para algo compártelo en las redes sociales y así puede que le sirva también a otra persona, muchas gracias.