Los documentos HTML son estáticos, pero tiene la habilidad de crear hipervínculos, que es lo que hace que la web sea la web. Esto fue lo que revolucionó la información desde principios de los 90. El elemento que nos permite crear vínculos es el elemento <a>.
Elemento Ancla ‘anchor’
El elemento ‘anchor’ o ancla es el que nos permite construir elementos donde el usuario pueda hacer clic y apuntar a contenidos dentro del documento, dentro del sitio web o en ubicaciones externas de la web.
<a>contenido</a>
Cualquier elemento puede ser un hipervínculo en HTML.
<a><img src=””/></a>El elemento ‘anchor’ o ancla deriva su nombre de las relaciones históricas de la web, usualmente se navega la internet, por lo cual un ancla es la metáfora de los lugares donde se puede llegar. El elemento <a> crea elementos cliqueables, pero para que sean funcionales se deben adicionar 2 atributos:
href: Hipertext Reference (referencia del hipertexto), la URL del vinculo
title: un texto descriptivo para adicionar significado acerca de dónde va el vinculo
<a href=”” title=””>contenido</a>Hipervínculos a regiones de la página
En páginas que son más largas y es necesario hacer scroll es buena idea asignar puntos de anclaje a las secciones de manera que los usuarios puedan navegar dentro del mismo documento.
Los elementos que se quieren identificar como objetivo o punto de anclaje deben tener un atributo ‘id’, el atributo ‘id’ al ser único permitirá establecer puntos objetivos.
< section id=”contenido-principal” >Y para vincular los hipervínculos con los puntos de anclaje se adciona el valor del atributo ‘id’ al elemento ancla que funciona como hipervínculo.
<a href=”#contenido-principal” title=”Contenido principal de la página”>Contenido Principal</a>Hipervínculos a páginas externas
Cuando queremos vincular archivos que no pertenecen a nuestro sitio web, esto quiere decir cualquier otro archivo alojado en paginas externas, debemos usar una ‘vinculo absoluto’ como valor del atributo href.
<a href=”http://www.wikipedia.org” title=”Referencia externa”>Wikipedia</a>Ese vínculo absoluto corresponde a una URL, por lo tanto el protocolo, nombre de dominio y demás parámetros deben coincidir con las características de una URL.
El Atributo ‘target’
target u ‘objetivo’ es un atributo que permite informar al navegador donde queremos que se desplieguen los archivos vinculados, de manera predeterminada se despliegan en la misma pestaña, pero podemos decirle que use una pestaña en blanco.
<a href=”http://www.wikipedia.org” title=”Referencia externa” target=”_blanck”>Wikipedia</a>Vínculos de Nivel más Bajo
Simplemente se inicia la URL con el nombre del directorio, que se encuentra en el mismo nivel jerárquico, de ahí en adelante, cada directorio representa un “/” con su debido nombre y por último el nombre del archivo al que se quiere llegar.
<a href=”recetas/malteadas/malteada-de-chocolate.html”>contenido</a>Vínculos de Nivel más Alto
Simplemente se inicia la URL con la convención “../”, esta convención proviene de UNIX y se traduce como, ‘suba un nivel en la jerarquía de directorios’, desde ese nivel ya podemos decirle que busque el archivo que queremos direccionar.
<a href=”../index.html”>contenido</a>
Si es necesario subir varios niveles, se usan varios ‘../’
<a href=”../../index.html”>contenido</a>Directorio root
Todos los sitios web tienen un directorio root (raíz), hasta ahora nosotros lo hemos manejado como la carpeta proyecto. Es posible establecer una ruta que inicie desde la raíz, de manera que las rutas relativas sean más fáciles de manejar. Para esto se usa un elemento ‘base’ en el head, este define la ruta raíz desde donde el navegador va a buscar el archivo solicitado:
<head>
<base href=”http://www.misitio.com”>
Cuando se define la base, el navegador entiende que cualquier link relative que encuentre en el document HTML lo debe reconstruir adicionando la base.
<a href=”../index.html”>contenido</a>
<a href=” http://www.misitio.com /index.html”>contenido</a>
Navegación:
Los hipervínculos fueron creados para compartir contenidos y recursos en línea, no funcionan como ‘botones’, los botones tienen la capacidad de ejecutar acciones, sin embargo a medida que la internet se desarrolla se han ido adicionando algunas pseudo-acciones que permiten al usuario tener un mejor manejo de los recursos y al creador de contenidos de manejarlos sin necesidad de conocer acerca de programación.
Acciones
Abrir el programa para enviar emails
Los hipervínculos se pueden usar para comenzar a componer un email, de manera que automáticamente el programa de email predeterminado en el sistema se abra y los campos de a quién va dirigido el correo, el objetivo del correo o el cuerpo del mensaje ya estén incluidos.
<a href=”mailto:”>Quiero recibir más información y recetas</a>
<a href=”mailto:info@recetasdelaabuela.com”>Quiero recibir más información y recetas</a>
<a href=”mailto:info@recetasdelaabuela.com?subject=Quiero saber más”>Quiero recibir más información y recetas</a>
<a href=”mailto:info@recetasdelaabuela.com?subject=Quiero saber más&body=Hola, quiero obtener más información acerca de...”>Quiero recibir más información y recetas</a>
Iniciar llamadas
La web se ha adaptado a nuevas tecnologías, desde que los teléfonos se volvieron inteligentes, los usuarios pueden buscar contenidos en sus celulares, y si es así podrían hacer llamadas.
<a href=”tel:+57320548756”>Llamenos: 320 548 756</a>Contenido Externo
Los recursos que se quiere que el usuario se descarguen a la dispositivo, como imágenes o documentos Word o pdf, se adiciona el atributo ‘download’ que puede o no contener un valor, ese valor seria el nombre del archivo que se va a descargar.
<a href=”../descargas/Malteada_de_Chocolate.pdf”>Descargar la receta</a>
<a href=”../descargas/Malteada_de_Chocolate.pdf” target=”_blanck”>Descargar la receta</a>
<a href=”../descargas/Malteada_de_Chocolate.pdf” download>Descargar la receta</a>
<a href=”../descargas/Malteada_de_Chocolate.pdf” download=”Recetas_de_la_Abuela-Malteada_de_Chocolate.pdf”>Descargar la receta</a>
Barras de Navegación
Las barras de navegación son un componente común dentro de la web, de manera que HTML5 ha definido un elemento para darle más sentido a estos componentes. El elemento para estructurar navegación es ‘nav’, dentro de este se pueden desplegar las anclas ya sea en una lista u otro elemento estructural.
<nav>
<ul class="navbar">
<li><a href="#">Amasijos</a></li>
<li><a href="#">Malteada de Chocolate</a></li>
<li><a href="#">Malteada de Fresa</a></li>
</ul>
</nav>
Una página o documento HTML puede contener varios componentes de navegación, y corresponde a cada uno de nosotros en establecer cuáles son los más importantes. Las navegaciones principales deberán estar entre un elemento ‘nav’. Si la navegación no la consideramos principal o importante no necesitamos usar el elemento ‘nav’, como en los vínculos del footer. Además para enfatizar la navegación principal se puede usar un atributo ‘role’ que enfatiza el uso del elemento y un atributo ‘aria-label’ que mejora el sentido.
<nav role="navigation" aria-label="Menú Principal">ARIA roles:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Deja una respuesta