Doctype e Validazione - EINAUDI

Transcript

Doctype e Validazione - EINAUDI
Doctype HTML e DTD
Seguendo le indicazioni del W3C (consorzio internazionale che si occupa di armonizzare l’utilizzo dell’HTML)
Doctype deve essere il primo elemento ad aprire il documento. Questo vuol dire che deve essere posto
prima di <HTML>.
Si tratta di un tag che non ha bisogno di chiusura e che ha il compito di fornire informazioni al server Web
che ospita la pagina. Le informazioni fornite da DOCTYPE riguardano il tipo di documento visualizzato oltre
ad essere necessaria alla comunicazione tra browser e server. DOCTYPE deve essere scritto in una forma
standard:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Questa riga fornisce alcune informazioni sul documento:
HTML PUBLIC: il documento è pubblico
DTD HTML 4.0: la versione di HTML supportata è la 4.0 Transitional
EN: la lingua del documento è l’inglese
Come dice il W3C non esiste solo un tipo di HTML, ma c'è ne sono molti: HTML 4.01 Strict, HTML 4.01
Transitional, XHTML 1.0 Strict, HTML5 e altri ancora.
Tutti questi tipi sono definiti dalle loro rispettive specifiche ma la loro struttura è anche definita da un
linguaggio chiamato DTD usato per definire i componenti ammessi e la struttura dello stesso documento.
Visto il variare di questo tipo di specifiche è necessario usare il giusto doctype differenziandolo nei diversi tipi
di documenti.
L’uso di DOCTYPE non è obbligatorio e può essere omesso. Certamente un suo utilizzo aiuta il server Web
ad interpretare correttamente il documento, ma la sua assenza non è condizionante ai fini della corretta
visualizzazione.
Ma perché utilizzare il doctype? a cosa serve? non sarebbe meglio non metterlo così risparmiamo kb di
spazio?
Anzitutto dobbiamo riuscire a capire questo, i browser si adattano al nostro codice. Cosa vuol dire?
Vuol dire che se io utilizzo un DOCTYPE tipo questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
il browser, che sia Firefox, Internet Explorer o Safari capisce che ha davanti un codice scritto in HTML 4.01
Transitional e si comporterà di conseguenza, mentre se io metto un DOCTYPE scorretto o addirittura non lo
metto il broswer andrà in modalità Quirks, cioè cercherà di interpretare il codice proprietario in modo analogo
ai browser di passata generazione come IE 4 e Netscape 4.
Quindi, inserire un DOCTYPE corretto aiuterà il browser ad interpretare quello che scriviamo.
Il DOCTYPE, perché sia corretto e funzionante, deve essere scritto proprio come il W3C lo dichiara e deve
essere la prima cosa scritta in una pagina HTML, ancora prima del tag <html>, una virgola, un punto
scorretto daranno come conseguenza la modalità Quirks.
HTML: Doctype e Validazione - Ultima versione: 30/10/2014
Pag. 1
HTML 4.0 offre tre scelte di DTD e quindi tre possibili dichiarazioni di DOCTYPE:



Transitional – Quello più “alla mano” che vi lascerà vivere più felici.
Strict – “Il Cattivo” che vi maltratterà se userete degli attributi o elementi di markup presentazionale.
Frameset – Quello che vi permetterà di usare i Frame come andavano negli anni ’90.
Normalmente si utilizza questo doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
World Wide Web Consortium (W3C)
Il World Wide Web Consortium (W3C) è una comunità internazionale dove i membri organizzatori, un
personale a tempo pieno e il pubblico lavoro contribuiscono per sviluppare gli standard Web.
Cliccando sul link verrete indirizzati nella home page italiana del sito; l’ ho postato perché è una fonte
davvero molto importante se non indispensabile per uno sviluppatore web.
Home page ufficiale in italiano: http://www.w3c.it
Home page ufficiale in inglese: http://www.w3.org
Standard web e validazione
L'HTML può essere codificato in molti modi e i browsers possono leggerlo in altrettanti modi diversi. Dovresti
sapere che l' HTML ha molti dialetti. Questo è il motivo per cui gli stessi siti web appaiono diversi su browser
diversi.
Ci sono stati molti tentativi di creare uno standard comune per l'HTML attraverso il World Wide Web
Consortium (W3C) fondato da Tim Berners-Lee (lo stesso fondatore delll'HTML). Ma è stata una strada lunga
e tortuosa.
Per molti anni Microsoft quasi completamente ignorò Internet. Dopo un po' prese parte alla competizione con
Netscape e introdusse un browser. Le prime versione del browser di Microsoft, Internet Explorer, non erano
migliori di Netscape nel supportare gli standard HTML. Ma Microsoft decise di dare gratuitamente il suo
browser (è sempre una cosa molto popolare da fare) e Internet Explorer divenne presto il browser più
popolare.
Dalle versioni 4 e 5 Microsoft puntò a supportare sempre di più gli standard HTML del W3C. Netscape non
aveva l'intenzione di sviluppare un uovo browser e continuò a distribuire la sorpassata versione 4.
Il resto è storia. Oggi gli standard HTML si chiamano 4.01 e XHTML. Adesso è Internet Explorer che ha una
quota di mercato superiore al 90%. Internet Explorer ha ancora i suoi strani elementi ma sono supportati
dagli standard HTML del W3C. E così anche per tutti gli altri browser.
Quindi, quando scrivi il codice HTML segui gli standard del W3C in modo che i tuoi siti web possano essere
visti su tutti i browser - ora e in futuro.
Validare? Perchè e come dovrei farlo?
Inserisci la DTD nelle tue pagine e puoi sempre verificare gli errori del tuo HTML usando validatore gratuito
del W3C : http://validator.w3.org/
HTML: Doctype e Validazione - Ultima versione: 30/10/2014
Pag. 2
Se il tuo HTML è scritto correttamente avrai un messaggio di congratulazioni. Diversamente apparirà un
elenco con gli errori che hai fatto con scritto esattamente cosa e dove hai scritto qualcosa di sbagliato. Fai
qualche errore di proposito per vedere cosa succede.
Il validatore non è così utile per localizzare un errore. Alcuni browser cercano di compensare la mancanza di
bravura degli sviluppatori web cercando di fissare gli errori in HTML e mostrando la pagina come loro
pensano che dovrebbe apparire. Con browser di questo tipo non dovresti mai vedere un errore. Altri browser
potrebbero in ogni caso interpretare la pagina diversamente o non visualizzarla affatto. Il validatore può
aiutarti a trovare degli errori che non sapevi neanche che esistessero.
Valida sempre le tue pagine e vedrai che verranno sempre visualizzate correttamente.
HTML codifica (set di caratteri)
Per visualizzare correttamente una pagina HTML, un browser Web deve conoscere il set di caratteri (codifica
dei caratteri) da usare.
Che cos'è la codifica dei caratteri?
ASCII è stato il primo standard di codifica dei caratteri (chiamato anche set di caratteri). Definisce 127
differenti caratteri alfanumerici che potrebbero essere utilizzati su Internet.
ASCII supportati numeri (0-9), lettere (AZ), e alcuni caratteri speciali come! $ + - () @ <>.
ANSI (Windows-1252) è stato il set originale di caratteri di Windows. Ha sostenuto 256 diversi codici di
carattere.
ISO-8859-1 è stato il set di caratteri predefinito per HTML 4. Ha inoltre sostenuto 256 diversi codici di
carattere.
Perché ANSI e ISO era limitata, la codifica dei caratteri di default è stato cambiato in UTF-8 in HTML5.
UTF-8 (Unicode) copre quasi tutti i caratteri e simboli in tutto il mondo.
Il charset attributo HTML
Per visualizzare correttamente una pagina HTML, un browser Web deve conoscere il set di caratteri
utilizzato nella pagina.
Questo è specificato nel tag <meta>:
Per HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Il tag meta deve essere inserito nella sezione HEAD:
<HEAD>
<TITLE> Avicii </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
HTML: Doctype e Validazione - Ultima versione: 30/10/2014
Pag. 3
Notepad++
Quando si crea un nuovo file HTML con Notepad++ andare su “Formato” e selezionare:
“Codifica in UTF-8 (senza BOM)”.
In caso di documento già esistente selezionare:
“Converti in UTF-8 senza BOM”
Note:
Un classico errore rilevato dal W3C Validator è legato all’utilizzo del carattere & nel tag HREF:
href="http://it.wikipedia.org/w/index.php?title=Invincible_Friends&action=edit&redlink=1
Per evitarlo dopo il carattere & è necessario inserire: amp preceduto e seguito dal carattere spazio:
href="http://it.wikipedia.org/w/index.php?title=Invincible_Friends& amp action=edit& amp redlink=1
HTML: Doctype e Validazione - Ultima versione: 30/10/2014
Pag. 4