Fondamenti di Markup Languages: Richiami di HTML Stefano Clemente [email protected] © 2004 Nicola Dragoni © 2005 Stefano Clemente Riferimenti bibliografici • http://www.w3schools.com/ 15 Dicembre 2005 Stefano Clemente 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: <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. 15 Dicembre 2005 Stefano Clemente 3 Esempio 1: Un semplice documento HTML <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <H1>Questo è un piccolo documento HTML</H1> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 4 Testa e Corpo di un documento • 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> − TESTA: <HEAD> … </HEAD> • La TESTA contiene il titolo del documento, individuato dalle etichette <TITLE> e </TITLE> e 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 15 Dicembre 2005 Stefano Clemente 5 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. • HTML è case insensitive 15 Dicembre 2005 Stefano Clemente 6 Paragrafo • L'etichetta <P> individua un paragrafo • Ciascun paragrafo deve essere terminato con </P> • 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 • Per porre un paragrafo (o più in generale un qualsiasi elemento HTML) al centro di un documento si può usare anche l'etichetta <CENTER> 15 Dicembre 2005 Stefano Clemente 7 Esempio 2 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <H1>Questo è un piccolo documento HTML</H1> <P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo paragrafo</P></CENTER> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 8 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 <P> il documento diviene un unico largo paragrafo • Non c’è alcuna differenza tra e 15 Dicembre 2005 Stefano Clemente 9 Testo preformattato ed etichetta <BR> • Inserendo l'etichetta <PRE> 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 <BR> 15 Dicembre 2005 Stefano Clemente 10 Esempio 3 <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> <P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo paragrafo</P></CENTER> <PRE> Questo è un esempio di testo preformattato. Il browser lo visualizza esattamente come è scritto nel codice sorgente HTML. </PRE> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 11 Esempio 3 15 Dicembre 2005 Stefano Clemente 12 Esempio 4 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <H1>Questo è un piccolo documento HTML</H1> <P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo paragrafo</P></CENTER> <PRE> Questo è un esempio di testo preformattato. Il browser lo visualizza esattamente come è scritto nel codice sorgente HTML. </PRE> <P>Benvenuti al mondo di HTML.<BR> Questo è il primo paragrafo.</P> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 13 Esempio 4 15 Dicembre 2005 Stefano Clemente 14 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> • browser diversi possono mostrare una lista non ordinata in modo differente. Ad esempio, invece della pallina un altro browser potrebbe utilizzare un quadratino • LISTE NUMERATE − La lista è identificata dall'etichetta <OL> − Ogni singolo elemento della lista è preceduto dall'etichetta <LI> − La lista è conclusa con l'etichetta </OL> 15 Dicembre 2005 Stefano Clemente 15 Liste • LISTE DI DEFINIZIONI − 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> • 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 • LISTE ANNIDATE − le liste possono essere annidate 15 Dicembre 2005 Stefano Clemente 16 Esempio 5 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di lista non numerata:</P> <UL> <LI> primo elemento <LI> secondo elemento </UL> <P>Esempio di lista numerata:</P> <OL> <LI> primo elemento <LI> secondo elemento </OL> <P>Esempio di lista di descrizioni:</P> <DL> <DT> HTML <DD> HyperText Markup Language <DT> XML <DD> eXtensible Markup Language </DL> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 17 Esempio 5 15 Dicembre 2005 Stefano Clemente 18 Esempio 6 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di lista di descrizioni:</P> <DL> <DT> HTML <DD> HyperText Markup Language <DT> XML <DD> eXtensible Markup Language </DL> <P>Esempio di lista di descrizioni compatte (Firefox non le supporta!):</P> <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> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 19 Esempio 6 15 Dicembre 2005 Stefano Clemente 20 Esempio 7 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di liste annidate:</P> <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> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 21 Esempio 7 15 Dicembre 2005 Stefano Clemente 22 Formattazione dei caratteri • HTML ha due tipi di stili per le parole o le frasi: logico e fisico • STILE LOGICO − etichetta il testo con riferimento al suo significato ed è 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 • STILE FISICO − indica direttamente la specifica apparenza richiesta − ad esempio, porre una parola tra <I> e </I> indica al browser di visualizzarla in italico • Esempi di stile fisico − <B> grassetto − <I> italico − <TT> caratteri a larghezza fissa 15 Dicembre 2005 Stefano Clemente 23 Esempio 8 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di formattazione di caratteri:<BR> <B> Esempio di grassetto</B><BR> <I> Esempio di italico </I><BR> <TT> Esempio caratteri a larghezza fissa </TT></P> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 24 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. 15 Dicembre 2005 Stefano Clemente 25 Esempio 9 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di formattazione di caratteri:<BR> <DFN> Esempio di definizione</DFN><BR> <EM> Esempio di enfasi </EM><BR> <CITE> Esempio di citazione </CITE><BR> <CODE> Esempio di codice </CODE><BR> <STRONG> Esempio di forte enfasi </STRONG></P> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 26 Collegamenti ad altri documenti • Per includere un link nel documento − 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> 15 Dicembre 2005 Stefano Clemente 27 Esempio 10 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di link:<BR> <A HREF="esempio1.html"> Questo</A> link è un collegamento al file esempio.html. <BR> <B>Nota bene:</B> il file esempio1.html deve essere nella stessa dir di questo file, altrimenti bisogna specificare il pathname assoluto!</P> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 28 mailto • Un visitatore può essere facilitato nell'inviare una e-mail utilizzando Esempio mailto • Si usa sempre un link <A>, ma con HREF="mailto:indirizzo“ • Cliccando sul link viene creata una finestra per spedire una e-mail 15 Dicembre 2005 Stefano Clemente 29 Esempio 11 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di mailto:<BR> Per domande o richieste di ricevimento, si prega di mandare una <A HREF="mailto:[email protected]"> mail</A>.</P> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 30 Incorporare immagini • Per includere un’immagine in un documento HTML viene utilizzata l’etichetta <IMG> insieme all’attributo SRC che indica l’URI dell’immagine • Normalmente l’immagine è allineata al testo, ma è possibile modificare questo comportamento attraverso l’attributo ALIGN • È possibile usare un’immagine come link racchiudendo l’etichetta <IMG> in un’etichetta <A> 15 Dicembre 2005 Stefano Clemente 31 Esempio 12 <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <P>Esempio di inclusione di immagini:</P> <IMG SRC="logo.gif"> <IMG SRC="logohppoloforli.gif" ALIGN=center> <IMG SRC="logo_Forli.gif" ALIGN=top> </BODY> </HTML> 15 Dicembre 2005 Stefano Clemente 32 Esempio 13 <html> <body> <p> Un'immagine <img src="ominoPC.gif" align="bottom" width="48" height="48"> nel testo.</p> <p> Un'immagine <img src ="ominoPC.gif" align="middle" width="48" height="48"> nel testo.</p> <p> Un'immagine <img src ="ominoPC.gif" align="top" width="48" height="48"> nel testo</p> <p>Nota che l'allineamento bottom è quello di default</p> <p> Un'immagine <img src ="ominoPC.gif" width="48" height="48"> nel testo</p> <p><img src ="ominoPC.gif" width="48" height="48">Un'immagine prima del testo</p> <p>Un'immagine dopo il testo<img src ="ominoPC.gif“ width="48" height="48"></p> </body> </html> 15 Dicembre 2005 Stefano Clemente 33 Esempio 13 15 Dicembre 2005 Stefano Clemente 34 Esempio 14 <html> <body> <p><img src="ominoPC.gif" align="bottom" width="20" height="20"> </p> <p><img src ="ominoPC.gif" align="middle" width="45" height="45"></p> <p><img src ="ominoPC.gif" align="middle" width="80“ height="80"></p> <p>Cambiando i valori degli attributi width e height si possono ingrandire o rimpicciolere le immagini.</p> </body> </html> 15 Dicembre 2005 Stefano Clemente 35 Esempio 14 15 Dicembre 2005 Stefano Clemente 36 Esempio 15 <html> <body> <p> E' possibile anche usare un'immagine come link: <a href="esempio1.html"><img border="0" src="ominoPC.gif" width="65" height="38"></a> </p> </body> </html> 15 Dicembre 2005 Stefano Clemente 37 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... • Le intestazioni di una tabella si definiscono con l’etichetta <TH> 15 Dicembre 2005 Stefano Clemente 38 Esempio 16 <html> <body> <TABLE border="1"> <TR> <TD>riga 1, cella <TD>riga 1, cella </TR> <TR> <TD>riga 2, cella <TD>riga 2, cella </TR> </TABLE> </body> </html> 15 Dicembre 2005 1</td> 2</td> 1</td> 2</td> Stefano Clemente 39 Esempio 17 <html> <body> <TABLE border="1"> <TR> <TH>Intestazione</TH> <TH>Altra intestazione</TH> </TR> <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> </body> </html> 15 Dicembre 2005 Stefano Clemente 40 Esempio 18: Tabella senza bordi <html> <body> <h4>Questa è una tabella senza bordi:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>E questa è una tabella con l'attributo border=0:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> 15 Dicembre 2005 Stefano Clemente 41 Esempio 19: Tabella con caption <html> <body> <h4> Questa è una tabella con una caption: </h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> <caption>Caption della Tabella</caption> </table> </body> </html> 15 Dicembre 2005 Stefano Clemente 42 Esempio 20: Tabella che contiene diversi elementi <html> <body> <table border="1"> <tr> <td> <p>Questo è un paragrafo</p> <p>Questo è un altro paragrafo</p> </td> <td>Questa cella contiene una Tabella: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> 15 Dicembre 2005 </tr> </table> </td> </tr> <tr> <td>Questa cella contiene una lista <ul> <li>mele</li> <li>banane</li> <li>pere</li> </ul> </td> <td>CIAO</td> </tr> </table> </body> </html> Stefano Clemente 43 Esempio 20: Tabella che contiene diversi elementi 15 Dicembre 2005 Stefano Clemente 44 Esempio 21: Tabella che contiene celle raggruppate <html> <body> <h4>Cella comune a due colonne:</h4> <table border="1"> <tr> <th>Nome</th> <th colspan="2">Telefono</th> </tr> <tr> <td>Mario Rossi</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> 15 Dicembre 2005 <h4>Cella comune a due righe:</h4> <table border="1"> <tr> <th>Nome:</th> <td>Mario Rossi</td> </tr> <tr> <th rowspan="2">Telefono:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> Stefano Clemente 45 Esempio 21: Tabella che contiene celle raggruppate 15 Dicembre 2005 Stefano Clemente 46 Esempio 22: Tabella con esempi di allineamento del testo <html> <body> <table width="400" border="1"> <tr> <th align="left">Soldi spesi in ...</th> <th align="right">Gennaio</th> <th align="right">Febbraio</th> </tr> <tr> <td align="left">Vestiti</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Varie</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> 15 Dicembre 2005 <tr> <td align="left">Cibo</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">Totale</th> <th align="center">$1001.50</th> <th align="center">$744.65</th> </tr> </table> </body> </html> Stefano Clemente 47 Esempio 22: Tabella con esempi di allineamento del testo 15 Dicembre 2005 Stefano Clemente 48 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> • Il tipo dell’input viene specificato con l’attributo type • I più comuni tipi di input sono • text, − viene usato per inserire lettere, numeri, ecc... in un form • radio − viene usato per permettere all’utente di scegliere un’opzione da una lista di possibili scelte • checkbox − viene usato per permettere all’utente di scegliere un’opzione da una lista di possibili scelte 15 Dicembre 2005 Stefano Clemente 49 Esempio 23 <html> <body> <P>Esempio di form:</P> <FORM> Nome: <INPUT type="text" name="nome"> <br> Cognome: <INPUT type="text" name="cognome"> </FORM> </body> </html> 15 Dicembre 2005 Stefano Clemente 50 Esempio 24 <html> <body> <P>Esempio di form:</P> <FORM> <INPUT type="radio" name="sesso" value="maschio"> Maschio <br> <INPUT type="radio" name="sesso" value="femmina"> Femmina </FORM> </body> </html> 15 Dicembre 2005 Stefano Clemente 51 Esempio 25 <html> <body> <P>Esempio di form:</P> <FORM> <INPUT type="checkbox" name="bicicletta"> Ho una bicicletta <BR> <INPUT type="checkbox" name=“macchina"> Ho una macchina </FORM> </body> </html> 15 Dicembre 2005 Stefano Clemente 52 Esempio 26 <html> <body> <form> <select name="macchine"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form> </body> </html> 15 Dicembre 2005 Stefano Clemente 53 Esempio 27 <html> <body> <form> <input type="button" value="Ciao Mondo!"> </form> </body> </html> 15 Dicembre 2005 Stefano Clemente 54 Esempio 28 <html> <body> <fieldset> <legend> Informazioni personali: </legend> <form> Altezza <input type="text" size="3"> Peso <input type="text" size="3"> </form> </fieldset> </body> </html> 15 Dicembre 2005 Stefano Clemente 55
Scarica
