Índice
1 - Etiqueta <a> en HTML5
Comúnmente cuando estamos creando webs, necesitamos enlazar partes de o bien nuestra web o de otra diferente. Para ello utilizamos enlaces. Para los que utilizamos la etiqueta <a>texto</a>.
El texto o el bloque que esta entre medio de la etiqueta de apertura y cierre es el que va a ser afectado. Si incluimos una imagen, la imagen entera será afectada por el enlace.
<a>enlace</a>
<a><img src="imagen1.jpg"/></a>2 – Atributos de enlaces en HTML5
Pero esta etiqueta por si sola no hace nada. Necesita de unos atributos que la acompañen. Por ejemplo, debemos indicar a que página va a hacer referencia.
2.1 – atributo referencia
Cuando referenciamos otra página, ya sea en nuestro dominio, o en un dominio externo, debemos hacerlo con el atributo href = “” el cual, como vimos en el vídeo anterior acepta rutas relativas de las páginas a las que hace referencia. Así como enlaces completos.
<a href="pagina2.html">enlace</a>
<a href="pagina2.html"><img src="imagen1.jpg"/></a>Pero esto no es lo único que podemos hacer con el atributo href, el propio atributo tiene diferentes configuraciones.
A - Correo electrónico en HTML
Si dentro de la etiqueta href introducimos el texto “mailto:[email protected]” el navegador nos abrirá automáticamente el servidor de correo y además podemos indicar atributos como son el título del mensaje o una copia oculta.
<a href="mailto:[email protected]">[email protected]</a><br/>B - Teléfono en HTML
En este caso si introducimos dentro de la etiqueta href el texto “tel:+34 555555555” cuando el usuario pulse en él sea abrirá una aplicación, como puede ser Skype en el PC o la de las llamadas normal en el móvil para que llamemos a ese número.
<a href="tel:+34 555 555 55">555 555 555</a>2.2 – Atributo target en HTML
Como te habrás dado cuenta cuando navegas por internet, y pulsas en un enlace, unas veces este se abre en la misma ventana del navegador y otras veces en otra. Esto es debido al atributo target, el cual nos permite configurar esta acción. Las opciones son las siguientes:
_blank: abre la web en otra ventana del navegador-
_self: abre la web en la propia ventana.
Cuando dejamos este atributo sin poner, el navegador entiende que es _self, en HMTL4 había mas opciones, pero ya no están para HTML5.
Este <a href="pagina2.html" target="_blank" >enlace</a> nos manda a Netmentor.2.4 – significado de los enlaces
Cuando creamos un enlace, debemos indicar un atributo que al pasar el cursor por encima nos indicara un poco de información extra en forma de tooltip.
Este <a href="pagina2.html" target="_blank" title="curso programacion web">enlace</a> nos manda a Netmentor.<br/>2.5 – Enlaces a la propia página HTML
Finalmente podemos enlazar diferentes puntos dentro de nuestra página, como haríamos en un índice del Word. Para ello vamos a crear un enlace en la misma página, utilizando el atributo href en el enlace. Pero no solo eso, ya que en el destinatario debemos introducir que ese es el destinatario. Para ello vamos a asignarles un id. Como recordamos del segundo post sobre los atributos en HTML es un atributo común en todas las etiquetas, y que como recordamos tiene que ser único.
En la etiqueta destino, debemos indicarle un id
<h2 id="titulo1">Título 1</h2>Y posteriormente, en el enlace, debemos indicar ese id, añadiendo previamente el carácter # por lo que nos quedará algo así
<a href="#titulo1">Título 1</a><br/>Como vemos si pulsamos sobre el enlace, nos manda directamente a la posición del id.
3 – Comprobar que el enlace funciona.
Como podemos comprobar, para saber que algo es un enlace, el navegador por defecto nos lo indica de una manera muy clara.
Ya que cuando pasamos por encima el cursor cambia, además que es de otro color.
Finalmente, si pulsamos sobre él, el color del enlace cambia indicando que este ya ha sido pulsado.
Todas estas propiedades se pueden cambiar y configurar, veremos como cuando lleguemos a la parte de CSS.
