Lezione 2: Formattare Testo e Liste – Dai un po' di Struttura alla Tua Pagina Web (Ora con il Caddy Server!)

Lezione 2: Formattare Testo e Liste – Dai un po’ di Struttura alla Tua Pagina Web (Ora con il Caddy Server!)

Bentornato, mago del web! Ora che hai iniziato il tuo viaggio nell’HTML, è il momento di dare un po’ di ordine alla tua pagina. Oggi esploreremo titoli, paragrafi e liste per rendere la tua pagina più strutturata. E come nella Lezione 1, useremo Caddy per ospitare la tua creazione. Pronto a mostrare il tuo contenuto ben organizzato? Iniziamo!

Titoli: Fai Risaltare il Tuo Contenuto

I titoli in HTML sono come i cartelloni pubblicitari: catturano l’attenzione e danno un’idea di ciò che è importante. HTML offre sei livelli di titoli, da <h1> (il capo supremo) a <h6> (il piccolo stagista).

Ecco come appaiono:

<h1>Titolo Principale (H1)</h1>
<h2>Sottotitolo (H2)</h2>
<h3>Sottotitolo Più Piccolo (H3)</h3>
<h4>Titolo Quattro (H4)</h4>
<h5>Titolo Cinque (H5)</h5>
<h6>Titolo Sei (H6)</h6>

Compito: Prova i Tuoi Titoli

Crea una pagina sul tuo hobby preferito o su un argomento che ti appassiona. Usa titoli diversi per organizzare i pensieri. Ricorda, <h1> è il titolo principale, mentre <h6> è quello più discreto.

Paragrafi: Il Momento di Scrivere!

Il tag paragrafo (<p>) ti permette di aggiungere blocchi di testo alla tua pagina. È il modo perfetto per condividere le tue idee geniali senza sovraccaricare i lettori.

Ecco un esempio:

<p>Questo è un paragrafo. Puoi scrivere tutto ciò che vuoi, e si adatterà automaticamente alla pagina. Perfetto per raccontare storie o spiegare concetti.</p>

Compito: Aggiungi Alcuni Paragrafi

Scrivi alcuni paragrafi su ciò che ti piace—film, libri o il tuo dolce preferito. È la tua pagina, divertiti!

Liste: Organizza il Tuo Contenuto Come un Professionista

Liste Non Ordinate (Punti Elenco)

Una lista non ordinata (<ul>) crea una lista con punti elenco. Perfetta per fare liste di cose da fare o per elencare cose senza un ordine specifico.

Esempio:

<ul>
    <li>Imparare HTML</li>
    <li>Diventare un maestro del web</li>
    <li>Conquistare Internet</li>
</ul>

Liste Ordinate (Passaggi Numerati)

Una lista ordinata (<ol>) crea una lista numerata, ideale per elencare passaggi che devono essere seguiti in ordine.

Esempio:

<ol>
    <li>Svegliarsi</li>
    <li>Preparare il caffè</li>
    <li>Conquistare la giornata</li>
</ol>

Compito: Crea le Tue Liste

Crea una lista non ordinata (i tuoi film, cibi o attività preferite) e una lista ordinata (come i passaggi per la tua routine mattutina). Sperimenta e divertiti!

Liste Nidificate: Un Livello Più Profondo

Puoi anche nidificare le liste all’interno di altre liste per una maggiore organizzazione.

Esempio:

<ul>
    <li>Cose da Imparare:
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Cose da Padroneggiare:
        <ol>
            <li>Version control</li>
            <li>Terminale</li>
        </ol>
    </li>
</ul>

Compito: Prova a Nidificare le Liste

Crea una lista nidificata con i tuoi obiettivi e mini-obiettivi. È come pianificare la vita, ma con più punti nerd!

Ospitare la Tua Pagina con Caddy

Ora che la tua pagina è piena di contenuti strutturati, ospitiamola di nuovo con Caddy. Segui questi passaggi per mostrare le tue abilità HTML:

Passo 1: Apri il Terminale

Naviga nella cartella in cui è salvato il tuo file HTML:

cd ~/my-website

Passo 2: Avvia Caddy

Esegui questo comando per ospitare il tuo sito localmente sulla porta 8080:

caddy file-server --listen :8080

Passo 3: Visualizza la Tua Pagina

Apri il browser e visita http://localhost:8080 per vedere la tua pagina web strutturata. Guarda quanto è tutto ordinato!

Riassunto:

In questa lezione hai imparato a:

  • Usare i titoli per organizzare il tuo contenuto.
  • Scrivere paragrafi per aggiungere testo.
  • Creare liste non ordinate (con punti) e ordinate (numerate).
  • Nidificare le liste per una struttura più complessa.

Hai anche ospitato la tua pagina aggiornata usando Caddy, quindi ora puoi mostrare il tuo sito web ben formattato! Nella prossima lezione, aggiungeremo un po’ di colore con immagini e link per rendere la tua pagina ancora più interattiva. Resta sintonizzato!

HTML  Principianti  Web Design  Caddy 

Vedi anche