Como utilizar vínculos e hipervínculos en una página web en codigo HTML:
Hipervínculos: son elementos de una página HTML que, al hacer clic sobre ellos, permiten a los lectores navegar hacia una nueva dirección. Al navegar por la Web, los hipervínculos son los que conectan las páginas Web unas con otras. Se usan para dirigirse: - a otro punto en el mismo documento
- a un archivo HTML en una ubicación diferente del equipo que aloja la página
- a otro equipo
HTML ofrece muchas de las posibilidades de publicación convencionales para la creación de textos enriquecidos y documentos estructurados, pero lo que lo separa de la mayoría de los otros lenguajes para el formato de documentos son sus características para hipertexto y para documentos interactivos. Esta sección presenta el vínculo (o enlace, o hipervínculo), la estructura básica del hipertexto. Un vínculo es una conexión desde un recurso web a otro. Aunque es un concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web.
Un vínculo tiene dos extremos (llamados en inglés anchors, anclas), y una dirección. El vínculo comienza en el "ancla de origen" (origen del vínculo) y apunta al "ancla destino" (destino del vínculo), que puede ser cualquier recurso de la Web (p.ej., una imagen, un videoclip, un archivo de sonido, un programa, un documento HTML, un elemento dentro de un documento HTML, etc.).
12.1.1 Visitar un recurso vinculado
El comportamiento por defecto asociado a un vínculo es la obtención de otro recurso de la Web. Normalmente este comportamiento se logra implícitamente seleccionando el vínculo (p.ej., haciendo clic con el ratón, a través del teclado, etc.).
El siguiente extracto HTML contiene dos vínculos, uno cuyo destino es un documento HTML llamado "capitulo2.html" y otro cuyo destino es la imagen GIF del fichero "bosque.gif":
<BODY>
...texto...
<P>Encontrarás mucho más en el <A href="capitulo2.html">capítulo dos</A>.
Mira también este <A href="../imagenes/bosque.gif">mapa del bosque encantado.</A>
</BODY>
Al activar estos vínculos (haciendo clic con el ratón, a través del teclado, por comandos de voz, etc.), los usuarios pueden visitar estos recursos. Obsérvese que el atributo href de cada origen de vínculo especifica la dirección del destino por medio de un URI.
El destino de un vínculo puede ser un elemento contenido en un documento HTML. Se le debe asignar un nombre al destino, y cualquier URI que se refiera a este destino debe incluir el nombre como identificador de fragmento.
Los destinos de vínculo en los documentos HTML pueden especificarse o bien mediante el elemento A (dándoles un nombre con el atributo name), o mediante cualquier otro elemento (dándole un nombre con el atributo id).
Así, por ejemplo, un autor podría crear una tabla de contenidos cuyas entradas estuvieran vinculadas con los elementos de encabezado H2, H3, etc., del mismo documento. Si usáramos el elemento A para crear los destinos de los vínculos, escribiríamos:
<H1>Tabla de Contenidos</H1>
<P><A href="#seccion1">Introducción</A><BR>
<A href="#seccion2">Antecedentes</A><BR>
<A href="#seccion2.1">Experiencias personales</A><BR>
...el resto de la tabla de contenidos...
...el cuerpo del documento...
<H2><A name="seccion1">Introducción</A></H2>
...sección 1...
<H2><A name="seccion2">Antecedentes</A></H2>
...sección 2...
<H3><A name="seccion2.1">Experiencias personales</A></H3>
...sección 2.1...
Podemos lograr el mismo efecto haciendo que los elementos de encabezado sean ellos mismos los destinos de los vínculos:
<H1>Tabla de Contenidos</H1>
<P><A href="#seccion1">Introducción</A><BR>
<A href="#seccion2">Antecedentes</A><BR>
<A href="#seccion2.1">Experiencias personales</A><BR>
...el resto de la tabla de contenidos...
...el cuerpo del documento...
<H2 id="seccion1">Introducción</H2>
...sección 1...
<H2 id="seccion2">Antecedentes</H2>
...sección 2...
<H3 id="seccion2.1">Experiencias personales</H3>
...sección 2.1...
La utilización más común de un vínculo es con mucho la obtención de otro recurso de la Web, tal y como se ilustra en los ejemplos precedentes. Sin embargo, los autores pueden insertar en sus documentos vínculos que expresen otras relaciones entre recursos distintas a "activar este vínculo para visitar ese recurso relacionado". Para los vínculos que expresan otros tipos de relaciones, se especifican uno o más tipos de vínculo en el origen del vínculo.
Por ejemplo, los vínculos definidos por el elemento LINK pueden describir la posición de un documento dentro de una serie de documentos. En el extracto que sigue, los vínculos contenidos en el documento llamado "Capítulo 5" apuntan a los capítulos anterior y siguiente:
<HEAD>
...otras informaciones de cabecera...
<TITLE>Capítulo 5</TITLE>
<LINK rel="prev" href="capitulo4.html">
<LINK rel="next" href="capitulo6.html">
</HEAD>
El tipo de vínculo del primer vínculo es "prev" ("anterior"), y el del segundo es "next" ("siguiente"), dos de los diferentes tipos de vínculos reconocidos. Los vínculos especificados con LINK no son representados con los contenidos del documento, aunque los agentes de usuario pueden representarlos de otras maneras (p.ej., como herramientas de navegación).
Incluso aunque no se usen para navegar, estos vínculos pueden ser interpretados de formas interesantes. Por ejemplo, un agente de usuario que imprima una serie de documentos HTML como un documento único, puede usar la información de estos vínculos como la base para formar un documento lineal coherente. Más adelante se da más información sobre la utilización de vínculos para el beneficio de los motores de búsqueda.
2. Especificación de vínculos
Aunque algunos elementos y atributos de HTML crean vínculos a otros recursos (p.ej., el elemento IMG, el elemento FORM, etc.), este capítulo se refiere a los vínculos creados con los elementos LINK y A. El elemento LINK sólo puede aparecer en la cabecera del documento. El elemento A sólo puede aparecer en el cuerpo.
Si el atributo href del elemento A tiene algún valor, el elemento define un origen de vínculo que puede ser activado por el usuario para obtener un recurso de la Web. El origen del vínculo está en el lugar donde aparece el elemento A y el destino del vínculo es el recurso web.
El agente de usuario puede manipular el recurso obtenido de diferentes maneras: abriendo un nuevo documento HTML en la misma ventana del agente de usuario, abriendo un nuevo documento HTML en una ventana diferente, iniciando un nuevo programa que maneje el recurso, etc. Como el elemento A tiene contenido (texto, imágenes, etc.), los agentes de usuario pueden representar este contenido de modo tal que se indique la presencia de un vínculo (p.ej., subrayando el contenido).
Si el atributo name o el atributo id del elemento A toman algún valor, el elemento define un posible destino de otros vínculos.
El elemento LINK define una relación entre el documento actual y otro recurso. Aunque LINK no tiene contenido, la relación que define puede ser representada por algunos agentes de usuario.
Se puede especificar el atributo title tanto para A como para LINK para añadir información sobre la naturaleza de un vínculo. Esta información puede ser pronunciada por un agente de usuario, representada como una indicación visual ("tool-tip"), producir un cambio en la imagen del cursor, etc.
Así, podemos desarrollar uno de los ejemplos anteriores proporcionando un título para cada vínculo:
<BODY>
...texto...
<P>Encontrarás mucho más en el <A href="capitulo2.html"
title="Ir al capítulo 2">capítulo dos</A>.
<A href="./capitulo2.html"
title="Obtener capítulo dos.">capítulo dos</A>.
Mira también este <A href="../imagenes/bosque.gif"
title="imagen GIF del bosque encantado">mapa del
bosque encantado.</A>
</BODY>
Debido a que los vínculos pueden apuntar a documentos codificados con diferentes codificaciones de caracteres, los elementos A y LINK soportan el atributo charset. Este atributo permite a los autores avisar a los agentes de usuario sobre la codificación de los datos del otro extremo del vínculo.
El atributo hreflang proporciona a los agentes de usuario información sobre el idioma del recurso del otro extremo del vínculo, igual que el atributo lang proporciona información sobre el idioma del contenido o de los valores de los atributos de un elemento.
Los agentes de usuario, provistos de esta información adicional, deberían ser capaces de evitar la presentación de "basura" al usuario. En su lugar, pueden o bien localizar los recursos necesarios para la presentación correcta del documento o, si no pueden localizar los recursos, deberían al menos advertir al usuario de que el documento será ilegible, explicando las causas.
No hay comentarios:
Publicar un comentario