Tecnologie di Internet Linguaggi di markup personalizzati Linguaggi di markup personalizzati Caso di studio: XHTML Dott. Nicola Dragoni 1 Tecnologie di Internet Linguaggi di markup personalizzati Linguaggi di markup personalizzati XML è un metalinguaggio, cioè un linguaggio che permette di creare altri linguaggi. Nei prossimi lucidi verranno elencati alcuni dei più noti linguaggi di markup che sono stati creati con XML. Poi vedremo, come esempio, uno di questi linguaggi (scelto perchè è uno dei più semplici): MathML. Dott. Nicola Dragoni 2 Tecnologie di Internet Linguaggi di markup personalizzati Alcuni linguaggi di markup EXtensible Hyper Text Markup Language (XHTML): www.w3.org/MarkUp Mathematical Markup Language (MathML): www.w3.org/Math Chemical Markup Language (CML): www.xml-cml.org Wireless Markup Language (WML): www.wapforum.org Geography Markup Language (GML): www.opengis.org Synchronized Multimedia Integration Language (SMIL): www.w3.org/AudioVideo Scalable Vector Graphics (SVG): www.w3.org/TR/SVG Bean Markup Language (BML): www.alphaworks.ibm.com/aw.nsf/techmain/bml Extensible 3D Language (X3D): www.web3d.org/x3d.html ... Dott. Nicola Dragoni 3 Tecnologie di Internet Linguaggi di markup personalizzati Caso di studio: XHTML Dott. Nicola Dragoni 4 Tecnologie di Internet Linguaggi di markup personalizzati XHTML XHTML sta per eXtensible Hyper Text Markup Language XHTML è stato pensato per estendere (e sostituire) HTML XHTML è molto simile a HTML 4.01 XHTML è una versione più “rigida e pulita” di HTML XHTML è la riformulazione di HTML definito come un’applicazione XML. Dott. Nicola Dragoni 5 Tecnologie di Internet Linguaggi di markup personalizzati XHTML è uno standard Web XHTML 1.0 è diventato una Raccomandazione ufficiale del W3C nel Gennaio del 2000. Se una specifica diventa una Raccomandazione ufficiale W3C significa che tale specifica è ormai STABILE, cioè che è stata revisionata con successo dal W3C membership e che quindi può essere considerata uno standard Web (ha superato tutto il lungo processo di revisione). XHTML è considerato la nuova generazione di HTML, ma ci vorrà tempo perchè tutti i browsers e gli applicativi software siano in grado di leggerlo e processarlo. XHTML è una combinazione di HTML e XML: consiste di tutti gli elementi di HTML 4.01 (compatibilità con HTML 4.01) con la sintassi di XML. Dott. Nicola Dragoni 6 Tecnologie di Internet Linguaggi di markup personalizzati Perchè XHTML? Si è ormai arrivati ad un punto nel quale molte pagine Web contengono “bad” HTML. Consideriamo ad esempio il seguente codice: <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body> Visualizza Questo codice HTML viene visualizzato correttamente dal browser nonostante non sia “ben formato”. XHTML, integrando HTML e XML, permette di scrivere documenti HTML ben formati. Dott. Nicola Dragoni 7 Tecnologie di Internet HTML Linguaggi di markup personalizzati XHTML Nei prossimi lucidi vedremo i 10 cambiamenti necessari per trasformare un documento HTML 4.01 in uno XHTML. Dott. Nicola Dragoni 8 Tecnologie di Internet Linguaggi di markup personalizzati 1. Documenti conformi alle regole XML Gli elementi devono essere annidati in modo corretto. HTML: <b><i>This text is bold and italic</b></i> XHTML: <b><i>This text is bold and italic</i></b> I documenti devono essere ben formati. Tutti gli elementi XHTML devono essere annidati all’interno dell’elemento root <html>. Tutti gli altri elementi possono avere sotto-elementi (figli). I figli devono essere in coppie e correttamente annidati all’interno del loro elemento padre. <html> <head> . . . </head> <body> . . . </body> </html> Dott. Nicola Dragoni STRUTTURA BASE DI UN DOCUMENTO 9 Tecnologie di Internet Linguaggi di markup personalizzati 2. Nomi elementi in minuscolo I documenti XHTML sono applicazioni XML. XML è casesensitive: tag come <br> e <BR> sono interpretati come elementi diversi! <BODY> <P>This is a paragraph.</P> </BODY> Questo è sbagliato! <body> <p>This is a paragraph.</p> </body> Questo è corretto! Dott. Nicola Dragoni 10 Tecnologie di Internet Linguaggi di markup personalizzati 3. Elementi XHTML devono essere chiusi Tutti gli elementi XHTML devono essere chiusi. Gli elementi non vuoti devono avere un tag di chiusura. <p>This is a paragraph. <li>This is a list item. Questo è sbagliato! <p>This is a paragraph.</p> <li>This is a list item.</li> Questo è corretto! Dott. Nicola Dragoni 11 Tecnologie di Internet Linguaggi di markup personalizzati 4. Anche gli elementi vuoti devono essere chiusi Gli elementi vuoti devono avere un tag di fine oppure devono finire con />. This is a line break.<br> Check out this horizontal rule:<hr> Questo è sbagliato! What a cool image! <img src=“filename.gif”> This is a line break.<br></br> Check out this horizontal rule:<hr /> Questo è corretto! What a cool image! <img src=“filename.gif” /> Dott. Nicola Dragoni 12 Tecnologie di Internet Linguaggi di markup personalizzati 5. Nomi attributi I nomi degli attributi devono essere in minuscolo. <table WIDTH=“100%”> <div ALIGN=“center”> Questo è sbagliato! <table width=“100%”> <div align=“center”> Questo è corretto! Dott. Nicola Dragoni 13 Tecnologie di Internet Linguaggi di markup personalizzati 6. Valori attributi I valori degli attributi devono essere tra virgolette. <table width=100%> <img height=200 width=250> Questo è sbagliato! <table width=“100%”> <img height=“200” width=“250” /> Questo è corretto! Dott. Nicola Dragoni 14 Tecnologie di Internet Linguaggi di markup personalizzati 7. Gli attributi devono avere valori <input checked> <option selected> Questo è sbagliato! <input checked=“checked” /> <option selected=“selected” /> Questo è corretto! Dott. Nicola Dragoni 15 Tecnologie di Internet Linguaggi di markup personalizzati 8. Attributo “name” sostituito con “id” HTML 4.01 definisce un attributo “name” per gli elementi: a, applet, frame, iframe, img, map. In XHTML si usa l’attributo id al posto di “name”. <img src=“filename.gif” name=“picture1” /> Questo è sbagliato! <a name=“namedanchor”></a> <img src=“filename.gif” id=“picture1” /> <a id=“namedanchor”></a> Dott. Nicola Dragoni Questo è corretto! 16 Tecnologie di Internet Linguaggi di markup personalizzati 9. XHTML DTD definisce elementi obbligatori Tutti i documenti XHTML devono avere una dichiarazione DOCTYPE. Gli elementi html, head e body devono essere presenti e l’elemento title deve essere presente all’interno di head. Modello di documento XHTML: <!DOCTYPE Indicare qui il tipo di documento> <html> <head> <title>Indicare qui il titolo</title> </head> Può non avere il tag di chiusura! <body> Corpo del documento </body> </html> Dott. Nicola Dragoni 17 Tecnologie di Internet Linguaggi di markup personalizzati 10. <!DOCTYPE> obbligatoria La dichiarazione DOCTYPE deve essere sempre la prima linea in un documento XHTML. DOCTYPE definisce il tipo di documento. Il tipo di documento viene indicato con un XHTML DTD (Document Type Definition). Un XHTML DTD descrive, con un linguaggio preciso e computerreadable, la sintassi e la grammatica da rispettare per qualsiasi documento XHTML. Attualmente ci sono 3 differenti XHTML DTD. Dott. Nicola Dragoni 18 Tecnologie di Internet Linguaggi di markup personalizzati Tipi di documento XHTML 1. XHTML 1.0 Strict: questo DTD è consigliato quando la presentazione del documento è controllata da un CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. XHTML 1.0 Transitional: questo DTD è consigliato quando si vuole supportare browsers che non gestiscono CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. XHTML 1.0 Frameset: questo DTD è consigliato quando si vuole supportare i frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Dott. Nicola Dragoni 19 Tecnologie di Internet Linguaggi di markup personalizzati Namespace XHTML L’elemento radice <html> deve indicare la dichiarazione di un namespace XML usando l’attributo xmlns. Il namespace deve essere: “http://www.w3.org/1999/xhtml” <!DOCTYPE ... (Strict o Transitional o Frameset)> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <title>Indicare qui il titolo</title> Nuovo modello di </head> documento XHTML <body> Corpo del documento </body> </html> Dott. Nicola Dragoni 20 Tecnologie di Internet Linguaggi di markup personalizzati Prologo Il prologo di un documento XHTML è composto da due parti: • la dichiarazione XML • la definizione del DOCTYPE (vedi lucidi precedenti) La dichiarazione XML (<?xml version=“1.0”?>) rende esplicito il fatto che il documento è XML. Tale dichiarazione NON è obbligatoria, ma il suo uso è consigliato dal W3C per ogni documento XML. Schema PROLOGO XHTML <?xml version=“1.0” ?> <!DOCTYPE ... (Strict o Transitional o Frameset)> Dott. Nicola Dragoni 21 Tecnologie di Internet Linguaggi di markup personalizzati Riepiloghiamo con un esempio PROLOGO <?xml version=“1.0”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=“http://www.w3.org/1999/xhtml”> ELEMENTO RADICE <head> <title>Esempio di pagina XHTML</title> </head> TESTATA <body> <h1>Salve</h1> <p>Questo è un primo esempio di pagina XHTML!</p> </body> CORPO </html> Dott. Nicola Dragoni 22 Tecnologie di Internet Linguaggi di markup personalizzati Validare un documento XHTML Un documento XHTML è valido se rispetta le regole definite nel DTD XHTML. Perchè un documento XHTML possa essere correttamente validato, deve contenere una dichiarazione di DTD al suo interno (vedi dichiarazione DOCTYPE). Per validare un documento XHTML rispetto a un certo DTD è necessario quindi un validatore. Per usare il validatore XHTML del W3C basta andare alla pagina Web http://validator.w3.org (provarlo per esercizio!) Dott. Nicola Dragoni 23
Scarica
