Collegamenti HTML
I collegamenti si trovano in quasi tutte le pagine web. I collegamenti consentono agli utenti di fare clic da una pagina all'altra.
Collegamenti HTML - Collegamenti ipertestuali
I collegamenti HTML sono collegamenti ipertestuali.
È possibile fare clic su un collegamento e passare a un altro documento.
Quando sposti il mouse su un collegamento, la freccia del mouse si trasformerà in una piccola mano.
Nota: un collegamento non deve essere necessariamente di testo. Un collegamento può essere un'immagine o qualsiasi altro elemento HTML!
Collegamenti HTML - Sintassi
Il <a>tag HTML definisce un collegamento ipertestuale. Ha la seguente sintassi:
<a href="url">link text</a>
L'attributo più importante <a> dell'elemento è l'
hrefattributo, che indica la destinazione del collegamento.
Il testo del link è la parte che sarà visibile al lettore.
Facendo clic sul testo del collegamento, il lettore verrà inviato all'indirizzo URL specificato.
Esempio
Questo esempio mostra come creare un collegamento a W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Per impostazione predefinita, i collegamenti verranno visualizzati come segue in tutti i browser:
- Un collegamento non visitato è sottolineato e blu
- Un collegamento visitato è sottolineato e viola
- Un collegamento attivo è sottolineato e rosso
Suggerimento: i collegamenti possono ovviamente essere stilizzati con CSS, per dare un'altra occhiata!
Collegamenti HTML - L'attributo di destinazione
Per impostazione predefinita, la pagina collegata verrà visualizzata nella finestra del browser corrente. Per modificare questa impostazione, è necessario specificare un'altra destinazione per il collegamento.
L' targetattributo specifica dove aprire il documento collegato.
L' targetattributo può avere uno dei seguenti valori:
_self- Predefinito. Apre il documento nella stessa finestra/scheda su cui è stato fatto clic_blank- Apre il documento in una nuova finestra o scheda_parent- Apre il documento nella cornice principale_top- Apre il documento in tutto il corpo della finestra
Esempio
Usa target="_blank" per aprire il documento collegato in una nuova finestra o scheda del browser:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
URL assoluti e URL relativi
Entrambi gli esempi precedenti utilizzano un URL assoluto (un indirizzo web completo) hrefnell'attributo.
Viene specificato un collegamento locale (un collegamento a una pagina all'interno dello stesso sito Web) con un relativo URL (senza la parte "https://www"):
Esempio
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Collegamenti HTML: utilizza un'immagine come collegamento
Per utilizzare un'immagine come collegamento, basta inserire il <img>
tag all'interno del <a>tag:
Esempio
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Collegamento a un indirizzo e-mail
Utilizzare
mailto:all'interno
hrefdell'attributo per creare un collegamento che apre il programma di posta elettronica dell'utente (per consentire loro di inviare una nuova e-mail):
Esempio
<a href="mailto:[email protected]">Send email</a>
Pulsante come collegamento
Per utilizzare un pulsante HTML come collegamento, devi aggiungere del codice JavaScript.
JavaScript ti consente di specificare cosa succede in determinati eventi, come il clic di un pulsante:
Esempio
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Suggerimento: scopri di più su JavaScript nel nostro tutorial JavaScript .
Titoli di collegamento
L' titleattributo specifica informazioni aggiuntive su un elemento. Le informazioni vengono spesso visualizzate come testo di suggerimento quando il mouse si sposta sull'elemento.
Esempio
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Ulteriori informazioni sugli URL assoluti e sugli URL relativi
Esempio
Utilizzare un URL completo per collegarsi a una pagina Web:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Esempio
Collegamento a una pagina situata nella cartella html del sito Web corrente:
<a href="/html/default.asp">HTML tutorial</a>
Esempio
Collegamento a una pagina che si trova nella stessa cartella della pagina corrente:
<a href="default.asp">HTML tutorial</a>
Puoi leggere di più sui percorsi dei file nel capitolo Percorsi dei file HTML .
Riassunto capitolo
- Utilizzare l'
<a>elemento per definire un collegamento - Utilizzare l'
hrefattributo per definire l'indirizzo del collegamento - Utilizzare l'
targetattributo per definire dove aprire il documento collegato - Utilizzare l'
<img>elemento (inside<a>) per utilizzare un'immagine come collegamento - Utilizzare lo
mailto:schema all'internohrefdell'attributo per creare un collegamento che apra il programma di posta elettronica dell'utente
Tag di collegamento HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .