HTML e Javascript

Introduzione alle pagine Web e al linguaggio HTML
di Alessandro Bagaglia e Marco Baioletti
versione per il corso di Laboratorio Statistico-Informatico II
A.A. 2002-03
Introduzione e terminologia
Introduzione
Internet ha avuto uno sviluppo enorme in questi ultimi anni, grazie soprattutto all’incredibile impulso dato
dall’introduzione del servizio WWW (World Wide Web), il servizio di accesso alle pagine Web, diventato così
importante che nel linguaggio corrente Internet è diventato sinonimo di WWW.
Quasi tutti i servizi di Internet, tra questi la posta elettronica (e-mail), il trasferimento file (FTP), l’accesso a
risorse di calcolo remote (Telnet), le newsgroup, le chat-line (IRC) e ovviamente anche WWW, sono gestiti
attraverso un meccanismo chiamato client-server, in cui due computer (o meglio due programmi che girano
in due computer), detti rispettivamente client e server, comunicano fra di loro per consentire all’utente di
accedere al servizio.
L’utente solitamente utilizza il computer che fa le veci del client, mentre il computer che amministra il servizio
o detiene le risorse in gioco fa le veci del server.
Il client è la parte attiva, cioè quella che in base alle esigenze dell’utente contatta il server e gli richiede di
fornirgli un servizio. Il server è la parte passiva, cioè quella che resta in attesa di eventuali chiamate da parte
di uno o più client e quando arrivano queste richieste tenta di soddisfarle. Pertanto mentre il client può
essere attivato solo quando l’utente ne ha effettivamente bisogno, il server deve teoricamente essere
sempre in funzione, se si vuole che sia in grado di ricevere le richieste da qualsiasi client in qualsiasi
momento.
Nel caso del servizio WWW, le risorse in gioco sono le pagine Web, il programma del client si chiama user
agent e il server si chiama server Web.
Il servizio WWW è stato inizialmente ideato nel 1989 da Tim Berners Lee, un fisico del CERN di Ginevra,
come strumento per la comunicazione tra gli scienziati dei vari gruppi di ricerca. Nel 1993, con la creazione
di Mosaic, il primo browser ideato, ebbe inizio la diffusione di WWW come strumento di comunicazione e di
informazione.
Uno dei motivi dell’attuale importanza e della velocità con cui vengono inserite nuove informazioni e creati
nuovi siti sta nella possibilità di enormi applicazioni in campo commerciale, come ad esempio il commercio
elettronico, oltre alla grande versatilità e alla facilità di uso.
Terminologia
In questa sezione introdurremo i termini più importanti per una corretta comprensione di tutti gli aspetti del
funzionamento del servizio WWW.
Browser o User Agent
Un browser è il programma “client” del servizio WWW. I browser attualmente più diffusi sono Internet
Explorer della Microsoft e Netscape Communicator della Netscape. Esistono diversi altri browser (Opera,
Lynx, ecc.) la cui diffusione è però resa problematica dal fatto che attualmente i browser sono distribuiti
gratuitamente.
I compiti di un browser sono molteplici. Innanzitutto esso deve gestire le richieste dell’utente.
La richiesta principale è quella di ottenere una pagina Web da Internet, che può principalmente verificarsi in
due modi: l’utente ha digitato un indirizzo nella casella dell’indirizzo del browser, oppure ha cliccato su un
link.
A questo punto il browser legge l’indirizzo della pagina, ne estrae l’indirizzo del “server” e lo contatta
chiedendogli la pagina. Il server gli risponde inviandogli la pagina richiesta, o un messaggio di errore se la
pagina non è disponibile.
Altre condizioni di errore si verificano se non si riesce a trovare il server, perché il server non esiste, o se il
server non risponde entro un certo tempo limite (time-out), perché magari ci sono problemi di linea.
La pagina richiesta, una volta che è arrivata a destinazione, viene interpretata dal browser in modo da
essere visualizzata. Infatti le pagine sono solitamente scritte in HTML, ma possono anche contenere codice
Java, JavaScript, VBScript, ActiveX, ecc.
E’ necessaria una fase di interpretazione dei comandi HTML in modo da poter comporre sullo schermo le
varie parti della pagina (scritte, immagini, effetti visivi, ecc.), in quanto il linguaggio HTML non contiene
direttamente una descrizione grafica della pagina (cioè una pagina non è in generale inviata come
immagine) ma indica come deve essere visualizzata, lasciando al browser una certa libertà di poter decidere
su alcuni particolari.
Le parti scritte in Java, Javascript, ecc. consentono di ottenere degli effetti non previsti nel linguaggio HTML
o di svolgere alcune funzioni normalmente non supportate dal browser. Ad esempio si possono ottenere
effetti di animazione, convalida dei dati immessi, calcoli matematici, ecc.
Esiste inoltre la possibilità di creare delle pagine Web con strumenti diversi, quali Macromedia Flash, che
produce pagine non in formato HTML, ma in formati diversi che poi devono essere interpretati da parti
aggiuntive (le cosiddette plug-in) del browser.
Le plug-in possono anche servire per poter trattare anche parti della pagina non standard: ad esempio
normalmente solo le immagini nei formati grafici GIF, JPEG e PNG sono direttamente visualizzabili dal
browser, mentre gli altri tipi di formato grafico utilizzano una plug-in apposita, che deve essere già installata
al momento della visualizzazione della pagina.
Un browser permette inoltre di svolgere altre funzioni: il salvataggio su disco e la stampa delle pagine
scaricate, la gestione dei preferiti (o bookmark), cioè una specie di agenda dei siti più importanti per l’utente,
la gestione della cronologia (o history), in cui vengono memorizzati gli indirizzi degli ultimi siti visitati, la
gestione della cache, una piccola memoria su disco in cui si memorizzano le ultime pagine (e loro parti)
scaricate, ed infine negli ultimi browser la gestione della posta elettronica e dei newsgroup.
Server Web
Il server Web è la controparte server del servizio WWW. Esistono svariati server Web sul mercato, i più
famosi sono Apache (per Unix/Linux) e IIS – Internet Information Service della Microsoft (per Windows).
Si tratta di un programma che resta in attesa continua di eventuali messaggi da parte di qualsiasi browser (o
altri programmi che gestiscono le pagine Web, come gli spider dei motori di ricerca) che gli chieda di inviargli
una pagina da lui gestita.
Il server Web deve vedere se la pagina richiesta è presente nel proprio disco e se è disponibile per la
pubblicazione. Se queste condizioni sono verificate allora la pagina richiesta viene spedita al browser,
altrimenti gli invia un messaggio.
Un server Web può anche richiedere delle informazioni al browser, ad esempio per accedere a siti a
pagamento, è necessario che l’utente sia autenticato, cioè l’utente deve digitare username e password.
Se un browser vuole ottenere una pagina dinamica, il server Web deve eseguire il programma che in base
alle richieste dell’utente deve creare la pagina desiderata.
Poiché un server Web deve essere in grado di rispondere a molti browser, anche contemporaneamente,
solitamente viene installato su macchine abbastanza potenti.
Pagina Web
La pagina Web è la più piccola informazione accessibile su Internet con il servizio WWW, anche se una
pagina può essere composta da più parti (file) separati, come le immagini e le animazioni.
Sito
Un sito è una collezione di più pagine Web memorizzate sullo stesso server (anche se ciò non è
strettamente indispensabile) e collegate fra di loro attraverso dei link.
Un sito ha solitamente una pagina iniziale, da cui dovrebbe essere facilmente per l’utente raggiungere
qualunque pagina presente nel sito.
Il modo in cui le pagine di un sito sono collegate tra di loro può determinare diverse strutture di sito.
La struttura più semplice è quella lineare, in cui esiste una prima pagina, una seconda pagina, una terza e
così via ed ogni pagina è collegata con quella successiva e, al più, con quella precedente.
Una struttura più complessa è quella gerarchica o ad albero: esiste una pagina iniziale, collegata con diverse
pagine di primo livello, a loro volta collegate con pagine di secondo livello, e così via. Questa struttura viene
utilizzata quando si traduce un libro in formato HTML, in cui esiste una strutturazione in capitoli, sezioni,
sottosezioni, ecc.
La struttura più comunemente usata è quella a reticolo, in cui ogni pagina è collegata con quelle che
contengono contenuti che hanno una certa relazione con essa
Server proxy e cache
Nello scenario standard di interazione tra client (browser) e il server Web si può talvolta frapporre un server
aggiuntivo che può svolgere funzioni di server proxy e di cache.
In questo meccanismo il browser non comunica direttamente con il server Web, ma invia le proprie richieste
al server proxy, che decide se inoltrare o no le richieste al server Web e se consegnare oppure le no le
risposte al browser. Ciò può servire a limitare l’accesso ad Internet, vietando per esempio di entrare in
determinati siti.
Un’ulteriore servizio è quello di cache, in cui il server proxy può memorizzare su disco locale le pagine
richieste da tutti gli utenti a lui collegati, di modo che se un secondo utente richiede la stessa pagina, il
server proxy gli spedisce direttamente quella contenuta nella memoria cache senza avere il bisogno di
scaricarla nuovamente dal server Web.
FireWall
Un firewall è in genere un dispositivo in grado di filtrare le richieste in entrata ed in uscita su una particolare
risorsa (una scheda di rete in generale).
Il filtro eseguito dal firewall non è limitato alle risorse Web, ma a tutte le comunicazioni che si svolgono su
una particolare interfaccia di rete. I firewall possono essere dei particolari disposivi con un firmware
precaricato e configurabile, oppure dei server dedicati che usano un software per agire da firewall.
Dettaglio
URI o Universal Resource Identifier rappresenta il modo in cui una risorsa web viene richiesta; si compone di
3 parti:
1)il tipo di meccanismo usato per accedere alla risorsa
2)l'indirizzo della macchina che contiene la risorsa
3)il nome/percorso della risorsa richiesta
http://
www.xxxxxx.com/
index.html
L'esempio sopra mostrato è un URI assoluto; un esempio di URI relativo, ovvero la richiesta di una risorsa
presente all'interno della stessa macchina è
../../immagine.jpg
Tutti gli elementi presenti in HTML che referenziano un oggetto disponibile via Web utilizzano quindi l'URI.
L'HTML (HyperText Markup Language) è il linguaggio comune usato nel Word Wide Web o www per :
1)Pubblicare documenti
2)Leggere documenti
3)Inviare e mostrare dati remoti
4)Includere elementi per pubblicare video, animazioni ecc.
Negli ultimi anni l'HTML è sempre più usato per inviare e/o leggere dati presenti in banche dati remote.
Con l'utilizzo di linguaggi di scripting client-side (maggiormente JavaScript) si crea quello che viene definito
DHTML o HTML a contenuto dinamico.
Come già accennato, i software atto ad interpretare un documento scritto secondo le specifiche HTML è
chiamato HTML User Agent (in gergo browser), questo software legge il documento, lo interpreta ed infine lo
rappresenta a video. Dal momento che il produttore del software non sempre segue le specifiche, si possono
verificare casi nei quali due user agent diversi rappresentano il documento in maniera differente.
STRUTTURA DI UN DOCUMENTO HTML
Un documento HTML è diviso in tre sezioni:
1)una riga contenente le informazioni sulla versione
2)una sezione di dichiarazione di intestazione o HEAD
3)un corpo che contiene il documento BODY o FRAMESET
Un semplice esempio di un documento HTML completo può essere il seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.xxxx.com/index.html">
<HTML>
<HEAD>
<TITLE>Esempio di documento HTML</TITLE>
</HEAD>
<BODY>
<P>Testo qualsiasi
</BODY>
</HTML>
La prima riga fornisce delle informazioni allo User Agent se il documento utilizza ad esempio degli attributi
deprecati o dei frame.
L'elemento HTML (ormai opzionale) indica l'inizio della sezione HTML vera e propria e si chiude con la fine
del documento.
L'elemento HEAD contiene informazioni sul documento come il titolo ed altri valori che possono essere utili
ai motori di ricerca.
Il TITLE deve sempre essere presente ed indica il titolo del documento.
Per specificare le parole chiave e il contenuto della pagina Web (informazioni usate più che altro dai motori
di ricerca) si usano i tag META
<META NAME="KEYWORDS" CONTENT=”parole chiave della pagina”>
<META NAME="DESCRIPTION" CONTENT="descrizione della pagina”>
Inizieremo ora una serie di sezioni distinte atte ad illustrare i TAG più utilizzati:
I tag fondamentali di formattazione
Intestazioni
Esistono sei livelli di intestazioni, cioè di tipi di titoli inseribili nella pagina
<H1> Intestazione di primo livello </H1>
<H2> Intestazione di secondo livello </H2>
<H3> Intestazione di terzo livello </H3>
<H4> Intestazione di quarto livello </H4>
<H5> Intestazione di quinto livello </H5>
<H6> Intestazione di sesto livello </H6>
L’intestazione di primo livello viene visualizzata con caratteri molto grandi, quella di secondo livello con
caratteri grandi, ma più piccoli di H1, fino ad arrivare a H6, che dovrebbe essere poco più grande del testo
normale.
Formattazione del carattere
Per impostare la formattazione del carattere si usa il tag FONT con la sintassi
<FONT FACE=”nome del font” COLOR=”colore” SIZE=grandezza> testo </FONT>
Gli attributi FACE, COLOR e SIZE sono tutti facoltativi e ognuno di essi può essere specificato oppure no (e
in tal caso si intende che quella caratteristica non viene cambiata).
FACE modifica il tipo di carattere (il font nel senso letterale del termine).
Ad esempio
<FONT FACE=”arial”> Scritta in Arial </FONT>
COLOR definisce il colore dei caratteri. Il colore viene specificato in due modi.
Per alcuni colori molto usati basta scrivere il colore in inglese (AQUA, BLACK, BLUE,FUCHSIA,
GRAY,GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE e YELLOW).
Ad esempio
<FONT COLOR=”Red”> Scritta in rosso </FONT>
Tutti gli altri colori sono descritti con una codifica standard detta RGB. In pratica il colore viene decomposto
nelle componenti fondamentali: rosso, verde e blu. Ogni colore è quindi visto come una percentuale di
rosso, di verde e di blu, ad esempio il giallo è 100% rosso, 100% verde e 0% blu. Le percentuali sono poi
moltiplicate per 255 ed espresse nel codice esadecimale. Ad esempio il giallo è FF FF 00.
Per inserire il codice RGB si premette un carattere #. Ad esempio
<FONT COLOR=”#FFFF00”> Scritta in giallo </FONT>
SIZE imposta la grandezza dei caratteri.
Ad esempio
<FONT SIZE=”6”> testo scritto molto piccolo </FONT>
<FONT SIZE=”36”> testo scritto molto grande </FONT>
La grandezza è un numero positivo compreso tra 1 (più piccolo) e 7 (più grande) o un numero relativo
compreso tra –7 e +7. Il numero relativo indica se aumentare (ad esempio +2) o diminuire (ad esempio –1)
la grandezza rispetto ai caratteri precedenti.
Per rendere dei caratteri in grassetto, in corsivo o sottolineato si usa rispettivamente
<B>caratteri da mettere in grassetto </B>
<I>caratteri da mettere in corsivo </I>
<U> caratteri da sottolineare </U>
Formattazione del paragrafo
Per andare a capo si usa il tag <BR> poiché l’andata a capo in un testo viene considerato come uno spazio.
Per delimitare un paragrafo si usa
<P> testo del paragrafo </P>
Alla fine del paragrafo viene lasciata una linea vuota.
Per decidere l’allineamento a sinistra, centrato e a destra si usano rispettivamente
<P ALIGN=LEFT> testo allineato a sinistra </P>
<P ALIGN=CENTER>testo centrato </P>
<P ALIGN=RIGHT> testo allineato a destra </P>
Elenchi
Per creare un elenco puntato si usa
<UL>
<LI> elemento </LI>
<LI> elemento </LI>
...
<LI> elemento </LI>
</UL>
Ogni elemento dell’elenco sarà preceduto da un pallino (o da un altro simbolo a scelta e indicato nel tag UL
con l’attributo TYPE, che può assumere i valori DISC, CIRCLE, SQUARE).
Per creare un elenco numerato si usa
<OL>
<LI> elemento </LI>
<LI> elemento </LI>
...
<LI> elemento </LI>
</OL>
Ogni elemento dell’elenco sarà preceduto da un numero progressivo (o con un altro sistema a scelta e
indicato nel tag OL con l’attributo TYPE).
Gli elementi di formattazione dl testo visti finora sono utilizzati moltissimo per la scrittura di pagine HTML ed
è pertanto necessario conoscerli. Con l'introduzione delle specifiche HTML40, l'utilizzo di tali elementi è stato
dichiarato obsoleto.
CASCADE STYLE SHEETS (CSS)
Prima di illustrare i singoli TAGS, è necessaria una breve introduzione sui fogli stile o file con estensione css
dal momento che in HTML 4.0 l'uso di questi è preferito, come già accennato, rispetto ai deprecati
riferimenti agli stili diretti.
Un foglio stile è un semplice file di testo, strutturato in varie sezioni, dove vengono scritte delle classi di stile
grafico che possono essere utilizzate all'interno della nostra pagina HTML.
Mentre in passato si preferiva decidere colore e dimensione del testo, tabelle ed altro scrivendo direttamente
all'interno di ogni singolo TAG come suo attributo, ora si progetta il sito web considerando che tutti gli stili
usati verranno scritti in un foglio stile e richiamati da quegli elementi che ne devono fare uso; questa pratica
porta molti vantaggi fra i quali:
Uniformità degli stili applicati
Riduzione del codice da scrivere
Sostituzione dell'aspetto grafico di centinaia di documenti modificando un singolo file.
Riutilizzo dello stesso foglio stile per più siti
Un esempio del contenuto di un foglio stile può essere:
.intestazione_tabella {
font-size : 10pt;
font-family : Comic Sans MS;
font-weight : bold;
font-style : normal;
color : #FFFFFF;
background-color : #006600;
}
.corpo_tabella_bold {
font-size : 10pt;
font-family : Comic Sans MS;
font-weight : bold;
font-style : normal;
color : #000000;
background-color : #FFFFFF;
}
.corpo_tabella_normal {
font-size : x-small;
font-family : Comic Sans MS;
font-weight : normal;
font-style : normal;
color : #000000;
background-color : #FFFFFF;
}
Dall pagina HTML il foglio stile desiderato va referenziato con una istruzione del tipo:
<link rel="stylesheet" type="text/css" href="./mio_stile.css">
e poi da ogni singolo TAG che richiede un tipo di formattazione contenuta nel css è necessario richiamarla
con una istruzione del tipo:
font class="intestazione_tabella"
<BODY></BODY>
Il TAG BODY delimita il corpo del documento, a parte numerose funzioni per la formattazione del testo
questo è un TAG molto semplice e non necessita di ulteriore approfondimento.
<TABLE></TABLE>
Le Tabelle sono gli elementi più usati in HTML per organizzare testi, immagini ed altro, anche se ciò può
comportare almeno due inconvenienti: il contenuto di una tabella viene mostrata a video dopo che tutta la
tabella è stata caricata e nei browser non visuali la tabella crea problemi; per ovviare a questi inconvenienti
andrebbero usati gli style sheets; le tabelle possono essere nidificate.
L'organizzazione generica di una tabella è costituita dai TAG TABLE, TR e TD dove TR sta per TABLE ROW
o riga di tabella e TD sta per TABLE DATA CELL o cella di dati.
Quindi un utilizzo generico dei tre elementi può essere rappresentato dal seguente esempio:
<TABLE>
<TR>
<TD>Ciao</TD>
</TR>
</TABLE>
In questo caso ovviamente il risultato ottenuto è lo stesso che se la tabella non fosse stata presente in
quanto non sono state sfruttate le opzioni di formattazione o attributi, che per TABLE possono essere:
WIDTH = larghezza della tabella
BORDER = indica se la tabella utilizza un contorno
CELLSPACING = spaziatura fra le celle della tabella
CELLPADDING = spaziatura interna alle celle
ALIGN = allineamento della tabella
BGCOLOR = colore di sfondo della tabella che va espresso secondo lo specchietto A
L'elemento opzionale CAPTION fornisce il titolo della tabella ed è seguito dagli elementi sempre opzionali
COL e COLGROUP che specificano la larghezza delle colonne ed il raggruppamento. Seguono poi gli
elementi THEAD, TFOOT e TBODY con gruppi di righe, contengono rispettivamente righe di intestazione e
di chiusura mentre il TBODY indica il gruppo principale di righe della tabella.
Un gruppo di righe contiene poi gli elementi TR per ogni riga ed ogni riga contiene un TH o TD, elementi per
le testate di cella o delle di dati.
In una tabella deve essere presente almeno un elemento TBODY, anche se non dichiarato esplicitamente;
se sono presenti più elementi THEAD o TFOOT il TBODY va dichiarato.
<TABLE>
<TR>
<TH>Abbreviato</TH>
<TH>Forma lunga</TH>
</TR>
<TR>
<TD>AUT</TD>
<TD>Autore</TD>
</TR>
<TR>
<TD>ARG</TD>
<TD>Argomento</TD>
</TR>
<TR>
<TD>TIT</TD>
<TD>Titolo</TD>
</TR>
</TABLE>
La stessa tabella può essere scritta in forma più “ricca” raggruppando le righe ed aggiungendo
un'intestazione:
<TABLE border=1 bgcolor=”red”>
<CAPTION>Abbreviazioni comuni</CAPTION>
<THEAD>
<TR>
<TH>Abbreviato</TH>
<TH>Forma lunga</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>AUT</TD>
<TD>Autore</TD>
</TR>
<TR>
<TD>ARG</TD>
<TD>Argomento</TD>
</TR>
<TR>
<TD>TIT</TD>
<TD>Titolo</TD>
</TR>
</TBODY>
</TABLE>
Le tabelle sono un argomento alquanto complesso e la loro formattazione dipende molto da elementi che
non sono argomento di questo breve documento, si consiglia la lettura delle specifiche del HTML 4.0 edito
OnLine da W3G all'indirizzo http://www.w3.org/TR/REC-html40/struct/global.html
LINKS
Il Links o Hyperlinks (collegamenti ipertestuali) servono per collegare del testo o immagini ad una risorsa
pubblicata nel Web; questa risorsa può essere un'altra pagina, un altro sito, un riferimento ad un contatto email ecc.
Il link è unidirezionale, cioè consente di andare da una pagina A ad una pagina B, ma non il viceversa (per
ottenere l’equivalente di un link bidirezionale, bisogna creare due link, uno da A a B e uno da B ad A).
Il link è solitamente associato ad un testo (che viene visualizzato in colore diverso e sottolineato) oppure ad
altre componenti della pagina (ad esempio un’immagine).
Vediamo alcuni esempi di link:
<A href="../forest.gif">mappa della foresta</A>
Si tratta di un link diretto ad un'immagine che verrà caricata a tutto schermo
<A href="#sezione1">Introduzione</A>
<A name="sezione1"> Introduzione </A>
Come richiamare una sezione all'interno della stessa pagina
<A href="www.esempio.com">visita il sito</A>
<A href="www.esempio.com"><img src=”./immegine.gif”></A>
esempio di come richiamare un altro sito cliccando su un'immagine o su del testo.
Il TAG <A> supporta un parametro chiamato TARGET che indica dove la risorsa richiamata deve essere
caricata (es. nuova pagina, stessa pagina, ecc).
FRAMES
Quando una pagina web viene caricata dallo User Agent, questa normalmente riempe lo schermo in quanto
viene considerata come l'unico elemento da mostrare. Con l'utilizzo dei frames invece, in una singola
schermata è possibile caricare più pagine HTML separate.
Un semplice esempio di pagina multiframe è il seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Esempio multiframe</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="pagina1.html">
<FRAME src="pagina2.gif">
</FRAMESET>
<FRAME src="pagina3.html">
<NOFRAMES>
Il Vs. browser non supporta i frames !!
</NOFRAMES>
</FRAMESET>
</HTML>
I frames vengono creati da sinistra verso destra come colonne e dall'alto verso il basso come righe.
I frameset possono essere nidificati.
Le dimensioni delle righe e delle colonne costituenti il frameset possono essere spedificate sia in
percentuale che in pixel, vediamo alcuni esempi ripresi da W3C:
In questo caso lo schermo viene suddiviso verticalmente in due parti uguali.
<FRAMESET rows="50%, 50%">
...the rest of the definition...
</FRAMESET>
Qui vengono create 3 colonne: La seconda colonna è esattamente 250 pixel mentre la prima prende il
rimanente 25% dello spazio e la terza il 75% del rimanente.
<FRAMESET cols="1*,250,3*">
...the rest of the definition...
</FRAMESET>
Qui viene creata una griglia 2x3
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...the rest of the definition...
</FRAMESET>
Qui invece supponiamo di avere lo schermo disponibile pari a 1000 pixel di altezza. Il primo riceve il 30%
dell'altezza totale (300 pixels). La seconda è esattamente 400 pixels di altezza; questo lascia 300 pixel da
dividere fra glia ltri due frame restanti. L'altezza del quarto frame è 2*, quindi è due volte più alta del primo
frame (* o 1*), quindi il terzo è 100 pixel di altezza e il quarto 200.
<FRAMESET rows="30%,400,*,2*">
...the rest of the definition...
</FRAMESET>
FORMS
Le FORM (dette anche form interattive) vengono utilizzate all'interno di un documento HTML per ricevere
informazioni ed inviarle ad una entità esterna, quale una Servlet Java, uno script Server-Side, ecc.
Per poter contenere i dati, le FORM si avvalgono di elementi chiamati controlli.
La dichiarazione di una sezione FORM può essere la seguente:
<FORM action='' method=”POST” enctype=”text/html” target='_self' ></FORM>
In pratica in una form vengono almeno specificate l'azione, ovvero quale risorsa riceve i dati, la codifica dei
dati il metodo di spedizione dei dati e il target.
I controlli più comuni sono i seguenti:
Bottoni (<input type="button" value="">)
Radio Button (<input type="radio" name="" value="check me">)
Check Box (<input name="" type="checkbox" value="">)
Select (<select name=""><option><option></select>)
File (<input type="file" value="">)
Password(<input name="" type="password" value="">)
Testo(<input name="" type="text" value="">)
Hidden(<input name="" type="hidden" value="">)
Testo multilinea(<textarea name="" rows= cols= ></textarea>)
Submit(<input type="submit">)
Reset(<input type="reset">)
In genere i dati da spedire vengono manipolati tramite linguaggi di Scripting Client-Side di cui vediamo ora il
più utilizzato e stadardizzato, JavaScript.
SCRIPTS
In questo breve documento tratteremo solo il linguaggio JavaScript, il primo luogo perchè è il più utilizzato
dai programmatori WEB e poi perchè è definito come standard base per ogni produttore di User Agents.
Uno script serve per poter aggirare le limitazioni di gestione interattiva dei dati presenti nell'HTML.
Uno script JavaScript viene dichiarato nel seguente modo:
<script language="Javascript" type="text/javascript">
<!-//-->
</script>
All'interno del blocco possono essere definite variabili, funzioni, classi ecc; la sintassi del javaScript è molto
simile al C++, con le evidenti differenze per quello che riguarda la libreria delle funzioni e con le limitazioni
introdotte nel linguaggio per l'accesso al FileSystem che devono essere ristrette per problemi relativi alla
sicurezza del Client dove gira il programma.
Uno script JavaScript viene attivato da un evento che può essere scatenato sia da una funzione automatica
presente all'interno di TAG HTML, che dalla pressione di pulsanti, da funzioni scritte dal programmatore o
dalla normale esecuzione della pagina.
Il tipico esempio di JavaScript è la Message Box che viene attivata tramite la funzione alert().
Vediamo ora come scatenare un evento da un bottone HTML per la visualizzazione di una MessageBox
JavaScript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test JavaScript</title>
</head>
<script language="Javascript" type="text/javascript">
<!-function chiama_avviso()
{
alert("Chiamata ricevuta");
}
//-->
</script>
<body>
<form action="">
<input type="button" value="Invia evento" OnClick="chiama_avviso();">
</form>
</body>
</html>
L'evento viene generato alla pressione del tasto HTML seguendo la funzione OnClick; questa richiama a sua
volta la funzione chiama_evento scritta all'interno del blocco JavaScript.
Naturalmente la funzione che abbiamo scritto può ricevere dei parametri come nel seguente esempio:
.. .. ..
<script language="Javascript" type="text/javascript">
<!-function chiama_avviso(operatore)
{
alert("Chiamata " + operatore);
}
//-->
</script>
.. .. ..
<input type="button" value="Invia evento" OnClick="chiama_avviso('ricevuta');">
.. .. ..
L'utilizzo principale del JavaScript comunque va oltre la semplice visualizzazione di messaggi di avviso; viene invece
utilizzato moltissimo per la validazione di dati e la navigazione condizionale.
Prima però di illustrare esempi in questo senso, è necessario comprendere come il linguaggio “vede ed interpreta” una
pagina HTML.
Mentre fino ad ora ci siamo limitati a pensare ad una pagina HTMlL come ad una sequenza di istruzioni di formattazione
di testi ed immagini lette in maniera non intelligente dallo User Agent, possiamo notare che il linguaggio JavaScript
interagisce intimamente con la pagina.
Infatti per questo linguaggio una pagina è un oggetto, costituito a sua volta da altri oggetti con un variabile numero di
proprietà ed attributi.
Il JavaScript e il Java sono simili in molti aspetti ma drasticamente diversi in altri. Il linguaggio JavaScript assomiglia
sintatticamente al Java ma è molto meno rigoroso del suo quasi sinonimo Java, è possibile non dichiarare le variabili, i
tipi di variabile possono essere interpretati dal parser, il casting può essere implicito, ecc.
Tramite la funzione document.write(String) è possibile generare il contenuto HTML della pagina, questo interessante
aspetto permette di letteralmente cambiare l'aspetto della pagina all'interno di layers.
L'utilizzo comunque più conosciuto del JavaScript è quello che consente la validazione all'interno di TAG FORM.
Con JavaScript è infatti possibile leggere il contenuto, ad esempio, di un campo di testo, confrontarlo con regole
predefinite dal linguaggio o scritte dal programmatore, e validarne o modificarne il contenuto.
Spiegare il seguente esempio e scrivere la struttura necessaria per il suo collaudo:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function isaPosNum(s) {
return (parseInt(s) > 0)
}
function qty_check(item, min, max) {
var returnVal = false
if (!isaPosNum(item.value))
alert("Digitare un numero positivo")
else if (parseInt(item.value) < min)
alert("Digitare un numero " + item.name + " maggiore di " + min)
else if (parseInt(item.value) > max)
alert(" Digitare un numero " + item.name + " minore di " + max)
else
returnVal = true
return returnVal
}
function validateAndSubmit(theform) {
if (qty_check(theform.quantity, 0, 999)) {
alert("Ordine inviato")
return true
}
else {
alert("Impossibile inviare !")
return false
}
}
</SCRIPT>
</HEAD>
Tramite la funzione window.open() è possibile aprire una nuova finestra del browser.
INSERIMENTO DI OGGETTI ESTERI
In una pagina HTML possono essere inseriti degli oggetti che non vengono interpretati dal parser dello User
Agent; ci si riferisce a questi elementi come a PlugIn.
Vediamo alcuni esempi:
Inserimento di un controllo ActiveX
<object id="" classid="" width= height= data=""></object>
Oggetto generico (ad esempio usato per inserire suoni o filmati)
<embed src=""></embed>
Oggetto Flash
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0,0,0"
width="32" height="32">
<param name="src" value="flash-file.swf">
<embed src="flash-file.swf"
pluginspage="http://www.macromedia.com/shockwave/download/" type="application/xshockwave-flash" width="32" height="32">
</embed>
</object>
SPECCHIETTO A
Tabella dei colori base RGB
Black = "#000000"
Silver = "#C0C0C0"
Gray = "#808080"
White = "#FFFFFF"
Maroon = "#800000"
Red = "#FF0000"
Purple = "#800080"
Green = "#008000"
Lime = "#00FF00"
Olive = "#808000"
Yellow = "#FFFF00"
Navy = "#000080"
Blue = "#0000FF"
Teal = "#008080"
Aqua = "#00FFFF”
Fuchsia = "#FF00FF"
SPECCHIETTO B
Riassunto degli eventi JavaScript più comuni
Evento
Si applica a
Accade se
Handler dell'evento
User aborts the loading of an image
Abort
onAbort
images
(for example by clicking a link or
clicking the Stop button)
User removes input focus from
Blur
onBlur
windows and all form elements
window or form element
Change
onChange
text fields, textareas, select lists User changes value of element
buttons, radio buttons,
Click
onClick
checkboxes, submit buttons,
User clicks form element or link
reset buttons, links
User drops an object onto the browser
DragDrop windows
window, such as dropping a file on the onDragDrop
browser window
The loading of a document or image onError
Error
images, windows
causes an error
User gives input focus to window or onFocus
Focus
windows and all form elements
form element
documents, images, links, text
KeyDown
onKeyDown
User depresses a key
areas
documents, images, links, text
KeyPress
onKeyPress
User presses or holds down a key
areas
documents, images, links, text
KeyUp
onKeyUp
User releases a key
areas
Load
document body
User loads the page in the Navigator onLoad
MouseDown documents, buttons, links
onMouseDown
User depresses a mouse button
MouseMove nothing by default
onMouseMove
User moves the cursor
User moves cursor out of a client-side onMouseOut
MouseOut areas, links
image map or link
MouseOver links
onMouseOver
User moves cursor over a link
MouseUp
onMouseUp
documents, buttons, links
User releases a mouse button
Move
onMove
windows
User or script moves a window
User resets a form (clicks a Reset
Reset
onReset
forms
button)
Resize
onResize
windows
User or script resizes a window
Select
text fields, textareas
User selects form element's input field onSelect
Submit
onSubmit
forms
User submits a form
Unload
onUnload
document body
User exits the page