InnoMarts logo
InnoMarts
Fast websites
← Back to course

Progetto Finale HTML

Progetto Finale HTML

Bentornato.

Sei arrivato alla lezione finale di questo corso HTML.

Complimenti.

Il browser è sopravvissuto.

La tastiera è sopravvissuta.

E soprattutto, sei sopravvissuto al misterioso mondo delle parentesi angolari.

In questa lezione costruiremo una pagina HTML completa usando tutto quello che hai imparato:

Niente CSS per ora.

Niente JavaScript per ora.

Solo HTML.

Perché prima di decorare una casa servono muri, porte, finestre e tetto.

Altrimenti stiamo solo dipingendo l’aria.

Cosa Costruirai

Costruirai un semplice sito personale di studio.

La pagina includerà:

Non è solo un esercizio casuale.

È la tua prima pagina HTML completa.

Piccola?

Sì.

Semplice?

Sì.

Importante?

Assolutamente.

Le piccole pagine diventano grandi siti.

Proprio come piccoli bug diventano avventure di debugging da tre ore.

Setup del Progetto

Crea una cartella progetto:

mkdir html-final-project
cd html-final-project
touch final-project.html
mkdir images

Metti un’immagine dentro la cartella images.

Per esempio:

images/profile.jpg

Puoi usare qualsiasi immagine:

Tutto valido.

Struttura HTML Base

Apri final-project.html e inizia con questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il Mio Sito di Studio</title>
</head>
<body>

</body>
</html>

Questa è la base.

Non è ancora bella.

Ma è corretta.

E una struttura corretta è la prima vittoria.

Una pagina bella ma rotta è comunque rotta.

Una pagina semplice e corretta può crescere.

Header e Navigazione

Dentro body, aggiungi un header:

<header id="top">
  <h1>Il Mio Sito di Studio</h1>
  <p>Un semplice progetto HTML costruito passo dopo passo.</p>

  <nav>
    <a href="#about">Chi Sono</a>
    <a href="#lessons">Lezioni</a>
    <a href="#schedule">Programma</a>
    <a href="#contact">Contatto</a>
  </nav>
</header>

L’header introduce la pagina.

Il nav contiene i link di navigazione.

Ogni link punta a una sezione nella stessa pagina.

Per esempio:

<a href="#about">Chi Sono</a>

punta a:

<section id="about">

Così funziona la navigazione interna della pagina.

Piccolo dettaglio.

Molto utile.

Come un piccolo ascensore dentro la pagina.

Contenuto Main

Dopo l’header, aggiungi main:

<main>

</main>

L’elemento main contiene il contenuto principale della pagina.

Qui vive il contenuto importante.

Non il footer.

Non la navigazione ripetuta.

Non il caos casuale con gli occhiali da sole.

Sezione About

Dentro main, aggiungi questa sezione:

<section id="about">
  <h2>Informazioni sul Progetto</h2>

  <p>Questa pagina è il mio progetto finale HTML. Usa molti elementi HTML che ho imparato durante il corso.</p>

  <img src="images/profile.jpg" alt="Immagine profilo per il progetto di studio" width="300">

  <p>L’obiettivo è praticare struttura, contenuto, link, immagini, liste, tabelle, form e HTML semantico.</p>
</section>

Questa sezione usa:

È già parecchio HTML.

La pagina si sta svegliando.

Lentamente.

Come uno sviluppatore prima del caffè.

Sezione Lezioni

Ora aggiungi una lista di ciò che hai imparato:

<section id="lessons">
  <h2>Cosa Ho Imparato</h2>

  <p>Durante questo corso ho imparato le basi più importanti di HTML.</p>

  <ul>
    <li>Struttura del documento HTML</li>
    <li>Titoli e paragrafi</li>
    <li>Liste e link</li>
    <li>Immagini e media</li>
    <li>Tabelle e form</li>
    <li>HTML semantico</li>
  </ul>
</section>

Una lista è l’elemento giusto qui.

Perché?

Perché è un gruppo di elementi collegati.

HTML ama quando scegliamo l’elemento corretto.

Il browser si calma.

Lo sviluppatore si calma.

Vincono tutti.

Quasi.

Lezioni in Evidenza

Ora aggiungi una sezione con articoli:

<section>
  <h2>Lezioni in Evidenza</h2>

  <article>
    <h3>Link e Navigazione</h3>
    <p>Questa lezione spiega come le pagine si collegano tra loro usando i link.</p>
  </article>

  <article>
    <h3>Form e Input Utente</h3>
    <p>Questa lezione spiega come gli utenti possono inviare informazioni tramite form.</p>
  </article>
</section>

Ogni article è un piccolo blocco indipendente di contenuto.

Ha il suo titolo.

Ha il suo significato.

Può stare da solo.

Molto responsabile.

Diversamente da certi layout CSS che incontreremo più avanti.

Tabella Programma

Ora aggiungi una tabella:

<section id="schedule">
  <h2>Programma di Studio</h2>

  <p>Questa tabella mostra un semplice piano di studio.</p>

  <table>
    <caption>Piano Settimanale di Pratica HTML</caption>

    <thead>
      <tr>
        <th>Giorno</th>
        <th>Argomento</th>
        <th>Tempo</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Lunedì</td>
        <td>Struttura HTML</td>
        <td>30 minuti</td>
      </tr>
      <tr>
        <td>Mercoledì</td>
        <td>Link e Immagini</td>
        <td>45 minuti</td>
      </tr>
      <tr>
        <td>Venerdì</td>
        <td>Form e Tabelle</td>
        <td>45 minuti</td>
      </tr>
    </tbody>
  </table>
</section>

Questo è un buon uso della tabella.

Righe.

Colonne.

Dati strutturati.

Nessun crimine di layout.

La polizia frontend può rilassarsi.

Per ora.

Form di Contatto

Ora aggiungi un form:

<section id="contact">
  <h2>Contattami</h2>

  <p>Usa questo form per inviare un semplice messaggio.</p>

  <form action="#" method="post">
    <label for="name">Nome</label>
    <input id="name" name="name" type="text" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>

    <label for="topic">Argomento</label>
    <select id="topic" name="topic">
      <option value="question">Domanda</option>
      <option value="feedback">Feedback</option>
      <option value="project">Progetto</option>
    </select>

    <label for="message">Messaggio</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Invia Messaggio</button>
  </form>
</section>

Questo form non invierà ancora una vera email.

Serve un backend o un servizio form.

Ma la struttura HTML è corretta.

E la struttura corretta conta.

Molti siti online hanno saltato quella parte e sono andati direttamente alla sofferenza.

Aside

Aggiungi un piccolo consiglio di studio:

<aside>
  <h2>Consiglio di Studio</h2>
  <p>Pratica HTML costruendo piccole pagine. Leggere è utile, ma costruire è dove il cervello finalmente si sveglia.</p>
</aside>

L’aside contiene informazioni extra collegate.

Non è il contenuto principale.

È una nota laterale.

Come un amico saggio vicino con il caffè.

Footer

Dopo main, aggiungi un footer:

<footer>
  <p>&copy; 2026 Il Mio Sito di Studio</p>
  <p><a href="#top">Torna su</a></p>
</footer>

Il link torna a:

<header id="top">

Questa è una funzione semplice ma utile.

Una piccola vittoria.

Come chiudere tutte le schede del browser dopo aver risolto un bug.

Codice Completo del Progetto

Ecco la pagina completa:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il Mio Sito di Studio</title>
</head>
<body>
  <header id="top">
    <h1>Il Mio Sito di Studio</h1>
    <p>Un semplice progetto HTML costruito passo dopo passo.</p>

    <nav>
      <a href="#about">Chi Sono</a>
      <a href="#lessons">Lezioni</a>
      <a href="#schedule">Programma</a>
      <a href="#contact">Contatto</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>Informazioni sul Progetto</h2>

      <p>Questa pagina è il mio progetto finale HTML. Usa molti elementi HTML che ho imparato durante il corso.</p>

      <img src="images/profile.jpg" alt="Immagine profilo per il progetto di studio" width="300">

      <p>L’obiettivo è praticare struttura, contenuto, link, immagini, liste, tabelle, form e HTML semantico.</p>
    </section>

    <section id="lessons">
      <h2>Cosa Ho Imparato</h2>

      <p>Durante questo corso ho imparato le basi più importanti di HTML.</p>

      <ul>
        <li>Struttura del documento HTML</li>
        <li>Titoli e paragrafi</li>
        <li>Liste e link</li>
        <li>Immagini e media</li>
        <li>Tabelle e form</li>
        <li>HTML semantico</li>
      </ul>
    </section>

    <section>
      <h2>Lezioni in Evidenza</h2>

      <article>
        <h3>Link e Navigazione</h3>
        <p>Questa lezione spiega come le pagine si collegano tra loro usando i link.</p>
      </article>

      <article>
        <h3>Form e Input Utente</h3>
        <p>Questa lezione spiega come gli utenti possono inviare informazioni tramite form.</p>
      </article>
    </section>

    <section id="schedule">
      <h2>Programma di Studio</h2>

      <p>Questa tabella mostra un semplice piano di studio.</p>

      <table>
        <caption>Piano Settimanale di Pratica HTML</caption>

        <thead>
          <tr>
            <th>Giorno</th>
            <th>Argomento</th>
            <th>Tempo</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Lunedì</td>
            <td>Struttura HTML</td>
            <td>30 minuti</td>
          </tr>
          <tr>
            <td>Mercoledì</td>
            <td>Link e Immagini</td>
            <td>45 minuti</td>
          </tr>
          <tr>
            <td>Venerdì</td>
            <td>Form e Tabelle</td>
            <td>45 minuti</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="contact">
      <h2>Contattami</h2>

      <p>Usa questo form per inviare un semplice messaggio.</p>

      <form action="#" method="post">
        <label for="name">Nome</label>
        <input id="name" name="name" type="text" required>

        <label for="email">Email</label>
        <input id="email" name="email" type="email" required>

        <label for="topic">Argomento</label>
        <select id="topic" name="topic">
          <option value="question">Domanda</option>
          <option value="feedback">Feedback</option>
          <option value="project">Progetto</option>
        </select>

        <label for="message">Messaggio</label>
        <textarea id="message" name="message" rows="5" required></textarea>

        <button type="submit">Invia Messaggio</button>
      </form>
    </section>

    <aside>
      <h2>Consiglio di Studio</h2>
      <p>Pratica HTML costruendo piccole pagine. Leggere è utile, ma costruire è dove il cervello finalmente si sveglia.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Il Mio Sito di Studio</p>
    <p><a href="#top">Torna su</a></p>
  </footer>
</body>
</html>

Pratica

Costruisci la tua versione di questa pagina.

Cambia:

Non copiare soltanto.

Modifica.

Rompi un po’.

Sistema.

È così che l’apprendimento diventa reale.

Mini Sfida

Crea una seconda pagina chiamata:

about.html

Aggiungi:

Poi collegala dalla pagina principale.

Ora hai più di una pagina.

È così che un sito comincia a crescere.

Come una pianta.

Ma con più parentesi angolari.

Riassunto

Oggi hai costruito un progetto HTML completo.

Hai usato:

Questa è una vera base.

Non stilizzata.

Non interattiva.

Ma strutturalmente corretta.

HTML è lo scheletro del web.

CSS lo vestirà.

JavaScript lo farà ballare.

Ma senza HTML, non c’è niente da vestire e niente da far ballare.

Corso Completato

Complimenti.

Hai finito il corso HTML.

Ora capisci la struttura base delle pagine web.

Prossimo passo?

CSS.

Perché ora che la pagina esiste, possiamo finalmente farla sembrare meno progettata da una calcolatrice.