HTML - Collegamenti di testo

Una pagina Web può contenere vari collegamenti che portano direttamente ad altre pagine e persino a parti specifiche di una determinata pagina. Questi collegamenti sono noti come collegamenti ipertestuali.

I collegamenti ipertestuali consentono ai visitatori di navigare tra i siti Web facendo clic su parole, frasi e immagini. In questo modo puoi creare collegamenti ipertestuali utilizzando testo o immagini disponibili su una pagina web.

Note- Ti consiglio di seguire un breve tutorial sulla comprensione dell'URL

Collegamento di documenti

Un collegamento viene specificato utilizzando il tag HTML <a>. Questo tag è chiamatoanchor tage qualsiasi cosa tra il tag di apertura <a> e il tag di chiusura </a> diventa parte del collegamento e un utente può fare clic su quella parte per accedere al documento collegato. Di seguito è riportata la semplice sintassi per utilizzare il tag <a>.

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

Esempio

Proviamo a seguire l'esempio che collega http://www.tutorialspoint.com alla 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>

Questo produrrà il seguente risultato, dove potrai cliccare sul link generato per raggiungere la home page di Tutorials Point (in questo esempio).

L'attributo di destinazione

Abbiamo usato targetattributo nel nostro esempio precedente. Questo attributo viene utilizzato per specificare la posizione in cui viene aperto il documento collegato. Di seguito sono riportate le possibili opzioni:

Suor n Opzione e descrizione
1

_blank

Apre il documento collegato in una nuova finestra o scheda.
2

_self

Apre il documento collegato nello stesso frame.
3

_parent

Apre il documento collegato nel frame principale.
4

_top

Apre il documento collegato in tutto il corpo della finestra.
5

targetframe

Apre il documento collegato in un frame di destinazione denominato .

Esempio

Prova a seguire l'esempio per comprendere la differenza fondamentale nelle poche opzioni fornite 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>

Ciò produrrà il seguente risultato, in cui è possibile fare clic su diversi collegamenti per comprendere la differenza tra le varie opzioni fornite per l'attributo di destinazione.

Uso del percorso di base

Quando si collegano documenti HTML relativi allo stesso sito Web, non è necessario fornire un URL completo per ogni collegamento. Puoi sbarazzartene se usi<base>tag nell'intestazione del documento HTML. Questo tag viene utilizzato per fornire un percorso di base per tutti i collegamenti. Quindi il tuo browser concatenerà il percorso relativo dato a questo percorso di base e creerà un URL completo.

Esempio

L'esempio seguente utilizza il tag <base> per specificare l'URL di base e in seguito possiamo utilizzare il percorso relativo a tutti i collegamenti invece di fornire l'URL completo per ogni collegamento.

<!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>

Questo produrrà il seguente risultato, in cui è possibile fare clic sul collegamento generato HTML Tutorial per accedere al tutorial HTML.

Ora dato l'URL <a href = "/html/index.htm" viene considerato come <ahref = "http://www.tutorialspoint.com/html/index.htm"

Collegamento a una sezione di pagina

È possibile creare un collegamento a una particolare sezione di una determinata pagina Web utilizzando nameattributo. Questo è un processo in due fasi.

Note- L' attributo name è obsoleto in HTML5. Non utilizzare questo attributo. Utilizza invece l'attributo id e title .

Per prima cosa creare un collegamento al luogo in cui si desidera accedere con una pagina Web e denominarlo utilizzando il tag <a ...> come segue:

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

Il secondo passaggio consiste nel creare un collegamento ipertestuale per collegare il documento e il luogo in cui si desidera raggiungere -

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

Questo produrrà il seguente collegamento, dove è possibile fare clic sul collegamento generato Go to the Top per arrivare all'inizio del tutorial HTML Text Link.

Go to the Top

Impostazione dei colori dei collegamenti

È possibile impostare i colori dei collegamenti, dei collegamenti attivi e dei collegamenti visitati utilizzando link, alink e vlink attributi del tag <body>.

Esempio

Salva quanto segue in test.htm e aprilo in qualsiasi browser web per vedere come link, alink e vlink gli attributi funzionano.

<!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>

Questo produrrà il seguente risultato. Basta controllare il colore del collegamento prima di fare clic su di esso, quindi controllare il suo colore quando lo si attiva e quando il collegamento è stato visitato.

Link per il download

È possibile creare un collegamento di testo per rendere scaricabili i file PDF o DOC o ZIP. Questo è molto semplice; devi solo fornire l'URL completo del file scaricabile come segue -

<!DOCTYPE html>
<html>

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

Questo produrrà il seguente collegamento e verrà utilizzato per scaricare un file.

Finestra di dialogo Download file

A volte si desidera fornire un'opzione in cui un utente farà clic su un collegamento e verrà visualizzata una finestra "Download file" per l'utente invece di visualizzare il contenuto effettivo. Questo è molto semplice e può essere ottenuto utilizzando un'intestazione HTTP nella risposta HTTP.

Ad esempio, se vuoi creare un file Filename file scaricabile da un dato collegamento quindi la sua sintassi sarà la seguente.

#!/usr/bin/perl

# Additional 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");
}

Note- Per maggiori dettagli sui programmi PERL CGI, segui il tutorial PERL e CGI .