Icono Enlaces en HTML

NOTA: todos los nombres de archivos y sus extensiones a las que se hacen referencia en los hiperenlaces, deben de ponerse en su totalidad en minúsculas, para evitar posibles errores al buscar un DOCUMENTO.HTML, cuando lo que en realidad estamos buscando es un documento.html. No hay que olvidar que los enlaces a los que hacemos referencia, pueden estar en máquinas que sean servidores UNIX, por lo que al ser este un sistema operativo distinto a otros más empleados en uso doméstico, sea sensible a mayúsclas y minúsculas, no siendo lo mismo DOCUMENTO.HTML que documento.html. Como normal general se debe escribir todos los nombres de enlaces, directorios y archivos, en minúsculas, debidas princuipalmente a esta característica de la mayoría de los servidores HTML de Internet.

Por el mismo motivo, en Internet la mayoría de las referencias a directorios se emplean con la barra �/� y no con la barra �\�, ya que las máquinas UNIX antes nombradas, hacen referencias a directorios con la barra de división. Debemos de tener estas 2 consideraciones muy encuenta a la hora de hacer hiperenlaces desde nuestro documento HTML, ya que sino son tenidas en cuenta, nos llevará a tener sucesivso errores al intentar enlazar con distintos enlaces (valga la redundancia).


ENLACES. DOCUMENTOS HIPERTEXTO

Una vez hayamos hecho nuestra página, puede que queramos que nuestros visitantes tengan referencias de otras páginas que nosotros creamos convenientes que visiten, bien porque tienen que ver con el tema que se trata en nuestra páginas, bien porque consideremos que pueden ser interesantes.

Las funcionalidades hipertexto se basan en el concepto de enlace. Un enlace es una referencia a un documento HTML, o a cualquier otro objeto, expresada por medio de un formato, universalmente aceptado. Este permite que el visualizador, cuando detecta que se requiere �saltar� a un documento determinado, sea capaz de identificarlo y obtenerlo, de forma que nos sea visible a nosotros en nuestra pantalla del navegador.

De cara al usuario, los hiperenlaces apareceran como texto en otro color, realzado o subrayado (incluso como veremos pueden ser imágenes).


HIPERENLACES

Para incluir un hiperelace, se usa la directiva cerrada <A>...</A>. El texto que se haye entre ambas �anclas� (anchors) será sensible, lo que indica que una pulsación con el ratón sobre ella, nos lleva a otro documento o a otro lugar al que haga referencia el enlace.

Esta directiva posee el atributo HREF (referencia de hiperenlace), que indica hacia donde nos traslada el hiperenlace:

<A HREF=�...�>...</A>

Este atributo HREF y hacia donde apunta (el entrecomillado), lo que indica es la dirección URL, documento de hipertexto, o imagen a la que haremos el salto una vez �pinchado� el enlace. Entre las directivas podemos incluir texto o una imagen descriptivas del enlace al que estamos haciendo referencia. Ejemplos de hiperenlac serían:

<A HREF=�http://lucas.cdf.udc.es/jgorriz/�>Javier Górriz</A>

Aparecería como Javier Górriz lo que nos indicaría que este texto �Javier Górriz� es un hiperenlace por aparecer subrayado con distinto color al resto del texto. Al colocar el ratón sobre ella, aparecería en la barra de estado del navegador, la dirección URL hacia la que apunta (en este caso http://lucas.cdf.udc.es/jgorriz/). Una vez pinchado el enlace, el mismo navegador se haría cargo de traernosla información que contuviese ese enlace (en este caso la URL o página personal de la persona que está explicandote desde estas líneas el códgio HTML ;-) ).

En lugar de texto entre las �anclas�, podríamos incluir una imagen que actuara de hiperenlace:

<A HREF=�http://lucas.cdf.udc.es/jgorriz/�><IMG SRC=�vic-web.gif�></A>

En este caso la imagen por aparecer como enlace a otro documento HTML (el mismo nombrado anteriomente), aparecería bordeada con un marco azul, de similar tonalidad al que subrayaba anteriormente al enlace de tipo texto. Esto (el marco azul), nos indicaría que esa imagen está actuando de enlace a otra página. Al igula que como ocurría con el texto, al colocar al ratón sobre cualquier área dela imagen, en la barra de estado nos indica la dirección URL del enlace a la que apunta la imagen.

NOTA: Hay ultimamente una moda en Internet que es la de ocultar por medio de Javascript las URL que nos aparecen en la barra de estado del navegador, y en su lugar introducir una peque�a descripción que aparece al poner el ratón sobre el enlace. Que no nos asuste el ver este tipo de enlaces, ya que está haciendo lo mismo que acabo de explicar, pero lo único que hace es ocultar el URL para darnos así más información mediante una breve descripción hacia donde apunta.

Ni que decir tiene, que si el texto que hemos puesto como descripción entre las directivas <A>...</A>, está modificado por estilos de letra como son negrita, cursiva, etc... mantienen este tipo de atributos de texto, pero siguen manteniendo el subrayado en distinto color al del resto del documento.


HIPERENLACES DENTRO DEL MISMO DOCUMENTO

Un hiperenlace nos puede conducir a una parte determinada del mismo documento. Para ello,dentro del mismo documento debemos marcar cada zona de referencia, con una �etiqueta� (o nombre de etiqueta), de forma que el navegador cuando se le haga referencia a ella, la localice por su nombre. Para ello empleamos otro atributo dela directiva <A>...</A> que es NAME=�...�.

<A NAME=�nombre de la referencia�>...</A>

todo lo que se encuentre entre las directivas <A>...</A> ya sea texto, imágen o lo que queramos poner como símbolo del enlace, es ahora conocido por el navegador con la etiqueta �nombre de refencia�, de forma que que si dentro del documento hay un enlace a esta etiqueta, el navegador nos lleve hasta ella.

Supongamos que queremos hacer un enlace a esta parte del documento en un principio del mismo:

<A HREF=�#nombre�>Enlace Interno del documento</A>

aparecería como Enlace Interno del documento lo que nos indica que es un hiperenlace a algún sitio; nosotros sabremos que se trata de un enlace a una parte interna del mismo documento o de otro cualquiera (no tiene por qué ser el propio que tenemos abierto en nuestro navegador), porque en el momento de situar el ratón sobre el hiperenlace, en la barra de estado del navegador nos aparece la URL con una almohadilla (#), lo que nos indica que hace referencia una parte específica de un documento, que puede ser el mismo que tenemos abierto o no. En el momento que vemos la almohadilla, sabremos siempre que hace una referencia a una parte específica de documento. Un ejemplo sería:

<A HREF=�http://lucas.cdf.udc.es/jgorriz/inde.html#enlace�>Enlace Interno</A>

nos indicaría un enlace interno (por la almohadilla que nos aparecería en el la barra de estado), a un documento localizado en la URL http://lucas.cdf.udc.es/, directorio jgorriz/, documento index.html, sección interna del mismo #enlace.

Si ahora pinchamos sobre él, el navegador buscará la referencia de hiperenlace de referencia (HREF), que tenga incluida, buscando el nombre de la etiqueta que sigue a la almohadilla (en este caso #enlace).

Una vez buscado en el documento, y hallada la referencia interna

<A NAME=�enlace�>...</A>

mostrará en pantalla el texto o documento que se encuentra entre las anclas <A>...</A>, pero nunca el anterio a él (a no ser que con la barra de desplazamiento vertical del navegador, nosotros lo hicieramos a mano, sino no se nos mostrará lo anterior a esa parte del documento).

NOTA: los enlaces se podrían hacer incluso a imágenes independientes como por ejemplo http://lucas.cdf.udc.es/logo.gif, que nos enlace con la imagen logo.gif que se encuentra situada en este servidor.


ENLACES A OTROS RECURSOS DE INTERNET

La referencia del hiperenlace, no sólo tiene que hacer referencia a una página HTML o a una sección interna de la misma (tal y como hemos visto anteriormente), sino que puede hacer referencia a otros tipos de referencias (valga la redundancia):

  • file:// hace referencia a un archivo del ordenador local en el que estamos trabajando; sólo se emplea para ver páginas en �local�, es decir, sin estar conectado a la red, y para propósitos de dise�o WEB, antes de colocar la página en un servidor definitvamente.

  • http:// hace refencia a una dirección URL, por lo que nos anlazará a otro documento .html.

  • ftp:// hace refencia a una dirección URL de FTP (FILE TRANSFER PROTOCOL), que nos permite bajar un fichero de la dirección URL que indica el enlace al FTP.

  • telnet:// hace refencia a una sesión TELNET remota a un ordenador con una dirección URL concreta.

  • news:// hace refencia a un grupo de USENET de Internet en que discutir de un tema en particular de News.

  • mailto: hace referencia a una dirección de correo electrónico, a la que enviar un correo; en el momento que lo activemos, y si nuestro navegador lo soporta, se nos abrirá la ventana de correo electrónico que tengamos configurada, para enviar el correo al enlace de correo que esta indicando el enlace.

  • gopher:// hace refenrecia a un servidor GOPHER en Internet, o servicio de información por menús.

También se podría realizar un hiperenlace a un fichero cualquiera, sin tener por qué ser un documento .html (podría ser un documento de Word .doc, de Adobe Acrobat. pdf, de dibujo de AutoCad .dxf, ... etc). En este caso el navegador intentará ejecutar el fichero, y si no puede hacerlo, nos preguntará que queremos que haga con él. Una de las opciones suele ser grabarlo (el archivo), en nuestro ordenador de modo loca. Es una forma de permitir a nuestros visitantes copiar ficheros a su ordenador:

<A HREF=�manual.zip�>manual comprimido</A>

Debe tenerse en cuenta que, en la parte entrecomillada del atributo HREF=�...�, debe incluir un enlace, o bien una URL diferente, o bien a otro directorio de nuestro servidor de páginas WEB. Vamos a tomar un ejemplo.

Supongamos que hay una página de un amigo, al que le vamos a hacer un enlace desde nuestra página, para que la gente la visite:

La URL de nuestro servidor será: http://lucas.cdf.udc.es/
Nuestro directorio será: jgorriz/
El archivo de nuestro amigo estará en manual/manual.zip

El atributo HREF, puede hacer referencia de 2 formas a este archivo manual.zip:

  1. Enlace absoluto

    <A HREF=�http://lucas.cdf.udc.es/jgorriz/manual/manual.zip�>MANUAL</A>

    lo que aparecería como MANUAL y nos enlazaría con el archivo manual.zip, en la dirección URL que indica HREF.

  2. Enlace relativo

    Ya que el archivo se halla en el mismo servidor (en este caso http://lucas.cdf.udc.es es el servidor al que estamos haciendo referencia), lo único que tendríamos que hacer, sería una referencia relativa del mismo:

    <A HREF=�jgorriz/manual/manual.zip�>MANUAL</A>

    lo que aparecería igualmente que en el caso anterior, enlazándonos con el mismo archivo, pero con un enlace relativo, al mismo directorio y al mismo documento (manual.zip), que el enlace anterior.

    Esto sólo es posible en el caso de que ambas páginas estuvieran en el mismo servidor; en caso contrario, deberemos enlazar con la URL del documento al que hagamos referencia, con un enlace absoluto (indicando por tanto tambíen la URL del servidor, junto con los directorios y el nombre del archivo al que hacemos referencia).

    En el caso de que quisieramos hacer referencia a un directorio que se halla en la raíz del servidor, lo único que tendríamos que hacer es indicarselo al atributo HREF, de forma:

    <A HREF=�../directorio/archivo.html�>...</A>

    Esta referencia buscaría el �archivo.html� en el que directorio que se halla en la raíz del servidor, denominado �directorio/�.

    NOTA: El directorio raíz (representado por el primer /), no es necesariamente la raíz del disco duro o del sistema. Una de las opciones de configuración de un servidor, permite definir un directorio cualquiera como �raíz del servidor HTML�, de forma que sólo se pueda acceder a los contenidos en este directorio y a ningún otro que esté en un nivel inferior a él, lo que se hace como medida de seguridad y buscando aislar la información exportada del resto de los materiales contenidos en el sistema.


    EJEMPLOS DE REFERENCIAS CON HIPERENLACES

    Muchas veces, algunos de los protocolos que estamos empleando para hacer un hiperenlace a otro tipo de servicio de Internet, necesitan de un �login� o nombre de usuario y una �password� o clave, así como de un determinado puerto de conexión para iniciar la sesión en el servidor remoto. En HTML, también se puede acceder a este tipo de informacón, colocando directamente el login y el password en el enlace HTML.

    NOTA: El poner este tipo de información en HTML, conlleva el peligro de que cualquier persona que sea un oco avispada, pueda conseguir el login y password de nuestro protocolo, pudiendo una vez hechas con ellas, emplearlas con fines destructivos o da�inos para el sistema en el que se accede con ese nombre y clave personal de usuario. El poner directamente la clave de un usuario en código HTML, nunca es recomendable.

    Algunos tipos de ejemplo son:

    FTP ftp://usuario:password@servidor:puerto/ruta
    GOPHER gopher://servidor:puerto/ruta
    HTTP http:// usuario:password@servidor:puerto/ruta
    NNTP nntp://servidor_de_news/grupo_de_news
    TELNET telnet:// usuario:password@servidor:puerto
    WAIS wais://servidor:puerto/base_de_datos

    Un ejemplo de los campos podrían ser:

    usuario=jgorriz
    password=4885s84fds
    servidor=lucas.cdf.udc.es
    puerto=(según el tipo de protocolo)
    ruta=/pub/software
    grupo_de_news=alt.fan.u2
    base_de_datos=Internet

    Vemos que en este caso, no sólo puede ser necesario un nombre y clave para el protocolo FTP o el protocolo TELNET, sino que algunos servidores, hacen también necesario el terner una clave de acceso y un nombre para el protocolo HTTP. protocolo://usuario:password@... será el formato estándar para poder acceder a cualquier tipo de protocolo en Internet que necesite de un login y password. en HTML una referencia aetes tipos de protocolo podría ser:

    <A HREF=�ftp://jgorriz:[email protected]/pub/software�>FTP DE SOFTWARE</A>

    lo que nos daría acceso al FTP privado del usuario jgorriz con clave 4885s84fds en el directorio /pub/software del protocolo ftp. Lo mismo sería para el resto de protocolos pero modificando el protocolo y la ruta o base de datos de acceso.

    NOTA: el no indicar el tipo de puerto en un protocolo, ignifica que se asume el puerto por defecto que toma siempre ese tipo de protocolo en los servidores. Un ejemplo, el FTP toma normalmente el puerto 21 y cuando no se especifica el puerto se asume que este es el valor que toma; para el protocolo HTTP el puerto es el 80; para el TELNET el puerto es el 23... y así con el resto de puertos. El parámetro puerto, sólo debe especificarse, por regla general, cuando no se corresponda con un puerto estándar asignado al tipo de protocolo.

    TRUCO: Una particularidad y recomendación, es que cuando necesitemos especificar un nombre y clave de acceso a un determinado protocolo, dejemos el campo de password en blanco, poniendo en su lugar solo el login, de forma que cuando el navegador contacte con el servidor y le mande el login que estemos empleando, al no encontrar una clave, nos aparecerá una ventana de diálogo del propio navegador, en el que se nos preguntará por la clave necesaria para acceder al sistema, lo que nos permitirá una mayor privacidad, ya que al teclear la cleve, en la ventana del navegador, nos aparecerán asteriscos *************** evitando así que un posible interesado obtenga el password de acceso.

    ADVERTENCIA Puede que al especificar un determinado protocolo en un hiperenlace (telnet, ftp, gopher, ...) que no sea el protocolo HTTP, nuestro navegador, al activar el enlace, nos muestre un mensaje de error y no lance el protocolo que hemos solicitado. Dicho problema puede venir determinado, porque nuestro navegador no tiene accesible la aplicación que debe de lanzar para ese determinado protocolo; un ejemplo con Netscape es el protocolo telnet://. Para lanzar este protocolo, Netscape debe de tener configurado en las opciones la ruta de nuestro disco duro, en el que se encuantre localizado la aplicación que nos permitirá lanzar este protocolo de conexión remota a otro ordenador de la red. De no ser así, no podremos enlazar con el hiperenlace que apunte a un telnet:// y lo único que deberemos de hacer es configurar el navegador con el programa apropiado para que dicho enlace funcione correctamente. Lo mismo ocurre con el resto de protocolos (exceptuanto el HTTP por hazones obvias).

Anterior Menu Anterior
Hosted by www.Geocities.ws

1