HTML: struttura di una pagina web
Fin qui abbiamo comunicato online con testi, email, social network, sempre usando strumenti gia' pronti costruiti da qualcun altro. Per il tuo indirizzo di studio, iniziamo ora a vedere come è fatta "sotto al cofano" una pagina web: il linguaggio HTML, il primo passo per costruire pagine web invece di limitarsi a visitarle.
HTML, che sta per HyperText Markup Language, è il linguaggio usato per definire la struttura e il contenuto di una pagina web, ed e' la base su cui e' costruita ogni singola pagina che visiti nel tuo browser. Non è un linguaggio di programmazione in senso stretto, perche' non contiene istruzioni logiche o calcoli: è un linguaggio di markup, cioè di "marcatura" del testo, che indica al browser come interpretare e mostrare ogni parte del contenuto.
L'elemento base di HTML è il tag: una parola chiave racchiusa tra parentesi angolari, ad esempio <p> per indicare un paragrafo. La maggior parte dei tag va a coppie: un tag di apertura come <p> e uno di chiusura come </p>, con il contenuto vero e proprio scritto in mezzo. Dimenticare la chiusura di un tag e' uno degli errori piu' comuni per chi inizia a scrivere HTML.
Tag a coppia o auto-chiudenti?
La maggior parte dei tag va a coppie, con apertura e chiusura: <p>testo</p>. Alcuni tag, invece, sono auto-chiudenti, perché non contengono altro contenuto al loro interno: ad esempio <br> (va a capo) o <img> (inserisce un'immagine) non hanno bisogno di un tag di chiusura separato.
Ogni documento HTML segue una struttura fissa, sempre uguale. In cima si scrive <!DOCTYPE html>, che dichiara il tipo di documento; segue il tag <html>, che racchiude tutta la pagina. Al suo interno, uno dentro l'altro, trovano posto due sezioni principali: <head>, che contiene informazioni sulla pagina non visibili direttamente (come il tag <title>, il titolo mostrato nella scheda del browser), e <body>, che contiene invece tutto il contenuto visibile della pagina, cioe' quello che l'utente vede davvero a schermo.
I tag possono contenerne altri al loro interno, formando una struttura ad albero, un po' come le cartelle che possono contenere altre cartelle, viste in un argomento precedente: il tag <body> contiene, ad esempio, più tag <p>, che a loro volta potrebbero contenere altri tag ancora, come un <a> per un link dentro un paragrafo.
Oltre al contenuto racchiuso tra apertura e chiusura, un tag puo' portare con se' anche informazioni aggiuntive, utili al browser o ad altri strumenti.
Gli attributi di un tag
Un tag puo' contenere anche degli attributi: informazioni aggiuntive scritte dentro il tag di apertura, nella forma nome="valore". Ad esempio, il tag <html lang="it"> usa l'attributo lang per dichiarare che la lingua della pagina e' l'italiano. Gli attributi non si vedono direttamente sulla pagina, ma danno istruzioni importanti al browser (o ai motori di ricerca, o a chi usa uno screen reader).
Scrivere HTML a mano espone facilmente a piccoli errori di distrazione, come dimenticare una chiusura o sbagliare l'ordine di apertura e chiusura dei tag annidati.
Controllare il proprio codice con un validatore
Quando si scrive HTML a mano, e' facile dimenticare un tag di chiusura o sbagliare l'annidamento. Esistono strumenti online gratuiti, chiamati validatori, come quello ufficiale del W3C (l'organizzazione che definisce gli standard del web), che analizzano il codice HTML e segnalano gli errori: un'abitudine utile fin dalle prime pagine scritte, per prendere il vizio di scrivere codice corretto.
La prima pagina web della storia è ancora online
Tim Berners-Lee creò la primissima pagina web nel 1991, mentre lavorava al CERN di Ginevra. Sorprendentemente, quella pagina esiste ancora oggi ed è visitabile da chiunque all'indirizzo info.cern.ch: un vero e proprio reperto archeologico del web, scritto con un HTML molto più semplice di quello che vedremo nei prossimi argomenti.
Il browser che rese popolare il web
Nei primi anni del web, tra il 1990 e il 1993, solo pochi appassionati usavano internet, e le pagine erano quasi solo testo. Tutto cambio' nel 1993 con Mosaic, il primo browser capace di mostrare testo e immagini insieme nella stessa pagina in modo semplice e gradevole: fu talmente rivoluzionario da far esplodere la popolarita' del web tra il grande pubblico in pochissimi anni. Uno dei suoi creatori, Marc Andreessen, fondo' poi Netscape, uno dei browser piu' importanti degli anni '90.
Una curiosita' molto pratica, utile fin da subito per chi vuole imparare osservando il lavoro altrui, senza bisogno di corsi o libri.
Un tasto segreto per vedere il codice di qualsiasi sito
Lo sapevi che puoi vedere il codice HTML di (quasi) qualsiasi pagina web che visiti? Basta premere Ctrl+U (o fare clic destro e scegliere "Visualizza sorgente pagina") per aprire il codice HTML della pagina che stai guardando in quel momento. E' un ottimo modo per imparare, osservando come altri hanno costruito le pagine che usi tutti i giorni.
Quante versioni ha avuto HTML
Da quando Tim Berners-Lee lo invento', HTML si e' evoluto attraverso diverse versioni ufficiali. La versione attuale, HTML5, pubblicata nel 2014, ha introdotto tag pensati per dare un significato piu' chiaro alle diverse parti di una pagina (come <header> per l'intestazione o <nav> per il menu di navigazione), invece di usare sempre gli stessi tag generici per tutto.
Per scrivere HTML basta un semplice editor di testo, anche il Blocco Note: si scrive il codice, si salva il file con estensione .html, e lo si apre con un browser per vederlo visualizzato come una vera pagina web, senza bisogno di installare programmi complicati o costosi.
►VideoTi spiego HTML in 3 MINUTI (Aulab)
►VideoIntroduzione ad HTML ed installazione - Corso HTML lezione 1 (Edoardo Midali)
►VideoGuida completa a tag ed elementi HTML5 (ScrivoCodice)La tua prima pagina
In un editor di testo semplice, scrivi la struttura minima di una pagina HTML: DOCTYPE, html, head con un title a tua scelta, e body con un titolo (h1) e un paragrafo (p) che parlano di te. Salva il file con estensione .html e aprilo con un browser per vedere il risultato: confronta il codice scritto con quello che vedi visualizzato.
Nel prossimo argomento del tuo percorso vedremo i tag principali per formattare davvero il contenuto di una pagina, dai titoli ai link fino alle immagini.
Mettiti alla prova
1. Cos'è HTML, e perché non è considerato un linguaggio di programmazione in senso stretto?
È il linguaggio usato per definire struttura e contenuto di una pagina web; non è un linguaggio di programmazione ma un linguaggio di markup, che indica al browser come interpretare il contenuto.
2. Cos'è un tag? Fai un esempio.
È una parola chiave racchiusa tra parentesi angolari che indica al browser come trattare il contenuto, ad esempio <p> per un paragrafo.
3. Qual è la differenza tra un tag a coppia e un tag auto-chiudente? Fai un esempio di ciascuno.
Un tag a coppia ha apertura e chiusura con contenuto in mezzo (es. <p>testo</p>); un tag auto-chiudente non ha bisogno di chiusura perché non contiene altro (es. <br> o <img>).
4. A cosa serve il tag head, e in cosa si differenzia dal body?
Il tag head contiene informazioni sulla pagina non visibili direttamente; il body contiene invece tutto il contenuto visibile della pagina.
5. Cosa contiene il tag title, e dove viene mostrato il suo contenuto?
Contiene il titolo della pagina, mostrato nella scheda (tab) del browser.
6. Cosa si intende per "annidamento" dei tag HTML?
Il fatto che i tag possano contenerne altri al loro interno, formando una struttura ad albero.
7. Vero o falso: per scrivere un file HTML serve un programma speciale, diverso da un semplice editor di testo.
Falso: basta un semplice editor di testo, come il Blocco Note, salvando il file con estensione .html.
8. Cos'e' un attributo di un tag HTML? Fai un esempio.
Un'informazione aggiuntiva scritta nel tag di apertura nella forma nome="valore", ad esempio lang="it" nel tag html per dichiarare la lingua della pagina.
9. A cosa serve un validatore HTML, come quello del W3C?
Ad analizzare il codice HTML scritto e segnalare eventuali errori, come tag di chiusura dimenticati o annidamento sbagliato.
10. Come si puo' vedere il codice HTML di una qualsiasi pagina web che si sta visitando?
Premendo Ctrl+U, oppure con clic destro e "Visualizza sorgente pagina".
11. Che cos'e' Mosaic, e perche' fu importante nella storia del web?
Il primo browser (1993) capace di mostrare testo e immagini insieme in modo semplice, che rese il web popolare tra il grande pubblico.