Etiqueta anchor

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

En ocasiones necesitamos conectar partes de nuestro sitio web o conectar incluso otros sitios web diferentes al nuestro
Con este video iniciaremos aprendiendo como usar la etiqueta para los enlaces o links
Lo que tenemos actualmente es, al igual que en otros videos, la estructura de nuestro documento HTML ya creada, pero sin ningún contenido dentro del body
Lo que haremos ahora es crear la etiqueta que se usa para añadir links, o enlaces
Esta etiqueta se llama anchor, que viene de ancla en inglés, y la etiqueta se escribe simplemente con una a, y tiene su etiqueta de cierre
Y esto es lo que se usa para crear enlaces
Ahora, dentro de esta etiqueta vamos a colocar el texto de nuestro enlace, o link, podemos llamarlo de las dos formas, para facilitarnos las cosas le llamaremos link directamente
Entonces colocaremos el texto de nuestro link entre dentro de la etiqueta anchor
Vamos a escribir mi link, guardamos el documento, vamos al navegador y refrescamos, podrás ver que ahora aparece el texto que dice mi link
Sin embargo no hace nada, ni siquiera tiene el estilo normal que tienen los links, el tan famoso color azul y subrayado
Eso es debido a que el link aún no tiene un lugar hacia dónde dirigirse, o más bien no le hemos indicado hacia donde debe ir
Vamos a indicarle hacia donde ir en un momento
Primero vamos a regresar a nuestro documento en el editor de texto, y lo que haremos es añadir algo de espacio después de nuestro link
Deseamos añadir algo de espacio vacío así que usaremos la etiqueta br para crear varios saltos de línea, lo que nos añadirá espacio vacío
Vamos a crear muchas etiquetas br para que se nos cree mucho espacio
Ten en cuenta que esto que estamos haciendo en realidad no se debe hacer, lo estamos haciendo únicamente para crear una demostración pero en tu sitio web nunca uses la etiqueta br para añadir espacio de esta forma
Usando css que lo veremos en un futuro curso, después de terminar el curso de HTML puedes iniciar el de css
Pero en el curso de css te mostraremos como añadir espacio entre tus elementos de una mejor forma
Añadir espacio de esta forma es simplemente una mala práctica y no debes hacerlo
Luego de añadir el espacio, voy a colocar una etiqueta p aquí y escribiremos un texto, vamos a colocar, mi link me trajo hasta aquí
Y vamos a usar un atributo que no hemos visto hasta ahora, el atributo id
Así que añadimos el atributo id a la etiqueta p, añadimos el símbolo igual, y entre comillas colocamos el valor del id, que en este caso será enlaceabajo
El atributo id nos ayuda a identificar elementos específicos, esto es bueno para usar CSS, ya que podremos seleccionar elementos específicos y darles estilo únicamente a ellos sin afectar a otros elementos similares por ejemplo
Sin embargo en este caso lo que haremos es usar el íd en combinación con nuestra etiqueta anchor y crear un enlace
Dentro de nuestra etiqueta anchor, vamos a usar otro atributo nuevo para nosotros, el atributo href, que viene de hyperlink reference en ingles
El valor para este atributo en este caso será, el símbolo numeral y luego escribimos enlaceabajo que es el id de nuestro párrafo
Ahora guardamos nuestro documento, vamos al navegador y refrescamos la página
Y ahora puedes ver que nuestro link tiene el estilo que esperábamos ver antes y si bajamos en el navegador podremos encontrar nuestro párrafo que dice mi link me trajo hasta aquí
Así que subimos hacia nuestro link, y damos clic sobre él
El link nos llevará hacia el párrafo de abajo
Vamos a regresar al editor y añadiremos más etiquetas br después del párrafo para crear espacio después del párrafo y que podamos visualizar correctamente el efecto
Regresamos al navegador y haremos los mismo
Damos clic en el link, y eso nos lleva hacia el párrafo con nuestro texto
Como podrás observar, coloca el párrafo en la parte superior del documento
De modo que los las etiquetas anchor, no son útiles únicamente para vincular otros sitio web o diferentes documentos HTML
También son útiles para crear links hacia elementos que se encuentran en el mismo documento
Regresemos al navegador y veamos de que se compone nuestra etiqueta anchor
La etiqueta anchor tiene dos partes importantes
Tiene el anchor, o el ancla en español, que sería básicamente solo la etiqueta a con el texto dentro de ella
Y la dirección, que es el valor que se encuentra dentro del atribut href, el cuál le indica a la etiqueta hacia donde debe dirigirse
La dirección en este caso, es el párrafo que tenemos abajo. Sin embargo también podríamos añadir como valor otro sitio web, para crear links hacia otros sitios web
Ahora vamos a regresar a nuestro navegador y veamos que es lo que hemos realizado
Tenemos este link y cuando damos clic en el nos lleva hacia el párrafo que se encuentra abajo
Pero y si el visitante desea regresar al inicio?
Necesitará trasladarse hacia arriba manualmente, esto en términos de experiencia de usuario no es algo muy bueno
Deberíamos añadir una forma en la que el usuario pueda dirigirse hacia arriba sin necesidad de hacer scroll con el mouse o usar la barra del navegador
Igualmente siempre deberíamos evitar que el usuario use el botón de hacia atrás del navegador
Siempre debemos añadir una forma para que el usuario regrese al lugar donde se encontraba antes
Así que regresemos a nuestro navegador para añadir una solución a este inconveniente
Para ello lo que haremos es crear otro link debajo de nuestro párrafo, y le vamos a colocar regresar entre la etiqueta anchor
Y necesitamos que este link nos lleve hacia el primer link que tenemos en la página
Así que vamos a colocar el atributo href y como valor colocaremos el símbolo de numeral y luego el texto enlacearriba
Y dentro de nuestro otro link, simplemente añadiremos el atributo id con el valor enlacearriba
Que sería el mismo id que el valor del href de nuestro enlace
Guardamos los cambios, regresamos al navegador y al refrescar si hacemos clic en el primer link nos llevará hacia el párrafo en la parte de abajo
Y ahora tenemos este nuevo link para regresar a donde estábamos, así que damos clic sobre el nos lleva hacia nuestro primer link
Hagámoslo nuevamente para ver bien lo que hemos creado, damos clic en el primer link y nos lleva al párrafo y luego damos clic en el segundo link y nos lleva hacia arriba
La etiqueta anchor puede hacer más que únicamente vincular dos partes diferentes de nuestro sitio web
También puede vincular dos documentos HTML diferentes, formando la estructura de un sitio web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image