Hipervínculo en HTML

Explorando los enlaces en HTML: Conectando y navegando a través de la Web

ÍNDICE

• Hipervínculo en HTML: Atributos
• Hipervínculo en HTML: Correo electrónico
• Hipervínculo en HTML: Teléfono
• Hipervínculo en HTML: Enlaces dentro de nuestra web

Hipervínculo en HTML: Atributos

Aunque solemos utilizar el término página web para referirnos a un blog o eCommerce, el concepto adecuado sería sitio web, ya que este se compone de varias páginas. Los enlaces con HTML5 tienen la utilidad de unir varias páginas, sean estas de nuestro sitio web, o de terceros. La idea es sencilla, facilitar la navegación a quien entre en nuestra web. En este post conoceremos varios ejemplos de hipervínculos en HTML.

Para enlazar una página con otra deberemos utilizar la siguiente etiqueta:

<a href="páginadecontacto.html">Contacto</a>

La palabra «Contacto» correspondería al texto ancla o anchor text, es decir, es la palabra donde al pinchar nos llevará a la página llamada «páginadecontacto.html».

El atributo sería «href«. Un atributo establece el valor específico para un elemento, siendo en este caso su valor «páginadecontacto.html». En HTML los atributos siempre van seguidos del signo «=».

En resumen, el atributo «href» nos indica a donde va ha ir el enlace, que será la páginadecontacto.html.

Hipervínculo en HTML: Correo electrónico

No solamente se pueden enlazar páginas, sino que también podemos establecer un link que nos lleve a nuestro correo electrónico. Un ejemplo lo aclarará mejor:

<h3>Buzón</h3> <a href=”mailto:info@movieshop.es”>Enviar correo</a>
<h3>Buzón</h3> <a href=”mailto:info@bitacorajuridico.com”>Enviar correo</a>

Como ya vimos en la unidad segunda, el h3 correspondería a un subtítulo, estableciendo sus parámetros en la palabra «Buzón», que nos quedaría conforme este nivel.

El atributo «href» nos llevaría al valor «mailto:info@movieshop.es», correspondiente al correo electrónico de esta plataforma. Lo que se debe indicar es el parámetro «mailto:» seguido del correo que deseemos.

Por último «Enviar correo» sería el enlace a pinchar para que se nos abriera, por ejemplo, el programa Outlook.

La etiqueta «<h3>» y la palabra «Buzón», se han puesto para hacer más estética la página. Naturalmente si no la colocásemos no pasaría nada.

Hipervínculo en HTML: Teléfono

Como cada vez es más habitual que se navegue en internet por el móvil, ya que de hecho ya ha superado su utilización a la del ordenador, se aconseja expresar en la página de contactos nuestro número de teléfono, puesto que al pinchar, nos marcará a nuestro móvil. En HTML sería así:

<a href="tel:648137895">648 13 78 95</a>

El atributo sería el mismo, «href«, y su valor «tel:» seguido de nuestro número de teléfono, siendo este el enlace, que no hay que confundir con el número de teléfono con espacios, que es el texto que pondremos para pinchar. Es decir, si el texto lo sustituyéramos por una palabra, también se nos llamaría al pincharla. Por ejemplo:

<a href="tel:648137895">Llamar a Atención al Cliente</a>

El teléfono sería marcado si pincháramos en «Llamar a Atención al Cliente», por lo que el número de teléfono a marcar tiene que expresarse en su valor «tel:«. En nuestra página de contacto de Bitácora Jurídico podreís ver un ejemplo de todo lo explicado anteriormente.

Hipervínculo en HTML: Enlaces dentro de nuestra web

A veces nos interesa establecer enlaces dentro de una sola página cuando esta tiene demasiado contenido. En este caso su atributo varía a «id«. Un ejemplo sería el siguiente:

<h3 id="nintendo">Catálogo de juegos de Nintendo</h3>

Lo anterior nos está expresando que el atributo «id» se llama «nintendo» y que cuando pinchemos en el enlace nos llevará a la sección de nuestra página que se denomina «Catálogo de juegos de Nintendo». Veamos ahora un ejemplo del enlace, que como se ha expresado en anteriores apartados, su atributo es «href«:

<a href="#nintendo">Ir a juegos de Nintendo</a>

El valor del atributo «href» tiene que ir con el símbolo almohadilla, seguido del nombre que le hemos dado, que en este caso es «nintendo».

Indicar que el nombre del atributo «id» nunca se puede repetir, pues generaría un conflicto al haber dos valores iguales.