G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web XHTML Principali Moduli versione 2.0 Questo lavoro è concesso.

Presentazione sul tema: "G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web XHTML Principali Moduli versione 2.0 Questo lavoro è concesso."— Transcript della presentazione:

1 G. Mecca – mecca@unibas.it – Università della Basilicata Tecnologie di Sviluppo per il Web XHTML Principali Moduli versione 2.0 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina)

2 2 G. Mecca - Tecnologie di Sviluppo per il Web Sommario m Introduzione m XHTML Basic Moduli di XHTML Basic m Da XHTML Basic a XHTML 1.0 Strict Uso degli Standard XHTML >> Principali Moduli >> Sommario

3 3 G. Mecca - Tecnologie di Sviluppo per il Web Introduzione m Linguaggi di riferimento per il corso XHTML 1.0 Strict XHTML Basic m XHTML 1.0 Strict riformulazione di HTML 4.0 Strict in XML DTD successivamente diviso in moduli m XHTML Basic insieme minimo di moduli XHTML >> Principali Moduli >> Introduzione

4 4 G. Mecca - Tecnologie di Sviluppo per il Web Introduzione XHTML >> Principali Moduli >> Introduzione HTML4-frameset.dtd HTML4-transitional.dtd HTML4-strict.dtd HTML3.2.dtd XHTML1-frameset XHTML1-transitional XHTML1-strict XHTML-basic.dtd HTML2.0.dtd

5 5 G. Mecca - Tecnologie di Sviluppo per il Web XHTML Basic m Elenco completo dei moduli Structure, Text, Hypertext, List Image Basic Forms Basic Tables Link Object Meta, Base m Moduli mancanti script (es: JavaScript) tabelle nidificate m Altri moduli presentazione (es: b) mappe frame legacy tag (es: font) XHTML >> Principali Moduli >> XHTML Basic

6 6 G. Mecca - Tecnologie di Sviluppo per il Web XHTML Basic m Nella lezione Structure, Text, Hypertext, List Image Basic Tables Meta m Nelle lezioni successive Link Basic Forms XHTML >> Principali Moduli >> XHTML Basic

7 7 G. Mecca - Tecnologie di Sviluppo per il Web XHTML Basic m Cosa resta modulo Object e modulo Base m Modulo Object serve per immergere in una pagina oggetti arbitrari (es: plug-in e applet) m Modulo Base molto poco utilizzato serve a specificare un URI di base per espandere i riferimenti relativi nella pagina XHTML >> Principali Moduli >> XHTML Basic

8 8 G. Mecca - Tecnologie di Sviluppo per il Web XHTML Basic m Intestazione di una pagina XHTML-basic m Il DTD di XHTML Basic xhtml-basic10.dtd numerosi file, uno per ciascun modulo XHTML >> Principali Moduli >> XHTML Basic

9 9 G. Mecca - Tecnologie di Sviluppo per il Web XHTML Basic m Moduli di XHTML Basic sono sostanzialmente pezzi di DTD definiscono alcuni elementi e i loro attributi m Come descriverli attraverso lalbero corrispondente attraverso il codice del DTD oppure semplicemente attraverso la descrizione degli elementi e degli attributi (sceglieremo questa soluzione) XHTML >> Principali Moduli >> XHTML Basic

10 10 G. Mecca - Tecnologie di Sviluppo per il Web XHTML Basic m Elementi di flusso elementi a livello di blocco, elementi in linea m Elementi a livello di blocco titoli (headings) blocchi (block) (es: paragrafi, tabelle ecc.) liste (list) m Elementi in linea testo, collegamenti, immagini ecc. XHTML >> Principali Moduli >> XHTML Basic

11 11 G. Mecca - Tecnologie di Sviluppo per il Web XHTML Basic m Entità Latin, Special, Symbol m Attributi di uso comune per gli elementi id: attribuisce un identificatore ad un elemento class: attribuisce un id. di classe ad un elem. xml:lang: specifica la lingua del contenuto XHTML >> Principali Moduli >> XHTML Basic

12 12 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Struttura XHTML >> Principali Moduli >> XHTML Basic html body head title #PCDATA xmlns= http://www.w3.org/ 1999/xhtml U 0..* heading blocklist

13 13 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Struttura XHTML >> Principali Moduli >> XHTML Basic elementoattributomodello di contenuto htmlxmlns, xml:lang(head, body) headxml:lang(title) titlexml:lang#PCDATA bodyid, class, xml:lang (heading | block | list)*

14 14 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Struttura XHTML >> Principali Moduli >> XHTML Basic Esempio...

15 15 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Metainformazioni m Funzione consentire di specificare meta-informazioni sul contenuto di una pagina m Un unico elemento: meta si aggiunge al modello di contenuto di head XHTML >> Principali Moduli >> XHTML Basic elementoattributomodello di contenuto metaname, content, http-equiv … EMPTY

16 16 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Metainformazioni m Informazioni nellelemento meta insieme di coppie di attributi name, content es: m Inoltre può essere utilizzato per specificare intestazioni HTTP relative alla pagina attributo http-equiv es: /> XHTML >> Principali Moduli >> XHTML Basic

17 17 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Metainformazioni XHTML >> Principali Moduli >> XHTML Basic Esempio...

18 18 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Testo m Definisce tre categorie di elementi heading, block, inline m Heading titoli delle sezioni del documento m Block blocchi identificabili del documento possono contenere altri blocchi, inline e testo m Inline porzioni di testo, contengono solo inline o testo XHTML >> Principali Moduli >> XHTML Basic

19 19 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Testo m Heading h1, h2, h3, h4, h5, h6 m Block p: paragrafi pre: testo preformatt. div: raggruppamento di elementi in blocco address: indirizzi blockquote: citazioni (attributo cite) m Inline br: interruzione di linea span:raggruppamento di elementi in linea em: enfatizzato strong: rafforzato q: citazioni brevi (attributo cite) … XHTML >> Principali Moduli >> XHTML Basic

20 20 G. Mecca - Tecnologie di Sviluppo per il Web Modulo di Testo XHTML >> Principali Moduli >> XHTML Basic Esempio Titolo principale Questo è un documento di esempio relativo ad XHTML Basic Sono andato a capo

21 21 G. Mecca - Tecnologie di Sviluppo per il Web Modulo Ipertestuale m Elemento a (ancora) collegamenti ad altri URI attributo href con riferimento ad URI si aggiunge agli elementi inline XHTML >> Principali Moduli >> XHTML Basic elementoattributomodello di contenuto ahref …(#PCDATA | inline)

22 22 G. Mecca - Tecnologie di Sviluppo per il Web Modulo Ipertestuale XHTML >> Principali Moduli >> XHTML Basic Titolo principale Questo è un documento di esempio relativo ad XHTML Basic Sono andato a capo Sito del DIFA Una pagina di prova

23 23 G. Mecca - Tecnologie di Sviluppo per il Web Modulo delle Immagini m Elemento img riferimento ad unimmagine da immergere nella pagina XHTML durante la visualizzaz. formati ordinari: gif, jpg si aggiunge agli elementi inline XHTML >> Principali Moduli >> XHTML Basic elementoattributomodello di contenuto imgsrc alt width, height, … EMPTY

24 24 G. Mecca - Tecnologie di Sviluppo per il Web Modulo delle Immagini XHTML >> Principali Moduli >> XHTML Basic...... Una pagina di prova <img src=lavagna.gif alt=Immagine di una lavagna width=259 height=248 />

25 25 G. Mecca - Tecnologie di Sviluppo per il Web Modulo delle Liste m Liste di elementi m Due tipologie numerate (ol) e non numerate (ul) XHTML >> Principali Moduli >> XHTML Basic elementoattributomodello di contenuto ol…(li)+ ul…(li)+ li…(#PCDATA | flow)*

26 26 G. Mecca - Tecnologie di Sviluppo per il Web Modulo delle Liste XHTML >> Principali Moduli >> XHTML Basic... primo elemento di una lista secondo elemento di una lista... primo elemento di una lista secondo elemento di una lista...

27 27 G. Mecca - Tecnologie di Sviluppo per il Web Modulo delle Tabelle m Tabelle elemento radice: table attributo summary per descrivere il contenuto didascalia opzionale dopo table: caption una o più righe: tr fatte di una o più celle di valori: td eventuali celle di intestazione: th XHTML >> Principali Moduli >> XHTML Basic

28 28 G. Mecca - Tecnologie di Sviluppo per il Web Modulo delle Tabelle XHTML >> Principali Moduli >> XHTML Basic elementoattributomodello di contenuto tablesummary …(caption?, tr+) caption…(#PCDATA | inline)* tr…(th | td)+ thcolspan, rowspan, scope (row | column) … (#PCDATA | flow)* meno altri elementi table tdcolspan, rowspan …(#PCDATA | flow)* meno altri elementi table

29 29 G. Mecca - Tecnologie di Sviluppo per il Web Esempio XHTML >> Principali Moduli >> XHTML Basic Finestra del Browser ABCD xxxyyyzzzww due righe123tre col. A B C xxx yyy zzz ww due righe 123 tre col.

30 30 G. Mecca - Tecnologie di Sviluppo per il Web Modulo delle Tabelle XHTML >> Principali Moduli >> XHTML Basic Orario lezioni Orario Lunedi Martedi 8-9 Basi Dati Calcolo 9-10 Sv. Web Calcolo

31 31 G. Mecca - Tecnologie di Sviluppo per il Web Riassumendo m Rivediamo lesempio completo m Attenzione il browser non effettua convalide è necessario verificare la correttezza del codice m Validatori xmlvalid http://validator.w3.org, validatore in linea XHTML >> Principali Moduli >> XHTML Basic >> esempioXHTMLBasic.html >> DOM Inspector >> xmlvalid

32 32 G. Mecca - Tecnologie di Sviluppo per il Web Validatore HTML e XHTML

33 33 G. Mecca - Tecnologie di Sviluppo per il Web Validatore HTML e XHTML

34 34 G. Mecca - Tecnologie di Sviluppo per il Web Da XHTML Basic a XHTML 1.0 Strict m Per la maggior parte delle applicazioni XHTML Basic e CSS consentono di sviluppare la maggior parte dei siti vantaggio: è praticamente visualizzabile da qualsiasi browser e dispositivo m In alcuni casi se i moduli sono insufficienti, allora è possibile utilizzare XHTML 1.0 Strict XHTML >> Principali Moduli >> XHTML Basic

35 35 G. Mecca - Tecnologie di Sviluppo per il Web Da XHTML Basic a XHTML 1.0 Strict m Limiti tipici di XHTML Basic non consente di utilizzare tabelle nidificate >> modulo Tables di XHTML 1.0 Strict non consente di utilizzare script nella pagina (es: JavaScript): >> modulo Script non consente di utilizzare alcuni controlli nelle maschere: >> modulo Form non consente di specificare stili CSS per i singoli elementi: >> modulo Style XHTML >> Principali Moduli >> XHTML Basic

36 36 G. Mecca - Tecnologie di Sviluppo per il Web Utilizzo degli Standard m In questi casi è necessario consultare lo standard di XHTML 1.0 Strict: documenti del consorzio purtroppo la consultazione non è semplicissima m Esempio supponiamo di voler verificare la sintassi e la semantica di un elemento di XHTML Basic oppure di XHTML 1.0 Strict XHTML >> Principali Moduli >> XHTML Basic

37 37 G. Mecca - Tecnologie di Sviluppo per il Web Utilizzo degli Standard m I Caso: elemento di XHTML Basic m I Passo standard XHTML Basic moduli appartenenti al linguaggio ed elementi m II Passo Modularization of XHTML definizione del modulo m III Passo standard di HTML 4.0 semantica degli elementi XHTML >> Principali Moduli >> XHTML Basic

38 38 G. Mecca - Tecnologie di Sviluppo per il Web Utilizzo degli Standard m I Caso: elemento di XHTML 1.0 Strict m I Passo Modularization of XHTML definizione del modulo m II Passo standard di HTML 4.0 semantica degli elementi m Inoltre standard XHTML 1.0 caratteristiche di base del linguaggio XHTML >> Principali Moduli >> XHTML Basic

39 39 G. Mecca - Tecnologie di Sviluppo per il Web Riassumendo m Introduzione m XHTML Basic Moduli di XHTML Basic m Da XHTML Basic a XHTML 1.0 Strict Uso degli Standard XHTML >> Principali Moduli >> Sommario

40 40 G. Mecca - Tecnologie di Sviluppo per il Web Elenco dei Moduli m Structure Module* body, head, html, title m Metainformation Module meta m Text Module* abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var m Hypertext Module* a m Image Module img m List Module* dl, dt, dd, ol, ul, li m Basic Tables Module caption, table, td, th, tr m Link Module link m Basic Forms Module form, input, label, select, option, textarea m Object Module object, param m Base Module base XHTML >> Principali Moduli >> Appendice

41 41 G. Mecca - Tecnologie di Sviluppo per il Web Termini della Licenza m This work is licensed under the Creative Commons Attribution- ShareAlike License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. http://creativecommons.org/licenses/by-sa/1.0/ m Questo lavoro viene concesso in uso secondo i termini della licenza Attribution-ShareAlike di Creative Commons. Per ottenere una copia della licenza, è possibile visitare http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una lettera allindirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. http://creativecommons.org/licenses/by-sa/1.0/