Tutorial de HTML (XIII)

Enlaces HTML

Los enlaces en HTML nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url.

Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de enlaces que hay y veas sus características. Así pues, vamos a ello:

La etiqueta <a>

Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así.

Atributo href

Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedaría así:

<a href=“enlace”>Pincha aquí para ir al destino del enlace</a>

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es el siguiente:

<a href="https://educarfilando.wordpress.com/2018/01/25/tutorial-de-html/">Tutorial de HTML de EducarFilando</a>

Si pincháramos en el enlace iríamos directamente al mapa del tutorial completo de HTML. Fijaros en lo que hablábamos: podemos apreciar todas las partes de la url.

 

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros os vamos a presentar los dos más importantes:

• http: Este es el protocolo básico de los servidores webs.


• https: Este protocolo se diferencia del anterior en que es un protocolo cifrado. Es decir, la información que se envía y se recibe con esa url está siendo encriptada para que nadie más pueda interceptar y usar esa información. Las páginas con este protocolo son las conocidas como “páginas seguras”. Esta encriptación de los datos produce una pequeña ralentización de la página debido a que los datos se envían cifrados.

Mailto

La url mailto es aquella que te lleva directamente a una dirección de correo y, más concretamente, a redactar un mensaje. Una dirección mailto sería la siguiente:

<a href="mailto:correodeejemplo@correodeejemplo.com">correodeejemplo@correodeejemplo.com</a>

Fíjate en el ejemplo que acabamos de poner. Nosotros, como texto para albergar el enlace, hemos puesto la misma dirección que la que va a abrir la url. ¿Por qué?

El programa de correo que abre el navegador es aquel que el usuario tenga como predefinido. Nosotros te aconsejamos que como texto para albergar el enlace pongas la dirección de correo electrónico. Windows por defecto tiene predeterminado el Outlook y al pinchar en el enlace lo abre directamente. Muchos usuarios prefieren copiar la dirección y pegarla en su programa de correo.

La etiqueta target:

La etiqueta sirve para definir la forma en la que se accederá a la nueva url. Esta etiqueta la escribimos dentro del enlace para predefinirla. Puede ser de diferentes tipos:

• _self: Es el valor por defecto del parámetro target. El enlace se abrirá en el mismo marco en el que está alojado.


• _blank: Para hacer que ese enlace se abra en una ventana a parte.


• _top: Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.


• _parent : Muestra la nueva página en el <frameset> que contiene al marco donde se encuentra alojado el enlace. La etiqueta <frameset> la explicamos en otro artículo.

Anclas HTML

Un ancla nos sirve para dirigir al usuario a otra parte distinta pero dentro del mismo fichero en el que estamos. Para crear un ancla debemos crear primero el lugar al que queremos acceder. Debemos escribir lo siguiente:

<a name=“ancla”>

Y después debemos escribir un enlace con el código siguiente:

<a href= “#ancla”>Enlace para acceder al ancla</a>

 

 

EJERCICIO

Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales de África” como texto a mostrar.

Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los leones y un enlace externo (link) de tipo texto cuyo texto será: “Pulsa aquí para saber más sobre leones” y que llevará con un target blank a la siguiente dirección web de wikipedia: http://es.wikipedia.org/wiki/Panthera_leo

Un encabezado H2 donde indicaremos “Tigres” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los tigres y una imagen que debe mostrar como tooltip “Pulsa aquí para saber más sobre tigres”. Al pulsar sobre la imagen se llevará al usuario a un target blank dirigido a la dirección web http://es.wikipedia.org/wiki/Panthera_tigris

En la parte inferior incluiremos tres links internos (para lo que tendremos que haber definido las anclas correspondientes) que indicarán: “Ir al inicio – Ir a leones – Ir a tigres (Según el link que pulse el usuario, se le llevará al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).

 

 

 

Tutorial de HTML (XIV)