Modulo di Informatica
World Wide Web, ipertesti e
HTML
Lezione 6
World Wide Web:
la ragnatela globale
• WWW (detto web o ragnatela ) è la rete
costituita dai server che forniscono accesso
alle loro informazioni tramite il protocollo
HTTP (HypertText Transfer Protocol)
• gli host si collegano ai server usando un
programma “client” detto browser (colui che
curiosa)
AA 2005/06
© Alberti, Bruschi, Rosti
2
World Wide Web, ipertesti e HTML
Storia del web
• 1980: Tim Berners-Lee (CERN) sviluppa il
programma "Enquire-Within-Upon-Everything" che
consentiva di effettuare link tra diversi computer
connessi in rete
• 1989: Tim Berners-Lee diffonde due documenti per
raccogliere opinioni sul suo lavoro presso il CERN
• 1990: Il CERN appoggia ufficialmente il progetto
• viene coniato il nome World-Wide Web
• 1991: Sviluppo dei primi client ed apertura del WWW
server del CERN
AA 2005/06
© Alberti, Bruschi, Rosti
3
World Wide Web, ipertesti e HTML
Storia del web
• 1992: Sviluppo del client con interfaccia a finestre in
ambiente Xwindow
• viene rilasciata la lista dei primi 26 server WWW
• 1993: Viene rilasciato il primo browser per Macintosh
• viene rilasciato X-Mosaic di Marc Andreessen (NCSA)
• i server HTTP sono circa 50
• 1994: Viene fondata la Mosaic Corporation (oggi
Netscape Corp.)
• i siti WWW sono 1.500
• si tiene il primo meeting del "W3Consortium" presso il MIT
• il CERN sospende il supporto del progetto WWW
• 2000: …Centinaia di milioni di pagine disponibili ?!?
AA 2005/06
© Alberti, Bruschi, Rosti
4
World Wide Web, ipertesti e HTML
Il successo del web
• I protocolli precedentemente usati per il
trasferimento dei file (FTP) prevedevano che i
documenti fossero copiati sulla macchina per
essere consultati
• le fasi di download e consultazione erano distinte
• Tramite il web è possibile consultare
direttamente dei documenti online
• il trasferimento dei documenti viene effettuato
automaticamente, in modo trasparente all’utente
AA 2005/06
© Alberti, Bruschi, Rosti
5
World Wide Web, ipertesti e HTML
Il successo del web
• Consente di accedere in modo uniforme a
informazioni di varia natura
• immagini, animazioni, suoni, filmati ...
(multimedialità)
• Con l’introduzione di componenti attive (form,
applet, javascript, php,…) è anche possibile
utilizzare i browser web per trasmettere
informazioni dall’utente al server
AA 2005/06
© Alberti, Bruschi, Rosti
6
World Wide Web, ipertesti e HTML
Le basi tecnologiche
• Le tecnologie che hanno permesso l’ampia
diffusione del web sono:
• gestione degli ipertesti e della multimedialità
• disponibilità di client multiprotocollo (i browser)
• efficaci convenzioni per l’identificazione delle
risorse
• utilizzo di un protocollo nella connessione
browser-server web particolarmente semplice
AA 2005/06
© Alberti, Bruschi, Rosti
7
World Wide Web, ipertesti e HTML
Il punto di forza:
la struttura ipertestuale
• È possibile "navigare" tra le pagine di
documenti che si trovano sul medesimo
computer o su computer diversi, magari a
migliaia di chilometri l'uno dall'altro
• i riferimenti ad altri documenti sono specificati
tramite link
• È semplice da usare:
• mediante l’uso di interfacce grafiche (browser) con
modalità di interazione point-and-click
AA 2005/06
© Alberti, Bruschi, Rosti
8
World Wide Web, ipertesti e HTML
Ipertesti
• L'ipertesto è un testo che può essere letto
sequenzialmente oppure seguendo i "link”
(rimandi) associati alle sue diverse parti
• II lettore può scegliere il percorso di lettura
che preferisce, assecondando liberamente i
suoi interessi
AA 2005/06
© Alberti, Bruschi, Rosti
9
World Wide Web, ipertesti e HTML
Esempio
AA 2005/06
© Alberti, Bruschi, Rosti
10
World Wide Web, ipertesti e HTML
Ipertesti
• In ogni punto del documento può comparire
un punto di ancoraggio (anchor)
• per relazioni
• (link) ad un’altra parte del medesimo documento
• (hyperlink) ad un altro documento il linea
• viene visualizzato dai browser in modo diverso
dal testo (in genere sottolineato)
• la selezione (point-and-click) viene interpretata dal
browser come una richiesta di visualizzare il
documento specificato dalla relazione
AA 2005/06
© Alberti, Bruschi, Rosti
11
World Wide Web, ipertesti e HTML
esempio
AA 2005/06
© Alberti, Bruschi, Rosti
12
World Wide Web, ipertesti e HTML
Multimedialità
• Indica l’insieme delle tecnologie finalizzate
alla gestione integrata di informazioni basate
su media differenti
•
•
•
•
•
testi
singole immagini
immagini in movimento (animazioni, filmati)
suoni
programmi
AA 2005/06
© Alberti, Bruschi, Rosti
13
World Wide Web, ipertesti e HTML
Architettura del web
AA 2005/06
© Alberti, Bruschi, Rosti
14
World Wide Web, ipertesti e HTML
Come funziona il WWW
• Il funzionamento del World Wide Web non
differisce molto da quello delle altre
applicazioni Internet
• Anche in questo caso il sistema si basa
su una interazione tra un computer client ed
un server
AA 2005/06
© Alberti, Bruschi, Rosti
15
World Wide Web, ipertesti e HTML
Architettura client-server
• In un’architettura client-server ci sono due
calcolatori connessi alla rete:
• un client che sottopone richieste al server
• un server in grado di rispondere alle richieste
formulate da un client
• Ovviamente la comunicazione fra client e
server può avvenire solo se i due hanno
stabilito un protocollo comune di
comunicazione
AA 2005/06
© Alberti, Bruschi, Rosti
16
World Wide Web, ipertesti e HTML
Il protocollo
• Il protocollo di comunicazione usato dal web
e che regola la trasmissione dei documenti
ipertestuali si chiama HyperText Transfer
Protocol (HTTP)
• Si basa sul protocollo TCP/IP
• I documenti devono però essere in uno
specifico formato: HyperText Markup
Language (HTML)
AA 2005/06
© Alberti, Bruschi, Rosti
17
World Wide Web, ipertesti e HTML
Web: client-server
• Un web-server è un server su cui è in
esecuzione un programma in grado di
scambiare messaggi con un client-web
tramite il protocollo HTTP
• Un client-web è un programma (browser) in
grado di dialogare con un web-server
(usando il protocollo HTTP)
AA 2005/06
© Alberti, Bruschi, Rosti
18
World Wide Web, ipertesti e HTML
Connessione diretta ad Internet
• Per visitare un sito Web con
un browser, si deve
specificarne l’indirizzo
(esplicitamente o
selezionando un link)
• Il client invia la richiesta di
connessione, formulata nel
modo specificato da HTTP
• Ricevuta la richiesta, il
server Web trasmette le
informazioni al computer e il
browser provvede a
visualizzarle
AA 2005/06
© Alberti, Bruschi, Rosti
19
World Wide Web, ipertesti e HTML
Collegamento via modem
• Se siete collegati tramite un
modem, allora le
informazioni fra client e
server passano attraverso il
provider
AA 2005/06
© Alberti, Bruschi, Rosti
20
World Wide Web, ipertesti e HTML
Connessione browser-server web
• La connessione si realizza in cinque fasi:
• l’utente utilizza il browser per preparare una
richiesta
• il browser invia la richiesta (request)
• il server riceve la richiesta e opera per soddisfarla
• recupera il documento richiesto
• il server invia una risposta (response)
• il browser riceve la risposta, la interpreta e la
presenta
AA 2005/06
© Alberti, Bruschi, Rosti
21
World Wide Web, ipertesti e HTML
Lo stato della richiesta
• Lo stato della richiesta corrente è visualizzato
nella barra di stato del browser
• Se l’indirizzo è sbagliato il browser segnalerà
un messaggio di errore
AA 2005/06
© Alberti, Bruschi, Rosti
22
World Wide Web, ipertesti e HTML
I browser
• Tutti i browser implementano il protocollo
HTTP, ma in genere sono multiprotocollo,
sono in grado cioè di comunicare con altri tipi
di server
• In genere fungono anche da client:
•
•
•
•
gopher
SMTP/POP/IMAP
FTP, telnet
NNTP
AA 2005/06
© Alberti, Bruschi, Rosti
23
World Wide Web, ipertesti e HTML
L’identificazione delle risorse
• Per poter essere utilizzate le varie risorse
disponibili sulla rete (i documenti sui server)
devono essere identificabili in modo univoco
• I browser identificano le risorse tramite
indirizzi detti URL (Uniform Resource
Locator)
• Un indirizzo URL è così composto:
protocollo://server:porta_TCP:/file_path_completo
AA 2005/06
© Alberti, Bruschi, Rosti
24
World Wide Web, ipertesti e HTML
Esempio di indirizzo URL
• Dato che la porta associata al protocollo
HTTP è la 80 per default non è necessario
specificarla
• Il nome dei file index.html è implicito
• se non viene specificato il nome del file completo,
viene automaticamente cercato un file dal nome
index.html
AA 2005/06
© Alberti, Bruschi, Rosti
25
World Wide Web, ipertesti e HTML
Terminologia utile
• Utilizzando e configurando i browser ci si
imbatte spesso in alcuni termini che sono
importanti per un uso corretto del web
•
•
•
•
•
proxy
motore di ricerca
cookie
applet
javascript
AA 2005/06
© Alberti, Bruschi, Rosti
26
World Wide Web, ipertesti e HTML
I proxy
• Un proxy è un server (computer +
programma) che svolge la funzione di
"agente" per gli utenti di altri computer
• Configurando il proprio browser in modo che
usi un proxy, le richieste di un documento non
saranno fatte dal proprio computer
direttamente al sito remoto, ma dal proxy
server, che si preoccupa poi di fornirci il
documento
AA 2005/06
© Alberti, Bruschi, Rosti
27
World Wide Web, ipertesti e HTML
Funzione dei proxy
• Il proxy dispone di una propria "cache", nella
quale memorizza tutti i documenti recuperati
negli ultimi tempi
• se un utente richiede di caricare un documento
che è già presente nella cache, il proxy provvede
a spedirglielo direttamente senza contattare il sito
remoto, e quindi in tempi più brevi
• se il documento non è presente nella cache, il
proxy contatta il sito remoto, recupera il
documento, lo gira all’utente e lo memorizza nella
cache
AA 2005/06
© Alberti, Bruschi, Rosti
28
World Wide Web, ipertesti e HTML
I motori di ricerca
• Un motore di ricerca è un server che fornisce
un servizio di ricerca sulla rete per parole
chiave
• Il motore di ricerca periodicamente guarda i
documenti sulla rete e li indicizza in base ad
delle parole chiave
• L’utente specifica delle parole chiave, e in
risposta il motore di ricerca gli fornisce una
lista di link ai documenti contenenti quella
parola chiave
AA 2005/06
© Alberti, Bruschi, Rosti
29
World Wide Web, ipertesti e HTML
I motori di ricerca
• I motori di ricerca più famosi:
•
•
•
•
•
•
•
http://www.google.com/
http://www.altavista.com/
http://www.yahoo.com/
http://www.excite.com/
http://www.lycos.it/
http://www.virgilio.it/
http://arianna.iol.it/
AA 2005/06
© Alberti, Bruschi, Rosti
30
World Wide Web, ipertesti e HTML
Esempio
AA 2005/06
© Alberti, Bruschi, Rosti
31
World Wide Web, ipertesti e HTML
Una maschera di ricerca
AA 2005/06
© Alberti, Bruschi, Rosti
32
World Wide Web, ipertesti e HTML
Cookie
• È un meccanismo per la conservazione del
valore di alcuni parametri durante la
navigazione
• è possibile utilizzare i cookie per fare in modo che,
ogni volta che il browser carica qualcosa da un
sito, spedisca un cookie con le vostre preferenze
• in questo modo, il sito remoto potrà spedire delle pagine
personalizzate
AA 2005/06
© Alberti, Bruschi, Rosti
33
World Wide Web, ipertesti e HTML
Uso dei cookie
• Facendo shopping in un sito di vendita via
Internet, potete inserire i prodotti che vi
interessano nel "carrello della spesa”
• il server spedirà al vostro browser un cookie,che
conterrà l'indicazione della vostra scelta
• d'ora in poi, ogni volta che voi richiamate una
pagina dello stesso sito, il vostro browser
segnalerà al server che voi avete già selezionato
tale oggetto, rispedendogli il "cookie"
AA 2005/06
© Alberti, Bruschi, Rosti
34
World Wide Web, ipertesti e HTML
Applet, JavaScript
• Consentono di inserire dei programmi
all’interno di page web
• applet: sono programmi eseguibili scritti in Java
che possono essere eseguiti direttamente
all’interno di un browser mediante l’interprete Java
che si interfaccia con il browser
• JavaScript: è un linguaggio di scripting, il codice
del programma è contenuto direttamente nella
pagina web e viene interpretato ed eseguito dal
browser al momento del caricamento del
documento
AA 2005/06
© Alberti, Bruschi, Rosti
35
World Wide Web, ipertesti e HTML
Il linguaggio di markup HTML
AA 2005/06
© Alberti, Bruschi, Rosti
36
World Wide Web, ipertesti e HTML
Generalità
• Un documento HTML è un file di testo ASCII
dotato di opportuni tag che svolgono diverse
funzioni
•
•
•
•
formattazione dello stile del testo
rimandi (link) ad altre risorse disponibili sul WWW
definizione di maschere di inserimento dati
inclusione di altri oggetti complessi
AA 2005/06
© Alberti, Bruschi, Rosti
37
World Wide Web, ipertesti e HTML
I tag
• I tag HTML sono racchiusi tra i simboli di
maggiore e minore: <tag>
• alcuni tag prevedono un identificatore di inizio
(<tag>) e di fine marcatura (</tag>)
• altri sono dei tag singoli (es.: <HR>, <BR>).
• Esistono delle codifiche per rappresentare in
modo universale ed indipendente dalla
piattaforma i caratteri ASCII non standard
(es.: lettere accentate)
AA 2005/06
© Alberti, Bruschi, Rosti
38
World Wide Web, ipertesti e HTML
I tag
• È il browser utilizzato dall'utente ad occuparsi
di tradurre correttamente i tag HTML
visualizzando una pagina leggibile ed
includendo eventuali oggetti complessi
• immagini
• animazioni
• suoni
AA 2005/06
© Alberti, Bruschi, Rosti
39
World Wide Web, ipertesti e HTML
Un semplice esempio
<HTML>
<HEAD>
<TITLE>La mia pagina</TITLE>
</HEAD>
<BODY BGCOLOR=#ffffff>
<H1>Benvenuti!</H1>
Questa &egrave; la mia pagina.
Visita il sito del
<A HREF="http://www.dsi.unimi.it">DSI</A>.
</BODY>
</HTML>
AA 2005/06
© Alberti, Bruschi, Rosti
40
World Wide Web, ipertesti e HTML
Alcuni tag
• Tag per la formattazione
•
•
•
•
•
titoli: <H1>...</H1>, <H2>...</H2>, ...,<H6>...</H6>
paragrafo: <PALIGN=RIGHT|LEFT| CENTER> ...</P>
fine riga: <BR>
linea: <HR SIZE=n WIDTH=m ALIGN=x NOSHADE>
testo a spaziatura fissa preformattato:
<PRE>...</PRE>
• Caratteri speciali
• lettere accentate : à=&agrave; è=&egrave;
é=&eacute; ì=&igrave; ò=&ograve;
ù=&ugrave;
• simboli : >=&gt; <=&lt; &=&amp;
AA 2005/06
© Alberti, Bruschi, Rosti
41
World Wide Web, ipertesti e HTML
I tag
• Tag per i caratteri
• tipo caratteri: <FONT
SIZE=n COLOR=#rrggb
FACE="font">...</FONT>
• stile del testo:
•
•
•
•
•
bold: <B>...</B>
italic: <I>...</I>
typewriter: <TT>...</TT>
enfatizzato: <EM>...</EM>
sottolineato: <U>...</U>
• ingrandimento <BIG>...</BIG> e riduzione
<SMALL>...</SMALL> della dimensione del carattere
• apici: <SUP>...</SUP> e pedici <SUB>...</SUB>
AA 2005/06
© Alberti, Bruschi, Rosti
42
World Wide Web, ipertesti e HTML
Liste ed elenchi
<UL TYPE=CIRCLE>
<LI> Primo elemento
<LI> Secondo elemento
<LI> Terzo elemento
</UL>
<OL>
<LI> Primo elemento
<LI> Secondo elemento
<LI> Terzo elemento
</OL>
AA 2005/06
© Alberti, Bruschi, Rosti
43
World Wide Web, ipertesti e HTML
Immagini
• È possibile includere nella pagina delle
immagini
• È necessario indicare il nome del file
informato GIF o JPEG specificandone la
collocazione mediante una URL:
<IMG SRC="http://host.domain/file.gif" ISMAP HEIGHT=h WIDTH=w
BORDER=n ALIGN=RIGHT|LEFT|TOP|MIDDLE|BOTTOM ALT="testo alternativo">
AA 2005/06
© Alberti, Bruschi, Rosti
44
World Wide Web, ipertesti e HTML
esempio
<IMG SRC="/gif/mczolor.gif" ALT="Mozilla">
Questa &egrave; una immagine visualizzata alla
destra del testo...
AA 2005/06
© Alberti, Bruschi, Rosti
45
World Wide Web, ipertesti e HTML
Collegamenti ipertestuali
• Definizione di una hotword con collegamento
ad una URL
• <A HREF="URL">hotword</A>
• Definizione di un'ancora da utilizzare per un
link ad un punto specifico all'interno del
documento corrente
• <A NAME="ancora">testo</A>
AA 2005/06
© Alberti, Bruschi, Rosti
46
World Wide Web, ipertesti e HTML
Collegamenti ipertestuali
• Collegamento ipertestuale ad un'ancora
definita all'interno di un documento
• <A HREF="URL#ancora">hotword<A>
• Definizione di un link ad un indirizzo di posta
elettronica per l'invio di una E-mail
• <A HREF="mailto:[email protected]">Nominativo</A>
AA 2005/06
© Alberti, Bruschi, Rosti
47
World Wide Web, ipertesti e HTML
Form
• È possibile costruire delle maschere (form) di
input di dati da passare come parametri a
procedure CGI (Common Gateway Interface)
appositamente predisposte sul server web
che acquisiscono i dati e li elaborano
AA 2005/06
© Alberti, Bruschi, Rosti
48
World Wide Web, ipertesti e HTML
Form
<HTML>
<HEAD>
<TITLE>E-Mail Form</TITLE>
</HEAD>
<BODY>
<FORM method="POST" action="invio.php">
<P>Your Name:<br>
<INPUT type="text" name="sender_name" size=30>
</p>
<P>Your E-Mail Address:<br>
<INPUT type="text" name="sender_email" size=30>
</p>
<P>Message:<br>
<textarea name="message" cols=30 rows=5></textarea>
</p>
<INPUT type="submit" value="Send This Form">
</FORM>
</BODY>
</HTML>
AA 2005/06
© Alberti, Bruschi, Rosti
49
World Wide Web, ipertesti e HTML
AA 2005/06
© Alberti, Bruschi, Rosti
50
World Wide Web, ipertesti e HTML
Scarica

ppt - Home di