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.
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.