Enlazando páginas

Hasta aquí, hemos podido ver que una página web es un archivo HTML en el que podemos  incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes. Del mismo modo, un sitio web podrá ser considerado como el conjunto de archivos, principalmente páginas HTML e imágenes, que constituyen el contenido al que el navegante tiene acceso.

Sin embargo, no podríamos hablar de navegante o de navegación si estos archivos HTML no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de enlaces hipertexto. En efecto, el atractivo original del HTML radica en la posible puesta en relación de los contenidos de los archivos introduciendo referencias bajo forma de enlaces que permitan un acceso rápido a la información deseada. De poco serviría en la red tener páginas aisladas a las que la gente no puede acceder y desde las que la gente no puede saltar a otras.

Un enlace puede ser fácilmente detectado en una página. Basta con deslizar el puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma original transformándose por regla general en una mano con un dedo que señala el punto del enlace. Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el usuario no tenga dificultad en reconocerlos. Si no especificamos lo contrario (como veremos más adelante), estos enlaces texto estarán subrayados y coloreados en azul. En el caso de las imágenes que sirvan de enlace, veremos que están delimitadas por un marco azul por defecto.

Para colocar un enlace, nos serviremos de las etiquetas <a> ... </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino será introducido bajo forma de atributo, el cual lleva por nombre href.

Ejemplo de sintaxis:

Donde “url” y “uri” hacen referencia a la dirección completa o la trayectoria y nombre del documento a vincular por medio del hiperenlace, y “Descripción del vinculo” es, por lo general un texto descriptivo que permitirá al usuario de la página localizar el vínculo de forma física y determinar su contenido.

Veamos un listado sencillo con hiperenlaces a unos cuantos buscadores conocidos:

Donde nuestro navegador lo interpretaría como…

… pulsamos sobre el hiperenlace a nuestro buscador más conocido para acceder a su página …

  • Prueba a entrar en los demás buscadores.
  • Amplia tu página añadiendo hiperenlaces a otros buscadores que encuentres en la red.
  • Haz una página en la que contenga enlaces a tus páginas favoritas.

Enlazando determinada posición dentro del mismo documento

En función del destino los enlaces son clásicamente agrupados del siguiente modo:

  • Enlaces internos: Se dirigen a otras partes dentro de la misma página.
  • Enlaces locales: Se dirigen a otras páginas del mismo sitio web.
  • Enlaces remotos: Son dirigidos hacia páginas de otros sitios web.
  • Enlaces con direcciones de correo: Crear un mensaje de correo dirigido a una dirección.
  • Enlaces con archivos: Para que el usuario pueda bajarse archivos.

Enlaces Internos

Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño de la misma. Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder rápidamente al principio o final de la página o bien a diferentes párrafos o secciones.

Para acceder a un determinado punto de un documento deberá, en primer lugar, crear una marca de acceso dentro del mismo documento. Para ello debemos utilizar la etiqueta <a> con un formato distinto:

Donde “Marca de referencia” será una cadena de caracteres que usaremos como identificador de la marca creada.

En segundo lugar, en otro lugar del mismo documento, deberá crear un elemento que vincule a la marca citada anteriormente de la siguiente forma:

Observamos una diferencia entre un hipervínculo y un enlace en la misma página, y es que se antepone el carácter “#” al nombre de la marca que hemos creado. Veamos un ejemplo:

Veremos lo siguiente en nuestro navegador…

… pulsamos, por ejemplo, en el enlace “Primer indice”y apareceremos en la marca creada “#Índice1″…

… y el navegador se situará sobre la marca elegida. Para poder ver el resultado de los índices hemos estrechado la ventana para que se vea con más claridad el efecto de los enlaces.

Enlaces a determinada posición en otro documento HTML

Primeramente, será necesario que el documento de destino contenga marcas creadas con la etiqueta <a> y el atributo name. Por su parte, el documento de origen deberá contener el atributo href en la etiqueta <a> con formato híbrido entre url/uri y una marca de documento. Por ejemplo:

Crearemos un archivo nuevo llamado marcas.html

 

… seguidamente crearemos otro documento llamado marcas_indices.html

Veamos la apariencia en nuestro navegador:

Pulsamos en el hiperenlace “Primera Marca del índice” que dará como resultado:

Enlaces remotos o externos

Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio. Este tipo de enlaces es muy común y no representa ninguna dificultad. Simplemente colocamos en el atributo href de nuestra etiqueta <a> la URL o URI de la página con la que queremos enlazar. Será algo parecido a esto:

Sólo cabe destacar que las direcciones web (URLs) empiezan por “http: ⁄ ⁄”. Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la web. No debemos olvidarnos de colocarlas, porque si no los enlaces serán tratados como enlaces locales a nuestro sitio.

Otra cosa interesante es que no tenemos que enlazar con una página web con el protocolo HTTP necesariamente. También podemos acceder a recursos a través de otros protocolos como el FTP. En tal caso, las direcciones de los recursos no comenzarán por “http: ⁄ ⁄” sino por “ftp: ⁄ ⁄”.

Enlaces a direcciones de correo

Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje de correo electrónico dirigido a una dirección email determinada. Estos enlaces son muy habituales en las páginas web y resultan la manera más rápida de ofrecer al visitante una vía para el contacto con el propietario de la página. Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace. Su sintaxis es:

Cuando coloques enlaces a direcciones de correo procura indicar en el contenido del enlace (lo que hay entre <a> y </a>) la dirección de correo a la que se debe escribir. Esto es porque si un usuario no tiene configurado un programa de correo en su ordenador no podrá enviar mensajes, pero por lo menos podrá copiar la dirección de mail y escribir el correo a través de otro ordenador o un sistema web-mail.

Enlaces con archivos

Este no es un tipo de enlace propiamente dicho, pero lo señalamos aquí porque son un tipo de enlaces muy habitual y que presenta alguna complicación para los nuevos usuarios. El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos, con la única particularidad de que en vez de estar dirigidos hacia una página web está dirigido hacia un archivo de otro tipo. Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismo directorio que la página se escribiría el enlace de este modo:

Veamos un ejemplo:

El comportamiento en su navegador sería…

… llevamos el ratón hacia el texto en azul, el puntero tomará  la forma de una mano (según tengas la configuración del ratón)…

… hacemos un clic y…

… abajo a la izquierda aparece el archivo descargado (navegador Chromium); en Linux, los archivos descargados van al directorio “Descargas” por defecto. Suele salir una ventana de diálogo que nos pregunta que queremos hacer con el archivo.

Enlaces con imágenes

La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo gráfico mediante el atributo src (source). La sintaxis sería:

Veamos un ejemplo:

Visto desde el navegador…

… si hacemos un click izquierdo con el ratón aparecerá la página que tenemos enlazada con la imagen…

… apareciendo en la página que hemos enlazado con la imagen.

  • Haz la imagen de ejemplo que sea más pequeña (height y width).
  • Con la imagen reducida haz un enlace hacia una página favorita.

 

 

Anuncios