Prefacio L1 L2 L3 L4 L5 L6 L7 L8 Apéndices

 

2.1 Ligaduras Internas 

Cuando una página web es muy larga conviene crear ligaduras (links) internos que permita al usuario pasar fácilmente de una sección a otra. El lector hará clic sobre un texto (u otro elemento) y el cursor saltará al punto deseado dentro del documento.

El procedimiento a seguir para crear una ligadura interna involucra dos etapas: primero se “marca”  el destino (a donde saltará el cursor) y después se crea la ligadura en sí.

Para marcar el punto de destino se utiliza una “ancla” , elemento que se crea mediante el tag <A>. Cada ancla debe identificarse con un “nombre”, lo que se logra mediante la propiedad NAME. De esta manera:

 <A  NAME=1.2> 1.2 Programación HTML</A>

crea un ancla llamada 1.2 en la línea donde aparece el texto "Programación HTML".

Para crear la ligadura vinculada con esta ancla se utiliza también el tag <A>, pero indicando mediante la propiedad HREF el nombre del ancla deseada; por ejemplo:

 <A HREF=”#1.2”>Sección 2</A>

De esta manera en el navegador Sección 2 aparecerá identificada como una ligadura (usualmente en color azul y subrayado) que conduce (al hacer el usuario clic sobre ella) al punto del documento donde se encuentra la línea de texto “Programación HTML”, que fue marcado con el ancla 1.2.

Ilustremos con un ejemplo.

Los códigos

<HTML>
<HEAD>
<TITLE>Ligaduras internas</TITLE>
</HEAD>

<BODY>

<H2>Indice</H2>
<UL TYPE=CIRCLE>
<LI>Lenguaje HTML
<LI>Tags
</UL>

<HR>

<H3>Lenguaje HTML</H3>
<P>HTML (HyperText Markup Language) es un lenguaje muy sencillo
que permite describir hipertexto, es decir, texto presentado de
forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de información relacionadas,
y con inserciones multimedia (gráficos, sonido...) La descripción
se basa en especificar en el texto la estructura lógica del contenido
(títulos, párrafos de texto normal, enumeraciones, definiciones,
citas, etc) así como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva,
negrita, o un gráfico determinado) y dejar que luego la presentación
final de dicho hipertexto se realice por un programa especializado
(como Internet Explorer, o Netscape).</P>

<H3>Tags</H3>
<P>La mayoría de los efectos se especifican de la misma forma:
rodeando el texto que se quiere marcar entre dos etiquetas o 
directivas (tags, en inglés), que definen el efecto o unidad lógica
que se desea. Las etiquetas están formadas por determinados códigos
metidos entre los signos < y >, y con la barra / cuando se trata de 
la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto>
para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen 
una vez en el lugar del texto donde queramos que aparezca el efecto
concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un      
gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí>
(más adelante ya veremos la directiva concreta que se utiliza)</P>

</BODY>

</HTML>

 producen la salida

Como se puede observar, parte de la primera sección y la segunda sección completa quedan ocultas a la vista del usuario. Frecuentemente en casos como éste (documentos con índice o tabla de contenidos) se crean ligaduras internas para facilitarle al usuario la rápida localización de la información deseada.

 

Si modificamos el código fuente de la siguiente manera:

 

<HTML>
<HEAD>
<TITLE>Ligaduras internas</TITLE>
</HEAD>

<BODY>

<H2>Indice</H2>
<UL TYPE=CIRCLE>
<A HREF="#1"><LI>Lenguaje HTML</A>
<A HREF="#2"><LI>Tags</A>
</UL>

<HR>

<A NAME="1"><H3>Lenguaje HTML</H3></A>
<P>HTML (HyperText Markup Language) es un lenguaje muy sencillo
que permite describir hipertexto, es decir, texto presentado de
forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de información relacionadas,
y con inserciones multimedia (gráficos, sonido...) La descripción
se basa en especificar en el texto la estructura lógica del contenido
(títulos, párrafos de texto normal, enumeraciones, definiciones,
citas, etc) así como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva,
negrita, o un gráfico determinado) y dejar que luego la presentación
final de dicho hipertexto se realice por un programa especializado
(como Internet Explorer, o Netscape).</P>

<A NAME="2"><H3>Tags</H3></A>
<P>La mayoría de los efectos se especifican de la misma forma:
rodeando el texto que se quiere marcar entre dos etiquetas o 
directivas (tags, en inglés), que definen el efecto o unidad lógica
que se desea. Las etiquetas están formadas por determinados códigos
metidos entre los signos < y >, y con la barra / cuando se trata de 
la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto>
para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen 
una vez en el lugar del texto donde queramos que aparezca el efecto
concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un    
gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí>
(más adelante ya veremos la directiva concreta que se utiliza)</P>

</BODY>

</HTML>

 

Se crean ligaduras internas que permiten saltar al párrafo relacionado con un elemento del índice al hacer clic en él.

 

La figura de abajo muestra el resultado de las modificaciones.

 

 

Si el usuario hace clic en la ligadura Tags del índice, el cursor salta al comienzo del correspondiente párrafo, marcado para ello con un ancla.

 

| Lección 2 | 2.1 | 2.2 | 2.3 |