Internet, Browser e HTML Interazione

1
2
I protocolli
definiscono le regole e il modo per
trasferire le informazioni.
Internet, Browser e HTML
•
La trasmissione prevede l’utilizzo di una pila
di protocolli, tale che:
• I protocolli a basso livello si occupano della
trasmissione fisica dei dati
• quelli ad alto livello sono direttamente
interfacciati ai programmi software applicativi,
che forniscono servizi agli utenti
3
Internet
• Internet è una infrastruttura che collega tra
loro un grandissimo numero di reti di
calcolatori utilizzando il “protocollo TCP/IP”
4
HyperText Transfer Protocol
• Uno dei protocolli di alto livello è l’HyperText
Transfer Protocol (HTTP), che consente
l’accesso a risorse distribuite su diversi host
(computer) sulla rete con un approccio di
tipo ipertestuale
• Appoggiandosi a questo protocollo vengono
inviate informazioni codificate secondo altri
protocolli, stabiliti dalle applicazioni utilizzate
dagli utenti per generare le informazioni
5
• I documenti ipertestuali sono codificati
secondo le specifiche dettate dallo standard
HTML: HyperText Markup Language
6
Interazione
Modalità di interazione
• L’ interazione fra due o più macchine
può avvenire con due modalità:
• client/server (email, Web, ...)
• peer-to-peer (Napster, WinMX...)
• client/server (organizzazione
gerarchica)
•
Una macchina (client) ha bisogno di un servizio
•
Un'altra macchina (server) fornisce quel servizio
•
Il client deve contattare il server e chiedergli il
servizio desiderato
1
7
Interazione
• peer-to-peer (organizzazione
paritetica)
•
Non c'è un client (che fa le richieste) e un server
(che le soddisfa)...
•
...ma un insieme di macchine che si scambiano
informazioni da pari a pari
9
World Wide Web
• Gli host si collegano ai server usando un
programma client detto browser (colui che
curiosa)
•
Netscape, Internet Explorer, Mozilla, Opera, Safari,
Lynx
• Il browser permette la consultazione
interattiva di documenti ipertestuali e
multimediali con modalità point-and-click
11
Identificazione delle risorse
8
World Wide Web
• WWW (confidenzialmente web - ragnatela)
è la rete costituita dai server che forniscono
accesso alle loro informazioni tramite il
protocollo http
• Che cos’è
• parte di internet
• vasta collezione di informazioni distribuita
• rete client-server distribuita
10
World Wide Web
• Le informazioni sono raggruppate in siti, a loro
volta divisi in pagine
• Le pagine contengono informazioni di diverso
• formato (testo, suoni, immagini, filmati, software)
• contenuto (scientifico, ludico, commerciale, ...)
• o forniscono servizi di
• prenotazioni, iscrizione a eventi, ...
• accesso a biblioteche e basi di dati, ...
• compravendita, consulenza finanziaria, ...
12
Identificazione delle risorse
protocollo://server:porta/pathname
• Le 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 ha la forma
protocollo://server:porta/pathname
• protocollo
• indica il tipo di protocollo utilizzato
• server
• rappresenta l’indirizzo IP (numerico o simbolico)
del computer a cui si vuole accedere
• porta
• identifica la porta a cui il protocollo fa riferimento
• pathname
• indica il percorso completo del file cercato
2
13
14
Identificazione delle risorse
• Alcune informazioni possono essere omesse
(il server e/o il client sceglierà implicitamente
dei valori predefiniti, detti di default)
•
il protocollo (per default http)
•
la porta (per default 80, quella associata a http)
•
il nome del file (per default index.html,
home.html o altri) ma non il suo percorso
15
• In altre parole i seguenti URL sono
equivalenti
http://laren.dsi.unimi.it:80/index.html
http://laren.dsi.unimi.it/index.html
http://laren.dsi.unimi.it:80
laren.dsi.unimi.it:80/index.html
http://laren.dsi.unimi.it
http://159.159.151.81
16
Protocolli più comuni
Protocolli più comuni
Protocollo
tipo
descrizione
Protocollo
tipo
file://
file locale file:///c:/doc/index.html
apre un file locale
dal tuo PC
file://
file locale file:///c:/doc/index.html
apre un file locale
dal tuo PC
ftp://
File
Transfer
Protocol
ftp://ftp.unimi.it/
apre una sessione
di trasferimento
file tra il tuo PC e
un server remoto
ftp://
File
Transfer
Protocol
ftp://ftp.unimi.it/
apre una sessione
di trasferimento
file tra il tuo PC e
un server remoto
mailto:
SMTP
Protocol
mailto:[email protected]
Permette di
inviare un’ e-mail,
se configurato)
mailto:
SMTP
Protocol
mailto:[email protected]
Permette di
inviare un’ e-mail,
se configurato)
http://
HyperText http://homes.dsi.unimi.it/~lan
zarot
Transfer
Protocol
trasferimento di
documenti scritti
in HTML e JAVA.
(Protocollo
principale del
WWW).
http://
HyperText http://homes.dsi.unimi.it/~lan
zarot
Transfer
Protocol
17
esempio
Identificazione delle risorse
18
Protocolli più comuni
esempio
esempio
descrizione
trasferimento di
documenti scritti
in HTML e JAVA.
(Protocollo
principale del
WWW).
Protocolli più comuni
Protocollo
tipo
descrizione
Protocollo
tipo
file://
file locale file:///c:/doc/index.html
apre un file locale
dal tuo PC
file://
file locale file:///c:/doc/index.html
esempio
descrizione
apre un file locale
dal tuo PC
ftp://
File
Transfer
Protocol
ftp://ftp.unimi.it/
apre una sessione
di trasferimento
file tra il tuo PC e
un server remoto
ftp://
File
Transfer
Protocol
ftp://ftp.unimi.it/
apre una sessione
di trasferimento
file tra il tuo PC e
un server remoto
mailto:
SMTP
Protocol
mailto:[email protected]
Permette di
inviare un’ e-mail,
se configurato)
mailto:
SMTP
Protocol
mailto:[email protected]
Permette di
inviare un’ e-mail,
se configurato)
http://
HyperText http://homes.dsi.unimi.it/~lan
zarot
Transfer
Protocol
trasferimento di
documenti scritti
in HTML e JAVA.
(Protocollo
principale del
WWW).
http://
HyperText http://homes.dsi.unimi.it/~lan
zarot
Transfer
Protocol
trasferimento di
documenti scritti
in HTML e JAVA.
(Protocollo
principale del
WWW).
3
19
• in genere
assumono
la forma
• domini
comuni
21
20
Nomi host
Connessione diretta ad Internet
servizio/
macchina
www
ftp
luogo
dominio
google
dsi.unimi
com
it
homes
dsi.unimi
it
• Per visitare un sito web con un browser, si
dominio
it
descrizione siti
siti italiani
com
org
commerciali
associazioni,
organizzazioni, etc
net
rete
Il successo del web
• Immediatezza di accesso alle informazioni
•
i protocolli come FTP prevedono che le fasi di
scaricamento (download) e consultazione siano
separate
•
Tramite il web è invece possibile consultare i
documenti on-line
•
il trasferimento dei documenti viene effettuato
automaticamente e in modo trasparente
all’utente
23
Il successo del web
• Permette all’utente di scegliere l’ordine di
consultazione del materiale disponibile
• Svincola l’associazione logica da quella fisica:
su una stessa pagina possono esserci dei
rimandi (link) o delle componenti che
risiedono su server distanti migliaia di chilometri
• E’ facile da usare, basandosi su interfacce
grafiche con interazione point-and-click
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
22
Il successo del web
• Consente di accedere in modo uniforme a
informazioni di natura eterogenea
•
Es: immagini, testo, animazioni, suoni, filmati,
componenti multimediali
• Con l’introduzione di componenti attive
(form, applet, javascript, php, ...) è anche
possibile utilizzare i browser per trasmettere
informazioni dal client al server
24
Il successo del web
• E’ indipendente dall’ambiente di lavoro:
la stessa informazione può essere visualizzata
•
•
•
su differenti tipi di computer
usando differenti sistemi operativi
utilizzando diversi browser
• una stessa pagina può però apparire in
modo diverso a seconda della
configurazione usata (caratteri piccoli,
grandi, …)
4
25
Ipertesto
• Un ipertesto è un testo che può essere letto
sequenzialmente oppure seguendo i
rimandi (link) associati alle sue diverse parti
26
• In ogni punto del documento può comparire
un collegamento (link)
•
•
• Il lettore può scegliere il percorso di lettura
che preferisce, assecondando liberamente
i suoi interessi
27
Esempio di documento
ipertestuale
Ipertesto
•
link ad un’altra parte del documento, hyperlink
ad un altro documento
visualizzato dai browser in modo diverso (in
genere sottolineato e cambia al passaggio del
mouse)
la selezione (point-and-click) viene interpretata
dal browser come una richiesta di visualizzare il
documento specificato
28
Multimedialità
• Indica l’insieme delle tecnologie finalizzate
alla gestione integrata di informazioni basate
su media differenti
•
•
•
•
•
29
Esempio di documento
ipertestuale multimediale
testo
singole immagini
immagini in movimento (animazioni, filmati)
suoni
programmi
30
HTML
• HyperText Markup Language
• permette la creazione di documenti multimediali
ipertestuali
•
è il linguaggio per la creazione di pagine web
• non è l’unico: PHP, JavaScript, … ciascuno ha il suo
specifico settore di pertinenza.
• HTML è il linguaggio base per definire la struttura
logica della pagina
•
In formato ASCII ÆE’ universale
• può essere visualizzato da tipi differenti di
computer e da tipi diversi di browser
5
31
HTML
• È un sistema di marcatura/formattazione del
testo
•
filosofia alternativa al WYSIWYG (what you see is
what you get = ciò che vedi è ciò che ottieni )
tipica di Microsoft word
• Si basa su un’organizzazione gerarchica
• Permette
• formattazione del testo/pagina
• rimandi (link) ad altre risorse disponibili sul WWW
• inclusione di altri oggetti (immagini, suoni, etc)
• (definizione di maschere di inserimento dati)
33
Tag
32
TAG
• I documenti HTML, oltre ai contenuti, comprendono
dei Comandi (TAG) che specificano come i
contenuti vanno formattati e visualizzati
• TAG: porzioni di testo delimitate dai simboli “<“ e “>”.
• Alcuni comandi di formattazione richiedono di
introdurre i tag di inizio e fine marcatura (start e end
tag)
• Esempio: <title> e </title> (inizio/Fine titolo)
• altri invece richiedono un singolo tag
•
Esempio: <hr> (inserimento di una linea orizzontale)
34
Browser
• Molti tag hanno attributi speciali che
• Interpreta i TAG di HTML
• Il valore dell’attributo deve essergli assegnato:
• Esempio: <hr size=“n” width=“m” align=“x”>
• Formatta e visualizza i contenuti del
permettono una scelta tra alcune opzioni
documento nel modo specificato nei TAG
• NOTA: i valori vanno racchiusi tra virgolette
• L’uso di spazi, tabulazioni, maiuscole e
• Include oggetti complessi come immagini,
suoni, animazioni
minuscole ha il solo scopo di migliorare la
leggibilità del codice
35
Struttura di un documento
<html>
<head>
<title>
Titolo della pagina </title>
Altre informazioni generali sulla pagina
</head>
36
Esempio 1: Intestazione
<html>
<head>
<title>My first HTML document</title>
</head>
<body>
Contenuto della pagina
</body>
</html>
<body>
</body>
</html>
6
37
Attributi
• Gli “start tag” possono avere degli “attributi”
• Gli attributi specificano meglio come i diversi
elementi devono essere visualizzati:
• Es: <body bgcolor="red">
• dice che il background di tutto il body deve
essere rosso.
• Sintassi: nome_attributo="valore_attributo".
39
Esempio 3: sezioni (fino a 6 livelli)
38
Esempio 2: paragrafo
<html>
<head>
<title>Esempio di Paragrafo</title>
</head>
<body>
<p>Primo Paragrafo.</p>
</body>
</html>
40
<html>
<head><title>Esempio per gli elementi h1 ... h6</title>
</head>
Esempio 4: Line Breaks
<html>
<head>
<title>Indirizzo</title>
</head>
<body>
<h1>Primo capitolo</h1>
<p>Questo costituisce il primo capitolo.</p>
<body>
<p> Mario Rossi<br>
<h2>Prima sezione del primo capitolo</h2>
<p>Questa costituisce essere una sezione.</p>
Via Mazzini,
21<br>
<h3>Prima sottosezione della prima sezione</h3>
<p>Questa costituisce una sottosezione.</p>
20135 Milano<br>
<h1>Secondo capitolo</h1>
<p>Questo costituisce il secondo capitolo.</p>
Italia </p>
</body>
</html>
</body>
</html>
41
Esempio 5: Preformatted text
Tag per formattare
• Titoli: <h1> </h1>, ..., <h6> </h6>
<pre>
• Paragrafi: <p [align=“left|center|right”]>...</p>
Scrivo il testo
• Fine riga: <br>
come mi pare:
vado a capo
e lascio gli
</pre>
42
spazi che voglio
• Linea: <hr[size=“n”][width=“m”]
[align=“left|center|right”]>
• Testo a spaziatura fissa preformattato:
<pre>...</pre>
• Allineamento:
• <div align =
• <center> ...
“left|right|justify|center” > </div>
</center>
7
43
NOTA: Entity
44
Tag per i caratteri
• Tipo caratteri:
• Rappresentano in modo universale e
indipendente dalla piattaforma i caratteri
non coperti dalla codifica ASCII
• lettere accentate (&egrave; = è)
•
•
lettere appartenenti ad altri alfabeti (&ccedil = ç)
simboli matematici (&larr; = →)
• A ogni simbolo è associato un nome scrivibile
in caratteri ASCII, delimitato da & e ;
45
Commenti
• È utile inserire commenti al codice per
facilitarne la comprensione al momento di
una rilettura o di una modifica
<font size=n color=#rrggbb face=“tipo_font"></font>
• Stile del testo
• Grassetto: <b> </b>
• Corsivo: <i> </i>
• A spaziatura fissa: <tt> </tt>
• Enfatizzato: <em> </em>
• Sottolineato: <u> </u>
• Apici: <sup> </sup>
• Pedici: <sub> </sub>
• Intermittente: <blink> </blink>
• Ingrandimento della dim. del carattere: <big> </big>
• E riduzione: <small> </small>
46
Esempio
<html>
<head>
<title> Pagina vuota </title>
</head>
<body bgcolor=#000000 text=#FFFFFF link=#FFFFFF>
• Sintassi: <!-- commenti -->
<!– background nero, testo bianco, link bianchi>
</body>
• I commenti non vengono interpretati dal
</html>
browser
47
Osservazione
• Il browser:
•
non segnala né corregge gli errori. Infatti ignora:
• interruzione di riga
• spazi multipli
• tags <p> (paragrafo) multipli
• tags sconosciuti o scritti in modo errato (non
visualizza niente oppure visualizza il contenuto
del tag come testo)
• commenti
commento
48
Esempio 6: Liste (Unordered)
…
<body>
<ul>
<li>Un esempio di lista,</li>
<li>che comprende vari elementi,</li>
<li>elencati in ordine.</li>
</ul>
</body>
<ul type=circle>
<li> Primo elemento</li>
<li> Secondo elemento</li>
<li> Terzo elemento</li>
</ul>
8
49
Liste (Ordered)
<ol>
<li> Primo elemento</li>
<li> Secondo elemento</li>
<li> Terzo elemento</li>
</ol>
50
Liste (definition List)
<dl>
<dt>Primo Elemento</dt>
<dd>Definizione del primo elemento</dd>
Liste Annidate:
<ol>
<li> Primo elemento</li>
<ol type=a>
<li> Secondo elemento</li>
</ol>
<li> Terzo elemento</li>
</ol>
51
Liste ed elenchi
<dt>Secondo Elemento</dt>
<dd>Definizione del secondo elemento</dd>
</dl>
52
Immagini
• L’aspetto dei punti elenco dipende dal browser (e non
dal tipo di carattere)
• I contenitori <ul> …</ul> e <ol>…</ol> si possono
annidare per creare elenchi su più livelli. Non si
possono incrociare.
• E’ possibile includere nella pagina delle
immagini
• E’ necessario indicare il nome del file in
formato GIF o JPEG specificandone il
percorso (ed eventuali altri attributi)
• Nel caso di un elenco su più livelli il browser sceglie un
tipo di punti elenco per ogni livello
• È possibile scegliere il tipo di punto elenco
• <UL TYPE=…> con tipo CIRCLE, DISC, SQUARE…
• <OL TYPE=…> con tipo a, A, i, I
• <OL START=10> fissa a 10 il valore iniziale della numerazione
53
Percorso Immagini
<img src=
=w]
src=percorso[
percorso[height=
height=h] [width
[width=
[border=
border=n] [alt="testo
[alt="testo alternativo“]
alternativo“]
[align=left|center|right|top|middle|bottom]>
54
Formato immagini
• Le immagini non sono integrate nella pagina Web ma
sono chiamate da essa: nella pagina html è inserito il
percorso d’accesso all’immagine:
• Sintassi: <IMG SRC=percorso d’accesso>
• Percorso:
• Nome dell’immagine:
•
l’img si trova nella directory (cartella)
che contiene il codice HTML: SRC=“immagine.jpg”
Percorso relativo: l’img si trova in una sotto-cartella
• I file che contengono immagini hanno
formato
•
JPEG, GIF (animate), PNG
• estensione .jpeg, .jpg, .gif, .png
SRC=“sottocartella/immagine.gif”
•
URL assoluto: l’immagine si trova sul Web
SRC=“"http://homes.dsi.unimi.it/~lanzarot/img.gif”
9
55
56
Opzioni per le immagini
<IMG SRC=immagine.gif ...=... >
• ALT=“…”
•
•
•
•
testo alternativo (se
l’immagine non è disponibile)
VSPACE=“…”
WIDTH=“w”
HEIGHT=“h”
HSPACE=“…”
numero di pixel attorno
all’immagine
• BORDER=“n”
spessore del bordo intorno
all’immagine
• ALIGN=“BOTTOM|MIDDLE|TOP|LEFT|RIGHT”
57
Collegamenti ipertestuali
Esempio 7: Immagini
<html>
<head>
<title>Esempio per l'elemento img</title>
</head>
<body>
<p> Una Immagine: <img src="io.jpg" width=150
alt="io a Roma“ align=“middle”> Il testo può poi
continuare di lato all'immagine. <br clear=“all”>
Questo inizia una nuova riga</p>
<p>Oppure possiamo definire un nuovo paragrafo</p>
</body>
</html>
58
Collegamenti ipertestuali:
Indirizzi URL (esempio 8)
• URL Assoluta:
• Sintassi:
<a href="indirizzo URL"> testo </a>
link
• Link ad un indirizzo di posta elettronica per l'invio di
una e-mail
<a href="http://www.unimi.it/">documento "esterno"</a>
• URL relativa:
<a href="02-paragrafo.html">documento "locale"</a>
• Collegamento ad un frammento del documento corrente:
<a href="#frammento">"parte" del documento presente</a>
<a href="mailto:nome@dominio"> nome </a>
link
59
Tabelle
• Dove, da qualche parte è stato definito:
<p id="frammento">Questo paragrafo costituisce un
frammento del presente documento. </p>
Esempio 9: Tabelle
60
<table> <!--Inizio tabella-->
<tr> <!-- Inizio della I
• delimitate dai tag: <table [border=n]> e
</table> dove n indica lo spessore della cornice
• Ogni riga è delimitata da <tr> …<tr>
• Gli elementi di ogni riga sono poi organizzati in
colonne, identificate dai tag <th> e </th> in caso di
header, o <td> </td> in corrispondenza di dati
(cella vuota: <td>&nbsp;</td>)
riga-->
<th> Anno</th> <!-- I cella-->
<th> Temperatura Media</th> <!-- II cella-->
</tr> <!-- Fine della I riga-->
<tr> <!-- Inizio della II riga-->
<td> 2001</td> <!--I cella-->
<td> 14&ordm;</td> <!--II cella-->
</tr> <!-- Fine della II riga-->
<tr> <!-- Inizio della III riga-->
<td> 2004</td> <!--I cella-->
<td> 18&ordm;</td> <!--II cella-->
</tr> <!-- Fine della III riga-->
</table>
10
61
Attributi
• Border: definisce se vogliamo il bordo e il suo spessore
• Align: se applicato al tag <table> allinea la tabella; se applicato
ai tag <tr> allinea il contenuto delle celle
• Valign: per posizionare verticalmente il testo nella tabella
(top|middle|bottom)
• Cellpadding: per definire lo spazio tra testo e bordo della cella
(es: cellpadding=“10”)
• Cellspacing: definisce lo spazio tra celle
• Width: definisce la larghezza della tabella. Può essere espressa in:
•
•
pixel (es: width=“100”)
percentuale rispetto alla larghezza totale della finestra
(es: width=80%)
63
Tabelle
• Possiamo aggiungere una didascalia all a
nostra tabella
<caption>Temperature medie calcolate
negli anni 2001/2004/2007</caption>
• Attributi: align=“bottom” posiziona la
62
Tabelle
Estendiamo la tabella delle temperature,
dividendo le temperature medie tra nord e sud
Italia e dando poi il totale.
<tr>
<th rowspan="2"> Anno</th>
<th colspan="3"> Temperatura Media</th>
</tr>
<tr>
<th>Nord</th>
<th>Sud</th>
<th>Totale</th>
</tr>
64
Frame
• Un’aggiunta ad HTML che permette di
gestire più sorgenti HTML su una stessa
pagina
•
•
posso aggiornare singole parti del sito senza
toccarne altre
posso inserire informazioni variabili (come
un’intestazione oppure un elenco dei contenuti)
in una sezione della pagina
didascalia sotto la tabella
65
Frame
<frameset cols="25%,50%,25%">
<frame src="10-frame_a.htm">
<frame src="10-frame_b.htm">
<frame src="10-frame_c.htm">
</frameset>
11