InnoMarts logo
InnoMarts
Fast websites
← Back to course

Link e Navigazione

Link e Navigazione

Bentornato.

Nella lezione precedente hai imparato a organizzare il contenuto con le liste.

Ora colleghiamo le pagine tra loro.

Perché una pagina HTML è carina.

Ma più pagine HTML collegate diventano un sito web.

Ed è lì che le cose iniziano a sembrare reali.

Una pagina sola è una nota sul frigorifero.

Pagine collegate sono una piccola città digitale.

Con meno piccioni.

Si spera.

Cosa Imparerai

In questa lezione imparerai:

L’Elemento a

I link si creano con l’elemento a.

Esempio:

<a href="about.html">Chi Sono</a>

Il testo tra il tag di apertura e quello di chiusura è cliccabile.

L’attributo href dice al browser dove deve andare il link.

Quindi questo:

<a href="about.html">Chi Sono</a>

significa:

Mostra il testo “Chi Sono” e manda l’utente a about.html quando clicca.

Semplice.

Potente.

Leggermente magico.

Collegare un’Altra Pagina

Crea due file:

touch index.html about.html

In index.html, scrivi:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagina Home</title>
</head>
<body>
  <h1>Pagina Home</h1>
  <p>Benvenuto nel mio sito.</p>

  <a href="about.html">Vai alla Pagina Chi Sono</a>
</body>
</html>

In about.html, scrivi:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chi Sono</title>
</head>
<body>
  <h1>Chi Sono</h1>
  <p>Questa è la pagina chi sono.</p>

  <a href="index.html">Torna alla Home</a>
</body>
</html>

Apri index.html nel browser e clicca il link.

Congratulazioni.

Hai collegato due pagine.

Il sito ha iniziato a respirare.

Molto piano.

Ma comunque.

Link Relativi

Un link relativo punta a un file in base alla posizione del file corrente.

Esempio:

<a href="about.html">Chi Sono</a>

Questo significa:

Cerca about.html nella stessa cartella.

I link relativi sono ottimi per le pagine del tuo sito.

Esempio di struttura:

project/
  index.html
  about.html
  contact.html

Da index.html, puoi collegare contact.html così:

<a href="contact.html">Contatto</a>

Non serve scrivere l’indirizzo completo.

Il browser capisce il percorso.

I browser sono più intelligenti di quanto sembrino.

A volte.

Link a File in Cartelle

Se il file è dentro una cartella, il percorso cambia.

Esempio:

project/
  index.html
  pages/
    about.html

Da index.html, collega pages/about.html:

<a href="pages/about.html">Chi Sono</a>

Se sei dentro pages/about.html e vuoi tornare a index.html, usa:

<a href="../index.html">Home</a>

.. significa “sali di una cartella”.

È importante.

E anche pericoloso se lo scrivi mezzo addormentato.

I percorsi sono piccoli, ma mordono.

Link Assoluti

Un link assoluto usa l’URL completo.

Esempio:

<a href="https://www.mozilla.org">Mozilla</a>

Usa link assoluti per siti esterni.

Esempi:

<a href="https://developer.mozilla.org">MDN Web Docs</a>
<a href="https://www.wikipedia.org">Wikipedia</a>

I link assoluti di solito iniziano con:

https://

Se dimentichi https://, il browser può pensare che sia un file locale.

E la confusione entra nella stanza con gli stivali.

Aprire un Link in una Nuova Scheda

Per aprire un link in una nuova scheda, usa target="_blank":

<a href="https://developer.mozilla.org" target="_blank">Apri MDN</a>

Per sicurezza, aggiungi anche rel="noopener noreferrer":

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Apri MDN
</a>

È una buona abitudine per i link esterni che si aprono in una nuova scheda.

Sì, sembra più lungo.

Le buone abitudini spesso sembrano più lunghe.

Poi ti salvano dopo.

Link Email

Puoi creare un link che apre l’app email:

<a href="mailto:hello@example.com">Invia Email</a>

Quando l’utente clicca, può aprirsi il programma email.

Esempio:

<a href="mailto:contact@example.com">Contattami</a>

Puoi anche aggiungere un oggetto:

<a href="mailto:contact@example.com?subject=Domanda%20dal%20Sito">Fai una Domanda</a>

Gli spazi negli URL si scrivono spesso come %20.

Non bellissimo.

Ma funziona.

Come molte cose su internet.

Link Telefonici

Per numeri di telefono, usa tel::

<a href="tel:+390000000000">Chiamami</a>

È utile sui dispositivi mobili.

Su desktop potrebbe non fare nulla o aprire un’app di chiamata.

HTML ci prova.

Il dispositivo decide.

Molto democratico.

Link a una Sezione della Stessa Pagina

Puoi collegare una sezione usando un id.

Esempio:

<a href="#contatto">Vai al Contatto</a>

<h2 id="contatto">Contatto</h2>
<p>Puoi contattarmi via email.</p>

href="#contatto" punta all’elemento con:

id="contatto"

È utile per pagine lunghe.

Come documentazione.

O menu di ristoranti che richiedono cardio.

Navigazione Semplice

La navigazione è di solito un gruppo di link.

Esempio:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">Chi Sono</a>
  <a href="contact.html">Contatto</a>
</nav>

L’elemento nav dice al browser:

Questa area è navigazione.

Questo è HTML semantico.

Dà significato alla struttura.

Non solo link buttati sulla pagina come calzini su una sedia.

Navigazione con una Lista

Molti menu di navigazione usano liste:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">Chi Sono</a></li>
    <li><a href="contact.html">Contatto</a></li>
  </ul>
</nav>

Questa è una struttura pulita.

Un menu di navigazione è una lista di link.

Quindi una lista ha senso.

HTML ama quando la struttura ha senso.

Diventa più calmo.

Anche gli sviluppatori.

A volte.

Crea una Pagina di Pratica

Crea tre file:

touch index.html about.html contact.html

Usa questa navigazione in ogni file:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">Chi Sono</a></li>
    <li><a href="contact.html">Contatto</a></li>
  </ul>
</nav>

Esempio index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">Chi Sono</a></li>
      <li><a href="contact.html">Contatto</a></li>
    </ul>
  </nav>

  <h1>Home</h1>
  <p>Benvenuto nel mio piccolo sito.</p>
</body>
</html>

Ora crea pagine simili per about.html e contact.html.

Aprile nel browser e clicca tra le pagine.

Ora hai un mini sito web.

Piccolo.

Ma vero.

Errori Comuni

Dimenticare href

Questo non è un link utile:

<a>Chi Sono</a>

Usa:

<a href="about.html">Chi Sono</a>

Senza href, non c’è destinazione.

Un link senza href è come un taxi senza ruote.

Nome file sbagliato

Se il file si chiama:

about.html

ma il link dice:

<a href="About.html">Chi Sono</a>

può non funzionare su alcuni sistemi.

I nomi dei file possono distinguere maiuscole e minuscole.

about.html e About.html possono essere diversi.

I computer possono essere molto severi per macchine che ci chiedono ancora di dimostrare che non siamo robot.

Usare target blank senza rel

Questo funziona:

<a href="https://example.com" target="_blank">Example</a>

Meglio:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

Buone abitudini ora.

Meno dolore dopo.

Pratica

Crea un piccolo sito con:

Niente CSS.

Niente JavaScript.

Solo link e navigazione HTML.

Il sito sembrerà semplice.

Va bene.

Oggi costruiamo connessioni.

La decorazione arriva dopo.

Mini Sfida

Crea un file chiamato:

resources.html

Costruisci una pagina risorse con:

Esempio:

<a href="#top">Torna su</a>

e in alto:

<h1 id="top">Risorse Utili</h1>

Piccola funzione.

Molto utile.

Molto professionale.

Quasi sospetta.

Riassunto

Oggi hai imparato che:

I link trasformano pagine in siti.

Senza link, le pagine sono isole.

Con i link, diventano una mappa.

Prossima Lezione

Nella prossima lezione impareremo immagini e media.

Perché il testo è potente.

Ma a volte un’immagine salva tutti dal leggere dodici paragrafi su un gatto.