Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Pagine Web statiche: HTML
HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti) Linguaggi di mark-up separazione tra contenuto (testo) e aspetto (indicazioni che vengono interpretate dal programma che visualizza il documento) pagina Web = file di testo (per es. home.html) che contiene indicazioni per: (a) i link (connessioni ipertestuali) (b) la visualizzazione Gena - a.a. 2004/2005 Web Design
2
HTML: introduzione home.html: contenuto + link aspetto
pagina Web visualizzata da un Web browser (per es. Microsoft Interner Explorer) interpretati (a) I link (connessioni ipertestuali) home page: link1 link2 pagina papers: link3 pagina di un editore pagina del celi link4 Gena - a.a. 2004/2005 Web Design
3
HTML: introduzione (b) la visualizzazione (esempio): cosa si vede...
Gena - a.a. 2004/2005 Web Design
4
HTML: introduzione (b) la visualizzazione (esempio): … cosa c’è dietro
... <H1><IMG SRC="img/bimbo.gif" HSPACE="2" ALIGN="ABSCENTER"> Le attività</H1> <P> Il nido è aperto <B>dal Lunedì al Venerdì</B><BR><B>dalle 7.30 alle 19.00</B> </P> <A HREF="javascript:openAlbum('foto.html');"onMouseover="window.status='foto'; return true" onMouseOut="window.status='';return true;">Qualche foto dei nostri locali</A> I bambini si divertiranno a manipolare la <B>pasta colorata</B> (simil pongo), con cui potranno creare oggetti e animali, con l'ausilio di apposite "formine", ma soprattutto utilizzando la loro fantasia. <B> Le attività si svolgeranno tutti i giorni con il seguente orario: <UL> <LI>al mattino, dalle alle 11.00</LI> <LI>al pomeriggio, dalle alle </LI> </UL> </B> contenuto aspetto Gena - a.a. 2004/2005 Web Design
5
HTML: introduzione Premessa:
Esistono molti strumenti per costruire pagine Web, cioè per “scrivere HTML senza vederlo”, per es. Deamweaver (Macromedia), FrontPage (Microsoft), Netscape Composer Tuttavia è importante capire “cosa ci sta sotto” per due ragioni principali: è importante capire ciò che il programma che usiamo sta effettivamente scrivendo per capirne meglio il comportamento talvolta è necessario intervenire manualmente sul codice HTML generato da un programma Gena - a.a. 2004/2005 Web Design
6
HTML: i tag In un file HTML contiene indicazioni per il browser (che
interpreta il linguaggio HTML) sotto forma di tag: <TAG ATTR1 = "VAL1" ...> testo </TAG> NB: HTML non è case-sensitive NB: <TAG ... /> <TAG ...></TAG> Struttura di un documento HTML: spesso funziona anche senza virgolette, ma è meglio metterle sempre! <HTML> <HEAD> ... </HEAD> <BODY> </BODY> </HTML> inizio del file HTML fine del file HTML intestazione contenuto della pagina Gena - a.a. 2004/2005 Web Design
7
HTML: l'intestazione L'intestazione di un file HTML può contenere vari tag; i principali sono: <HEAD> <TITLE>Master in Editoria Multimediale</TITLE> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=ISO "/> <META NAME="KEYWORDS" CONTENT="HCI, Web, progettazione, architettura dell'informazione, usabilità"> <META NAME="DESCRIPTION" CONTENT="Corso sulla pubblicazione on-line, progettazione e costruzione di siti Web"> </HEAD> Gena - a.a. 2004/2005 Web Design
8
HTML: l'intestazione titolo della finestra
<TITLE>Master in Editoria Multimediale</TITLE> titolo della finestra Gena - a.a. 2004/2005 Web Design
9
HTML: l'intestazione Comunica al browser il set di caratteri usato
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=ISO "/> Comunica al browser il set di caratteri usato <META NAME="KEYWORDS" CONTENT="HCI, Web, progettazione, architettura dell'informazione, usabilità"> <META NAME="DESCRIPTION" CONTENT="Corso sulla pubblicazione on-line, progettazione e costruzione di siti Web"> Descrivono le parole-chiave e il contenuto della pagina (vengono generalmente usate dai motori di ricerca) NB: spesso il tag META non è chiuso (ma funziona lo stesso!) Gena - a.a. 2004/2005 Web Design
10
HTML: il tag BODY Gli attributi del tag BODY:
All'interno del tag BODY si trova il documento vero e proprio (il contenuto della pagina Web) Gli attributi del tag BODY: <BODY BGCOLOR = colore dello sfondo BACKGROUND = immagine di sfondo TEXT = colore del testo LINK = colore dei link VLINK = colore dei link vistitati ALINK = colore dei link attivi > ... </BODY> Gena - a.a. 2004/2005 Web Design
11
HTML: il tag BODY <BODY BGCOLOR="#00FFFF" LINK="#800080" VLINK="#FF0000"> Gena - a.a. 2004/2005 Web Design
12
HTML: il tag BODY <BODY BACKGROUND="rosa2.jpg" ...>
Gena - a.a. 2004/2005 Web Design
13
HTML: la codifica dei colori
Ogni colore può essere rappresentato mediante tre numeri, compresi tra 0 e 255, che rappresentano la quantità di rosso (Red), verde (Green) e blu (Blue) presenti codifica RGB La codifica usata è quella esadecimale (base 16) Si possono rappresentare più di 16 milioni di colori diversi => nero = R:0, G:0, B:0 = #000000 bianco = R:255, G:255, B:255 = #FFFFFF rosso = R:255, G:0, B:0 = #FF0000 verde acqua = R:105, G:247, B:222 = #69F7DE Esistono dei nomi mnemonici per i colori più comuni (per es. “red”, “acquamarine”, “beige”, ecc.) Gena - a.a. 2004/2005 Web Design
14
HTML: titoli I titoli (headers):
Possiamo usare vari tag per strutturare il documento (cioè il contenuto della pagina Web), racchiuso all'interno del tag <BODY> ... </BODY> I titoli (headers): <H1> Titolo di primo livello </H1> Titolo di primo livello <H2> Titolo di primo livello </H2> Titolo di secondo livello <H3> Titolo di primo livello </H3> Titolo di terzo livello Gena - a.a. 2004/2005 Web Design
15
HTML: titoli <H1>La pubblicazione on-line</H1>
<H2>Progettazione e costruzione di siti Web</H2> ... <H3>Materiale e riferimenti bibliografici:</H3> <H3>Informazioni generali:</H3> Gena - a.a. 2004/2005 Web Design
16
HTML: paragrafi Allineamento (attributo di P):
<P> Paragrafo </P> Allineamento (attributo di P): <P ALIGN="CENTER/LEFT/RIGHT/JUSTIFIED"> Paragrafo </P> Per andare a capo senza creare un nuovo paragrafo: <BR> NB: Alcuni tag (per es. BR, HR e IMG) si possono scrivere senza chiusura (cioè senza <TAG> ... </TAG>, o <TAG/>). Questo, benché non sia formalmente corretto, viene interpretato correttamente dai browser, cioè: <BR> <BR/> Gena - a.a. 2004/2005 Web Design
17
HTML: paragrafi <P ALIGN="LEFT">L'esame si compone ... </P> <P ALIGN="LEFT">La relazione scritta ... <BR> La relazione scritta ... </P> <P ALIGN="LEFT">La verifica orale ... </P> NB: equivale a <P> (cioè "LEFT" è il valore di default dell'attributo ALIGN) a capo Gena - a.a. 2004/2005 Web Design
18
HTML: paragrafi <P ALIGN="RIGHT">L'esame si compone ... </P> <P ALIGN="RIGHT">La relazione scritta ... <BR> La relazione scritta ... </P> <P ALIGN="RIGHT">La verifica orale ... </P> a capo Gena - a.a. 2004/2005 Web Design
19
HTML: paragrafi <P ALIGN="CENTER">L'esame si compone ... </P> <P ALIGN="CENTER">La relazione scritta ... <BR> La relazione scritta ... </P> <P ALIGN="CENTER">La verifica orale ... </P> a capo Gena - a.a. 2004/2005 Web Design
20
HTML: paragrafi <P ALIGN="JUSTIFY">L'esame si compone ... </P> <P ALIGN="JUSTIFY">La relazione scritta ... <BR> La relazione scritta ... </P> <P ALIGN="JUSTIFY">La verifica orale ... </P> a capo Gena - a.a. 2004/2005 Web Design
21
HTML: caratteri grassetto corsivo codice testo grande 3 unità
<B>grassetto</B> oppure <STRONG>grassetto</STRONG> grassetto <I>corsivo</I> oppure <EM>corsivo</EM> corsivo <TT>codice</TT> oppure <CODE>codice</CODE> codice <FONT SIZE="3">testo grande 3 unità</FONT> testo grande 3 unità <FONT FACE="Arial">testo in font Arial</FONT> testo in font Arial <FONT COLOR="blue">testo blu</FONT> testo blu Gena - a.a. 2004/2005 Web Design
22
HTML: caratteri <B><FONT COLOR="red">
La pubblicazione on-line: progettazione e costruzione di siti Web </FONT></B> ... <I>Principi di Interazione Uomo-Macchina</I> <FONT SIZE="2" FACE="Comic sans MS"> [Prof. Giovanna Petrone] </FONT> Gena - a.a. 2004/2005 Web Design
23
HTML: elenchi (liste) Liste non numerate: <UL>
<LI>Principi di Interazione Uomo-Macchina</LI> <LI>Progettazione di siti Web</LI> <LI>Architettura dell'informazione</LI> <LI>Realizzazione di siti Web statici e dinamici</LI> <LI>Cenni a usabilità e accessibilità</LI> </UL> Gena - a.a. 2004/2005 Web Design
24
HTML: elenchi (liste) Liste numerate: <OL>
<LI>Principi di Interazione Uomo-Macchina</LI> <LI>Progettazione di siti Web</LI> <LI>Architettura dell'informazione</LI> <LI>Realizzazione di siti Web statici e dinamici</LI> <LI>Cenni a usabilità e accessibilità</LI> </OL> Gena - a.a. 2004/2005 Web Design
25
HTML: commenti e linee orizzontali
Commenti (il browser NON legge il testo commentato): <!-- questo è un commento --> Linee orizzontali: <HR ALIGN="CENTER/LEFT/RIGHT" WIDTH="300/70%"> Esempio: <HR ALIGN="CENTER" WIDTH="80%"> Gena - a.a. 2004/2005 Web Design
26
HTML: immagini NB: Il tag IMG si può scrivere senza chiusura;
SRC = nome del file che contiene l’immagine ALT = descrizione dell'immagine ALIGN = "CENTER/LEFT/RIGHT" "TOP/BOTTOM/MIDDLE" BORDER = spessore del bordo (in pixel) HEIGHT = altezza (in pixel) WIDTH = larghezza (in pixel) HSPACE = spazio a destra e a sinistra (in pixel) VSPACE = spazio in alto e in basso (in pixel) > NB: Il tag IMG si può scrivere senza chiusura; il browser lo interpreta come: <IMG ... > <IMG ... /> Gena - a.a. 2004/2005 Web Design
27
HTML: immagini <IMG SRC="img/Unilogo.jpg"
ALT="Università di Torino" ALIGN="BOTTOM" BORDER="0" HSPACE="10"> Gena - a.a. 2004/2005 Web Design
28
HTML: suoni NB: Anche il tag BGSOUND si può scrivere senza chiusura;
SRC = nome del file che contiene il suono LOOP = numero di ripetizioni del suono (un numero, oppure "infinite") > NB: Anche il tag BGSOUND si può scrivere senza chiusura; il browser lo interpreta come: <BGSOUND ... > <BGSOUND ... /> Gena - a.a. 2004/2005 Web Design
29
HTML: link Link esterni e ancore interne: ......... orario didattica
orario.html home.html: orario didattica Attività didattica: Bla, bla, bla, ... link esterno NB: può essere un file sullo stesso server (nel qual caso basta indicare il nome del file, con l'eventuale path), oppure un file su un server diverso (nel qual caso occorre specificare l'intero URL) ancora interna Gena - a.a. 2004/2005 Web Design
30
orario = vai alla pagina orario.html (NB: deve
HTML: link Link esterni: <A HREF = "URL/nome-file"> link </A> link Per esempio: <A HREF="orario.html">orario</A> orario = vai alla pagina orario.html (NB: deve trovarsi nella stessa cartella della pagina corrente!) <A HREF=" masterEM/orario.html">orario</A> orario = vai alla pagina orario.html, che si trova nella cartella masterEM, nell'area dell'utente goy, sul server e utilizza il protocollo http (HyperText Transfer Protocol, utilizzato di default dai browser principali) Gena - a.a. 2004/2005 Web Design
31
HTML: link Ancore interne: all'ancora Per esempio:
<A NAME = "etichetta"> ancora </A> creo l'ancora <A HREF="#etichetta">link</A> link (interno) all'ancora Per esempio: <A NAME="dida">Attività didattica</A> non ha effetti visibili ... <A HREF="#dida">didattica</A> didattica = Vai al testo contrassegnato con l’etichetta dida (paragrafo “Attività didattica”) in questa pagina <A HREF="home.html#dida">didattica</A> dida (paragrafo “Attività didattica”) nella pagina home.html Gena - a.a. 2004/2005 Web Design
32
HTML: tabelle TABLE = tabella TR = riga TD = cella 1a colonna
(Table Row) TD = cella (Table Data) <TABLE> <TR> <TD> contenuto cella 1 </TD> <TD> contenuto cella 2 </TD> ... </TR> </TABLE> 1a colonna 2a colonna 1a riga Gena - a.a. 2004/2005 Web Design
33
HTML: tabelle Attributi del tag TABLE:
BGCOLOR = colore dello sfondo della tablella ALIGN = "CENTER/LEFT/RIGHT" BORDER = spessore del bordo (in pixel) BORDERCOLOR = colore del bordo WIDTH = larghezza (in pixel) o in % CELLSPACING = spazio tra celle CELLPADDING = spazio tra testo e bordo cella > NB: La maggioranza degli attributi di TABLE possono essere applicati anche a TR e a TD Attributi esclusivi del tag TD: <TD COLSPAN = estensione della cella su più colonne ROWSPAN = estensione della cella su più righe VALIGN = posizione del testo nella cella Gena - a.a. 2004/2005 Web Design
34
HTML: tabelle <TABLE BGCOLOR="#CCFFFF" BORDER="1" ALIGN="CENTER" WIDTH="70%" CELLPADDING="5"> <TR BGCOLOR="#FFCCFF"> <TD COLSPAN="4" ALIGN="CENTER"><H3>Docenti del modulo di Informatica</H3></TD> </TR> <TR> <TD ALIGN="LEFT"><B>Nome<B></TD> <TD ALIGN="CENTER"><IMG SRC="img/mondo.gif" ALIGN="middle" HSPACE="6"></TD> <TD ALIGN="CENTER"><IMG SRC="img/busta2.gif" ALIGN="middle" HSPACE="1"></TD> <TD ALIGN="CENTER"><IMG SRC="img/tel.gif" ALIGN="middle"></TD> <TD ALIGN="LEFT">Cristina Gena</TD> <TD ALIGN="CENTER"><A HREF=" TARGET="_blank"> <TD ALIGN="CENTER">cgena[at]di.unito.it</TD> <TD ALIGN="CENTER"> </TD> ... Gena - a.a. 2004/2005 Web Design
35
HTML: tabelle ... <TR>
<TD ALIGN="LEFT">Anna Goy</TD> <TD ALIGN="CENTER"><A HREF=" TARGET="_blank"> <TD ALIGN="CENTER">goy[at]di.unito.it</TD> <TD ALIGN="CENTER"> </TD> </TR> <TD ALIGN="LEFT">Giovanna Petrone</TD> <TD ALIGN="CENTER"><A HREF=" TARGET="_blank"> <TD ALIGN="CENTER">giovanna[at]di.unito.it</TD> <TD ALIGN="CENTER"> </TD> </TABLE> Gena - a.a. 2004/2005 Web Design
36
HTML: tabelle spazio intorno al testo ... CELLPADDING="5">
<TABLE BGCOLOR="#CCFFFF" ... ... BORDER="1"... spazio intorno al testo <TD ALIGN="LEFT"> <TD ALIGN="CENTER"> <TR BGCOLOR="#FFCCFF"> <TD COLSPAN="4" ... Gena - a.a. 2004/2005 Web Design
37
HTML: tabelle Le tabelle possono essere usate per il layout, per esempio: <TABLE... <TABLE... <TABLE... <TABLE... <TD WIDTH="20%"... <TD WIDTH="60%"... Gena - a.a. 2004/2005 Web Design
38
HTML: tabelle <!-- striscia in alto -->
<TABLE BORDER="0" CELLPADDING="1" CELLSPACING="0" WIDTH="100%" ALIGN="CENTER" BGCOLOR="#003399"> <TR><TD ALIGN=center VALIGN=middle> <P><B>Nido L'Aquilone</B> - Via Oltrebrenta, Noventa Padovana (PD)</P> </TD></TR> </TABLE><BR> <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0"><TR> <TD WIDTH="20%" ALIGN="LEFT" VALIGN="TOP"> <IMG SRC="img/pag1col25-70.jpg"> <P ALIGN="LEFT"><B>Per informazioni:</B> Alessandra: <BR> Maria Carla: Stefania: </P> </TD> <TD WIDTH="60%" ALIGN="LEFT" VALIGN="TOP"> <A HREF="index.html"><IMG SRC="img/bimbo2v.gif" BORDER="0" HSPACE="20"></A> <A HREF="cosa.html"><IMG SRC="img/bimbo6v.gif" BORDER="0" HSPACE="20"></A> <A HREF="chi.html"><IMG SRC="img/bimbo7v.gif" BORDER="0" HSPACE="20"></A> <BR><BR> <A HREF="dove.html"><IMG SRC="img/bimbo5v.gif" BORDER="0" HSPACE="20"></A> <A HREF="attivita.html"><IMG SRC="img/bimbo3v.gif" BORDER="0" HSPACE="20"></A> <A SRC="img/bimbo4v.gif" BORDER="0" HSPACE="20"></A> (continua…) Gena - a.a. 2004/2005 Web Design
39
HTML: tabelle (… continua)
<TABLE BORDER="0" CELLPADDING="10"><TR><TD> <P ALIGN="CENTER" CLASS="BIG"> Nido per bimbi <B>da 0 a 3 anni</B></P> <TABLE BORDER="1" BORDERCOLOR="red" CELLPADDING="4"><TR><TD> <P ALIGN="CENTER"> <IMG SRC="img/clock1.gif" BORDER="0" ALIGN="ABSCENTER"> <FONT COLOR="red" SIZE="3"><B>AVVISI:</B></FONT> </P> <UL><FONT COLOR="red"> <LI>Nel periodo <B>maggio-giugno</B> l'asilo chiuderà alle <B>17.30</B> <BR><BR> <LI><B>Nei mesi giugno-luglio si accolgono bambini provenienti <BR> dagli asili comunali che in quel periodo resteranno chiusi</B> <LI>Inoltre l'asilo resterà <B>chiuso dal 5 al 30 di agosto</B> <LI>Per appuntamenti e informazioni <B><A HREF="dove.html">contattateci</A> !</B> </FONT></UL> </TD></TR></TABLE> </TD> </TR></TABLE> Gena - a.a. 2004/2005 Web Design
40
HTML: frame I frame servono a suddividere la finestra del browser in sotto-finestre tra loro indipendenti, nelle quali si possono caricare documenti (file HTML) diversi Gena - a.a. 2004/2005 Web Design
41
HTML: frame Il file HTML che rappresenta l’intera pagina contiene
le istruzioni per la suddivisione della finestra: <FRAMESET ROWS="20%, 80%"> <FRAME NAME="upperbar" SRC="title.html"> <FRAMESET COLS=”30%, 70%"> <FRAME NAME= "leftbar" SRC=”left.html"> <FRAME NAME= "mainarea" SRC=”main.html"> </FRAMESET> title.html "upperbar" (20%) 80% left.html main.html "leftbar" (30% di 80%) "mainarea" (70% di 80%) Gena - a.a. 2004/2005 Web Design
42
HTML: frame Attributi del tag FRAME: <FRAME
SRC = il file da visualizzare nel frame NAME = il nome del frame SCROLLING = presenza delle barre di scorrimento NORESIZE = per inibire il ridimensionamento MRGINWIDTH = margine destra/sinistra (in pixel) MRGINHEIGHT = margine sopra/sotto (in pixel) > Gena - a.a. 2004/2005 Web Design
43
HTML: frames L’attributo TARGET: Ipotesi 1: voglio caricare la
pagina pubblicazioni.html al posto dell'intera pagina: Pubblicazioni ... "upperbar" "leftbar" "mainarea" ... pubblicazioni Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea": Pubblicazioni ... "upperbar" "leftbar" "mainarea" Gena - a.a. 2004/2005 Web Design
44
HTML: frames Ipotesi 1: voglio caricare la pagina pubblicazioni.html al posto dell'intera pagina: Pubblicazioni ... pubblicazioni = <A HREF="pubblicazioni.html" TARGET="_top">pubblicazioni </A> carica nella finestra intera Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea": Pubblicazioni ... "upperbar" "leftbar" "mainarea" pubblicazioni = <A HREF="pubblicazioni.html" TARGET="_self">pubblicazioni </A> carica nel frame in cui ti trovi (NB: equivale a non indicare il TARGET) Gena - a.a. 2004/2005 Web Design
45
HTML: l'attributo TARGET
L’attributo TARGET può essere usato anche indipendentemente dai frame, per aprire una nuova finestra; per esempio... ... voglio che le home page si aprano in nuove finestre: <A HREF=" TARGET="_blank">...</A> carica in una nuova finestra Gena - a.a. 2004/2005 Web Design
46
HTML: image map Un’image map è un’immagine suddivisa in “aree sensibili” che, al click del mouse, si comportano come link. Per es, consideriamo l’immagine contenuta nel file willer.gif click qui per caricare tiger.html click qui per caricare kit.html click qui per caricare carson.html click qui per caricare tex.html Gena - a.a. 2004/2005 Web Design
47
HTML: image map Per costruire un image map:
Si dichiara che, in corrispondenza di una certa immagine, verrà usata una certa "mappa" (con l'attributo USEMAP) <IMG SRC="willer.gif" USEMAP="#miamappa"> Si definisce la "mappa" (con il tag MAP) <MAP NAME="miamappa"> <AREA SHAPE="rect" COORDS="55,25,100,70" HREF="kit.html"> <AREA SHAPE="rect" COORDS="125,25,160,70" HREF="tiger.html"> <AREA SHAPE="rect" COORDS="165,25,220,70" HREF="tex.html"> <AREA SHAPE="rect" COORDS="80,75,125,125" HREF="carson.html"> </MAP> NB: Come si fa a conoscere le coordinate? Gena - a.a. 2004/2005 Web Design
48
HTML: image map Si può caricare l'immagine con l'attributo ISMAP e poi leggere le coordinate sulla barra di stato, muovendosi con il mouse (NB: l'origine delle coordinate è in alto a sinistra): <A HREF="#"> <IMG SRC="willer.gif" ISMAP> </A> NB: Gli strumenti di sviluppo (come Dream- weaver, FrontPage, ...) generalmente forniscono metodi per costruire automaticam. le mappe! Gena - a.a. 2004/2005 Web Design
49
HTML: form Le form (moduli) sono un meccanismo per rendere interattiva una pagina Web, richiedendo informazioni (dati) all’utente e inviandole al server per l’elaborazione Gena - a.a. 2004/2005 Web Design
50
HTML: form Attributi del tag FORM: METHOD:
<FORM METHOD = "GET/POST" ACTION = cosa-fare> ... campi del modulo ... <INPUT TYPE="SUBMIT" VALUE="Invia"> <INPUT TYPE="RESET" VALUE="Cancella"> </FORM> Attributi del tag FORM: METHOD: specifica il modo in cui vengono inviati i dati: GET = "in chiaro" (in coda all'URL specificato nell'attributo ACTION) POST = "nascosti" (all'interno dlel'oggetto che viene inviato al server) Gena - a.a. 2004/2005 Web Design
51
HTML: form ACTION: è un URL che contiene il richiamo di un’azione, cioè un programma; può essere, per es.: mailto:indirizzo-di- invia una all’indirizzo specificato, con i dati del modulo una Servlet Java o uno Script CGI invia i dati del modulo ad un programma che è in grado di riceverli e decodificarli una pagina ASP, PHP, JSP (cioè una pagina contenente un programma in grado di riceverle i dati del modulo e di decodificarli) Gena - a.a. 2004/2005 Web Design
52
HTML: form I pulsanti: viene eseguita l’azione specificata in ACTION
<INPUT TYPE="SUBMIT" VALUE="Invia"> viene eseguita l’azione specificata in ACTION <INPUT TYPE="RESET" VALUE="Cancella"> vengono cancellati tutti i dati già inseriti Gena - a.a. 2004/2005 Web Design
53
HTML: form Campi del modulo (ovvero le modalità per richiedere i dati): <TEXTAREA NAME="commento" ROWS="10" COLS="20"> </TEXTAREA> <INPUT TYPE="TEXT" NAME="nome" VALUE="" SIZE="20"> <INPUT TYPE="CHECKBOX" NAME="interessi" VALUE=""> <INPUT TYPE="RADIO" NAME="partec" VALUE=""> Gena - a.a. 2004/2005 Web Design
54
HTML: form <SELECT NAME="eta">
<OPTION VALUE="fino5">fino a 5 anni</OPTION> <OPTION VALUE=“da6a11">da 6 a 11 anni</OPTION> ... </SELECT> Gena - a.a. 2004/2005 Web Design
55
HTML: struttura gerarchica
I tag in un documento HTML definiscono una struttura gerarchica: <HTML> <HEAD> ... </HEAD> <BODY> <H1>...</H1> <P> <B>...</B> <A HREF=...> <IMG...> </A> </P> </BODY> </HTML> HTML HEAD BODY H1 P ... B A IMG l'elemento HTML è "genitore" degli elem. HEAD e BODY; HEAD e BODY sono "figli" si HTML; ecc... Gena - a.a. 2004/2005 Web Design
Presentazioni simili
