Lezione 1 · 45-60 minuti

🧱 Il tuo primo tag HTML

Obiettivo: creare la tua prima pagina web e scrivere i primi tag HTML — paragrafi, testo in evidenza e titoli.

🎒 Ci serve

Un editor di testo (Notepad++, Sublime Text, VS Code... non Word!)
Un browser (Chrome, Firefox, Edge...)
Una cartella per il progetto, per esempio mio-primo-sito

🧠 Un po' di teoria

HTML (HyperText Markup Language) è il linguaggio che descrive il contenuto e la struttura di una pagina web: titoli, paragrafi, immagini, link. Il browser legge il file HTML e lo trasforma nella pagina che vedi.
Il mattoncino base dell'HTML è il tag: una parola tra parentesi angolari che di solito si apre e si chiude, così <tag>...</tag>. Ogni pagina HTML comincia con uno scheletro fisso, che vedrai tra un attimo nei passi.

🔨 Costruisci: la tua prima pagina

Crea la cartella mio-primo-sito sul Desktop (o dove preferisci). Dentro, crea un nuovo file di testo e chiamalo chi-sono.html — attenzione all'estensione: deve finire proprio in .html, non .txt.

Apri chi-sono.html con l'editor di testo e scrivi lo scheletro base di ogni pagina HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Chi sono</title>
</head>
<body>

</body>
</html>

Il tag title è il testo che vedi nella linguetta del browser, non dentro la pagina. Tutto quello che vuoi mostrare nella pagina va invece dentro body.

Salva il file, poi trovalo nella cartella e aprilo con un doppio click: si apre nel browser. Per ora è vuota, perché body è vuoto.

Metti la finestra del browser e quella dell'editor fianco a fianco, così le vedi contemporaneamente.

Dentro body, scrivi <h1>il tuo nome</h1>. Salva e aggiorna la pagina nel browser (bottone Aggiorna, o premi F5). È comparso il titolo?

Aggiungi un paragrafo di testo dopo il titolo. Per farlo, scrivi la tua frase racchiudendola tra i tag <p> e </p>, così:

<p>Oggi sto creando il mio primo sito web.</p>

Hai appena scritto in HTML! I tag sono gli elementi base che descrivono il contenuto della pagina, ne imparerai molti. Ricorda: se un tag si apre, si deve sempre chiudere, così <tag>...</tag>.

Cosa succede se racchiudi alcune parole nel tag strong? Prova:

<p>Oggi sto creando <strong>il mio primo sito</strong> web.</p>

Prova ad usare gli elementi h1 o h2 al posto di p, uno dopo l'altro: cosa cambia?

Hai imparato i primi tag dell'HTML: p per i paragrafi, strong per mettere in risalto una parte del testo, h1...h6 per intestazioni e sottotitoli — il numero ne indica l'importanza, h1 è il titolo principale.

🚀 Sfide

⭐ Stella

Aggiungi un secondo paragrafo che racconta un tuo hobby.

⭐⭐ Cometa

Usa h1 per il titolo principale e h2 per un sottotitolo, poi scrivi due paragrafi sotto ciascuno.

⭐⭐⭐ Razzo

Metti in evidenza con strong tre parole diverse in punti diversi della pagina. Poi prova a mettere un tag dentro l'altro, come <p>Adoro <strong>il coding</strong>!</p>: cosa succede se dimentichi di chiudere strong prima di chiudere p?

📝 Quiz: mettiti alla prova

A cosa serve il tag <p>?

Indica un paragrafo di testo.

Indica un'immagine.

Indica un collegamento ad un'altra pagina.

Quale tag mette in risalto una parte del testo?

<h1>

<title>

Tra h1 e h6, quale titolo è il più importante?

h6

h3

h1

📚 Da guardare o leggere

Le basi dell'HTML (MDN) — l'introduzione ufficiale ai tag che hai appena usato, con altri esempi da provare.

🤝 Domande? Chiedi!

Hai un dubbio o vuoi andare più veloce? Chiedi a un mentor in sala, oppure al tuo tutor automatico: spiegagli cosa non funziona o chiedigli una sfida più difficile. Nessuna domanda è stupida.