Guida di HTML (base)

Collegamenti ipertestuali

Con questo settimo capitolo della guida di HTML entriamo nel cuore del linguaggio HTML: la creazione di ipertesti; chi ha buona memoria infatti si ricorderà che HTML sta proprio per Hyper Text Markup Language.

Ma cos'è un ipertesto? Per noi "giovani" niente di speciale, in realtà: un ipertesto è un insieme di documenti, in cui è possibile "saltare" da un documento all'altro utilizzando delle speciali parole chiave.

Un sito web è un ipertesto: i documenti sono le pagine web, e le "parole magiche" per saltare tra i documenti sono quelle parole, di solito sottolineate, che si possono cliccare, e, una volta cliccate, ci portano da una pagina all'altra del sito. Queste parole si chiamano, appunto, collegamenti ipertestuali (in inglese hyperlink, o semplicemente link). Ad esempio, questo è un collegamento ipertestuale.

In questo capitolo vedremo come inserire collegamenti ipertestuali nelle nostre pagine.

<a href="...

Proviamo a creare una pagina web, in cui inseriamo questa riga:

<p>Su <a href="http://www.repni.it/">questo sito</a> ho imparato l'HTML!</p>

Il risultato, nel browser, sarà una riga come questa:

Su questo sito ho imparato l'HTML!

Cliccando sulle parole "questo sito" il navigatore farà un salto di pagina: dalla pagina web che abbiamo creato al sito http://www.repni.it/. Il collegamento si distingue dal resto del testo per il fatto che è sottolineato, e per il suo colore blu (o viola, se la destinazione è già stata visitata). I webmaster sono generalmente d'accordo su quanto questi colori siano brutti da vedere; come fare a cambiarli? Qui c'è puzza di fogli di stile... :-)

Per ottenere il collegamento, all'interno del codice HTML abbiamo racchiuso le parole "questo sito" nel tag <a>; guardiamolo un po' più da vicino:

  • a è il nome del tag; 'a' sta per anchor (àncora). Infatti una metafora molto usata per descrivere i collegamenti ipertestuali è proprio quella dell'àncora, che va da una pagina all'altra
  • href="INDIRIZZO" è l'attributo che indica dove il collegamento deve saltare (nell'esempio il link salterà al sito http://www.repni.it/). Questo attributo è indispensabile per collegare due pagine, ma non è obbligatorio perchè, come vedremo tra qualche paragrafo, il tag <a> può essere usato anche per altri scopi.

Il tag <a> prevede alcuni attributi opzionali; i più usati sono:

  • title="Informazioni extra": specifica delle informazioni sul link, che verranno visualizzate in un menù a tendina, quando l'utente si sofferma col mouse sul collegamento. Esempio: <a href="http://www.repni.it/" title="Informatica in autoistruzione">RePNI</a>.
  • target="_blank": apre il collegamento in una nuova finestra (o scheda, se il browser le supporta). In realtà esistono altri valori per questo attributo (_parent, _self, _top, ...), ma sono caduti in disuso perchè si riferiscono ad una funzionalità di HTML, la gestione dei frames, che oggi è obsoleta.
  • hreflang="LINGUA": specifica il linguaggio della pagina a cui punta il collegamento. Esempio: <a href="http://la.wikipedia.org/" hreflang="la">Vicipaedia Latina</a>
  • accesskey="TASTO": definisce una combinazione di tasti che, se premuta, attiva il collegamento. Questo attributo non è implementato allo stesso modo su tutti i browser; ad esempio, il tag <a href="http://www.repni.it/" accesskey="r">RePNI</a>, sarà attivato in questi modi:
    • Firefox (Linux): Alt + Shift + r
    • Opera: Shift + Esc + r
    • Internet Explorer (Win) e Firefox (Win): Alt + r

Di pagina in pagina...

Ora che abbiamo imparato ad usare i collegamenti, facciamo un po' di pratica; l'obbiettivo sarà costruire un piccolo sito web, formato da due sole pagine: una pagina principale, che chiameremo index.html, e una pagina dei "siti amici", che chiameremo amici.html.

Creiamo quindi, in una cartella vuota, i due files index.html e amici.html; possiamo farlo dal menu File > Crea documento > File vuoto, se stiamo usando Nautilus, oppure direttamente salvando i files da Gedit (o Kedit, o Blocco Note, ecc...) come abbiamo fatto fino ad ora. Il risultato sarà il seguente:

Una cartella contiene due files HTML: index.html e amici.html

Dentro a questi file copiamo il codice HTML come mostrato nelle immagini:

index.html amici.html
Il codice HTML delle pagine: a sinistra è mostrata index.html, a destra amici.html

Vediamo quindi che il nostro tag <a> non si usa solo per fare dei collegamenti ad altri siti, ma anche per collegare tra loro le pagine di uno stesso sito, come avviene nella prima pagina con il link verso amici.html (in index.html, <a href="amici.html">pagina dei siti amici</a>), o nella pagina dei siti amici con il link che rimanda alla home page (in amici.html, <a href="index.html">home page</a>). In entrambi i casi la destinazione è costituita dal nome della pagina da raggiungere.

Perchè questa cosa funzioni, è necessario che tutte le pagine siano nella stessa cartella. Per collegare pagine che si trovano in cartelle diverse basta seguire lo stesso procedimento descritto per le immagini (Immagini, A caccia di file).

Scaricare files

Chi di non non ha mai scaricato un file da Internet? Praticamente nessuno! Da internet scarichiamo file di ogni tipo: brani mp3, videogiochi, libri, programmi, e via dicendo. Inserire un file da scaricare è molto semplice: basta usare il tag <a>, inserendo il nome del file come destinazione. Ovviamente il file che offriamo deve essere nella stessa cartella delle nostre pagine web (o in qualche sottocartella: in questo caso dovremo specificare l'intero percorso del file).

Vediamo ad esempio questo codice, con cui possiamo aggiungere al nostro sito una piccola "Sezione download":

<html>
<head>
<title>Pagina dei download!</title>
</head>

<body>
<p>Ecco alcuni documenti interessanti: scaricali!</p>
<ul>
 <li><a href="download/consumo_critico.pdf">Volantino su consumo critico e boicottaggio</a> (pdf)</li>
 <li><a href="download/mario64_orchestral.mid">Tema di Super Mario 64</a> (midi)</li>
 <li><a href="download/cap.zip">Programmino per cercare i CAP</a> (zip, eseguibile windows)</li>
</ul>
</body>
</html>

Questo codice produrrà il seguente risultato:

Ecco alcuni documenti interessanti: scaricali!

Nota: i files puntati dai collegamenti soprastanti sono di proprietà dei rispettivi autori, e non rientrano nella licenza Creative Commons di RePNI.

Generalmente una "sezione download" è sempre apprezzata dai visitatori, che possono così "portarsi a casa" qualche souvenir dalle nostre pagine. Quando inseriamo dei files da scaricare, però, dobbiamo fare attenzione a non infrangere il copyright: non possiamo pubblicare sul nostro sito il lavoro di qualcun altro, se questo non è d'accordo!

E-mail: mailto

Su Internet esistono tanti tipi di indirizzi; fin qui abbiamo visto indirizzi di pagine, files, o altri siti internet. In questo paragrafo parleremo degli indirizzi e-mail.

Quasi tutti, ormai, hanno un indirizzo di posta elettronica personale. Il mio, ad esempio, è dario@repni.it. Se pubblichi il tuo sito su Internet, molto probabilmente vuoi anche permettere ai tuoi visitatori di mandarti un'e-mail, comunicando loro il tuo indirizzo di posta elettronica.

Per fare questo, HTML mette a disposizione un tipo particolare di collegamento:

<p>Questo &egrave; il mio indirizzo e-mail: <a href="mailto:dario@repni.it">dario@repni.it<a>.<p>

Che viene interpretato come:

Questo è il mio indirizzo e-mail: dario@repni.it.

Cliccando sul testo del collegamento, sullo schermo del navigatore comparirà il suo client di posta elettronica predefinito (Thunderbird, Eudora, Outlook, ecc...), pronto per inviare una "lettera virtuale" all'indirizzo che abbiamo specificato dopo mailto:.

Indirizzi offuscati

C'è però da dire che non è sempre una buona idea sbandierare il proprio indirizzo email ai quattro venti, perchè su Internet capita spesso che gli indirizzi vengono raccolti da gente poco onesta, e utilizzati per inviare pubblicità, truffe, e tutta quell'altra posta spazzatura che chiamiamo spam.

Nella maggior parte dei casi, gli spammer utilizzano dei programmi automatici, detti crawler, che girano nella rete, memorizzando tutti gli indirizzi e-mail che trovano. Per questo motivo spesso troviamo indirizzi di posta scritti in modi strani, tipo dario AT repni DOT it, dario [A-T] repni [dot] it, e via dicendo.

Un indirizzo scritto in questo modo rende più difficile il lavoro dei crawler che, non essendo esseri umani, non hanno l'intelligenza necessaria per riconoscere che quelle parole stanno a significare un indirizzo.

La scelta tra questi indirizzi "offuscati" e il classico mailto spetta a chi costruisce il sito: alcuni preferiscono il primo metodo, per mettere il proprio indirizzo al riparo dallo spam, altri preferiscono esporsi a questo rischio e usare comunque mailto, a beneficio della comodità dei visitatori. Generalmente, nel secondo caso, conviene proteggere la casella di posta con dei filtri anti-spam, o magari evitare di comunicare il proprio indirizzo personale, creandone uno apposta per il sito web che si sta costruendo.

Opzioni

Esistono diverse opzioni da usare con mailto:

  • Subject imposta l'oggetto dell'e-mail: <a href="mailto:dario@repni.it?Subject=Ciao">e-mail me!</a>

  • Body imposta il contenuto dell'e-mail: <a href="mailto:dario@repni.it?Body=Ciao">e-mail me!</a>

    Può essere utile sapere che per inserire uno "spazio" nelle nostre proprietà possiamo scrivere %20; per andare a capo usiamo la sequenza %0A

  • CC aggiunge un altro destinatario alla mail: <a href="mailto:dario@repni.it?CC=admin@repni.it">e-mail us!</a>

Queste opzioni possono essere combinate in uno stesso tag, separandole con la 'e' commerciale (&). Ad esempio:

<a href="mailto:dario@repni.it?Subject=Informazioni&Body=Messaggio%20dal%20sito">e-mail me!<a>.

Questo codice avrà l'effetto, sul computer di chi clicca il collegamento, di aprire il programma di posta, componendo un nuovo messaggio email diretto a "dario@repni.it", avente oggetto "Informazioni", e contenuto "Messaggio dal sito".

Etichette

I collegamenti ipertestuali non necessariamente collegano due pagine diverse: in questo paragrafo vedremo come usare le etichette per "saltare" da un punto all'altro di una stessa pagina.

Pensiamo infatti ad una pagina molto lunga, che contiene una grande quantità di testo, tanto che non sta tutta nello schermo ma è necessario andare su e giù con la barra di scorrimento (o con la rotellina del mouse) per leggere tutto il contenuto. Un buon esempio potrebbe essere questo stesso articolo. In pagine come queste è facile perdersi, quando si cerca un argomento in particolare: prova ad esempio a tornare indietro, e cercare il sottoparagrafo dal titolo "Di pagina in pagina...".

Quanto tempo ci è voluto per trovare il paragrafo? Magari non tantissimo, ma abbastanza per essere fastidioso: probabilmente cliccando questo link avresti fatto prima!

Abbiamo appena visto un esempio di collegamento all'interno della stessa pagina. I collegamenti come questo sono fatti di due "pezzi":

  1. Un'etichetta, che indica il punto della pagina in cui si vuole saltare. Per "etichettare" una porzione di testo si usa l'attributo name del tag <a>; esempio: <a name="nome_dell_etichetta">testo da etichettare</a>.
  2. Il collegamento vero e proprio che, una volta cliccato, causerà il salto. Per creare il collegamento si usa il solito <a href..., ma utilizzando il nome dell'etichetta, preceduto da un cancelletto (#) come indirizzo; esempio: <a href="#nome_dell_etichetta">collegamento</a>.

Usiamo un esempio per capire meglio:

<h1><a name="etichetta_titolo">Titolo importante</a></h1>

...

<p>Clicca <a href="#etichetta_titolo">qui</a> per saltare a quel titolo importante...</p>

Attenzione a usare correttamente il simbolo cancelletto (#): va inserito nel collegamento (riga 5), ma non nel nome dell'etichetta (riga 1)!

Un altro modo per ottenere lo stesso risultato è usare l'attributo id sugli elementi a cui vogliamo saltare:

<h1 id="titolo_importante">Titolo importante</h1>

...

<p>Clicca <a href="#titolo_importante">qui</a> per saltare a quel titolo importante...</p>

L'attributo id (identifier, che in inglese significa "identificatore") può essere aggiunto a qualsiasi tag HTML, e serve a dare un nome a quel particolare tag (un paragrafo, un titolo, un'immagine ecc...), in modo che questo nome sia unico all'interno della pagina: non bisogna mai creare due elementi con lo stesso ID.

Collegamenti e immagini

Non solo il testo, ma anche le immagini possono essere usate come collegamenti ipertestuali. Un esempio? Prova a cliccare col mouse sul logo di Wikipedia, qui sotto:

Come era facile immaginare, cliccando sul logo il browser apre la home page di Wikipedia italiana. Altrettanto facile è capire come è stato realizzato questo collegamento; infatti è bastato racchiudere una normalissima immagine nel collegamento, proprio come abbiamo fatto finora con le parole:

<a href="http://it.wikipedia.org/"><img src="wiki.png" alt="Wikipedia, l'enciclopedia libera" /></a>

Notiamo che attorno all'immagine compare un bordo blu. Questo effetto, spesso non desiderato, può essere facilmente rimosso utilizzando i fogli di stile. Visto che il bordo sulle immagini è piuttosto fastidioso, in via del tutto eccezionale, in questo paragrafo sforiamo un attimo dallo stretto HTML e, per la prima volta, andiamo a "ficcare il naso" in questi famosi CSS:

<a href="http://it.wikipedia.org/">
 <img src="wiki.png" alt="Wikipedia, l'enciclopedia libera" style="border:0px;" />
</a>

Tutto quello che abbiamo fatto è aggiungere un attributo style al tag <img>. All'interno di questo attributo abbiamo messo la stringa border:0px;, che ha l'effetto di ridurre a zero pixel (0px) la dimensione del bordo, rendendolo quindi invisibile. Non ci dilunghiamo oltre sullo stile degli elementi HTML: abbiamo già detto anche troppo! Il resto lo approfondiremo in una guida sui CSS, che speriamo di vedere presto sulle pagine di RePNI.

Thumbnails

Prima di chiudere il capitolo, vorrei mostrare un'importante applicazione dei collegamenti ipertestuali. Vi ricordate il problema delle immagini sul web? In pratica, a noi informatici non piace rimpicciolire le immagini, perchè così facendo ne peggioriamo la qualità, mettendo sul web solo parte dell'informazione che l'immagine originale porta con sè. D'altro canto, però, se carichiamo in Internet files troppo grandi rischiamo di appesantire le pagine, rendendo spiacevole, o addirittura impossibile, la navigazione per chi non visita il sito con una linea abbastanza veloce.

La tecnica delle thumbnails risolve questo problema. Questa tecnica consiste nel creare versioni molto rimpicciolite delle immagini che vogliamo pubblicare (Thumbnail letteralmente significa "unghia del pollice", e si può tradurre in italiano con il termine miniatura). Le miniature sono però collegate alle immagini in formato originale, utilizzando il tag <a>, che abbiamo visto in questo capitolo; in questo modo chi visita il sito si trova davanti immagini piccole, leggere, e a bassa qualità che, una volta cliccate, rimandano al file originale, più pesante, ma a qualità piena. Il seguente è un esempio di thumbnail:


Esempio di thumbnail: la miniatura visualizzata in pagina (system_thumb.jpg) è piccola, e di scarsa qualità: infatti occupa soltanto 3,1 KB. Cliccando su di essa, però, il navigatore può visualizzare l'immagine in qualità originale (system.jpg), dal peso di oltre 1 Mega Byte.

Creare una thumbnail è molto semplice; in effetti non è necessario imparare nulla di nuovo: chi ha letto con attenzione questo articolo ed il capitolo "Immagini per il web" non avrà difficoltà a svolgere le operazioni necessarie per creare una thumbnail. Supponiamo di lavorare con la stessa immagine mostrata qua sopra, system.jpg:

  • Aprire l'immagine originale system.jpg in GIMP (o Photoshop, o Paint Shop, ecc.), ridimensionarla a seconda dello spazio che vogliamo farle occupare nella pagina, e salvarla con un altro nome, ad esempio system_thumb.jpg. Nel momento del salvataggio, GIMP ci permetterà di scegliere la qualità del file JPEG; stiamo bassi: in una miniatura la qualità non ci interessa, l'importante è che occupi poco spazio.
  • Inserire la miniatura che abbiamo appena creato nella pagina HTML, creando un collegamento al file originale: <a href="system.jpg"><img src="system_thumb.jpg" alt="Sistema solare (clicca per ingrandire)" /></a>.

Usare le miniature è importante, per mantenere minima la dimensione delle pagine dei nostri siti, dando comunque all'utente la possibilità di accedere ai contenuti in qualità originale. Un uso corretto delle thumbnail è indispensabile quando si vogliono creare delle gallerie contenenti molte immagini. Un esempio? Provate a usare la ricerca immagini di Google!

In breve...

In questo capitolo abbiamo visto che...

  • Quelle parole sottolineate, che, se cliccate, ci fanno saltare da una pagina all'altra, si chiamano collegamenti ipertestuali (in inglese hyperlink).
  • In HTML i link sono anche detti ancore, e si ottengono con il tag <a>. Ad esempio, il codice <a href="http://www.repni.it/">link</a> produce questo risultato: link.
  • I collegamenti ipertestuali possono essere usati per mandare l'utente su siti esterni, ma anche su altre pagine del nostro stesso sito, o addirittura per permettergli di scaricare dei files presenti sul nostro spazio web. Per fare questo sarà sufficiente scrivere il nome del file (o il suo intero percorso, se questo si trova in qualche sottocartella), all'interno dell'attributo href.
  • Le ancore si usano anche con gli indirizzi e-mail. In questo caso si usa il parametro mailto: <a href="mailto:dario@repni.it">e-mail me!</a>
  • Un collegamento può anche rimandare ad un altro punto della stessa pagina visualizzata. Per fare questo bisogna:
    • Marcare il punto di destinazione con un'etichetta (es. <a name="destinazione">voglio saltare qui</a>)
    • Creare un collegamento riferito all'etichetta appena creata (es. <a href="#destinazione">salta!</a>)
  • Non solo il testo, ma anche le immagini possono essere utilizzate come collegamenti ipertestuali. Sarà sufficiente racchiudere il tag <img> nel collegamento.
  • Per alleggerire i siti internet che contengono immagini pesanti si usano le thumbnail (miniature). Sulle pagine del sito vengono messe versioni rimpicciolite, a bassa qualità, delle immagini, che sono collegate alle originali attraverso ancore.
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag