Lesson1

Lezione 1: HTML per Principianti – Il Primo Passo Verso la Dominazione del Web (Ora con il Caddy Server!)

Benvenuto, futuro dominatore del web! Oggi entriamo nel meraviglioso mondo dell’HTML, il carburante segreto che alimenta ogni sito web. Creerai la tua prima pagina web (sì, sul serio!), e se ti senti particolarmente alla moda, ti mostrerò anche come ospitarla localmente usando Caddy. Non preoccuparti, Caddy non è essenziale per imparare HTML—è solo un modo per far sembrare il tutto più figo. Pronto? Iniziamo!

Passo 1: Cos’è l’HTML?

HTML (Hypertext Markup Language) è lo scheletro di ogni sito web. È il linguaggio che dice al browser come visualizzare i contenuti come testo, immagini e link. Pensalo come una ricetta per il tuo sito: tu aggiungi gli ingredienti (contenuti) e HTML dice al browser come cucinarli a puntino.

Adesso che sai cos’è l’HTML, mettiamoci all’opera e creiamo una pagina web!

Passo 2: Scrivere HTML (Scegli il Tuo Editor Preferito)

Prima di iniziare a scrivere il codice, hai bisogno di un posto dove scrivere l’HTML. Puoi aprire VIM come faccio io (se ti senti un vero mago del terminale), oppure scegliere VS Code se preferisci un ambiente moderno. In realtà, qualsiasi editor di testo va bene—anche Notepad se ti piace il vintage (ma diciamocelo, un po’ di evidenziazione della sintassi non guasta).

Ecco la struttura di base di un documento HTML:

<!DOCTYPE html>
<html>
<head>
    <title>La Tua Prima Pagina Web</title>
</head>
<body>
    <h1>Ciao, Mondo!</h1>
    <p>Guarda, sto già creando pagine web come un professionista!</p>
</body>
</html>

Che cosa succede qui?

<!DOCTYPE html>: Dice al browser: “Ehi, questo è un documento HTML5!”
<html>: Avvolge tutta la pagina, come una coperta per il tuo codice.
<head>: Qui va tutto il dietro le quinte (tipo il titolo della pagina—niente di troppo eccitante).
<title>: Questo è quello che appare nella scheda del browser.
<body>: Qui va tutto ciò che vedrà l’utente—testo, immagini e tutto il resto.

Ora che hai la tua prima pagina web, alziamo il livello e la ospitiamo localmente!

Passo 3: Installare Caddy (Perché sei alla moda)

Perché Caddy?

Non hai bisogno di Caddy per imparare HTML, ma è un modo simpatico per vedere la tua pagina web servita sulla tua rete locale. Pensalo come il tocco finale che ti fa sembrare un vero sviluppatore. E poi, è così facile da installare che vale la pena farlo.

Installare Caddy su Ubuntu

Aggiorna il sistema:

sudo apt update && sudo apt upgrade -y

Installa Caddy:

Esatto, tutto qui:

sudo apt install caddy

Controlla se funziona:

caddy version

Vedrai il numero di versione comparire. Ecco fatto!

Installare Caddy su Arch Linux

Aggiorna il sistema:

sudo pacman -Syu

Installa Caddy:

Installa Caddy con pacman:

sudo pacman -S caddy

Verifica l’installazione:

caddy version

E voilà! Ora siamo pronti per far girare la nostra pagina web con Caddy!

Passo 4: Esegui la tua prima pagina HTML con Caddy

Crea una directory per il tuo file HTML:

mkdir ~/my-website
cd ~/my-website

Crea il tuo primo file HTML:

Salva il seguente codice come index.html nella cartella ~/my-website:

<!DOCTYPE html>
<html>
<head>
    <title>La Mia Prima Pagina Web Servita con Caddy</title>
</head>
<body>
    <h1>Benvenuto nella Mia Prima Pagina Web</h1>
    <p>Questa pagina è servita da Caddy. Quanto è cool?</p>
</body>
</html>

Avvia Caddy:

Naviga nella tua cartella del sito e avvia Caddy:

cd ~/my-website
caddy file-server --listen :8080

Caddy ora serve la tua pagina web sulla porta 8080. Andiamo a vederla!

Visualizza la tua pagina:

Apri il browser e vai su http://localhost:8080. Dovresti vedere la tua bellissima pagina web in funzione. Ottimo lavoro!

Passo 5: Compito – Crea e ospita la tua pagina web

Ora è il momento di far brillare le tue abilità. Crea la tua pagina web e ospitala con Caddy. Includi:

Un bel titolo con il tuo nome.
Un paragrafo che spiega perché stai imparando HTML (per conquistare il mondo, ovviamente).
Un link al tuo sito preferito (perché no?).

Ecco un esempio per iniziare:

<!DOCTYPE html>
<html>
<head>
    <title>Benvenuti nel Mio Fantastico Sito</title>
</head>
<body>
    <h1>Ciao, sono [Il Tuo Nome]</h1>
    <p>Sto imparando HTML per costruire il prossimo grande sito (o almeno per non rompere il mio).</p>
    <a href="https://www.example.com">Dai un’occhiata al mio sito preferito!</a>
</body>
</html>

Avvia nuovamente il server Caddy:

caddy file-server --listen :8080

Visita http://localhost:8080 e ammira il tuo lavoro. Hai appena costruito e ospitato la tua pagina web!

In sintesi:

Hai imparato le basi dell’HTML e creato la tua prima pagina web.
Hai installato e utilizzato Caddy per ospitare la tua pagina localmente (perché non farti un po’ di pubblicità?).
Ma ricorda, Caddy è solo un extra divertente—non è essenziale per imparare HTML. È solo un modo per farti sembrare un vero pro.

Nella prossima lezione esploreremo come rendere le tue pagine web ancora più interessanti, dal formattare il testo alle liste. Ma per ora, goditi il momento di gloria con la tua pagina web ospitata localmente!