ENLACES

( <a name="inicio"></a> )

Las páginas web se caracterizan porque contienen enlaces que nos llevan de unas páginas a otras. El elemento que nos ofrece HTML para llevarlo a cabo son los enlaces o vínculos.

Los enlaces se construyen con la etiqueta <a></a>:

Atributos:

Atributo Valor Descripción
href url destino del enlace
name texto nombre del ancla. Se utiliza para saltar a un lugar concreto dentro del documento.
target ver tabla siguiente donde va a cargar el navegador la página del enlace

Valores de target:

Valor Descripción
_self El navegador carga la página en el mismo marco
_blank El navegador carga la página en una nueva ventana
_top El navegador carga la página en la misma ventana pero ocupando todo el espacio de la misma, es decir, anula la definición de los marcos para esa página.
_parent El navegador carga la página en una ventana con la misma estructura que tenía la página padre, es decir, la página de la que procede. .

Con href especificamos el destino del enlace que puede ser:

  • Un fichero:

    <a href="fichero.html">Fichero</a>
    <a href="../directorio/fichero.html">Fichero en otro directorio</a>

    Ejemplo:

    Código Resultado
    <a href="index.html" target="_blank">Índice</a> Índice

  • Un lugar dentro del documento actual:

    En este caso hay que definir un destino dentro del documento y para ello se utiliza el atributo name. Nos tenemos que colocar en el punto destino dentro del documento y escribir:

    <a name="aqui">Aquí</a>
    y el enlace a ese punto sería:
    <a href="#aqui">Voy</a>

    Si escribirmos <a href="#">A ninguna parte</a> el enlace no va a ningún sitio.

    Ejemplo:

    Código Resultado
    <a href="#inicio">Voy al principio del documento</a> Voy al principio del documento

  • Una URL:
protocolo://dirección_del_sitio:puerto/directorio/nombre_archivo

http://servidor/directorio/archivo#marcador
http://servidor/directorio/archivo?parametros
ftp://usuario:contraseña@servidor/directorio/archivo
mailto:usuario@servidor
telnet://usuario:contraseña@servidor:puerto
file:///F:/public_html/cursos/html3ed/Frames.htm

Ejemplo:

Código Resultado
<a href="http://www.ugr.es" target="_blank">Universidad de Granada</a>
<a href="mailto:bprieto@atc.ugr.es">Escríbeme</a>
Universidad de Granada
Escríbeme


El elemento <link> también sirve para definir un vínculo. La diferencia con <a> es que sólo puede aparecer dentro de la cabecera <HEAD></HEAD> de un documento.

Atributos:

Atributo Valor Descripción
href url destino del enlace
hreflang texto idioma
target ver tabla donde va a cargar el navegador la página del enlace
type tipos indica un estilo para el elemento (text/html, application/postcript, etc)
rel texto vínculos directos
rev texto vínculos inversos
media medio medio en el que se va a representar (print)

Puede aparecer cualquier número de veces. LINK tiene varios usos:

  • Ofrecer cierta información relacional. Por ejemplo, si el documento actual es "Ejemplo2.html", podemos indicar su relación con otros documentos vinculados a él.

    Código Resultado
    <HEAD>
    <TITLE>Ejemplo 2</TITLE>
    <LINK rel="Index" href="../Ejemplos.html">
    <LINK rel="Next" href="Ejemplo3.html">
    <LINK rel="Prev" href="Ejemplo1.html">
    </HEAD>

  • Vincular una hoja de estilo externa a un documento. Con el atributo type se especifica el lenguaje de la hoja de estilo, y con el atributo media se especifica el medio o medios de representación deseados. Por ejemplo:
    <HEAD>
    <link rel="stylesheet" href="default.css">
    </HEAD>

  • Proporcionar información a los motores de búsqueda, como por ejemplo: vínculos a versiones alternativas de un documento escritas en otro idioma, vínculos a versiones alternativas de un documento diseñadas para medios diferentes, por ejemplo, una versión especial para imprimir, ó vínculos a la página inicial de un conjunto de documentos. Por ejemplo, le decimos a los motores de búsqueda dónde encontrar la versión impresa de un manual:

    <HEAD>
    <TITLE>Manual</TITLE>
    <LINK media="print" title="El manual en postscript" type="application/postscript" rel="alternate" href="http://www.sitio.com/manual/postscript.ps">
    </HEAD>

En los documentos HTML muchas veces se ponen los enlaces y referencias a recursos externos como imágenes, aplicaciones, hojas de estilo, etc con URLs relativas. El elemento <BASE> permite especificar la dirección base, es decir, la dirección de la que parten todas esas referencias relativas. Este elemento debe aparecer en la sección HEAD del documento HTML, antes de cualquier elemento que haga referencia a una fuente externa. La información de ruta especificada por el elemento BASE sólo afecta a los elementos del documento en el cual aparece el elemento. Su único atributo es href, que es la dirección base. Ejemplo:

<HTML>
<HEAD>
<TITLE>Curso de diseño de páginas web</TITLE>
<BASE href="http://atc.ugr.es/curso_web/index.html">
</HEAD>

<BODY>
<A href="../ejemplos/ejemplo1.htm">Ver ejemplo</A>
</BODY>
</HTML>


Ejercicio:

En el documento index.html añadir un enlace a la facultad de ciencias (http://www.ugr.es/~decacien/) que se abra en una página nueva y otro dentro del documento que vaya al principio de la página.