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

8a. Links a Ficheros Locales

øPuede mi documento hablar consigo mismo? Bueno... al menos pueden ser enlazados.

Objetivos

DespuÈs de esta lecciÛn ser· capaz de:

Crar un link a un documento HTML en el mismo directorio o carpeta que su documento principal.
Crear un link que visualice una imagen gr·fica.
Crear un link a un archivo en un directorio o carpeta diferente del de su documento principal.
Reorganizar la estructura de su web.

LecciÛn

Ahora va a dar su primer paso con los links hipertexto, enlazando su documento con una segunda p·gina web.. Estos links se denominan "locales" porque residen en el mismo ordenador en el que est· el documento principal. (y, por lo tanto, no tienen que ser buscados en otro ordenador de la red) TambiÈn tendr· que arrastrase por la estructura de su "creciente" Web Site (øVÈ como esto empieza a ser algo m·s que una mera p·gina web?).

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

Links a Ficheros Locales

El link anchor m·s simple es aquel que abre otro archivo HTML que estÈ en el mismo directorio que el archivo actualmente mostrado en el Browser. El cÛdigo HTML para hacer esto es:


     <a href="nombre_de_archivo.htm">texto que se corresponda con el link</a>

Piense en esto como que "a" es por "anchor link" y "href" por "hypertext reference".

El nombre del archivo debe ser el de otro archivo HTML. El texto, cualquiera, que estÈ entre el primer <a ...> y el ™ltimo </a> ser· el "hipertexto" que aparecer· subrayado.

Ahora siga estos pasos para construirse un link a un archivo en su documento:

Abra su documento volc.htm en el editor de textos.
En primer lugar, tras el encabezado Lugares Volc·nicos en USA, aÒada el siguiente texto que presenta los dos volcanes que se discutieron en lecciones anteriores.
```
     Listados a continuaciÛn se encuentran dos lugares en los Estados Unidos que
     est·n considerados como ·reas volc·nicas "activas".
```

Debajo del encabezado "Monte Sta. Elena" aÒada:


     El 18 de Mayo de 1980, despuÈs de un largo periodo de inactividad, esta tranquila
     montaÒa en Washington permitiÛ <a href="msh.htm">observar con detalle</a>
     la mec·nica de estas erupciones altamente explosivas.

El texto "observar con detalle" enlazar· con otro documento llamado msh.htm. Este segundo documento no existe a™n; lo crearemos en los pasos (5) y (6).

Guarde y cierre su documento HTML.
Ahora, con su editor de textos, abra otra ventana para un Nuevo documento.

Teclee el siguiente texto en su nueva ventana:


     <html>
     <head>
     <title>Monte Sta. Elena</title>
     </head>
     <body>
     <h1>Monte Sta. Elena</h1>
     Los sobresalientes pinos de esta, una vez, tranquila montaÒa
     fueron derribados como juguetes.
     </body>
     </html>

Guarde este archivo como msh.htm en el mismo directorio de su fichero HTML de trabajo (Volc.htm).
Actualice el fichero Volc.htm en su web Browser.
Compruebe el link hipertexto de las palabras "observar con detalle". Cuando se haga click sobre Èl, deberÌa conectar con esta nueva p·gina acerca del Monte Santa Elena.

Creando un Link a un Gr·fico

En la lecciÛn 7a aprendimos a ver un gr·fico "inline" que aparecÌa en una p·gina web. Con la etiqueta de anchor podemos incluso crear un link al archivo gr·fico. Cuando se hace click en el link abrir· el archivo de la imagen y la mostrar· en una p·gina vacÌa o bien su Browser autom·ticamente lanzar· una aplicaciÛn externa de "ayuda" que muestre la imagen.

El link m·s simple es a un fichero en el mismo directorio o carpeta que el documento que lo llama. El cÛdigo para crear un link hipertexto a un gr·fico es el mismo que el de antes para crear un enlace a otro documento HTML:


  <a href="nombre_de_fichero.gif">texto que se corresponda con el link</a>

donde nombre_de_fichero.gif es el nombre del archivo de la imagen GIF.

Ahora siga estos pasos para aÒadir un link a un archivo gr·fico en su documento HTML:

Primero, necesitar· bajarse una copia de la imagen GIF del Centro de Descarga de Im·genes de la LecciÛn 8a.
Abra el archivo msh.htm en el editor de textos.

Modifique el texto para incluir un link a la imagen del Monte Santa Elena.


     Los sobresalientes pinos de esta, una vez, tranquila montaÒa
     fueron <a href="msh.gif">derribados como juguetes</a>.

Guarde el fichero msh.htm y actualice en su web Browser.
Haga ahora click en el link reciÈn creado en el paso (3).
Ahora deberÌa ver una imagen de ·rboles caÌdos.

Links a otros directorios

Las etiquetas anchor pueden tambiÈn enlazar con un documento HTML o un gr·fico en otro directorio o carpeta en relaciÛn con el documento que contiene el enlace. Por ejemplo, en nuestra lecciÛn deseamos mantener las im·genes en un directorio especial denominado pictures. A medida que crea m·s y m·s archivos HTML le resultar· muy ™til mantener las im·genes en su propia ·rea. Hag·moslo ahora:

Cree un subdirectorio o subcarpeta en su ordenador denominada pictures en el mismo lugar donde tenga guardado su archivo Volc.htm.
Mueva el archivo msh.gif a este nuevo subdirectorio.
Abra el archivo msh.htm en su editor de textos.
Edite la etiqueta del link de la imagen para que quede como:
```
     Los sobresalientes pinos de esta, una vez, tranquila montaÒa
     fueron <a href="pictures/msh.gif">derribados como juguetes</a>.
```
NOTA: Con HTML puede conseguir que su web Browser abra cualquier documento/gr·fico a un nivel de directorios inferior del nivel actual usando el caracter "/" que indica el cambio a un nivel de directorio m·s profundo, por ejemplo, "pictures".
Guarde el documento HTML y ActualÌcelo en el Browser.

Si todo ha ido bien, el link del p·rrafo que hablaba de los ·rboles caÌdos deberÌa apuntar ahora al archivo gr·fico almacenado en el subdirectorio o carpeta pictures.

Links a un Nivel de Directorio Superior

Los tipos de links que hemos construÌdo aquÌ se conocen como links "relativos"; esto es, que el web Browser puede construir la URL completa bas·ndose en la direcciÛn de la p·gina HTML actual y obtener la informaciÛn del link desde las etiquetas <a href=...>. Esto es muy potente porque puede construir todas sus p·ginas web en un ordenador, probarlas y moverlas a otro ordenador. Todos los links relativos permanecer·n intactos.

En esta lecciÛn hemos visto cÛmo construir un hiperlink a un documento que estÈ almacenado en un directorio inferior de aquel en el que se encuentra la p·gina HTML actual. Note que puede incluso construir un link que conecte a un nivel de directorio superior usando este cÛdigo HTML:

  <a href="../../home.htm">return to home</a>

Cada "apariciÛn" del cÛdigo "../" el URL del link le dice al web Browser que se vaya a un nivel superior de directorio o carpeta, relativo al nivel actual; en este caso, que "suba" dos niveles de directorios o carpetas y que busque un archivo llamado home.htm.

Siguiendo con nuestro ejemplo, digamos que nuestro subdirectorio pictures no estaba en el mismo subdirectorio o carpeta que el archivo volc.htm sino a un nivel superior.

directory diagram En la secciÛn anterior construimos un link desde el archivo volc.htm al archivo msh.gif en un subdirectorio:

  <img src="pictures/msh.gif">

Ahora queremos reorganizar nuestra estructura de web de modo que el directorio o carpeta "pictures" estÈ a un nivel superior. El link se escribir· ahora:

  <img src="../pictures/msh.gif">

de forma que ahora el Browser buscar· un directorio denominado "pictures" que est· situado en un nivel superior con referencia al archivo volc.htm.

Una ventaja de esta estructura es que serÌa mucho m·s sencillo almacenar un gran n™mero de im·genes en este directorio superior que adem·s pueden ser compartidos en otras p·ginas web. Veremos m·s adelante en otra lecciÛn cÛmo se usan las im·genes almacenadas en este directorio.

Ahora es el momento de una pequeÒa reorganizaciÛn de nuestros archivos HTML. Esto requiere que estÈ familiarizado con las operaciones de mover archivos y directorios en su ordenador. !Lea esto cuidadosamente! Puede parecer complicado pero pronto lo ver· claro.

En primer lugar, cree un nuevo directorio o carpeta y ll·mele volcanes (es recomendable nombrar los archivos con todas sus letras min™sculas)
DespuÈs, mueva los dos archivos HTML volc.htm y msh.htm a este nuevo directorio o carpeta.
Mueva el directorio pictures (con su archivo msh.gif dentro) de modo que vaya al mismo nivel que el directorio volcanes. Mueva tambiÈn el archivo lava.gif que aÒadimos en la lecciÛn 7a al directorio pictures.

Tras estos pasos, toda su ·rea de trabajo deberÌa ahora contener dos subdirectorios, uno para los archivos HTML (volcanes) y otro en el que est·n las im·genes (pictures):

          + workarea (directorio, nuestra ·rea de trabajo)
	  |
	  |----+ pictures (directorio)
	  |         lava.gif
	  |         msh.gif
	  |
	  |----+ volcanes (directorio)
	            volc.htm
	            msh.htm

Como hemos movido algunas cosas de sitio, ahora tendremos que actualizar los links en nuestros archivos HTML. Primeramente echemos un vistazo al primer link local que construimos en el archivo volc.htm:
```
  <h3>Monte Sta. Elena</h3>
  El 18 de Mayo de 1980, despuÈs de un largo periodo de inactividad, esta tranquila
  montaÒa en Washington permitiÛ <a href="msh.htm">observar con detalle</a>
 la mec·nica de estas erupciones altamente explosivas.
```
NOTA: Ya que el archivo msh.htm est· a™n en el mismo directorio relativo del archivo volc.htm no tenemos que realizar ning™n cambio en el cÛdigo HTML. øVe cÛmo el uso de links relativos es una de las poderosas aplicaciones del HTML?
Ahora echemos un vistazo al link de la imagen del Monte Sta. Elena que creamos en el archivo msh.htm:
```
  Los sobresalientes pinos de esta, una vez, tranquila montaÒa
  fueron <a href="pictures/msh.gif">derribados como
  juguetes</a>.
```
Abra este archivo en su editor y modifique el link asÌ:
```
  Los sobresalientes pinos de esta, una vez, tranquila montaÒa
  fueron <a href="../pictures/msh.gif">derribados como
  juguetes</a>.
```
Este link relativo le dice al Browser que vaya a un nivel superior respecto al directorio actual (volcanes) y busque ahÌ otro directorio denominado pictures que contiene una imagen GIF llamada msh.gif
Finalmente tendr· que actualizar la etiqueta <img...> que muestra un pequeÒo gr·fico. Abra el archivo volc.htm en su editor de textos y modifique la lÌnea justo debajo de la etiqueta <body> de modo que quede como:
```
  <img alt="Una lecciÛn sobre:" src="../pictures/lava.gif" width=300 height=259>
```
Guarde el archivo. Ahora debiera Abrir el archivo volc.htm en su Browser y comprobar el link a msh.htm y probar tambiÈn el link a la imagen del Monte Sta. Elena.

Un PequeÒo Cambio M·s

Este ™ltimo y pequeÒo paso puede no ser obvio pero lo explicaremos en breve. La ™ltima cosa que queremos que haga en esta lecciÛn es cambiarle el nombre a su archivo de trabajo de volc.htm a index.htm

øPorquÈ? Digamos que ha terminado esta lecciÛn y est· listo para mover sus archivos a su servidor de World Wide Web para que todo el mundo vea su trabajo. Supongamos que la direcciÛn Internet de dicho servidor de la Gran Universidad es:

    http://www.bigu.edu/

Y que sus archivos se guardar·n en una serie de directorios:


--= nivel superior del servidor: www.bigu.edu
   /cursos
        /ciencia
            /geologia

de modo que la URL de la Web de Volcanes podrÌa ser:

    http://www.bigu.edu/cursos/ciencia/geologia/volcanes/volc.htm

øBonito, eh? Ahora aquÌ tiene la prometida explicaciÛn; en muchos servidores de WWW puede designar un nombre est·ndar para la p·gina web "por defecto" para cada directorio, y en la mayorÌa de los sistemas es... index.htm. Lo que esto quiere decir es que la direcciÛn Internet:

    http://www.bigu.edu/cursos/ciencia/geologia/volcanes/

es equivalente a:

    http://www.bigu.edu/cursos/ciencia/geologia/volcanes/index.htm

°Esto podrÌa hacer que crea que es un enorme gasto de energÌa el acortar 20 caracteres en una URL! Pero esto pretende tan solo que su URL tenga una apariencia algo m·s profesional. Si estuviese creando la Home Page (o P·gina Principal) del Queso LongHorn,

    http://www.cheese.com/longhorn/

serÌa menos redundante de escribir que

    http://www.cheese.com/longhorn/longhorn.htm

que es lo que ocurre cuando la gente lee algo acerca de su URL e intenta conectar tecleando la direcciÛn en el web Browser.

Compruebe su trabajo

Compare su p·gina web con un ejemplo de cÛmo deberÌa aparecer dicho documento. Primero deberÌa ver su p·gina Web de Volcanes. Cuando haga click sobrel el hipertexto de observar con detalle, su web Browser mostrar· una nueva p·gina Finalmente, cuando haga click sobre derribados como juguetes, su web Browser mostrar· una imagen, cuyo fichero est· almacenado en un subdirectorio o subcarpeta.

Use dos veces el botÛn de retroceder de su web Browser para volver a esta p·gina. Si su p·gina web es diferente de la del ejemplo revise el texto que introdujo en el editor de textos.

Review Topics

øCu·les eran los pasos que se usaban para crear un link dentro de su documento a un archivo local?
øQuÈ pasos d·bamos para crear un link que mostrara una imagen?
øCÛmo se hacÌa para crear un link a un fichero en un subdirectorio o subcarpeta? øY en un nivel superior?
øCu·l es el significado de un archivo llamado index.htm en un servidor WWW?

Pr·ctica Independiente

Cree un segundo documento HTML que use todo el cÛdigo HTML con el que estÈ familiarizado hasta ahora. Vuelva al primero que creÛ e incluya un link a este nuevo archivo.

A continuaciÛn....

°Wow! Esto ha sido mucho trabajo... En la prÛxima lecciÛn aprender· a usar el HTML para enlazar recursos "ahÌ fuera", en la Internet.

IR A.... | Ìndice de lecciones | anterior: "Enlazando con Anchors" | siguiente: "URLs - Punteros del Web" |

Writing HTML LecciÛn 8b: Links a Ficheros Locales

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

URL: