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.howcodex.com nella tua pagina:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="https://www.howcodex.com" target="_self">Howcodex</a>
</body>
</html>
Ciò produrrà il seguente risultato, in cui clickando su Howcodex verrete indirizzati all' home page di Howcodex.
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.howcodex.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.
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.howcodex.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.howcodex.com/html/index.htm".
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.
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.howcodex.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.
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.howcodex.com/page.pdf">Download PDF File</a>
</body>
</html>
Ciò produrrà il seguente link che può essere utilizzato per scaricare un 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.
