Fondamenti di Markup Languages: Richiami di HTML Stefano Clemente [email protected] © 2005 Stefano Clemente 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: <nome_etichetta> • Le etichette sono usate normalmente in coppia. • Alcune etichette possono avere degli attributi. • Ad esempio, <B> Corso </B> indica che la parola Corso deve essere presentata in grassetto. 2 Un semplice documento HTML <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Nicola Dragoni"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <H1>Questo è un piccolo documento HTML</H1> </BODY> </HTML> Un documento HTML deve iniziare con l'etichetta <HTML> ed essere concluso con l'etichetta </HTML>. Un documento HTML è formato da una TESTA, individuata dalle etichette <HEAD> e </HEAD>, e da un CORPO, individuato dalle etichette <BODY> e </BODY>. 3 TESTA e CORPO di un documento HTML TESTA: <HEAD> . . . </HEAD> La TESTA contiene il titolo del documento, individuato dalle etichette <TITLE> e </TITLE> ed alcune informazioni generali che possono essere utilizzate dal browser (<META NAME=“nome" CONTENT=“contenuto">). CORPO: <BODY> . . . </BODY> Il CORPO contiene l’informazione effettiva contenuta nel documento. Le etichette <H1> e </H1> introducono una intestazione. Il browser visualizza il precedente documento nel modo seguente: Questo è un piccolo documento HTML Prova 4 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 HTML ha sei livelli di intestazioni (numerati da 1 a 6), con 1 quello più evidenziato. La sintassi dell'intestazione è: <Hy>Testo dell’intestazione</Hy> 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: <title> è completamente equivalente a <TITLE> o <TiTlE>. 5 PARAGRAFO L'etichetta <P> 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 <CENTER>. Esempio Prova 6 Nota bene Il ritorno carrello (a capo) e lo spazio bianco nei files HTML sono insignificanti. Ciascun paragrafo deve essere terminato con <P>. Il browser ignora ogni indentazione o linea bianca nel testo sorgente. Senza l'etichetta <P>, il documento diviene un unico largo paragrafo. Esempio Vengono visualizzati allo stesso modo!! 7 Testo preformattato ed etichetta <BR> Inserendo l'etichetta <PRE> si segnala al browser di visualizzare il testo come è scritto (rispettando quindi i ritorni a capo e gli spazi bianchi). Esempio <PRE> Questo è un esempio di testo preformattato. Il browser lo visualizza esattamente come è scritto nel codice sorgente HTML. </PRE> 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 <BR>. Esempio Prova 8 Liste In HTML è possibile definire liste non numerate, numerate e di definizioni. LISTE NON NUMERATE • La lista è identificata dall'etichetta <UL> • Ogni singolo elemento della lista è preceduto dall'etichetta <LI> • La lista è conclusa con l'etichetta </UL> Esempio <UL> <LI> primo elemento <LI> secondo elemento </UL> • 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. 9 Liste LISTE NUMERATE • La lista è identificata dall'etichetta <UL> • Ogni singolo elemento della lista è preceduto dall'etichetta <LI> • La lista è conclusa con l'etichetta </UL> Esempio <OL> <LI> primo elemento <LI> secondo elemento </OL> 1. 2. primo elemento secondo elemento 10 Liste LISTE DI DEFINIZIONI Le liste di definizioni vengono usate quando si vuole fare un elenco di termini e darne la definizione. • La lista è identificata dall'etichetta <DL> • Ogni termine nella lista è preceduto dall'etichetta <DT> • Ogni definizione di un termine è preceduta dall'etichetta <DD> • La lista è conclusa con l'etichetta </DL> Esempio <DL> <DT> HTML <DD> HyperText Markup Language <DT> XML <DD> eXtensible Markup Language </DL> Prova 11 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 <DL COMPACT> <DT> HTML <DD> HyperText Markup Language <DT> XML <DD> eXtensible Markup Language <DL COMPACT> <DT> WWW <DD> World Wide Web <DT> W3C <DD> World Wide Web Consortium </DL> </DL> Prova 12 Liste annidate Come visto nell’esempio precedente, le liste possono essere annidate. Esempio <UL> <LI> Primo elemento della lista non ordinata <LI> Secondo elemento della lista non ordinata <OL> <LI> Primo elemento della lista ordinata <LI> Secondo elemento della lista ordinata <DL> <DT> W3C <DD> World Wide Web Consortium </DL> <LI> Terzo elemento della lista ordinata </OL> <LI> Terzo elemento della lista non ordinata </UL> Prova 13 Formattazione dei caratteri 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 <CITE>, 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 <CITE> e </CITE> il browser la mostra in italico. Lo stile fisico indica direttamente la specifica apparenza richiesta. Ad esempio, porre una parola tra <I> e </I> indica al browser di visualizzarla in italico. 14 Stile fisico (esempi) • <B> grassetto • <I> italico • <TT> caratteri a larghezza fissa Esempio <B> Esempio di grassetto</B><BR> <I> Esempio di italico </I><BR> <TT> Esempio caratteri a larghezza fissa </TT> Prova 15 Stile logico (esempi) <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. Prova 16 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: </A> Esempio <A HREF=“esempio.html”> Link di esempio </A> Prova 17 Mailto Un lettore può essere facilitato nell'inviare una e-mail utilizzando mailto. Esempio Per domande o richieste di ricevimento, si prega di mandare una <A HREF="mailto:[email protected]"> mail</A>. Cliccando su mail viene creata una finestra per spedire una e-mail. Prova 18 Incorporare immagini Per includere un'immagine in un documento viene utilizzata l’etichetta <IMG>. Esempio <IMG SRC="filename.gif" HEIGHT=100 WIDTH=65> Normalmente il bordo inferiore di un'immagine è allineato con il testo. Per cambiare l’allineamento si usa l’attributo ALIGN. Esempio1 Esempio2 Esempio3 Esempio4 19 Tabelle Le tabelle sono definite attraverso l’etichetta <TABLE> Una tabella è divisa in righe con l’etichetta <TR> (table row) Ogni riga è divisa in celle (colonne) con l’etichetta <TD> (table data) Una cella può contenere testo, immagini, liste, paragrafi, tabelle, ecc... Esempio <TABLE border="1"> <TR> <TD>riga 1, cella 1</td> <TD>riga 1, cella 2</td> </TR> <TR> <TD>riga 2, cella 1</td> <TD>riga 2, cella 2</td> </TR> </TABLE> Bordo della tabella Prova 20 Tabelle Le intestazioni di una tabella si definiscono con l’etichetta <TH> Prova Esempi: Tabella senza bordi Tabella con caption Tabella che contiene diversi elementi Tabella che contiene celle raggruppate Tabella con esempi di allineamento del testo 21 Form Un form è un’area nella quale l’utente può inserire informazioni. Un form si definisce con l’etichetta <FORM> L’etichetta più utilizzata all’interno di un form è <INPUT> <FORM> <INPUT> <INPUT> ... </FORM> Il tipo dell’input viene specificato con l’attributo type I più comuni tipi di input sono text, radio e checkbox. 22 Form Attributo type con valore text Viene usato per inserire lettere, numeri, ecc... in un form. Esempio <FORM> Nome: <INPUT type="text" name=“nome"> <BR> Cognome: <INPUT type="text" name=“cognome"> </FORM> Prova Attributo type con valore radio Viene usato per permettere all’utente di scegliere un’opzione da una lista di possibili scelte. Esempio <FORM> <INPUT type="radio" name="sesso" value="maschio"> Maschio <BR> <INPUT type="radio" name="sesso" value="femmina"> Femmina </FORM> Prova 23 Form Attributo type con valore checkbox Viene usato per permettere all’utente di scegliere una o più opzioni da una lista di possibili scelte. Esempio <FORM> <INPUT type="checkbox" name="bicicletta"> Ho una bicicletta <BR> <INPUT type="checkbox" name=“macchina"> Ho una macchina </FORM> Prova Vedi altri esempi (file Form4.html, Form5.html, ecc...) 24 Prossima lezione: Introduzione a XML 25
Scarica
