ENLACES Y GRÁFICOS
INTRODUCCIÓN
Además de los muchos estilos y capacidades de
presentación que nos ofrece HTML para estructurar el documento en sí,
disponemos de varias directivas que nos permiten definir relaciones entre
diferentes documentos y estructurar todo un conjunto de documentos para crear
una unidad lógica. La facilidad para definir este tipo de enlaces es una de las
razones de la potencia y versatilidad de HTML. Por la similitud de tratamiento
que tienen los enlaces y los gráficos, tocaremos también en esta sección cómo
pueden incluirse estos últimos en un documento.
Los enlaces en HTML se expresan rodeando con la
directiva <a> el
objeto (que puede ser un fragmento de texto o un gráfico) que vaya a servir
como anclaje
para el enlace. Por ejemplo, si marcamos con <a>
un gráfico, cuando en el documento final se pulse con el ratón sobre dicho
gráfico saltaremos
al objeto referenciado en el enlace: otro documento, un vídeo musical, o un
servidor de información meteorológica.
QUÉ ES UN URL
Para
especificar de manera uniforme el objeto al que apunta nuestro enlace, se
utiliza una forma estandarizada que se denomina URL (Uniform Resource Locator,
es decir, Localizador Uniforme de Recursos ).
Un URL está formado de la siguiente manera: esquema://maquina/ruta
La máquina
y la ruta sirven para localizar
el objeto al que apunta nuestro enlace. La máquina
es la identificación del servidor en el cual está situado el objeto al que
apunta el enlace. Puede ser simplemente el nombre de un ordenador (como www.etsit.upm.es)
o también un nombre y un puerto (por ejemplo www.etsit.upm.es:8000).
La ruta
es el nombre del archivo que contiene el documento en concreto, incluyendo el
nombre del subdirectorio en el que se encuentra.
ENLACES
Para definir
un enlace es necesario marcar con la directiva <a> el objeto del cual va a
partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del
objeto elegido debemos abrir con
<a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto pulse aquí para visitar la NASA nos conduzca a la home page de la
NASA, debemos escribir en nuestro texto HTML:
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Si lo que queremos es solamente enlazar con otro
documento que se encuentra en el mismo servidor, incluso en el mismo
subdirectorio. En este caso no es necesario escribir el camino completo al destino del enlace,
sino que basta con dar la mínima información imprescindible.
Es decir, que si desde cierto documento queremos
enlazar con otro que se encuentra en el mismo subdirectorio, basta con poner su
nombre: <a href="el_otro_archivo">pulse aquí</a>. O si se
encuentra en otro subdirectorio del mismo servidor, es suficiente con poner <a
href="/la/ruta/que/sea/archivo.html">pulse aquí</a>. También
pueden utilizarse rutas relativas: <a href="ruta/relativa/cosa.html">cosa</a>.
Imágenes
Para incluir
un gráfico en un documento HTML se utiliza la directiva <img>. En dicha directiva debe incluirse un parámetro src="URL", con el cual indicamos dónde está el archivo con el gráfico
concreto que queremos para nuestro documento. Esto pone a nuestra disposición
una gran flexibilidad, ya que podemos complementar el contenido de nuestro
documento tanto con gráficos que se encuentren disponibles en nuestro servidor
de WWW como con una foto situada en un servidor de la NASA o del Ministerio de
Cultura, por ejemplo, sin que el lector final tenga por qué apreciar ninguna
diferencia.
Existe alguna limitación respecto a los formatos
gráficos que los programas lectores de HTML puede
interpretar sin problemas. Los formatos fundamentales son el GIF y el JPG, que
cualquier programa con capacidades gráficas debería poder mostrar directamente
en nuestro texto. Si utilizamos otro formato diferente, lo más probable es que
cuando un lector esté accediendo al documento, el programa no comprenda ese
formato y se tenga que solicitar la ayuda
de otro programa, con lo cual al final el gráfico no se insertará en el lugar
estratégico de nuestro documento, sino que aparecerá en otra ventana diferente.
Hay un parámetro optativo de la directiva <img> que sirve para proponer un
texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para
leer el HTML un programa sin capacidades gráficas (por ejemplo una consola de Lynx, que sólo trabaja con texto). Se trata de alt="texto".
Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas
sin capacidades gráficas no podrían mostrar los enlaces que nosostros
queremos.
Como ocurría antes con los enlaces, por lo general no
es necesario escribir el URL completo, sino que basta con dar la mínima
información. Por ejemplo, para colocar en este punto del documento un monigote
que está en el mismo subdirectorio que este manual, en el archivo monigote.gif,
escribiremos:
<img src="monigote.gif" alt="MONIGOTE"><p>
Lo que se traduce en:

Como se ve, hemos especificado el texto alternativo
"MONIGOTE", con lo cual una persona que no dispusiera del programa
adecuado hubiera visto algo parecido a [MONIGOTE]
en lugar del dibujo.
Podemos también incluir un dibujo que esté en otro
lugar especificando un URL completo, por ejemplo:
<img src="http://naic.nasa.gov/images/nasa-logo.gif"> <p>
Y además podemos hacer que un gráfico sea un enlace,
utilizando la directiva <a>. En
este caso no debemos olvidar utilizar la opción alt="texto"
para que todos los usuarios puedan seguir el enlace:
<a href="http://www.nasa.gov/"> <img src="http://naic.nasa.gov/images/nasa-logo.gif" alt="NASA"> </a> <p>
|