Fondamenti di Markup Languages: Richiami di HTML © 2004 Nicola Dragoni © 2005 Stefano Clemente...

Fondamenti di Markup Fondamenti di Markup Languages: Richiami di HTMLLanguages: Richiami di HTML

© 2004 Nicola Dragoni© 2005 Stefano Clemente

Stefano [email protected]

15 Dicembre 2005 Stefano Clemente 2

Riferimenti bibliograficiRiferimenti bibliografici

• http://www.w3schools.com/


Composizione di un documento Composizione di un documento HTMLHTML• Un documento HTML è formato da elementi

(ad esempio, tabelle, paragrafi, liste).• Ogni elemento è individuato da una etichetta.

In HTML una etichetta è formata da: <<nome_etichettanome_etichetta>>

• Le etichette sono usate normalmente in coppia.

• Alcune etichette possono avere degli attributi.• Ad esempio, <B> Corso </B><B> Corso </B> indica che la

parola CorsoCorso deve essere presentata in grassetto.


Esempio 1: Un semplice Esempio 1: Un semplice documento HTMLdocumento HTML<HTML><HTML>

<HEAD><HEAD><TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE><META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo">

</HEAD></HEAD><BODY><BODY>

<H1>Questo è un piccolo documento HTML</H1><H1>Questo è un piccolo documento HTML</H1></BODY></BODY>

</HTML></HTML>


Testa e Corpo di un documentoTesta e Corpo di un documento

• Un documento HTML deve iniziare con l'etichetta <HTML><HTML> ed essere concluso con l'etichetta </HTML></HTML>

• Un documento HTML è formato da una TESTA, individuata dalle etichette <HEAD><HEAD> e </HEAD></HEAD>, e da un CORPO, individuato dalle etichette <BODY><BODY> e </BODY></BODY>

− TESTA: <HEAD> … </HEAD><HEAD> … </HEAD>• La TESTA contiene il titolo del documento, individuato dalle etichette <TITLE><TITLE> e </TITLE></TITLE> e alcune informazioni generali che possono essere utilizzate dal browser (<META NAME="nome" CONTENT="contenuto"><META NAME="nome" CONTENT="contenuto">)

− CORPO: <BODY> … </BODY><BODY> … </BODY>• Il CORPO contiene l’informazione effettiva contenuta nel documento.

• Le etichette <H1><H1> e </H1></H1> introducono una intestazione


Titoli e IntestazioniTitoli 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 è

<H<Hyy>Testo dell’intestazione</H>Testo dell’intestazione</Hyy>>

dove yy è un numero tra 11 e 66 che specifica il livello di grandezza.

• HTML è case insensitive


ParagrafoParagrafo• L'etichetta <P><P> individua un paragrafo

• Ciascun paragrafo deve essere terminato con </P></P>

• Un paragrafo può essere allineato a sinistra, a destra o al centro con l'attributo ALIGNALIGN− ALIGN=LEFTALIGN=LEFT allinea a sinistra− ALIGN=CENTERALIGN=CENTER allinea al centro− ALIGN=RIGHTALIGN=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><CENTER>


Esempio 2Esempio 2<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <H1>Questo è un piccolo documento HTML</H1><H1>Questo è un piccolo documento HTML</H1> <P ALIGN=right>Benvenuti al mondo di HTML.</P><P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo <CENTER><P>Questo è il primo

paragrafo</P></CENTER>paragrafo</P></CENTER> </BODY></BODY></HTML></HTML>


ParagrafoParagrafo• 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><P> il documento diviene un

unico largo paragrafo• Non c’è alcuna differenza tra

e


Testo preformattato ed etichetta Testo preformattato ed etichetta <BR><BR>• Inserendo l'etichetta <PRE><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><BR>


Esempio 3Esempio 3<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Nicola Dragoni"><META NAME="Author" CONTENT="Nicola Dragoni"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <H1>Questo è un piccolo documento HTML</H1><H1>Questo è un piccolo documento HTML</H1> <P ALIGN=right>Benvenuti al mondo di HTML.</P><P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo <CENTER><P>Questo è il primo

paragrafo</P></CENTER>paragrafo</P></CENTER> <PRE><PRE> Questo &egrave un esempio diQuesto &egrave un esempio di testo preformattato.testo preformattato. Il browser lo visualizza esattamente comeIl browser lo visualizza esattamente come &egrave scritto nel codice sorgente HTML. &egrave scritto nel codice sorgente HTML. </PRE></PRE> </BODY></BODY></HTML></HTML>


Esempio 3Esempio 3


Esempio 4Esempio 4<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <H1>Questo è un piccolo documento HTML</H1><H1>Questo è un piccolo documento HTML</H1> <P ALIGN=right>Benvenuti al mondo di HTML.</P><P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo paragrafo</P></CENTER><CENTER><P>Questo è il primo paragrafo</P></CENTER> <PRE><PRE> Questo &egrave un esempio diQuesto &egrave un esempio di testo preformattato.testo preformattato. Il browser lo visualizza esattamente comeIl browser lo visualizza esattamente come &egrave scritto nel codice sorgente HTML. &egrave scritto nel codice sorgente HTML. </PRE></PRE> <P>Benvenuti al mondo di HTML.<BR><P>Benvenuti al mondo di HTML.<BR> Questo è il primo paragrafo.</P>Questo è il primo paragrafo.</P> </BODY></BODY></HTML></HTML>


Esempio 4Esempio 4


ListeListe• In HTML è possibile definire liste non numerate,

numerate e di definizioni• LISTE NON NUMERATELISTE NON NUMERATE

− La lista è identificata dall'etichetta <UL><UL>− Ogni singolo elemento della lista è preceduto dall'etichetta <LI><LI>

− La lista è conclusa con l'etichetta </UL></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 NUMERATELISTE NUMERATE− La lista è identificata dall'etichetta <OL><OL>− Ogni singolo elemento della lista è preceduto dall'etichetta <LI><LI>

− La lista è conclusa con l'etichetta </OL></OL>


ListeListe• LISTE DI DEFINIZIONILISTE DI DEFINIZIONI

−La lista è identificata dall'etichetta <DL><DL>− Ogni termine nella lista è preceduto dall'etichetta <DT><DT>

− Ogni definizione di un termine è preceduta dall'etichetta <DD><DD>

− La lista è conclusa con l'etichetta </DL></DL>• LISTE DI DEFINIZIONI COMPATTELISTE DI DEFINIZIONI COMPATTE

−Quando i termini sono molto brevi la lista può essere compattata per mezzo dell'attributo COMPACTCOMPACT

−L'uso dell'attributo forza il browser a porre la definizione nella stessa riga del termine

• LISTE ANNIDATELISTE ANNIDATE−le liste possono essere annidate


Esempio 5Esempio 5<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di lista non numerata:</P><P>Esempio di lista non numerata:</P> <UL><UL> <LI> primo elemento<LI> primo elemento <LI> secondo elemento<LI> secondo elemento </UL></UL> <P>Esempio di lista numerata:</P><P>Esempio di lista numerata:</P> <OL><OL> <LI> primo elemento<LI> primo elemento <LI> secondo elemento<LI> secondo elemento </OL></OL> <P>Esempio di lista di descrizioni:</P><P>Esempio di lista di descrizioni:</P> <DL><DL> <DT> HTML<DT> HTML <DD> HyperText Markup Language<DD> HyperText Markup Language <DT> XML<DT> XML <DD> eXtensible Markup Language<DD> eXtensible Markup Language </DL></DL> </BODY></BODY></HTML></HTML>


Esempio 5Esempio 5


Esempio 6Esempio 6<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di lista di descrizioni:</P><P>Esempio di lista di descrizioni:</P> <DL><DL> <DT> HTML<DT> HTML <DD> HyperText Markup Language<DD> HyperText Markup Language <DT> XML<DT> XML <DD> eXtensible Markup Language<DD> eXtensible Markup Language </DL></DL> <P>Esempio di lista di descrizioni compatte (Firefox non le supporta!):</P><P>Esempio di lista di descrizioni compatte (Firefox non le supporta!):</P> <DL COMPACT><DL COMPACT> <DT> HTML<DT> HTML <DD> HyperText Markup Language<DD> HyperText Markup Language <DT> XML<DT> XML <DD> eXtensible Markup Language<DD> eXtensible Markup Language <DL COMPACT><DL COMPACT> <DT> WWW<DT> WWW <DD> World Wide Web<DD> World Wide Web <DT> W3C<DT> W3C <DD> World Wide Web Consortium<DD> World Wide Web Consortium </DL></DL> </DL></DL> </BODY></BODY></HTML></HTML>


Esempio 6Esempio 6


Esempio 7Esempio 7<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di liste annidate:</P><P>Esempio di liste annidate:</P> <UL><UL> <LI> Primo elemento della lista non ordinata<LI> Primo elemento della lista non ordinata <LI> Secondo elemento della lista non ordinata<LI> Secondo elemento della lista non ordinata <OL><OL> <LI> Primo elemento della lista ordinata<LI> Primo elemento della lista ordinata <LI> Secondo elemento della lista ordinata<LI> Secondo elemento della lista ordinata <DL><DL> <DT> W3C<DT> W3C <DD> World Wide Web Consortium<DD> World Wide Web Consortium </DL></DL> <LI> Terzo elemento della lista ordinata<LI> Terzo elemento della lista ordinata </OL></OL> <LI> Terzo elemento della lista non ordinata<LI> Terzo elemento della lista non ordinata </UL></UL> </BODY></BODY></HTML></HTML>


Esempio 7Esempio 7


Formattazione dei caratteriFormattazione 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 <CITE><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><CITE> e </CITE></CITE> il browser la mostra in italico

• STILE FISICO− indica direttamente la specifica apparenza richiesta− ad esempio, porre una parola tra <I><I> e </I></I> indica al browser di visualizzarla

in italico

• Esempi di stile fisico− <B><B> grassetto− <I><I> italico− <TT><TT> caratteri a larghezza fissa


Esempio 8Esempio 8<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di formattazione di caratteri:<BR><P>Esempio di formattazione di caratteri:<BR> <B> Esempio di grassetto</B><BR><B> Esempio di grassetto</B><BR> <I> Esempio di italico </I><BR><I> Esempio di italico </I><BR> <TT> Esempio caratteri a larghezza fissa </TT></P><TT> Esempio caratteri a larghezza fissa </TT></P> </BODY></BODY></HTML></HTML>


<DFN><DFN> Usato per una definizione. Normalmente in italico.

<EM><EM> Usato per dare enfasi. Normalmente in italico.

<CITE><CITE> Usato per titoli di libri, film. Normalmente in italico.

<CODE><CODE> Usato per mostrare codice. Normalmente in caratteri a larghezza fissa.

<STRONG><STRONG> Usato per dare una forte enfasi. Normalmente in grassetto.

Stile logico (esempi)Stile logico (esempi)


Esempio 9Esempio 9<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di formattazione di caratteri:<BR><P>Esempio di formattazione di caratteri:<BR> <DFN> Esempio di definizione</DFN><BR><DFN> Esempio di definizione</DFN><BR> <EM> Esempio di enfasi </EM><BR><EM> Esempio di enfasi </EM><BR> <CITE> Esempio di citazione </CITE><BR><CITE> Esempio di citazione </CITE><BR> <CODE> Esempio di codice </CODE><BR><CODE> Esempio di codice </CODE><BR> <STRONG> Esempio di forte enfasi </STRONG></P><STRONG> Esempio di forte enfasi </STRONG></P> </BODY></BODY></HTML></HTML>


Collegamenti ad altri documentiCollegamenti ad altri documenti

• Per includere un link nel documento−si apre l’etichetta <A<A (includere uno spazio

dopo AA)−si specifica il documento a cui si sta

effettuando il collegamento nel modo seguente HREF="nome_del_file.html">HREF="nome_del_file.html">

−si inserisce il testo che fungerà da ipertesto nel documento corrente

−si inserisce l'etichetta di fine link </A></A>


Esempio 10Esempio 10<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di link:<BR><P>Esempio di link:<BR> <A HREF="esempio1.html"> Questo</A> link &egrave un collegamento <A HREF="esempio1.html"> Questo</A> link &egrave un collegamento

al file esempio.html. <BR>al file esempio.html. <BR> <B>Nota bene:</B> il file esempio1.html deve essere nella stessa <B>Nota bene:</B> il file esempio1.html deve essere nella stessa

dir di questo file, altrimenti bisogna specificare il pathname dir di questo file, altrimenti bisogna specificare il pathname assoluto!</P>assoluto!</P>

</BODY></BODY></HTML></HTML>


Esempio

mailtomailto

• Un visitatore può essere facilitato nell'inviare una e-mail utilizzando mailtomailto

• Si usa sempre un link <A><A>, ma con HREF="mailto:HREF="mailto:indirizzoindirizzo““

• Cliccando sul link viene creata una finestra per spedire una e-mail


Esempio 11Esempio 11<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di mailto:<BR><P>Esempio di mailto:<BR> Per domande o richieste di ricevimento, si prega di Per domande o richieste di ricevimento, si prega di

mandare una <A HREF="mailto:[email protected]"> mandare una <A HREF="mailto:[email protected]"> mail</A>.</P>mail</A>.</P>

</BODY></BODY></HTML></HTML>


Incorporare immaginiIncorporare immagini

• Per includere un’immagine in un documento HTML viene utilizzata l’etichetta <IMG><IMG> insieme all’attributo SRCSRC che indica l’URI dell’immagine

• Normalmente l’immagine è allineata al testo, ma è possibile modificare questo comportamento attraverso l’attributo ALIGNALIGN

• È possibile usare un’immagine come link racchiudendo l’etichetta <IMG><IMG> in un’etichetta <A><A>


Esempio 12Esempio 12<HTML><HTML> <HEAD><HEAD> <TITLE>Semplice Esempio di HTML</TITLE><TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Stefano Clemente"><META NAME="Author" CONTENT="Stefano Clemente"> <META NAME="Description" CONTENT="Documento introduttivo"><META NAME="Description" CONTENT="Documento introduttivo"> </HEAD></HEAD> <BODY><BODY> <P>Esempio di inclusione di immagini:</P><P>Esempio di inclusione di immagini:</P> <IMG SRC="logo.gif"> <IMG SRC="logo.gif"> <IMG SRC="logohppoloforli.gif" ALIGN=center><IMG SRC="logohppoloforli.gif" ALIGN=center> <IMG SRC="logo_Forli.gif" ALIGN=top><IMG SRC="logo_Forli.gif" ALIGN=top> </BODY></BODY></HTML></HTML>


Esempio 13Esempio 13<html><html>

<body><body><p> Un'immagine <img src="ominoPC.gif" align="bottom" <p> Un'immagine <img src="ominoPC.gif" align="bottom"

width="48" height="48"> nel testo.</p>width="48" height="48"> nel testo.</p>

<p> Un'immagine <img src ="ominoPC.gif" align="middle" <p> Un'immagine <img src ="ominoPC.gif" align="middle" width="48" height="48"> nel testo.</p>width="48" height="48"> nel testo.</p>

<p> Un'immagine <img src ="ominoPC.gif" align="top" width="48" <p> Un'immagine <img src ="ominoPC.gif" align="top" width="48" height="48"> nel testo</p>height="48"> nel testo</p>

<p>Nota che l'allineamento bottom è quello di default</p><p>Nota che l'allineamento bottom è quello di default</p>

<p> Un'immagine <img src ="ominoPC.gif" width="48" height="48"> <p> Un'immagine <img src ="ominoPC.gif" width="48" height="48"> nel testo</p>nel testo</p>

<p><img src ="ominoPC.gif" width="48" height="48">Un'immagine <p><img src ="ominoPC.gif" width="48" height="48">Un'immagine prima del testo</p>prima del testo</p>

<p>Un'immagine dopo il testo<img src ="ominoPC.gif“ width="48" <p>Un'immagine dopo il testo<img src ="ominoPC.gif“ width="48" height="48"></p>height="48"></p></body></body>

</html></html>


Esempio 13Esempio 13



<body><body>

<p><img src="ominoPC.gif" align="bottom" width="20" <p><img src="ominoPC.gif" align="bottom" width="20" height="20"> </p>height="20"> </p>

<p><img src ="ominoPC.gif" align="middle" width="45" <p><img src ="ominoPC.gif" align="middle" width="45" height="45"></p>height="45"></p>

<p><img src ="ominoPC.gif" align="middle" width="80“ <p><img src ="ominoPC.gif" align="middle" width="80“ height="80"></p>height="80"></p>

<p>Cambiando i valori degli attributi width e height <p>Cambiando i valori degli attributi width e height si possono ingrandire o rimpicciolere le immagini.</p>si possono ingrandire o rimpicciolere le immagini.</p>

</body></body></html></html>


Esempio 14Esempio 14



<body><body>

<p> E' possibile anche usare un'immagine come <p> E' possibile anche usare un'immagine come link: <a href="esempio1.html"><img border="0" link: <a href="esempio1.html"><img border="0" src="ominoPC.gif" width="65" height="38"></a> </p>src="ominoPC.gif" width="65" height="38"></a> </p>

</body></body>

</html></html>


TabelleTabelle

• Le tabelle sono definite attraverso l’etichetta <TABLE><TABLE>

• Una tabella è divisa in righe con l’etichetta <TR><TR> (table row)

• Ogni riga è divisa in celle (colonne) con l’etichetta <TD><TD> (table data)

• Una cella può contenere testo, immagini, liste, paragrafi, tabelle, ecc...

• Le intestazioni di una tabella si definiscono con l’etichetta <TH><TH>


Esempio 16Esempio 16<html><html><body><body><TABLE border="1"><TABLE border="1"><TR> <TR> <TD>riga 1, cella 1</td><TD>riga 1, cella 1</td> <TD>riga 1, cella 2</td><TD>riga 1, cella 2</td></TR></TR><TR><TR> <TD>riga 2, cella 1</td><TD>riga 2, cella 1</td> <TD>riga 2, cella 2</td> <TD>riga 2, cella 2</td> </TR></TR></TABLE> </TABLE> </body></body></html></html>


Esempio 17Esempio 17<html><html><body><body><TABLE border="1"><TABLE border="1"><TR><TR><TH>Intestazione</TH><TH>Intestazione</TH><TH>Altra intestazione</TH><TH>Altra intestazione</TH></TR></TR><TR> <TR> <TD>riga 1, cella 1</TD><TD>riga 1, cella 1</TD> <TD>riga 1, cella 2</TD><TD>riga 1, cella 2</TD></TR></TR><TR><TR> <TD>riga 2, cella 1</TD><TD>riga 2, cella 1</TD> <TD>riga 2, cella 2</TD> <TD>riga 2, cella 2</TD> </TR></TR></TABLE> </TABLE> </body></body></html></html>


Esempio 18: Tabella senza bordi Esempio 18: Tabella senza bordi <html><html><body><body>

<h4>Questa è una tabella senza bordi:</h4><h4>Questa è una tabella senza bordi:</h4><table><table><tr><tr> <td>100</td><td>100</td> <td>200</td><td>200</td> <td>300</td><td>300</td></tr></tr><tr><tr> <td>400</td><td>400</td> <td>500</td><td>500</td> <td>600</td><td>600</td></tr></tr></table></table>

<h4>E questa è una tabella con l'attributo border=0:</h4><h4>E questa è una tabella con l'attributo border=0:</h4><table border="0"><table border="0"><tr><tr> <td>100</td><td>100</td> <td>200</td><td>200</td> <td>300</td><td>300</td></tr></tr><tr><tr> <td>400</td><td>400</td> <td>500</td><td>500</td> <td>600</td><td>600</td></tr></tr></table></table>


Esempio 19: Tabella con captionEsempio 19: Tabella con caption<html><html><body><body>

<h4> Questa è una tabella con una caption:<h4> Questa è una tabella con una caption:</h4></h4>

<table border="1"><table border="1"><tr><tr> <td>100</td><td>100</td> <td>200</td><td>200</td> <td>300</td><td>300</td></tr></tr><tr><tr> <td>400</td><td>400</td> <td>500</td><td>500</td> <td>600</td><td>600</td></tr></tr><caption>Caption della Tabella</caption><caption>Caption della Tabella</caption></table></table>



Esempio 20: Tabella che contiene Esempio 20: Tabella che contiene diversi elementidiversi elementi<html><html><body><body><table border="1"><table border="1"><tr><tr> <td><td> <p>Questo è un paragrafo</p><p>Questo è un paragrafo</p> <p>Questo è un altro <p>Questo è un altro paragrafo</p>paragrafo</p> </td></td> <td>Questa cella contiene una <td>Questa cella contiene una Tabella:Tabella: <table border="1"><table border="1"> <tr><tr> <td>A</td><td>A</td> <td>B</td><td>B</td> </tr></tr> <tr><tr> <td>C</td><td>C</td> <td>D</td><td>D</td>

</tr></tr></table></table> </td></td></tr></tr><tr><tr> <td>Questa cella contiene <td>Questa cella contiene una listauna lista <ul><ul> <li>mele</li><li>mele</li> <li>banane</li><li>banane</li> <li>pere</li><li>pere</li> </ul></ul> </td></td> <td>CIAO</td><td>CIAO</td></tr></tr></table></table></body></body></html></html>


Esempio 20: Tabella che contiene Esempio 20: Tabella che contiene diversi elementidiversi elementi


Esempio 21: Tabella che contiene Esempio 21: Tabella che contiene celle raggruppate celle raggruppate <html><html><body><body>

<h4>Cella comune a due <h4>Cella comune a due colonne:</h4>colonne:</h4><table border="1"><table border="1"><tr><tr> <th>Nome</th><th>Nome</th> <th colspan="2">Telefono</th><th colspan="2">Telefono</th></tr></tr><tr><tr> <td>Mario Rossi</td><td>Mario Rossi</td> <td>555 77 854</td><td>555 77 854</td> <td>555 77 855</td><td>555 77 855</td></tr></tr></table></table>

<h4>Cella comune a due righe:</h4><h4>Cella comune a due righe:</h4><table border="1"><table border="1"><tr><tr> <th>Nome:</th><th>Nome:</th> <td>Mario Rossi</td><td>Mario Rossi</td></tr></tr><tr><tr> <th rowspan="2">Telefono:</th><th rowspan="2">Telefono:</th> <td>555 77 854</td><td>555 77 854</td></tr></tr><tr><tr> <td>555 77 855</td><td>555 77 855</td></tr></tr></table></table>



Esempio 21: Tabella che contiene Esempio 21: Tabella che contiene celle raggruppate celle raggruppate


Esempio 22: Tabella con esempi Esempio 22: Tabella con esempi di allineamento del testodi allineamento del testo<html><html><body><body><table width="400" border="1"><table width="400" border="1"> <tr><tr> <th align="left">Soldi spesi <th align="left">Soldi spesi in ...</th>in ...</th> <th align="right">Gennaio</th><th align="right">Gennaio</th> <th align="right">Febbraio</th><th align="right">Febbraio</th> </tr></tr> <tr><tr> <td align="left">Vestiti</td><td align="left">Vestiti</td> <td align="right">$241.10</td><td align="right">$241.10</td> <td align="right">$50.20</td><td align="right">$50.20</td> </tr></tr> <tr><tr> <td align="left">Varie</td><td align="left">Varie</td> <td align="right">$30.00</td><td align="right">$30.00</td> <td align="right">$44.45</td><td align="right">$44.45</td> </tr></tr>

<tr><tr> <td align="left">Cibo</td><td align="left">Cibo</td> <td align="right">$730.40</td><td align="right">$730.40</td> <td align="right">$650.00</td><td align="right">$650.00</td> </tr></tr> <tr><tr> <th align="left">Totale</th><th align="left">Totale</th> <th align="center">$1001.50</th><th align="center">$1001.50</th> <th align="center">$744.65</th><th align="center">$744.65</th> </tr></tr></table></table></body></body></html></html>


Esempio 22: Tabella con esempi Esempio 22: Tabella con esempi di allineamento del testodi allineamento del testo


FormForm• Un form è un’area nella quale l’utente può inserire

informazioni• Un form si definisce con l’etichetta <FORM><FORM>• L’etichetta più utilizzata all’interno di un form è <INPUT><INPUT>

• Il tipo dell’input viene specificato con l’attributo typetype• 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


Esempio 23Esempio 23<html><html><body><body><P>Esempio di form:</P><P>Esempio di form:</P><FORM> <FORM> Nome: <INPUT type="text" name="nome"> <br> Nome: <INPUT type="text" name="nome"> <br> Cognome: <INPUT type="text" name="cognome"> Cognome: <INPUT type="text" name="cognome"> </FORM> </FORM>



Esempio 24Esempio 24<html><html><body><body>

<P>Esempio di form:</P><P>Esempio di form:</P><FORM> <FORM> <INPUT type="radio" name="sesso" value="maschio"> Maschio <br><INPUT type="radio" name="sesso" value="maschio"> Maschio <br><INPUT type="radio" name="sesso" value="femmina"> Femmina <INPUT type="radio" name="sesso" value="femmina"> Femmina </FORM> </FORM>




<P>Esempio di form:</P><P>Esempio di form:</P><FORM> <FORM> <INPUT type="checkbox" name="bicicletta"> <INPUT type="checkbox" name="bicicletta"> Ho una bicicletta <BR> Ho una bicicletta <BR> <INPUT type="checkbox" name=“macchina"> Ho una macchina <INPUT type="checkbox" name=“macchina"> Ho una macchina </FORM> </FORM>




<form><form><select name="macchine"><select name="macchine"><option value="volvo">Volvo<option value="volvo">Volvo<option value="saab">Saab<option value="saab">Saab<option value="fiat">Fiat<option value="fiat">Fiat<option value="audi">Audi<option value="audi">Audi</select></select></form></form>




<fieldset><fieldset><legend><legend>Informazioni personali:Informazioni personali:</legend></legend><form><form>Altezza <input type="text" size="3">Altezza <input type="text" size="3">Peso <input type="text" size="3">Peso <input type="text" size="3"></form></form></fieldset></fieldset>


Fondamenti di Markup Languages: Richiami di HTML © 2004 Nicola Dragoni © 2005 Stefano Clemente...

Documents

Transcript of Fondamenti di Markup Languages: Richiami di HTML © 2004 Nicola Dragoni © 2005 Stefano Clemente...