Corso di HTML / Creare collegamenti: percorsi, frammenti e indirizzi email

Create un collegamento HTML con l'elemento a e impostate la sua destinazione in href. La destinazione può essere un'altra pagina, un file, un punto in un documento o un indirizzo e-mail. Scrivete un testo del collegamento che mostri ai lettori dove andranno.

Creare un collegamento di base con a e href

Racchiudete il testo del link visibile con a e inserite l'URL di destinazione in href. Questo esempio porta al corso italiano di Coding Factory sulle liste HTML. I tipi di elenco e le regole di annidamento vengono spiegati in Liste: ul, ol, dl e liste annidate.

<a href="https://www.codingfactory.net/it/18551">Tutorial sulle liste HTML</a>

"Tutorial sulle liste HTML" è il testo visibile; l'URL è la destinazione. Un a senza href non è un normale link di navigazione. L'uso di href="#" come segnaposto può portare inaspettatamente a una navigazione verso l'alto della pagina.

Comprendere URL assoluti e relativi

Un URL assoluto, che inizia con https://, contiene il dominio della destinazione. Un URL relativo può fare riferimento a un file dalla posizione del documento corrente o dalla directory principale del sito web. Esercitatevi a mantenere lo stesso menu su tre documenti in Creare un piccolo sito web multipagina.

I seguenti percorsi about.html e ../contact.html sono esempi di esercizio, non pagine attualmente esistenti su Coding Factory. Si supponga di scrivere i collegamenti in lessons/index.html all'interno di questa struttura di cartelle:

site/
  contact.html
  lessons/
    index.html
    about.html

<a href="https://www.codingfactory.net/it/18551">URL completa</a>
<a href="about.html">Pagina di presentazione in questa cartella</a>
<a href="../contact.html">Pagina dei contatti nella cartella principale</a>
<a href="/it/18551">Liste HTML su questo sito web</a>

about.html viene risolto rispetto al documento attuale. Un percorso che inizia con / viene risolto dalla directory principale del sito web. I file locali file:// hanno una root diversa da un sito web distribuito, quindi testate nuovamente i percorsi relativi dopo la distribuzione.

Collegamento a un punto in un documento

Assegnate all'elemento di destinazione un id univoco e quindi utilizzate # seguito da questo valore nel collegamento.

<a href="#contact">Vai ai dati di contatto</a>



<h2 id="contact">Contatto</h2>

<p>I dati di contatto si trovano qui.</p>

Per andare a un punto in un altro file, aggiungete il frammento al suo URL: about.html#contact. Evitate di ripetere lo stesso id in una singola pagina.

Collegamenti a email e nuove schede

Un URL mailto: richiede all'applicazione di posta elettronica dell'utente di creare un messaggio. Questo potrebbe non funzionare come previsto se non è configurata un'app di posta elettronica.

<a href="mailto:hello@example.com">Scrivere un&#x27;e-mail</a>

Per aprire un sito web esterno in una nuova scheda, utilizzate target="_blank" insieme all'attributo rel="noopener noreferrer", come previsto dalle regole editoriali di questo sito.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">Riferimento dell&#x27;elemento a su MDN</a>

Scegliete una nuova scheda se è appropriato per il compito del lettore e chiarite il comportamento nel testo del link o nella spiegazione vicina.

Cosa può fare l'attributo download

L'attributo download chiede al browser di scaricare un file collegato. Ad esempio, può essere utilizzato per questa immagine ospitata sullo stesso sito web.

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Scarica immagine di esempio</a>

download funziona con URL della stessa origine (stesso protocollo, stesso host e stessa porta) e con URL blob: e data:. Non può forzare il download di un URL normale su un altro sito web. Anche con un file della stessa origine, le impostazioni del browser e la risposta del server possono influenzare ciò che accade.

MDN: Link e attributo download

Testare percorsi relativi con tre file reali

Salvate questi tre documenti nella struttura di cartelle precedente site/. Questo esercizio verifica la navigazione tra i file e non l'invio di un vero messaggio di contatto.

site/lessons/index.html

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pagina iniziale dell&#x27;esercizio sui percorsi</title>
</head>
<body>
  <h1>Pagina iniziale dell&#x27;esercizio sui percorsi</h1>
  <nav aria-label="Menu degli esercizi">
    <a href="about.html">Presentazione</a>
    <a href="../contact.html">Contatto</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Presentazione</title>
</head>
<body>
  <h1>Presentazione</h1>
  <nav aria-label="Menu degli esercizi">
    <a href="index.html">Introduzione all&#x27;esercizio</a>
    <a href="../contact.html">Contatto</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contatto</title>
</head>
<body>
  <h1>Contatto</h1>
  <nav aria-label="Menu degli esercizi">
    <a href="lessons/index.html">Introduzione all&#x27;esercizio</a>
    <a href="lessons/about.html">Presentazione</a>
  </nav>
</body>
</html>

Aprite ogni file, seguite i collegamenti e confrontate le cartelle nella barra degli indirizzi. ../ va su di una directory. Se un collegamento non funziona, risolvete il problema dalla cartella del file di origine, invece di indovinare un altro nome di file. Ripristinate i valori nella tabella dopo aver sperimentato.

Controllare i collegamenti prima di pubblicarli

• Usate un testo come «Tutorial elenchi HTML» invece di «clicca qui».
• Testate i percorsi relativi dalla posizione effettiva del documento fornito.
• Verificate che un frammento #id corrisponda esattamente al suo obiettivo.
• Ricordate che i link di posta elettronica e download dipendono dal browser e dall'ambiente utente.

Consultate la documentazione dell'elemento a di MDN per ulteriori dettagli su URL e attributi.