Il Web Cos`è il Web - Politecnico di Torino

Commenti

Transcript

Il Web Cos`è il Web - Politecnico di Torino
Il Web
Cos’è il Web
•
•
•
•
Un concetto
Un insieme di protocolli
Una raccolta di software
L’universo dell’informazione on-line
1
Ma prima... un po’ di storia
• 1980: Un consulente del CERN, Tim Berners-Lee,
scrive un programma per collegare tra loro
documenti con link ipertestuali
• 1989: TBL fa circolare in CERN un documento
sull’Information Management attraverso ipertesti; il
documento è ignorato
• 1990: nuova proposta del documento. Il progetto è
battezzato “World Wide Web” anziché “Information
Mine” o “Information Mesh”
Storia del Web (2)
• 1991 : CERN rilascia un primo browser testuale
per VAX, rs6000 e Sun4, con accesso a files e news
• 1991 : nascono le prime mailing list e Usenet
newsgroup con argomento il WWW
• 1992 : diffusi i primi esempi di browser grafici per
Xwindows: Erwise, Viola e Midas
• 1993 : Marc Andreessen di NCSA sviluppa e
rilascia Mosaic per Xwindow e poi per PC e Mac
2
Storia del Web (3)
• 1993 : il traffico Web è l’1% del traffico Internet.
New York Times, The Guardian e The Economist
pubblicano brevi articoli sul WWW
• 1994 : Andreessen e alcuni colleghi lasciano
NCSA e fondano la “Mosaic Communications
Corp.”, ora “Netscape Communications”
• 1994 : ragioni di budget obbligano il CERN a
lasciare lo sviluppo del WWW ad INRIA (Francia)
Storia del Web (4)
• 1995 : Netscape batte, in diffusione, l’ormai
obsoleto Mosaic
• 1995 : Microsoft inizia la distribuzione di
Internet Explorer. Nasce la “guerra dei browser”
• 1995 : Netscape include la tecnologia JAVA nel
suo browser, su licenza di Sun
3
Le idee-guida del Web
•
•
•
•
•
Leggibilità universale
Informazione in formato ipertestuale
Indicizzazione e Ricerca dell’informazione
Modello client-server distribuito
Negoziazione dei formati e flessibilità verso
estensioni del linguaggio
Elementi del linguaggio HTML
4
Alcune sigle
• WWW
t
World Wide Web
• SGML
t
Standard Generalized Markup Language
• URL
t
Uniform Resource Locator
• HTML
t
Hyper Text Markup Language
Perché conoscere HTML
• Oggi esistono strumenti che permettono di
“comporre” una pagina HTML (FrontPage,
Netscape Composer, PageMill, i filtri
HTML di MS Office...)
• Tuttavia, è consigliabile una conoscenza
“minima” dei formati HTML per poter
intervenire di persona quando il risultato
non sia quello voluto
5
Il Linguaggio HTML
• Il linguaggio HTML è composto da un
insieme di elementi che definiscono un
documento e ne regolano la visualizzazione
su appositi ‘interpreti di HTML’
• “Interpreti di HTML” sono le applicazioni,
o browser, quali Netscape Navigator e
Communicator, Microsoft Explorer,
Mosaic...
Gli Ipertesti ed i link
• I documenti realizzati attraverso HTML
hanno l’aspetto di ipertesti
• Ipertesto: modo di preparare e pubblicare
documenti che consentano al lettore di
seguire il proprio percorso attraverso una
serie di informazioni
• Un ipertesto è composto da nodi e
collegamenti (link)
6
Struttura di un elemento HTML
<etichetta> testo </etichetta>
oppure
<etichetta attributo=argomento> testo
</etichetta>
• L’etichetta (o tag) indica quale formattazione
assumerà il testo
• Essendo HTML un linguaggio di formattazione,
non è necessario preoccuparsi dei ritorni a capo
• Gli elementi HTML sono case unsensitive
Struttura di un documento HTML
• Un documento HTML è composto da
elementi strutturati in un’intestazione (head)
e da un corpo (body)
• Il documento è delimitato da <html>
</html>
• L’intestazione è delimitata da <head>
</head>
• Il corpo è delimitato da <body> </body>
7
Elementi in Head
• L’Header può contenere il seguente elemento:
<title>... </title> : il titolo del
documento; nel browser appare solitamente sulla
barra della finestra
t Non confondere <title> con quello che è, nel
senso comune, il ‘titolo’ di un testo (solitamente
posto in cima alla pagina scritta)
t
Bla Bla
<title>
sdfdflsjf sdjfskd
sdfskj sdfklsd
dsfdlklskf lsdf
sdfjsdlfksdlfsd
Elementi in Head
• <base HREF=“...”> usato per impostare la
URL di riferimento e risolvere URL relativi
(non ha tag di chiusura)
• <meta ...> contenitore per informazioni
accessorie sul documento (no tag di chiusura)
8
Il Body
• Attributi di body:
t
t
t
t
t
t
bgcolor=“#RGBcode” colore sfondo pagina
background=“nomefile” immagine da usare come
sfondo della pagina
text=“#RGBcode” colore testo della pagina
link=“#RGBcode” colore collegamento ipertestuale
alink=“#RGBcode” colore collegamento ipertestuale
attivo (click del mouse)
vlink=“#RGBcode” colore collegamento ipertestuale
visitato
Il Body
• Nota: i colori definiti nel body possono
essere ridefiniti dalle impostazioni del
singolo browser
9
Il Body - Elementi di testo
• <p> Fine paragrafo. Va a capo e salta una riga
• <br> Impone un ritorno a capo, ma non salta una riga
• <pre>...</pre> Identifica una parte di testo
preformattato, da visualizzarsi così com’è.
• <blockquote>...</blockquote> indenta una
porzione di testo, ma non conserva una precedente
formattazione.
• <pre> riconosce eventuali elementi HTML al suo
interno: perché ciò non accada usare <xmp>
Gruppo Reti - Politecnico di Torino
Il Body - Headers
• Gli ‘Headers’ sono i veri e propri titoli (a
differenza di <title>) e sono disponibili in
6 livelli:
<h1> Titolo </h1> Titolo
<h2> Titolo </h2>
Titolo
<h3>
<h4>
<h5>
<h6>
Titolo
Titolo
Titolo
Titolo
</h3>
</h4>
</h5>
</h6>
Titolo
Titolo
Titolo
Titolo
10
Il Body - Stili logici e stili fisici
• Stili logici:
<em>...</em> per dare enfasi al testo
t <strong>...<strong> per dare maggior
enfasi
t
• Stili fisici:
<i> stile italics
t <b>
stile boldface
t <tt> stile typewriter
t
Formattazione di carattere
• Può essere eseguita con l’etichetta <font>
ed i suoi attributi size - color - face
t
t
t
size specifica la dimensione del carattere in
valore numerico assoluto o come differenza
rispetto al font di default
color indica le componenti RGB del colore
prescelto, in formato esadecimale
face imposta un tipo di font (es. Arial), che
verrà usato solo se presente sulla macchina di
chi consulta la pagina
11
Liste non ordinate
• Le liste di elementi non ordinate si possono
realizzare con: <ul> ... </ul>
• Ogni elemento della lista viene introdotto da:
<li>
• E’ possibile specificare l’attributo type con il
quale cambiare la forma dei ‘bullets’:
<ul type=...> e le scelte possibili sono:
disc - circle - square
Liste ordinate
• Se si vuole assegnare una preferenza o un ordine agli
elementi di una lista, si usa: <ol>...</ol>
• Ogni elemento viene sempre introdotto da <li>
• E’ possibile specificare il tipo di numerazione da
adottare con <ol type=...>
• le scelte sono: ‘A‘, ‘a‘, ‘I‘, ‘i‘, e ‘1‘ (default). Con
l’attributo <...start=...> è possibile specificare
il valore con cui iniziare il conto.
12
Definition Lists
• Per creare elenchi di definizioni, si usano le
seguenti etichette:
<dl>
<dt> Primo termine da definire
<dd> Definizione del primo termine
<dt> Secondo termine da definire
<dd> Definizione del secondo termine
</dl>
Entità
• &parola-chiave; serve a visualizzare caratteri
particolari, quali lettere accentate o caratteri di
alfabeti stranieri
• Esempio:
t
t
è
ç
&grave;
&ccedi;
• Analogamente, il carattere può essere specificato
dal suo equivalente ASCII con: &#numero;
• Esempio:
t
&#64;
@
13
Link a parti del documento
• Occorre ‘segnare’ il punto di destinazione
con:
<a name=“destinazione”> ... </a>
• Dopo che è stata definita la destinazione, si
può ‘linkarla’ con:
<a href=“#destinazione”> ... </a>
• Tutto ciò che è compreso tra <a href...>
e </a> viene evidenziato dal browser usato
Link ad altri files
• In questo caso non occorre ‘segnare’ la
destinazione
• Il link ad un altro file si può realizzare
indicandone il nome e (eventualmente) il
percorso
<a href=“file”> ...</a>
• Tutto ciò che è compreso tra <a href...>
e </a> viene evidenziato dal browser usato
14
Link a parti di altri files
• Per linkare parti di altri files, si combinano le
due tecniche viste in precendenza
• Dopo aver segnato la destinazione con
<a name=“destinazione”...>, la si può
linkare con:
<a href=“file#destinazione”>...</a>
Inclusione di immagini (1)
• Si possono includere immagini .gif e .jpg in
un documento HTML, decidendo come
disporre il testo attorno all’immagine
• Per includere un immagine:
<img src=“filename”>
• Con l’attributo ALT si può indicare un testo da
accompagnare all’immagine, che verrà
visualizzato quando il mouse si trova sopra di
essa all’interno del browser
15
Inclusione di immagini (2)
• altri attributi di img:
border=“...” spessore del bordo (spesso
antiestetico)
t align=“...” specifica come distribuire il
testo attorno all’immagine, con argomento:
t
• left, right : l’immagine si allinea al margine
sinistro (destro) e il testo di distribuisce alla sua destra
(sinistra)
• top, middle, bottom: l’immagine si allinea a
sinistra, e il testo si posiziona a destra in alto (in
mezzo; in basso)
Inclusione di immagini (3)
width=... height=... permettono di
calcolare le dimensioni dell’immagine prima di
caricarla (velocizza formattazione di pagina)
t vspace=...
hspace=... indicano a quale
distanza in verticale (o in orizzontale) deve
mantenersi il testo dall’immagine.
t
• Aggiungendo a <br> l’attributo clear=left
(right) si indica che, dopo un’interruzione di
linea, il testo deve riprendere appena a sinistra
(destra) è terminata l’immagine
16