Post on 03-May-2015
PROGETTO…
• Internet Providers, registrazione del dominio
• Costruire una home page
• … e renderla visibile sul Web
HTML: i tagIn un file HTML contiene indicazioni per il browser (cheinterpreta 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:
<HTML> <HEAD> ... </HEAD> <BODY> ... </BODY></HTML>
inizio del file HTML
fine del file HTML
intestazione
contenuto della pagina
spesso funziona anche senza virgolette, ma è meglio metterle sempre!
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-8859-1"/>
<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>
HTML: l'intestazione
<TITLE>Master in Editoria Multimediale</TITLE>
titolo della
finestra
HTML: l'intestazione
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=ISO-8859-1"/>
Comunica al browseril 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!)
HTML: il tag BODY
All'interno del tag BODY si trova il documento vero eproprio (il contenuto della pagina Web)
Gli attributi del tag BODY:<BODY
BGCOLOR = colore dello sfondoBACKGROUND = immagine di sfondoTEXT = colore del testoLINK = colore dei linkVLINK = colore dei link vistitatiALINK = colore dei link attivi
>...</BODY>
HTML: il tag BODY
<BODY BGCOLOR="#00FFFF" LINK="#800080" VLINK="#FF0000">
HTML: il tag BODY
<BODY BACKGROUND="rosa2.jpg" ...>
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 = #000000bianco = R:255, G:255, B:255 = #FFFFFFrosso = R:255, G:0, B:0 = #FF0000verde acqua = R:105, G:247, B:222 = #69F7DE
Esistono dei nomi mnemonici per i colori più comuni (per es. “red”, “acquamarine”, “beige”, ecc.)
HTML: titoli
Possiamo usare vari tag per strutturare il documento (cioè ilcontenuto 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
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>
HTML: paragrafi<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/>
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
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
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
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
HTML: caratteri
<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
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>...
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>
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>
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%">
HTML: immagini<IMG
SRC = nome del file che contiene l’immagineALT = descrizione dell'immagineALIGN = "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 ... />
HTML: immagini
<IMG SRC="img/Unilogo.jpg" ALT="Università di Torino" ALIGN="BOTTOM" BORDER="0" HSPACE="10">
HTML: suoni<BGSOUND
SRC = nome del file che contiene il suonoLOOP = 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 ... />
HTML: link
Link esterni e ancore interne:
home.html:
.........orario
.........
didattica
.........
Attività didattica: Bla, bla, bla, ...
.........
orario.html.........
linkesterno
ancorainterna
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)
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: devetrovarsi nella stessa cartella della pagina corrente!)
<A HREF="http://www.di.unito.it/~goy/ masterEM/orario.html">orario</A>
orario = vai alla pagina orario.html, che si trova nella cartella masterEM, nell'area dell'utente goy, sul server www.di.unito.it e utilizza il protocollo http (HyperText Transfer Protocol, utilizzato di default dai browser principali)
HTML: link
Ancore interne:<A NAME = "etichetta"> ancora </A> creo l'ancora<A HREF="#etichetta">link</A> link (interno)
all'ancoraPer 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> didattica = Vai al testo contrassegnato con l’etichetta
dida (paragrafo “Attività didattica”) nella pagina home.html
HTML: tabelle
TR = riga(Table Row)
TD = cella(Table Data)
TABLE = tabella
<TABLE> <TR> <TD> contenuto cella 1 </TD> <TD> contenuto cella 2 </TD> ... </TR> ...</TABLE>
1a riga1a colonna2a colonna
HTML: tabelleAttributi del tag TABLE:
<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>
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> </TR> <TR> <TD ALIGN="LEFT">Cristina Gena</TD> <TD ALIGN="CENTER"><A
HREF="http://www.di.unito.it/~cgena" TARGET="_blank">www.di.unito.it/~cgena</A></TD>
<TD ALIGN="CENTER">cgena[at]di.unito.it</TD> <TD ALIGN="CENTER">011 670 6827</TD> </TR> ...
HTML: tabelle ... <TR> <TD ALIGN="LEFT">Anna Goy</TD> <TD ALIGN="CENTER"><A
HREF="http://www.di.unito.it/~goy" TARGET="_blank">www.di.unito.it/~goy</A></TD>
<TD ALIGN="CENTER">goy[at]di.unito.it</TD> <TD ALIGN="CENTER">011 670 6786</TD> </TR> <TR> <TD ALIGN="LEFT">Giovanna Petrone</TD> <TD ALIGN="CENTER"><A
HREF="http://www.di.unito.it/~giovanna" TARGET="_blank">www.di.unito.it/~giovanna</A></TD>
<TD ALIGN="CENTER">giovanna[at]di.unito.it</TD> <TD ALIGN="CENTER">011 670 6763</TD> </TR></TABLE>
HTML: tabelle<TABLE BGCOLOR="#CCFFFF" ...
... BORDER="1"...
... CELLPADDING="5">
spazio intorno al testo
<TR BGCOLOR="#FFCCFF">
<TD COLSPAN="4" ...
<TD ALIGN="LEFT">
<TD ALIGN="CENTER">
HTML: tabelle
Le tabelle possono essere usate per il layout, per esempio:
<TABLE...
<TABLE...
<TD WIDTH="20%"... <TD WIDTH="60%"...
<TABLE...
<TABLE...
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, 36 - 35027 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: 347 4107531 - <BR> Maria Carla: 340 2741951 - Stefania: 349 0562006 </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 HREF="mailto:ale@ya.it"><IMG SRC="img/bimbo4v.gif" BORDER="0" HSPACE="20"></A> <BR><BR>
(continua…)
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> <IMG SRC="img/clock1.gif" BORDER="0" ALIGN="ABSCENTER"> </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> <BR><BR> <LI>Inoltre l'asilo resterà <B>chiuso dal 5 al 30 di agosto</B> <BR><BR> <LI>Per appuntamenti e informazioni <B><A HREF="dove.html">contattateci</A> !</B> </FONT></UL> </TD></TR></TABLE> </TD></TR></TABLE> </TD></TR></TABLE>
HTML: frameI frame servono a suddividere la finestra del browser in sotto-finestre tra loro indipendenti, nelle quali si possono caricare documenti (file HTML) diversi
HTML: frameIl file HTML che rappresenta l’intera pagina contienele 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></FRAMESET>
title.html
left.html main.html
"upperbar" (20%)
"mainarea"(70% di 80%)
"leftbar" (30% di 80%)
80%
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)>
HTML: frames
L’attributo TARGET:
"upperbar"
"leftbar" "mainarea"
...pubblicazioni...
Ipotesi 1: voglio caricare la pagina pubblicazioni.html al posto dell'intera pagina:
Pubblicazioni...
Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea":
Pubblicazioni...
"upperbar"
"leftbar"
"mainarea"
Pubblicazioni...
HTML: framesIpotesi 1: voglio caricare la pagina pubblicazioni.html al posto dell'intera pagina:
Pubblicazioni...
Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea":
Pubblicazioni...
"upperbar"
"leftbar"
"mainarea"
Pubblicazioni...
pubblicazioni = <A HREF="pubblicazioni.html" TARGET="_top">pubblicazioni</A>
carica nella finestra intera
pubblicazioni = <A HREF="pubblicazioni.html" TARGET="_self">pubblicazioni</A>
carica nel frame in cui ti trovi(NB: equivale a non indicare il TARGET)
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="http://www.di.unito.it/~giovanna" TARGET="_blank">...</A>
carica in una nuova finestra
HTML: image map
click qui per caricare kit.html
click qui per caricare tex.html
click qui per caricare tiger.html
click qui per caricare carson.html
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
HTML: image map
Per costruire un image map:1. Si dichiara che, in corrispondenza di una certa immagine,
verrà usata una certa "mappa" (con l'attributo USEMAP) <IMG SRC="willer.gif" USEMAP="#miamappa">
2. 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?
HTML: image mapSi 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!
HTML: formLe form (moduli) sono un meccanismo per rendere interattiva una pagina Web, richiedendo informazioni (dati) all’utente e inviandole al server per l’elaborazione
HTML: form<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)
HTML: form
ACTION: è un URL che contiene il richiamo di un’azione, cioè un programma; può essere, per es.: mailto:indirizzo-di-email invia una email
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)
HTML: form
I pulsanti:<INPUT TYPE="SUBMIT" VALUE="Invia">
viene eseguita l’azione specificata in ACTION
<INPUT TYPE="RESET" VALUE="Cancella">
vengono cancellati tutti i dati già inseriti
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="">
HTML: form
<SELECT NAME="eta"><OPTION VALUE="fino5">fino a 5 anni</OPTION><OPTION VALUE=“da6a11">da 6 a 11 anni</OPTION> ...
</SELECT>
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...
TO DO!!!
Modalità per applicare una trasformazione XSL ad un documento XML (cioè per invocare il processore XSLT):
1. Il browser (per es. IE6) contiene un processore XSLT: il file XML viene caricato come una normale pagina; il foglio di stile da applicare è indicato nel file XML; il risultato viene visualizzato dal browser stesso
2. Un programma (per es. Java) standalone applica il foglio di stile XSL al file XML
3. Un Web Server applica il foglio di stile XSL al file XML e spedisce il risultato al client (browser) che ha originato l'applicazione
Vedremo degli esempi delle prime due modalità
vedi proveXSL\readme.txt
XML: XSL - IV
1. Il browser (per es. IE6) contiene un processore XSLT:
• il file XML viene caricato come una normale pagina
• nel file XML indichiamo qual è il foglio di stile da applicare: <?xml-stylesheet type="text/xsl" href="listinoWeb.xsl"?>
• nel file XSL indichiamo il namespace specifico usato dal browser: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
Esempi: coffees.dtdlistino.xmllistinoWeb.xsllistinoCarta.xsl
XML: XSL - V
2. Un programma (per es. Java) standalone applica il foglio di stile XSL al file XML:
• utilizziamo un programma Java (NB: una classe, contenente il metodo main) fornito negli esempi del tutorial di JWSDP (leggermente modificato)
• in questo programma indichiamo il file XML di partenza, il foglio di stile XSL da applicare e il nome del file in cui scrivere il risultato (nel nostro caso un file HTML)
Esempi: coffees.dtd listinoWebJ.htmllistinoJ.xml listinoCartaJ.htmllistinoWebJ.xsl MyStylizer.java
(e .class)listinoCartaJ.xsl
XML: XSL - VI