J0 1 Marco Ronchetti - Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento.

Presentazione sul tema: "J0 1 Marco Ronchetti - Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento."— Transcript della presentazione:

1 J0 1 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento HTTP e HTML HTML: evoluzione

2 J0 2 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento WWW 1990: La Web HTTP protocollo che permette di richiedere documenti ipertestuali da un server. HTML linguaggio di markup usabili per rendere documenti ovvero individuare e a abilitare link ipertestuali.

3 J0 3 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento HTML 2.0 Linguaggio basato su elementi di descrizione di caratteristiche (tag) e testo: la caratteristica viene applicata a tutto il testo compreso tra tag aperta e tag chiusa testo

4 J0 4 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento HTML Caratteristiche generali: Non è case sensitive Non tutte le tag aperte vengono chiuse Tutte le tag sconosciute vengono ignorate Tutti gli a capo vengono mutati in spazio Più spazi o tabulazioni vengono collassate in un singolo spazio

5 J0 5 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento HTML 2.0 La prima versione conforme alla sintassi SGML

6 J0 6 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Struttura di un documento HTML Titolo della pagina Corpo della pagina, visualizzato dal browser Nota: lHTML non è case sensitive

7 J0 7 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Definizione di intestazione H1 …H6: sei livelli di intestazione Livello H1 Livello H2 Livello H3 Livello H4 Livello H5 Livello H6

8 J0 8 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tipi di lista ul Unordered list ol ordered list primo secondo terzo dir directory list (deprecata) menu menu list (deprecata) primo secondo terzo

9 J0 9 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tipi di lista Liste di definizione DL DT:Definition Term DD: Definition Entry SGML Standard Generalized Markup Language HTML Hypertext Markup Language XML Extensible Markup Language

10 J0 10 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tipo di carattere Bold Italic Teletype Carattere normale Carattere Bold Carattere Teletype Notare la sequenza Notare gli a capo

11 J0 11 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Caratteri speciali < si scrive< > si scrive > & si scrive & I caratteri definiscono apertura e chiusura delle tag, Quindi non possono in essere inclusi nel testo. Per risolvere il problema si introduce una sintassi speciale:

12 J0 12 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tipologie di frase Carattere normale emphasized strong code a=1 b=2 variable sample citazione

13 J0 13 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Elementi di formattazione Esempi di uso di formattazione Questo e'un paragrafo Questo e'un esempio di forzatura di un a capo Linea Orizzontale testo testo indentato continua il testo

14 J0 14 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Elementi di formattazione Esempio di testo con formattazione forzata class demo { public static void main(String a[]) { System.out.println("Hello"): } Notare la preservazione degli a capo

15 J0 15 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Meta data Nella sezione head: Indicazioni per i robots Url di base del documento corrente

16 J0 16 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Link e interni ed esterni Vi si possono trovare ulteriori dettagli … Ecco i dettagli Vi si possono trovare ulteriori dettagli Link interno Link esterno Eccone una foto <img src=URL alt=Vista dal basso align=top/bottom/center>. Immagini Deprecato!

17 J0 17 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Mappe clickabili Identifica un eseguibile sul server Vedi anche le estensioni HTML 3.2 Mostra la figure italia.gif e passa al server le coordinate (x,y) del punto su cui si é clickato

18 J0 18 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Forms Danno allutente la possibilità di inviare informazioni al Web server La tag FORM definisce il modulo e ha il seguente attributi: Lattributo ACTION identifica il programma che processa il modulo Lattributo ENCTYPE specifica tipo MIME usato per passare dati al server (Es. Text/html) Inoltre comprende varie sotto-tag: Può contenere diverse tag per la raccolta dei dati Una tag INPUT devessere di tipo SUBMIT per la spedizione dei dati Una tag INPUT può essere di tipo RESET per lannullamento dei dati inseriti

19 J0 19 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Form - input Scrivi il tuo nome Invia una url di tipo http://…/cgi-bin/elabora?a=MarcoRonchetti&b=…

20 J0 20 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Form – input type=radio Fai la tua scelta: <Input type="radio" name="tipo" value="auto" checked>Auto <Input type="radio" name="tipo" value="bus">Bus <Input type="radio" name="tipo" value="camion">Camion <Input type="radio" name="colore" value="rosso">Rosso <Input type="radio" name="colore" value="argento" checked>Argento

21 J0 21 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Form – input type=checkbox - select Fai la tua scelta: <Input type="checkbox" name="tipo" value="auto" checked>Auto <Input type="checkbox" name="tipo" value="bus">Bus <Input type="checkbox" name="tipo" value="camion">Camion Rosso Argento

22 J0 22 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Form – textarea Scrivi i tuoi commenti: <Textarea name="commenti" rows="4" columns="14"> Spiega in questo spazio la tua opinione Notare gli spazi

23 J0 23 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento HTML 3.2 Ampiamente supportato dalla maggior parte dei browser e degli editor HTML Aggiunge supporto per le tabelle, Applets, stilizzazione del testo, client-side image-based linking e per la strutturazione del documento.

24 J0 24 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Trattamento delle immagini Vengono introdotte evoluzione di allineamento usando lattributo Align: a top, bottom, center si aggiungono left e right Nuovi attributi includono: Border (spessore del bordo attorno allimmagine) Vspace (spazio extra in verticale) Hspace (spazio extra in orizzontale) Width (larghezza dellimmagine) Height (altezza dellimmagine) Informa il browser delle dimensioni così da permettere la formattazione della pagina prima che lmmagine sia scaricata

25 J0 25 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Trattamento delle immagini Viene introdotta la gestione delle immagini clickabili sul lato client... <area shape="rect" coords=150,50,250,150" href="rect.html" alt="scatola"> <area shape="circle" coords=250,350,50" href="wheel.html" alt="ruote"> 50 150 250 50

26 J0 26 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tabelle Bordi: nessun bordo Nessun bordo, ma spazio per bordo allocato Bordo di dimensione 10 Corrisponde a border=1 Spaziatura tra le celle: Default = 2 Titolo: Titolo

27 J0 27 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tabelle Le tabelle sono strutture basate sulle righe Ogni righe di dati è inclusa in un elemento Ogni cella è inclusa in un elemento (intestazione) oppure (dato) Larghezza e altezza di una cella possono essere suggeriti con gli attributi Width e Height. Il contenuto di ogni cella può essere allineato orizzontalmente (align=left,center,right) e verticalmente (valign=top,center,bottom)

28 J0 28 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tabelle Genere ogni cella occupa unarea individuata da una colonna e una riga, mai possibile fare in modo che una cella si estenda su più colonne e/o righe Usando di attributi colspan e rowspan.

29 J0 29 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tabelle LIVELLI DI PERICOLO colore stato Livello rosso Pericolo 1 giallo ok 2 verde 3

30 J0 30 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Tabelle

31 J0 31 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Supporto di Java Questo Browser non supporta le applets Deprecato in HTML 4.0

32 J0 32 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Stilizzazione del testo Viene introdotto un parametro applicabile alla maggior parte delle tag: ALIGN=LEFT-CENTER-RIGHT e la tag CENTER che ha funzione analoga Viene introdotta una tag per raggruppare elementi di testo a cui applicare gli stessi parametri: DIV

33 J0 33 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Stilizzazione del testo Inizio Hello Paragrafo Testo centrato Bye Fine

34 J0 34 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Stilizzazione del testo: Body <body bgcolor=#FF0000" colore dello sfondo - deprecato background=URL immagine di sfondo - deprecato text =#0000FF colore del testo - deprecato link=#00FF00" colore dei link – sconsigliato vlink =#00FF00 colore dei link visitati – sconsigliato > …

35 J0 35 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Stilizzazione del testo: Font <font face="Times Roman", serif" color="Red" size="18"> Hello Deprecato in HTML 4.0 Nota: alternativamente si possono fare resize incrementali: size=+2">

36 J0 36 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Ufficializzazione Le tag SCRIPT e STYLE vengono ufficializzate, anche se ancora non viene definito lesatto funzionamento delle stesse. SCRIPT introduce la possibilità di avere codice La cui esecuzione è a carico dal browser (es. Javascript) STYLE introduce il concetto di formattazione da applicare al documento separatamente dal contenuto del documento stesso

37 J0 37 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento HTML 4.0 Rilasciato nel dicembre 97 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4.strict.dtd> Standardizza il supporto dei frame, estende il modello di tabelle, estende il modello dei form, aggiunge levidenziazione della variazione di contenuto, lidentificazione di oggetti generalizzati non HTML, alcune generali descrizioni di testo. Formalizza luso di elementi script e style. Per la prima volta la definizione dello standard precede limplementazione!

38 J0 38 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Script Identifica un contenitore di codice riconoscibile ed eseguibile da parte del browser. <!-- function ciao() { alert(hello world) } //--> La funzione è attivabile da eventi associati con elementi Visualizzati (Onmouseover…)

39 J0 39 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Style Identifica un contenitore di un foglio di stile. Va incluso solo nella sezione a {color:red} p {font-size:18}

40 J0 40 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Stilizzazione del testo Vengono introdotti attributi applicabili alla maggior parte delle tag: ID fornisce allelemento un nome tramite il quale può essere referenziato TITLE associo una descrizione allelemento. Normalmente non è visibile. CLASS dichiara lappartenenza dellelemento ad un gruppo (classe) usabile per definirne caratteristiche comuni. STYLE attribuisce uno stile allelemento. LANG dichiara una lingua per lelemento DIR specifica la direzione della scrittura (ltr o rtl)

41 J0 41 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Stilizzazione del testo: ID e STYLE Paragrafo su trento... Vedi Trento...

42 J0 42 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Descrizione del testo...talk to Mr. Smith...there are eight seven days left to Christmas...the WWW exploded in 1995 Amleto disse: Essere o non essere Abbreviation (*) Delete/insert Quote (*) Acronimo (*) (*) Ad uso dei robot

43 J0 43 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Miglioramenti alle Tabelle Nelle tabelle viene introdotto il concetto di: HeaderTHEAD BodyTBODY FooterTFOOT Se la tabella diventa molto grande, lo scorrimento (scroll) avviene solo sul Body mantenendo fissi Header e Footer. Vi sono poi diverse utilità per formattare omogeneamente gruppi di celle (tag col e colgroup, attributi align di tr e di tbody) e per lavorare con sotto celle (tag entry)

44 J0 44 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Miglioramenti alle Form Viene introdotta la possibilità di usare il tasto TAB per muoversi tra i campi (lattributo Tabindex=n specifica lordine della visita) Viene data la possibilità di usare delle scorciatoie da tastiera (lattributo Accesskey=caratterespecifica il tasto da premere in combinazione con il tasto ALT) Si possono inoltre rendere attivi degli elementi di input tramite la Tag LABEL: nel codice che segue la digitazione di un RETURN nel campo di testo attiva lazione senza premere bottoni. Scrivi il tuo nome

45 J0 45 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Frames Usando i frames lo schermo é diviso in aree,a ciascuna delle quali è possibile far corrispondere un diverso documento (attributo src). Vanno usati con grande attenzione perché è possibile disorientare lutente e perché si possono fare pasticci di varia natura. Quando si usano i frames la sezione body viene sostituita da una sezione frameset che ha il compito di definire come la pagina viene suddivisa. Il contenuto delleventuale tag noframes viene ignorato, ed usato solo da browser non abilitati ai frames.

46 J0 46 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Frames Sul tuo browser i frames non sono riconosciuti. Una questo indirizzo: http:.../noframes

47 J0 47 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Frames Il frameset può essere organizzato per colonne (cols=…) oppure per righe (rows=…). Lo spazio può essere riservato in forma assoluta (50), percentuale (50%) o proporzionale (2*,*).

48 J0 48 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Frames Il frameset può anche essere chiamato ricorsivamente

49 J0 49 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Frames A ciascun frame si può associare un nome (attributo name). Il nome può poi essere utilizzato allinterno di un link (attributo target) per indicare che loggetto di quel link va visualizzato nella sottofinestra (frame) specificata. Il nome top è associato alla finestra intera. …

50 J0 50 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento Oggetti Viene introdotta la tag OBJECT per fornire al browser informazioni utili a caricare o visualizzare tipi di dati non supportati nativamente (applets, plugins, Controlli Active-X ecc.) Una eventuale tag PARAM al suo interno permette di passare parametri alla applet o plugin.

51 J0 51 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento HTML TESTING & REFERENCE Allindirizzo: http://www.w3.org/MarkUp/html-test/Overview.html trovate servizi di validazione delle pagine HTML Allindirizzo: http://www.w3.org/MarkUp/ trovate le pagine ufficiali sullHTML, sempre aggiornate.

52 J0 52 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento DHTML Per DHTML (Dynamic HTML) si intende linsieme di: HTML 4.0 CSS – CSS/P(Cascading Style Sheet) DOM(Document Object Model) ECMA(JavaScript)

53 J0 53 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento XHTML 1.0 Ridefinizione di HTML come unapplicazione XML invece che SGML. Vedere http://www.w3.org/TR/xhtml1/ Non introduce nuove caratteristiche rispetto ad HTML 4.0 ma pone dei nuovi vincoli.

54 J0 54 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento XHTML 1.0 - vincoli Ci DEVE essere una dichiarazione di tipo DOCTYPE Allinizio del documento:

55 J0 55 Marco Ronchetti - ronchet@dit.unitn.it ronchet@dit.unitn.it Basi di Dati Web e Distribuite – Laurea Specialitica in Informatica – Università di Trento XHTML 1.0 - vincoli Le tag e gli attributi devono esser scritti in minuscolo. Gli sttributi devono stare tra virgolette A ogni tag aperta deve corrispondere una tag di chiusura, o Le tag vuote devono essere terminate con una \ (Es. ) Il corpo degli script deve stare in una sezione CDATA <![CDATA[... unescaped script content... ]]>