Lezione 4 · 45-60 minuti

🏠 La homepage e i link

Obiettivo: creare la homepage del sito e collegare tutte le pagine tra loro con i link.

🎒 Ci serve

Le pagine create nelle lezioni precedenti: chi-sono.html, hobby.html

🧠 Un po' di teoria

Tutti i siti web hanno una prima pagina, che di solito si chiama homepage ed è quasi sempre il file index.html. È la pagina principale del sito, da cui si naviga verso tutte le altre. Oggi la creiamo, e impariamo il tag che collega le pagine tra loro: a.

🔨 Costruisci: la homepage

Duplica chi-sono.html (come hai fatto nella Lezione 2) e rinomina la copia in index.html.

Apri index.html con l'editor. Il tag body deve racchiudere tutto il contenuto visibile della pagina: riempilo così (e ricorda sempre di salvare alla fine):

<body>
  <h1>Il mio sito</h1>
  <p>Questo è il mio primo sito web</p>
  <p>Cosa vuoi sapere?</p>
  <ul>
    <li><a href="chi-sono.html">Chi sono</a></li>
    <li><a href="hobby.html">I miei hobby</a></li>
  </ul>
</body>

L'elenco puntato contiene un nuovo tag, a, che definisce un collegamento (link) con un altro documento. L'attributo href indica il file da collegare; il testo dentro il tag è quello che compare sulla pagina, quello su cui devi cliccare per andare al documento.

Salva, apri index.html nel browser e prova a cliccare sui link: ti portano alle pagine giuste?

Scrivere in HTML richiede un po' di ordine: le maiuscole e le minuscole vanno rispettate, soprattutto nei nomi dei file e nei link (chi-sono.html e Chi-Sono.html possono essere due file diversi). Hai notato le virgolette accanto a href? Gli attributi di un tag vanno quasi sempre racchiusi tra virgolette. E la spaziatura tra i tag non conta per il browser, ma abituati a lasciare spazi a sinistra (indentazione) per rendere il codice più leggibile, come nell'esempio sopra.

Prova ad aggiungere un'altra voce all'elenco, che porti a un'immagine invece che a una pagina:

<li><a href="immagini/sport.jpg">La mia foto</a></li>

Cosa succede quando ci clicchi sopra?

I link non collegano solo pagine web, ma qualunque tipo di file: immagini, documenti, musica, video... persino programmi eseguibili. Quando clicchi su un link, il file viene scaricato e, se possibile, il browser te lo mostra direttamente; altrimenti va aperto col programma giusto. Fai sempre attenzione a cosa clicchi, soprattutto ai file che finiscono in .exe, .bat o .cmd: potrebbero essere programmi, non semplici documenti.

🚀 Sfide

⭐ Stella

Aggiungi al menu della homepage un link a una pagina che non esiste ancora, per esempio contatti.html. Cosa mostra il browser quando ci clicchi?

⭐⭐ Cometa

Crea davvero la pagina mancante (contatti.html) e collegala.

⭐⭐⭐ Razzo

Aggiungi a ogni pagina (chi-sono.html, hobby.html...) un link "Torna alla home" verso index.html, così puoi navigare avanti e indietro tra tutte le pagine del sito.

📝 Quiz: mettiti alla prova

Come si chiama di solito il file della pagina principale di un sito?

principale.html

index.html

home.doc

Quale tag crea un collegamento verso un altro documento?

<link>

<go>

<a>

Quale attributo del tag a indica il file da collegare?

href

src

title

📚 Da guardare o leggere

Il tag a su MDN — tutti i modi per usare i link, incluso il collegamento a email e ad altri siti.