Corso di HTML / Creare un piccolo sito web con più pagine

Un piccolo sito web multipagina combina la struttura del documento, le aree semantiche, i link e i moduli. In questo progetto create le pagine Pagina iniziale, Chi siamo e Contatti nella stessa cartella, navigate tra esse e controllate il risultato. HTML da solo non può ricevere o memorizzare messaggi di contatto, quindi il modulo qui è una dimostrazione di inserimento e non un servizio di contatto funzionante.

Preparare i file

Create una nuova cartella e salvate in essa questi tre semplici file di testo UTF-8. I nomi dei file devono corrispondere esattamente ai valori di href nel menu. Confrontate prima come i percorsi relativi si risolvono partendo dalle posizioni dei file in Links: percorsi, frammenti di pagina e e-mail.

small-site/
  index.html
  about.html
  contact.html

Assicuratevi che l'editor non abbia aggiunto un'altra estensione, come ad esempio .txt. Mantenere insieme i tre file permette a href="about.html" di trovare la pagina “Chi siamo” utilizzando un percorso relativo. Se successivamente spostate un file in un'altra cartella, aggiornate i link corrispondenti. Completate prima la versione solo testo; poi potrete aggiungere le immagini, il cui uso vi è permesso, con un testo alternativo appropriato.

Creare la pagina iniziale

Salvate il seguente documento completo con il nome index.html. Usate in ogni pagina gli stessi tre obiettivi del menu. I ruoli di header, nav e main seguono il layout semantico in Strutturare una pagina con elementi semantici.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pagina iniziale | Piccolo Giardino</title>
  <meta name="description" content="Pagina iniziale della pagina di esercizio Piccolo Giardino, con link alla presentazione e a un esercizio di modulo di contatto.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigazione principale">
      <a href="index.html" aria-current="page">Pagina iniziale</a>
      <a href="about.html">Chi siamo</a>
      <a href="contact.html">Contatti</a>
    </nav>
  </header>
  <main>
    <h1>Piccolo Giardino</h1>
    <p>Una piccola guida per persone che iniziano a coltivare piante.</p>
  </main>
  <footer><p>Pagina di esercizio Piccolo Giardino</p></footer>
</body>
</html>

Aprendo index.html dovrebbe apparire un menu e il titolo "Piccolo Giardino". I collegamenti Chi siamo e Contatti funzionano solo dopo aver creato i loro file nella stessa cartella. Lo h1 mostrato qui appartiene alla pagina di esempio, non a questo tutorial.

Creare le pagine Chi siamo e Contatti

Salvate il seguente documento completo con il nome about.html. Mantiene le stesse pagine di destinazione del menu, mentre per Chi siamo viene assegnato un titolo proprio, una descrizione e lo stato attuale del menu. La distinzione tra il controllo dei valori GET e la ricezione dei messaggi segue la spiegazione della richiesta in Struttura dei moduli e differenza tra GET e POST.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chi siamo | Piccolo Giardino</title>
  <meta name="description" content="Presentazione della pagina di esercizio Piccolo Giardino, pensata per persone che iniziano a coltivare piante.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigazione principale">
      <a href="index.html">Pagina iniziale</a>
      <a href="about.html" aria-current="page">Chi siamo</a>
      <a href="contact.html">Contatti</a>
    </nav>
  </header>
  <main>
    <h1>Chi siamo</h1>
    <p>Piccolo Giardino è una pagina di esercizi per persone che iniziano a coltivare piante.</p>
  </main>
  <footer><p>Pagina di esercizio Piccolo Giardino</p></footer>
</body>
</html>

Salvate il seguente documento completo con il nome contact.html. Il modulo di esercizio invia le voci con GET all'URL del documento corrente e non invia un messaggio reale.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contatti | Piccolo Giardino</title>
  <meta name="description" content="Esercitatevi a inserire un nome e un messaggio di prova e a confermarli, senza inviare una vera richiesta di contatto.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigazione principale">
      <a href="index.html">Pagina iniziale</a>
      <a href="about.html">Chi siamo</a>
      <a href="contact.html" aria-current="page">Contatti</a>
    </nav>
  </header>
  <main>
    <h1>Esercizio del modulo di contatto</h1>
    <p>Questo esempio non invia messaggi. Usate solo testi di prova.</p>
    <form method="get">
      <p><label for="visitor-name">Nome</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">Messaggio</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">Verificare i valori inseriti</button>
    </form>
  </main>
  <footer><p>Pagina di esercizio Piccolo Giardino</p></footer>
</body>
</html>

Ogni blocco è un documento completo, quindi salvatelo come file intero, invece di inserire un ulteriore elemento html o main all'interno di una copia esistente. Mantenete gli stessi obiettivi del menu, ma impostate aria-current="page" solo sul link che rappresenta questo documento.

“Verificare i valori inseriti” non invia messaggi a nessuno. Il browser verifica i campi obbligatori e invia i dati tramite GET all'URL del documento corrente. Testate solo con testo segnaposto, poiché i valori inviati possono comparire nell'URL. Un vero servizio di contatto richiede un gestore lato server, misure per la privacy, controlli anti-spam e informazioni chiare di successo o errore.

Usate questa tabella per confrontare gli schermi completati. Il collegamento attuale è visualizzato in grassetto, mentre aria-current trasmette il suo stato indipendentemente da questo trattamento visivo.

Controllare i criteri di successo ed espandere gradualmente il sito web

Completate la versione base prima di aggiungere ciascuna estensione: un elenco utile nella sezione "Chi siamo", un'immagine con testo alternativo appropriato o informazioni opzionali in un elemento details. Ripetete i controlli della navigazione, della sintassi e della tastiera dopo ogni aggiunta, in modo che un nuovo problema possa essere attribuito a una sola modifica.

Quando aggiornate un menu condiviso, aggiornate tutte e tre le copie, ma impostate aria-current sul link corrispondente in ciascuna di esse. Testate di nuovo i percorsi relativi dopo il deployment: la distinzione tra maiuscole e minuscole del nome del file e la cartella di deployment possono differire dall'ambiente locale.

Verificare il sito web completo

1. Aprite index.html e confermate che ogni collegamento del menu apra il file corretto.
2. Navigate da “Chi siamo” e “Contatti” anche alle altre due pagine; non verificate solo il menu della homepage.
3. Assicuratevi che ogni titolo di scheda visibile e h1 descriva questa pagina.
4. Usate Tab per raggiungere ogni collegamento e ogni controllo del campo contatto.
5. Provate a inviare campi vuoti, poi inserite valori di prova mentre osservate l’URL.
6. Controllate ogni file con Nu HTML Checker, correggete gli errori e ricontrollate.

Se un link non funziona, controllate prima il nome del file e il percorso relativo. Se si modifica un menu comune, aggiornate le tre copie. Quando un sito web cresce, diventa importante mantenere coerenti i markup ripetuti. In questo esercizio si prevede un modulo che non invia un messaggio reale; l'obiettivo è creare e verificare l'interfaccia HTML. Separate i risultati della validazione dal comportamento effettivo della pagina, come spiegato in individuare errori e validare documenti HTML.