Vínculos en HTML
Este tutorial explica profundamente la
naturaleza y el uso de vínculos en HTML. No sólo mostrará la sintaxis básica de
los vínculos, sino que también revisará varias características que son
habitualmente ignoradas y que pueden proveer mucha información invisible para
diferentes intérpretes (por ejemplo, motores de búsqueda).
Tabla de contenidos
1 El tag HTML a
2 El atributo target
3 Información extra
4 Marcadores (vínculos dentro de la página)
5 Vínculos de e-mail
6 El tag HTML link
Los vínculos son una parte vital del HTML y
todo el concepto de World Wide Web. Internet es considerada una red debido a
cómo los vínculos conectan piezas separados de documentos, basándose en la idea
de una simple referencia potenciada por la interactividad. Como resultado, un
simple click te lleva del documento referente al mencionado en el vínculo.
Un vínculo en un documento HTML puede ser
básicamente considerado como una referencia a otro recurso. Esta referencia
establece una relación implícita entre el documento referente y el recurso
vinculado. Los vínculos pueden ser clasificados como visuales (ubicados en el
contenido del documento) u ocultos (definiendo información relacional
generalizada).
El tag HTML
El elemento HTML a puede ser usado para
insertar vínculos dentro del contenido de un documento. Esto puede ayudar a los
autores a recomendar otros recursos relacionados al documento actual que los
usuarios pueden, generalmente, accesar con un simple click en el contenido
vinculado. El contenido vinculado es simplemente el contenido del elemento HTML
a (es decir, la pieza de código HTML que está ubicada entre el tag de apertura
y el de cierre). Nota que los vínculos son usualmente representados de manera
diferente por los navegadores para ayudar a los usuarios a reconocerlos.
Existen muchas formas de construir un
vínculo, pero básicamente un vínculo debe contener al menos un contenido y la
dirección del recurso (definida con el atributo "href"). En el
ejemplo siguiente definiremos un vínculo básico:
Código
El <a
href="http://www.htmlquick.com/es/reference/tags/a.html">tag HTML
a</a> explicado
Vista
el tag HTML a explicado
Nota: para aprender más acerca de como
localizar recursos refiérete al tutorial: "Organizando un sitio web".
En el ejemplo anterior creamos un simple
vínculo usando texto como contenido, pero puedes vincular prácticamente
cualquier cosa usando el elemento HTML a. En el siguiente ejemplo haremos un
vínculo con una proción de documento que incluye una imágen y texto.
Código
<a
href="http://www.htmlquick.com/es/reference/tags/a.html">
<img
src="http://www.htmlquick.com/img/p/link-to-us/banner.jpg"
alt="Logo de HTMLQuick.com" width="468"
height="60" /><br />
tag HTML a
</a>
Vista
tag HTML a
Nota el cierre " />" utilizado
en tags vacíos para lograr la compatibilidad con XHTML.
Cuando utilizamos texto como contenido de
un vínculo (de ahora en adelante nos referiremos a este texto como, "texto
ancla" o "anchor text") exista una cosa a tomar en cuenta: el
texto debe describir brevemente (como el elemento HTML title) el contenido del
recurso vinculado. Esto es algo librado a la consideración de cada autor, pero
la utilización de textos ancla descriptivos pueden proveer valiosa información
a los usuarios y motores de búsqueda (muy importante en la promoción de un
sitio).
Otra cosa a considerar es que al vincular a
un directorio (no a un archivo, por ejemplo, http://www.htmlquick.com) debes
agregar siempre una barra al final de la URL (por ejemplo,
http://www.htmlquick.com/). Aún cuando la mayoría de los navegadores o
servidores resuelven automáticamente este problema, es una buena práctica que
sumará a la correctitud de tu código.
El atributo target
El atributo target permite a los autores
decidir dónde se cargará el recurso vinculado mediante el elemento HTML a (por
ejemplo, puede ser cargado en una nueva ventana del navegador, en un
"marco" específico si existe un "frameset", o simplemente
en la misma ventana). Esto puede resultar útil algunas veces pero también hace
al código incompatible con el estándar estricto de XHTML. si realmente quieres
utilizarlo tendrás que optar por un "Transitional DTD" (en el tag
HTML !DOCTYPE).
En este ejemplo, mostramos el código para
dos vínculos: el primero es abierto en una nueva ventana y el segundo en un
marco llamado "principal".
Código
<a
href="http://www.url.com" target="_blank">URL</a>
<a
href="http://www.url.com"
target="principal">URL</a>
Para aprender más acerca del atributo
"target", revisa la referencia para el elemento HTML a y el tipo
frame-target.
Vínculos en HTML 2
Tabla de contenidos
1 El tag HTML a
2 El atributo target
3 Información extra
4 Marcadores (vínculos dentro de la página)
5 Vínculos de e-mail
6 El tag HTML link
Información extra
Existen muchos atributos disponibles para
los tags de vínculos que pueden proveer información crucial que a veces
(dependiendo del navegador) puede no ser visual, pero puede proveer mucha
información para potros visitantes como los motores de búsqueda. Estos
atributos pueden ser usados de forma separada o conjunta, dependiendo del caso.
En el ejemplo siguiente definiremos un
vínculo que se verá exactamente como el del primer ejemplo, pero agregará
información que puede resultar muy valuable para los motores de búsqueda.
Código
Aprende más acerca del <a
href="http://www.htmlquick.com/es/reference/tags/a.html"
type="text/html" hreflang="es" charset="utf-8"
rel="help">tag HTML a</a>.
Vista
Aprende más acerca del tag HTML a.
De esta forma no solo hemos provisto un
vínculo a los usuarios, que los ayudará a aprender más acerca de este tag, sino
que además hemos agregado esta información no visal acerca del recurso
vinculado: el tipo del contenido (ver tipos MIME), el lenguaje (ver códigos de
lenguaje), la codificación de caracteres utilizada (ver codificación de
caracteres), y la relación que existe entre este documento y el vinculado.
Para aprender más acerca de cómo proveer
información extra en los vínculos visita la referencia del elemento HTML a y
del tag HTML link.
Marcadores (vínculos dentro de la página)
Los marcadores funcionan exactamente como
los vínculos pero dentro de la página. Son usados para referirse a un documento
y más específicamente a una porción de él.
Para insertar un marcador sólo necesitas
colocar un elemento HTML a con un atributo "id" ó "name"
(usa "id" para XHTML Strict o ambos, "id" y
"name" con el mismo valos para compatibilidad). Ejemplo:
Código
Aquí ubicaremos nuestro primer <a
id="marcador1" name="marcador1">marcador</a>, de
modo que más tarde podamos referirnos a él con un vínculo.
Vista
Aquí ubicaremos nuestro primer marcador, de
modo que más tarde podamos referirnos a él con un vínculo.
Una vez que el marcador se ha establecido,
puedes referirte a él insertando un vínculo (con el elemento HTML a) y
utilizando el símbolo "#" seguido del nombre del marcador como URI
para el atributo "href". Recuerda que puedes referirte a un marcador
de la misma forma que te refieres a un vínculo usando una URI relativa (por
ejemplo, #bookmark1 ó links.html#bookmark1) o la URL completa (por ejemplo,
http://www.htmlquick.com/es/tutorials/links.html#bookmark1). Tal vez ya notaste
que puedes hacer un vínculo a un marcador en otra página los cual te llevará
primero a la página referida y luego a la porción de texto del marcador.
En el próximo ejemplo haremos un vínculo a
un marcador previo en esta página con el título de "Información
extra" (con el "id" de "extra-information"), para que
veas como funciona.
Código
<a
href="#extra-information">Sección de "información extra"
en el tutorial de vínculos</a>
Vista
Sección de "información extra" en
el tutorial de vínculos
Vínculos de e-mail
Los vínculos de e-mail son una variación de
los vínculos comunes muy fácil de construir que pueden resultar útiles para
apuntar a direcciones de e-mail. La acción usal llevada a cabo por los
navegadores en estos casos es abrir el cliente de e-mail presente en el sistema
(en la computadora del visitante) y preparar automáticamente un e-mail con los
campor pre-llenados. Esto puede resultar práctico para acortar el camino a aquellos
visitantes que utilizan estos clientes, pero como puedes ver, los visitantes
que no tienen clientes de e-mail instalados en sus computadoras o no tienen su
cuenta de correo configurada, encontrarán a estos vínculos difícilmente útiles.
De todos modos, este tipo de vínculos
tienen un significado especial: apuntan y describen una dirección específica de
e-mail, que es semánticamente diferente del texto plano, y la dirección puede
igualmente ser copiada y pegada en cualquier otro servicio de e-mail (por
ejemplo, aplicaciones de web-mail que trabajan sobre el navegador). Mi
recomendación es usarlos siempre que sea posible.
Estos vínculos también son insertados con
el elemento HTML a, pero con una pequeña variación: el atributo
"href" debe proveer la dirección de e-mail después del texto
"mailto:". En el siguiente ejemplo haremos un vínculo a la dirección
de correo del webmaster de este sitio:
Código
<a
href="mailto:webmaster@htmlquick.com">E-mail del webmaster de este
sitio</a>
Vista
E-mail del webmaster de este sitio
Atención: de acuerdo con el estándar HTML,
los vínculos de e-mail sólo aceptan una dirección de e-mail como contenido del
atributo "href", dado que el contenido de este atributo sólo puede
ser una URL o una URL mailto. Esto excluye cualquier otra información que
usualmente se agrega a los vínculos de e-mail como direcciones adicionales,
asuntos, contenidos, etc.
El tag
HTML link
Este tipo de vínculos defina información
relacional generalizada para el documento que habitualmente no es mostrada en
los navegadores (unque sí puede mostrarse, por ejemplo, como información en
alguna barra del navegador), pero que puede proveer información valiosa para
otros intérpretes como motores de bñusqueda. Por ejemplo, el tag HTML link puede
referirse a un documento que actúa como índice para este documento o apuntar a
un recurso que puede ser usado como una lista de clases de hojas de estilos.
En el ejemplo siguiente definiremos seis
tags que proveerán esta información vinculativa: un documento que actúa como
índice, el documento anterior y el siguiente en una secuencia, un documento
proporcionando declaraciones de derechos de copia, una versión alternativa del
documento diseñada para ser impresa y otra en inglés, y una hoja de estilos conteniendo
clases.
<head>
<link
rel="index" href="indice.html" />
<link
rel="prev" href="doc1.html" />
<link
rel="next" href="doc3.html" />
<link
rel="copyright" href="copyright.html" />
<link
rel="alternate" media="print"
href="doc2-impresora.html" />
<link
rel="alternate" lang="en" href="doc2-ingles.html"
/>
<link
type="text/css" href="basico.css" media="screen"
/>
</head>
Eso ha sido todo en este tutorial de
vínculos. Nos vemos en la próxima lección.
No hay comentarios:
Publicar un comentario