Mattia.sala: Crea Lezione 1: Il tuo primo tag HTML (da PDF Sushi Card)

2026-08-03T20:53:00Z

Crea Lezione 1: Il tuo primo tag HTML (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 1 · 45-60 minuti|2=🧱 Il tuo primo tag HTML|obiettivo=Obiettivo: '''creare la tua prima pagina web e scrivere i primi tag HTML — paragrafi, testo in evidenza e titoli.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Un editor di testo (Notepad++, Sublime Text, VS Code... non Word!)
*Un browser (Chrome, Firefox, Edge...)
*Una cartella per il progetto, per esempio <code>mio-primo-sito</code>
{{Corso/FineMateriali}}

== 🧠 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ì <code><tag>...</tag></code>. Ogni pagina HTML comincia con uno scheletro fisso, che vedrai tra un attimo nei passi.

== 🔨 Costruisci: la tua prima pagina ==

{{Corso/Passi}}
{{Corso/Passo|1=
Crea la cartella <code>mio-primo-sito</code> sul Desktop (o dove preferisci). Dentro, crea un nuovo file di testo e chiamalo <code>chi-sono.html</code> — attenzione all'estensione: deve finire proprio in <code>.html</code>, non <code>.txt</code>.
}}
{{Corso/Passo|1=
Apri <code>chi-sono.html</code> con l'editor di testo e scrivi lo scheletro base di ogni pagina HTML:
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Chi sono</title>
</head>
<body>

</body>
</html>
</pre>
{{Corso/Tip|1=Il tag <code>title</code> è il testo che vedi nella linguetta del browser, non dentro la pagina. Tutto quello che vuoi mostrare nella pagina va invece dentro <code>body</code>.}}
}}
{{Corso/Passo|1=
Salva il file, poi trovalo nella cartella e aprilo con un doppio click: si apre nel browser. Per ora è vuota, perché <code>body</code> è vuoto.
}}
{{Corso/Passo|1=
Metti la finestra del browser e quella dell'editor fianco a fianco, così le vedi contemporaneamente.
}}
{{Corso/Passo|1=
Dentro <code>body</code>, scrivi <code><h1>il tuo nome</h1></code>. Salva e aggiorna la pagina nel browser (bottone Aggiorna, o premi F5). È comparso il titolo?
}}
{{Corso/Passo|1=
Aggiungi un paragrafo di testo dopo il titolo. Per farlo, scrivi la tua frase racchiudendola tra i tag <code></code> e <code></code>, così:
<pre>
Oggi sto creando il mio primo sito web.
</pre>
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ì <code><tag>...</tag></code>.
}}
{{Corso/Passo|1=
Cosa succede se racchiudi alcune parole nel tag <code>strong</code>? Prova:
<pre>
Oggi sto creando il mio primo sito web.
</pre>
}}
{{Corso/Passo|1=
Prova ad usare gli elementi <code>h1</code> o <code>h2</code> al posto di <code>p</code>, uno dopo l'altro: cosa cambia?
{{Corso/Tip|1=Hai imparato i primi tag dell'HTML: <code>p</code> per i paragrafi, <code>strong</code> per mettere in risalto una parte del testo, <code>h1</code>...<code>h6</code> per intestazioni e sottotitoli — il numero ne indica l'importanza, <code>h1</code> è il titolo principale.}}
}}
{{Corso/FinePassi}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Aggiungi un secondo paragrafo che racconta un tuo hobby.
}}

{{Corso/Sfida|1=cometa|2=
Usa <code>h1</code> per il titolo principale e <code>h2</code> per un sottotitolo, poi scrivi due paragrafi sotto ciascuno.
}}

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

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=A cosa serve il tag ?|A=Indica un paragrafo di testo.|B=Indica un'immagine.|C=Indica un collegamento ad un'altra pagina.|risposta=A|ok=Sì! p sta per "paragraph".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale tag mette in risalto una parte del testo?|A=<h1>|B=|C=<title>|risposta=B|ok=Esatto: strong evidenzia il testo al suo interno.|riprova=Riprova!}}

{{Corso/Quiz|domanda=Tra h1 e h6, quale titolo è il più importante?|A=h6|B=h3|C=h1|risposta=C|ok=Sì! Il numero più basso indica il titolo più importante.|riprova=Riprova: pensa a un indice, dal titolo principale ai sottotitoli...}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics Le basi dell'HTML (MDN)] — l'introduzione ufficiale ai tag che hai appena usato, con altri esempi da provare.
}}

== 🤝 Domande? Chiedi! ==

{{Corso/Tip|1=
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.
}}

{{Corso/FinePagina|prev=|next=[[Corsi/Web design/Lezione 2|Lezione 2: Liste e nuove pagine]]}}

Corsi/Web design/Lezione 1 - Cronologia

Mattia.sala: Crea Lezione 1: Il tuo primo tag HTML (da PDF Sushi Card)