Guida di HTML (base)

Introduzione

Il linguaggio HTML (Hyper-Text Markup Language) è il linguaggio di base con cui sono scritte le pagine web, e serve a formattare e, soprattutto, dare una struttura al testo contenuto nella pagina.

Prendi ad esempio questa pagina stessa: è evidente che il testo che stai leggendo non è tutto uguale! L'intero testo, anzitutto, è diviso in paragrafi con titoli, alcune parole poi sono scritte in corsivo o grassetto, altre sono collegamenti ipertestuali ad altre pagine, un po' come avviene quando si scrive qualcosa con Word o OpenOffice; l'intero articolo è addirittura racchiuso in una struttura complessa (titolo, menù, ecc...).

Tutto questo è stato descritto utilizzando il codice HTML, e ciò si può facilmente verificare utilizzando il menu Visualizza > Sorgente pagina di Firefox (o equivalente per gli altri browsers):

Il codice sorgente di questa pagina!

Il codice contiene lo stesso testo contenuto nella pagina, prima che questo sia interpretato dal browser (Firefox), e trasformato in ciò che in questo momento hai sotto gli occhi.

Lo scopo di questa guida è fornire tutti gli strumenti necessari per costruire delle semplici pagine HTML, partendo da zero ed utilizzando come strumenti il solo editor di testi. Si vedrà infine come scrivere e pubblicare un piccolo sito internet.

Storia

Internet non è sempre stata così come la conosciamo noi. Fino ai primi anni '90 la comunicazione tra gli utenti avveniva quasi esclusivamente attraverso lo scambio di messaggi testuali sulle BBS ed i newsgroup di Usenet. Il modello era una specie di grande casella e-mail collettiva: uno inviava il messaggio al newsgroup, e tutti gli altri iscritti lo ricevevano (Usenet è ancora attiva, e si può consultare, ad esempio, attraverso Libero).

Tra il 1991 ed il 1992, iniziarono però a diffondersi i primi Navigators: ViolaWWW e Mosaic, gli antenati dei nostri Mozilla, Internet Explorer, Chrome e compagni.

La particolarità di questi programmi stava (e sta tuttora) nella visualizzazione di pagine ricche e piacevoli da vedere, con testo formattato (grassetto, corsivo, titoli, paragrafi, ecc...), immagini, sfondi e, soprattutto, collegamenti ipertestuali, le parole magiche che permettono di "saltare" da una pagina all'altra con un semplice clic del mouse. Tutte cose che ormai sono date per scontate, quando si naviga nel World Wide Web.

L'HTML fu creato proprio per questo scopo: trasformare un semplice file di testo in un documento ricco di formattazione, leggibile dai programmi di navigazione.

Il concetto di tag

Per capire come funziona l'HTML (nel prossimo capitolo si vedrà come creare passo per passo la prima pagina web) può essere utile ricorrere a questo esempio: si immagini di dover dettare (mantenendo la formattazione!) ad un amico il testo seguente:

Questo è un testo formattato!

È necessario usare qualche strategia per trasmettere l'informazione che la parola formattato è scritta in grassetto. Trattandosi di dettatura, la cosa più ovvia sarà dettare qualcosa di questo tipo:

Questo è un testo <inizio grassetto>formattato<fine grassetto>!

HTML funziona esattamente in questo modo: le parole da evidenziare sono racchiuse in speciali marcatori detti tag.

I tag sono i "comandi" dell'HTML; sono formati da parole, racchiuse tra parentesi concave (come nell'esempio qua sopra), che servono a marcare tutti gli elementi del linguaggio HTML. Ad esempio, il tag HTML per il grassetto è il tag <b>:

Questo è un testo <b>formattato</b>!

Si osservi che l'inizio del grassetto si ottiene con l'apertura del tag (<b>), mentre la chiusura avviene con </b>.

Fatte le dovute premesse, si può ora iniziare a "toccare con mano" il codice: nel prossimo articolo vedremo come, partendo da zero, si crea una pagina web.

In breve...

In questo capitolo abbiamo visto che:

  • Le pagine web che ogni giorno visitiamo navigando su Internet sono scritte in linguaggio HTML
  • HTML (Hyper-Text Markup Language) permette di trasformare un semplice documento di testo in un documento ricco di struttura, formattazione, collegamenti ipertestuali e contenuti multimediali (immagini, audio e video).
  • I programmi che leggono e visualizzano l'HTML sono i normali browser che usiamo per navigare su Internet: Mozilla, Internet Explorer, Chrome, Opera, Safari ecc...
  • I documenti HTML sono normali files di testo, in cui, però, le parti di testo da formattare sono racchiuse entro speciali marcatori detti tag.
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag