PROGRAMACIÓN HTML I

SEMANA 6
Hipervínculos

Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE
utilizarDOCUMENTO
los contenidos paraCONTIENE LAdeSEMANA
fines comerciales 6
ninguna clase.
 2
ESTE DOCUMENTO CONTIENE LA SEMANA 6
ÍNDICE

HIPERVÍNCULOS .................................................................................................................................. 4
OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. HIPERVÍNCULO ............................................................................................................................ 5
1.1. CARACTERÍSTICAS................................................................................................................ 5
1.1.1. PARTES DE UN HIPERVÍNCULO .................................................................................... 5
1.2. PROPIEDADES ...................................................................................................................... 5
1.3. FUNCIONES .......................................................................................................................... 6
1.3.1. ENLACES A OTRA PÁGINA WEB ................................................................................... 6
2. HIPERVÍNCULOS A ARCHIVOS PARA DESCARGAR ....................................................................... 6
3. HIPERVÍNCULOS DESDE UN BOTÓN ............................................................................................ 7
3.1. ANCLAS (ENLACES EN LA MISMA PÁGINA) ......................................................................... 8
3.1.1. CARACTERÍSTICAS........................................................................................................ 8
3.1.2. PROPIEDADES .............................................................................................................. 8
3.1.3. FUNCIONES .................................................................................................................. 9
COMENTARIO FINAL.......................................................................................................................... 15
REFERENCIAS........................................................................................................................................ 16

3
ESTE DOCUMENTO CONTIENE LA SEMANA 6
HIPERVÍNCULOS

OBJETIVOS ESPECÍFICOS
 Aplicar las características y propiedades de un hipervínculo y un ancla en el diseño y
construcción de una página web.

INTRODUCCIÓN
Al momento de tomar la decisión de desarrollar una página web, es muy común que esta se
componga de más de un archivo HTML, es decir, que existan en la página principal enlaces que
permitan dirigirse a un lugar dentro de la misma página, o a otra página que forme parte de la web
diseñada.

Para llevar a cabo estos enlaces se utilizan los hipervínculos. Estos elementos de HTML permiten
dirigir al usuario a otros sectores de la página o, como se mencionó anteriormente, llevarlo a
nuevos archivos HTML que forman parte del mismo proyecto.

En esta semana se aprenderá a utilizar los hipervínculos, sus características y la forma en la que se
configuran para llamados directos a archivos a descargar o a través de un botón dentro de la
página web.

4
ESTE DOCUMENTO CONTIENE LA SEMANA 6
 1. HIPERVÍNCULO

Este traspaso se realiza a través de elementos llamados hipervínculos, que corresponden a texto
(hipertexto) o imágenes (hipermedia) que al dar clic sobre ellos nos derivan a otros sectores de la
página u a otra página.

1.1. CARACTERÍSTICAS

Un hipevínculo entonces es un enlace a una página distinta u otro sector de la misma página.

Para la creación de hipervínculos utilizaremos el elemento <a>.

1.1.1. PARTES DE UN HIPERVÍNCULO

Según Gómez, Alcayde y González (2011), para crear un hipervínculos se debe utilizar el elemento
<a> de la siguiente forma:

La etiqueta <a> incluirá el atributo href para determinar el destino del hipervínculo, seguidamente
se debe especificar el texto del vínculo, luego debe ser cerrada con </a>. A continuación se ve un
ejemplo de esto:

<a href="url o dirección de la página o del sector a enlazar ">Texto para el enlace</a>

1.2. PROPIEDADES

Generalmente los hipertextos dentro de la página aparecen en color azul y subrayados. Pero es
posible cambiar dicho color con el uso del elemento Font. Por ejemplo, se puede definir el texto
del hipervínculo de color rojo.

<a href="url"><font color="#RED">Texto para el enlace</font></a>

5
ESTE DOCUMENTO CONTIENE LA SEMANA 6
 1.3. FUNCIONES

1.3.1. ENLACES A OTRA PÁGINA WEB

Para realizar enlaces a otras páginas web se pueden emplear hipervínculos. En el ejemplo que se
presenta a continuación se puede apreciar un enlace a la página principal del sitio de IACC, desde
un archivo HTML.

2. HIPERVÍNCULOS A ARCHIVOS PARA DESCARGAR

También es posible utilizar este elemento para vincular archivos que se ubican de manera local en
un computador y mostrarlos en el sitio, con el objetivo de que puedan ser descargados por los
visitantes.

Estos archivos pueden ser documentos PDF, planillas Excel y otros.

Por ejemplo:

Suponiendo que se quiere que los clientes que visitan un sitio de ventas minoristas puedan bajar la
lista de precios de los productos que se encuentra almacenada como planilla de Excel, entonces se
crea el hipervínculo, especificando en el atributo HREF el nombre preciso, considerando las
mayúsculas y minúsculas del archivo Excel.

<a href="Precios.xlsx">Descargar Lista de Precios</a>

6
ESTE DOCUMENTO CONTIENE LA SEMANA 6
HIPERVÍNCULOS A DIRECCIONES DE CORREO ELECTRÓNICO

También es posible vincular direcciones de correo: al hacer clic sobre el hipervínculo se abre una
pantalla del correo electrónico del cliente, en la cual aparece por defecto la dirección de e-mail
que se ha señalado en el atributo HREF.

Por ejemplo:

<a href="mailto:info@cursohtml.cl">Envienos sus comentarios</a>

En el navegador se visualiza de la siguiente forma:

3. HIPERVÍNCULOS DESDE UN BOTÓN

Podemos usar un botón (objeto “button” que se revisará en detalle más adelante) como elemento
de hipervínculo de la siguiente forma:

<a href="http://www.iacc.cl" target="_blank"><input value="ir a sitio de IACC"

type="button"></a>

Funcionalmente será presentado en el navegador de la siguiente forma:

7
ESTE DOCUMENTO CONTIENE LA SEMANA 6
 3.1. ANCLAS (ENLACES EN LA MISMA PÁGINA)

También es posible vincular distintas partes de un documento. Por ejemplo, se publica un libro
completo en una sola página, entonces se puede enlazar un índice del libro que estaría ubicado al
comienzo de la página con cada una de sus partes respectivas, así se favorece el desplazamiento
del visitante a lo largo de la página.

3.1.1. CARACTERÍSTICAS

Para realizar enlaces en la misma página se debe realizar lo siguiente:

Primero se debe determinar cuáles serán las partes de la página que se vincularán. Si se toma el
ejemplo anterior, el comienzo de cada capítulo del libro que está señalado en el índice sería un
buen lugar para establecer anclas, también llamadas marcadores.

Los nombres de anclas o marcadores son case-sensitive, es decir, diferencian entre

mayúsculas y minúsculas. Esto implica que es sumamente importante tener claros los
nombres de los marcadores al referenciarlos.

3.1.2. PROPIEDADES

Para definir los marcadores o anclas utilizaremos el elemento <a> de la siguiente forma:

<a name="nombre_del_marcador">

8
ESTE DOCUMENTO CONTIENE LA SEMANA 6
Si se considera el ejemplo del libro digital, los marcadores en el índice debieran quedar de la
siguiente manera:

Al comienzo del capítulo 1: <a name="capitulo_1">

Al comienzo del capítulo 2: <a name="capitulo_2">

En segundo lugar, se deben crear los hipervínculos a estas anclas o marcadores.

Siguiendo con el ejemplo, pada cada opción del índice se considerará lo siguiente:

<A HREF="#capitulo_1 "> Ir al Capítulo 1</A>

<A HREF="#capitulo_2 "> Ir al Capítulo 2</A>

Cabe destacar que dentro del atributo HREF, el nombre del ancla va antecedida por un #.

3.1.3. FUNCIONES

ENLACE A UN ANCLA DETERMINADA

Tomando como base el ejemplo de libro digital, la visualización en HTML y en el navegador

quedaría de la siguiente manera:

9
ESTE DOCUMENTO CONTIENE LA SEMANA 6
Si se desea vincular un ancla en otra página que se desplegará en otra ventana, se debe anteponer
el nombre de la página en el enlace al nombre del ancla.

Por ejemplo:

<a href="otrapagina.htm#ancla>Ir a ancla en otra página</a>

ENLACE A VENTANAS DETERMINADAS

Para elaborar enlaces que permitan definir si se abrirá el vínculo que se hizo en una misma
ventana o en otra, se utiliza el atributo target. A continuación se conocerá cómo se utiliza.

10
ESTE DOCUMENTO CONTIENE LA SEMANA 6
ATRIBUTO TARGET

Al crear un hipervínculo, la página que es vinculada se abre en la misma ventana en la cual se

encuentra la página original (o que hace el llamado). Es posible cambiar esto indicando que la
página que se desea vincular se abrirá en una nueva ventana.

Mediante el atributo target es posible realizar estos cambios en el funcionamiento del

hipervínculo. Según Gómez, Alcayde y González (óp. cit.), los posibles valores para el atributo son:

_blank: se abre la página en una nueva ventana del navegador.

_self: se abrirá el documento en la misma ventana (opción por defecto).

A continuación se presenta un ejemplo en el cual se da la instrucción de abrir el sitio de IACC en

una nueva ventana:

<a href="http://www.iacc.cl" target="_blank">Visitar sitio de IACC </a>

En el navegador, el texto del hipervínculo aparece en azul y subrayado:

TECLAS DE ACCESO DIRECTO CON ENLACES

Mediante el atributo accesskey es posible asignar el uso de una tecla para activar un enlace. Esto
quiere decir que en vez de que se dé un clic sobre el texto o imagen del hipervínculo, es posible
solamente presionar dicha tecla del keyboard para así ejecutar el enlace.

En el ejemplo es posible visitar el sitio www.nasa.gov mediante el uso de la tecla “t”:

<a href="http://www.nasa.gov/" target="_blank" accesskey="t">t = visita www.nasa.gov</a >

11
ESTE DOCUMENTO CONTIENE LA SEMANA 6
ORDEN DE TABULACIÓN DE LOS ENLACES

Mediante el atributo tabindex, es posible cambiar el orden de tabulación en los hipervínculos

presentes en la página web, es decir, se puede establecer el orden que se tendrá al moverse en la
página con la tecla de tabulador.

En el siguiente ejemplo, el foco saltará entre 4 hipervínculos según el orden estipulado por el
atributo tabindex, comenzando de una posición 1 hasta una 4.

<a href="prueba1.html" tabindex="1">primero</a> -

<a href=" prueba2.html" tabindex="2">segundo</a><br>
<a href=" prueba3.html" tabindex="3">tercero</a> -
<a href=" prueba4.html" tabindex="4">cuarto</a>

PROPIEDADES DE LOS ENLACES

A continuación se verán las distintas propiedades que, según Gómez, Alcayde y González (óp. cit.),
tiene un hipervínculo y la forma en que se utilizan:

TYPE (CONTENT-TYPE)

Este atributo permite determinar qué tipo de archivo se ha vinculado, por ejemplo una página
HTML, un archivo de imagen gif, etc.

<a href="Emblema.gif" type="image/gif">Mi emblema</a><br />

<a href="Nota.html" type="text/html">Lee mi nota</a>

REL (LINK-TYPES)

Indica la relación del recurso destino en referencia a la página que contiene el hipervínculo.

<a rel="prev" href="nota1.html">vuelva a la nota anterior</a>

<a rel="next" href="nota3.html">vaya a la nota siguiente</a>
<a rel="copyright" href="copyright.html">Derechos de autor de esta nota</a>
<a rel="alternate" href="english-version.html" hreflang="en">Versión en inglés de la nota</a>

12
ESTE DOCUMENTO CONTIENE LA SEMANA 6
REV (LINK-TYPES)

Indica la relación que existe entre el recurso destino con la página documento actual.

<a rev="index" href="nota1.html">nota 1</a>

<a rev="index" href="nota2.html">nota 2</a>

ATRIBUTO TITLE PARA HIPERVÍNCULOS

ATRIBUTO TITLE

Es posible, mediante este atributo, documentar el hipervínculo con un texto que será desplegado
al pasar el puntero del mouse sobre el hipervínculo, sea texto o imagen. En este sentido este
atributo muestra el texto que está previamente configurado, al posicionar el cursor sobre el
hipervínculo, sin necesidad de hacer clic.

A continuación se presenta un ejemplo del uso de este atributo en la página de IACC.

<a href="http://www.iacc.cl" target="_blank" title="Para ingresar al sitio de IACC">

Visitar sitio de IACC </a>

Y en el navegador se obtendrá este efecto:

IMÁGENES COMO ENLACES

También es posible utilizar una imagen como objeto del hipervínculo. Este tipo recibe el nombre
de hipermedia y se configura de la siguiente manera: se combina el elemento <a> con el elemento
para la inserción de imágenes ya revisado <img>.

13
ESTE DOCUMENTO CONTIENE LA SEMANA 6
A continuación se presenta un ejemplo en el cual se utiliza el logo de IACC para vincular a la página
del instituto:

<a href="http://www.iacc.cl" target="_blank"><img src="logo.png" alt="Visite sitio de IACC"></a>

Lo que se visualiza en el navegador es lo siguiente:

14
ESTE DOCUMENTO CONTIENE LA SEMANA 6
COMENTARIO FINAL
Al finalizar la semana se pudo ver la utilidad que tienen los hipervínculos en el diseño de páginas
web, dado que estos permiten hacer llamados a otros sitios dentro de la misma página, o llamados
a otras páginas que pueden o no pertenecer al mismo proyecto.

La utilización de los hipervínculos resulta sencilla al conocer las etiquetas que se emplean, y las
diversas propiedades que se pueden configurar para adaptarlos a lo que se espera en la página
(color, forma de apertura del vínculo, entre otros). Su utilización no implica mayores
complicaciones.

Esta semana suma un tema de gran importancia que debe ser tomado en cuenta a la hora de
diseñar páginas web a los vistos anteriormente.

15
ESTE DOCUMENTO CONTIENE LA SEMANA 6
REFERENCIAS
Gómez, J.; Alcayde, A. & González, M. (2011). Construcción de páginas web. 1.ª edición. Madrid:

Ra-Ma Editorial.

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2016). Hipervínculos. Programación HTML I. Semana 6.

16
ESTE DOCUMENTO CONTIENE LA SEMANA 6
 17
ESTE DOCUMENTO CONTIENE LA SEMANA 6