Cómo Anclar HTML

Tabla de contenido:

Cómo Anclar HTML
Cómo Anclar HTML

Video: Cómo Anclar HTML

Video: Cómo Anclar HTML
Video: HTML Básico – 5. Cómo usar enlaces de ancla (#) 2024, Mayo
Anonim

El ancla en el sitio es muy útil si desea que los artículos de su sitio tengan una transición conveniente entre los elementos de la lista. Pasan la página al punto deseado o abren la página deseada, ayudando al usuario a encontrar rápidamente la información que necesita.

Cómo anclar HTML
Cómo anclar HTML

Si está escribiendo su propio sitio, debería haber pensado en cómo hacer que la navegación de su sitio sea más conveniente. Para que el usuario no tenga que buscar la información que necesita entre todas las páginas de su sitio, lo mejor es utilizar la técnica del "ancla". Creará un enlace a cualquier información o documento en cualquier lugar de su sitio.

Teoría

Para crear un ancla, necesita dos elementos:

  • La parte del código, que indica el enlace a nuestro ancla, se dejó en otra parte del sitio.
  • Cualquier parte del código en la que se pueda especificar un identificador es nuestro ancla.

Primero debe crear la primera parte del ancla: un enlace a ella. Un enlace de ancla tiene dos partes: un enlace de página y un enlace de ancla.

  1. Cree una etiqueta "a" o cualquier otra etiqueta que admita el atributo "href"
  2. En esta etiqueta, cree el atributo "href"
  3. Especifique un enlace a la página del sitio en el valor del atributo.
  4. Después del enlace, indique el enlace al ancla con el símbolo "#" y cualquier nombre para el ancla (escrito juntos, por ejemplo: "#ancla")

Si omite el punto 3 y no especifica un enlace a la página del sitio, se buscará el ancla en la página actual. Es decir, si desea crear un enlace a un ancla ubicado en la misma página, puede omitir el enlace a la página en sí.

Queda por crear la segunda parte del ancla: el identificador. Se refiere a cualquier etiqueta en el código del sitio que admita el atributo id. Para crear un ancla, necesita:

  1. Cree un atributo "id" en la etiqueta requerida.
  2. En el atributo "id", especifique el valor del nombre del ancla que se especificó en el paso anterior. (ejemplo:)

Después de estos dos pasos, aparece un enlace en el sitio que lo llevará al ancla especificada.

Práctica

Consideremos cómo crear un ancla usando un ejemplo específico.

Tenemos una página simple como esta:

Imagen
Imagen

Tenemos texto en la parte superior e inferior de la página, muchas etiquetas "br" que crean espacio entre los textos. Necesitamos crear un ancla para que podamos ver rápidamente el texto en la parte inferior.

Para ello, cree una nueva etiqueta: "a" después de la inscripción "texto en la parte superior". En él creamos el atributo "href". Para que el ancla sea más conveniente, escribiremos "abajo" en el enlace.

Imagen
Imagen

Ahora especificamos el valor "#yakor" en el atributo; este será un enlace al nombre del ancla.

Imagen
Imagen

La primera parte del ancla, el enlace a ella, está lista. Ahora todo lo que queda es crear el ancla en sí. Pasamos a la parte deseada de la página. En este caso, es "texto en la parte inferior". Dado que este es un texto simple sin una etiqueta, debemos crearlo. Para hacer esto, encierre el texto en un "párrafo" - etiqueta "p".

En esta etiqueta creamos el atributo "id" e ingresamos el valor "yakor" en él. El valor "yakor" coincide con el nombre del ancla que se especificó en el enlace.

Imagen
Imagen

Ahora nuestro ancla está funcionando como debería.

Recomendado: