hecho con NvuCreación de Páginas Web con NVu/KompoZer
Página de inicio                                                                                                                                                                  Curso de Formación TIC 2007-2008

Enlaces

Las páginas web parecen documentos de texto (de hecho se editan con editores de texto), pero son algo más: son hipertextos, van más allá. El contenido de una página web es texto, imágenes, sonidos, animaciones, contenidos interactivos, y ... enlaces. Estos últimos elementos son los que convierten la página web en documento de hipertexto.  Podemos definir un enlace como un elemento que permite acceder desde un punto de nuestro documento o a otro documento (o a otra parte dentro del mismo documento). Este salto se realiza por medio de la dirección URL del sitio de destino. De esta manera una página web presenta más información que la vemos directamente al leer su contenido en nuestro explorador.

1. Las URL

Pero en esta frase nos encontramos con un palabro que debiera de sonar URL, del inglés, Localizador Universal de Recursos. Puedes ver más sobre las URL en la sección enlaces del manual de HTML. Es decir una forma standard (Uniform) para indicar donde (Localizador) se encuentra un objeto (Recurso) en la red. Este recurso puede ser una página web, una imagen, un sonido, una animación y en general todo aquello que sea manejable por el navegador de internet.
Estas URL tienen la forma

http://www.iescarbula.net/materias/gyh/index.html



Donde http indica el protocolo (normas de comunicación) www.espaciolatino.com es el servidor u ordenador donde se encuentra el recurso, /horoscopo/ es una carpeta dentro de ese servidor y por último index.htm es el nombre del archivo que buscamos.

Las direcciones de los recursos se pueden escribir de dos formas: absoluta o relativa. La dirección completa comenzando con el http:// es una URL absoluta del recurso. Por ejemplo si en el sitio misitio.com hay una carpeta llamada imágenes y dentro hay otra llamada gifs y dentro hay un archivo llamado ojos.gif, la URL absoluta de esta imagen sería

http://misitio.com/imagenes/gifs/ojos.gif

Pero si estamos dando la dirección de un recurso que está en el mismo servidor donde se encuentra la página se suelen usar las llamadas URL relativas, que dan la ruta hasta el recurso partiendo desde la página, sin usar la parte del servidor, http://misitio.com. Si la URL relativa comienza con / la ruta comienza en la raíz de nuestro sitio. Por ejemplo, si en la página index.htm que hay en la carpeta imagenes quiero poner la dirección de la imagen ojos.gif en forma relativa podría ser de cualquiera de las formas:

gifs/ojos.gif

/imagenes/gifs/ojos.gif

2. Clases de Enlaces

Los enlaces que podemos encontrarnos en una página web suelen ser algunos de los citados aquí:

  • Interno: Nos lleva a otra parte dentro de la misma página donde se encuentra el enlace.

  • Local: Se refiere a algún recurso situado en el mismo servidor que nuestra página (URL relativas)

  • Externo: Se refiere a algún recurso situado en otros servidores diferentes a dond se encuentra nuestra página (URL absoluta)

  • De Correo: Cuando el visitante pincha en este tipo de enlaces se abre su programa de correo electrónico para enviar un email a la dirección que previamente se halla especificado en ese enlace.

  • A Archivos: El recurso señalado es un archivo y al pinchar sobre ellos nos permiten que se abran o se descargen a nuestro ordenador esos archivos, por supuesto nos referimos a archivos distintos de los relacionados directamente con las página web: imágenes, animaciones, sonidos, otras páginas web.

3. Insertar enlaces a páginas

a) Enlaces a páginas web
Vamos a ver la forma de colocar en nuetra página un enlace para saltar a otra página. Como soporte del enlace podemos usar un texto o una imagen. El procedimiento es muy parecido en ambos casos. Situamos el cursor donde queramos colocar el enlace. Elegimos Enlace en el menú insertar, tecleamos CTR + L, o pulsamos el botón Enlace, apareciendo en los tres casos la pantalla de Propiedades de enlace.

     

Vamos a ver la forma de colocar en nuetra página un enlace para saltar a otra página. Como soporte del enlace podemos usar un texto o una imagen. El procedimiento es muy parecido en ambos casos. En el cuadro de propiedades que hemos abierto por algunos de los procedimientos anteriormente enumerados (Texto del enlace escribimos el texto que queramos que aparezca en la página. Esto no es necesario si antes de comenzar habíamos seleccionado texto; en Ubicación del enlace colocamos la URL de la página a la que debe apuntar el enlace. La URL puede ser absoluta (comienza por http://) o relativa, o sea, la ruta de un archivo en el propio servidor donde esté alojada la página. En este caso podremos marcar la opción La URL es relativa a la dirección de la página cuando accedamos a las propiedades del enlace. Aunque hemos hablado de URL de páginas, un enlace puede apuntar a cualquier archivo. Si es un archivo .htm el explorador lo muestra como página web. Pero también puede apuntar a un archivo .jpg o .gif o .png: el explorador lo mostrará como imágenes. En general el explorador intentará procesar el archivo. Pero los enlaces también pueden apuntar a archivos de cualquier otro tipo, por ejemplo .zip, en estos archivos el explorador permitirá al visitante descargarlos y guardarlos en su ordenador.



El resultado de este proceso es una dirección absoluta como la siguiente: Curso de innovación pedagógica.
b) Enlaces a un correo electrónico
Al insertar un enlace en la ubicación del enlace podemos colocar una dirección de correo electrónico. En este tipo de enlaces cuando el visitante pulsa sobre el enlace, se abre su cliente de correo y puede escribir un mensaje a la dirección de correo especficada. Para crear este tipo de enlace basta con escribir el email y marcarlo como dirección email:



Se visualizaría así: Instituto de Enseñanza Secundaria "Carbula", Almodóvar del río.

c) Enlaces internos a páginas
Es posible mezclar los enlaces a páginas y los enlaces internos. Es decir podemos colocar enlaces que apunten a un ancla dentro de otra página. Para ello a la URL de la página de destino se le añade el símbolo almohadilla (#) seguido del nombre del ancla:

http://www.elsitio.com/preguntas.htm#apartado2

Este enlace apuntará al ancla denominada apartado2 que hay en la página preguntas.htm alojada en http://www.elsitio.com/.


4. Enlaces internos

Una vez conocemos lo que son los enlaces, vínculos o hiperenlaces, pasemos a ver como crearlos y colocarlos en nuestra página, el primer paso para crear un sitio completo: un conjunto de páginas interconectadas. Como ya hemos visto anteriormente, existen diferentes tipos, veamos como se crea cada uno de ellos. Vamos a ver separadamente las distintas formas de enlaces que podemos tener en una página web.
a) Enlaces internos en la misma página

Un enlace interno nos permite ir de una a otra parte de la página de forma rápida y sin tener que usar la barra de scroll del navegador. Puede ser muy útil si tenemos la página organizada en apartados y queremos tener un índice de esos apartados. Para usar estos enlaces lo primero que debemos hacer es crear los puntos de destino o anclas, en los puntos de la página a los que queramos saltar.

El primer paso es colocar las anclas, para ello situamos el cursor en el lugar exacto donde queremos situar el destino de nuestro enlace interno, o sea, el sitio donde colocar el ancla. 

Una vez situado en el lugar elegido pasamos a situar el ancla para lo cual pulsamos el botón enlace interno que tenemos en la barra de botones.


O bien usamos la opción enlace interno que tenemos dentro del menu Insertar.

Menú Insertar con Enlace interno resaltado

Nos aparecerá la ventana "Propiedades del enlace interno, donde podremos identificar ese destino.

En una misma página pueden existir más de un punto de destino, por ejemplo una página con varios apartados. Cada apartado puede tener su propio ancla para llegar a él con tan solo pulsar sobre un enlace.

Tras ponerle el nombre al ancla (en el ejemplo este nombre es inicio) y pulsar el botón aceptar, donde estaba el cursor veremos el símbolo . Si dejamos el ratón sobre este símbolo veremos un cartelito con su nombre.

El segundo paso es colocar el enlace propiamente dicho, es decir, el vínculo sobre el que pulsar para volver a donde estaba el ancla. Este proceso es similar al visto para colocar enlaces a páginas, solo que en lugar de una URL se elige el ancla al que debe apuntar el enlace. Al desplegar la lista de URL se muestran todos los anclas de la página, estos enlaces van precedidos por el símbolo # (enlace interno).

b) Enlaces interno a páginas externas

Es posible mezclar los enlaces a páginas y los enlaces internos. Es decir podemos colocar enlaces que apunten a un ancla dentro de otra página. Para ello a la URL de la página de destino se le añade el símbolo almohadilla (#) seguido del nombre del ancla:

http://www.elsitio.com/preguntas.htm#apartado2

Este enlace apuntará al ancla denominada apartado2 que hay en la página preguntas.htm alojada en http://www.elsitio.com/


[ir arriba]

José Manual Lara Fuillerat - 2008 - I.E.S. Carbula (Almodóvar del Río, Córdoba)