14 – Collegamenti HTML

I link si trovano in quasi tutte le pagine web.
I collegamenti consentono agli utenti di spostarsi da una pagina all’altra facendo clic.


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 testo.
Un collegamento può essere un’immagine o qualsiasi altro elemento HTML!


Collegamenti HTML – Sintassi

Il tag HTML <a> definisce un collegamento ipertestuale.
Ha la seguente sintassi:

<a href="url">Testo del Link</a>

L’attributo più importante dell’elemento è l’ href attributo, 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à indirizzato all’indirizzo URL specificato.

Esempio

Questo esempio mostra come creare un collegamento a google.com:

 <a href="https://www.google.com/">Visita google.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 i CSS, per avere un altro aspetto!


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’ target attributo specifica dove aprire il documento collegato.
L’ target attributo può avere uno dei seguenti valori:

  • _self– Predefinito. Apre il documento nella stessa finestra/scheda in cui è stato fatto clic
  • _blank– Apre il documento in una nuova finestra o scheda
  • _parent– Apre il documento nel frame principale
  • _top– Apre il documento in tutto il corpo della finestra

Esempio

Utilizza target=”_blank” per aprire il documento collegato in una nuova finestra o scheda del browser:

 <a href="https://www.google.com/" target="_blank">Visita google!</a> 

URL assoluti contro URL relativi

Entrambi gli esempi precedenti utilizzano un URL assoluto (un indirizzo web completo) nell’attributo href.
Un collegamento locale (un collegamento a una pagina all’interno dello stesso sito Web) è specificato 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="img_gif.gif" alt="Testo alternativo" style="width:42px; height:42px;">
</a>

Collegamento a un indirizzo e-mail

Utilizzare mailto: all’interno dell’attributo href per creare un collegamento che apra il programma di posta elettronica dell’utente (per consentirgli di inviare una nuova email):

Esempio

<a href="mailto:elektronoide@example.com">Invia 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 seguendo il corso sul linguaggio JavaScript.


Collega i titoli

L’ title attributo specifica informazioni aggiuntive su un elemento.
Le informazioni vengono spesso visualizzate come testo di descrizione comandi quando il mouse si sposta sull’elemento.

Esempio

<a href="https://www.google.com/" title="Go to Google">Visita Google!</a>

Ulteriori informazioni su URL assoluti e URL relativi

Esempio

Utilizza un URL completo per collegarti 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">Testo Llink</a> 

Esempio

Collegamento a una pagina che si trova nella stessa cartella della pagina corrente:

 <a href="default.asp">Testo Link</a> 

Puoi leggere di più sui percorsi dei file nel capitolo Percorsi dei file HTML .


Collegamenti HTML – Colori diversi

Un collegamento HTML viene visualizzato in un colore diverso a seconda che sia stato visitato, non visitato o attivo.


Colori dei collegamenti HTML

Per impostazione predefinita, verrà visualizzato un collegamento in questo modo (in tutti i browser):

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

Puoi cambiare i colori dello stato del link, usando i CSS:

Esempio

Qui, un collegamento non visitato sarà verde senza sottolineatura. 
Un link visitato sarà rosa senza sottolineature. 
Un collegamento attivo sarà giallo e sottolineato. 
Inoltre, quando si passa il mouse su un collegamento (a:hover) diventerà rosso e sottolineato:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Pulsanti di collegamento

Un collegamento può anche essere disegnato come un pulsante, usando i CSS:

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

Per saperne di più sui CSS, segui il Corso CSS .


Collegamenti HTML – Crea segnalibri

I collegamenti HTML possono essere utilizzati per creare segnalibri, in modo che i lettori possano passare a parti specifiche di una pagina web.

Crea un segnalibro in HTML

I segnalibri possono essere utili se una pagina web è molto lunga.
Per creare un segnalibro, crea prima il segnalibro, quindi aggiungi un collegamento ad esso.
Quando si fa clic sul collegamento, la pagina scorrerà verso il basso o verso l’alto fino alla posizione con il segnalibro.

Esempio

Innanzitutto, utilizza l’ id attributo per creare un segnalibro:

<h2 id="C4">Capitolo 4</h2>

Quindi, aggiungi un collegamento al segnalibro (“Vai al capitolo 4”), all’interno della stessa pagina:

Esempio

<a href="#C4">Vai al capitolo 4</a>

Puoi anche aggiungere un collegamento a un segnalibro su un’altra pagina:

<a href="pagina.html#C4">Vai al capitolo 4</a>

Riassunto capitolo

  • Utilizzare l’ id attributo (id=” value “) per definire i segnalibri in una pagina
  • Utilizzare l’ href attributo (href=”# value “) per collegarsi al segnalibro
  • Utilizzare l’ <a> elemento per definire un collegamento
  • Utilizzare l’ href attributo per definire l’indirizzo del collegamento
  • Utilizzare l’ target attributo per definire dove aprire il documento collegato
  • Utilizzare l’ <img> elemento (all’interno <a> di ) per utilizzare un’immagine come collegamento
  • Utilizzare lo mailto: schema all’interno dell’attributo href per creare un collegamento che apra il programma di posta elettronica dell’utente

Tag di collegamento HTML

TagDescrizione
<a>Definisce un collegamento ipertestuale
Tabella tag collegamento HTML

Per un elenco completo di tutti i tag HTML disponibili, visita il riferimento ai tag HTML.

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.