Cos’è l’HTML?

html

Se state leggendo questo articolo, state guardando una pagina scritta in HTML.
Come QUALUNQUE altra pagina su internet, tra l’altro.

HTML sta per “Hyper Text Markup Language“, e, contrariamente a quanto alcuni possano pensare e/o sostenere, NON è un linguaggio di programmazione.

Ma allora cos’è?

Cerchiamo di spiegarlo con un esempio:
Immaginiamo un foglio bianco, f-f-fatto?
Ok, ora vogliamo disegnarci sopra e abbiamo solo una matita nera.
Per dare profondità al nostro disegno adotteremo diverse tecniche, tipo scurire le zone in ombra, sfumare a gradazioni più chiare, riempire certe zone ecc.

Scomponiamo e codifichiamo in qualche maniera il disegno per diversificarne le varie zone, cercando di rendere comprensibile cosa vogliamo ottenere.

Ecco, l’HTML in pratica fa questo.
Ci permette di “codificare” quello che vogliamo ottenere utilizzando l’unico strumento a disposizione, che nel caso del disegno è la matita nera, mentre nel caso di una pagina web è il testo.

Vediamo come

Intanto creiamo un nuovo documento di testo, cambiamo l’estensione del file da .txt a .html e apriamolo con il blocco note, o un editor a vostra scelta.

Nota: su Windows personalmente consiglio Notepad++, su Ubuntu gedit, di Mac per fortuna (o purtroppo) non ne so nulla.

Per cominciare con qualcosa di veramente semplice, vediamo la struttura base che hanno tutte le pagine HTML:

Alcune cose da notare:

  • Le parole racchiuse tra < e > si chiamano tag
  • Tutti i tag si aprono e si chiudono (i tag di chiusura sono quelli con / davanti)
  • Il tag DOCTYPE è un caso particolare
  • Tutto il contenuto del documento deve stare dentro i tag html
  • Nei tag head si trova l’intestazione della pagina mentre nel tag body ci sta il contenuto vero e proprio
  • Inserire spazi all’inizio dei tag (indentazione) non è obbligatorio, ma è meglio farlo per mantenere ordine

Salviamo, e apriamo il file cliccandoci sopra due volte.
Vediamo che si aprirà una finestra del nostro browser completamente bianca e con il nome del file come titolo.

Cominciamo a cambiare il titolo, inserendo un nuovo tag all’interno dell’head

Salvando e riaprendo il file con il doppioclick ora vedremo di nuovo la pagina bianca, però ci sarà un titolo diverso.

Ora andiamo a riempire tutto quel bianco…
Provando a scrivere qualcosa dentro il tag body vedremo che otteniamo pari-pari il nostro testo, e ora comincia il bello :)

Intanto possiamo evidenziare una o più parole utilizzando il grassetto con il tag <strong> aperto e chiuso, o magari scrivere qualcosa in corsivo con il tag <em>, o perchè no, anche una combinazione di entrambi mettendoli uno dentro l’altro!

Vi siete persi?
Ecco qui

Si possono mettere i tag strong e em uno dentro l’altro, l’importante è richiuderli nello stesso ordine!

Per ora ci fermiamo qui, la prossima volta vedremo come posizionare i nostri elementi all’interno di una pagina web utilizzando le tabelle :)