Gli articoli introduttivi sono sempre i più complicati. Devi trovare il modo universalmente più adatto per spiegare concetti, più o meno semplici, ad un pubblico vario, mantenendo alta la qualità del risultato finale.

Dopo questa prima lezione, saprai come è fatta una pagina HTML di base, così da poter seguire le guide successive.

Partiamo dal principio, cosa significa HTML?

Partiamo dalle basi, HTML sta per HyperText Markup Language (o “Linguaggio di contrassegno per gli Ipertesti”) e non è un linguaggio di programmazione, bensì un linguaggio di markup che ti aiuta a disporre gli elementi all’interno di una pagina web.

HTML è un linguaggio di markup che ti aiuta a disporre gli elementi all’interno di una pagina web.

Partiamo dal file più semplice di una pagina web.
Alla base di tutto c’è una struttura, detta ad albero, che definisce gli elementi essenziali di una pagina web:


<html>
   <head>
      ...
   </head>
   <body>
      ...
   </body>
</html>

Analizziamo questo semplice codice. Gli elementi contenuti all’interno delle parentesi angolari si chiamano tag e quelli usati in questo esempio sono i principali.

  • HTML rappresenta il nodo principale della pagina web, vedilo come il contenitore che racchiude tutto il resto
  • HEAD contiene solitamente il “dietro le quinte” del tuo sito web, ovvero i fogli di stile (utili per programmare il design del tuo sito) e gli script Javascript (utili per definire la funzionalità e le interazioni del tuo sito)
  • BODY identifica il contenuto visibile del tuo sito. E’ qui che andranno i menu di navigazione, il corpo della tua pagina e il footer.

Il file generato, per essere “riconosciuto” come pagina web va salvato in formato .html. Quando si crea un sito web solitamente si parte dall’indice (l’homepage o la pagina principale del sito web), in questi casi salveremo il file come index.html.

Lo stack HTML + CSS + Javascript

Oggi il semplice HTML da solo non ti consente di creare dei siti web completi (e graficamente validi). Per questo motivo è utile conoscere l’insieme di tecnologie di base necessarie a realizzare un sito web oggi utilizzate, il cosiddetto “stack“.

Possiamo riassumere lo stack come segue:

  • HTML
    ti permette di specificare la disposizione degli elementi in pagina, come header e footer, i titoli (h1 fino a h5), i paragrafi (p), i collegamenti (link) ad altri siti web (o ad altre pagine del suo sito web), gli input per registrare i dati compilati dai tuoi utenti (per esempio per una registrazione) e molto altro ancora.
  • CSS
    definiti anche “fogli di stile”. Capire il CSS è semplicissimo, si tratta di una serie di regole che ti permettono di definire gli stili (l’aspetto) degli elementi disposti in pagina grazie ai tag HTML. Esempi di stile? La dimensione dei testi o dei riquadri in pagina, i colori di sfondo o del testo, le animazioni di movimenti fra i blocchi (o ad esempio di apertura di un menu). Con poche semplici regole, puoi manipolare tutto. Questo è molto altro ancora verrà trattato nella relativa sezione Tutorial CSS.
  • JavaScript
    è il primo linguaggio di programmazione che tratteremo. Presenta una sintassi molto simile a C e consente di manipolare TUTTO ciò che è presente in pagina. Immagina di voler gestire il movimento di un quadrato quando ci si passa sopra col mouse. Ecco, con poche righe di codice Javascript puoi farlo. Possiamo dire che mentre il CSS aiuta a definire lo stile degli elementi HTML (i tag), il Javascript consente di manipolarne le caratteristiche in tempo reale e gestire l’interazione dell’utente con lo stesso (eventi).
    Questo è molto altro ancora verrà trattato nella relativa sezione Tutorial Javascript.

All’interno di questo blog troverai molti tutorial su usi comuni in HTML. Mentre nei rispettivi tutorial su CSS e Javascript spiegheremo in dettaglio aspetti che riguarda quei mondi, in questa sezione ci focalizzeremo su HTML e su quello che è importante sapere prima di passare oltre. Tuttavia, faremo spesso riferimento a queste altre tecnologie.