Hagamos enlaces con etiquetas <a>
Lo primero, recuerda este aviso:
AVISO
Los enlaces son útiles y necesarios para cualquier documento electrónico. Pero son complejos de manejar al principio. Mejor no leas este capítulo ahora. Es fácil liarse con los enlaces y agobiarse un poco al principio. Mejor haz tu primer eBook sin enlaces y más adelante, cuando tengas más soltura con el HTML ya te atreverás con ellos.
Si has decidido seguir, refresquemos lo que decíamos más arriba: un enlace es lo mismo que un vínculo, que hipervínculo y que un link y que un hyperlink. Lo verás escrito de todas las maneras. Pues es lo mismo.
¿En qué consiste un enlace? Simple: un enlace te lleva de un sitio a otro. Un enlace une dos puntos entre dos contenidos digitales. Digo contenidos digitales porque un enlace puede linkar dos puntos en internet (de una web a otra, o de una página a otra dentro de la de la misma web) pero también puede unir dos puntos que no estén en la web porque estén dentro de un archivo digital, como ir de una página a otra dentro de un pdf o de un eBook. Incluso puede unir dos puntos uno de los cuales esté en un eBook y el otro en Internet, de modo que cuando pinchas el enlace te sales del eBook y entras en Internet. Todo es posible.
Un enlace tiene un ORIGEN: el lugar desde donde yo pincho.
Y un DESTINO: el lugar a donde me lleva el enlace.
Y a veces, en el DESTINO hay una posibilidad de ir ATRÁS, de modo que puedo volver al lugar de ORIGEN rápidamente.
Todo esto se gestiona con la etiqueta HTML <a>. Sigil nos va a ayudar a hacer enlaces dentro de mi Libro Electrónico.
I.- Enlaces hacia fuera del Libro Electrónico.
Abre Sigil. Abre un archivo cualquiera, con un texto cualquiera. Imagínate que vamos a poner un enlace a la Wikipedia desde un texto cualquiera de mi eBook. Tienes una párrafo que dice así:
<p>Voy a poner un enlace a la Wikipedia.</p>
En la Vista de Libro (¿recuerdas?) se vería como un párrafo normal, así:
Bien. Voy a hacer que el enlace esté en la palabra "Wikipedia". Ahí es donde deberé pinchar. El código sería así:
<p>Voy a poner un enlace a la <a href="http://www.wikipedia.org"> Wikipedia </a></p>
NOTA
Voy a ir poniendo en color rojo las partes de código en las que debemos fijarnos. Si tu eReader no lee colores no te preocupes, todo se explica también en el texto.
En código del enlace va dentro del párrafo <p>, y es exactamente éste:
<a href="http://www.wikipedia.org"> Wikipedia </a>
La etiqueta HTML para hacer enlaces es <a href=" "> </a>. Su sintaxis completa es un pelín complicada, así:
<a href=” aquí pongo la url de destino, entre comillas ”> Aquí pongo el texto donde va en enlace </a>
Como siempre con el HTML, la sintaxis es muy importante, y no se deben olvidar detalles como las comillas. La dirección url de destino también debe estar perfectamente escrita, con su http:// ("hache te te pe dos puntos raya raya”). Si lo pones así tu enlace funcionará. En nuestro ejemplo, la palabra “Wikipedia” aparecerá en color azul y subrayada, que es la típica manera (aunque no la única) en la que aparecen los links en Internet, así:
Ahora si pincharas en el enlace el dispositivo te sacaría del eBook y abriría un navegador para entrar a la página web de la Wikipedia en Internet (todo ello, dependiendo de las posibilidades del eReader que estés utilizando, claro).
II.- Enlaces dentro del Libro Electrónico.
Un poco más laborioso. Se trata de enlazar desde un lugar dentro del eBook a otro. Dicho de otro modo, hemos de tener una etiqueta de ORIGEN y otra de DESTINO.
Nuestra etiqueta para hacer enlaces es <a href=" "> </a>. La usaremos para el ORIGEN.
El DESTINO lo etiquetaremos con la etiqueta <a id=" "> </a>. En esta etiqueta pondremos un Punto de Anclaje (los ingleses lo llaman Anchor Point).
Un ejemplo. Abre tu Sigil y crea dos archivos, uno de ORIGEN y otro de DESTINO.
El archivo de ORIGEN lo llamaremos origen.xhtml, y ahí, en la Vista de Código, puedes escribir por ejemplo este párrafo:
<p>Voy a poner un enlace a otro lugar del eBook.</p>
El archivo de DESTINO lo llamaremos destino.xhtml, y ahí pondremos este párrafo:
<p>Este es el destino de mi enlace. Ahora quiero volver ATRÁS.</p>
Lo primero que vamos a hacer es crear un Punto de Anclaje en el DESTINO, así:
<p><a id="destino1"></a> Este es el destino de mi enlace. Ahora quiero volver ATRÁS.</p>
Fíjate. Hemos puesto un fragmento de código HTML cuya única función es ser el DESTINO (el Punto de Anclaje) de un link:
<a id="destino1"></a>
Nuestro DESTINO se llama destino1. Se podía haber llamado de cualquier otra manera, el nombre lo he elegido yo. Para la sintaxis HTML es importante que esta identificación vaya entre comillas.
Ahora vamos a vincularlo al ORIGEN.
Vete al archivo origen.html. Vamos a poner el enlace en las palabras “otro lugar”:
<p>Voy a poner un enlace a <a href="../Text/destino.xhtml#destino1"> otro lugar </a> del eBook.</p>
Aquí la etiqueta de ORIGEN es <a href="../Text/destino.xhtml#destino1"> <a>. Entre las comillas he puesto la ruta donde está mi DESTINO:
"../Text/destino.xhtml#destino1"
¿Cómo se interpreta esta ruta? Lo que quiere decir es que nuestro DESTINO está en el archivo destino.xhtml, que Sigil ha creado dentro de la carpeta Text y se llama #destino1, esta vez con un símbolo “#” (almohadilla) justo delante.
Ahora mi texto tiene este aspecto:
El eReader sabe que si pincho en el link "otro lugar" debe buscar el Punto de Anclaje que se llama destino1 que está en el archivo destino.xhtml.
Vamos a ver si funciona. Haz la prueba aquí:
Voy a poner un enlace a otro lugar del eBook.
III. ¿Y si ahora yo quiero volver atrás desde de mi #destino1?
Cuando se hacen enlaces dentro de un eBook puede ser interesante que en el DESTINO haya un enlace para VOLVER ATRÁS. Así, puedes ir de un lugar a otro sin perderte en la navegación del libro.
La manera de hacerlo es sencilla, sólo hay que seguir la misma norma de los enlaces:
Una etiqueta <a href=" "> </a> donde estará el ORIGEN del link.
Una etiqueta <a id=" "> </a> donde identificamos el DESTINO.
¿Y-pa-ra-qué-to-do-es-te-fo-llón?
Porque es muy útil para que los libros estén completos.
Pensemos un caso típico para muchos libros, y es la necesidad de que tengamos Notas al pie. Con lo que sabemos es sencillo hacer Notas al pie: yo puedo crear un archivo al final de mi Libro Electrónico (mi archivo destino.xhtml podría haberse llamado notas.xhtml, por ejemplo) e ir poniendo ahí mis Anotaciones. Puedo etiquetar mis Anotaciones poniéndoles puntos de anclaje (#nota1, #nota2, #nota3... #nota999, todas las que necesite). Pero las Anotaciones van a estar lejos de su punto de origen (en otro archivo distinto) con lo cual necesito una manera de volver atrás desde mis archivo notas.xhtml hasta el mismo punto en el que yo estaba leyendo. Una manera sencilla, intuitiva y automática. Bien, puedo en cada Nota poner un enlace para "VOLVER ATRÁS", que me lleve directamente al mismo lugar de donde vengo. Y así puedo tener un libro con todas las anotaciones que hagan falta. Como los libros de verdad.