HTML - Link Testuali

Un sito web in genere contiene numerosi link che indirizzano ad altre pagine ed a volte anche a specifiche parti di una pagina. Questi collegamenti sono chiamati hyperlinks.

Gli hyperlink permettono ai visitatori di navigare all' interno del sito web semplicemente clickando sopra parola, frasi e immagini. Perciò potrai creare degli hyperlink utilizzando testi o immagini disponibili nella tua pagina.

Nota: Si raccomanda di leggere il breve tutorial Capire gli URL

Collegare Documenti

Un link viene definito utilizzando il tag HTML <a>. Questo tag è chiamato anchor tag e tutto quello che viene scritto tra il tag di apertura <a> e quello di chiusura </a> diventa parte del link perciò l' utente ci potrà clickare soprà per raggiungere il documento collegato. A seguire un esempio di utilizzo del tag <a>.

<a href="Document URL" ... attributes-list>Link Text</a>

Esempio

Prova il seguente esempio collegando il link https://www.tutorialspoint.com nella tua pagina:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="https://www.tutorialspoint.com" target="_self">Tutorials Point</a>
</body>
</html>

Ciò produrrà il seguente risultato, in cui clickando su Tutorials Point verrete indirizzati all' home page di Tutorials Point.

Click following link

Tutorials Point

L' Attributo target

Nel precedente esempio abbiamo utilizzato l' attributo target. Quest' attributo serve a definire dove dovrà essere aperto il documento collegato. A seguire le possibili opzioni:

Opzione	Descrizione
_blank	Apre il collegamento indicato in una nuova pagina o finestra.
_self	Apre il link nello stesso frame.
_parent	Apre il link in un frame collegato.
_top	Apre il link nell'intera finestra.
targetframe	Apre il link in un frame di riferimento targetframe.

Esempio

Prova l'esempio seguente per capire le differenze tra le possibili opzioni per l' attributo target.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> |
<a href="/html/index.htm" target="_self">Opens in Self</a> |
<a href="/html/index.htm" target="_parent">Opens in Parent</a> |
<a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>

Produrrà il seguente risultato, clicka sui differenti link per capire al meglio le differenze fra ogni attributo target.

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

Utilizzo di un Percorso Base

Quando vengono collegati diversi documenti relativi allo stesso sito web non serve indicare un URL completo per ogni link. Ma si può utilizzare un tag <base> nell' header del documento HTML. Questo tag consente di indicare un URL base a cui faranno riferimento tutti i link successivi. In questo modo il browser unirà i path relativi con l'URL base per creare un URL completo.

Esempio

L' esempio seguente utilizza il tag <base> per indicare un URL base che verrà utilizzato come percorso relativo nei link seguenti.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

Produrrà il seguente risultato, dove potrai clickare su HTML Tutorial per raggiungere la Guida HTML.

Adesso l' URL <a href="/html/index.htm" viene considerato come <a href="https://www.tutorialspoint.com/html/index.htm".

Click following link

HTML Tutorial

Collegamento ad una Sezione di una Pagina

Si può creare un link ad una particolare sezione di un documento utilizzando l' attributo name. Ciò necessita di due passi.

Per prima cosa crea un link alla sezione che vuoi raggiungere e dagli un nome utilizzando il tag <a...> come segue:

<h1>HTML Text Links <a name="top"></a></h1>

In seguito crea un hyperlink per collegare il documento e indica dove vuoi che si arrivi:

<a href="/html/html_text_links.htm#top">Go to the Top</a>

Produrrà il seguente link, dove potrai clickare sul link Go to the Top per raggiungere la parte iniziale della guida HTML - Link Testuali.

Go to the Top

Impostare il Colore nei Link

Si può impostare il colore dei link, dei link attivi, e di quelli visitati, tramite gli attributi del tag <body>: link, alink e vlink.

Esempio

Salva l' esempio seguente in un file chiamato test.htm e aprilo con un browser per vedere come funzionano gli attributi link, alink e vlink.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
</body>
</html>

Produrrà il seguente risultato. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.

Click following link

HTML Tutorial

Download Links

Si può creare un link di testo per rendere un file PDF, DOC o ZIP scaricabile. Per farlo basta semplicemente indicare l' URL completo del file, come segue:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>

Ciò produrrà il seguente link che può essere utilizzato per scaricare un file.

Download PDF File

Finestra di Dialogo per un Download

Se si desidera fornire all' utente la possibilità di scaricare un file e quindi al click di un link aprire una fistra popup per selezionare dove salvare il file può essere effettuato utilizzando gli header HTTP. Per esempio, se si vuole rendere il file FileName scaricabile da un determinato link, la sintassi è la seguente:

#!/usr/bin/perl

# Addtional HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Nota: Per ulteriori dettagli riguardo i programmi PERL CGI vai alla guida PERL and CGI.