La definizione dei collegamenti avviene in HTML tramite l'elemento a. Prima di mostrarvi come utilizzarlo, ecco alcuni suggerimenti generali sui collegamenti ipertestuali. Pensate sempre a testi di collegamento significativi. Con un banale indietro di solito non si aiuta nessuno. (Infatti, se un visitatore arriva da un'altra pagina, di solito non sa cosa significhi indietro). Cercate di scegliere testi di collegamento descrittivi.
I collegamenti ipertestuali in HTML seguono sempre lo stesso principio.
<a href="videos.html">Video attuali</a>
All'elemento a viene assegnato l'attributo href. Questo attributo href si aspetta come valore il target del collegamento. Nell'esempio precedente si faceva riferimento al file videos.html. Questo file si trova nella stessa cartella del file HTML in cui è stato definito il collegamento ipertestuale.
Altrimenti, per la definizione dei collegamenti ipertestuali si applicano le stesse regole presentate in relazione all'inserimento di immagini.
Potete definire non solo collegamenti interni al progetto. È altrettanto possibile impostare collegamenti ipertestuali a file esterni e a domini.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Il testo compreso tra il tag di apertura <a> e quello di chiusura </a> è infine il testo di collegamento. Di default, questo testo viene sottolineato dai browser.
Specificare la finestra di destinazione
Quando si fa clic su un collegamento ipertestuale, il target del collegamento viene aperto nella finestra del browser attuale. Normalmente questo è del tutto accettabile. Può tuttavia accadere che ad esempio si sia impostato un collegamento a un dominio esterno. Se un visitatore fa clic su questo link, il target del collegamento dovrebbe essere aperto in una nuova finestra del browser o scheda. Vantaggio di questa soluzione: il vostro sito web rimane aperto in background.
Tuttavia, non dovreste aprire ogni collegamento del vostro sito in una finestra esterna, poiché i visitatori potrebbero essere rapidamente infastiditi da questo comportamento.
Attraverso l'attributo target dell'elemento a è possibile determinare la finestra di destinazione in cui il rispettivo target del collegamento dovrà essere aperto. In questo caso, HTML offre inizialmente tre valori standard per target.
• _blank – Il target del collegamento viene visualizzato in una nuova finestra del browser.
• _self – Apre il target del collegamento nella finestra del browser attuale.
• _parent – Qui è possibile uscire dalla cornice. (Si noti che le cornici non sono supportate in HTML5. In ogni caso, questa tecnica non dovrebbe più essere utilizzata, poiché ci sono alternative migliori oggi. Chiunque voglia approfondire le cornici, troverà informazioni su http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Anche questo viene utilizzato in relazione alle cornici. Con questo è possibile aprire il target del collegamento al di fuori dell'insieme delle cornici.
Ecco un esempio di come utilizzare l'attributo target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
In questo caso, il target del collegamento http://www.psd-tutorial.de sarebbe aperto in una nuova finestra/scheda. Lo stesso effetto si otterrebbe usando un nome inventato come halligalli anziché il nome riservato _blank. Tuttavia, se utilizzate l'attributo target, consiglierei di fatto di optare per uno dei nomi riservati.
Definire la base del collegamento
Potete definire una cosiddetta base del collegamento nell'area head del file HTML. Una base del collegamento del genere garantisce che tutti i target del collegamento vengano visualizzati in una determinata finestra del browser. Anche questo è ovviamente interessante soprattutto in relazione alle cornici.
Tuttavia, questa prassi è comunque pratica se ad esempio desiderate aprire tutti i collegamenti in una nuova finestra del browser utilizzando _blank. Immaginate una lista di link. Se volete che tutti i target dei collegamenti vengano sempre aperti in una nuova finestra, il risultato sarebbe simile a questo:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Dovreste quindi assegnare un attributo target a ciascuna definizione a.
Come potete vedere, non è particolarmente efficiente. Diventa ancora meno efficiente se tra qualche mese decidete di non aprire i target del collegamento in una nuova finestra. Dovreste quindi modificare gli attributi target di tutti i collegamenti. Questo si può evitare tramite la base del collegamento menzionata. Questo viene definito mediante l'elemento base all'interno di head. All'elemento base si assegna l'attributo target con il valore desiderato. Ecco un esempio di come potrebbe apparire:
<!DOCTYPE html> <html lang="it"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Questa vi risparmierà un sacco di lavoro di battitura.
Definire un ancoraggio
Come potete impostare collegamenti ipertestuali ad altri file, avete già visto. Tuttavia, all'interno di un file HTML è possibile definire anche cosiddetti ancoraggi. Successivamente è possibile impostare riferimenti a tali ancoraggi. È pratico ad esempio nelle pagine estese. In questo modo è possibile definire una tabella dei contenuti all'inizio del documento, attraverso la quale i visitatori possono saltare alle sezioni rilevanti per loro senza dover scorrere nella finestra del browser.
Gli ancoraggi vengono creati attraverso l'elemento a. Tuttavia, le definizioni degli ancoraggi non ottengono un attributo href, ma un attributo name.
<a name="seitenanfang">Contenuto</a> <a name="kapitel1">Contenuto Capitolo 1</a> <p>Qui c'è un sacco di testo.</p> <a name="kapitel2">Contenuto Capitolo 2</a> <p>Qui c'è un sacco di testo.</p>
Potete assegnare liberamente i nomi degli ancoraggi. Vi consiglio però di sceglierli il più corto possibile, di utilizzare solo lettere minuscole e di evitare caratteri speciali.
Per fare riferimento a un ancoraggio, si definisce un normale hyperlink, come è stato mostrato all'inizio di questo tutorial.
<a href="#seitenanfang">All'inizio della pagina</a>
All'attributo href viene assegnato come valore il nome dell'ancoraggio. È essenziale che il nome dell'ancoraggio abbia un cancelletto davanti.
Potete anche impostare i riferimenti agli ancoraggi tra file diversi. Nel seguente esempio si assume che ci sia un file chiamato news.htm, che si trova nella stessa directory del file HTML effettivo. All'interno di news.htm è stato definito l'ancoraggio seitenanfang. Per fare riferimento a questo, viene inserito un cancelletto dopo il nome del file di destinazione (news.htm). Successivamente si inserisce di nuovo il nome dell'ancoraggio.
<a href="news.htm#seitenanfang">All'inizio della pagina</a>
In questo modo potete impostare facilmente riferimenti agli ancoraggi in qualsiasi file desiderato.
