Como añadir enlaces con Dreamweaver (Basico)

Añadiendo los enlaces

URLs, Enlaces y Targets

A lo largo de este tema veremos como crear hiperenlaces entre documentos, también llamados "links".

Para entender mejor todo lo que estamos tratando de explicar, ha llegado el momento de entender el significado de 3 términos:

URL: Forma abreviada de "Uniform Resources Location", que viene a significar "Localización de Recursos Unificada". En la web existen muchos tipos de documentos: documentos HTML, imágenes, archivos multimedia, CGIs, applets, etc.... Todos y cada uno de estos documentos o archivos son "Recursos". En cualquier momento podemos tener interés en enlazar nuestro documento HTML, que al fin y al cabo es un recurso más, con cualquiera de los recursos que acabamos de citar. Para hacerlo, desde nuestro documento tendríamos que "nombrar" el recurso al que queremos enlazar. Ahí es donde entra la URL. Todo recurso en la red tiene un "nombre" único, por razones obvias, que es lo que llamamos URL.

El problema es: ¿cómo puede un recurso tener un nombre único, con la cantidad de ficheros que hay en internet?

Para conseguir este propósito, se establece una manera unificada de nombrar los distintos recursos de la red. En síntesis, es algo muy parecido a los nombres y apellidos de las personas. Puede haber personas que compartan el mismo nombre, o el mismo apellido, pero no puede haber coincidencia total en todos los elementos que componen la nomenclatura. Para ver mejor lo que queremos decir, veamos la estructura que ha de tener una URL:

Protocolo://direccion_del_sitio/directorio/nombre_de_archivo

Protocolo: Internet ofrece muchas maneras de publicar contenidos. Para cada una de estas maneras se estableció un protocolo, de manera que a la hora de distribuir un tipo de información, todas las maquinas que accedieran a esa información, lo hicieran utilizando las tecnologías y códigos estándar adecuados. A la hora de acceder a contenidos web, utilizamos el protocolo HTTP (Protocolo de Transporte de documentos HiperTexto). Ahora bien, existen otros tipos de protocolos, algunos en desuso como Ghoper o Wais, otros muy utilizados actualmente como FTP (Protocolo para Transmisión de Ficheros) o el Correo Electrónico. Por tanto, a la hora de especificar una URL, lo primero que hemos de indicar es el protocolo mediante el cual se debe acceder a esa información.

En una URL, el protocolo es el que se encarga de informar sobre el "COMO" se accede a la información. El resto de la URL informa sobre el "DONDE". Para separar el protocolo del resto, se utiliza "://".

Dirección del sitio: Una vez hemos establecido el protocolo, hay que decir donde se encuentra el recurso que estamos invocando. Empezamos localizando la "maquina" en la que se encuentra el fichero o recurso que buscamos. Eso es lo que entendemos por dirección del sitio. A partir de ahí, dentro de esa maquina, tendremos que especificar el directorio en el que se encuentra el recurso en cuestión. Para ello utilizamos una sintaxis propia de UNIX, por la que cada directorio se especifica por una barra inclinada "/", empezando a nombrar desde el directorio de nivel superior hacia abajo.

Nombre de Archivo: Una vez hemos localizado la maquina y el directorio adecuado dentro de la maquina en la que se encuentra el recurso, nos queda informar del archivo en cuestión. Dentro de un directorio no puede haber dos archivos con el mismo nombre, por tanto, utilizando este sistema todos los archivos y recursos de la red tienen una URL propia, única e irrepetible.

Ejemplo de URL:

http://www.ciberaula.com/curso_flash/introduccion.html

donde http es el protocolo, "www.ciberaula.com" la maquina en la que vamos a buscar, "curso_flash" el directorio en el que se encuentra el recurso y finalmente, "introducción.html" el recurso en sí, que en este caso es un documento HTML.

Lo que acabamos de ver es lo que se conoce por URL Absoluta. Ahora bien, existe una manera abreviada de nombrar el mismo recurso: URL Relativa.


URL Relativa: Es una manera de nombrar un fichero tomando como punto de partida el documento actual. Se utiliza fundamentalmente cuando el recurso en cuestión se encuentra dentro de la misma maquina que el documento actual. Como en ese caso, ambos documentos comparten la primera parte de su URL, podríamos evitar esa primera parte de la URL. Pongamos un ejemplo:

Tenemos la siguiente estructura

directorio 1
archivo1.html
directorio 2
archivo 2.html
archivo 3.html

Si quisiéramos enlazar al "archivo 2.html" desde "archivo 1.html", podríamos utilizar la URL absoluta, o podríamos utilizar la URL relativa, indicando el camino que hay desde el "archivo 1.html" hasta el "archivo 2.html". O sea, la URL relativa sería: "/directorio2/archivo2.html". Como vemos, en este caso no indicamos la primera parte de la URL, ya que se entiende que es la misma que la del archivo actual.

¿ y si quisiéramos enlazar al "archivo1.html" desde "archivo2.html" de manera relativa?. En ese caso, utilizaríamos la sintaxis propia de UNIX "../", que significa el directorio superior al actual, para nombrar de manera relativa esa URL. Así tendríamos la siguiente URL relativa: "../archivo1.html".

por terminar con el ejemplo, veamos las siguientes URL relativas:

* "../../archivo3.html", enlazaría desde "archivo 2.html" con "archivo 3.html"
* "/directorio1/directorio2/archivo 2.html", enlazaría desde "archivo 3.html" a "archivo 2.html"

Existe una tercera manera, aunque menos utilizada de nombrar la URL de un recurso. Esta manera sería una variación de la URL relativa. Podríamos establecer una URL relativa al directorio raíz del site actual. La nomenclatura sería la misma que la utilizada en las URL relativas, con la salvedad de que se tomaría como referencia o punto de partida la raíz del sitio actual. El directorio raíz estaría representado por una barra inclinada al principio de la URL. De tal forma, el siguiente sería un ejemplo de URL relativa a la raíz:

/curso_flash/introduccion.html

NOTA: Si utiliza URLs relativas a la raíz en sus enlaces, estos solo funcionarán correctamente en el servidor y nunca en el site local, ya que localmente no hay manera de que el navegador pueda saber cual es la raíz de su site, y tomará como raíz el disco duro de su ordenador.



En este punto, surge una duda: ¿debemos utilizar URLs Absolutas o Relativas?

Depende, esa es la mejor respuesta que podemos dar. En unas ocasiones será conveniente utilizar unas y en otras ocasiones será aconsejable utilizar otras. Lo importante es que entienda perfectamente como nombrar un recurso de cualquiera de las maneras posibles.

El uso de URLs relativas es aconsejable cuando se va a tener diferentes copias de nuestro site en distintas maquinas. Si utiliza URLs relativas, no tendrá que renombrar todos los enlaces de sus documentos para cada una de sus maquinas.

El uso de URLs absolutas es aconsejable cuando nombramos a recursos que no se encuentran dentro de la estructura de nuestro site, tales como enlaces a otros sites.

Enlace: Una llamada directa desde un documento a otro archivo, recurso o URL relacionada. Cuando establecemos un enlace en un documento HTML, lo que estamos haciendo es establecer un punto sensible, de manera que el usuario pueda directamente a través de ese elemento acceder al contenido del URL enlazado. De esta forma, como decíamos anteriormente, podemos tener una serie de documentos enlazados entre sí, dando libertad al usuario para acceder a una información o desecharla. En esto se basa la publicación de contenidos para la web.

Target: Término anglosajón que significa "destino". Cuando establecemos un enlace a una URL, estamos llamando a otro recurso de la red. El "target" especificaría el "destino" que tendrá esa información cuando el usuario la descargue de la red. Así por ejemplo, podemos elegir que el "destino" de una URL sea la ventana actual, con lo que el documento actual se vería sustituido por el documento nuevo, o podemos elegir una nueva "ventana" destino para visualizar ese nuevo documento. Veremos más en profundidad esto a lo largo de este curso.

Una vez conocemos el significado de estos 3 términos, podemos establecer enlaces en nuestros documentos que llamen a otros documentos o recursos de Internet.




Añadir un enlace a un texto

Como veremos a lo largo de este curso, muchos elementos HTML pueden servir como enlace a una URL, aunque empezaremos viendo como insertar enlaces en los textos de nuestro documento.

La marca HTML que crea un enlace es <A> </A>. Todo lo que este contenido entre el comienzo de marca y el cierre de la marca, será el texto o elemento gráfico que muestre el enlace en el documento. Esta marca HTML tiene dos atributos: HREF y TARGET. Ambos atributos se pasan en la marca de apertura.

HREF: Este atributo indica la URL a la que se quiere enlazar


TARGET: Indica el "destino" que tendrá la URL enlazada cuando se descargue. Existen cuatro destinos predefinidos, aunque como veremos cuando trabajemos con frames, se puede utilizar este atributo para visualizar contenidos en distintos frames del documento actual.
o _blank: El destino para el documento enlazado será una nueva ventana.
o _top: Si tenemos en cuenta que una ventana puede contener otras ventanas anidadas (Frames), este "target" especifica la ventana del nivel superior o madre como destino para la URL enlazada
o _self: Especifica como destino la ventana o frame actual.
o _parent: Especifica como destino la ventana padre de la ventana actual. Solo tiene sentido cuando se realiza un enlace desde una ventana o frame que esta anidado en una ventana madre.

Muchos de estos targets, nos resultarán de utilidad cuando veamos temas como los Framesets, más adelante en este curso. De momento es importante comprender como se puede especificar un "destino" para nuestros enlaces y como utilizarlos.

TRUCO: Si asignamos al atributo TARGET un valor que no sea ninguno de los predefinidos, el navegador tratará de visualizar el enlace en una ventana que responda al nombre especificado en el TARGET. Si finalmente esta ventana no existiera o no estuviera abierta en ese momento, el navegador crearía esa ventana nueva para mostrar el enlace. A partir de ese momento, esa ventana sería conocida por el navegador por el nombre especificado en el argumento TARGET.

Es decir, si por ejemplo el argumento TARGET de un enlace, tuviera como valor "ventana2", el navegador trataría de mostrar la información en una ventana que se llamará así. Si no existiera esa ventana, el navegador la crearía, siendo conocida desde ese momento por "ventana2". A partir de ese momento todos los enlaces que tengan especificado el target "ventana2" se visualizarán en ese ventana.

Se puede utilizar esta funcionalidad para abrir una ventana secundaria.

Ejemplo de enlace HTML:

La siguiente marca HTML, tendría como resultado el enlace que vemos a continuación:

<A HREF="/" TARGET="_blank">enlace a un documento ficticio</A>

Como vemos, todo lo que esta contenido entre la apertura y el cierre de la marca HTML <A>, será considerado un enlace a otro documento. Aquí veremos como incluir enlaces de texto, aunque existen otros elementos que pueden funcionar como enlaces, como es el caso de las imágenes, que veremos más adelante.

¿Como insertar un enlace de texto a un documento?

Para enlazar a otro documento, primero tenemos que seleccionar que elemento del documento actual funcionará como enlace. En este primer caso utilizaremos texto para hacer el enlace. Para ello, primero tenemos que tener el texto que funcionará como enlace. Este texto no tiene porque ser un párrafo o bloque completo, cualquier texto o parte de texto que seleccionemos puede funcionar como enlace.

Los pasos a seguir, son los siguientes:

1. Seleccione el texto que hará de enlace, o si no existe este texto, introdúzcalo y después selecciónelo.
2. Con el texto seleccionado, acuda a la paleta Propiedades e introduzca la URL del recurso al que quiere enlazar en el campo "Link". Si lo desea, puede hacer click en la "carpeta" que hay junto a ese campo para localizar el documento en cuestión por su disco duro.



Como puede ver en la imagen superior, podrá navegar por su disco duro hasta localizar el fichero al que quiere enlazar. Cuando haya localizado el fichero, Dreamweaver calculará la URL por usted. Observe que en esta ventana se muestra la URL del documento seleccionado en todo momento. Dreamweaver puede calcular la URL al documento seleccionado de manera relativa al documento actual o de manera relativa a la raíz del site. Para escoger el tipo de URL que quiere generar, utilice la lista desplegable "Relative To:".

IMPORTANTE: A la hora de seleccionar un documento a enlazar utilizando el método anterior, debe cerciorarse que el documento se encuentra dentro del site en el que está trabajando. Si no es así, Dreamweaver no podrá generar la URL correctamente. Esta funcionalidad, como es evidente, no es útil si pretende enlazar a una URL que no se encuentra en la estructura del site actual o que no se encuentre en su ordenador, sino que se encuentra en la red, como puede ser un enlace a otro site. En ese caso, lo mejor es que introduzca la URL absoluta en el campo "link" de manera manual.


3. En la paleta Propiedades, en el campo "Target", especifique el nombre de la ventana en la que quiere que se visualice el enlace. Si lo prefiere puede elegir uno de los 4 "targets" predefinidos en HTML, utilizando la lista desplegable que hay junto al campo "Target".

Una vez hecho esto, habrá creado su primer enlace. Si abre la ventana del código HTML (F10), observará que Dreamweaver ha generado la correspondiente marca HTML <A> para crear su enlace.

TRUCO: Dreamweaver añade una herramienta para enlazar a documentos dentro del site actual de manera visual. Habiendo seleccionado el texto en el documento actual que hará de enlace, asegúrese de que tiene la ventana Site Files (F5) abierta. Redimensione la ventana del documento actual, de manera que pueda ver todos los documentos del site actual en la ventana Site Files. Presione el símbolo junto al campo "Link" de la paleta Propiedades que tiene aspecto de "punto de mira" y sin soltarlo indique, con la flecha que aparecerá, sobre el documento del site actual al que quiere enlazar. Dreamweaver añadirá la URL correspondiente al campo "Link".

Utilizando el mapa del site para crear enlaces

Otra funcionalidad añadida en Dreamweaver para crear enlaces de manera rápida y visual entre documentos del mismo site, es utilizar el mapa del site para generar los enlaces.

Abra la ventana Site Files y visualice el mapa del sitio, tal y como explicamos en el primer capítulo. En el mapa del sitio, seleccione un documento. Observe que a su lado aparece un "punto de mira", similar al que hay junto al campo "Link" en la paleta Propiedades.

Puede utilizar ese "punto de mira" para añadir un enlace en el documento seleccionado al documento que escoja con el "punto de mira". Automáticamente Dreamweaver añadirá un enlace dentro de ese documento, como puede comprobar si lo abre. Puede utilizar este sistema para añadir de manera rápida varios enlaces entre documentos del mismo site y después ajustar los textos de los enlaces individualmente en cada documento.



En la imagen superior, observamos como se puede utilizar esta manera visual de generar enlaces sin abrir el documento. En el ejemplo, creamos un enlace en el documento "barrainicio.htm" al documento "inicio.htm".


Enlaces dentro del documento

Una posibilidad que HTML ofrece es la de enlazar a partes concretas de un documento, es decir, que dentro de un documento puede haber distintos puntos a los que enlazar. Esto es de especial interés cuando tenemos documentos muy extensos. Enlazar al documento sin más no sería del todo útil. Así, podemos enlazar a un documento, y dentro de ese documento a un punto interno previamente definido.

Estos puntos internos dentro de un documento se conocen como "Anchors". La marca HTML con la que se puede crear un punto enlazable dentro de un documento es <A> </A>. En realidad esta marca ya la conocemos. Es la marca con la que creamos un enlace hipertexto en HTML. Bien, con una pequeña variación en su sintaxis, esta marca puede definir un "Anchor" dentro de un documento.

La sintaxis de esta marca para definir un "Anchor" es la siguiente

<A NAME="nombre del anchor"> </A>

Como vemos, esta vez no incluimos el atributo HREF ni el atributo TARGET. Simplemente el atributo NAME, mediante el cual establecemos el nombre por el que será conocido ese "Anchor" dentro del documento actual. Como es obvio, no pueden existir dos "anchors" con el mismo nombre dentro del mismo documento, ya que esto crearía conflictos.

La manera de añadir un "Anchor" en un documento con Dreamweaver es bastante sencilla:

1. Posicionamos el cursor en el punto en el que queremos incluir el anchor.
2. Mediante menú Insert > Named Anchor, insertamos el anchor en el documento. Se nos preguntará en ese momento por el nombre que queremos establecer para ese anchor.
3. Una vez establecido el nombre se visualizará en pantalla el símbolo invisible indicativo de "anchor" en el punto en el que lo hubiéramos insertado. Si no observa ningún símbolo, tal vez no tenga ajustada en las preferencias la visualización de este símbolo o haya desactivado temporalmente la visualización de los elementos invisibles en el menú View > Invisible Elements. Si es así, ajuste las preferencias para visualizar este tipo de símbolos y active la visualización de los elementos invisibles en menú View > Invisible Elements.

TRUCO: Puede insertar un anchor en un documento utilizando la paleta Objects > Invisibles. Allí encontrará un objeto llamado "Anchor Named" que cumple la funcionalidad de insertar un anchor en el documento.

Si puede ver el símbolo del elemento invisible "anchor", podrá modificar en cualquier momento el nombre del mismo, de una manera muy sencilla.

1. Para modificar el nombre del anchor, seleccione el anchor en cuestión.
2. Observe que la paleta de Propiedades, muestra el nombre del anchor seleccionado. Renombre el anchor eliminando el nombre actual e insertando el nuevo nombre en ese campo.




Enlazar a un anchor dentro de un documento

Uno de los mayores usos que se le da a los anchors es el utilizarlos para enlazar desde un menú superior de un documento a distintos puntos del mismo documento.

A la hora de enlazar a un anchor, hay que tener en cuenta que la URL especificada en el enlace ha de ser un poco distinta:

La URL de una anchor viene dada por la URL del documento, ya sea esta relativa, absoluta o relativa a la raíz del site, seguida de "#nombredelanchor". Así, las siguientes URLs serían enlaces a un anchor dentro de un documento:

* "http://www.ciberaula.com/index.html#anchor2", Enlazaría al anchor llamado "anchor2" en el documento "index.html"
* "/directorio1/directorio2/documento.html#titular", Enlazaría al anchor llamado "titular", dentro del documento "documento.html".
* "#capitulo4", enlazaría al anchor llamado "capítulo4", dentro del documento actual. Obsérvese que como el anchor especificado esta dentro del mismo documento, no es necesario incluir la URL del documento en el enlace. El navegador interpretará que el documento en el que se encuentra el anchor es el documento actual.

TRUCO: A la hora de crear enlaces a anchors dentro de documentos, tendremos que introducir el enlace de manera manual, ya que Dreamweaver solo puede calcular de manera automática las URLs de distintos documentos dentro del site. Si queremos introducir un enlace a un anchor de un documento, podemos generar de manera automática la URL al documento en cuestión y añadir manualmente en el campo link de la paleta Propiedades el anchor al que queremos ir dentro del documento.

Una manera visual de enlazar a un anchor es utilizar el "punto de mira" de la paleta Propiedades que veíamos antes. En primer lugar abrimos el documento desde el que se enlazará y el documento con el anchor que será enlazado. Distribuimos el tamaño y posición de las ventanas de manera que ambos documentos sean visibles en el área de trabajo. En el documento en el que crearemos el "link", seleccionamos el texto que hará de enlace. Con el seleccionado, presionamos sobre el "punto de mira" y arrastramos la flecha de selección por el documento en el que se encuentra el anchor a enlazar, hasta seleccionar el dicho anchor. De esa manera, Dreamweaver generará de manera automática la URL, con el anchor incluido, de nuestro enlace.

Este truco se puede utilizar también para enlazar a anchors que están dentro del documento actual. En ese caso todo será más sencillo, ya que solo necesitamos tener un documento abierto.



Enlaces a una dirección de correo

Como hemos visto antes, la primera parte de una URL absoluta hace mención al protocolo de Internet que se utilizará en el enlace. Esto hace posible que se puedan enlazar desde un documento web a una URL que utilice otro tipo de protocolo, como puede ser el protocolo del correo electrónico, o del FTP.

Una de las cosas que necesitaremos hacer con más frecuencia en nuestros documentos web es facilitar un enlace que envíe un mensaje de correo electrónico a una cuenta de correo electrónico.

Para ello, crearemos en nuestros documentos un enlace, tal y como hemos explicado anteriormente, la diferencia en este caso estriba en que el protocolo de la URL ha de ser distinto, y en consecuencia el resto de la URL.

La sintaxis a utilizar en una URL que envíe datos a una cuenta de correo electrónico es la siguiente:

mailto:[email protected]


En primer lugar, como vimos anteriormente, especificamos el protocolo. En este caso el protocolo viene dado por la expresión "mailto:", a continuación hemos de decir el "DONDE", aunque en este caso dado que se trata de enviar un mensaje de correo, podríamos decir "A QUIEN". como las direcciones de correo electrónico son únicas y no puede haber dos direcciones idénticas, bastará con indicar la dirección de correo a la que se quiere enlazar o enviar un mensaje.

Por tanto, si queremos tener un enlace que abra una ventana con un mensaje de correo a una cuenta especificada, tendremos la siguiente sintaxis HTML:

<A HREF="mailto:[email protected]"> texto del enlace </A>

Ahora que hemos visto como se hace esto en HTML, veamos como se puede hacer de manera más sencilla en Dreamweaver. Existen dos formas de hacer esto en Dreamweaver 3:

1. Seleccionamos el texto que hará las veces de enlace e introducimos en el campo "Link" de la paleta Propiedades la URL "mailto:[email protected]". El campo "Target" en este caso se dejaría vacío. Como verá, esta manera es prácticamente idéntica a crear un enlace normal, con la única diferencia de que cambia el tipo de URL.
2. En la última versión de Dreamweaver 3.0, se ha añadido un objeto a la paleta Objects > Common que realiza este proceso de una manera más automatizada. Localice en esa paleta el objeto "E-Mail Link", al hacer click sobre él, se abrirá una ventana en la que puede especificar el texto para el enlace, y la dirección de correo a la que quiere enlazar. Dreamweaver se encargará de hacer el resto por usted.



TRUCO: En los enlaces del tipo "mailto:", podemos especificar cual será el titular del mensaje si lo deseamos. De esta manera, cuando se abra la ventana donde el usuario compondrá el mensaje, el titular del mismo habrá sido pasado por la URL del enlace.

Para hacer esto, utilice la siguiente URL:

mailto:[email protected]?subject=titular del mensaje

El funcionamiento de este tipo de información añadida, se podría interpretar como valores que se asignan a variables conocidas por el programa receptor. Así, cualquier cliente de correo entenderá la variable "subject" y le asignará el valor pasado en la URL.

En realidad podemos pasar más valores para las distintas partes que componen un mensaje de correo. Solo necesitamos saber el nombre de la variable con la que son conocidas por el cliente de correo esas partes, y pasarles un valor en la URL. Cada nueva variable pasada en esta cadena, debe estar separada de la que le precede por el símbolo "&".

Así por ejemplo, podríamos especificar el cuerpo del mensaje, sabiendo que la variable que lo define es "body", o podríamos pasar direcciones a las que enviar copias del mensaje, sabiendo que la variable que define esta información es "CC".

La siguiente URL, enviaría un mensaje a la cuenta de correo especificada, cuyo titular sería "titular" , el cuerpo del mensaje sería "cuerpo del mensaje" y además enviaría copia a la dirección de correo "[email protected]":

mailto:[email protected]?subject=titular&body=cuerpo del mensaje&[email protected]


LO SAQUE ENTERAMENTE DE ACÁ