Creación de enlaces (links) - Tutoriales Diseño Gráfico

Breaking

𝔸𝕡𝕣𝕖𝕟𝕕𝕖 𝕔𝕠𝕟 𝕋𝕦𝕥𝕠𝕣𝕚𝕒𝕝𝕖𝕤

Creación de enlaces (links)

 El siguiente es sin duda el elemento más importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto, para la persona que está leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dónde está el documento que lee. Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee está repartido por medio mundo, o en un plano más modesto, el documento leído puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a otras sin notarlo.

Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en inglés link=eslabón o enlace).

Pero seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador.

Se escribirá:

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba  </A>.
Este elemento tiene dos atributos: HREF y NAME.

En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.

El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas o con alguna otra diferencia, eso es un nombre de máquina y sería interpretado como OTRA máquina. Esto es aplicable a todos los parámetros: servicio (http://) servidor (www.miservidor.es) y fichero (mifichero.htm).

Dentro de los parámetros pasados a HREF, podrás ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :

ServicioDescripciónEjemploEfecto
http://Servicios WWW<A HREF="http://www.uv.es/"> WWW</A>WWW
ftp://Servicios FTP<A HREF="ftp://ftp.uv.es/">FTP</A>FTP
gopher://Servicios GOPHER<A HREF="gopher://gopher.uv.es/">GOPHER </A>GOPHER
news://Servicios NEWS<A HREF="news://news.uv.es/">NEWS</A>NEWS
mailto://Servicios E-mail<A HREF="mailto:jac@uv.es/">E-mail</A>E-mail
file:///C|Fichero local<A HREF="indice.htm/">Fichero</A>Fichero

Todos estos servicios se pueden utilizar desde el visualizador de Netscape.

Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se escribirá:

     <A HREF="indice.htm" TARGET="Ventana-2"> </A>
Esta instrucción mostrará la página indice.htm pero con otra ventana del visualizador, es decir tendremos lanzado el visualizador 2 veces. Esto sólo funciona si el sistema operativo de tu máquina es multi tarea (p.ej.: Windows-95).

Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentará desde la primera línea del mismo.
El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos largos divididos en secciones.

Se escribirá así:

En el documento activo:

<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>
En el documento destino:
<A NAME="punto1"></A> 
NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo documento. Se escribirá así:

Dentro del documento activo En la línea de partida:

<A HREF="#punto1">Ir al punto 1</A> 
En la línea de destino
<A NAME="punto1"></A> 
Por ejemplo, si haces "clik" aquí con el ratón, saltarás al principio de esta página.

Debes saber que...

  • El texto que pongas después del símbolo # puede ser cualquiera, siempre que no tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por supuesto, que no esté repetido en el mismo documento de destino.
  • Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador nos presentará en pantalla la última línea del mismo.
  • Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas direcciones absolutas y después tienes que mover los ficheros por cualquier razón, tendrás que modificar todas las direcciones.
  • Si al hacer un link, después del nombre de la máquina no pones el nombre de un fichero, por defecto el servidor entiende que se le pide la "home page" (página inicial).
  • Si un servidor no tiene definida página inicial, simplemente nos mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz.
  • Si después de la dirección de la máquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio, generalmente el servidor nos mostrará un simple listado de los ficheros y directorios que éste contenga.
  • No sólo puedes montar el link sobre un texto, también puedes hacerlo sobre una imagen cualquiera. Es decir, después del link y antes de </A> puedes poner lo que quieras.
  • El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que puedas huye de crear páginas muy largas. Crea cuantas necesites, con buena estructura y enlázalas con cuantos links sean precisos.
  • Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has utilizado direcciones absolutas, al hacer un link, no empieces con aquello de: "http://....". No funcionará.
  • Si continuas deseando poner direcciones absolutas con ficheros locales, tendrá que ser así file:///C|/MIDIRECTORIO/mifichero.htm
  • Después de C (que puede ser A, B, D o la unidad de disco que quieras) fíjate que va una barra vertical (pipe), y que las barras que separan los directorios y ficheros son barras a la derecha.