Pagine Web, HTML e CSS - Guida Interattiva Completa

🌍 1. Cos'è una pagina web

+

Una pagina web è un documento digitale visualizzabile attraverso un browser (come Chrome, Firefox, Edge o Safari). Ogni pagina web è scritta principalmente in HTML, il linguaggio che il browser interpreta per mostrare testi, immagini, link e contenuti multimediali.

Come funziona il Web

Quando digiti un indirizzo (URL) nella barra del browser, avviene questo processo:

🔄 Il percorso di una pagina web

1. Il browser invia una richiesta al server tramite il protocollo HTTP (o HTTPS per connessioni sicure).

2. Il server web cerca il file richiesto e lo invia al browser.

3. Il browser interpreta il codice HTML, applica gli stili CSS e mostra la pagina.

Le tre tecnologie fondamentali

Tecnologia	Funzione	Analogia
HTML	Struttura e contenuto della pagina	Lo scheletro di un edificio
CSS	Aspetto grafico e stile	L'arredamento e i colori
JavaScript	Interattività e comportamento	L'impianto elettrico

💡 Suggerimento

Puoi vedere il codice HTML di qualsiasi sito web! Basta fare clic destro sulla pagina e scegliere "Visualizza sorgente pagina" oppure premere Ctrl + U.

📝 2. Il linguaggio HTML

+

HTML sta per HyperText Markup Language, ovvero Linguaggio di Marcatura per Ipertesti. Non è un linguaggio di programmazione, ma un linguaggio di marcatura: serve a descrivere la struttura e il significato del contenuto di una pagina web.

Cosa significa "marcatura"?

Proprio come un editor di testo usa il grassetto o il corsivo per evidenziare parole, HTML usa dei marcatori chiamati tag per dire al browser come interpretare ogni parte del contenuto.

Come è fatto un tag HTML

Un tag è una parola chiave racchiusa tra parentesi angolari < >. La maggior parte dei tag funziona in coppia: un tag di apertura e un tag di chiusura.

                SINTASSI
<nometag>contenuto</nometag>

<!-- Esempio concreto -->
<p>Questo è un paragrafo di testo.</p>
<h1>Questo è un titolo principale</h1>
            

⚠️ Attenzione

Il tag di chiusura ha sempre la barra / prima del nome: </p>. Dimenticarla è uno degli errori più comuni!

Tag vuoti (auto-chiudenti)

Alcuni tag non hanno contenuto e non necessitano di chiusura. Si chiamano tag vuoti o self-closing.

                ESEMPI
<br>          <!-- a capo -->
<hr>          <!-- linea orizzontale -->
<img src="foto.jpg">  <!-- immagine -->
            

Breve storia dell'HTML

Versione	Anno	Novità principali
HTML 1.0	1993	Prima versione, solo testo e link
HTML 2.0	1995	Form e tabelle
HTML 4.01	1999	Fogli di stile, accessibilità
XHTML	2000	Sintassi più rigida (basata su XML)
HTML5	2014	Audio, video, canvas, tag semantici

🏗️ 3. Struttura generale di una pagina HTML

+

Ogni pagina HTML ha una struttura fissa e ben definita. Conoscerla è fondamentale per scrivere codice corretto.

                STRUTTURA BASE
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titolo della pagina</title>
</head>
<body>
    <!-- Qui va tutto il contenuto visibile -->
    <h1>Benvenuti!</h1>
    <p>Questa è la mia prima pagina web.</p>
</body>
</html>
            

Spieghiamo ogni elemento

<!DOCTYPE html>

Dichiarazione del tipo di documento. Dice al browser che il file usa HTML5. Va sempre nella prima riga.

Elemento radice. Contiene tutto il codice della pagina. L'attributo lang="it" indica la lingua italiana.

<head>

Intestazione del documento. Contiene informazioni non visibili nella pagina: titolo, codifica caratteri, link ai fogli di stile, metadati per i motori di ricerca.

Imposta la codifica dei caratteri a UTF-8, che supporta lettere accentate e simboli di tutte le lingue.

<title>

Definisce il titolo della pagina che compare nella scheda del browser e nei risultati dei motori di ricerca.

<body>

Corpo della pagina. Tutto ciò che il visitatore vede (testi, immagini, video, link) va inserito qui dentro.

💡 Ricorda con un'analogia

Pensa alla pagina HTML come a una busta da lettera: l'<head> è l'esterno della busta (destinatario, mittente = informazioni per il browser), il <body> è il foglio dentro (il contenuto che si legge).

🏷️ 4. I tag principali di HTML

+

HTML dispone di molti tag. Ecco i più usati, divisi per categoria.

Tag di struttura e semantici (HTML5)

Tag	Significato	Uso
`<header>`	Intestazione	Parte superiore della pagina o sezione
`<nav>`	Navigazione	Menu di navigazione con link
`<main>`	Contenuto principale	Contenuto centrale, unico della pagina
`<section>`	Sezione	Raggruppamento tematico di contenuto
`<article>`	Articolo	Contenuto autonomo (blog post, notizia)
`<aside>`	Contenuto laterale	Barra laterale, info supplementari
`<footer>`	Piè di pagina	Parte inferiore con info di chiusura
`<div>`	Divisione generica	Contenitore generico (blocco)
`<span>`	Contenitore inline	Per stilizzare porzioni di testo

Tag per titoli

HTML prevede 6 livelli di titolo, da <h1> (il più importante) a <h6> (il meno importante). Vanno usati in ordine gerarchico, come i capitoli e sottocapitoli di un libro.

                HTML
<h1>Titolo principale (1 solo per pagina)</h1>
<h2>Sottotitolo di sezione</h2>
<h3>Sotto-sottotitolo</h3>
<h4>Livello 4</h4>
<h5>Livello 5</h5>
<h6>Livello 6 (il più piccolo)</h6>
            

⚠️ Errore comune

Non scegliere i tag titolo in base alla dimensione del testo! Usali per la gerarchia logica. Per cambiare dimensione, si usa il CSS.

Tag per il testo

Tag	Funzione	Esempio d'uso
`<p>`	Paragrafo	Blocco di testo
`<br>`	A capo	Interruzione di riga
`<hr>`	Linea orizzontale	Separatore visivo
`<strong>`	Grassetto (importanza)	Testo con enfasi forte
`<em>`	Corsivo (enfasi)	Testo con enfasi leggera
`<mark>`	Evidenziato	Testo evidenziato in giallo
`<blockquote>`	Citazione	Blocco di citazione

Tag per liste

                HTML
<!-- Lista non ordinata (pallini) -->
<ul>
    <li>Primo elemento</li>
    <li>Secondo elemento</li>
</ul>

<!-- Lista ordinata (numeri) -->
<ol>
    <li>Passo uno</li>
    <li>Passo due</li>
</ol>
            

Tag per tabelle

                HTML
<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Età</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Marco</td>
            <td>16</td>
        </tr>
    </tbody>
</table>
            

<table> crea la tabella, <tr> una riga, <th> una cella di intestazione e <td> una cella di dati.

⚙️ 5. Gli attributi dei tag

+

Gli attributi sono informazioni aggiuntive inserite nel tag di apertura con la forma nome="valore".

                SINTASSI
<nometag attributo1="valore1" attributo2="valore2">contenuto</nometag>
            

Attributi globali (usabili su qualsiasi tag)

Attributo	Significato	Esempio
`id`	Identificativo unico	`<div id="menu">`
`class`	Classe (per CSS)	`<p class="intro">`
`style`	Stile inline	`<p style="color: red;">`
`title`	Tooltip al passaggio mouse	`<abbr title="HTML">`
`lang`	Lingua del contenuto	`<html lang="it">`

Attributi specifici comuni

Tag	Attributo	Funzione
`<a>`	`href`	URL di destinazione del link
`<a>`	`target`	`"_blank"` = apri in nuova scheda
`<img>`	`src`	Percorso del file immagine
`<img>`	`alt`	Testo alternativo (accessibilità)
`<img>`	`width / height`	Larghezza e altezza
`<link>`	`rel, href`	Collegamento a foglio di stile

📌 Differenza tra id e class

id: è unico nella pagina, come un codice fiscale. Si usa per identificare un solo elemento.

class: può essere ripetuto su più elementi, come un cognome. Si usa per applicare lo stesso stile a più elementi.

✍️ 6. Formattazione del testo

+

HTML offre diversi tag per formattare il testo, dando enfasi e struttura al contenuto.

Tag di formattazione semantica

Questi tag comunicano il significato del testo al browser e ai motori di ricerca.

                HTML
<strong>Testo importante</strong>     <!-- grassetto semantico -->
<em>Testo enfatizzato</em>            <!-- corsivo semantico -->
<mark>Testo evidenziato</mark>          <!-- sfondo giallo -->
<small>Testo piccolo</small>              <!-- testo ridotto -->
<del>Testo cancellato</del>              <!-- barrato -->
<ins>Testo inserito</ins>                <!-- sottolineato -->
<sub>pedice</sub>                       <!-- H₂O -->
<sup>apice</sup>                        <!-- x² -->
            

Risultato visivo

ANTEPRIMA

Questo è testo importante, questo è testo enfatizzato, questo è testo evidenziato, questo è testo piccolo, questo è ~~testo cancellato~~, questo è testo inserito.

Formula dell'acqua: H₂O | Potenza: x²

⚠️ <b> e <i> vs <strong> e <em>

<b> e <i> rendono il testo grassetto/corsivo ma senza valore semantico. Preferisci <strong> e <em> perché comunicano significato al browser e alle tecnologie assistive.

Entità HTML

Per inserire caratteri speciali che HTML interpreterebbe come codice, si usano le entità.

Entità	Risultato	Nome
`<`	<	Minore
`>`	>	Maggiore
`&`	&	E commerciale
` `	(spazio)	Spazio non interrompibile
`©`	©	Copyright

🔗 7. Collegamenti ipertestuali

+

I collegamenti ipertestuali (link) sono l'essenza del Web: permettono di collegare tra loro pagine e risorse. Si creano con il tag <a> (da "anchor", àncora).

Sintassi di base

                HTML
<a href="https://www.google.it">Vai su Google</a>
            

L'attributo href (Hypertext REFerence) indica la destinazione del link.

Tipi di link

1. Link esterno (verso un altro sito)

                HTML
<a href="https://www.wikipedia.org" target="_blank">Visita Wikipedia</a>
<!-- target="_blank" apre il link in una nuova scheda -->
            

2. Link interno (verso un'altra pagina del sito)

                HTML
<a href="contatti.html">Pagina Contatti</a>
<a href="pagine/info.html">Informazioni</a>
            

3. Link àncora (verso una sezione della stessa pagina)

                HTML
<!-- Il link -->
<a href="#capitolo2">Vai al Capitolo 2</a>

<!-- La destinazione (più in basso nella pagina) -->
<h2 id="capitolo2">Capitolo 2</h2>
            

4. Link email e telefono

                HTML
<a href="mailto:info@esempio.it">Scrivici una email</a>
<a href="tel:+390123456789">Chiamaci</a>
            

📌 Percorsi relativi vs assoluti

Assoluto: URL completo → https://www.sito.it/pagina.html (per link esterni)

Relativo: percorso dalla posizione corrente → pagina.html o img/foto.jpg (per file dello stesso sito)

🖼️ 8. Le immagini

+

Le immagini si inseriscono con il tag <img>, che è un tag vuoto (non ha chiusura).

                HTML
<img src="foto.jpg" alt="Descrizione dell'immagine" width="400">
            

Attributi fondamentali

Attributo	Obbligatorio?	Funzione
`src`	✅ Sì	Percorso o URL del file immagine
`alt`	✅ Sì	Testo alternativo (accessibilità, SEO)
`width`	No	Larghezza in pixel
`height`	No	Altezza in pixel
`title`	No	Tooltip al passaggio del mouse

❗ L'attributo alt è fondamentale

Il testo alt non è opzionale! Serve a: descrivere l'immagine per ipovedenti che usano lettori di schermo; mostrare un testo se l'immagine non si carica; aiutare i motori di ricerca.

Formati immagine per il web

Formato	Estensione	Uso ideale
JPEG	.jpg, .jpeg	Fotografie, immagini con molti colori
PNG	.png	Grafiche con trasparenza, loghi
GIF	.gif	Animazioni semplici, icone
SVG	.svg	Grafiche vettoriali scalabili
WebP	.webp	Formato moderno, ottimo rapporto qualità/peso

Immagine come link

                HTML
<a href="https://www.sito.it">
    <img src="logo.png" alt="Logo del sito">
</a>
            

Il tag <figure> con didascalia

                HTML5
<figure>
    <img src="tramonto.jpg" alt="Tramonto sul mare">
    <figcaption>Un tramonto sul mare di Liguria.</figcaption>
</figure>
            

🎨 9. I fogli di stile CSS

+

CSS sta per Cascading Style Sheets (Fogli di Stile a Cascata). È il linguaggio che controlla l'aspetto visivo delle pagine web: colori, font, dimensioni, spaziature, layout.

Perché separare HTML e CSS?

💡 Il principio fondamentale

HTML = contenuto e struttura → "cosa c'è nella pagina"

CSS = presentazione e stile → "come appare la pagina"

Separarli rende il codice più pulito e manutenibile. Puoi cambiare l'aspetto di un intero sito modificando un solo file CSS!

Tre modi per inserire CSS

1. CSS inline (nell'attributo style) — sconsigliato

                INLINE
<p style="color: blue; font-size: 18px;">Testo blu</p>
            

2. CSS interno (nel tag <style>)

                INTERNO
<head>
    <style>
        p { color: blue; font-size: 18px; }
    </style>
</head>
            

3. CSS esterno (file .css separato) ✅ Metodo consigliato

                HTML
<head>
    <link rel="stylesheet" href="stile.css">
</head>
            

                stile.css
p { color: blue; font-size: 18px; }
            

✅ Un unico file gestisce lo stile di tutte le pagine del sito.

Cosa significa "a cascata"?

Se più regole CSS si applicano allo stesso elemento, vince quella con maggiore specificità o, a parità, l'ultima in ordine.

📌 Priorità CSS (dalla più bassa alla più alta)

1. Stili del browser → 2. CSS esterno → 3. CSS interno → 4. CSS inline → 5. !important

🎯 10. CSS: Selettori e proprietà principali

+

Una regola CSS ha un selettore (a chi si applica) e dichiarazioni (proprietà + valore).

                SINTASSI CSS
selettore {
    proprietà: valore;
}
            

I selettori principali

Selettore	Sintassi	Seleziona	Esempio
Elemento	`p`	Tutti i <p>	`p { color: red; }`
Classe	`.nome`	Elementi con class="nome"	`.intro { font-size: 20px; }`
ID	`#nome`	Elemento con id="nome"	`#menu { background: blue; }`
Universale	`*`	Tutti gli elementi	`* { margin: 0; }`
Discendente	`div p`	<p> dentro <div>	`nav a { color: white; }`
Raggruppato	`h1, h2`	h1 e h2 insieme	`h1, h2 { font-family: Arial; }`

Proprietà per testo e font

                CSS
p {
    color: #2c3e50;               /* colore del testo */
    font-family: Arial, sans-serif;  /* tipo di carattere */
    font-size: 16px;                /* dimensione */
    font-weight: bold;              /* grassetto */
    font-style: italic;             /* corsivo */
    text-align: center;             /* allineamento */
    text-decoration: underline;      /* sottolineatura */
    line-height: 1.6;               /* interlinea */
}
            

Proprietà per sfondo

                CSS
body {
    background-color: #f5f5f5;
    background-image: url("sfondo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
            

Bordi e angoli arrotondati

                CSS
.box {
    border: 2px solid #4f5dff;   /* spessore, stile, colore */
    border-radius: 10px;         /* angoli arrotondati */
}
            

Come si scrivono i colori in CSS

Metodo	Esempio	Risultato
Nome	`color: red;`	Rosso
Esadecimale	`color: #ff0000;`	Rosso
RGB	`color: rgb(255, 0, 0);`	Rosso
RGBA	`color: rgba(255, 0, 0, 0.5);`	Rosso 50% trasparente

📦 11. Il box model CSS

+

Ogni elemento HTML è trattato dal browser come un rettangolo. Il box model descrive le quattro aree che lo compongono.

MARGIN (margine esterno)
BORDER (bordo)
PADDING (spaziatura interna)
CONTENT (contenuto)

Area	Proprietà CSS	Funzione
Content	`width`, `height`	Area del contenuto
Padding	`padding`	Spazio tra contenuto e bordo
Border	`border`	Il bordo visibile
Margin	`margin`	Spazio tra l'elemento e gli altri

                CSS
.scheda {
    width: 300px;
    padding: 20px;             /* tutti i lati */
    padding: 10px 20px;         /* verticale orizzontale */
    padding: 10px 20px 15px 5px; /* top right bottom left */
    border: 2px solid #333;
    margin: 20px auto;          /* auto = centra */
}
            

💡 box-sizing: border-box

Per default, width si applica solo al contenuto. Con box-sizing: border-box; la larghezza include padding e bordo. È buona pratica usarlo sempre:

                CSS
* { box-sizing: border-box; }
            

Display: block vs inline

Tipo	Comportamento	Esempi
block	Occupa tutta la larghezza, va a capo	`<div>`, `<p>`, `<h1>`
inline	Solo lo spazio necessario, resta nella riga	`<span>`, `<a>`, `<strong>`
inline-block	Inline ma accetta width/height	Impostato via CSS

💻 12. Editor live: prova tu!

+

Usa questo editor per sperimentare con il codice HTML e CSS. Scrivi, premi "Esegui" e guarda il risultato!

📝 Editor HTML + CSS

ANTEPRIMA RISULTATO:

💡 Esercizi suggeriti

1. Cambia il colore del titolo da blu a verde (#2dc26b).

2. Aggiungi un secondo paragrafo con un colore di sfondo diverso.

3. Crea un link con <a href="...">.

4. Crea una lista non ordinata con 3 elementi.

🃏 13. Flashcard di ripasso

+

Clicca su ogni card per scoprire la risposta. Ripeti finché non le sai tutte!

🃏 14. Flashcard complete (72 domande)

+

Un mega-set di 72 flashcard per un ripasso approfondito di tutti gli argomenti. Clicca per girare, mescola per ripetere!