Introduzione a XHTMLIl web ritorna al futuro
Un po’ di storiaNel gennaio del 2000 il W3C (World Wide Web Consortium) invece di rilasciare una nuovaversione di HTML (Hy...
I vantaggi di XHTMLCodice pulito e ben strutturatoCon XHTML tutta la formattazione (immagini, colori, misure, attributi ti...
Conversione HTML > XHTMLPer trasformare il proprio HTML in XHTML è sufficiente: ripulire il codice utilizzando i tag appr...
Le versioni di XHTMLCiascuna delle seguenti versioni prevede regole sintattiche diverse perché tutte fannoriferimento a di...
Regole di scritturaLe maggiori differenze con HTML sono di ordine sintattico, infatti XHTML eredita il rigoresintattico di...
Dichiarare il DOCTYPEIl DOCTYPE fornisce al browser la DTD (Document Type Declaration) di riferimento, chedefinisce la str...
DTD e validazioneLa DTD fornisce alcune importanti informazioni sul documento: XHTML: il tipo di linguaggio utilizzato è ...
Forma generale della dichiarazioneIn un documento XHTML: il DOCTYPE precede l’elemento radice e specifica la DTD di rifer...
La sezione <head>Dopo la dichiarazione del DOCTYPE, segue l’elemento radice <html> che contiene gli elementistrutturali <h...
<body>, tag e attributiIl documento vero e proprio è compreso dal tag <body> che segue <head> dentro l’elementoradice <htm...
<body>, tag e attributiLa DTD Transitional è basata sulla DTD di HTML 4.01, supporta tutti i tag e gli attributi dipresent...
La correttezza formaleLa correttezza formale in XHTML è obbligatoria: i tag vanno inseriti correttamente, ben nidificati,...
BibliografiaTim Berners-LeeLarchitettura del nuovo Web. Dallinventore della rete il progetto di una comunicazionedemocrati...
Siti web di approfondimentohttp://www.w3.org/Consorzio che si occupa di stabilire gli standard di riferimento per il web e...
Siti web di approfondimentohttp://www.cssplay.co.uk/index.htmlEsperimenti e applicazioni pratiche del design basato sui CS...
Upcoming SlideShare
Loading in...5
×

XHTML: introduzione

553
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
553
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

XHTML: introduzione

  1. 1. Introduzione a XHTMLIl web ritorna al futuro
  2. 2. Un po’ di storiaNel gennaio del 2000 il W3C (World Wide Web Consortium) invece di rilasciare una nuovaversione di HTML (HyperText Markup Language), procede ad una sua riformulazione comeapplicazione di XML. Nasce così XHTML (eXtensible HyperText Markup Language) chenell’ottobre 2001 verrà ridefinito in modo più completo come XHTML 1.0 che rappresenta ilsuccessore di HTML 4.01 basato su XML 1.0A differenza di HTML che serve a visualizzare dati, XML (eXtensible Markup Language) nasceper descrivere strutture di dati ed è un metalinguaggio che consente di creare infiniti linguaggidi marcatura e richiede di rispettare in modo rigoroso certe regole sintattiche. XML è unostrumento molto versatile che rende possibile la condivisione dei dati, intesi come purainformazione,informazione a prescindere dal tipo di piattaforma perché è gestibile anche dai dispositivi che piattaforma,non hanno risorse sufficienti ad interpretare HTMLXHTML è compatibile con HTML 4.01 ed eredita la versatilità di XML, garantendo così l’accessouniversale alle informazioni anche a dispositivi diversi dal computer come telefonini, palmari,Web TV e quanti potranno essere progettati in futuro© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 2
  3. 3. I vantaggi di XHTMLCodice pulito e ben strutturatoCon XHTML tutta la formattazione (immagini, colori, misure, attributi tipografici e diposizionamento, ovvero "il design") è affidato ai fogli di stile o CSS (Cascading Style Sheet)PortabilitàI nuovi browser adorano XHTML e tutta l evoluzione dei servizi mobili sarà fondata l’evoluzionesull’integrazione tra XHTML e CSSEstensibilitàXHTML è progettato per funzionare correttamente con altri linguaggi, applicazioni e protocollibasati su XML, cosa non possibile con HTMLAccessibilitàUn documento valido, ben formato nella struttura è più facilmente gestibile anche dai browseralternativi come quelli testuali o vocali© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 3
  4. 4. Conversione HTML > XHTMLPer trasformare il proprio HTML in XHTML è sufficiente: ripulire il codice utilizzando i tag appropriati e rispettando la sintassi XML aggiungere il DOCTYPEEsistono software online ( lid t i) sviluppati d l W3C per controllare che il dE i t ft li (validatori) il ti dal t ll h documento sia t iconforme ad uno schema DTD (Document Type Declaration): Markup Validator > http://validator.w3.org/ CSS Validator > http://jigsaw.w3.org/css-validator/ Link Checker > http://validator.w3.org/checklink Mobile Checker > http://validator w3 org/mobile/ http://validator.w3.org/mobile/Seppur meno precisi, in quanto procedure automatiche, esistono anche strumenti per ripulire ilcodice HTML: http://www.w3.org/People/Raggett/tidy/© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 4
  5. 5. Le versioni di XHTMLCiascuna delle seguenti versioni prevede regole sintattiche diverse perché tutte fannoriferimento a distinte DTD (definizione del tipo di documento):XHTML StrictSepara il contenuto dal layout: non sono ammessi tag e attributi relativi all’aspetto grafico deldocumento che è controllato interamente dai CSSXHTML Transitional:E’ la versione più simile ad HTML 4.01, permette tag deprecati ed ammette tag di formattazione:è nato per f ili facilitare l migrazione d HTML a XHTML la i i daXHTML Frameset:Prevede l’utilizzo dei frames per suddividere la finestra visualizzata dal browser pXHTML 1.1:E’ l’ultima versione rilasciata dal W3C, si basa sulla DTD Strict 1.0 e rappresenta la primaformulazione pratica del concetti di modularità: gli elementi fondamentali (i tag che definisconola struttura del documento) sono raggruppati in una serie di moduli indipendenti che possonoessere implementati o esclusi secondo le necessità© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 5
  6. 6. Regole di scritturaLe maggiori differenze con HTML sono di ordine sintattico, infatti XHTML eredita il rigoresintattico di XML e l’obbligo della validazione:Regole generali: aprire i documenti con i corretti DOCTYPE e namespace dichiarare il content type usando l’elemento meta content content-type l elemento meta-content i documenti XHTML devono avere un solo root element, <html> codificare i caratteri speciali: “&” diventa “&amp;”Tag e attributi: tutti i tag e i loro attributi devono essere scritti in minuscolo (case sensitive) tutti i tag devono essere sempre chiusi i tag vuoti vanno chiusi con uno spazio e uno slash: <img />, <br /> tutti i tag devono essere annidati correttamente gli attributi dei tag devono essere scritti tra apici doppi tutti gli attributi dei tag devono avere un valore l’attributo “id” sostituisce “name” per identificare gli elementi di un documento l attributo id name© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 6
  7. 7. Dichiarare il DOCTYPEIl DOCTYPE fornisce al browser la DTD (Document Type Declaration) di riferimento, chedefinisce la struttura sintattica di un documento XHTML, quali tag sono obbligatori e quali tag eattributi possono essere utilizzati:DTD Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN //W3C//DTD Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">DTD Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" !DOCTYPE h l " //W3C//DTD 10T ii l//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DTD Frameset<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>DTD XHTML 1 1 1.1<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 7
  8. 8. DTD e validazioneLa DTD fornisce alcune importanti informazioni sul documento: XHTML: il tipo di linguaggio utilizzato è XHTML PUBLIC: il documento è pubblico W3C: il documento fa riferimento alle specifiche rilasciate dal W3C “ ” (è il segno " “-” "meno"): l specifiche non sono registrate allISO ( ") le ifi h i t t llISO (organizzazione di i istandardizzazione internazionale); se lo fossero state, ci sarebbe stato un "+“ DTD XHTML 1.0 Strict: il documento fa riferimento ad una DTD e la versione di XHTMLsupportata è la 1.0 Strict EN: la lingua con cui è scritta la DTD è lingleseI documenti XHTML devono essere validi e ben formati, ovvero: valido: se usa correttamente gli elementi e gli attributi dichiarati nella DTD di riferimento ben formato: quando rispetta le regole della sintassi XML (dichiarazione DOCTYPE, presenzadi un elemento radice, la corretta nidificazione dei marcatori, chiusura di tutti i tag)© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 8
  9. 9. Forma generale della dichiarazioneIn un documento XHTML: il DOCTYPE precede l’elemento radice e specifica la DTD di riferimento l’elemento radice deve essere <html> e deve contenere la dichiarazione di un namespaceXML (spazio dei nomi: collezione di nomi di entità, definite dal W3C) tramite l’attributo xmlns; ilnamespace deve essere http://www.w3.org/1999/xhtml è possibile specificare la codifica: <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />Ad esempio, nel caso di un documento XHTML 1.0 Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> h h l h l i d d<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"><head><meta http equiv Content Type content="text/html; charset iso 8859 1 /> http-equiv="Content-Type" content text/html; charset=iso-8859-1"<title><Documento senza titolo</title></head>...© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 9
  10. 10. La sezione <head>Dopo la dichiarazione del DOCTYPE, segue l’elemento radice <html> che contiene gli elementistrutturali <head> e il corpo del documento <body>. La funzione della sezione <head> è dicontenere informazioni rilevanti che non vengono direttamente visualizzate nella pagina: <title> specifica il titolo del documento che compare nella barra del titolo del browser <script> contiene script di programmazione <noscript> è utilizzato per passare visualizzazioni alternative ai browser che non supportanogli script <meta> specifica i f ifi informazioni di vario tipo sul d i i i i l documento ( li unici metatag realmente (gli i i limportanti sono “Description” e “Keywords”, rilevanti per il posizionamento su Bing/Yahoo) <link> usato soprattutto con i CSS, importa informazioni da file esterni collegati <style> definisce le regole di formattazione per il documento corrente <base> definisce l’URL di base della pagina ed è utile per la risoluzione del link relativi <object> usato soprattutto per i file .swf; racchiude un oggetto swf;© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 10
  11. 11. <body>, tag e attributiIl documento vero e proprio è compreso dal tag <body> che segue <head> dentro l’elementoradice <html>; a questo punto c’è una grande differenza nella DTD Strict: è la più rigorosa,orientata a descrivere SOLO la struttura del documento, perché tutto ciò che riguarda il design ela presentazione è affidata ai CSS; pertanto NON sono ammessi tag e attributi di formattazione:Tag non ammessi: g<applet>, <basefont>, <center>, <dir>, <font>, <frame>, <frameset>, <iframe>, <isindex>,<menu>, <noframes>, <s>, <strike>, <u>Attenzione agli attributi: sono esclusi tutti gli attributi del tag <body> non si può usare “align” per l’allineamento del testo in paragrafi e altri elementi non è supportato l’elemento “target” per i link e i form le tabelle <table> si usano per fini esclusivamente tabellari e non si possono specificare ibordi (border), i colori di sfondo (bgcolor) o l allineamento (align) (border) l’allineamento Le celle di tabella <td> non supportano il colore di sfondo, la larghezza (width) e l’altezza(height); supportano invece l’allineamento del testo (align)© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 11
  12. 12. <body>, tag e attributiLa DTD Transitional è basata sulla DTD di HTML 4.01, supporta tutti i tag e gli attributi dipresentazione e anche quelli deprecati dal W3C, ammettono l’uso delle tabelle per il layout el’uso del tag <font>La DTD Frameset: è identica alla Transitional, ma viene usata quando si utilizzano i frames;l’unica differenza è la sostituzione del tag <body> con <frameset>XHTML 1 1 è un linguaggio di markup orientato alla sola struttura d l d 1.1 li i k i ll l del documento, si b i basa sulla llDTD Strict e non accetta tag o attributi deprecati, ne la struttura a frameset; il layout ècontrollato interamente dai CSS. La DTD è diversa dalle precedenti perché non è una lista dielementi e attributi che ne definiscono l’uso, ma un framework di piccoli moduli ben definiti per: scegliere quali elementi saranno usati utilizzando moduli standard semplificare XHTML per dispositivi particolari (cellulari, palmari, ecc.) p p p p ( ,p , ) estendere XHTML per applicazioni più complesse aggiungendo con XML diverse funzionalitàcome MathML, SVG, Voice and Multimedia© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 12
  13. 13. La correttezza formaleLa correttezza formale in XHTML è obbligatoria: i tag vanno inseriti correttamente, ben nidificati, chiari, puliti e compatti, rispettando legerarchie strutturali e formali il documento XHTML utilizza SOLO elementi strutturali come <div>, <h[1-6]>, <p>,<blockquote>, <ul>, <ol>, ecc, affidando ai CSS la gestione della presentazione gli attributi per le preferenze generali del documento (link, alink, vlink, text, bgcolor,background) non sono ammessi nella DTD Strict e vanno gestiti via CSS f gli elementi strutturali <div> d fra li l i li di deve precedere <p> e non viceversa d i i marcatori di presentazione come <b> (trasformato in <strong>) non possono contenere alloro interno un tag di struttura come <p>, ma il contrarioElementi critici: <a> non può contenere altri elementi <a> <pre> non può contenere <img>, <object> <big> <small> <sub> <sup> <img> <object>, <big>, <small>, <sub>, <button> non può contenere <input>, <select>, <textarea>, <label>, <button>, <form>,<fieldset>, <iframe>, <isindex> <form> non può contenere <form> e<label> non può contenere <label>© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 13
  14. 14. BibliografiaTim Berners-LeeLarchitettura del nuovo Web. Dallinventore della rete il progetto di una comunicazionedemocratica, interattiva e intercreativa (Feltrinelli)Elizabeth CastroHTML,HTML XHTML e CSS per il World Wide Web (Tecniche Nuove)Jeffrey ZeldmanProgettare siti Web standard. Tecniche per il design con XHTML e CSS(Pearson Education Italia)Dave Shea, Molly E. HolzschlagLo Zen e il design CSS (Mondadori Informatica)Andy ClarkeOltre i CSS. La sottile arte del web design(Pearson Education Italia)© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 14
  15. 15. Siti web di approfondimentohttp://www.w3.org/Consorzio che si occupa di stabilire gli standard di riferimento per il web e di formalizzarnelutilizzo attraverso raccomandazioni definitivehttp://www.webstandards.org/Il Web Standard Project è stato costituito nel 1998 per promuovere i principali stan-dard web e stan dardincoraggiare i produttori di browser a fare lo stesso per garantire un accesso semplice eproficuo al webhttp://www.vtardia.com/files/maccaws/primer.htmlh // di /fil / / i h lQuello che chiunque abbia un sito web dovrebbe sapere sugli standardhttp://www.456bereastreet.com/lab/developing_with_web_standards/it/ p p gEsempi e raccomandazioni da seguirehttp://www.csszengarden.com/Con dueC d sezioni - manifesto e galleria - il sito è stato creato per di i i if t ll i it t t t dimostrare cosa si può fare dal t i òf d lpunto di vista della resa grafica con il design basato sugli standard© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 15
  16. 16. Siti web di approfondimentohttp://www.cssplay.co.uk/index.htmlEsperimenti e applicazioni pratiche del design basato sui CSShttp://www.smashingmagazine.com/Blog dedicato a web developers & designershttp://browsershots.org/htt //b h t /Servizio online che realizza screenshots dei tuoi design su diversi browserShowcase XHTML & CSS designhttp://www.cssartillery.com/ http://www.cssbeauty.com/http://www.css20.com/htt // 20 / http://cssmania.com/ htt // i /http://www.design2day.net/ http://www.fullsingle.com/sites/archivehttp://www.thehorizontalway.com/ http://www.mostinspired.com/http://w3cs.com/ http://www.w3csites.com/© smartpixel di Enrico DellOste | web: www.smartpixel.it | email: info@smartpixel.it 16
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×