Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

8d. Links a Secciones de un Página

Ya hemos visto cómo enlazar con otras páginas web, tanto si han sido creadas por usted o se las ha encontrado en Internet. Pero, ¿y si quiere conectarse a una parte concreta dentro un documento? ¡CLARO QUE PUEDE!

Objetivos

Después de esta lección será capaz de:

Crear una marca de referencia oculta para una sección en particular dentro de un archivo HTML.
Construir un link a una sección particular dentro de un archivo HTML.
Construir un link a una sección particular dentro de otro archivo HTML.
Crear una tabla de contenidos en hipertexto para una página web.

Lección

Nota: Si no tiene el documento de trabajo de la lección anterior, bájese una copia ahora.

El Anchor con Nombre

Un anchor con nombre es una marca de referencia oculta a una sección particular de su archivo HTML. Esto se puede usar para enlazar con una sección diferente de la misma página si es larga, o ir a una sección de otra página. Por ejemplo, en esta página que está viendo he creado una marca oculta llamada "check" que apunta al encabezado de más adelante denominado "compruebe su Trabajo". Después he escrito un link que conecta con esa sección de este documento. Después de hacer click sobre un anchor link con este nombre su Browser irá a esa línea, dejándola como primera línea de la ventana.

Aquí tiene un ejemplo que puede probar ahoramismo. Vaya a Compruebe Su Trabajo. Cuando esté ahí busque un link que le devuelva a este lugar.

El formato HTML para crear un anchor connombre es:


     <a name="NAME">Texto con el que conectar a</a>

o, para el link anterior:


     <a name="check">Compruebe Su Trabajo</a>

Note que esto difiere ligeramente del anchor link <a href=... que aprendimos en la lección 8a.

Escribiendo un Link a un Anchor con Nombre

Cuando usted quiera crear un link hipertexto (o un "anchor link", vea la lección 8a) a un anchor con nombre, use el siguiente HTML:


     <a href="#xxxxx">texto que actúa como hipertexto</a>

o, para el link que le llevó a la sección de más adelante:


     Vaya a <a href="#check">Compruebe Su Trabajo</a>

El símbolo "#" instruye a su web Browser para que busque a lo largo del documento HTML por un anchor con nombre llamado "xxxxxx" o, en nuestro ejemplo, "check". Cuando lo selecciona, o hace click en el hipertexto, le muestra laparte del documento que contiene el anchor con nombre en la parte superior de la pantalla.

Añadiendo Anchors con Nombre a la Lección de Web de Volcanes

Ahora construiremos una tabla de contenidos para nuestra lección que aparecerá en la parte superior de nuestra página sobre volcanes. Las entradas para ello serán los propios encabezados que ya tenemos creados. Cada uno de ellos actuará como un link hipertexto a una sección particular de nuestra lección.

El primer paso es crear el anchor con nombre para cada uno de los encabezados de sección en nuestra Web de Volcanes:

Abra su archivo index.htm en el editor de textos.
Encuentre el encabezado para la Introducción. Cámbielo de:
```
<h2>Introducción</h2>
```
de modo que sea esto:
```
<h2><a name="intro">Introducción</a></h2>
```
NOTA: Acaba de marcar la línea que contiene el encabezado "Introducción" con una marca de referencia oculta, el anchor de nombre "intro"

De manera similar cambie todas las etiquetas de encabezados de tipo <h2> en las restantes secciones:


  <h2><a name="term">Terminología de Volcanes</A></h2>
  
  <h2><a name="usa">Lugares Volcánicos en USA</A></h2>
  
  <h2><a name="mars">Lugares Volcánicos en Marte</A></h2>
  
  <h2><a name="project">Proyectos de Investigación</A></h2>

Si Actualiza ahora en su web Browser no notará cambios visibles; los anchor con nombre que hemos añadido están ocultos a la vista.

Añadiendo Links a un Anchor con Nombre en el Mismo Documento

Ahora construiremos una tabla de contenidos que aparecerá en la parte superior de la pantalla. Usaremos una lista sin ordenar (vea la lección 6 para más información sobre listas) para crearla:

Si aún no lo tiene abierto, abra el archivo index.htm en el editor de texto.
Después de la primera frase bajo el encabezado de Web de Volcanes introduzca el siguiente texto:
```
<hr>
<b>En Esta Lección...</b>
<ul><i>
<li>Introducción
<li>Terminología de Volcanes
<li>Lugares Volcánicos en USA
<li>Lugares Volcánicos en Marte
<li>Proyectos de Investigación</i>
</ul>
```
NOTA: Este índice está delimitado por arriba y por abajo por dos líneas sólidas usando la etiqueta <hr>. El estilo cursiva se usa en las entradas de texto. En este punto tan sólo hemos introducido los textos de las entradas del índice. Más adelante añadiremos el HTML para activar los links.
Salve y Actualice en su web Browser.

Finalmente queremos que cada ítem de la lista actúe como un link hipertexto a otra sección del documento. Para ello usaremos una variación del anchor link básico descrito en la lección 8a. Mejor que conectar a otro archivo, enlazaremos con uno de los anchors con nombre (las marcas ocultas que creó hace rato) dentro del mismo archivo HTML. Indicaremos un anchor con nombre precediendo la marca de referencia con un símbolo "#":

Abra su archivo index.htm en el editor de textos.
Vaya al primer ítem de la lista en su sección del índice. Cámbielo de:
```
    <li>Introducción
```
de modo que quede como:
```
    <li><a href="#intro">Introducción</a>
```

Ahora debería llenar los restantes links con la correspondiente información de modo que la sección se asemeje a:


<hr>
<b>En Esta Lección...</b>
<ul><i>
<li><a href="#intro">Introducción</a>
<li><a href="#term">Terminología de Volcanes</a>
<li><a href="#usa">Lugares Volcánicos en USA</a>
<li><a href="#mars">Lugares Volcánicos en Marte</a>
<li><a href="#project">Proyectos de Investigación</a></i>
</ul>

Salve y Actualice en su web Browser. Cuando haga click sobre uno de los ítems del índice el Browser debería mostrar la sección asociada a él en la parte superior de la ventana.

Añadiendo Links a un Anchor con Nombre en Otro Documento

También puede crear un link que salte a una sección de otro documento HTML que disponga de un anchor con nombre. El HTML para construir un link a un anchor con nombre en otro documento HTML local es:


     <a href=fichero.htm#NAME>Texto para activar el link</a>

y si el documento existe en otro sitio web:


    <a href="http://www.cheese.org/pub/recipe.htm#colby">Quesos Colby</a>

En la lección 8a habíamos creado un link hipertexto que nos llevaba de una sección de nuestro documento sobre el Monte Sta. Elena a msh.htm, un archivo HTML distinto. Ahora añadiremos un link en ese segundo documento que nos devolverá a la sección original de la página principal sobre volcanes.

Abra su archivo msh.htm en el editor de textos.
Cerca del final del HTML (pero antes de la etiqueta </body>) introduzca el siguiente texto:
```
<hr>
<a href="index.htm#usa">Volver a la <i>Web de Volcanes</i></a>
```
NOTA: Hemos incluído la etiqueta de estilo cursiva <i>...</i> dentro del texto marcado por el anchor de nombre "usa".
Salve y Actualice en su web Browser. Cuando haga click sobre el link al final de la página del archivo msh.htm debería volver a la sección "Lugares Volcánicos en USA" de la lección sobre volcanes.

En este caso el link es justo el nombre de otro archivo HTML, msh.htm, en el mismo directorio que el archivo index.htm. No obstante, puede usar la URL completa (vea la lección 7) para enlazar con un anchor con nombre en un archivo en otro ordenador remoto. Por ejemplo, para crear un link a la sección de "Introducción" de un archivo almacenado en el servidor WWW del MCLI la sintaxis sería:


   <a href=http://www.mcli.dist.maricopa.edu/tut/final/index.htm#intro>
      Introducción a la Web de Volcanes</a>

La marca de referencia "#anchor_name" se coloca al final de la URL.

Compruebe Su Trabajo

Compare su página web con un ejemplo de cómo debería aparecer el documento. Si su página web fuera diferente de la del ejemplo o los anchors con nombre no conectaran correctamente revise en el editor el texto que introdujo.

Ejemplo del uso del link para volver a la sección que describe el anchor con nombre...

Revisión

¿Cómo identifica un anchor con nombre?
¿Cuáles eran los pasos para crear un link a secciones diferentes dentro de un mismo documento?
¿Cómo se modifica un link para que conecte con un anchor con nombre en otro documento HTML?
¿Cómo se crea una tabla de contenidos para una página Web?
¿Cuál es la diferencia de funciones entre las etiquetas <a href="...> y <a name="...>?

Práctica Independiente

Cree anchors con nombre para los encabezados de su propia página web y construya un índice que enlace con las distintas subsecciones.

A continuación....

En la lección siguiente aprenderá cómo hacer que una imagen haga de link hypertexto.

IR A.... | Índice de Lecciones | anterior: "Links al Mundo - Sitios Internet" | siguiente: "Links HyperGráficos" |

Writing HTML Lección 8d: Links a Secciones de un Página

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net

URL: