HTML e XML Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola
Indice Il linguaggio del Web Cenni di HTML HTML come linguaggio formale I CSS Cenni di XML XML vs. HTML Elementi di Informatica e Reti di Calcolatori 2
Hyper Text Markup Language (HTML) HTML è un linguaggio di contrassegno testuale Un documento HTML è un file di testo che contiene due classi di informazioni Contenuto: il testo vero e proprio del documento; da solo non garantisce la leggibilità Sistema di contrassegno (mark-up): informazioni aggiuntive al contenuto, per determinarne le modalità di presentazione; a loro volta queste informazioni possono essere suddivise in due classi: Struttura: informazioni su come è diviso logicamente il documento (titolo, paragrafi, capitoli ) Formattazione: informazioni sulla presentazione del documento (font, colori, spaziature ) Un editor di testo è sufficiente per creare documenti HTML Elementi di Informatica e Reti di Calcolatori 3
Primo Esempio Un documento html può avere estensione.htm o.html Es.: index.html Tag iniziale Tag finale <html> <head> <title>questo E IL TITOLO</title> </head> <body>questo E IL CONTENUTO</body> </html> Contenuto Elementi di Informatica e Reti di Calcolatori 4
Elementi Un documento HTML è composto da ELEMENTI Un elemento può a sua volta contenerne altri in modo nidificato Un ELEMENTO è composto da un testo solitamente racchiuso tra 2 tag che ne indicano l inizio e la fine Es.: <html> </html> Alcuni elementi hanno solo il tag di inizio Es.: <br/> usato come interruzione di riga I tag hanno sempre la forma < nome_tag > Il contenuto di un ELEMENTO è la stringa testuale racchiusa tra i due tag Testo Altri elementi nidificati I tag non sono case sensitive <HTML> <html> Elementi di Informatica e Reti di Calcolatori 5
Attributi I tag possono avere degli attributi Gli attributi consentono al designer di definire caratteristiche e proprietà di un elemento adattandolo al contesto del documento Sono sempre nel formato nome_attributo= valore Es.: <IMG SRC= sfondo1.gif > Sono sempre aggiunti nel tag iniziale dell elemento I browser commerciali permettono di usare attributi proprietari al di fuori degli standard. E una pratica sconsigliata poiché: Su browser diversi si potrebbero ottenere risultati diversi In alcuni casi attributi non aderenti allo standard vengono ignorati Elementi di Informatica e Reti di Calcolatori 6
Elemento <title>questo E IL TITOLO</title> Start Tag Contenuto End Tag Gli elementi br e img non hanno il tag finale <html> <head> Attributo <title>questo E IL TITOLO</title> </head> <body>questo E IL CONTENUTO <br/> <img src= immagine.jpg alt= immagine non caricata /> </body> </html> Elementi di Informatica e Reti di Calcolatori 7
Formattazione del testo: Headings Sono definiti dai tag <H1> fino ad <H6> Vengono utilizzati per differenziare diverse parti di un documento in base alla loro importanza Vengono visualizzati da diversi browser con variazioni nelle dimensioni e nello stile, ma tutti seguono la regola che viene visualizzato lo stile di dimensioni maggiori in grassetto con H1 e quello di dimensioni minori con H6 L autore può variare lo stile (grassetto-sottolineato ) all interno dell elemento Elementi di Informatica e Reti di Calcolatori 8
Paragrafi Il browser non visualizza gli spazi multipli e i new line (= a capo ) Ogni sequenza di spazi viene contata come un solo carattere di spazio Ogni a capo viene tradotta in uno spazio Come risultato tutto il documento viene riportato su una sola riga e riformattato in base alla dimensione della finestra Un modo per dividere il documento in paragrafi usare l elemento <P> testo </P> Perché non usare <br>? <br> va semplicemente a capo mentre <P> aggiunge solitamente mezza riga di spazio per separare il paragrafo dal resto Con <P> è possibile formattare tutto il paragrafo con lo stesso stile Elementi di Informatica e Reti di Calcolatori 9
Stili Fisici Vincolano il testo ad avere un determinato aspetto Stile del carattere Dimensione Colore <B> </B> testo in grassetto <I> </I> testo corsivo <SUP> </SUP> apice <SUB> </SUB> pedice <INS> </INS> testo inserito <DEL> </DEL> testo cancellato Elementi di Informatica e Reti di Calcolatori 10
Stili logici Dicono che funzione ha una parte di testo anziché stabilire fisicamente a come viene visualizzato Sarà il browser a decidere come visualizzarli <EM> </EM> testo enfatizzato <STRONG> </STRONG> testo di maggiore enfasi <ADDRESS> </ADDRESS> contrassegna indirizzi di posta Si comporta in modo simile a <p> separando il contenuto dal resto del documento Elementi di Informatica e Reti di Calcolatori 11
<html> <head> <title>questo E IL TITOLO</title> </head> <body> <h1>stili fisici</h1> <b>grasseto</b><br/> <i>corsivo</i><br/> normale <sup>apice</sup><br/> normale <sub>pedice</sub><br/> <ins>testo inserito</ins><br/> <del>testo cancellato</del><br/> <h1>stili logici</h1> <em>enfatizzato</em><br/> </body> </html> Elementi di Informatica e Reti di Calcolatori 12
Entità Hanno due funzioni Permettono di inserire caratteri non presenti sulla tastiera Permettono di visualizzare caratteri che hanno un significato particolare in html e non verrebbero visualizzatio in altro modo Es. < e > Si definiscono in due modi &nome_entità; (es. <) &#numero_entità; (es. ) Elementi di Informatica e Reti di Calcolatori 13
<html> <head> </head> <body> <title>titolo</title> <h1>entità</h1> <p>un uso comune è il carattere di   che viene tradotto in uno spazio non ignorato: <    > </p> <p>il carattere © equivale a © e viene visualizzato cosi: </p> </body> </html> Il carattere & serve per visualizzare la & Elementi di Informatica e Reti di Calcolatori 14
Link È l elemento che più ha contribuito all espansione del World Wide Web Permette Di navigare dal documento corrente ad un altro Di navigare tra due punti dello stesso documento Di adoperare altri servizi (mail, ftp, ) Sintassi: LINK: <a href= URL > testo visualizzato </a> ANCORA: permette di navigare direttamente verso un punto del documento <a name="label"> testo visualizzato </a> Elementi di Informatica e Reti di Calcolatori 15
<html> <head><title>titolo</title></head> <body> <h1>links</h1> <p><a href="lastpage.html">questo link</a> punta ad una pagina all interno del sito</p> <p><a href="http://www.google.it">questo link</a> punta ad una pagina all esterno del sito</p> <p><a href="#ultima_riga">questo link</a> punta ad una ancora all interno del documento</p> <p><a name="ultima_riga">questa è un ancora</a> alla quale un link può puntare</p> </body> </html> Elementi di Informatica e Reti di Calcolatori 16
Immagini Permettono di inserire immagini a una pagina HTML Sintassi <img src="angry.gif" alt="angry face" /> Specifica la URL della immagine Specifica un testo alternativo Elementi di Informatica e Reti di Calcolatori 17
Tabelle Permettono di formattare il layout di una parte della pagina in forma tabellare (righe, colonne) Sintassi <table> <caption> didascalia </caption> <tr attributi> </tr> <tr> </tr> </table> <th>titolo prima col.</th> <th>titolo seconda col.</th> <td>prima colonna, prima riga</td> <td>seconda colonna, prima riga</td> Elementi di Informatica e Reti di Calcolatori 18
Commenti I commenti sono usati per rendere il codice più leggibile Non sono visti dall utente finale Vengono sempre tra <!-- e --> Esempio <!-- questo è un commento sulla tabella --> <table> <caption> didascalia </caption> <tr attributi> <th>titolo prima col.</th> <th>titolo seconda col.</th> </tr> </table> Elementi di Informatica e Reti di Calcolatori 19
HTML come linguaggio formale HTML è un linguaggio formale Questo significa che E sempre possibile decidere se una frase fa parte o meno del linguaggio (decidibilità) E possibile determinare in modo univoco il significato di una frase In un linguaggio formale distinguiamo: Sintassi: insieme delle regole che permettono di costruire frasi corrette Semantica: insieme delle regole che permettono di dare un significato alle frasi del linguaggio (una frase può essere sintatticamente corretta ma non aver nessun significato semantico) In generale la programmazione di un computer avviene attraverso un linguaggio formale Ovvero: Un linguaggio di programmazione è un linguaggio formale, non sempre è vero il viceversa HTML NON E un linguaggio di programmazione Elementi di Informatica e Reti di Calcolatori 20
Grammatica La sintassi di un linguaggio formale viene descritta attraverso una grammatica Una grammatica formale viene descritta: Definendo tutti i simboli che è possibile utilizzare nel linguaggio Definendo le regole sintattiche che permettono di utilizzare i simboli per generare frasi Per esempio nella grammatica del linguaggio HTML I simboli sono rappresentati dall insieme dei caratteri dell alfabeto e da tutte le parole speciali <html>,</html>, Le regole sintattiche sono tutte quelle che si occupano del corretto uso degli elementi (tag di apertura e di chiusura, attributi, ) Elementi di Informatica e Reti di Calcolatori 21
<table> <caption> didascalia </caption> <tr> <th>titolo prima col.</th> <th>titolo seconda col.</th> </tr> <tr> <td>prima colonna, prima riga</td> <td>seconda colonna, prima riga</td> </tr> </table> <tr> <td>prima colonna, terza riga</td> <td>seconda colonna, prima riga</td> </tr> Errore sintattico: l elemento <table> è stato chiuso in modo imprevisto. Elementi di Informatica e Reti di Calcolatori 22
<table> <tr> <th>titolo prima col.</th> <th>titolo seconda col.</th> </tr> <tr> <td colspan= yes >prima riga</td> </tr> </table> Errore semantico: il documento è sintatticamente corretto ma il funzionamento non è quello desiderato dall autore. Elementi di Informatica e Reti di Calcolatori 23
HTML 3 HTML si è evoluto in un linguaggio, fino alla versione 3.0, che miscela, in un unico documento, contenuto, struttura e presentazione Es: Contenuto : Hello World! Contenuto + Struttura: <P> Hello World! </P> Contenuto + Struttura + Presentazione: <P font= size= > Hello World! </P> Elementi di Informatica e Reti di Calcolatori 24
Svantaggi di HTML 3 Mescolare Struttura e Presentazione: Pregiudica l indipendenza delle figure professionali associate ai vari aspetti delle pagine Rende difficile la modifica dei singoli aspetti delle pagine successivamente alla loro creazione, complicando, tra le altre cose: l'aggiornamento del contenuto il restyling dei siti il miglioramento dell'usabilità Costringe a duplicare il contenuto e la struttura qualora se ne volessero realizzare presentazioni alternative per esempio per la visualizzazione su diversi dispositivi Diminuisce l'accessibilità Rende difficile l'estrazione del contenuto da parte di procedure automatiche Elementi di Informatica e Reti di Calcolatori 25
HTML 4 HTML 4 propone un nuovo approccio Un'architettura in cui i vari aspetti caratteristici delle pagine sono nettamente separati Dal punto di vista logico e fisico Ad ognuno di essi corrisponde uno strato (layer) o livello indipendente Elementi di Informatica e Reti di Calcolatori 26
HTML 5 HTML 5 impone l approccio introdotto da HTML 4 Diversi attributi legati a formattazione vengono rimossi Supporto a siti web più moderni Multimedia senza plug-ins <audio>,<video>, <canvas> Local offline storage Geolocation Elementi di Informatica e Reti di Calcolatori 27
Class e Div Incoraggiano la sostituzione degli elementi e degli attributi di presentazione con altri meccanismi. Attributo class: Consente di classificare più finemente i tag HTML per applicare formati in modo selettivo Elemento <div> : Il tag HTML <div> può essere usato per delimitare generiche sezioni di contenuto La sezione può essere classificata con l attributo class <div> + class: Permette di definire delle marcature personalizzate per il contenuto Elementi di Informatica e Reti di Calcolatori 28
Esempi <h2 class= miotitolo">getting started</h2> Definisce la classe miotitolo come un nuovo sottotipo dell elemento <h2> <div class= contornato"> testo da contornare con un bordo fine </div> Definisce un nuovo marcatore tramite la classe contornato Le proprietà stilistiche delle classi miotitolo e contornato devono essere definite a parte: Fogli di Stile (Style Sheets) Elementi di Informatica e Reti di Calcolatori 29
I cascading style sheet I CSS permettono una agevole separazione tra forma e contenuto Per ogni pagina html è possibile specificare le caratteristiche di formattazione di ogni tag Ad esempio è possibile dire che il tag H1 deve apparire in bold, 20pt, blu Tale specifica può essere inserita nello header della pagina o può apparire in un file distinto In tal modo è possibile centralizzare in un unico punto gli aspetti di formattazione relativi a tutte le pagine di un certo sito Il meccanismo del cascading permette di differenziare in maniera agevole tra caratteristiche generali e caratteristiche specifiche di una singola pagina E possibile associare stili diversi a diversi supporti (video, carta, ecc.) Elementi di Informatica e Reti di Calcolatori 30
CSS e HTML: Come Style sheet embedded <HTML> <HEAD> <TITLE>Bach's home page</title> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Bach's home page</h1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML> Style sheet collegato <HTML> <HEAD> <TITLE>Bach's home page</title> <LINK rel="stylesheet" href="bach.css" type="text/css"> </HEAD> <BODY> <H1>Bach's home page</h1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML> File bach.css h1 { color: red } Elementi di Informatica e Reti di Calcolatori 31
Il meccanismo del cascading Una stessa pagina html può fare riferimento a più CSS Uno o più collegati, uno incorporato Se lo stesso elemento e la stessa proprietà sono definiti in più fogli stile fa fede l ultimo ad essere stato definito Nell ordine stabilito dall header della pagina Per ogni elemento, le propretà non definite in un foglio stile si cercano nei fogli stile precedenti In tal modo è possibile avere un foglio stile generale per un intero sito, più alcuni fogli stile per zone diverse del sito (che collegano anche il foglio stile generale ridefinendo solo gli elementi/proprietà utili), più degli stili embedded per la singola pagina Elementi di Informatica e Reti di Calcolatori 32
Esempi di proprietà definibili Margini, rientri (esempio con tre regole) <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%; } h2, h3, h4, h5, h6 { } </style> margin-left: -4%; Elementi di Informatica e Reti di Calcolatori 33
Uso dell attributo class Esempio di testo HTML: <h2 class="subsection">getting started</h2> Regola di stile applicata solo alle occorrenze di h2 con class=subsection: h2.subsection { margin-top: 8em; margin-bottom: 3em; } Elementi di Informatica e Reti di Calcolatori 34
Uso dell elemento DIV Si può scrivere una regola che si applica solo alle sezioni volute div.box { border: solid; border-width: thin; } Si applica ad esempio a: <div class="box"> testo da contornare con un bordo fine </div> testo da contornare con un bordo fine Elementi di Informatica e Reti di Calcolatori 35
Vantaggi Facilita le modifiche alla presentazione di tutte le pagine Facilita le revisioni dei documenti Rende HTML estensibile in modo consistente Permette la produzione di documenti autodescrittivi Elementi di Informatica e Reti di Calcolatori 36
Indice Il linguaggio del Web Cenni di HTML HTML come linguaggio formale I CSS Cenni di XML XML vs. HTML Elementi di Informatica e Reti di Calcolatori 37
XML: un linguaggio a markup estensibile L Extensible Markup Language (XML) è uno standard del W3C nato nel febbraio del 1998 Si tratta di un linguaggio a markup estensibile Un sottoinsieme di SGML Con il quale è possibile creare nuovi tag Tale linguaggio può essere usato per descrivere, in forma testuale, informazioni strutturate Es. Descrivere un prodotto avente un codice, un colore, una descrizione testuale Descrivere un prodotto composto da parti ognuna delle quali caratterizzata da informazioni specifiche Il suo ambito naturale di utilizzo è quindi nel supporto alle attività di business-to-business Elementi di Informatica e Reti di Calcolatori 38
XML: un linguaggio a markup estensibile Come tutte le specifiche W3C, XML è uno standard aperto e indipendente dalla piattaforma Un documento XML è un documento di puro testo composto da dati e tag In tal senso un documento XML assomiglia ad un documento HTML L intero linguaggio HTML può essere definito usando XML Elementi di Informatica e Reti di Calcolatori 39
XML: un esempio <?xml version="1.0" standalone="yes"?> <person> <name> <title>ing.</title> <first-name>mario</first-name> <last-name>rossi</last-name> </name> <address type= work > <street>p.zza Leonardo da Vinci</street> <number>1</number> <city></city> <country>italia</country> <zipcode>20133</zipcode> </address> </person> Elementi di Informatica e Reti di Calcolatori 40
XML vs. HTML HTML è un linguaggio di descrizione di pagina I tag HTML permettono di descrivere come certe informazioni dovranno apparire a video HTML fornisce informazioni legate all aspetto dei dati XML è un linguaggio di descrizione di dati I tag XML nascono per definire informazioni riguardanti il tipo del dato, come esso sia strutturato e cosa le diverse parti rappresentino I tag HTML sono predefiniti Nuove versioni di HTML aggiungono sempre nuovi tag XML permette la definizione di nuovi tag Elementi di Informatica e Reti di Calcolatori 41
Possibili utilizzi di XML In generale XML facilita lo scambio di dati tra applicazioni Per applicazioni di business-to-business Per permettere l interoperabilità tra applicazioni diverse Es. Database Per creare formati standard che superino i vincoli dei formati proprietari (es. file word vs. XML) Miglioramento delle tecnologie di ricerca Es. ricerca di informazioni commerciali (prezzo migliore per un certo tipo di prodotto) Scambio di informazioni tra agenti o tra agenti e siti Se HTML è il linguaggio per il rendering di informazioni sotto forma di pagine web, XML è il linguaggio per lo scambio dati su web Elementi di Informatica e Reti di Calcolatori 42
Caratteristiche di un documento XML Ogni documento XML inizia con una dichiarazione nella forma: <?xml version="1.0" standalone="yes"?> Un documento XML può essere: Ben formato Valido Un documento ben formato soddisfa le regole generali di XML Per ogni tag aperto ne esiste uno chiuso Vengono rispettate le regole di inclusione... Un documento valido è un documento ben formato al quale è associato un document type definition (DTD) Il DTD definisce quali tag possano essere utilizzati e come Elementi di Informatica e Reti di Calcolatori 43
Documenti ben formati Un documento XML è ben formato se: Ha uno ed un solo elemento radice Che non è contenuto all interno di nessun altro elemento Viene rispettata la regola di corretto annidamento tra elementi Per ogni start-tag interno ad un elemento X esiste un end-tag posto prima della fine di X Vengono rispettate le regole sulla sintassi dei tag Uso di soli caratteri alfanumerici nel nome del tag, Un documento ben formato può essere utilizzato per descrivere un qualsiasi tipo di dato Ad esso non è esplicitamente associato alcun descrittore del tipo Elementi di Informatica e Reti di Calcolatori 44
I DTD Un DTD definisce le regole che un documento XML deve soddisfare per essere considerato valido rispetto a quel DTD Tali regole definiscono nome e tipo del contenuto di ogni elemento che può apparire nel documento Nonché le regole che definiscono dove tale elemento può o deve apparire all interno del documento Un DTD rappresenta la definizione della grammatica di un linguaggio Il linguaggio che deve essere usato per definire tutti i documenti validi rispetto a quel DTD Elementi di Informatica e Reti di Calcolatori 45
I DTD: Un esempio <!ELEMENT MEMO (TO,FROM,SUBJECT,BODY,SIGN)> <!ATTLIST MEMO importance (HIGH MEDIUM LOW) "LOW"> <!ELEMENT TO (#PCDATA)> <!ELEMENT FROM (#PCDATA)> <!ELEMENT SUBJECT (#PCDATA)> <!ELEMENT BODY (P+)> <!ELEMENT P (#PCDATA)> <!ELEMENT SIGN (#PCDATA)> <!ATTLIST SIGN signaturefile CDATA #IMPLIED email CDATA #REQUIRED> Elementi di Informatica e Reti di Calcolatori 46
Documenti validi Un documento XML è valido se: E ben formato Ha un DTD associato E conforme al DTD associato Rispetta le regole sintattiche ivi definite Un documento XML valido inizia con la dichiarazione: <?xml version="1.0" standalone= no"?> L associazione documento XML DTD si ottiene tramite l uso del tag DOCTYPE nel documento XML: <!DOCTYPE MEMO SYSTEM "memo.dtd"> oppure <!DOCTYPE MEMO [ ] Elementi di Informatica e Reti di Calcolatori 47
XML: un insieme di tecnologie CSS XSL XSLT XPath DOM Elementi di Informatica e Reti di Calcolatori 48