InnoMarts logo
InnoMarts
Fast websites
← Back to course

Iniziare con HTML

Iniziare con HTML

Benvenuto nella tua prima lezione di HTML.

Oggi iniziamo da zero.

Niente framework.

Niente JavaScript.

Niente strumenti complicati di build.

Solo un semplice file HTML e un browser.

Bellissimo.

Sospettosamente semplice.

Cosa Imparerai

In questa lezione imparerai:

Che Cos’è HTML?

HTML significa:

HyperText Markup Language

Sembra molto serio.

Ma l’idea è semplice:

HTML descrive la struttura di una pagina web.

Dice al browser cosa significa ogni parte della pagina.

Per esempio:

Questo è un titolo.
Questo è un paragrafo.
Questo è un link.
Questa è un’immagine.

HTML non serve principalmente a rendere le cose belle.

Quello è soprattutto CSS.

HTML non serve principalmente a rendere le cose interattive.

Quello è soprattutto JavaScript.

HTML è lo scheletro.

Senza di lui, la pagina web non ha struttura.

E un sito senza struttura è come un mobile montato a mezzanotte senza istruzioni.

Possibile, ma pericoloso.

Creare una Cartella di Pratica

Apri il terminale e crea una cartella per esercitarti con HTML:

mkdir -p ~/html-practice
cd ~/html-practice

Ora crea un file chiamato index.html:

touch index.html

Aprilo con il tuo editor.

Per esempio, se usi VS Code:

code index.html

Oppure usa qualsiasi editor tu preferisca.

La cosa importante è che il file si chiami:

index.html

Questo è un nome comune per la pagina principale di un sito web.

La Tua Prima Pagina HTML

Aggiungi questo codice a index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>La Mia Prima Pagina HTML</title>
</head>
<body>
  <h1>Ciao, HTML!</h1>
  <p>Questa è la mia prima pagina web.</p>
</body>
</html>

Salva il file.

Congratulazioni.

Hai scritto la tua prima pagina HTML.

Niente fuochi d’artificio.

Ma il browser è pronto.

Aprire la Pagina nel Browser

Puoi aprire il file direttamente nel browser.

Trova il file e aprilo.

Oppure dal terminale, se il tuo sistema lo supporta, puoi provare:

xdg-open index.html

Dovresti vedere:

Ciao, HTML!
Questa è la mia prima pagina web.

Il browser legge il tuo HTML e lo trasforma in una pagina web.

Questa è la magia di base.

Non magia oscura.

Solo magia da browser.

Capire il Codice

Guardiamo la pagina pezzo per pezzo.

Questa riga dice al browser che è un documento HTML:

<!DOCTYPE html>

Questa apre il documento HTML:

<html lang="it">

Questa parte contiene informazioni sulla pagina:

<head>
  <meta charset="UTF-8">
  <title>La Mia Prima Pagina HTML</title>
</head>

Il title appare nella scheda del browser.

Questa parte contiene il contenuto visibile:

<body>
  <h1>Ciao, HTML!</h1>
  <p>Questa è la mia prima pagina web.</p>
</body>

Tutto ciò che si trova dentro body è quello che l’utente vede nella pagina.

Titoli e Paragrafi

Il tag h1 crea il titolo principale:

<h1>Ciao, HTML!</h1>

Il tag p crea un paragrafo:

<p>Questa è la mia prima pagina web.</p>

I tag HTML di solito vengono in coppia:

<p>Tag di apertura, contenuto, tag di chiusura.</p>

Il tag di apertura è:

<p>

Il tag di chiusura è:

</p>

La barra / significa che l’elemento finisce.

HTML ama chiudere le cose correttamente.

A differenza di alcune persone con le schede del browser.

Cambiare il Contenuto

Ora cambia la tua pagina:

<body>
  <h1>Il Mio Primo Sito Web</h1>
  <p>Ciao! Sto imparando HTML passo dopo passo.</p>
  <p>Questa pagina è semplice, ma è reale.</p>
</body>

Salva il file.

Aggiorna il browser.

Dovresti vedere il nuovo testo.

Questo è il flusso di lavoro base:

modifica file
salva file
aggiorna browser
vedi risultato

Semplice.

Onesto.

Senza misteriosi errori di build da un altro pianeta.

Opzionale: Servire la Pagina con Caddy

Aprire il file direttamente va benissimo.

Ma puoi anche servire la cartella come un piccolo sito locale.

Se hai Caddy installato, esegui questo dentro ~/html-practice:

caddy file-server --listen :8080

Poi apri:

http://localhost:8080

È utile perché assomiglia di più al modo in cui funzionano i siti veri.

Il tuo computer diventa un piccolo server web.

Molto piccolo.

Molto fiero.

Errori Comuni

Dimenticare di Salvare

Se cambi il file ma il browser non cambia, prima salva il file.

Il browser non legge i tuoi pensieri.

Nemmeno HTML.

Estensione del File Sbagliata

Questo è corretto:

index.html

Questo non è la stessa cosa:

index.txt
index.html.txt

Il file deve finire con .html.

Tag di Chiusura Mancanti

Questo è meglio:

<p>Ciao mondo.</p>

Questo è disordinato:

<p>Ciao mondo.

I browser perdonano molto, ma non abusare della loro gentilezza.

Un browser paziente non è una scusa per HTML caotico.

Pratica

Crea una pagina con:

Esempio:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Chi Sono</title>
</head>
<body>
  <h1>Chi Sono</h1>
  <p>Ciao, mi chiamo Viktor.</p>
  <p>Sto imparando HTML perché voglio costruire siti web.</p>
</body>
</html>

Cambia il testo con il tuo.

Non copiare soltanto.

HTML si impara meglio quando le dita soffrono un pochino.

Mini Sfida

Crea un nuovo file:

touch about.html

Dentro crea una seconda pagina con:

Aprila nel browser.

Hai appena creato più di una pagina HTML.

Progresso pericoloso.

Riassunto

Oggi hai imparato che:

Hai creato la tua prima pagina web.

Pagina piccola.

Grande inizio.

Prossima Lezione

Nella prossima lezione studieremo più attentamente la struttura del documento HTML.

Capiremo DOCTYPE, html, head, body, meta e perché i browser apprezzano una buona struttura.