Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

50
Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6

Transcript of Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

Page 1: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

Modulo di Informatica

World Wide Web, ipertesti e HTML

Lezione 6

Page 2: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

2

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)

Page 3: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

3

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

Page 4: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

4

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

Page 5: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

5

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

Page 6: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

6

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

Page 7: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

7

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

Page 8: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

8

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

Page 9: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

9

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

Page 10: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

10

Esempio

Page 11: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

11

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

Page 12: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

12

esempio

Page 13: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

13

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

Page 14: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

14

Architettura del web

Page 15: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

15

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 basasu una interazione tra un computer client ed un server

Page 16: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

16

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

Page 17: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

17

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)

Page 18: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

18

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)

Page 19: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

19

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

Page 20: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

20

Collegamento via modem

• Se siete collegati tramite un modem, allora le informazioni fra client e server passano attraverso il provider

Page 21: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

21

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

Page 22: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

22

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

Page 23: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

23

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

Page 24: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

24

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

Page 25: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

25

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

Page 26: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

26

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

Page 27: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

27

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

Page 28: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

28

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

Page 29: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

29

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

Page 30: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

30

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/

Page 31: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

31

Esempio

Page 32: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

32

Una maschera di ricerca

Page 33: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

33

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

Page 34: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

34

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"

Page 35: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

35

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

Page 36: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

36

Il linguaggio di markup HTML

Page 37: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

37

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

Page 38: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

38

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)

Page 39: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

39

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

Page 40: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

40

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>

Page 41: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

41

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;

Page 42: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

42

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>

Page 43: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

43

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>

Page 44: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

44

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

Page 45: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

45

esempio

<IMG SRC="/gif/mczolor.gif" ALT="Mozilla">Questa &egrave; una immagine visualizzata alla destra del testo...

Page 46: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

46

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>

Page 47: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

47

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:nome@dominio">Nominativo</A>

Page 48: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

48

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

Page 49: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

49

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>

Page 50: Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

AA 2005/06© Alberti, Bruschi, Rosti

World Wide Web, ipertesti e HTML

50