Inserire link in un Epub con Sigil

Questo è un argomento che ho già affrontato in alcuni commenti all’articolo sull’uso di Sigil, ma che probabilmente merita una discussione tutta sua, anche per aggirare i limiti imposti da un commento. È piuttosto difficile inserire codice con una formattazione decente, in un commento... A ogni modo, vediamo di procedere con la spiegazione.

Inserire link all’interno di una pagina in HTML è un’azione estremamente semplice. Il tag da usare è il tag <a> e al suo interno va indicato l’indirizzo a cui i link dovrà portare. Racchiudiamo una parola tra il tag di apertura <a> e il tag di chiusura </a> e avremo ottenuto il nostro link.

<a href="indirizzo da raggiungere">parole da cliccare</a>

Prima dell’inizio della malaugurata era dei programmi wysiwyg (what you see is what you get), quando il codice HTML si inseriva a mano e non cliccando un pulsante colorato, chiunque producesse una pagina web conosceva questo e mille altri tag. Adesso non è detto che li si conosca ancora. A ogni modo, in HTML un link si crea così.

Gli Epub, però, non sono realizzati in HTML, ma in XHTML: un linguaggio molto simile, ma non identico. Nel caso di un link a un sito web, il tag <a> funzionerà benissimo e potremo usarlo senza problemi. Se dunque vogliamo inserire nel nostro Epub un link che rimandi per esempio a Wikipedia, o a qualsiasi altra pagina web, basterà utilizzare il formato che abbiamo visto in precedenza.

Apriamo dunque il nostro Epub con Sigil, che al momento è l’unico programma a permetterci di modificare la struttura di un Epub in modo indolore, e cerchiamo il punto in cui dovremo mettere il nostro link. Clicchiamo poi sul pulsante Code View, cioè quello coi simbolo < >. Visualizzeremo il codice XHTML della pagina del nostro Epub. Apparirà qualcosa di questo tipo:

Può essere inquietante, se non siamo abituati al linguaggio, ma non è poi così terribile. Giusto per dare qualche punto di orientamento, due parole rapide sulla struttura di una pagina XHTML. Di base, una pagina è composta così:

<div class="testo">

<h2>Capitolo 1</h2>

   <div class="corpo-capitolo">

     <p>Testo del paragrafo</p>

     <p>Testo del paragrafo</p>

     <p>Testo del paragrafo</p>

     <p>Testo del paragrafo</p>

   </div>

<h2>Capitolo 2</h2>

   <div class="corpo-capitolo">

     <p>Testo del paragrafo</p>

     <p>Testo del paragrafo</p>

     <p>Testo del paragrafo</p>

   </div>

</div>

Eccetera. Il corpo di ogni capitolo è racchiuso tra i tag <div> e </div>, mentre il corpo di ogni paragrafo è racchiuso tra i tag <p> e </p>. Tutto ciò non serve al fine di inserire un semplice link, ma può essere d’aiuto per non perdersi mentre cerchiamo il punto in cui mettere il nostro link. Una volta individuato, basterà usare la struttura che abbiamo già descritto, ossia:

<a href="indirizzo del sito da raggiungere">parole da cliccare</a>

Come indirizzo, usate la forma completa, ossia http:// eccetera.

Se invece vogliamo creare un link interno al nostro Epub, per esempio il link a una nota a fine pagina, dovremo utilizzare un sistema leggermente diverso. Prima di tutto, infatti, dobbiamo fissare il punto di arrivo del nostro link: nel caso di una nota, il punto di arrivo sarà l’inizio della nota. Cerchiamolo all’interno del codice. In quel punto dovremo inserire un riferimento, che servirà poi a dire al nostro link quale parte della pagina dovrà aprire.

Se nel punto di inizio della nota c’è già un tag <div>, allora possiamo modificare quello, altrimenti dovremo inserire un tag <span> nel punto iniziale. Per esempio,

<span id="nota1">1- Inizio della nota</span>.

Lo id è il “nome” della nota, ossia il nome della porzione di testo che sarà raggiunta dal link. Possiamo mettere qualsiasi nome, l’importante è che sia unico: nel caso delle note, una soluzione molto semplice è inserire un nome progressivo, come “nota1”, “nota2” e così via, finché ce ne sono.

Usando invece un tag <div> già esistente, dovremo solo aggiungere lo id, ottenendo quindi un codice di questo tipo:

<div ... id="nota1">

dove i puntini di sospensione indicano eventuali altre specifiche del tag (ad esempio, class).

Dopo aver fissato il punto di arrivo, dovremo fissare il punto di partenza. Spostiamoci dunque nella parte di pagina in cui vogliamo inserire il link e scegliamo la parola che dovrà portare il link, ossia la parola da cliccare per rimandare alla nota. Attorno a quella parola dovremo costruire di nuovo il nostro amico tag <a>, che stavolta assumerà questo aspetto:

<a href="#nota1">parola col link</a>

Come vedete, al posto dell’indirizzo di un sito web, stavolta abbiamo inserito il nome della nota, preceduto dal simbolo #. Se la nota si trova nello stesso file del link, questo funzionerà benissimo; se la nota si trova in un altro file, ma sempre all’interno del nostro Epub, allora dovremo cambiare il testo dello href e inserire href="nomedelfile.xhtml#nota1". Al posto di “nomedelfile”, ovviamente, dovremo mettere il nome del file, mentre l’estensione può essere .xhtml o anche .xhtm. In ogni caso, il nome esatto del file lo potete leggere nell’intestazione della finestra, se la aprite con Sigil.