Come Creare una Pagina Web Statica (HTML Base)

Se un'invenzione ha cambiato il mondo nella nostra vita, è Internet. Sempre più persone vogliono una presenza web oltre i social network: uno spazio web proprio. I grandi siti usano gergo intimidatorio (Flash, CSS, Perl, JavaScript), ma non temere. Quattro lettere bastano per una presenza web immediata: HTML (HyperText Markup Language). Un linguaggio a tag per creare pagine statiche. Più tag conosci, più puoi fare.

Passo 1: Scheletro Base HTML5

Copia questo codice in un editor testo semplice (Blocco note / Notepad++, VS Code, Sublime Text):

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Mia Prima Pagina Web</title>
</head>
<body>
    <!-- Contenuto visibile qui -->
</body>
</html>

Salva come index.html (nome default pagina principale). Apri nel browser: pagina bianca (scheletro vuoto).

Significato Tag Essenziali

• <!DOCTYPE html>: Dichiarazione HTML5 (browser: renderizza in modalità standard).
• <html>: Elemento radice. lang="it" = lingua italiana.
• <head>: Metadati (non visibili): titolo, charset, viewport, CSS, JS, SEO, favicon.
• <meta charset="UTF-8">: Codifica caratteri (supporta accenti, emoji, lingue mondiali).
• <meta name="viewport" ...>: Fondamentale per responsive design (mobile).
• <title>: Titolo scheda browser, risultato ricerca, segnalibro.
• <body>: Contenuto visibile della pagina.

Passo 2: Tag di Formattazione Testo (Inline)

HTML ha tag di apertura <tag> e chiusura </tag> (con /). Il contenuto tra essi riceve l'effetto.

Esempi:

• <strong>Grassetto</strong> (semantico: importanza)
• <em>Corsivo</em> (semantico: enfasi)
• <mark>Evidenziato</mark>
• <del>Barrato</del>
• <ins>Inserito</ins>
• <code>Codice inline</code>
• <kbd>Ctrl+S</kbd> (tasto tastiera)
• <sup>Apice</sup>, <sub>Pedice</sub>
• <small>Testo piccolo</small>

Nesting (annidamento): <strong><em>Grassetto e corsivo</em>/</strong>. Tag chiusi in ordine inverso (LIFO).

Passo 3: Struttura Contenuto (Block Elements)

• <h1> - <h6>: Titoli (gerarchia: h1 = principale, uno per pagina).
• <p>: Paragrafo.
• <br>: Interruzione riga (void element, nessun tag chiusura).
• <hr>: Separatore tematico (linea orizzontale).
• <div>: Contenitore generico blocco (layout).
• <span>: Contenitore generico inline (stile testo).
• <ul> + <li>: Lista non ordinata (bullet).
• <ol> + <li>: Lista ordinata (numerata).
• <blockquote>: Citazione blocco.
• <pre> + <code>: Codice preformattato.

Passo 4: Immagini

<img src="percorso/immagine.jpg" alt="Descrizione accessibilità" width="400" height="300">

• src: URL/percorso immagine (relativo o assoluto).
• alt: Obbligatorio per accessibilità (screen reader) e SEO. Descrive immagine.
• width/height: Riserva spazio layout (evita CLS - Cumulative Layout Shift).
• Formati moderni: WebP (miglior compressione), AVIF. Fallback: <picture>.
• Centrare: CSS display: block; margin: 0 auto; (non tag <center> deprecato).

Passo 5: Link (Anchor)

<a href="https://www.esempio.com" target="_blank" rel="noopener noreferrer">Clicca Qui</a>

• href: Destinazione (URL assoluto, relativo, mailto:email@es.com, tel:+39..., #id-elemento anchor interno).
• target="_blank": Apri in nuova scheda. Sempre aggiungi rel="noopener noreferrer" (sicurezza/performance).
• Link su immagine: <a href="..."><img src="..." alt="..."></a>.

Passo 6: CSS Base (Stile) - Interno per Semplicità

Dentro <head>:

<style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 800px; margin: 2rem auto; padding: 0 1rem; color: #333; }
    h1 { color: #1a1a2e; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.5rem; }
    img { max-width: 100%; height: auto; border-radius: 8px; }
    a { color: #0066cc; } a:hover { color: #004499; }
    code { background: #f4f4f4; padding: 0.2em 0.4em; border-radius: 4px; font-family: monospace; }
    pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 8px; overflow-x: auto; }
</style>

Passo 7: Pubblica Online

• Gratuito static hosting: GitHub Pages, Netlify, Vercel, Cloudflare Pages, Firebase Hosting, Surge.sh. Collega repo Git > deploy automatico.
• Hosting condiviso economico: SiteGround, Aruba, Register.it, Netsons, VHosting (FTP/SFTP upload cartella con index.html).
• Dominio personalizzato: Registra (Namecheap, Cloudflare, Porkbun, GoDaddy) > configura DNS (A record / CNAME) verso hosting.

💡 Consigli Moderni

• Impara CSS Flexbox / Grid per layout (non tabelle/float).
• Usa semantic HTML: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> per accessibilità/SEO.
• Valida: W3C Validator (validator.w3.org).
• Performance: comprimi immagini (TinyPNG, Squoosh), minifica CSS/JS, abilita compressione gzip/brotli server, cache headers.
• Accessibilità (WCAG): contrasto colori, alt text, heading hierarchy, focus visible, ARIA se serve.

Nota: L'articolo originale usava HTML 4 / tag deprecati (<font>, <center>, attributi color, size). La guida sopra usa HTML5 semantico + CSS, standard attuale.