Fondamenti di Markup Languages: Richiami di HTML © 2005 Stefano Clemente Stefano Clemente

Presentazione sul tema: "Fondamenti di Markup Languages: Richiami di HTML © 2005 Stefano Clemente Stefano Clemente"— Transcript della presentazione:

1 Fondamenti di Markup Languages: Richiami di HTML © 2005 Stefano Clemente Stefano Clemente s.clemente@ei.unibo.it

2 2 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. Ad esempio, Corso indica che la parola Corso deve essere presentata in grassetto.

3 3 Un semplice documento HTML  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. Semplice Esempio di HTML Questo è un piccolo documento HTML

4 4 TESTA e CORPO di un documento HTML TESTA:... La TESTA contiene il titolo del documento, individuato dalle etichette e ed 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. Il browser visualizza il precedente documento nel modo seguente: Questo è un piccolo documento HTML Prova

5 5  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. TITOLI  HTML ha sei livelli di intestazioni (numerati da 1 a 6), con 1 quello più evidenziato. La sintassi dell'intestazione è: INTESTAZIONI Testo dell’intestazione dove y è un numero tra 1 e 6 che specifica il livello di grandezza. Nota bene: HTML non è case sensitive ovvero NON distingue tra maiuscole e minuscole. Esempio: è completamente equivalente a o. TITOLI e INTESTAZIONI

6 6 PARAGRAFO  L'etichetta individua un paragrafo. Un paragrafo può essere allineato a sinistra, a destra o al centro con l'attributo ALIGN. ALIGN=LEFT allinea a sinistra ALIGN=CENTER allinea al centro ALIGN=RIGHT allinea a destra  Inoltre, per porre un paragrafo (o più in generale un qualsiasi elemento HTML) al centro di un documento si può usare anche l'etichetta. Prova Esempio

7 7  Il ritorno carrello (a capo) e lo spazio bianco nei files HTML sono insignificanti.  Ciascun paragrafo deve essere terminato con. Il browser ignora ogni indentazione o linea bianca nel testo sorgente.  Senza l'etichetta, il documento diviene un unico largo paragrafo. Esempio Vengono visualizzatiallo stesso modo!! Nota bene

8 8 Testo preformattato ed etichetta  Inserendo l'etichetta si segnala al browser di visualizzare il testo come è scritto (rispettando quindi i ritorni a capo e gli spazi bianchi). Esempio Questo &egrave un esempio di testo preformattato. Il browser lo visualizza esattamente come &egrave scritto nel codice sorgente HTML. Prova  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. Esempio Prova

9 9  In HTML è possibile definire liste non numerate, numerate e di definizioni. Liste LISTE NON NUMERATE La lista è identificata dall'etichetta Ogni singolo elemento della lista è preceduto dall'etichetta La lista è conclusa con l'etichetta Esempio primo elemento secondo elemento primo elemento secondo elemento NOTA BENE: browser diversi possono mostrare una lista non ordinata in modo differente. Ad esempio, invece della pallina un altro browser potrebbe utilizzare un quadratino.

10 10 LISTE NUMERATE La lista è identificata dall'etichetta Ogni singolo elemento della lista è preceduto dall'etichetta La lista è conclusa con l'etichetta Esempio primo elemento secondo elemento 1. primo elemento 2. secondo elemento Liste

11 11 LISTE 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 Esempio HTML HyperText Markup Language XML eXtensible Markup Language Liste Le liste di definizioni vengono usate quando si vuole fare un elenco di termini e darne la definizione. Prova

12 12 Liste di definizioni compatte 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. Esempio HTML HyperText Markup Language XML eXtensible Markup Language WWW World Wide Web W3C World Wide Web Consortium Prova

13 13 Liste annidate Come visto nell’esempio precedente, le liste possono essere annidate. Esempio Primo elemento della lista non ordinata Secondo elemento della lista non ordinata Primo elemento della lista ordinata Secondo elemento della lista ordinata W3C World Wide Web Consortium Terzo elemento della lista ordinata Terzo elemento della lista non ordinata Prova

14 14 HTML ha due tipi di stili per le parole o le frasi: logico e fisico. Lo stile logico etichetta il testo con riferimento al suo significato. Lo stile logico è 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. Lo stile fisico indica direttamente la specifica apparenza richiesta. Ad esempio, porre una parola tra e indica al browser di visualizzarla in italico. Formattazione dei caratteri

15 15 Stile fisico (esempi) grassetto italico caratteri a larghezza fissa Esempio di grassetto Esempio di italico Esempio caratteri a larghezza fissa Esempio Prova

16 16 Stile logico (esempi) Usato per una definizione. Normalmente in italico. Usato per dare enfasi. Normalmente in italico. Usato per titoli di libri, film. Normalmente in italico. Usato per mostrare codice. Normalmente in caratteri a larghezza fissa. Usato per dare una forte enfasi. Normalmente in grassetto. Prova

17 17 Collegamenti ad altri documenti Per includere un link nel documento si procede nel modo seguente: Si apre l’etichetta <A (includere uno spazio dopo A); 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: Link di esempio Esempio Prova

18 18 Mailto Un lettore può essere facilitato nell'inviare una e-mail utilizzando mailto. Per domande o richieste di ricevimento, si prega di mandare una mail. Cliccando su mail viene creata una finestra per spedire una e-mail. Prova Esempio

19 19 Incorporare immagini Per includere un'immagine in un documento viene utilizzata l’etichetta. Esempio  Normalmente il bordo inferiore di un'immagine è allineato con il testo.  Per cambiare l’allineamento si usa l’attributo ALIGN. Esempio1Esempio2Esempio3Esempio4

20 20 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... riga 1, cella 1 riga 1, cella 2 riga 2, cella 1 riga 2, cella 2 Esempio Prova Bordo della tabella

21 21 Tabelle  Le intestazioni di una tabella si definiscono con l’etichetta Prova  Esempi:  Tabella senza bordiTabella  Tabella con captionTabella  Tabella che contiene diversi elementiTabella  Tabella che contiene celle raggruppateTabella  Tabella con esempi di allineamento del testoTabella

22 22 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 è...  Il tipo dell’input viene specificato con l’attributo type  I più comuni tipi di input sono text, radio e checkbox.

23 23 Form  Attributo type con valore text Viene usato per inserire lettere, numeri, ecc... in un form. Nome: Cognome: Esempio Prova  Attributo type con valore radio Viene usato per permettere all’utente di scegliere un’opzione da una lista di possibili scelte. Maschio Femmina Esempio Prova

24 24  Attributo type con valore checkbox Viene usato per permettere all’utente di scegliere una o più opzioni da una lista di possibili scelte. Ho una bicicletta Ho una macchina Esempio Prova Form Vedi altri esempi (file Form4.html, Form5.html, ecc...)

25 25 Prossima lezione: Introduzione a XML Introduzione a XML