HTML: link

I collegamenti ipertestuali

I collegamenti ipertestuali sono come dei ponti, ci permettono con un click di passare da un testo ad un altro testo o all' apertura di un file.

Sono di solito composti da il 'contenuto', che può essere un testo, un'immagine o un documento, ed dalla 'risorsa', cioè l'indirizzo che permette di arrivare al contenuto che si vuole aprire
 

<a href="http://www.webgab.eu">il sito di webgab</a>

I link possono aprire:

  • dei file d' immagine (.jpg, .gif. .png., .svf, .tiff);
  • dei file documento (.doc, .pdf, .html, .php);
  • dei file di compressione o file eseguibili (.zip, .rar, .tar, .exe, .drm)

Utilizzando la stringa MAILTO: all'interno del link, è possibile far aprire il software per gestire l'email di un sistema operativo (per esempio outlook) per inviare un'email:

<a href="mailto:Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. ">scrivi un email a Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. </a>

I link permettono all' utente di muoversi all' interno del sito grazie ai menù ed ai collegamenti ipertestuali, presenti sui contenuti delle pagine. Per ottenere un sito navigabile,  prima di realizzare il sito web vero e proprio, bisogna strutturare l'albero del sito, cioè la mappa  delle sezioni, delle categorie  e dei contenuti che si andranno a creare. Questo permetterà al web design di poter determinare una struttura logica base del sito internet, in modo tale da poter dedicarsi successivamente all' elaborazione dei contenuti senza impazzire per capire come collegarli tra di loro. Un sito internet normalmente è organizzato su diverse directory, che conterranno i vari file che lo generano (Come configurare un software FTP). Per poter collegare i vari contenuti tra di loro è necessario conoscere come si costruiscono i percorsi. Esistono due tipologie di percorsi:

  • Percorsi assoluti: inseriamo il link per esteso, viene utilizzato anche per linkare un contenuto ad un collegamento esterno al sito internet,

    <a href="http://www.webgab.eu/images/webgab-logo.png">Logo web gab</a>

    analizzando il link assoluto possiamo dedurre che:
    • http:// rappresenta il protocollo utilizzato dal web browser per navigare su internet;
    • www.webgab.eu è il dominio (URL) a ciu fa riferimento il sito internet;
    • images/ è la cartella che contiene il file sul server;
    • webgab-logo.png è il file immagine che si trova nella cartella images, che verrà visualizzato cliccando sul testo linkato.
  • Percorsi relativi: sono i collegamenti che fanno riferimento alla posizione degli altri file, rispetto al documento in cui ci si trova in quel momento. Se i due documenti si trovano dentro la stessa directory, basta scrivere:

    <a href="pagine-collegata.html">Link ad una pagina sulla stessa cartella</a>

    se invece i due documenti collegati si trovano in diverse directory,  dobbiamo  esplicitarne il percorso:

    <a href=”index.html”>Visita la home page</a>

    <a href=”../../interna.html”>Visita la pagina interna</a>

    • rispetto ai link assoluti, i link relativi omettono l'indirizzo URL, in quanto i file si trovano nello stesso server e quindi il dominio sarà lo stesso per entrambi;
    • Per tornare su di uno o più livelli utilizzano la sintassi ../../interna.html

Una buona abitutidine, che ci permetterà di non commettere errori nel momento in cui si creano collegamenti tra documenti, è quella di scrivere sempre i file senza lasciare spazi vuoti all' interno del nome e di dividerne le parole con un trattino basso _ (underscore).

Le ancore sono dei collegamenti  all' interno della stessa pagina HTML, questo permette di creare un' indice con cui navigare all' interno del documento stesso.

Per creare un'ancora si deve:

  • creare l’ancora a cui puntare (<a name=”mioNome”>);
  • creare il collegamento all’ancora appena creata e riferimento  attraverso il cancelletto (<a href=”#mioNome”>);

<a name=”primo”>Stiamo per esaminare la struttura…. Eccetera…</a>

<a href=”#primo”>vai al primo paragrafo</a>

Guarda l' esempio del collegamento ad ancora

I link possono avere diversi attributi:

TARGET che specifica in quale finestra la pagina linkata deve essere aperta, puo avere i seguenti valori:

  • _SELF: la pagina si aprirà al posto di quella che contiene il link,
  • _BLANK: -a pagina si aprirà in una nuova pagina,
  • _PARENT: è utilizzato con il TAG FRAME (HTML: FRAME)
  • _TOP: è utilizzato con il TAG FRAME (HTML: FRAME)
  • se non viene specifiato l'attributo TARGET, il link aprirà il documento collegato nella stessa pagina di partenza

<a target="_blank" href="http://www.webgab.eu">visita webgab.eu</a>

TITLE  è un attributo molto importante, in quanto specifica un testo esplicativo per l’elemento a cui l’attributo è riferito. È anche utile per migliorare il posizionamento del sito web sui motori di ricerca, che ne vanno a leggere il contenuto.

<a title="Sito web di internet e marketing" href="http://www.webgab.eu">visita webgab.eu</a>

HREFLANG indica la lingua del documento: è un attributo che migliora l’accessibilità del sito secondo le regole della W3C; è anche utile per i motori di ricerca, in quanto specifica la lingua nel caso il sito web ha contenuti tradotti in diversi idiomi.

<a href="http://www.w3c.org/" hreflang="eng" target="_blank">World Wide Web Consortium</a>

BASE permette di far riferimento a un diverso percorso per tutti i percorsi relativi. Va incluso nella head del documento:

<base href="http://www.webgab.eu/cartella-diversa-dalla-principale">