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:

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:

  1. Abra su documento volc.htm en el editor de textos.
  2. 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".
  3. 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).
  4. Guarde y cierre su documento HTML.
  5. Ahora, con su editor de textos, abra otra ventana para un Nuevo documento.
  6. 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>
  7. Guarde este archivo como msh.htm en el mismo directorio de su fichero HTML de trabajo (Volc.htm).
  8. Actualice el fichero Volc.htm en su web Browser.
  9. 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:

  1. Primero, necesitará bajarse una copia de la imagen GIF del Centro de Descarga de Imágenes de la Lección 8a.
  2. Abra el archivo msh.htm en el editor de textos.
  3. 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>.
  4. Guarde el fichero msh.htm y actualice en su web Browser.
  5. Haga ahora click en el link recién creado en el paso (3).
  6. 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:

  1. Cree un subdirectorio o subcarpeta en su ordenador denominada pictures en el mismo lugar donde tenga guardado su archivo Volc.htm.
  2. Mueva el archivo msh.gif a este nuevo subdirectorio.
  3. Abra el archivo msh.htm en su editor de textos.
  4. 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".
  5. 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.

  1. En primer lugar, cree un nuevo directorio o carpeta y llámele volcanes (es recomendable nombrar los archivos con todas sus letras minúsculas)
  2. Después, mueva los dos archivos HTML volc.htm y msh.htm a este nuevo directorio o carpeta.
  3. 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.
  4. 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
  5. 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?
  6. 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

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

  1. ¿Cuáles eran los pasos que se usaban para crear un link dentro de su documento a un archivo local?
  2. ¿Qué pasos dábamos para crear un link que mostrara una imagen?
  3. ¿Cómo se hacía para crear un link a un fichero en un subdirectorio o subcarpeta? ¿Y en un nivel superior?
  4. ¿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
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

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

URL: