Lezione 4: Creare il tuo primo file HTML - Guida Passo dopo Passo

Impara a creare, salvare e visualizzare il tuo primo documento HTML. Scopriamo insieme la struttura fondamentale di una pagina web.

Benvenuti nella Lezione 4: Dalla Teoria alla Pratica

Dopo aver compreso cos'è l'HTML e come funzionano i tag, è arrivato il momento di sporcarsi le mani. In questa lezione passeremo dalla teoria alla pratica: creeremo il vostro primo vero file HTML.

Molti principianti pensano che per programmare servano software costosissimi o computer potentissimi. La realtà è molto più semplice: l'HTML è un linguaggio di markup basato su testo semplice. Questo significa che qualsiasi programma in grado di scrivere testo (anche il più semplice Blocco Note di Windows o TextEdit di macOS) può essere utilizzato per creare una pagina web. Tuttavia, per rendere il lavoro più efficiente, utilizzeremo strumenti chiamati "Editor di Codice".

1. Gli strumenti del mestiere

Prima di scrivere la prima riga di codice, dobbiamo preparare l'ambiente di lavoro. Come accennato, potresti usare un editor di testo base, ma sconsigliamo vivamente questa opzione perché non offre alcun aiuto visivo.

Perché usare un Editor di Codice (IDE)?

Un editor professionale come Visual Studio Code (VS Code), Sublime Text o Atom offre funzionalità fondamentali che accelerano l'apprendimento:

  • Evidenziazione della sintassi (Syntax Highlighting): I tag, gli attributi e i testi vengono colorati in modo diverso. Questo ti permette di capire a colpo d'occhio se hai dimenticato di chiudere un tag o se hai commesso un errore di battitura.
  • Auto-completamento: L'editor suggerisce i tag mentre scrivi, riducendo gli errori.
  • Gestione dei file: Permette di gestire l'intero progetto (immagini, fogli di stile, file HTML) in un'unica cartella laterale.

Configurazione rapida

Se non l'hai ancora fatto, scarica e installa Visual Studio Code. Una volta aperto, ti suggeriamo di installare l'estensione "Live Server". Questa estensione permette di vedere le modifiche al tuo sito in tempo reale nel browser senza dover ricaricare manualmente la pagina ogni volta che salvi il file.

2. Creazione della cartella di progetto

Un errore comune dei principianti è salvare i file in modo disordinato sul desktop. Nel web development, l'organizzazione è tutto. Un sito web non è quasi mai composto da un singolo file, ma da una struttura di cartelle che contiene immagini, CSS e JavaScript.

Segui questi passaggi:

  1. Crea una cartella sul tuo computer chiamata mio-primo-sito.
  2. Apri Visual Studio Code.
  3. Trascina la cartella appena creata all'interno della finestra di VS Code oppure vai su File -> Open Folder e seleziona la tua cartella.

Ora che abbiamo l'ambiente di lavoro, siamo pronti per creare il file principale.

3. Creare il file index.html

All'interno della tua cartella di progetto, crea un nuovo file. Il nome è cruciale: chiamalo index.html.

Perché proprio "index"?

Ti chiederai perché non chiamarlo home.html o pagina1.html. Per convenzione universale, i server web cercano automaticamente un file chiamato index.html come pagina di ingresso principale di un sito. Se un utente visita www.tuosito.it, il server cercherà il file index.html nella cartella principale per mostrarlo. Se non lo trova, potrebbe mostrare un errore o l'elenco dei file presenti nella cartella.

L'estensione .html

L'estensione .html dice al sistema operativo e al browser che quel file non è un semplice documento di testo, ma un documento che deve essere interpretato secondo le regole dell'HyperText Markup Language.

4. Scrivere la struttura fondamentale

Ora scriviamo il codice. Non inseriremo solo un testo a caso, ma costruiremo lo "scheletro" standard di ogni pagina web moderna.

Ecco il codice completo che devi digitare (o copiare) nel tuo file index.html:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La mia prima pagina Web</title>
</head>
<body>
    <h1>Ciao Mondo!</h1>
    <p>Questo è il mio primo file HTML creato durante il corso di programmazione web.</p>
    <p>Sto imparando come strutturare una pagina e non vedo l'ora di scoprire il CSS!</p>
</body>
</html>

Spiegazione dettagliata del codice

È fondamentale capire perché scriviamo queste righe, non solo copiarle:

  • <!DOCTYPE html>: Questa non è un vero tag HTML, ma una dichiarazione. Serve a comunicare al browser che stiamo utilizzando la versione più recente di HTML (HTML5). Senza di essa, il browser potrebbe entrare in "quirks mode" (modalità compatibilità), rendendo la visualizzazione del sito imprevedibile.
  • <html lang="it">: È il tag radice che racchiude tutto il contenuto. L'attributo lang="it" indica ai motori di ricerca e agli screen reader che il contenuto della pagina è in lingua italiana.
  • <head>: Questa sezione contiene i metadati. Tutto ciò che si trova qui non viene visualizzato direttamente nella pagina bianca del browser, ma è fondamentale per il funzionamento del sito.
    • <meta charset="UTF-8">: Definisce la codifica dei caratteri. UTF-8 è lo standard globale che permette di visualizzare correttamente accenti, simboli e caratteri di quasi tutte le lingue del mondo.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Questa riga è essenziale per il "Responsive Design". Dice al browser di adattare la larghezza della pagina alla dimensione dello schermo del dispositivo (smartphone, tablet o PC).
    • <title>: Definisce il titolo che compare nella scheda (tab) del browser.
  • <body>: Qui avviene la magia. Tutto ciò che inseriamo all'interno del tag body sarà visibile all'utente finale.
    • <h1>: Il titolo principale della pagina.
    • <p>: I paragrafi di testo.

5. Visualizzare il risultato nel browser

Ora che il codice è scritto e salvato (ricorda di premere Ctrl+S o Cmd+S), dobbiamo vedere come appare.

Metodo 1: Doppio Click

Vai nella cartella mio-primo-sito sul tuo computer e fai doppio click sul file index.html. Il sistema aprirà automaticamente il browser predefinito e vedrai la tua pagina.

Metodo 2: Live Server (Consigliato)

Se hai installato l'estensione Live Server in VS Code, clicca con il tasto destro all'interno del codice HTML e seleziona "Open with Live Server".

Il vantaggio enorme è che ora puoi cambiare il testo del tuo <h1> o aggiungere un nuovo paragrafo, salvare il file, e vedrai la pagina aggiornarsi istantaneamente senza dover ricaricare il browser. Questo accelera drasticamente il ciclo di sviluppo.

6. Esempi pratici: Espandere la pagina

Per rendere l'esercizio più utile, proviamo a aggiungere altri elementi comuni per capire come interagiscono tra loro. Modifica il tuo <body> aggiungendo questi elementi:

<body>
    <h1>Benvenuti nel mio Portfolio</h1>
    <p>Mi chiamo Mario e sto studiando programmazione web.</p>
    
    <h2>Le mie competenze</h2>
    <ul>
        <li>HTML5 (In corso)</li>
        <li>Logica di programmazione</li>
        <li>Passione per il design
    </ul>

    <h2>Contattami</h2>
    <p>Puoi trovarmi su <a href="https://github.com">GitHub</a> o scrivermi via email.</p>
</body>

Cosa abbiamo aggiunto?

  • <h2>: Un titolo di secondo livello. È importante usare i titoli in ordine gerarchico (h1 poi h2, poi h3) per l'accessibilità e la SEO.
  • <ul> e <li>: Abbiamo creato una lista non ordinata (un elenco puntato). <ul> sta per Unordered List e <li> per List Item.
  • <a>: Abbiamo inserito un collegamento ipertestuale (link). L'attributo href indica la destinazione del link.

7. Errori comuni da evitare

Anche i programmatori esperti commettono errori. Ecco i più frequenti per chi inizia:

  1. Dimenticare di chiudere i tag: Se scrivi <h1>Titolo senza l'</h1> finale, il browser potrebbe pensare che tutto il resto della pagina sia parte del titolo, rendendo tutto enorme e in grassetto.
  2. Errori di battitura nei nomi dei file: Se chiami il file index.html.txt (perché il tuo computer nasconde le estensioni), il browser non lo leggerà correttamente. Assicurati che l'estensione sia solo .html.
  3. Sbagliare l'annidamento: I tag devono essere chiusi nell'ordine inverso in cui sono stati aperti.
    • Sbagliato: <b><i>Testo</b></i>
    • Corretto: <b><i>Testo</i></b>
  4. Dimenticare il salvataggio: Molti studenti si chiedono perché le modifiche non appaiano nel browser. Spesso è perché non hanno salvato il file nell'editor.

FAQ Rapide

Domanda: Posso usare Word per scrivere HTML? Risposta: Assolutamente no. Word aggiunge formattazioni invisibili al testo che corrompono il codice HTML. Usa sempre un editor di testo semplice o un IDE come VS Code.

Domanda: Perché la mia pagina è tutta bianca? Risposta: Controlla di aver scritto qualcosa all'interno del tag <body>. Tutto ciò che è nel <head> è invisibile all'utente.

Domanda: Posso mettere immagini nel mio primo file? Risposta: Sì, ma richiedono un passaggio extra: l'immagine deve trovarsi nella stessa cartella del file HTML (o in una sottocartella) e devi usare il tag <img src="nome-immagine.jpg">.

Prossimi passi

Congratulazioni! Hai appena creato la tua prima pagina web. Questo è il primo passo fondamentale per diventare uno sviluppatore frontend.

Per consolidare quanto appreso in questa lezione, ti suggerisco di:

  1. Provare a creare una seconda pagina (es. about.html) e collegarla alla prima usando il tag <a>.
  2. Sperimentare con i diversi livelli di titoli (da h1 a h6).
  3. Provare a creare una lista ordinata usando il tag <ol> invece di <ul>.

Nella prossima lezione, approfondiremo l'uso dei testi e vedremo come formattare i contenuti per renderli più leggibili e professionali. Continua così!