Collegamenti Ipertestuali HTML

Link HTML - Collegamenti Ipertestuali

I collegamenti ipertestuali in HTML permettono agli utenti di cliccare e navigare da una pagina all’altra.

Gli ipercollegamenti in HTML sono rappresentati dai tag <a>.

Puoi cliccare su un link per spostarti su un altro documento.

Quando il cursore del mouse passa sopra un link, diventa una piccola mano.

Nota: Un link non deve essere necessariamente testo. Un link può essere anche un’immagine o qualsiasi altro elemento HTML!

Sintassi dei Collegamenti Ipertestuali in HTML

Il tag <a> in HTML definisce un ipercollegamento ed ha la seguente sintassi:

<a href="url">testo del link</a>

L’attributo più importante dell’elemento <a> è l’attributo href, che indica la destinazione del link.

Il testo del link è la parte che sarà visibile all’utente.

Cliccando sul testo del link, l’utente verrà indirizzato all’URL specificato.

Questo esempio mostra come creare un link a Codegrind.it:
<a href="https://www.codegrind.it/">Visita Codegrind.it</a>

Di default, i link vengono visualizzati nei browser in questo modo:

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

Attributo target

Di default, la pagina collegata verrà visualizzata nella stessa finestra del browser. Per cambiare questo comportamento, è possibile specificare un altro target per il link.

L’attributo target specifica dove aprire il documento collegato.

L’attributo target può avere uno dei seguenti valori:

• _self - Di default. Apre il documento nella stessa finestra/scheda in cui è stato cliccato
• _blank - Apre il documento in una nuova finestra o scheda
• _parent - Apre il documento nel frame genitore
• _top - Apre il documento in tutta la finestra del browser

Usa target="_blank" per aprire il documento collegato in una nuova finestra del
browser o scheda:
<a href="https://www.codegrind.it/" target="_blank">Visita Codegrind!</a>

URL Assoluti vs URL Relativi

Entrambi gli esempi sopra 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 URL relativo (senza la parte “https://www”):

<h2>URL Assoluti</h2>
<p><a href="https://www.codegrind.it/">Codegrind</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>URL Relativi</h2>
<p><a href="codegrind-logo-icona.webp">Logo Codegrind</a></p>
<p><a href="/esercizi/html">Esercizi HTML</a></p>

Link a un indirizzo email

Usa mailto: all’interno dell’attributo href per creare un collegamento che apre il programma email dell’utente (per consentire l’invio di una nuova email):

<a href="mailto:mariorossi.prova@example.com">Invia email</a>

Bottone come collegamento

Per utilizzare un pulsante HTML come collegamento, è necessario aggiungere del codice JavaScript.

JavaScript consente di specificare cosa accade in determinati eventi, come il clic di un pulsante:

<button onclick="document.location='blog.html'">Tutorial HTML</button>

Titoli dei collegamenti

L’attributo title specifica informazioni aggiuntive su un elemento. Queste informazioni vengono visualizzate come un tooltip quando il mouse si sposta sull’elemento.

<a
  href="https://www.codegrind.it/corsi/corso-html-completo"
  title="Vai alla pagina del corso HTML completo"
  >Visita il nostro corso comppleto di HTML</a
>

Creare un Segnalibro in HTML

I segnalibri possono essere utili se una pagina web è molto lunga. Un esempio sono gli indici di pagina cliccabili nei vari articoli, guide o documentazioni.

Per creare un segnalibro occorrono due passaggi:

• aggiungere un id alla sezione a cui andare
• aggiungere il link alla sezione nel href dell’elemento <a>

Quando si fa clic sul collegamento, la pagina si scorrerà verso l’alto o verso il basso fino alla posizione con il segnalibro.

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

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

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

<a href="#Capitolo4">Vai al Capitolo 4</a>

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

<a href="pagina.html#Capitolo4">Vai al Capitolo 4</a>