Collegamenti HTML

In questo tutorial imparerete come creare collegamenti ad altre pagine in HTML.

Creazione di collegamenti in HTML

Un collegamento o collegamento ipertestuale è una connessione da una risorsa Web a un’altra. I collegamenti consentono agli utenti di spostarsi senza problemi da una pagina all’altra, su qualsiasi server in qualsiasi parte del mondo.

Un collegamento ha due estremità, chiamate ancore. Il collegamento inizia dall’ancora di origine e punta all’ancora di destinazione, che può essere qualsiasi risorsa Web, ad esempio un’immagine, un clip audio o video, un file PDF, un documento HTML o un elemento all’interno del documento stesso e così via.

Per impostazione predefinita, i collegamenti appariranno come segue nella maggior parte dei browser:

• Un link non visitato è sottolineato e blu.
• Un link visitato è sottolineato e viola.
• Un collegamento attivo è sottolineato e rosso.

Tuttavia, puoi sovrascriverlo usando i CSS. Ulteriori informazioni sui collegamenti di stile.

Sintassi del collegamento HTML

I collegamenti sono specificati in HTML usando il tag <a>.

Un collegamento o collegamento ipertestuale potrebbe essere una parola, un gruppo di parole o un’immagine.

Qualsiasi cosa tra il tag di apertura <a> e il tag di chiusura </a> diventa la parte del link che l’utente vede e fa clic in un browser. Ecco alcuni esempi dei link:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

L’attributo href specifica la destinazione del collegamento. Il suo valore può essere un URL assoluto o relativo.

Un URL assoluto è l’URL che include ogni parte del formato URL, ad esempio protocollo, nome host e percorso del documento, ad esempio https://www.google.com/, https://www.example.com/form.php, ecc. Mentre, gli URL relativi sono percorsi relativi alla pagina, ad esempio, contact.html, images/smiley.png e così via. Un URL relativo non include mai il prefisso http:// o https://.

Impostazione degli obiettivi per i collegamenti

L’attributo target indica al browser dove aprire il documento collegato. Ci sono quattro destinazioni definite e ogni nome di destinazione inizia con un carattere di sottolineatura(_) :

• _blank — Apre il documento collegato in una nuova finestra o scheda.
• _parent — Apre il documento collegato nella finestra padre.
• _self — Apre il documento collegato nella stessa finestra o scheda del documento di origine. Questo è il valore predefinito, quindi non è necessario specificare esplicitamente questo valore.
• _top — Apre il documento collegato nella finestra completa del browser.

Prova il seguente esempio per capire come funziona fondamentalmente il target del link:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

Creazione di ancoraggi segnalibro

È inoltre possibile creare ancoraggi segnalibro per consentire agli utenti di passare a una sezione specifica di una pagina Web. I segnalibri sono particolarmente utili se si dispone di una pagina web molto lunga.

La creazione di segnalibri è un processo in due fasi: prima di aggiungere id attributo dell’elemento a cui si desidera passare, poi l’uso che id valore dell’attributo preceduta dal simbolo cancelletto (#) come il valore di href attributo di <a> tag, come illustrato nell’esempio seguente:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Creazione di link per il download

È anche possibile creare il link per il download del file esattamente nello stesso modo in cui si posizionano i link di testo. Basta puntare l’URL di destinazione al file che si desidera essere disponibile per il download.

Nell’esempio seguente abbiamo creato i link di download per i file ZIP, PDF e JPG.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>