Fondamenti di Markup Languages: Richiami di HTML © 2004 Nicola Dragoni © 2005 Stefano Clemente Stefano Clemente
15 Dicembre 2005Stefano Clemente2 Riferimenti bibliografici
15 Dicembre 2005Stefano Clemente3 Composizione di un documento HTML Un documento HTML è formato da elementi (ad esempio, tabelle, paragrafi, liste). Ogni elemento è individuato da una etichetta. In HTML una etichetta è formata da: Le etichette sono usate normalmente in coppia. Alcune etichette possono avere degli attributi. Corso CorsoAd esempio, Corso indica che la parola Corso deve essere presentata in grassetto.
15 Dicembre 2005Stefano Clemente4 Esempio 1: Un semplice documento HTML <HTML><HEAD> Semplice Esempio di HTML Semplice Esempio di HTML </HEAD><BODY> Questo è un piccolo documento HTML Questo è un piccolo documento HTML </BODY></HTML>
15 Dicembre 2005Stefano Clemente5 Testa e Corpo di un documento Un documento HTML deve iniziare con l'etichetta ed essere concluso con l'etichetta Un documento HTML è formato da una TESTA, individuata dalle etichette e, e da un CORPO, individuato dalle etichette e … − TESTA: … La TESTA contiene il titolo del documento, individuato dalle etichette e e alcune informazioni generali che possono essere utilizzate dal browser ( ) … − CORPO: … Il CORPO contiene l’informazione effettiva contenuta nel documento. Le etichette e introducono una intestazione
15 Dicembre 2005Stefano Clemente6 Titoli e Intestazioni TITOLI − Ogni ipertesto HTML dovrebbe avere un titolo − Un titolo è generalmente mostrato separatamente dal documento ed è usato principalmente per l'identificazione del documento in altri contesti INTESTAZIONI Testo dell’intestazione y16 − HTML ha sei livelli di intestazioni (numerati da 1 a 6), con 1 quello più evidenziato. La sintassi dell'intestazione è Testo dell’intestazione dove y è un numero tra 1 e 6 che specifica il livello di grandezza. HTML è case insensitive
15 Dicembre 2005Stefano Clemente7 Paragrafo L'etichetta individua un paragrafo Ciascun paragrafo deve essere terminato con ALIGNUn paragrafo può essere allineato a sinistra, a destra o al centro con l'attributo ALIGN − ALIGN=LEFT − ALIGN=LEFT allinea a sinistra − ALIGN=CENTER − ALIGN=CENTER allinea al centro − ALIGN=RIGHT − ALIGN=RIGHT allinea a destra Per porre un paragrafo (o più in generale un qualsiasi elemento HTML) al centro di un documento si può usare anche l'etichetta
15 Dicembre 2005Stefano Clemente8 Esempio 2 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Questo è un piccolo documento HTML Questo è un piccolo documento HTML Benvenuti al mondo di HTML. Benvenuti al mondo di HTML. Questo è il primo paragrafo Questo è il primo paragrafo </HTML>
15 Dicembre 2005Stefano Clemente9 Paragrafo In un file HTML i new-line e gli spazi sono insignificanti Il browser ignora ogni indentazione o riga vuota nel testo sorgente Senza l'etichetta il documento diviene un unico largo paragrafo Non c’è alcuna differenza tra e
15 Dicembre 2005Stefano Clemente10 Testo preformattato ed etichetta Testo preformattato ed etichetta Inserendo l'etichetta si segnala al browser di visualizzare il testo come è scritto rispettando quindi i newline e gli spazi Quando si crea un nuovo paragrafo, il browser inserisce automaticamente uno spazio tra il nuovo paragrafo ed il vecchio Se si vuole cambiare riga senza creare questo spazio si può usare l'etichetta
15 Dicembre 2005Stefano Clemente11 Esempio 3 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Questo è un piccolo documento HTML Questo è un piccolo documento HTML Benvenuti al mondo di HTML. Benvenuti al mondo di HTML. Questo è il primo paragrafo Questo è il primo paragrafo Questo è un esempio di Questo è un esempio di testo preformattato. testo preformattato. Il browser lo visualizza esattamente come Il browser lo visualizza esattamente come è scritto nel codice sorgente HTML. è scritto nel codice sorgente HTML. </HTML>
15 Dicembre 2005Stefano Clemente12 Esempio 3
15 Dicembre 2005Stefano Clemente13 Esempio 4 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Questo è un piccolo documento HTML Questo è un piccolo documento HTML Benvenuti al mondo di HTML. Benvenuti al mondo di HTML. Questo è il primo paragrafo Questo è il primo paragrafo Questo è un esempio di Questo è un esempio di testo preformattato. testo preformattato. Il browser lo visualizza esattamente come Il browser lo visualizza esattamente come è scritto nel codice sorgente HTML. è scritto nel codice sorgente HTML. Benvenuti al mondo di HTML. Benvenuti al mondo di HTML. Questo è il primo paragrafo. Questo è il primo paragrafo. </HTML>
15 Dicembre 2005Stefano Clemente14 Esempio 4
15 Dicembre 2005Stefano Clemente15 Liste In HTML è possibile definire liste non numerate, numerate e di definizioni LISTE NON NUMERATELISTE NON NUMERATE − La lista è identificata dall'etichetta − Ogni singolo elemento della lista è preceduto dall'etichetta − La lista è conclusa con l'etichetta browser diversi possono mostrare una lista non ordinata in modo differente. Ad esempio, invece della pallina un altro browser potrebbe utilizzare un quadratino LISTE NUMERATELISTE NUMERATE − La lista è identificata dall'etichetta − Ogni singolo elemento della lista è preceduto dall'etichetta − La lista è conclusa con l'etichetta
15 Dicembre 2005Stefano Clemente16 Liste LISTE DI DEFINIZIONILISTE DI DEFINIZIONI − La lista è identificata dall'etichetta − Ogni termine nella lista è preceduto dall'etichetta − Ogni definizione di un termine è preceduta dall'etichetta − La lista è conclusa con l'etichetta LISTE DI DEFINIZIONI COMPATTELISTE DI DEFINIZIONI COMPATTE COMPACT − Quando i termini sono molto brevi la lista può essere compattata per mezzo dell'attributo COMPACT − L'uso dell'attributo forza il browser a porre la definizione nella stessa riga del termine LISTE ANNIDATELISTE ANNIDATE − le liste possono essere annidate
15 Dicembre 2005Stefano Clemente17 Esempio 5 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di lista non numerata: Esempio di lista non numerata: primo elemento primo elemento secondo elemento secondo elemento Esempio di lista numerata: Esempio di lista numerata: primo elemento primo elemento secondo elemento secondo elemento Esempio di lista di descrizioni: Esempio di lista di descrizioni: HTML HTML HyperText Markup Language HyperText Markup Language XML XML eXtensible Markup Language eXtensible Markup Language </HTML>
15 Dicembre 2005Stefano Clemente18 Esempio 5
15 Dicembre 2005Stefano Clemente19 Esempio 6 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di lista di descrizioni: Esempio di lista di descrizioni: HTML HTML HyperText Markup Language HyperText Markup Language XML XML eXtensible Markup Language eXtensible Markup Language Esempio di lista di descrizioni compatte (Firefox non le supporta!): Esempio di lista di descrizioni compatte (Firefox non le supporta!): HTML HTML HyperText Markup Language HyperText Markup Language XML XML eXtensible Markup Language eXtensible Markup Language WWW WWW World Wide Web World Wide Web W3C W3C World Wide Web Consortium World Wide Web Consortium </HTML>
15 Dicembre 2005Stefano Clemente20 Esempio 6
15 Dicembre 2005Stefano Clemente21 Esempio 7 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di liste annidate: Esempio di liste annidate: Primo elemento della lista non ordinata Primo elemento della lista non ordinata Secondo elemento della lista non ordinata Secondo elemento della lista non ordinata Primo elemento della lista ordinata Primo elemento della lista ordinata Secondo elemento della lista ordinata Secondo elemento della lista ordinata W3C W3C World Wide Web Consortium World Wide Web Consortium Terzo elemento della lista ordinata Terzo elemento della lista ordinata Terzo elemento della lista non ordinata Terzo elemento della lista non ordinata </HTML>
15 Dicembre 2005Stefano Clemente22 Esempio 7
15 Dicembre 2005Stefano Clemente23 Formattazione dei caratteri HTML ha due tipi di stili per le parole o le frasi: logico e fisico STILE LOGICOSTILE LOGICO − etichetta il testo con riferimento al suo significato ed è configurato direttamente dal browser − ad esempio, l'etichetta, che viene utilizzata quando sono citati titoli di libri, può essere definita come lo stile italico dal browser; ogni volta che una parola (o un insieme di parole) è inserita tra e il browser la mostra in italico STILE FISICO − indica direttamente la specifica apparenza richiesta − ad esempio, porre una parola tra e indica al browser di visualizzarla in italico Esempi di stile fisico − − grassetto − − italico − − caratteri a larghezza fissa
15 Dicembre 2005Stefano Clemente24 Esempio 8 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di formattazione di caratteri: Esempio di formattazione di caratteri: Esempio di grassetto Esempio di grassetto Esempio di italico Esempio di italico Esempio caratteri a larghezza fissa Esempio caratteri a larghezza fissa </HTML>
15 Dicembre 2005Stefano Clemente25 <DFN> Usato per una definizione. Normalmente in italico. <EM> Usato per dare enfasi. Normalmente in italico. <CITE> Usato per titoli di libri, film. Normalmente in italico. <CODE> Usato per mostrare codice. Normalmente in caratteri a larghezza fissa. <STRONG> Usato per dare una forte enfasi. Normalmente in grassetto. Stile logico (esempi)
15 Dicembre 2005Stefano Clemente26 Esempio 9 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di formattazione di caratteri: Esempio di formattazione di caratteri: Esempio di definizione Esempio di definizione Esempio di enfasi Esempio di enfasi Esempio di citazione Esempio di citazione Esempio di codice Esempio di codice Esempio di forte enfasi Esempio di forte enfasi </HTML>
15 Dicembre 2005Stefano Clemente27 Collegamenti ad altri documenti Per includere un link nel documento <A A − si apre l’etichetta <A (includere uno spazio dopo A ) HREF="nome_del_file.html"> − si specifica il documento a cui si sta effettuando il collegamento nel modo seguente HREF="nome_del_file.html"> − si inserisce il testo che fungerà da ipertesto nel documento corrente − si inserisce l'etichetta di fine link
15 Dicembre 2005Stefano Clemente28 Esempio 10 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di link: Esempio di link: Questo link è un collegamento al file esempio.html. Questo link è un collegamento al file esempio.html. Nota bene: il file esempio1.html deve essere nella stessa dir di questo file, altrimenti bisogna specificare il pathname assoluto! Nota bene: il file esempio1.html deve essere nella stessa dir di questo file, altrimenti bisogna specificare il pathname assoluto! </HTML>
15 Dicembre 2005Stefano Clemente29 Esempio mailto mailtoUn visitatore può essere facilitato nell'inviare una utilizzando mailto HREF="mailto:indirizzo“Si usa sempre un link, ma con HREF="mailto:indirizzo“ Cliccando sul link viene creata una finestra per spedire una
15 Dicembre 2005Stefano Clemente30 Esempio 11 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di mailto: Esempio di mailto: Per domande o richieste di ricevimento, si prega di mandare una mail. Per domande o richieste di ricevimento, si prega di mandare una mail. </HTML>
15 Dicembre 2005Stefano Clemente31 Incorporare immagini SRCPer includere un’immagine in un documento HTML viene utilizzata l’etichetta insieme all’attributo SRC che indica l’URI dell’immagine ALIGNNormalmente l’immagine è allineata al testo, ma è possibile modificare questo comportamento attraverso l’attributo ALIGN È possibile usare un’immagine come link racchiudendo l’etichetta in un’etichetta
15 Dicembre 2005Stefano Clemente32 Esempio 12 <HTML> Semplice Esempio di HTML Semplice Esempio di HTML Esempio di inclusione di immagini: Esempio di inclusione di immagini: </HTML>
15 Dicembre 2005Stefano Clemente33 Esempio 13 <html><body> Un'immagine nel testo. Un'immagine nel testo. Un'immagine nel testo Un'immagine nel testo Nota che l'allineamento bottom è quello di default Nota che l'allineamento bottom è quello di default Un'immagine nel testo Un'immagine nel testo Un'immagine prima del testo Un'immagine prima del testo Un'immagine dopo il testo Un'immagine dopo il testo </body></html>
15 Dicembre 2005Stefano Clemente34 Esempio 13
15 Dicembre 2005Stefano Clemente35 Esempio 14 <html><body> Cambiando i valori degli attributi width e height si possono ingrandire o rimpicciolere le immagini. Cambiando i valori degli attributi width e height si possono ingrandire o rimpicciolere le immagini. </body></html>
15 Dicembre 2005Stefano Clemente36 Esempio 14
15 Dicembre 2005Stefano Clemente37 Esempio 15 <html><body> E' possibile anche usare un'immagine come link: E' possibile anche usare un'immagine come link: </body></html>
15 Dicembre 2005Stefano Clemente38 Tabelle Le tabelle sono definite attraverso l’etichetta Una tabella è divisa in righe con l’etichetta (table row) Ogni riga è divisa in celle (colonne) con l’etichetta (table data) Una cella può contenere testo, immagini, liste, paragrafi, tabelle, ecc... Le intestazioni di una tabella si definiscono con l’etichetta
15 Dicembre 2005Stefano Clemente39 Esempio 16 <html><body> <TR> riga 1, cella 1 riga 1, cella 1 riga 1, cella 2 riga 1, cella 2 </TR><TR> riga 2, cella 1 riga 2, cella 1 riga 2, cella 2 riga 2, cella 2 </TR></TABLE></body></html>
15 Dicembre 2005Stefano Clemente40 Esempio 17 <html><body> <TR><TH>Intestazione</TH> Altra intestazione Altra intestazione </TR><TR> riga 1, cella 1 riga 1, cella 1 riga 1, cella 2 riga 1, cella 2 </TR><TR> riga 2, cella 1 riga 2, cella 1 riga 2, cella 2 riga 2, cella 2 </TR></TABLE></body></html>
15 Dicembre 2005Stefano Clemente41 Esempio 18: Tabella senza bordi <html><body> Questa è una tabella senza bordi: Questa è una tabella senza bordi: <table><tr> </tr><tr> </tr></table> E questa è una tabella con l'attributo border=0: E questa è una tabella con l'attributo border=0: <tr> </tr><tr> </tr></table>
15 Dicembre 2005Stefano Clemente42 Esempio 19: Tabella con caption <html><body> Questa è una tabella con una caption: Questa è una tabella con una caption:</h4> <tr> </tr><tr> </tr> Caption della Tabella Caption della Tabella </table></body></html>
15 Dicembre 2005Stefano Clemente43 Esempio 20: Tabella che contiene diversi elementi <html><body> <tr> Questo è un paragrafo Questo è un paragrafo Questo è un altro paragrafo Questo è un altro paragrafo Questa cella contiene una Tabella: Questa cella contiene una Tabella: A A B B C C D D </table> </tr><tr> Questa cella contiene una lista Questa cella contiene una lista mele mele banane banane pere pere CIAO CIAO </tr></table></body></html>
15 Dicembre 2005Stefano Clemente44 Esempio 20: Tabella che contiene diversi elementi
15 Dicembre 2005Stefano Clemente45 Esempio 21: Tabella che contiene celle raggruppate <html><body> Cella comune a due colonne: Cella comune a due colonne: <tr> Nome Nome Telefono Telefono </tr><tr> Mario Rossi Mario Rossi </tr></table> Cella comune a due righe: Cella comune a due righe: <tr> Nome: Nome: Mario Rossi Mario Rossi </tr><tr> Telefono: Telefono: </tr><tr> </tr></table></body></html>
15 Dicembre 2005Stefano Clemente46 Esempio 21: Tabella che contiene celle raggruppate
15 Dicembre 2005Stefano Clemente47 Esempio 22: Tabella con esempi di allineamento del testo <html><body> Soldi spesi in... Soldi spesi in... Gennaio Gennaio Febbraio Febbraio Vestiti Vestiti $ $ $50.20 $50.20 Varie Varie $30.00 $30.00 $44.45 $44.45 Cibo Cibo $ $ $ $ Totale Totale $ $ $ $ </table></body></html>
15 Dicembre 2005Stefano Clemente48 Esempio 22: Tabella con esempi di allineamento del testo
15 Dicembre 2005Stefano Clemente49 Form Un form è un’area nella quale l’utente può inserire informazioni Un form si definisce con l’etichetta L’etichetta più utilizzata all’interno di un form è typeIl tipo dell’input viene specificato con l’attributo type I più comuni tipi di input sono texttext, − viene usato per inserire lettere, numeri, ecc... in un form radioradio − viene usato per permettere all’utente di scegliere un’opzione da una lista di possibili scelte checkboxcheckbox − viene usato per permettere all’utente di scegliere un’opzione da una lista di possibili scelte
15 Dicembre 2005Stefano Clemente50 Esempio 23 <html><body> Esempio di form: Esempio di form: <FORM> Nome: Nome: Cognome: Cognome: </FORM></body></html>
15 Dicembre 2005Stefano Clemente51 Esempio 24 <html><body> Esempio di form: Esempio di form: <FORM> Maschio Maschio Femmina Femmina</FORM></body></html>
15 Dicembre 2005Stefano Clemente52 Esempio 25 <html><body> Esempio di form: Esempio di form: <FORM> Ho una bicicletta Ho una bicicletta Ho una macchina Ho una macchina</FORM></body></html>
15 Dicembre 2005Stefano Clemente53 Esempio 26 <html><body><form> Volvo Volvo Saab Saab Fiat Fiat Audi Audi</select></form></body></html>
15 Dicembre 2005Stefano Clemente54 Esempio 27 <html><body><form> </form> </body></html>
15 Dicembre 2005Stefano Clemente55 Esempio 28 <html><body><fieldset><legend> Informazioni personali: </legend><form> Altezza Altezza Peso Peso </form></fieldset></body></html>