Introduzione a WWW e HTML

(1)

Paolo Milazzo

Dipartimento di Informatica, Universit`a di Pisa http://www.di.unipi.it/∼milazzo

milazzo di.unipi.it

Corso di Laurea Magistrale in Business Informatics A.A. 2010/2011

(2)

Sommario

1 Il World Wide Web (WWW) Breve storia

Che cos’`e (o non `e) il WWW?

2 Introduzione a HTML

3 HTML di base

Struttura di un documento HTML Testo semplice e strutturato

Testo semplice Liste

Tabelle

Immagini

I collegamenti ipertestuali

4 Pagine strutturate e moduli in HTML Frames

Forms

(3)

Il World Wide Web (WWW) nasce tra il 1989 e il 1991 come progetto del CERN di Ginevra affidato a un gruppo di ricercatori informatici tra i quali Tim Berners-Lee e Robert Cailliau.

Lo scopo del progetto era la creazione di un sistema pratico ed efficiente per lo scambio di informazioni all’interno del CERN e tra i ricercatori del CERN e i loro collaboratori all’estero.

I ricercatori identificarono due elementi chiave per la realizzazione di tale sistema:

I Internet: la rete globale gi`a esistente fin dagli anni ’70

I Gli ipertesti: documenti elettronici non organizzati in maniera sequenziale (come un libro) ma contenenti collegamenti che consentano di saltare da un punto all’altro nel documento

(4)

Breve storia del WWW (2)

Nel 1991 i ricercatori realizzarono un prototipo basato su NeXT (una piattaforma hardware su cui girava una variante di Unix) gi`a dotato di una sorta di interfaccia grafica per “navigare”.

Alla fine del 1992 erano gi`a disponibili 26 web servers in varie nazioni.

Alla fine del 1993 i web server disponibili erano gi`a oltre 200.

Tra il 1992 e il 1993 il National Centre for Supercomputing

Applications (NCSA) realizz`o il primo web browser: chiamato NCSA Mosaic

In pochi anni il WWW ebbe una crescita molto rapida, divenendo utilizzato da milioni di persone. Gli interessi commerciali attorno a tale successo portarono alla “guerra dei browser”.

(5)

Nel 1994 Marc Anderseen (realizzatore di NCSA Mosaic) e Jim Clark (fondatore della Silicon Graphics) fondarono Netscape Corp. e realizzarono il browser Netscape Communicator basato su Mosaic Nel 1995 Microsoft lancia il browser Internet Explorer.

Negli anni successivi (fino al 1998) i due browser combattono a colpi di nuove funzionalit`a, ma alla fine Netscape si dichiara sconfitta non riuscendo a competere con Internet Explorer (che `e preinstallato su Windows...)

Netscape Corp. viene venduta ad America On-Line (AOL) e il codice sorgente di Communicator viene reso pubblico creando una comunit`a Open Source (chiamata Mozilla.org) che ne porti avanti lo sviluppo.

Nel 2000 esce una nuova versione del browser Mozilla, ricco di funzionalit`a ma molto lento.

Nel 2004 la comunit`a di Mozilla riesce nell’intento di rivoluzionare il cuore del proprio browser e realizza Mozilla Firefox, un browser veloce, flessibile e multipiattaforma che riscuote un rapido e crescente successo.

(6)

La guerra dei browser (2)

Il browser NCSA Mosaic

(7)

Alcuni esemplari di Netscape Communicator/Navigator (1.0, 4.7 e 9.0)

(8)

La guerra dei browser (4)

Alcuni esemplari di Internet Explorer (1.0, 4.0, 8.0)

(9)

Negli ultimi anni sono nati anche altri browser spesso rivolti a specifici mercati (ad esempio Safari per MacOS e Opera per i dispositivi mobili) portando alla seguente distribuzione di utilizzo:

(10)

Che cos’` e il WWW?

Il World Wide Web `e un “globally distributed hypermedia system”, ossia un ipertesto multimediale distribuito a livello mondiale:

Unipertesto, ossia un documento (elettronico) costituito da pagine consultabili in maniera non sequenziale attraverso l’uso di

collegamenti (links) all’interno delle pagine stesse.

multimediale, ossia che contiene testo, ma anche immagini, suoni, video, ecc...

distribuito a livello mondiale, ossia tale per cui le pagine non sono tutte memorizzate in un unico computer, ma su innumerevoli server diversi. I collegamenti contenuti in una pagina di un server possono riferire pagine memorizzate su altri server.

(11)

Il World Wibe Web NON E’Internet.

Internet `e la rete globale di computer su cui il WWW viene diffuso.

Internet si basa su protocolli di comunicazione che consentono di interconnettere reti diverse e basate su caratteristiche di connessione anche molto diverse tra loro

Internet `e il canale che consente di diffondere, oltre al WWW, servizi quali la posta elettronica, il trasferimento di file (FTP), la

messaggeria istantanea, ecc...

(12)

Le fondamenta del WWW

I protocolli/linguaggi su cui si basa il WWW (fin dalle sue origini) sono i seguenti:

Uniform Resource Locator (URL) – Come riferire un documento E’ una convenzione su come scrivere il riferimenti ad altri documenti.

Viene utilizzato nei link contenuti nelle pagine web.

HyperText Transfer Protocol (HTTP)– Come ottenere un documento E’ un protocollo di comunicazione che viene utilizzato per l’accesso a documenti ipertestuali via rete.

HyperText Markup Language (HTML)– Il formato dei documenti E’ un linguaggio per la realizzazione di documenti ipertestuali

(13)

A questi componenti di base si sono poi aggiunti nel tempo altri

componenti che consento di realizzare pagine web pi`u evolute e dinamiche, ad esempio:

Cascading Style Sheet (CSS): un linguaggio per descivere gli aspetti di presentazione di una pagina web (font, colori, ecc...)

Client Scripting: un insieme di linguaggi e tecnologie (e.g.

JavaScript) per realizzare pagine pi`u complesse e interattive (ad esempio tramite finestre pop-up, ecc...) che contengono del codice che viene eseguito dal browser

Siti web dinamici: il server web non `e pi`u un semplice “memorizzatore di pagine” ma esegue applicazioni i cui output sono pagine web. Per questo nascono linguaggi quali Perl, PHP, Pyton e ASP.

(14)

Architetture del WWW

Alcune architetture comuni per la realizzazione di siti web sono le seguenti:

Sito web statico: Ogni pagina del sito `e memorizzata in un file diverso sul web server in formato HTML. Quando viene richiesta una pagina, il file corrispondente viene inviato al client e visualizzato cos`ı com’`e dal browser.

Sito web con script: Differisce rispetto all’approccio statico nel fatto che i file HTML possono contenere porzioni di codice (in un

linguaggio tipo JavaScript) che verranno eseguite dal browser per creare qualche effetto di dinamicit`a (controllo sui dati immessi nella pagina, apertura di finestre di dialogo, ecc...)

Sito web dinamico: I server web eseguono programmi (ad esempio scritti nel linguaggio PHP) che generano le pagine web richieste da un client. Tali programmi spesso interrogano un data-base per ottenere le informazioni che servono per costruire le parti principali delle pagine.

(15)

Eventuali script (e.g. codice JavaScript) contenuti nella pagina HTML inviata al browser vengono eseguit dal browser stesso durante la fase di visualizzazione.

(16)

Architettura di un sito web dinamico (esempio con PHP)

(17)

3 HTML di base

Tabelle

Immagini

Forms

(18)

Introduzione a HTML (1)

HTML sta per HyperText Markup Language

HTML non `e un linguaggio di programmazione, ma un linguaggio di markup costituito da un insieme ditag:

<html>,<p>,<table>,<img>,....

Un documento HTML descriveuna pagina web usando una opportuna combinazione di tag e testo semplice

Il compito di un web browser `e di interpretare un documento HTML e visualizzare la pagina web da esso descritta

La versione più utilizzata di HTML è al momento la 4 (o meglio, 4.01) Recentemente è stata definita le versione 5

(19)

Un documento HTML `e essenzialmente un documento di testo arricchito con tag

Un frammento di HTML:

< h3 > F o r m a l B i o l o g i c a l M o d e l l i n g : < / h3 >

< ul >

< li > S y n t h e t i c biology , c i r c u i t s d e s i g n ( I G E M m o d e l s ); < / li >

< li > F o r m a l m e t h o d s for the r e p r e s e n t a t i o n of b i o l o g i c a l s y s t e m s ( r e w r i t e systems , p r o c e s s calculi , g r a p h g r a m m a r s , h y b r i d systems , etc .); < / li >

< li > T h e o r e t i c a l l i n k s and c o m p a r i s o n s b e t w e e n d i f f e r e n t f o r m a l m o d e l s for the m o d e l l i n g of b i o l o g i c a l p r o c e s s e s ; < / li >

< li > Q u a n t i t a t i v e ( p r o b a b i l i s t i c , timed , s t o c h a s t i c , etc .) l a n g u a g e s and c a l c u l i ; < / li >

< li > S p a t i a l l a n g u a g e s and c a l c u l i . < / li >

< / ul >

(20)

Introduzione a HTML (3)

Un tag normalmente prevede un’apertura (e.g. <p>) e una chiusura (e.g. </p>) e descrive il proprio contenuto:

I Ad esempio, il tag <p> pu`o essere usato cos`ı <p>Hello world</p>

per specificare che la frase Hello world `e un paragrafo Un tag pu`o avere attributi

I Ad esempio, il tag <a> pu`o essere usato cos`ı

<a href="http://www.repubblica.it">clicca qui</a> per specificare che “clicca qui” `e un link al sito di Repubblica, indicato tramite l’attributo href

Un tag che non ha contenuto pu`o essere contratto in un unico simbolo

I Il tag <hr> da solo crea una riga orizzontale lungo tutta la pagina (per definizione <hr> non pu`o avere contenuto)

I Tag che possono avere un contenuto (e.g. <p>) se usati senza contenuto devono essere scritti in uno dei seguenti modi:

F <p></p>

F <p/>

I Anche per <hr> si pu`o usare la sintassi <hr/>

(21)

Qualche nota sintattica:

Si possono inserirecommenti (ignorati dal browser) con la seguente sintassi:

I tag htmlnon sono case sensitive

HTML collassa tutti i caratteri di whitespace (SPACE, TAB, CR, LF) in un unico spazio. Questo permette di organizzare il sorgente in maniera leggibile senza influenzare la visualizzazione sul browser Se nel testo di un documento HTML si vogliono usare lettere accentate e altri simboli riservati (e.g. < e >) bisogna usare le entit`a carattere:

`

a &agrave `e &egrave ´e &eacute `ı &igrave

`

o &ograve `u &ugrave A` &Agrave E` &Egrave E´ &Eacute `I &Igrave O` &Ograve U` &Ugrave

> &gt < &lt & &amp ” &quot

(22)

Introduzione a HTML (5)

Generalmente i browser web sono molto (anche troppo) tolleranti:

accettano anche documenti HTML con errori cercando di visualizzare il pi`u possibile

Questo, e il fatto che nel corso del tempo i diversi browser hanno supportato in maniera diversa i vari tag HTML ha fatto si che il linguaggio non sia mai riuscito a convergere veramente in un’unica versione

Più recentemente è stato definito anche XHTML, una versione di HTML che impone vincoli sintattici più forti

I tag scritti in minuscolo

I obbligo di avere sempre il tag di chiusura

I obbligo di usare le virgolette negli attributi

I ...

(23)

Un buon uso di HTML prevede la separazione tra la descrizione della struttura della pagina web e la descrizione degli aspetti di

presentazione

I Lastrutturadi una pagina web include la presenza di titoli, liste, tabelle, immagini, link, ecc...

I Gli aspetti dipresentazioneinvece includono i font e i colori utilizzati, il posizionamento dei contenuti nella pagina, ecc....

Sebbene includa alcuni apetti presentazionali, HTML dovrebbe essere usato solo per descrivere la struttura della pagina

Per descrivere gli aspetti di presentazione `e bene usare il linguaggio CSS (Cascading Style Sheets), che non vedremo

(24)

Sommario

3 HTML di base

Tabelle

Immagini

Forms

(25)

Un documento HTML contiene due parti:

L’header, che contiene solo informazioni sul documento stesso;

Il corpo (body), che `e la parte di documento che viene effettivamente visualizzata.

L’intero documento inizia con il tag <html> (chiuso da </html>), mentre le due parti header e corpo sono delimitate dai tag <head> e <body>, rispettivamente.

< h t m l >

< h e a d >

. . . h e a d e r del d o c u m e n t o . . . .

< / h e a d >

< b o d y >

. . . c o r p o del d o c u m e n t o . . . .

< / b o d y >

< / h t m l >

(26)

L’header di un documento HTML (1)

All’interno dell’header di un documento html `e comune trovare:

Il titolo del documento (che apparir`a in cima alla finestra del browser) usando il tag <title>. Ad esempio:

I <title>Corso di Web Programming</title>

Meta dati (informazioni aggiuntive) sul documento usate dalle applicazioni e dai motori di ricerca. Si inseriscono usando il tag

<meta>.

I Ad esempio: <meta name="author" content="Paolo Milazzo">

(27)

A questo punto un esempio di bozza di documento HTML dotato di header `e il seguente:

< h t m l >

< h e a d >

< t i t l e > P a g i n a di p r o v a < / t i t l e >

< m e t a n a m e = " a u t h o r " c o n t e n t = " P a o l o M i l a z z o " >

< / h e a d >

< b o d y >

. . . c o r p o del d o c u m e n t o . . . .

< / b o d y >

< / h t m l >

(28)

Il corpo di un documento HTML (1)

Il corpo di un documento HTML pu`o contenere un sacco di cose:

Testo (semplice e strutturato) Liste (numerate e non numerate) Tabelle

Collegamenti ipertestuali (link ad altri documenti o a altre parti dello stesso documento)

Immagini

Mappe (immagini cliccabili) Frames

Form (moduli compilabili dall’utente) Script (frammenti di codice eseguibile)

(29)

La forma di contenuto pi`u immediata `e il testo semplice.

Sebbene possa essere inserito senza usare tag particolari `e bene racchiudere i vari paragrafi di testo nel tag <p>.

Inserendo un po’ di testo nel corpo del nostro esempio otteniamo:

< h t m l >

< h e a d >

< t i t l e > P a g i n a di p r o v a < / t i t l e >

< m e t a n a m e = " a u t h o r "

c o n t e n t = " P a o l o M i l a z z o " >

< / h e a d >

< b o d y >

< p > Q u e s t a e ’ una p a g i n a di p r o v a < / p >

< / b o d y >

< / h t m l >

(30)

Il corpo di un documento HTML (3)

Vediamo ora uno per uno tutti i tipi di contenuti che possono essere usati nel corpo di un documento HTML.

Negli esempi che faremo ometteremo la struttura dell’intero documento, ma illustreremo solo il frammento di codice HTML di interesse.

Si assume quindi che i frammenti di codice HTML illustrati saranno da inserire all’interno della parte <body> ... </body> di un documento HTML completo (e.g. l’esempio che abbiamo gi`a visto).

(31)

Il modo pi`u semplice per inserire testo in una pagina HTML `e tramite paragrafi:

Si usa un tag <p> per ogni paragrafo;

I paragrafi sono “unit`a logiche” di testo, spesso separati nella

visualizzazione tramite spazio verticale o indentazione della prima riga;

Se `e necessario inserire un’interruzione di linea all’interno di un paragrafo basta inserire il tag <br> (usato pi`u volte crea righe vuote)

< p > Q u e s t a e ’ una p a g i n a di p r o v a c o m p o s t a da piu ’ p a r a g r a f i . < / p >

< p > Il t e s t o di un p a r a g r a f o puo ’ e s s e r e m a n d a t o a c a p o a p i a c i m e n t o ... < br >

V i s t o ? A n c h e con l i n e e v u o t e :

< br > < br > < br >

V i s t o ?

< / p >

(32)

Il testo semplice: stili (1)

HTML prevede alcuni stili (grassetto, italico, ecc...) che possono essere assegnati a porzioni di testo, come nei seguenti esempi.

< p > Q u e s t o e ’ una p o r z i o n e di t e s t o in cui u s i a m o

< b > g r a s s e t t o < / b > , < i > i t a l i c o < / i > ,

< tt > t e s t o a d i m e n s i o n e f i s s a < / tt > ,

< big > t e s t o g r a n d e < / big > ,

< s m a l l > t e s t o p i c c o l o < / s m a l l > ,

< s > t e s t o c a n c e l l a t o

( d e p r e c a t o ) < / s > e < u > t e s t o s o t t o l i n e a t o ( d e p r e c a t o ) < / u >

< / p >

(33)

HTML prevede anche alcuni stili legati all’interpretazione logica del testo (testo enfatizzato, definizioni, ....).

La visualizzazione (dimensioni del font, ecc...) pu`o dipendere dal browser usato.

< p > Q u e s t o e ’ una p o r z i o n e di t e s t o che c o n t i e n e

< em > t e s t o e n f a t i z z a t o < / em > ,

< s t r o n g > t e s t o f o r t e m e n t e e n f a t i z z a t o < / s t r o n g > , una

< dfn > d e f i n i z i o n e < / dfn > , ma a n c h e un f r a m m e n t o di c o d i c e J a v a :

< c o d e > S y s t e m . out . p r i n t l n ( " bye ! " );

< / c o d e > < / p >

(34)

Il testo semplice: testo preformattato

E’ inoltre possibile inserire in un documento HTML del testo

preformattato, ovvero in cui gli spazi bianchi e le interruzioni di linea hanno un significato (e.g. in una poesia);

Il browser spesso usa un font diverso per il testo preformattato

< p > E ora un po ’ di t e s t o p r e f o r m a t t a t o :

< pre >

La f o r m a t t a z i o n e di

q u e s t o t e s t o non v i e n e m o d i f i c a t a n e l l a v i s u a l i z z a z i o n e

< / pre >

< / p >

(35)

Il testo in un documento pu`o essere usato come intestazione o titolo (dell’intero documento, di una sezione, ecc...);

HTML prevede 6 livelli di importanza per le intestazioni, corrispondenti ai tag <h1>,<h2>,...,<h6>;

La visualizzazione (dimensioni del font, ecc...) pu`o dipendere dal browser usato.

< h1 > T i t o l o con h1 < / h1 >

< h2 > T i t o l o con h2 < / h2 >

< h3 > T i t o l o con h3 < / h3 >

< h4 > T i t o l o con h4 < / h4 >

< h5 > T i t o l o con h5 < / h5 >

< h6 > T i t o l o con h6 < / h6 >

< p > T e s t o s e m p l i c e < / p >

(36)

Il testo semplice: allineamento

Spesso `e preferibile centrare o allineare il testo (e non solo) a destra;

Tradizionalmente si pu`o centrare qualunque cosa usando <center>;

Alternativamente si pu`o usare il tag <div align=xxx> con xxx che pu`o essere left, right, center o justify ;

I Il tag <div> in generale serve per raggruppare una porzione del documento a cui applicare un’unica formattazione (non vedremo...);

< p >

< c e n t e r > T e s t o c e n t r a t o < / c e n t e r >

< div a l i g n = c e n t e r >

T e s t o c e n t r a t o < / div >

< div a l i g n = r i g h t >

T e s t o a l l i n e a t o a d e s t r a < / div >

< / p >

(37)

Spesso `e comodo inserire linee orizzontali per separare porzioni di testo semplicemente usando <hr>;

Questo tag crea una linea orizzontale larga quanto l’intera finestra del browser.

I si ridimensiona automaticamente ridimensionando la finestra

< p > P r i m a p a r t e di un t e s t o che v o g l i a m o s e p a r a r e con una b e l l a r i g a o r i z z o n t a l e . < / p >

< hr >

< p > S e c o n d a p a r t e del n o s t r o t e s t o .

< / p >

(38)

Il testo semplice: un esempio completo (1)

< h t m l >

< h e a d > < t i t l e > M a n u a l e per l ’ u t e n t e < / t i t l e > < / h e a d >

< b o d y >

< c e n t e r > < h1 > M a n u a l e per l ’ u t e n t e < / h1 > < / c e n t e r >

< hr >

< h2 > I n t r o d u z i o n e < / h2 >

< p > G r a z i e per a v e r s c e l t o il n o s t r o p r o d o t t o . A v e t e f a t t o un ’ o t t i m a scelta , non c ’ e ’ che d i r e ... < / p >

< hr >

< h2 > Il p r i m o u t i l i z z o < / h2 >

< p > P r i m a di a c c e n d e r e il p r o d o t t o e ’ b e n e p o r r e a t t e n z i o n e al f a t t o che < s t r o n g > p o t r e b b e e s p o l d e r e < / s t r o n g > . T u t t a v i a cio ’ a c c a d e a b b a s t a n z a r a r a m e n t e . Ad o g n i m o d o :

< pre >

Non ci r i t e n i a m o

r e s p o n s a b i l i per e v e n t u a l i

d a n n i p r o c u r a t i a c o s e o p e r s o n e !

< / pre >

< / p >

< hr >

< / b o d y >

< / h t m l >

(39)

(40)

Le liste (1)

HTML prevede tre tipi di liste:

liste non ordinate (unordered lists) liste numerate (ordered lists) liste di definizioni (definition lists)

La sintassi delle liste non ordinate e numerate `e simile:

L’intera lista `e racchiusa in <ul> (per liste non ordinate) o in <ol>

(per liste numerate);

Ogni elemento `e racchiuso in <li> (per entrambi i tipi di lista) –

</li> pu`o essere omesso.

(41)

< ul >

< li > Q u e s t o e ’ il p r i m o e l e m e n t o d e l l a l i s t a non o r d i n a t a

< li > Q u e s t o e ’ il s e c o n d o e l e m e n t o d e l l a l i s t a non o r d i n a t a

< li > Q u e s t o e ’ il t e r z o e l e m e n t o d e l l a l i s t a non o r d i n a t a

< / ul >

< ol >

< li > Q u e s t o e ’ il p r i m o e l e m e n t o d e l l a l i s t a n u m e r a t a

< li > Q u e s t o e ’ il s e c o n d o e l e m e n t o d e l l a l i s t a n u m e r a t a

< li > Q u e s t o e ’ il t e r z o e l e m e n t o d e l l a l i s t a n u m e r a t a

< / ol >

(42)

Le liste (3)

La sintassi delle liste di definizioni `e la seguente:

L’intera lista `e racchiusa in <dl>;

Ogni elemento `e composto da due parti:

I Il termine definito per il quale si usa il tag <dt>

I La descrizione del termine per il quale si usa il tag <dd>

I La chiusura di <dt> e <dd> `e opzionale

< dl >

< dt > T e r m i n e 1

< dd > D e s c r i z i o n e d e t t a g l i a t a del t e r m i n e n u m e r o 1

< / dl >

(43)

Nei documenti HTML si possono inserire dati che hanno una naturale rappresentazione come tabelle tramite il tag <table>;

Le tabelle vengono spesso utilizzate anche come strumento di organizzazione della visualizzazione (layout) dei contenuti della pagina;

I per questo il tag <table> (e i tag relati) prevedono un sacco di opzioni di formattazione;

I L’uso di tabelle come strumento di layout `e per`o deprecato (nelle pagine web professionali si dovrebbero invece usare i fogli di stile CSS)

(44)

Le tabelle (1)

La struttura di base di una tabella `e la seguente:

L’intera tabella `e racchiusa nel tag <table> che contiene:

una lista di righe, ogniuna racchiusa nel tag <tr>, che a sua volta contiene:

una lista di elementi (uno per ogni colonna) racchiusi nel tag <td>

< t a b l e >

< tr >

< td > c e l l a A1 < / td >

< td > c e l l a B1 < / td >

< td > c e l l a C1 < / td >

< / tr >

< tr >

< td > c e l l a A2 < / td >

< td > c e l l a B2 < / td >

< td > c e l l a C2 < / td >

< / tr >

< tr >

< td > c e l l a A3 < / td >

< td > c e l l a B3 < / td >

< td > c e l l a C3 < / td >

< / tr >

< / t a b l e >

(45)

Alcune celle possono anche rappresentare titoli di righe o colonne:

per queste si usa <th> (table head) al posto di <td> (table data) la formattazione di queste celle `e solitamente diversa dalle altre (a discrezione del browser)

< t a b l e >

< tr >

< th > < !- - c e l l a v u o t a in a n g o l o - -> < / th >

< th > A < / th > < th > B < / th > < th > C < / th >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td > < td > c e l l a B1 < / td >

< td > c e l l a C1 < / td >

< / tr >

. . . .

< tr >

< th > 3 < / th >

< td > c e l l a A3 < / td > < td > c e l l a B3 < / td >

< td > c e l l a C3 < / td >

< / tr >

< / t a b l e >

(46)

Le tabelle (3)

E’ anche possibile specificare celle che spaziano su pi`u righe o colonne:

usando gli attributi rowspan e colspan del tag <td>

il valore degli attributi `e il numero di righe o colonne su cui spaziare

< t a b l e >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< td c o l s p a n =2 > c e l l a B1 + C1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< td r o w s p a n =2 > c e l l a A2 + A3 < / td >

< td > c e l l a B2 < / td > < td > c e l l a C2 < / td >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(47)

E’ possibile definire il bordo di una tabella tramite l’attributo border del tag <table>;

Il valore dell’attributo `e lo spessore del bordo espresso in pixel

< t a b l e b o r d e r =2 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(48)

Le tabelle: aspetti di formattazione (2)

Gli attributi width e height specificano larghezza e altezza della tabella (in pixel o in % sulle misure della finestra del browser)

I Con un valore percentuale la tabella si ridimensiona automaticamente quando si ridimensiona la finestra del browser

< t a b l e b o r d e r =2 w i d t h = 9 5 % h e i g h t = 2 0 0 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(49)

L’attributo cellspacing specifica lo spazio tra le celle (in pixel) L’attributo cellpadding specifica lo spazio vuoto tra il bordo di una cella e il suo contenuto (in pixel)

< t a b l e b o r d e r =2 c e l l s p a c i n g =3 c e l l p a d d i n g =8 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(50)

Le tabelle: aspetti di formattazione (4)

Gli attributi align e valign possono essere usati in <table>, <tr> e

<td> per specificare l’allineamento orizzontale e verticale del testo nella tabella, in una riga o in una cella;

I Valori per align: left,right,center;

I Valori per valign: top,middle,bottom;

< t a b l e b o r d e r =2 c e l l s p a c i n g =3 c e l l p a d d i n g =8 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td a l i g n = " r i g h t " > c e l l a A1 < / td >

< / tr >

< tr a l i g n = " c e n t e r " v a l i g n = " top " >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >Paolo Milazzo (Universit`a di Pisa) HTML A.A. 2010/2011 50 / 78

(51)

Un’immagine pu`o essere inserita tramite il tag <img>

Il tag <img> prevede solo attributi (non un contenuto) ed ha il formato

dove:

I url `e un riferimento all’immagine che si vuole inserire

I xxxx `e una breve descrizione dell’immagine che viene visualizzata (di solito) al posto dell’immagine in alcuni casi (url sbagliata o immagini disattivate nel browser) o quando si passa con il mouse sull’immagine stessa.

< img src = " t o r r e . j p e g "

alt = " La t o r r e di P i s a " >

(52)

Le immagini (2)

E’ anche possibile specificare le dimensioni di un’immagine (larghezza e altezza) usando gli attributi width e heigth

Tali attributi prendono (di default) valori espressi in pixels come segue:

<img src="url" alt="xxxx"

width="200" height="150">.

E’ buona norma indicare le

dimensioni di un’immagine in modo che il browser possa riservare lo spazio durante il caricamento della pagina (il layout della pagina non cambia durante il caricamento)

< img src = " t o r r e . j p e g "

alt = " La t o r r e di P i s a "

w i d t h = " 200 " >

(53)

La caratteristica particolare degli ipertesti `e di poter contenere collegamenti (link) tra le varie parti di un documento

Il modo pi`u semplice per realizzare collegamenti ipertestuali in HTML

`

e tramite l’uso di “ancore”

Le ancore possono essere usate in due modi:

I per riferire a un documento HTML esterno, tramite la sua URL

I per riferire a una parte diversa dello stesso documento HTML (e.g. a una sotto-sezione, all’inizio del documento, ecc...)

Le ancore si definiscono usando il tag <a>

(54)

I collegamenti (link) ipertestuali (2)

Per creare un link a un documento HTML esterno `e sufficiente specificarne l’URL nell’attributo href del tag <a>

Una volta visualizzato nel browser, tutto il contenuto del tag <a>

diventer`a “cliccabile”, e solitamente il browser lo mostrer`a usando uno stile diverso dal resto del documento (e.g. sottolineato e colorato – se testo)

L’utente potr`a seguire il link (ossia, scaricare il documento HTML dall’URL specificata) cliccando sul contenuto del tag <a>

E c c o un l i n k al

< a h r e f = " h t t p :// www . r e p u b b l i c a . it " >

s i t o di r e p u b b l i c a < / a > .

(55)

Quando si vuole riferire a un documento diverso, ma dello stesso sito (nello stesso file system) si pu`o usare un URL relativa

Questo rende facile “spostare” un intero sito da una directory del file system ad un’altra

I se si sposta l’intera directory contenente tutti di documenti HTML gli indirizzi relativi rimangono invariati

E c c o un e s e m p i o di

< a h r e f = " i n d e x . h t m l " > l i n k a un d o c u m e n t o n e l l a s t e s s a d i r e c t o r y < / a >

del d o c u m e n t o c o r r e n t e , un e s e m p i o di

< a h r e f = " s u b d i r / p a g i n a . h t m l " > l i n k a un d o c u m e n t o in una sotto - d i r e c t o r y < / a > e un e s e m p i o di

< a h r e f = " ../ i n d e x . h t m l " > l i n k a un d o c u m e n t o in una d i r e c t o r y s u p e r i o r e < / a > .

(56)

I collegamenti (link) ipertestuali (4)

E’ anche possibile creare link a parti diverse dello stesso documento HTML

I e.g. a una sotto-sezione, all’inizio del documento, ecc...

Per fare ciò è però necessario usare due volte il tag <a>

I La prima volta dove si vuole che il link appaia (ancora sorgente)

I La seconda volta nella parte del docuemento che deve essere raggiunta (ancora di destinazione)

L’ancora di destinazione dovr`a contenere un identificativo (una stringa) che sia univoca all’interno dell’intero documento (attributo name di <a>)

L’ancora sorgente user`a tale identificativo per riferire precisamente alla destinazione (attributo href di <a>)

(57)

< a n a m e = " i n i z i o " / >

< p >

Q u e s t a p a g i n a e ’ c o m p o s t a di due p a r t i : la < a h r e f = " # p r i m a p a r t e > p r i m a parte </ a >

e la < a h r e f = " # s e c o n d a p a r t e " > s e c o n d a parte </ a >

</ p >

< hr >

< a n a m e = " p r i m a p a r t e " / >

< h3 > P r i m a parte </ h3 >

<p > Q u e s t a e ’ la p r i m a parte </ p >

<p > < a h r e f = " # i n i z i o " > T o r n a all ’ i n i z i o d e l l a pagina </ a > </ p >

< hr >

< a n a m e = " s e c o n d a p a r t e " / >

< h3 > S e c o n d a parte </ h3 >

<p > Q u e s t a e ’ la s e c o n d a parte </ p >

<p > < a h r e f = " # i n i z i o " > T o r n a all ’ i n i z i o d e l l a pagina </ a > </ p >

(vedere l’esempio links-interni.html)

(58)

I collegamenti (link) ipertestuali (6)

Altre cose riguardo i collegamenti ipertestuali:

Tutto ci`o che si trova all’interno del tag <a> diventa cliccabile, non solo il testo:

I anche immagini, intere tabelle, ecc...

Si pu`o anche specificare che il documento riferito da un link debba essere aperto in una nuova finestra del browser tramite l’attributo target di <a>

I il valore da dare all’attributo `e blank

Vedremo altre funzionalit`a e altri valori di questo attributo quando faremo i frames HTML

(59)

3 HTML di base

Tabelle

Immagini

Forms

(60)

Frames (1)

HTML (versione 4) consente di visualizzare pi`u documenti nella stessa finestra del browser attraverso l’uso diframes

L’uso dei frame in HTML prevede la presenza di un documento principale (detto frameset document) che definisce la strutturazione in frames (sotto-aree) della finestra del browser e contiene i

riferimenti delle pagine da richiamare nei vari frames

Le pagine web richiamate nei vari frames sono normali documenti HTML

E’ prevista una minima forma di interazione tra i frames, tipicamente un link presente in un frame pu`o essere aperto in un altro frame (tipico esempio: frame a lato della finestra con indice delle pagine del sito)

(61)

Un classico esempio:

(62)

Frames (3)

Il frameset document `e un documento HTML che al posto del

<body> ha un tag <frameset> che descrive la strutturazione in frames della pagina

Il tag <frameset> pu`o avere due attributi rows e cols che specificano le dimensioni di ogni riga e colonna. In questo modo si pu`o strutturare la pagina come una tabella

Le dimensioni possono essere espresse in pixel o in percentuale sulla dimensione della finestra del browser:

I <frameset cols="200,800"> indica una pagina con due colonne di larghezza 200 e 800 pixel

I <frameset cols="200,800,*"> indica una pagina con tre colonne in cui * rappresenta “tutto quello che avanza in larghezza”

I <frameset cols="30%,70%"> indica una pagina con due colonne

I <frameset cols="50%,50%" rows="50%,50%"> indica una pagina divisa in quattro parti uguali

(63)

Il contenuto del tag <frameset> `e una sequenza di tag <frame>, uno per ogni frame della pagina

Il tag <frame> ha due attributi principali: name che associa un nome al frame, e src che contiene l’url del documento HTML da caricare nel frame

I vari frame vengono associati alle posizioni nella griglia definita dal tag <frameset> in maniera ordinata da sinistra a destra e poi dall’alto verso il basso

All’interno del tag <frameset> ci pu`o essere un tag <noframes> che contiene un body HTML da visualizzare se il browser non supporta i frames

(64)

Frames (5)

Un semplice esempio di documento HTML con frames:

< h t m l >

< h e a d > < t i t l e > D o c u m e n t o con f r a m e s < / t i t l e > < / h e a d >

< f r a m e s e t c o l s = " 300 ,* " >

< f r a m e n a m e = " e l e n c o " src = " e l e n c o . h t m l " / >

< f r a m e n a m e = " n o t i z i e " src = " h t t p :// www . r e p u b b l i c a . it " / >

< / f r a m e s e t >

< / h t m l >

dove elenco.html potrebbe essere il seguente:

< h t m l >

< h e a d > < t i t l e > E l e n c o < / t i t l e > < / h e a d >

< b o d y >

< h3 > E l e n c o s i t i di n o t i z i e < / h3 >

< ul >

< li > R e p u b b l i c a < / li >

< li > C o r r i e r e d e l l a S e r a < / li >

< li > La S t a m p a < / li >

< / ul >

< / b o d y >

< / h t m l >

(65)

Il risultato:

(66)

Frames (7)

E’ possibile fare in modo che i link presenti in un frame vengano aperti in un altro frame o nell’intera pagina

Si usa l’attributo target di <a> specificando il nome del frame (attributo name di <frame>) in cui si vuole aprire il link

Ad esempio, modifichiamo elenco.html come segue:

< h t m l >

< h e a d > < t i t l e > E l e n c o < / t i t l e > < / h e a d >

< b o d y >

< h3 > E l e n c o s i t i di n o t i z i e < / h3 >

< ul >

< li > < a h r e f = " h t t p :// www . r e p u b b l i c a . it "

t a r g e t = " n o t i z i e " > R e p u b b l i c a < / a > < / li >

< li > < a h r e f = " h t t p :// www . c o r r i e r e . it "

t a r g e t = " n o t i z i e " > C o r r i e r e d e l l a S e r a < / a > < / li >

< li > < a h r e f = " h t t p :// www . l a s t a m p a . it "

t a r g e t = " n o t i z i e " > La S t a m p a < / a > < / li >

< / ul >

< / b o d y >

< / h t m l >

(67)

Il risultato:

(68)

Forms (1)

Fino ad ora abbiamo visto metodi per visualizzare contenuti di varia natura (testo, immagini, liste, tabelle, ecc..)

HTML prevede un metodo abbastanza semplice per inviare dati dal browser dell’utente al server: i form

Un form non `e altro che un modulo che pu`o essere riempito dall’utente attraverso il browser

Un form pu`o essere fatto di caselle di testo da riempire, scelte multiple, bottoni, ecc...

I dati raccolti tramite il form possono essere inviati ad un applicazione eseguita sul server oppure via email

(69)

Un form viene definito tramite il tag <form> che contiene, uno dopo l’altro, tutti gli elementi di cui `e composto (caselle di testo, scelte multiple, ecc...)

Un elemento di un form `e definito tramite il tag <input> che ha un attributo type che viene usato per specificare di quale tipo di elemento si tratti

I valori pi`u comuni per l’attributo type sono i seguenti:

I text - corrisponde a una casella di testo di una sola riga che pu`o essere riempita dall’utente

I password - simile a text, ma durante l’inserimento non visualizza i caratteri digitati (li sostituisce con asterischi o pallini)

I radio - definisce una scelta singola tra un numero finito di alternative

I checkbox - definisce una scelta multipla

Altri tag consentono di definire caselle di testo multilinea (<textarea>) e caselle di selezione (<select>)

(70)

Forms (3)

Il tag <input> serve in sostanza per assegnare un valore ad una variabile

Il nome della variabile viene specificato tramite l’attributo name Nel caso di una casella di testo il valore assegnato alla variabile `e il testo inserito dall’utente

Nel caso degli strumenti di scelta tra varie alternative il valore da assegnare `e inserito tramite l’attributo value

(71)

< f o r m >

U s e r n a m e : < i n p u t t y p e = " t e x t " n a m e = " u s e r " / > < br >

P a s s w o r d : < i n p u t t y p e = " p a s s w o r d " n a m e = " pwd " / >

< / f o r m >

< f o r m >

T i t o l o di s t u d i o < br >

< i n p u t t y p e = " r a d i o " n a m e = " t i t o l o "

v a l u e = " e l e m " > L i c e n z a E l e m e n t a r e < / i n p u t > < br >

v a l u e = " m e d i a " > L i c e n z a M e d i a < / i n p u t > < br >

v a l u e = " d i p l " > D i p l o m a < / i n p u t > < br >

v a l u e = " l a u r e a " > L a u r e a < / i n p u t >

< / f o r m >

< f o r m >

P a t e n t i di g u i d a < br >

< i n p u t t y p e = " c h e c k b o x " n a m e = " p a t e n t e A "

v a l u e = " A " > P a t e n t e A < / i n p u t > < br >

< i n p u t t y p e = " c h e c k b o x " n a m e = " p a t e n t e B "

v a l u e = " B " > P a t e n t e B < / i n p u t > < br >

< i n p u t t y p e = " c h e c k b o x " n a m e = " p a t e n t i "

v a l u e = " a l t r e " > A l t r e p a t e n t i < / i n p u t >

< / f o r m >

(72)

Forms (5)

Caselle di testo multi-linea possono essere definite tramite il tag

Il tag <textarea> prevede due attributi rows e cols che ne

specificano le dimensioni della casella (numero di righe e di colonne) Il contenuto del tag viene visulizzato all’interno della casella di testo (ovviamente `e modificabile)

< f o r m >

I n s e r i s c i un c o m m e n t o qui :

< t e x t a r e a r o w s = " 10 " c o l s = " 30 " >

No c o m m e n t .

< / t e x t a r e a >

< / f o r m >

(73)

L’esempio di scelta tra alternative visto prima con gli elementi di tipo radio pu`o essere realizzato in alternativa con una casella di scelta multipla (drop-down menu)

I Si usa il tag <select> che ha un attributo name per specificare il nome della variabile da assegnare

I Il tag <select> contiene una lista di tag <option>, uno per ogni possible valore tra cui scegliere

I Ogni tag <option> ha un attributo value che ne specifica il valore corrispondente

< f o r m >

< s e l e c t n a m e = " t i t o l o " >

< o p t i o n v a l u e = " e l e m " > L i c e n z a E l e m e n t a r e < / o p t i o n >

< o p t i o n v a l u e = " m e d i a " > L i c e n z a M e d i a < / o p t i o n >

< o p t i o n v a l u e = " d i p l " > D i p l o m a < / o p t i o n >

< o p t i o n v a l u e = " l a u r e a " > L a u r e a < / o p t i o n >

< / s e l e c t >

< / f o r m >

(74)

Forms (7)

Per ora abbiamo visto come raccogliere i dati dall’utente e associarli a variabili

Vediamo ora come inviare tali dati ad una applicazione eseguita sul server (o via email)

Per fare questo si utilizza un bottone “submit”, che si definisce tramite il tag <input> speficicando il tipo submit

La presenza del bottone submit richiede che nel tag <form> siano impostati un paio di attributi:

I action - specifica l’URL dell’applicazione sul server (o l’indirizzo email) a cui inviare i dati

I method - pu`o essere impostato a get o post e specifica il tipo di messaggio HTTP da usare per inviare i dati.

F Nel caso di get i dati vengono aggiunti all’URL dell’applicazione

F Nel caso di post i dati vengono allegati nel corpo del messaggio HTTP

(75)

Quando un bottone submit `e presente in un form e viene premuto dall’utente, tutti i dati inseriti vengono associati alle corrispondenti variabili e inviate all’applicazione (o indirizzo email) indicata dall’attributo action

Nel caso il destinatario sia un’applicazione (e.g. PHP) si usa solitamente il metodo get, a meno che:

I non si tratti di form molto complessi che renderebbero l’URL generata da get molto lunga

I non si tratti di dati confidenziali: l’url di un pacchetto HTTP ha pi`u visibilit`a del suo contenuto (e.g. rimane nella history del browser)

(76)

Forms (9)

Nell’esempio seguente (in cui si usa il metodo get), inserendo Paolo e Milazzo nei due campi e premendo Invia si redirige il browser alla pagina elenco telefonico.php?nome=Paolo&cognome=Milazzo

< f o r m a c t i o n = " e l e n c o _ t e l e f o n i c o . php " m e t h o d = " get " >

N o m e : < i n p u t t y p e = " t e x t " n a m e = " n o m e " / > < br >

C o g n o m e : < i n p u t t y p e = " t e x t " n a m e = " c o g n o m e " / > < br >

< i n p u t t y p e = " s u b m i t " v a l u e = " I n v i a " / >

< / f o r m >

(77)

Nell’esempio seguente (in cui si usa il metodo post), inserendo Paolo e Milazzo nei due campi e premendo Invia viene inviata una mail all’indirizzo (di fantasia) dimmi il numero@paginegialle.it contenente il seguente testo:

nome=Paolo cognome=Milazzo

Questo esempio mostra anche l’uso dell’attributo enctype di <form>

che contiene il tipo MIME dei dati trasmessi. Omettendolo il contenuto dell’email sarebbe nome=Paolo&cognome=Milazzo

< f o r m a c t i o n = " m a i l t o : d i m m i _ i l _ n u m e r o @ p a g i n e g i a l l e . it "

m e t h o d = " p o s t " e n c t y p e = " t e x t / p l a i n " >

N o m e : < i n p u t t y p e = " t e x t " n a m e = " n o m e " / > < br >

C o g n o m e : < i n p u t t y p e = " t e x t " n a m e = " c o g n o m e " / > < br >

< i n p u t t y p e = " s u b m i t " v a l u e = " I n v i a " / >

< / f o r m >

(78)

Forms (11)

Altri elementi che possiamo includere in un form tramite il tag <input>:

Bottoni di che resettano il form (type="reset")

Elementi per l’upload di file (type="file"), con la possibilit`a di specificarne il tipo mime usando l’attributo accept

Valori nascosti (type="hidden")

Altri bottoni (type="button") che possono essere usati per eseguire parti dinamiche del documento, ossia script (che vedremo in seguito)