Visualizza wikitesto di Corsi/Web design/Lezione 4

{{Corso/Pagina|corso=webdesign|1=Lezione 4 · 45-60 minuti|2=🏠 La homepage e i link|obiettivo=Obiettivo: '''creare la homepage del sito e collegare tutte le pagine tra loro con i link.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Le pagine create nelle lezioni precedenti: <code>chi-sono.html</code>, <code>hobby.html</code>
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

Tutti i siti web hanno una prima pagina, che di solito si chiama '''homepage''' ed è quasi sempre il file <code>index.html</code>. È 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: <code>a</code>.

== 🔨 Costruisci: la homepage ==

{{Corso/Passi}}
{{Corso/Passo|1=
      Duplica <code>chi-sono.html</code> (come hai fatto nella Lezione 2) e rinomina la copia in <code>index.html</code>.
    }}
{{Corso/Passo|1=
      Apri <code>index.html</code> con l'editor. Il tag <code>body</code> deve racchiudere tutto il contenuto visibile della pagina: riempilo così (e ricorda sempre di salvare alla fine):
      <pre>
<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>
      </pre>
    }}
{{Corso/Passo|1=
      L'elenco puntato contiene un nuovo tag, <code>a</code>, che definisce un collegamento (link) con un altro documento. L'attributo <code>href</code> indica il file da collegare; il testo dentro il tag è quello che compare sulla pagina, quello su cui devi cliccare per andare al documento.
    }}
{{Corso/Passo|1=
      Salva, apri <code>index.html</code> nel browser e prova a cliccare sui link: ti portano alle pagine giuste?
      {{Corso/Tip|1=Scrivere in HTML richiede un po' di ordine: le maiuscole e le minuscole vanno rispettate, soprattutto nei nomi dei file e nei link (<code>chi-sono.html</code> e <code>Chi-Sono.html</code> possono essere due file diversi). Hai notato le virgolette accanto a <code>href</code>? 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.}}
    }}
{{Corso/Passo|1=
      Prova ad aggiungere un'altra voce all'elenco, che porti a un'immagine invece che a una pagina:
      <pre>
<li><a href="immagini/sport.jpg">La mia foto</a></li>
      </pre>
      Cosa succede quando ci clicchi sopra?
    }}
{{Corso/FinePassi}}

{{Corso/Warn|1=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 <code>.exe</code>, <code>.bat</code> o <code>.cmd</code>: potrebbero essere programmi, non semplici documenti.}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
    Aggiungi al menu della homepage un link a una pagina che non esiste ancora, per esempio <code>contatti.html</code>. Cosa mostra il browser quando ci clicchi?
  }}

{{Corso/Sfida|1=cometa|2=
    Crea davvero la pagina mancante (<code>contatti.html</code>) e collegala.
  }}

{{Corso/Sfida|1=razzo|2=
    Aggiungi a ogni pagina (<code>chi-sono.html</code>, <code>hobby.html</code>...) un link "Torna alla home" verso <code>index.html</code>, così puoi navigare avanti e indietro tra tutte le pagine del sito.
  }}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Come si chiama di solito il file della pagina principale di un sito?|A=principale.html|B=index.html|C=home.doc|risposta=B|ok=Sì! index.html è la convenzione più diffusa.|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale tag crea un collegamento verso un altro documento?|A=&lt;link&gt;|B=&lt;go&gt;|C=&lt;a&gt;|risposta=C|ok=Esatto: a sta per "anchor".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale attributo del tag a indica il file da collegare?|A=href|B=src|C=title|risposta=A|ok=Sì! href sta per "hypertext reference".|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
    [https://developer.mozilla.org/it/docs/Web/HTML/Element/a Il tag a su MDN] — tutti i modi per usare i link, incluso il collegamento a email e ad altri siti.
  }}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 3|Lezione 3: Le immagini]]|next=[[Corsi/Web design/Lezione 5|Lezione 5: Un po' di stile con il CSS]]}}