Está en la página 1de 4

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Enlaces en HTML
Los enlaces son uno de los elementos más encontrado con frecuencia en las páginas web, ellos nos
permiten ir de una página web a otra con solo realizar un click.

Enlaces HTML - Hiperenlaces


Se puede definir que los enlaces o link en HTML son hiperenlaces o hyperlinks. Gracias a ellos tu
puedes hacer un click en un enlace y prácticamente saltar a otro documento, cuando pasamos el
puntero del mouse por sobre un enlace la imagen del puntero, generalmente una flecha, se
transforma en una pequeña mano.
Un enlace o link necesariamente no tiene que ser un texto, el puede ser una imagen o cualquier
otro elemento HTML.

En HTML los enlaces son definidos por la etiqueta <a>.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h2> Enlaces - Links</h2>
<p><a href="http://www.gerenciavirtual.com.mx/">Visita Nuestra Web</h2>
</body>
</html>

Código 52.html

Como pueden observar dentro de la etiqueta <a> está el atributo href, este se encarga de
especificar la dirección de destino (http://www.gerenciavirtual.net.ve) del enlace. En este
ejemplo el texto enlazado es la parte visible del enlace. Realizando un click sobre este, nos enviará
a la dirección específica.

Enlaces locales HTML


El ejemplo anterior utiliza una dirección URL (Uniform Resource Locator) absoluta
(http://www.gerenciavirtual.net.ve ), un enlace local (link en el mismo sitio web) se
especifica con una dirección relativa (sin incluir http//www….).

<a href="turoriales.html">Página de Tutoriales</a>

Veamos un ejemplo
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h2> Enlaces locales</h2>
<p><a href="16.html">Ver imagen con atributos de largo y ancho</h2>
</body>
</html>

Código 53.html

Colores en los Enlaces HTML


Por defecto, un enlace aparece con las siguientes especificaciones:
 Enlace no visitado de color azul subrayado.
 Enlace visitado de color purpura y subrayado.
 Enlace activo de color rojo y subrayado.

Se pueden realizar cambios definiéndolo en los estilos CSS:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
a: link {
color: blue;
background-color: transparent;
text decoration: none;
}
a: visited {
color: pink;
background-color: transparent;
text decoration: none;
}
a: hover {
color: red;
background-color: transparent;
text decoration: underline;
}
</style>
</head>
<body>
<h2> Enlaces - Links</h2>
<p><a href="http://www.gerenciavirtual.com.mx/">Visita Nuestra Web</h2>
</body>
</html>

Código 54.html
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Enlaces HTML – El atributo “target”


El atributo target especifica donde abrir el documento enlazado, pudiendo tener uno de los
siguientes valores:
 _blank - Abre el documento enlazado en una ventana nueva.
 _self - Abre el documento enlazado en la misma ventana desde donde se le hizo click.
 _parent - Abre el documento enlazado en el “frame” (cuadro o marco).
 _top - - Abre el documento enlazado en la totalidad de la ventana.
 framenanme - Abre el documento enlazado en el “frame” nombrado.

Si su página web esta circunscripta a un frame (ya en desuso) se puede salir de ello utilizando el
atributo target=_”top” .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h2> Enlaces locales</h2>
<p><a href="16.html" target="_blank">Ver imagen con atributos de largo y ancho</h2>
</body>
</html>

Código 55.html

Pueden observar que desde la página 55.html se abre una ventana nueva con la página 16.html.

Enlaces HTML – Imágenes como enlace


Es bastante común el uso de imágenes como enlace.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<a href=" http://www.gerenciavirtual.com.mx/">
<img src="imagenes/logo.jpg" alt="Gerencia Virtual" style="border:0;">
</a>
</body>
</html>

Código 56.html

En la propiedad style incluimos el atributo border:0; para prevenir que navegadores como IE9
y anteriores no coloquen un borde alrededor de la imagen cuando esta tiene un enlace asociado.
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Título en el enlace HTML


El atributo title especifica información extra acerca del elemento, esta información tiende a
mostrarse como un texto de información al colocar el puntero del mouse sobre la imagen.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<a href=" http://www.gerenciavirtual.com.mx/" title="Ir Gerencia Virtual">
Visita nuestra Web</a>
</body>
</html>

Código 57.html

Enlaces HTML – Creando Bookmarks


El bookmarks o marcador es utilizado para permitir a los lectores ir a partes específicas dentro del
mismo documento, es decir es un enlace dentro del mismo documento.
Para crear un enlace al bookmark es necesario crear primero el bookmark y luego agregar el
enlace a este. Cuando el enlace es ejecutado por un click, la página hará un scroll, arriba o abajo,
llevándonos al bookmark.

Paso 1 crear el bookmark

<h2 id="C4">Capítulo 2</h2>

Paso 2 agregar el enlace al bookmark (ir al capítulo 2), dentro de la misma página

<a href="#C4">Ir al Capítulo 2</h2>

Este bookmark también sirve para ser enlazado desde otra página web.
<a href="pagina_bookmark.html#C4">Ir al Capítulo 2 de la pagina bookmark</h2>

 El elemento <a> define un enlace.


 El atributo href define la dirección de destino del enlace.
 El atributo target establece donde abrir el documento enlazado.
 En el elemento <img> dentro de la etiqueta <a> permite usar la imagen como enlace.
 El atributo id establece un bookmark en una página (id=”valor”).
 El atributo href establece el enlace al bookmark (href=”#valor”).