Il linguaggio HTML e le applet Java
Autore M. Di Ianni
1
Contenuti
Questa lezione espone alcuni concetti fondamentali per il progetto di pagine
per il web:
• viene introdotto il linguaggio HTML
• vengono mostrati semplici esempi di applet Java.
2
Il linguaggio HTML
L’ HTML (Hyper Text Markup Language) è un linguaggio per la
formattazione di testo progettato appositamente per l’utilizzo nel Web:
già sappiamo che un linguaggio per la formattazione di testo serve a
generare documenti di testo in formato opportuno (vedi Microsoft Word)
è di tipo markup perché i comandi (tag) per la formattazione sono inseriti in
modo esplicito nel testo (vedi Latex)
•
•
ESEMPIO: in HTML il testo
questo è <B>grassetto</B> e questo no
viene visualizzato come
questo è grassetto e questo no
•
è un linguaggio per la gestione di ipertesti in quanto consente la gestione di
hyperlink
• la compilazione di un documento HTML viene effettuata da un browser
3
I tag del linguaggio HTML
I tag del linguaggio HTML possono essere divisi in due categorie:
• tag per la formattazione di testo
• tag per altre finalità (inclusione di immagini, interazione con l’utente, ecc.)
In genere i tag hanno la forma
<direttiva> ... </direttiva>
e possono contenere parametri
<direttiva parametro1=“valore” ...> ... </direttiva>
4
Struttura di un documento HTML
Una pagina HTML ha questa struttura:
<HTML>
<HEAD>
...
<TITLE> ... </TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
5
Struttura di un documento HTML
Il ruolo dei tag che abbiamo incontrato nella pagina precedente è il seguente:
HTML : inizio e fine del documento
HEAD : questa parte non viene mostrata e contiene informazioni sul
documento (creatore, data di “scadenza”, eventuale titolo)
TITLE: il titolo del documento (appare come titolo della finestra che lo
contiene)
BODY : il testo contenuto fra <BODY> e </BODY> è ciò che viene
visualizzato sulla finestra
6
Tag per la formattazione
Alcuni dei tag esistenti per la formattazione del testo sono :
• <B> ... </B> : grassetto (bold)
• <I> ... </I> : corsivo (italic)
• <Hx> ... </Hx> : intestazione (heading) di livello x (da 1 a 6)
• <PRE> ... </PRE> : testo visualizzato esattamente come è scritto
(preformatted), con spazi multipli, caratteri di fine linea, ecc.
Esistono moltissimi altri tag per la formattazione, con i quali specificare
dimensione, colore, tipo dei caratteri, centratura del testo, liste di elementi,
tabelle di testo in forma grafica (il tag <TABLE>)
7
Tag per altre finalità
Questi sono i tag che forniscono al Web la sua grande versatilità. I tag più usati
di questo tipo sono:
•
i tag per la inclusione di immagini in-line (visualizzate direttamente all’interno
della pagina)
• i tag per la gestione degli hyperlink.
Il tag per la inclusione di immagini ha la seguente forma:
<IMG SRC=”url”> oppure <IMG SRC=”url” ALT=“testo”>
Questo tag fa apparire l’immagine di cui alla url seguita dal testo specificato nel
parametro <ALT> .
Altri parametri del tag <IMG> servono a: specificare le dimensioni
dell’immagine (WIDTH, HEIGHT), specificare l’allineamento dell’immagine
con il testo circostante (ALIGN), specificare le aree dell’immagine sensibili ai
click del mouse (ISMAP).
8
Tag per la gestione di hyperlink
Un hyperlink è un collegamento ipertestuale, cioè un collegamento ad un altro
documento HTML. In pratica, quando ci si posiziona sull’hyperlink e si preme
il pulsante sinistro del mouse, la pagina corrente (quella che contiene
l’hyperlink) viene sostituita con la paginga cui l’hyperlink fa riferimento.
Il tag per la gestione di hyperlink viene chiamato anchor (ancora) :
<A> ... </A>
La sua forma standard è:
<A HREF=“url”>testo visibile</A>
Nella pagina la stringa testo visibile appare sottolineata e, in genere, di
colore blu:
testo visibile
9
Un esempio di documento HTML ….
<HTML>
<HEAD>
<TITLE>Un documento di prova</TITLE >
</HEAD>
<BODY>
<H1 ALIGN="center">Titolo del documento </H1>
<H2 ALIGN ="left">Titolo del primo paragrafo </H2>
<P ALIGN="center"> Questo primo paragrafo contiene solo
testo normale, <B>grassetto</B> o <I>corsivo</I> ed un
<A HREF="http://www.diei.unipg.it">hyperlink</A></P>
<H2 ALIGN="left">Titolo del secondo paragrafo </H2>
<P ALIGN="center"> Questo secondo paragrafo contiene
solo un'immagine
<IMG SRC="c:windows\bosco.bmp"> </P>
</BODY>
</HTML>
10
…. Ed il suo risultato
Titolo del documento
Titolo del primo paragrafo
Questo primo paragrafo contiene solo testo normale, grassetto o
corsivo ed un hyperlink
Titolo del secondo paragrafo
Questo secondo paragrafo contiene solo un'immagine
11
HTML e Java
Java è un linguaggio di programmazione supportato dai più importanti
browser Web: questo significa che i principali browser Web “contengono”
gli strumenti necessari ad interpretare ed eseguire un programma Java.
Quindi, se un programma Java viene “inserito” in un documento HTML e
questo documento viene messo su Internet, chiunque abbia accesso ad
Internet (in qualsiasi parte del mondo) può eseguire quel programma Java.
Non tutti i programmi Java possono essere “inseriti” in un documento
HTML: in programmi Java per i quali questo è possibile sono detti applet.
Le applet vengono sempre eseguite sul computer dell’utente: pertanto la
loro esecuzione è sufficientemente veloce e non genera traffico aggiuntivo
dovuto allo scambio di dati con il server.
12
Applet e HTML
Una volta sviluppata, l’applet deve essere richiamata in una pagina HTML e
visualizzata mediante
• un browser (Internet Explorer, Netscape Navigator, ecc.)
• AppletViewer (letteralmente “visualizzatore di applet”), una applicazione
apposita fornita con il JDK
13
Il tag <APPLET>
Un’applet viene inserita in un documento HTML mediante il tag: <APPLET>.
Analizziamo ora alcuni attributi del tag <APPLET>:
• WIDTH
ed HEIGHT: questi attributi sono indispensabili e determinano
larghezza e altezza dell’applet all’interno della pagina Web espressi in numero
di pixel.
• ALIGN: specifica l’allineamento dell’applet . Alcuni suoi valori (LEFT e
RIGHT) fanno in modo che l’applet sia un blocco fisso attorno al quale scorra il
testo, altri valori fanno in modo che l’applet sia un elemento in linea, ossia
mobile all’interno di una riga di testo (BOTTOM= il bordo inferiore dell’applet
combacia con il bordo inferiore della riga corrente, TOP, MIDDLE, …)
• CODE: attributo indispensabile. Fornisce il nome del file compilato (.class)
dell’applet. Può essere una directory locale o un url della rete.
14
HTML+Applet
Una volta sviluppata, l’applet deve essere richiamata in una pagina HTML,
tramite il tag <APPLET>. Ad esempio, l’applet Prima viene richiamata come
segue:
<HTML>
<HEAD>
<TITLE>Un’applet di prova</ TITLE >
</ HEAD >
<BODY>
<H1 ALIGN="center">La nostra prima applet</H1>
<P ALIGN="center"> <APPLET CODE="Prima.class" WIDTH="400"
HEIGHT="150"</APPLET></P>
</ BODY >
</ HTML >
15
Applet e classi Java: il comportamento
Un applet è pensata per essere eseguita su un qualsiasi computer in qualsiasi luogo
del mondo. Questo pone problemi di sicurezza:
un’applet in grado di scrivere e modificare dati su disco potrebbe causare gravi
danni, voluti o meno dal programmatore dell’applet.
Come difendersi da applet mal progettate?
üUn’applet non può scrivere dati sul disco locale
üUn’applet non può eseguire programmi locali
üUn’applet non può attivare connessioni a elaboratori in rete diversi da quello
che sta facendo da server
üLe applet non possono trovare informazioni riguardanti il computer locale,
tranne la versione Java in uso
16
Un’applet facile facile
L’applet che segue…. è molto ben educata:
import java.awt.*;
import java.applet.Applet;
public class CiaoMondo extends Applet {
Label t;
public void init() {
t=new Label(“Ciao mondo!”);
add(t);
}
public void start() {
setBackground(Color.green);
setForeground(Color.yellow);
repaint();
}
}
17
I metodi init() e start()
Il metodo init() serve per le inizializzazioni occorrenti per l’applet e viene
chiamato automaticamente dal sistema quando Java lancia l’applet la prima
volta.
Il metodo start() viene chiamato automaticamente dopo il metodo init().
Viene chiamato anche ogni volta che l’utente torna alla pagina contenente
l’applet dopo aver visitato altre pagine. Quindi, può essere chiamato
ripetutamente, a differenza di init(). Per questo, è preferibile inserire in
init() anziché in start() il codice che deve essere eseguito una sola volta.
Il metodo start() è il punto in cui viene riavviata l’applet, ad esempio al
ritorno alla pagina che la contiene.
Se l’applet non contiene alcuna operazione che deve essere sospesa quando
l’utente esce dalla pagina Web corrente, non occorre implementare start().
18
Applet, contenitori e il metodo add
L’esecuzione di un’applet causa la creazione nella pagina web di un contenitore
in cui l’applet stessa inserirà tutti gli elementi di interazione con il mondo
esterno. Tali elementi, possono essere etichette, campi o aree di testo, pulsanti,…
Per potere inserire uno di tali elementi nel contenitore si utilizza il metodo add
della classe Applet.
public void init() {
t=new Label(“Ciao mondo!”);
add(t);
}
19
La classe Label
Label t;
public void init() {
t=new Label(“Ciao mondo!”);
add(t);
}
Label è una classe del package java.awt che rappresenta brevi scritte
(etichette, appunto).
Dopo aver dichiarato una variabile di tipo Label, il costruttore la inizializza
ad una stringa (il parametro) ed il metodo add la inserisce nel contenitore.
Il package awt (acronimo di Abstract Windowing Toolkit) contiene un insieme
di classi (l’unità di programmazione Java) che permettono lo sviluppo di
interfacce grafiche, utili per la gestione di finestre e loro componenti: menu,
aree di testo, pulsanti, caselle di selezione,…
20
Pagina HTML per l’applet facile facile
<HTML>
<HEAD>
<TITLE>Prova della prima applet</ TITLE >
</ HEAD >
<BODY>
<H1 ALIGN="center"><FONT color=#ae0000>Un'applet molto bene
educata</FONT></H1>
<APPLET CODE="CiaoMondo.class" WIDTH=400 HEIGHT=150
ALIGN="left"> </APPLET>
</ BODY >
</ HTML >
21
Interagiamo con un’applet
L’applet che abbiamo appena visto scriveva un messaggio in una finestra
senza richiedere alcuna interazione con l’utente. Per poter interagire con
un’applet (ad esempio, per comunicare dei dati) dobbiamo introdurre il
concetto di evento.
Un evento è un’azione che avviene su un certo oggetto
o l’accadere di un errore.
Esempi di eventi: fare clic su un pulsante, scegliere una voce tra le opzioni
di un menu, trascinare un oggetto con il mouse, …
In ogni caso l’evento viene comunicato a chi è incaricato di intraprendere le
decisioni (e le azioni) opportune (event listener).
22
Oggetti ed eventi
Distinguiamo eventi di azione ed eventi di scorrimento.
Le sorgenti di eventi di azione sono classi raccolte in massima parte nel package
java.awt. Le principali sono:
• campi ed aree di testo (TextField e TextArea)
• pulsanti (Button)
• menu ed elenchi (Choice e List)
• caselle di controllo (CheckBox)
L’ evento classico di scorrimento è relativo alla classe che implementa barre di
scorrimento (ScrollBar), visualizzate come barre con due pulsanti agli estremi
rappresentati con una freccia ciascuno. Nel seguito non tratteremo più eventi di
scorrimento.
23
La classe TextField
Textfield è una classe di java.awt analoga a Label e definisce le
caselle di testo, cioè aree di lunghezza fissa (determinata dai parametri al
momento della inizializzazione) in cui è possibile visualizzare stringhe. Fra i
metodi di Textfield troviamo:
•
void setEditable(boolean …): permette di definire il campo di
testo “modificabile”, cioè, consente all’utente di scrivere nella casella
• boolean
isEditable():verifica se la casella è modificabile.
24
La classe Button
È anche essa simile alla classe Label e definisce pulsanti.
Differentemente da Label ha la caratteristica di essere reattiva: è possibile
fare in modo che il programma esegua una determinata azione in risposta alla
pressione di un pulsante da parte dell’utente.
Per reagire alla pressione di un pulsante, in java.awt è definita
l’interfaccia actionListener che contiene il solo metodo
actionPerformed che deve essere implementato dalla classe Button.
25
Gestione di eventi di azione
Per gestire gli eventi di azione in java esiste la apposita classe
java.awt.Event.
Tutti gli eventi di
java.awt.Event:
azione
utilizzano
il
metodo
di
action()
public boolean action(Event e, Object o) {
//istruzioni di gestione dell’evento e
}
Il metodo andrà di volta in volta implementato per gestire l’evento di interesse.
Tra le diverse variabili della classe Event c’e’ target, che permette di
rilevare l’oggetto che ha generato l’evento
26
Giochiamo con un’applet
Nell’applet che segue, creiamo due pulsanti (pari e dispari) e una casella di
testo.
Il computer genera a caso un valore pari o dispari e, quando viene premuto
uno dei due pulsanti, viene stampato “hai vinto” oppure “hai perso” se il
valore del pulsante premuto coincide o meno con quello generato dal
computer.
Utilizziamo:
il metodo add() per inserire un oggetto (pulsante o casella di testo) nella
finestra
il metodo void setText(...) per assegnare un valore (stringa) ad una
casella di testo
•
•
27
Giochiamo con un’applet
import java.awt.*;
import java.applet.Applet;
import java.util;
public class PariODispari extends Applet {
Button P1, P2;
TextField testo;
public void init() {
P1=new Button(“pari”);
add(P1);
P2=new Button(“dispari”);
add(P2);
testo=new TextField(50);
add(testo);
}
...
28
Giochiamo con un’applet
// implementiamo opportunamente il metodo action()
public void action(Event evento, Object oggetto) {
int i,a;
String valore;
Random r=new Random();
a=Math.abs(r.nextInt())%2;
if (evento.target instanceof Button) {
valore=(String) oggetto;
if ((a==0)&&(valore.equals(“pari”)))
testo.setText(" Hai vinto!");
else if ((a==1)&&(valore.equals(“dispari”)))
testo.setText(" Hai vinto!");
else testo.setText(" Hai perso!");
return true;
}
return false;
}
}
29
Giochiamo con un’applet
Un possibile file HTML che contiene l’applet è il seguente:
<HTML>
<HEAD>
<TITLE>Pari o dispari</TITLE >
</HEAD >
<BODY>
<H1 align="center"><FONT color=#ae0000>Indovina il mio numero!
</FONT></H1>
<P ALIGN="center">
<APPLET CODE=“PariODispari.class" WIDTH="400" HEIGHT="150“
</APPLET ></P>
</BODY >
</HTML >
30
