Hipervínculos

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 5

Hipervínculos, links o enlaces HTML. Etiqueta a.

Atributos
href, target y title. Tipos de links. img (CU00717B)
Resumen: Entrega nº17 del Tutorial básico del programador web: HTML desde cero.

Codificación aprenderaprogramar.com: CU00717B

HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.

Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos
hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página
de Internet, entre otras funciones.

Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá o se
ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también puede ser
una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una dirección de
correo electrónico o un programa.

Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos concretos
dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a textos de modo
que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino asociado a
ellos.

Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.

HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.

Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de
ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.

Esta técnica hace que los usuarios accedan de una manera más rápida a la información.

Para crear este tipo de enlaces hay que hacer dos operaciones:

• Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con
los enlaces).

• Poner enlaces que salten a los marcadores.

El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado):

<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las


nuevas versiones de HTML, aunque se usó bastante en el pasado).
<a id="nombre_del_marcador">Texto asociado al marcador</a>

El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el
mismo dentro de un documento HTML.

Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>

Por otro lado, el código de un enlace para que salte a un marcador.

Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a>

Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También hay que tener
en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, que es el que
hemos marcado subrayado en amarillo. No obstante, es válido no incluir texto alguno como veremos en el
siguiente código.

EJERCICIO

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>

<a name="arriba"></a>

En esta página puedes ir al <a href="#primero">primer</a> apartado,


al <a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>.

<a name="primero"><h1>Primer apartado</h1></a>

Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la
página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o
hacer zoom y conseguirás verlo.

<a name="segundo"><h1>Segundo apartado</h1></a>

Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de
la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto
aquí o hacer zoom y conseguirás verlo.

<a name="tercero"><h1>Tercer apartado</h1></a>

Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la
página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o
hacer zoom y conseguirás verlo.
Volver <a href="#arriba">arriba</a>.

</body>
</html>

Escribe el código anterior en un editor de texto como Notepad++ y guarda el archivo con el nombre
ejemplo.html. A continuación, haz doble clic en él y prueba a jugar con el archivo haciendo zoom en él o
añadiendo más texto para comprobar cómo funcionan los marcadores. El resultado debe ser similar al que se
muestra en la siguiente imagen.

Ahora crea otro archivo donde reemplaces los atributos name por id, guarda el archivo como ejemplo2.html.
Visualiza los resultados en tu navegador y comprueba si el efecto es el mismo. Para comprobar si tus
respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.

Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier
otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la
página incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas absolutas. Por
ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web
aprenderaprogramar.com</a>

En el hipervínculo distinguimos las siguientes partes:

- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>

- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro
de las comillas.

- Un texto que es el que ve el usuario como link.


Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que hemos
visto. El resultado debe ser algo así.

DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET

Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma ventana, pero
podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto es útil por ejemplo si
queremos abrir una página externa a nuestro sitio pero sin que el visitante pierda la nuestra. Para ello
utilizaremos el atributo target con alguna de las siguientes opciones.

Valores de target más habituales:

• _blank: Abre el documento vinculado en una ventana nueva del navegador.

• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo marco o
ventana que el vínculo.

Ejemplo:

<a href=”http://www.aprenderaprogramar.com” target=”_blank”>Ir aprenderaprogramar.com en una nueva


ventana</a>

EL ATRIBUTO TITLE PARA HIPERVÍNCULOS

Como última cuestión, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que
pongamos un hipervínculo en nuestras páginas. Este atributo es ‘title’ y con el pondremos título a nuestro
hipervínculo. Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en
que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que
hayamos puesto en el atributo ‘title’.

EJEMPLO

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>
<a href=”http://www.aprenderaprogramar.com” title=”Esto es un tool.tip”>Ir a
aprenderaprogramar.com</a>.
</body>
</html>

Escribe este código en el editor Notepad++ y guárdalo con el nombre de archivo ejemplo.html y comprueba
los resultados que se obtienen.

Prueba a cambiar el texto de title y a obtener otros resultados. Por ejemplo:

IMÁGENES COMO ENLACES

Para poner una imagen como enlace basta con crear un enlace y añadir en su interior en lugar de texto, una
imagen. Veamos un ejemplo:

<ahref="http://aprenderaprogramar.com"><img src="http://i.imgur.com/SpZyc.png"alt="Curso de HTML


desde cero"></a>

EJERCICIO

Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales
de Africa” 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

También podría gustarte