Il tag <A> in Html

In questa lezione ti spiego come inserire un link in un documento HTML tramite il tag <a>

Il tag <a> ti permette di creare un collegamento ipertestuale (link) tra le pagine del tuo sito o di siti web diversi.

In particolar modo puoi utilizzarlo per creare un collegamento da una pagina web verso a un'altra.

<a href=indirizzo> testo linkato </a>

Tra il tag di apertura <a> e il tag di chiusura </a> puoi inserire il testo linkato oppure una immagine (tag <img>).

Nell'attributo href, invece, devi inserire l'indirizzo URL o URI della pagina web di destinazione del link.

Nota. Quando il browser incontra il tag <a> rende il testo linkato cliccabile dall'utente. In genere, il browser visualizza il link con il colore blu e sottolineato. Tuttavia, queste caratteristiche puoi personalizzarle usando gli stili CSS. Quando un utente fa clic su un link che utilizza il tag <a>, viene reindirizzato alla pagina web collegata al link. La risorsa linkata può anche non essere una pagina web. Ad esempio, un file pdf, una immagine, ecc.

Puoi usare il tag <a> nella sezione <body> del documento HTML

Ti faccio un esempio pratico.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<a href="http://www.stemkb.com">Vai sul sito StemKB
...
</body>
</html>

In questo esempio ho inserito un link verso la home page del sito web.

Nell'attributo href del tag <a> è indicato l'indirizzo URL della pagina linkata.

<a href="http://www.stemkb.com">Vai sul sito StemKB</a>

Il testo linkato si trova, invece, tra il tag di apertura <a> e quello di chiusura </a>

<a href="http://www.stemkb.com">Vai sul sito StemKB</a>

Il browser visualizza il link ipertestuale lo rende cliccabile.

Vai sul sito StemKB

In genere i link sono di colore blu e sottolineati ma queste proprietà sono facilmente modificabili tramite i fogli di stile CSS.

Quando l'utente clicca sul link, il browser carica la nuova pagina web sullo schermo dell'utente.

Cos'è un indirizzo URL? Gli URL (Uniform Resource Locator) sono utilizzati per identificare e localizzare le risorse su Internet. Nell'indirizzo URL devi indicare il protocollo (es. http), l'indirizzo ip o il nome del sito (es. www.stemkb.com), il percorso nelle directory del sito dove si trova la pagina e il nome della risorsa che vuoi linkare (es. /html/pagina.htm). Esistono due tipi di URL: assoluti e relativi.

Nell'attributo href puoi scrivere l'indirizzo URI o URL assoluto o relativo della pagina web collegata.

L'indirizzo URL assoluto
Un URL assoluto contiene l'intero percorso per raggiungere una risorsa, compreso il protocollo utilizzato (HTTP, HTTPS, FTP, ecc.), il nome del dominio, la directory e il nome del file. Se vuoi linkare una risorsa esterna al tuo sito web devi obbligatoriamente usare un indirizzo assoluto. Ad esempio, questo è un indirizzo assoluto.
<a href="http://www.stemkb.com">Vai sul sito Stemkb</a>
Indirizzo URL relativo
Un URL relativo specifica la posizione relativa della risorsa rispetto alla posizione della pagina web che sta facendo la richiesta. Il browser cerca la risorsa nello stesso server della pagina e nella stessa directory se non indichi un percorso. Se vuoi linkare una risorsa che si trova nello stesso sito web della pagina puoi usare indifferentemente un indirizzo URL assoluto o relativo. E' lo stesso. Ad esempio, questo è un indirizzo relativo.
<a href="/html/">La guida HTML di Stemkb</a>

Ricorda che non puoi creare dei tag <a> annidati.

In altre parole, tra il tag di apertura <a> e quello di chiusura </a> non puoi inserire altri tag <a>.

Di default il tag <a> apre gli indirizzi relativi nel protocollo HTTP (Hyper Text Transfert Protocol), quello su cui si basa il WWW, la comunicazione tra browser e server, ossia quello che normalmenti usi per navigare sui siti web.

Per creare un collegamento verso una risorsa usando un protocollo diverso dal procollo HTTP delle pagine web devi specificare il tipo protocollo nell'indirizzo.

Ad esempio per linkare l'apertura di un software di posta elettronica puoi usare il protocollo mailto:

<a href="mailto:info@stemkb.com">Contattaci</a>

Se vuoi linkare una risorsa disponibile nel protocollo FTP, invece, devi usare il protocollo ftp:

<a href="ftp://ftp.stemkb.com/nomefile.doc">Contattaci</a>

Altri protocolli usati nel passato ma ancora funzionanti nel tag <a> sono i protocolli news, telnet, gopher, wais.

Come creare un link interno alla pagina

Il tag <a> ti permette anche di creare dei link a una sezione all'interno della stessa pagina web.

Per realizzare un link interno devi scrivere nell'attributo href il carattere # seguito dal nome della sezione interna che vuoi collegare. Ad esempio "sezione1"

<a href="#sezione1">Clicca qui per andare alla Sezione 1</a>

All'interno della pagina web devi inserire un'ancora che identifica la sezione della pagina. E' il punto di arrivo del link interno.

Puoi inserire il punto di arrivo del link interno in due modi alternativi.

Tramite l'attributo id in un tag posto all'inizio della sezione.
Tramite il tag <a> con l'attributo name.

<a name="sezione1"></a>

Quando l'utente fa clic sul link interno, la pagina corrente scorre fino alla sezione interna linkata.

Ti faccio un esempio pratico.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<a href="#sezione1">Vai alla sezione 1 di questa pagina
...
....
</body>
</html>

Nel caso dei link interni il browser non carica nuovamente la pagina, si limita a saltare nel punto della pagina in cui si trova l'ancora (destinazione).

Ad esempio, se clicchi su questo link puoi tornare all'inizio di questo paragrafo.

Gli attributi del tag <a>

Il tag <a> ha diversi attributi che puoi utilizzare per personalizzare il comportamento del link ipertestuale.

href
E' l'attributo dove indichi l'indirizzo URI o URL della risorsa che vuoi linkare.

<a href="http://www.stemkb.com">testo linkato</a>
target
Questo attributo specifica dove aprire la pagina collegata al link. Puoi usare uno di questi valori.
- _blank apre la pagina in una nuova finestra o scheda del browser.
 
 <a href="/pagina" target="_blank">testo linkato</a>
- _self apre la pagina nella stessa finestra/frame del browser in cui si trova il link. E' il valore predefinito dell'attributo target.
 
 <a href="/pagina" target="_self">testo linkato</a>
- _parent apre la pagina nel frame di livello superiore indicato nel tag frameset. Se non è indicato, la apre nella stessa finestra (_self).
 
 <a href="/pagina" target="_parent">testo linkato</a>
- _top apre la pagina nella finestra attuale cancellando la suddivisione in frame.
 
 <a href="/pagina" target="_top">testo linkato</a>
rel
Questo attributo specifica la relazione tra la pagina corrente e la pagina collegata al link. Ad esempio, il valore "nofollow" indica ai motori di ricerca di non seguire il link ipertestuale e non tenerlo in considerazione per valutare la popolarità del sito web.

<a href="/pagina" rel="nofollow">testo linkato</a>
title
Questo attributo fornisce una descrizione del link. La descrizione viene visualizzata quando l'utente sposta il puntatore del mouse sopra il link come tooltip. Puoi usarlo per fornire informazioni aggiuntive sul contenuto della pagina collegata.

<a href="/pagina" title="questo link parla di ...">testo linkato</a>
type
Questo attributo specifica il tipo di risorsa che viene richiesta dal collegamento. Ad esempio, "text/plain", "image/jpg", ecc.
charset
Questo attributo indica il set di caratteri usato nella risorsa linkata. Ad esempio, "Iso-8859-1", "Iso-8859-2", ecc.
hreflang
Questo attributo ti permette di specificare la lingua usata nella pagina linkata. Ad esempio, "it" per la lingua italiana, "fr" per il francese, ecc.

Ovviamente non devi usare tutti gli attributi per creare un collegamento ipertestuale ma soltanto quelli che ritieni utili per il link.