Iniziamo questa lezione parlando del W3C (il signor 'standard'). Non facciamoci spaventare dalla sigla, non c'è niente di più familiare: W3 sta per "3 volte W", cioè World Wide Web, un termine che si presuppone già conosciamo, sommato alla parola Consortium.
Il Consorzio del Web insomma, che non fa altro che studiare e diffondere degli standard per il Web. Ebbene sì, il Web è proprio una giungla, ma qualcuno ha cura che non impazziamo e ci perdiamo e diffonde degli standard, sulla base dei quali i produttori di software dovrebbero basarsi per produrre browser e strumenti di navigazione.
Ci sono esempi di scarsa compatibilità, come alcune vecchie versioni di Internet Explorer (soprattutto la 6) o di eccesso di zelo come iOS, il sistema operativo di iPad e iPhone, che ignora volutamente Flash sfruttando solo lo standard HTML5 (anche se in evoluzione).
Tuttavia oggi tutte le versioni più moderne dei browser sono abbastanza aderenti agli standard W3C. Anche quelle dei dispositivi mobili. Per verificare quali siano i limiti di compatibilità si trovano tabelle aggiornate sul servizio caniuse.
HTML
L'HTML è ciò che viene letto ed interpretato dai browser (i programmi con i quali navighiamo su internet) e sta per HyperText Markup Language = linguaggio per marcatori di ipertesti. Attenzione, non è un linguaggio di programmazione, come erroneamente molti scrivono, ma serve alla formattazione dei contenuti.
Gli ipertesti non sono altro che pagine che, grazie ad appositi collegamenti (link), sono collegate ad altre pagine, fino a formare un reticolo di documenti.
Il linguaggio di marcatura (markup) invece è ciò che ci permette, attraverso appunto i marcatori o tag, di definire, all'interno della pagina, la funzione di determinate porzioni di testo, contenuti, immagini. I tag o marcatori li riconosciamo sempre perchè iniziano e terminano con le cosiddette "parentesi angolari": < e >.
Ecco un esempio:
<p>Testo qui</p>La porzione di testo compresa fra i due tag (di apertura e chiusura) sarà considerata come un paragrafo, come prevede il tag <p> appunto. In sostanza i marcatori fanno in modo che non "succeda" niente all'interno della pagina, ma essa verrà formattata nel modo che avremo indicato tramite i tag appositi.
CSS, i fogli di stile
Il CSS è invece un file a parte che, collegato opportunamente tramite un comando apposito al file HTML, permette al browser di riconoscere ed identificare l'aspetto grafico che dovrà avere il sito.
CSS sta per Cascading style sheet (foglio di stile a cascata). Il termine cascata si usa per indicare che le regole dettate in questo file valgono in modo ereditario "a cascata" appunto, su tutti i tag contenuti all'interno di un tag "genitore".
Una pagina HTML quindi definisce la struttura dei contenuti, mentre il CSS è un foglio di stile, associabile alla pagina HTML, che ne definisce la presentazione grafica.
L'evoluzione dell'HTML
L'HTML seppure non sia un linguaggio di programmazione, ha subito comunque delle evoluzioni ed è passato dalla versione 1.0 alla 4.01, fino alla versione 5 dello standard, ancora in evoluzione.
Un primo importante salto generazionale nel realizzare il markup delle pagine Web, rispetto all'HTML 4 è stato con l'avvento dell'XHTML (eXtensible Hyper Text Markup Language), pensato come linguaggio di collegamento fra le pagine HTML e altre applicazioni Web e non. La caratteristica che contraddistigue questo linguaggio è quella di pretendere maggior rigore nella definizione del codice.
Esistono due versioni di XHTML: transitional, più flessibile appunto per l'interazione con altre piattaforme, e strict, più rigido ma più "pulito".
Lo standard più attuale è HTML5, che conserva molto dell'eredità dei suoi predecessori aggiungendo molti elementi al linguaggio di marcatura, ma soprattutto stabilendo alcuni standard funzionali, come il player video/audio e lo standard di programmazione delle caratteristiche (API).
Il doctype
La definizione del tipo di documento usato (HTML, XHTML o HTML5) è effettuata tramite il doctype. Se creiamo una pagina Web vuota con un editor come Dreamweaver, come prima riga di codice troveremo un tag:
<!DOCTYPE ...Questa dichiarazione riporta ad un collegamento con un file presente sul sito del W3C sul quale sono dichiarate le regole della versione HTML che si sta usando. Ciò permette ai browser di interpretare correttamente la pagina HTML.
In questa guida utilizzeremo documenti HTML5 che hanno un doctype molto semplice:
<!doctype html>Il motivo della sua semplicità è presto detto: il W3C, nonostante la forte applicazione già di HTML5, non ha ancora redatto le specifiche ufficiali, che sono ancora in bozza. Per ottenere la validazione è pertanto sufficiente bypassare questa carenza segnalando appunto il tag senza specifiche.
Il validatore del W3C e il suo significato
Sul sito del W3C troviamo il cosiddetto validatore: un'applicazione che permette, fornendo l'url o caricando direttamente una pagina HTML, di rilevare gli errori di sintassi del codice html permettendoci di correggerli facilmente.
Spesso quando le cose non funzionano, effettuare una validazione sul sito del W3C ci permette di capire al volo cosa non va e correggere l'impaginazione del sito. Ciò non significa che se un sito contiene qualche errore di validazione non sia semanticamente corretto o che non funzioni.
Al contrario se ne contiene tanti ed importanti, è evidente che ci sono delle carenze di concetto alla base della progettazione della pagina e che le cose potrebbero funzionare meglio se progettate diversamente.
Esiste anche un validatore per i fogli di stile. Anche in questo caso ci può essere di aiuto per rilevare errori di sintassi che compromettono l'aspetto grafico del sito senza perdere ore dietro al progetto, quando magari è solo un punto e virgola a mancare e fare la differenza (capita spesso all'inizio).