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: