Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un...

55
Gena - a.a. 2004 /2005 Web Design 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 Pagine Web statiche: HTML

Transcript of Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un...

Page 1: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 1

Pagine Web statiche: HTMLHTML (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

Pagine Web statiche: HTML

Page 2: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 2

HTML: introduzione

home page:

link1

link2

pagina papers:

link3

pagina di un editore

pagina del celi

link4

(a) I link (connessioni ipertestuali)

home.html: contenuto+link+aspetto

pagina Web visualizzata da un Web browser (per es. Microsoft Interner Explorer)interpretati

Page 3: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 3

HTML: introduzione

(b) la visualizzazione (esempio): cosa si vede...

Page 4: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 4

HTML: introduzione

...<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><P> <A HREF="javascript:openAlbum('foto.html');"onMouseover="window.status='foto'; return true" onMouseOut="window.status='';return true;">Qualche foto dei nostri locali</A></P><P> 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.</P><B> <P> Le attività si svolgeranno tutti i giorni con il seguente orario: </P> <UL> <LI>al mattino, dalle 10.00 alle 11.00</LI> <LI>al pomeriggio, dalle 16.00 alle 17.00 </LI> </UL> </B>... aspetto

contenuto

(b) la visualizzazione (esempio): … cosa c’è dietro

Page 5: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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

Page 6: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 6

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!

Page 7: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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-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>

Page 8: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 8

HTML: l'intestazione

<TITLE>Master in Editoria Multimediale</TITLE>

titolo della

finestra

Page 9: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 9

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!)

Page 10: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 10

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>

Page 11: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 11

HTML: il tag BODY

<BODY BGCOLOR="#00FFFF" LINK="#800080" VLINK="#FF0000">

Page 12: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 12

HTML: il tag BODY

<BODY BACKGROUND="rosa2.jpg" ...>

Page 13: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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 = #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.)

Page 14: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 14

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

Page 15: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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>

Page 16: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 16

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/>

Page 17: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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

Page 18: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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

Page 19: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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

Page 20: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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

Page 21: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 21

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

Page 22: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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>...

Page 23: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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>

Page 24: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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>

Page 25: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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%">

Page 26: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 26

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 ... />

Page 27: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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">

Page 28: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 28

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 ... />

Page 29: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 29

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)

Page 30: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 30

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)

Page 31: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 31

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

Page 32: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 32

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

Page 33: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 33

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>

Page 34: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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> </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> ...

Page 35: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 35

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>

Page 36: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 36

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">

Page 37: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 37

HTML: tabelle

Le tabelle possono essere usate per il layout, per esempio:

<TABLE...

<TABLE...

<TD WIDTH="20%"... <TD WIDTH="60%"...

<TABLE...

<TABLE...

Page 38: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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, 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:[email protected]"><IMG SRC="img/bimbo4v.gif" BORDER="0" HSPACE="20"></A> <BR><BR>

(continua…)

Page 39: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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> <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>

Page 40: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 40

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

Page 41: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 41

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%

Page 42: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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)>

Page 43: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 43

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...

Page 44: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 44

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)

Page 45: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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="http://www.di.unito.it/~giovanna" TARGET="_blank">...</A>

carica in una nuova finestra

Page 46: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 46

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

Page 47: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 47

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?

Page 48: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 48

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!

Page 49: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 49

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

Page 50: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 50

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)

Page 51: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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-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)

Page 52: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Gena - a.a. 2004/2005 Web Design 52

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

Page 53: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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="">

Page 54: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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>

Page 55: Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

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...