HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi
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 (e i tag stessi) 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
Struttura di una pagina html <html> <head> <title>questo E IL TITOLO</title> </head> <body>questo E IL CONTENUTO <br/> </body> </html> Elementi di Informatica e Reti di Calcolatori 8
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 9
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 10
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 11
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 12
<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 13
<hr/> Permette Di specificare un cambio tematico all interno del documento Solitamente viene rappresentato per mezzo di una linea orizzontale Sintassi: <hr/> Elementi di Informatica e Reti di Calcolatori 14
<html> <head><title>titolo</title></head> <body> <h1>html</h1> <p>html is a language for describing web pages..</p> <hr/> </html> <h1>css</h1> <p>css defines how to display HTML elements...</p> </body> Elementi di Informatica e Reti di Calcolatori 15
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 16
Tabelle-bordi Permettono di formattare il layout di una parte della pagina in forma tabellare (righe, colonne) Sintassi <table border= 1 > <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 17
Tabelle attributi Background: permette di avere un'immagine come sfondo della tabella (o di una sua cella). Bgcolor: permette di avere un colore in tinta unita come sfondo della tabella (o di una sua cella). Border: permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è possibile impostarne anche lo spessore del bordo. Bordercolor: permette di selezionare il colore del bordo per funzionare deve necessariamente avere impostato anche l'attributo border. Elementi di Informatica e Reti di Calcolatori 18
Tabelle attributi Colspan rowspan: allargano righe e colonne senza alterare la struttura originale Height/width: servono per modificare le dimensioni della tabella Cellspacing: specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati della tabella. Cellpadding: specifica la quantità di spazio vuoto da lasciare tra i bordi delle celle della tabella e il dato vero e proprio in esse contenuto Elementi di Informatica e Reti di Calcolatori 19
Tabelle Tag: table, caption, tr, th, td Attributi: background, bgcolor, border, bordercolor, colspan, rowspan, height, width, cellspacing, cellpadding Elementi di Informatica e Reti di Calcolatori 20
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 21
<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 22
Elenchi HTML permette definire due tipi di elenchi I tag <ol> </ol> sono utilizzati per definire elenchi ordinati I tag <ul> </ul> sono utilizzati per definire elenchi non ordinati I tag <li> </li> sono utilizzati per definire i elementi nell elenco Elementi di Informatica e Reti di Calcolatori 23
Elenchi <html> <head><title>.:: Elenchi ::.</title></head> <body> <h1>ricetta ragù alla bolognese</h1> <h1>ingredienti</h1> <ul> <li>carota</li> <li>cipola</li> <li> </li> </ul> <h1>preparazione</h1> <ol> <li>pelate la cipolla e la carota</li> <li>togliete poi i filamenti al sedano</li> <li> </li> </ol> </body> </html> Elementi di Informatica e Reti di Calcolatori 24
Multimedia Nella pagina web è possibile caricare immagini <img src= image.jpg alt= Immagine non caricata width= 300 height= 300 /> audio (HTML 5) <audio src= music.mp3 controls= controls > </audio> e video (HTML 5) <video src= video.ogg controls= controls > </video> Elementi di Informatica e Reti di Calcolatori 25
Multimedia <html> <head><title>.:: Multimedia ::.</title></head> <body> <h1>image</h1> <img src="fortaleza.jpg"/><br/> <h1>audio</h1> <audio controls="controls" src="times.mp3"> Your browser does not support the audio element. </audio><br/> <h1>video</h1> <video controls="controls" src="big_buck_bunny_small.ogv"> Your browser does not support the video element. </video><br/> </body> </html> Elementi di Informatica e Reti di Calcolatori 26
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 27
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 28
Entità <html> <head> </head> <body> <title>.:: Entità ::.</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> Elementi di Informatica e Reti di Calcolatori 29
Entità <html> <head> </head> <body> <title>.:: Entità ::.</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 30
Entità <html> <head> </head> <body> <title>.:: Entità ::.</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> Il carattere < serve per visualizzare la < </body> </html> Il carattere & serve per visualizzare la & Elementi di Informatica e Reti di Calcolatori 31
Entità <html> <head> </head> <body> <title>.:: Entità ::.</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> Il carattere < serve per visualizzare la < </body> </html> Il carattere & serve per visualizzare la & Il carattere > serve per visualizzare la < Elementi di Informatica e Reti di Calcolatori 32
Entità <html> <head> </head> <body> <title>.:: Entità ::.</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> Il carattere < serve per visualizzare la < </body> </html> Il carattere & serve per visualizzare la & Il carattere > serve per visualizzare la < Il carattere serve per visualizzare lo spazio Elementi di Informatica e Reti di Calcolatori 33
Moduli La pagina HTML può definire un modulo per selezionare informazioni dell'utente I dati vengono processati da un linguaggio server-side I principali tag utilizzati per costruire un modulo sono <form> </form> Crea un modulo. Tutti i elementi del modulo vengono tra i tag <form> <input type= text /> Crea una casella di testo a linea singola <input type= submit value="submit"/> Crea un pulsante d'invio Elementi di Informatica e Reti di Calcolatori 34
Moduli <html> <head><title>.:: Moduli ::.</title></head> <h1>modulo</h1> <form action="process_form.cgi"> Nome: <input type="text"/> <input type="submit"/> </form> </html> Elementi di Informatica e Reti di Calcolatori 35