Actualizado el 14-01-2007
versión para imprimir
Creando enlaces
Si has llegado hasta aqui seguro que conoces los links, los enlaces entre
páginas web. Son tan importantes que dan nombre al propio lenguaje html, lenguaje de marcas de hipertexto.
En esta sección veremos lo fácil que es crearlos.Para ello pondremos. un ejemplo práctico. Vamos a crear un enlace a una página, por ejemplo a la página inicial del W3C, que es el consorcio encargado de definir el estandard del lenguaje html (entre otros muchos).
Un enlace no es mas que un texto rodeado de las etiquetas correspondientes:
<a>w3c</a>.
Las etiquetas <a></a> son anclas que permiten saltar de una página a otra. Por eso, dentro del ancla debemos especificar la URL a la que el navegador debe saltar. Para
que nos entendamos, la URL es la dirección internet de la página a la que
deseamos ir. Añadamos la dirección:
<a href="http://www.w3c.org">w3c</a>
Con este resultado:
w3c
Bueno, lo primero que vemos es que si pasamos el cursor del ratón por encima, se
convierte en una mano ... hemos conseguido el enlace. Si pulsas y estas
conectado verás como tu navegador te lleva a la página escogida (cuya lectura
recomiendo, por cierto).
¿Que hemos
hecho para conseguir el enlace? pues sencillamente añadir a la etiqueta
<a> (a de anchor, ancla) una dirección de internet mediante la
instrucción href. Observa que el enlace precisa de una etiqueta
de cierre </a>, y que el texto visible que resaltará el enlace es
el que escribimos entre ambas etiquetas.
Direcciones URL
Podemos indicar la dirección URL de dos formas, absoluta y relativa.
Una
URL absoluta es aquella en la que indicamos al navegador el camino
completo para encontrar la página, mediante la siguiente
sintaxis:
"http://"(protocolo http, el propio de las
páginas web. Luego veremos que se pueden hacer links con otros
protocolos)
www, donde indicamos que buscamos en la red.
Actualmente esta parte no es necesaria en muchas
direcciones.
w3c.org expresa el nombre de
dominio que alberga la página, es decir, el nombre del servidor (ordenador) que
la contiene.
Finalmente podriamos apuntar a una página especifica dentro de ese servidor: la URL http://www.w3c.org/MarkUp/Guide/Advanced.html apunta al archivo Advanced.html, que está en la máquina que alberga la dirección www.w3c.org, directorio MarkUp, subdirectorio Guide.
¿cuando debemos usar una url absoluta? podemos usarla siempre.
Debemos obligatoriamente usarla cuando el enlace apunta a una página que está en
distinto servidor que la nuestra.
Una URL relativa es aquella que solo indica parte de la dirección de la página de destino. Solo podemos usar URLs
relativas cuando se trata de páginas albergadas en el mismo servidor.
En este
caso basta indicar el nombre del archivo que contiene la página índice porque
estaba en el mismo directorio. Si la página enlazada está en el mismo servidor,
pero en distinto directorio, debemos indicar la ruta hasta ella:
<A href="index.php">¿Que necesito para escribir html?</A>
Este enlace te llevaría a la primera página de estos apuntes de html. Como el archivo que contiene aquella página, y el archivo que contiene la página que estas leyendo, están en la misma carpeta (directorio), solo hace falta indicar al navegador el nombre del archivo. Automaticamente lo buscará en el mismo directorio.
Advierte que la ruta de directorios se indica mediante sintaxis unix y no windows , es decir, escribimos directorio/directorio, y no directorio\directorio. La sintaxis es la propia de unix, porque historicamente la inmensa mayoría de servidores (ordenadores que albergan las páginas) funcionan bajo este sistema operativo, lo que a su vez me obliga a recordarte que unix distingue entre mayusculas y minusculas, con lo cual debes escribir la ruta hacia el archivo usando exactamente el mismo tipo de letra con el que se escribió: directorio/File.htm es una cosa, y directorio/file.html otra totalmente distinta.
Enlaces dentro de la misma página
Es posible mediante enlaces saltar de un punto a otro, dentro de la misma
página. Esto es especialmente útil cuando nos encontramos en una página de gran
tamaño.
Bien, lo que necesitamos son dos anclas. La primera es un enlace como
los que hemos visto hasta ahora, aunque como no queremos llegar solo a la página
(¡ estamos ya en ella !), sino a una parte concreta de la misma, tenemos que
añadir la dirección de ese punto determinado al que queremos enlazar. Y la
segunda ancla, naturalmente, es la que indica al navegador el punto de la página
donde debe acudir.
Es fácil entenderlo con un ejemplo. Supongamos que
quisieramos ir desde aqui al primer subepígrafe de esta propia página. Pues para hacerlo creamos aqui
el enlace como ya sabemos:
<a href="#alla-vamos">pulsa aqui</a> para volver arriba
Y su resultado:
pulsa aqui para volver arriba
Esto ya lo habiamos visto antes: mediante la etiqueta <a indicamos la direccion URL de esta página, añadiendo la
expresión #alla-vamos que indica el punto al que ha de saltar.
# es el identificador que indica que es un enlace local, y queda
claro que podemos poner el nombre que queramos. Y entre las dos etiquetas
insertamos el texto visible que hará de enlace.
Pero
esto no es todo. Ahora debemos acudir al punto de la página que sirve de destino
al enlace, y insertar alli el identificador para que el navegador sepa a donde
ha de dirigir sus pasos. Como lo hacemos? con otra ancla:
<a name="alla-vamos"></a>
Añadiendo a las etiquetas del ancla el atributo
name="alla-vamos".
(Esta etiqueta está aqui para
que la veas, pero naturalmente no es este su sitio, sino en el lugar de destino
decidido, en este caso, en el primer subepigrafe de la página).
Y por si lo dudabas, tambien puedes hacer un enlace a una parte concreta de otra página. El sistema es el mismo. Simplemente en la primera ancla indicas la dirección de la página de destino y el identificador del punto de la misma a saltar, y en dicha segunda página insertas la segunda ancla.
Usando imágenes como enlaces
Como hemos visto, el texto que aparece entre las etiquetas <a></a> es el que sirve de enlace. Al posar el cursor sobre ese texto, se convierte en una mano, advirtiendo que de pulsar pasaremos a otra página. Pero en lugar de texto, podemos usar una imagen como enlace:
Pulsa en el logo para ir a apache.org:
<a href="http:\\www.apache.org"> <IMG src="imagenes/apache_pb2.gif"> </a>
Bueno ... imagino que pensarás que aun no sabes como incluir imágenes en tu página; en la próxima lección iremos a ello. Tambien supongo que no te gustará el reborde que aparece alrededor de la imágen. Se podía quitar, añadiendo a la etiqueta usada para añadir la imagen el atributo border="0" [en desuso]:
<a href="http:\\www.apache.org"> <IMG src="imagenes/apache_pb2.gif" border="0"> </a>
actualmente la formula recomendada es acudir a las CSS. Hay mejores formas de hacerlo, pero esta servirá de ejemplo:
<a href="http:\\www.apache.org" > <img style="border:none;" src="imagenes/apache_pb2.gif" alt="apache logo"> </a>
Otros tipos de enlaces
No solo podemos enlazar a páginas web. También podemos preparar un link que al pulsarlo lance el programa correo. Seguro que lo has visto por ahi:
<a href="mailto:webmaster@ignside.net">escribeme !!</a>
Con este resultado: escribeme !!.
Observa que lo único que cambia respecto de un enlace normal es que
sustituimos la URL por un mailto:el_email_que_queramos obteniendo al pulsar un formulario de correo en el que aparece el email que indicamos como el del destinatario.
Tambien podemos predeterminar el campo del formulario dedicado a
"objeto":
<a href="mailto:webmaster@ignside.net?subject=valora mi manual">¿que opinas?</a>¿que opinas?
Tambien podemos hacer enlaces a sitios ftp, es decir, a servidores de archivos para download. El siguiente enlace te llevaría al servidor ftp de Paul Lutus, el autor de arachnophilia:
<a href="ftp://arachnoid.com/pub/"> Pulsa aqui para obtener Arachnophilia !! </a>Pulsa aqui para obtener Arachnophilia !!
Y por último también podemos enlazar a grupos de noticias (newsgroup):
<a href="news://chamisplace.com/chami.public.htmlkit.beta"> html-kit beta </a>html-kit beta
Podemos, en fin, tener algun archivo en nuestro sitio web dispuesto para ser bajado, sin necesidad de servidor ftp, simplemente enlazando al mismo:
<a href="cualquierarchivo.zip">pulsa</a> para bajarte este archivo
Esto es lo mas importante que debes conocer sobre los enlaces en la web.
Solo
dos cosas mas: es perfectamente legítimo que incluyas links a páginas de otras
personas. No hace falta pedir ningun permiso. Los enlaces entre páginas son lo
que hacen de la web lo que es, y al fin y al cabo si alguien se molesta en hacer
una página es para que sea vista por el mayor número de personas posible.
Con
frecuencia el autor del sitio a enlazar incluirá instrucciones para que los
links se hagan a determinada página de su sitio. Es norma de cortesía enlazar
como se solicita.
Y tambien puedes pensar que no merece la pena trabajar en
una página llena de enlaces, que invitan a tus visitantes a abandonarla hacia
otros sitios. Mediante el atributo target="_blank" puedes hacer que las paginas enlazadas no se
carguen en la misma ventana, sino en una ventana nueva, de tal forma que el visitante permanece en tú página, teniendo la enlazada en otra ventana del navegador:
<a href="http://www.w3c.org" target="_blank">w3c</a>
Puedes probarlo en este enlace:: w3c.
Ten en cuenta sin embargo que el atributo target está pensado para su utilización en ventanas con frames (marcos) por lo que su uso en una página sin frames, como está, es incorrecto.
id o name
Hemos usado en esta página el atributo name dentro de un enlace para indicar el punto de destino de los enlaces internos. Junto al atributo identificador name, tenemos el atributo id que cumple las mismas funciones, y en este contexto de enlace, puede sustituir a name o usarse conjuntamente. Si decides usar ambos en un mismo enlace, deben tener idéntico valor.
La ventaja de id es que no necesitas crear un ancla especial de destino, puedes apuntar a cualquier etiqueta html identificada con id.
Otra ventaja de id sobre name es que el primero sirve como selector de hojas de estilo en cascada.
Sin embargo, algunos navegadores antiguos puede que solo entiendan el atributo name. Además como valor de name puedes usar entidades de caracteres, por ejemplo vocales acentuadas, lo que esta prohibido como valor de id