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