Guida Completa a HTML: Le Basi Essenziali

Il Linguaggio HTML - Introduzione

Tutto iniziò negli anni '90 quando Tim Berners-Lee al CERN di Ginevra ebbe un'idea geniale: creare il World Wide Web. Prima esisteva solo internet per scambiare testi, ma la comunità scientifica voleva condividere anche immagini.

La soluzione fu brillante: usare l'ipertesto come struttura (documenti con collegamenti ad altri documenti) e internet come mezzo di distribuzione. Così nacque il web che usi oggi, dove puoi saltare da una pagina all'altra seguendo i link.

Nel web moderno parliamo di documenti ipermediali perché non contengono solo testo, ma anche immagini, video e suoni. Ogni sito web è un insieme di pagine che partono da una home page iniziale, come le radici di un albero.

💡 Ricorda: L'HTML non è programmazione! È come usare evidenziatori colorati per formattare un testo.

Come Funziona HTML

HTML significa HyperText Markup Language, ed è un linguaggio di "markup" (marcatura). Pensa ai tag HTML come a delle etichette che dicono al browser: "questo testo deve essere grande", "questa parola deve essere in grassetto".

Per scrivere HTML puoi usare due tipi di editor:

• Editor testuali come Blocco Note (dove scrivi tutto il codice a mano)
• Editor WYSIWYG come Dreamweaver (dove vedi subito il risultato finale)

Creare una pagina è semplicissimo: apri Blocco Note, scrivi il tuo codice HTML e salva il file con estensione .html. Cliccandoci sopra si aprirà nel browser!

Per vedere il codice di qualsiasi pagina web, usa: Ctrl+U su Chrome, F12 su Firefox, o vai nel menu Visualizza → Sorgente.

La Struttura dei Tag

I tag HTML sono racchiusi tra parentesi acute < > e funzionano sempre in coppia: uno di apertura e uno di chiusura con il simbolo /.

<FONT face="arial">Questo testo sarà in Arial</FONT>

I tag possono avere attributi che ne specificano le caratteristiche, come il colore o la dimensione. Ogni attributo ha un valore tra virgolette.

Ogni documento HTML ha una struttura fissa con due parti principali:

• HEAD: contiene informazioni invisibili come il titolo della scheda
• BODY: contiene tutto ciò che vedi nella pagina

Puoi aggiungere commenti con <!-- testo del commento --> per ricordarti cosa fa una certa parte di codice.

💡 Suggerimento: Indenta sempre il codice per renderlo più leggibile, proprio come faresti con un tema!

Struttura Base di una Pagina

Ogni pagina HTML inizia sempre con la stessa struttura base:

<!DOCTYPE html>
<html>
<head>
    <title>Titolo che appare nella scheda</title>
</head>
<body>
    Contenuto della pagina
</body>
</html>

Il <!DOCTYPE html> dice al browser che tipo di linguaggio stai usando. L'elemento <html> contiene tutto il resto, come una scatola gigante.

Nella head metti le informazioni invisibili: titolo, descrizioni per Google, collegamento a fogli di stile. Nel body va tutto ciò che vuoi far vedere: testo, immagini, video.

Questa struttura è come lo scheletro di una casa: senza di essa, niente funziona correttamente!

💡 Importante: Anche se il browser spesso "perdona" gli errori, seguire sempre questa struttura ti eviterà problemi futuri.

Formattazione del Testo e della Pagina

Il tag BODY gestisce l'aspetto generale della pagina. Puoi cambiare colori di sfondo (bgcolor), del testo (text), aggiungere immagini di sfondo (background) e impostare i margini.

Per i colori hai due opzioni: nomi inglesi come "red" o "blue", oppure codici esadecimali come "#FF0000" per il rosso. I codici ti danno milioni di colori diversi!

Il tag FONT controlla l'aspetto del testo:

• face per il tipo di carattere (Arial, Times, ecc.)
• size da 1 a 7 (7 è il più grande)
• color per il colore del testo

Per lo stile del testo usa: <B> per grassetto, <I> per corsivo, <U> per sottolineato.

Titoli, Paragrafi e Divisori

I titoli si creano con <H1> fino a <H6>, dove H1 è il più grande e H6 il più piccolo. Sono perfetti per organizzare i contenuti come in un libro.

Per i paragrafi usa <P> con l'attributo align per scegliere l'allineamento: left, center, right o justify. Il tag <CENTER> è un'alternativa rapida per centrare il testo.

I divisori sono utilissimi:

• <BR> manda il testo a capo (come premere Invio)
• <HR> inserisce una linea orizzontale per separare le sezioni

La linea <HR> può essere personalizzata: cambia spessore (size), colore (color), larghezza (width) e posizione (align).

💡 Trucco: Usa i titoli H1-H6 per creare una gerarchia logica, come negli indici dei libri. Google lo apprezza!