Vamos a analizar a continuación el ejercicio de anclas en HTML.
Están listos.
Vamos
el objetivo del ejercicio es poner en práctica el concepto de anclas en HTML y al finalizar deberemos
observar lo siguiente según se muestra
en primer lugar vamos a crear nuestro proyecto.
El proyecto se va a llamar anclas HTML lo depositamos en la ruta mostrada y damos clic en Finalizar.
Posteriormente vamos a modificar nuestro archivo de índex punto HTML.
Vamos a abrir nuestro Doctrine.
Posteriormente la etiqueta HTML y agregamos también nuestro Get el título va a ser anclas en HTML.
Abrimos el cuerpo de nuestro documento HTML y especificamos un título Uso de anclas en HTML y vamos
a empezar a marcar los lugares donde los links van a llegar.
Estas marcas no son visibles en el documento HTML sólo van a ser referencias para que los links se detengan
en el documento HTML.
Esto es lo que vamos a trabajar a continuación ya que este es el concepto de uso de anclas así que en
primer lugar vamos a agregar una referencia donde se va a detener este documento HTML es decir que vamos
a agregar el ancla de inicio por ello a diferencia del uso de hipervínculos en lugar de utilizar el
concepto de A y posteriormente HR-V.
En este caso vamos a utilizar la etiqueta de A pero vamos a indicar a continuación el atributo de Nein
y con eso estamos definiendo un lugar en nuestro documento HTML al cual podemos hacer referencia desde
un link así que básicamente con eso estamos diciendo que si damos clic sobre algún link que nos lleve
a esta sección de inicio entonces prácticamente nos está llevando al inicio de este documento HTML.
Pero vamos a ir definiendo más etiquetas de este tipo para ir haciendo referencia hacia diferentes secciones
de nuestro documento HTML posteriormente agregamos un cabecero en el cual vamos a indicar lista de libros
de tecnología Java y lo que vamos a hacer a continuación es agregar los links relativos a esta página
los cuales son conocidos como anclas de página vamos a agregar un índice en este caso vamos a agregar
un HR-V el cual va a hacer referencia a un ancla el ancla se llama L1 y para poder hacer referencia
a un ancla vamos a especificar el símbolo de número y posteriormente el nombre del ancla así que en
este momento estamos definiendo un ancla y de esta manera es como se utiliza la llamada hacia un ancla
y si damos clic sobre esta referencia sobre ese hipervínculo nos debe de llevar hacia la etiqueta o
ancla que hemos definido llamada L1.
Esto aún no lo definimos en lo que vamos a definir a continuación pero así podemos definir más llamadas
hacia diferentes títulos en este caso podemos definir más anclas.
Por ejemplo el ancla L2 L3 y así podemos definir más anclas en este caso vamos a definir 9 anclas esto
para que podamos observar claramente cómo es que se mueve a lo largo del documento cada que damos clic
a un ancla distinta.
Con esto apenas estamos definiendo los hipervínculos que van a ser llamadas a las anclas.
Sin embargo a continuación vamos a definir más anclas pero recordemos que ya hemos definido una primer
ancla al inicio del documento HTML precisamente llamada inicio y cuando estemos en una sección más avanzada
de este documento HTML entonces podremos dar clic en cualquier momento para que nos lleve al inicio
de este documento.
Y es entonces cuando nos traerá a esta ancla llamada inicio.
Vamos a continuar agregando el contenido de este documento HTML.
Cerramos nuestro párrafo
y vamos a empezar a agregar los links a los que hace referencia a cada uno de estas anclas.
Agregamos un párrafo y podemos observar que agregamos una primera ancla esta ancla se llama L1.
Así que en el caso de que en el índice demos clic sobre el ancla L1 nos va a traer a esta sección del
documento HTML y básicamente lo que va a contener únicamente es la referencia del título del libro y
si queremos regresar al inicio de nuestro documento HTML entonces hacemos la llamada a esta ancla por
medio de la siguiente sintaxis.
Agregamos un hipervínculo.
Posteriormente el elemento HR-V y si recordamos para mandar a llamar a un ancla utilizamos el símbolo
de número seguido del nombre del ancla y posteriormente indicamos cualquier etiqueta.
En este caso regresar al índice y cerramos nuestro hipervínculo.
Estos caracteres son únicamente informativos es un texto pero no tiene nada que ver con el uso de anclas
ni tampoco con el uso de hipervínculos así que se puede omitir este texto únicamente como hemos comentado
es para dar la apariencia de que estamos mandando llamar un ancla es únicamente un texto pero realmente
el uso de la llamada anclas es por medio del símbolo del número y posteriormente establecer el nombre
del ancla y posteriormente establecemos la descripción de este libro 1 y así por cada uno de los libros
vamos a ir agregando las anclas.
En este caso agregamos el ancla llamada L2 así que desde el índice 4 demos clic al ancla L2 nos va a
traer a esta sección del documento HTML pero también en cualquier momento podemos regresar al inicio
del documento HTML haciendo llamada al ancla de inicio
y agregamos la descripción de este libro dos y así por cada uno de los libros vamos a agregar exactamente
el mismo código del Libro 1 hasta el libro 9
así que únicamente podemos observar que estamos haciendo exactamente lo mismo para los libros desde
el 1 al 9 así que hacemos lo mismo para los libros del 4 al 8 y vamos a agregar a continuación los últimos
libros el 8 y 9
con eso ya tenemos todos los libros estamos agregando varios libros para que dentro de nuestro documento
HTML crezca en la parte vertical y así cada vez que demos clic por ejemplo algún libro nos lleve hacia
el documento HTML hacia la sección donde hemos definido el ancla y si damos clic en volver al inicio
entonces nos debe de regresar al ancla de inicio y así es como vamos a ir moviéndonos entre los diferentes
libros.
Vamos a ir moviéndonos en el documento HTML al libro respectivo y posteriormente regresando al inicio
del documento ya que si únicamente agregamos algunos elementos no se va a visualizar este movimiento.
Por ello es que estamos agregando varios libros para que crezca en vertical este documento HTML y de
esta manera podemos poner en práctica este concepto de anclas.
Finalmente ejecutamos nuestro proyecto y podemos observar el resultado si recordamos antes de agregar
nuestro índice.
Hemos definido un ancla podemos observar que las anclas no se visualizan en nuestros documentos HTML
únicamente son marcas para que mientras nos estemos moviendo en nuestro documento HTML podamos regresar
a una parte de este documento.
Por ello precisamente el concepto de ancla ya que una vez que demos clic por ejemplo a regresar índice
nos va a regresar hacia el ancla donde hemos establecido este link pero también por ejemplo si damos
clic al libro 9 entonces nos debe de llevar directamente al ancla donde se encuentra este libro 9.
Obviamente para llegar a ese libro debemos de movernos dentro del documento HTML de manera vertical.
Así que para esto está el uso de anclas debido a que podemos tener páginas HTML muy largas y entonces
el uso de anclas nos permite movernos rápidamente en todas las secciones de un documento HTML que es
demasiado largo
como conclusión de este ejercicio.
Hemos puesto en práctica el concepto de anclas en HTML el cual nos permite enlazar secciones de nuestra
página web sin necesidad de cambiar de página sino todas son llamadas dentro de la misma página.
Con eso concluimos el ejercicio de anclas en HTML.