I principi del Web Il World Wide Web Il Web è un sistema basato su Internet che utilizza la tecnologia degli ipertesti per distribuire documenti, file, immagini,... Il Web è un sottoinsieme di Internet nasce all inizio degli anni 90 al CERN di Ginevra, come mezzo per la distribuzione e condivisione di documenti scientifici Tim Berners-Lee 1 I principi del Web Ipertesto e Ipermedia Ipertesto (Hypertext) testo t in cui sono presenti collegamenti (link) ad altri documenti - Fornisce un metodo di consultazione non sequenziale Ipermedia (Hypermedia) ipertesto con collegamenti a documenti testuali, immagini, suoni, filmati,... 2 1
I principi del Web Il browser Il browser web è lo strumento (il programma) che permette di navigare tra le pagine presenti in rete browser "storici": MS Internet Explorer e Netscape Navigator 3 I principi del Web URL URL = Uniform Resource Locator rappresenta l indirizzo i (unico) di un documento, pagina o file presente in Internet http://www.ncsa.uiuc.edu/general/internet/www/htmlprimerall.html metodo d accesso indirizzo del server percorso documento L HTTP (Hyper Text Transfer Protocol) è il protocollo utilizzato per la comunicazione via Web 4 2
I principi del Web Architettura client-server Server Client macchina che fornisce qualche tipo di servizio i (es. HTTP, FTP, ) software che gestisce qualche tipo di servizio detto anche daemon; sta in ascolto su determinate porte (es. di solito HTTP porta 80, Telnet porta 23, ) macchina che usufruisce di qualche tipo di servizio remoto es. PC dell utente software che utilizza qualche tipo di servizio remoto es. browser Web 5 I principi del Web architettura client-server Il Web si basa su una tipica architettura client-server macchine client (i computer degli utenti) ti) richiedono servizi i (le pagine) a una macchina server (il server Web) 6 3
I principi del Web Il protocollo HTTP = HyperText Transfer Protocol è il protocollo di comunicazione i utilizzato t per il Web si basa sul paradigma richiesta/risposta opera al livello applicazione Modalità di interazione 1. il client apre una connessione TCP con un server HTTP e invia una richiesta (in formato testo, cioè caratteri ASCII) 2. il server risponde inviando i dati (anche non testuali) al richiedente e chiude la connessione 7 I principi del Web il protocollo HTTP Richieste sono formate da: un metodo (es. GET, POST, PUT, ) un URL (es. www.unipv.it) una versione (es. 1.1) un messaggio MIME-like un eventuale corpo di dati GET http://www.unipv.it it HTTP/ 1.11 Accept: text/plain Accept: text/html User-Agent: MS Exporer 5.0 8 4
I principi del Web il protocollo HTTP Risposte sono formate da: vari headers (specificati secondo una sintassi MIME-like), contenenti, ad esempio, informazioni sull esito della richiesta, il tipo di dati che saranno restituiti, il corpo della risposta (es. il contenuto di una pagina HTML) HTTP/1.0 200 OK Content-Type: text/html Content-Length: 104... <HTML>...... </HTML> 9 I principi del Web MIME Multipurpose Internet Mail Extension sviluppato per allegare file di vario tipo ai messaggi E-mail usato anche per la comunicazione HTTP 7 tipi principali di dati testo, immagini, audio, video, messaggio, multipart, application Vari sottotipi es. text/plain, audio/basic, video/mpeg, application/msword, 10 5
I principi del Web MIME Es. E-mail con file PDF allegato Return-Path: <marco.porta@unipv.it> it> Received: from... Message-ID: <013301c4a7a8$628eda50$3e00a8c0@marte> Reply-To: "Marco Porta" <marco.porta@unipv.it> From: "Marco Porta" <marco.porta@unipv.it> To: "Marco Porta" <marco.porta@unipv.it> Subject: Prova Date: Fri, 1 Oct 2004 12:18:31 +0100 MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="---- =_NextPart_000_0130_01C4A7B0.C40856A0"......... This is a multi-part message in MIME format. ------ =_NextPart_000_0130_01C4A7B0.C40856A0 Content-Type: text/plain; charset="windows-1252" Content-Transfer-Encoding: 7bit Prova ------ =_NextPart_000_0130_01C4A7B0.C40856A0 Content-Type: application/pdf; name="stm-ing-1.pdf" Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename="stm-ing-1.pdf" JVBERi0xLjMNJeLjz9MNCjEgMCBvYmoNPDwgDS9U exblic9qywdlia0vugfyzw50idy4idaguian L1Jlc291cmNlcyAyIDAgUiANL0NvbnRlbnRzIDMg MCBSIA0vTWVkaWFCb3ggWyAwIDAgNTk1IDg0 11 Origini e caratteristiche dell'html... HTML = Hyper Text Markup Language è un linguaggio i di markup molto semplice, che non richiede alcuna conoscenza della programmazione - Dà una descrizione del documento Deriva da SGML (Standard Generalized Markup Language) un metalinguaggio per creare linguaggi Un documento HTML è un file di testo contenente la codifica di una pagina quindi una pagina Web può essere creata utilizzando un editor qualunque 12 6
... origini e caratteristiche dell HTML L HTML è stato creato con l obiettivo di essere device independent il suo scopo originario era quello di descrivere la struttura di un documento, non l aspetto (compito lasciato al browser) Ma il WWW si è diffuso molto rapidamente... dalle comunità scientifiche e militari si è esteso ad altri ambiti (ad esempio, quello commerciale...) Il linguaggio i è stato t quindi via via modificato per includere anche una descrizione della formattazione contro l intento originale... 13 I tag Specificano gli elementi strutturali in un documento HTML definiscono i come sarà visualizzata la porzione di testo t che includono, quali connessioni ci devono essere ad altri documenti, quali immagini o elementi multimediali devono essere visualizzati,... Sono racchiusi tra parentesi angolari es.: <body>, <h1>,... In genere, si usano a coppie ogni tag di apertura ha associato un corrispondente tag di chiusura (es.: <body>... </body>, <head>... </head>,...) 14 7
Un introduzione all HTML L ultima versione standardizzata è la 4.01 la specifica ufficiale si può trovare sul sito www.w3.org, del World Wide Web Consortium (l organo internazionale che si occupa della standardizzazione di tutto ciò che riguarda il Web) Sul Web (e non solo) è possibile reperire una quantità "sterminata" di materiale riguardante l'html e i linguaggi collegati 15 Struttura generale di un documento HTML <html> <head> <title>... </title>... </head> <body>...... </body> </html> 16 8
I tag base <html> dichiara che il file contiene codice HTML <head> identifica la sezione introduttiva del documento <title> specifica ca il titolo to o per il documento <body> definisce il corpo principale del documento 17 Heading e paragrafi Esistono sei livelli di heading hanno un significato logico (<h1> più importante, <h6> meno importante - il browser li visualizza in modo diverso) I paragrafi definiscono il testo normale il tag <p> non ha strettamente bisogno di un corrispondente tag di chiusura... però è meglio usarlo Gli spazi e i ritorni a capo non contano (non solo per <p>, ma anche nel resto del documento) Ogni volta che incontra il tag <p>, il browser, in genere, lascia una riga vuota... 18 9
Gli attributi Ai tag possono essere associati attributi Ad esempio, se voglio che il testo t di un paragrafo sia centrato: t <p align="center">questo è il testo del paragrafo Gli attributi definiscono delle proprietà per i tag possono essere più d uno e hanno la struttura nomeattributo="valoreattributo" Quelli deprecati non si dovrebbero usare... 19 Liste Tre tipi possibili: Unnumbered lists tag <ul> e <li> per creare liste non ordinate Numbered lists tag <ol> e <li> per creare liste ordinate Definition lists tag <dl>, <dt> e <dd> per creare liste di definizione Si possono anche avere liste annidate una dentro l altra 20 10
Testo preformattato Utile quando si vuole essere certi che gli spazi e i ritorni a capo vengano inseriti esattamente dove vogliamo il tag <pre> rappresenta l eccezione che conferma la regola... Utilizzato spesso per riportare codice di programmi i programmi scritti con linguaggi di programmazione ad alto livello includono generalmente delle indentazioni... 21 Line break e barre orizzontali Anchesel HTML lhtml ignora i ritorni a capo nel testo, è possibile forzarli attraverso il tag <br> Per separare zone diverse di uno stesso documento può essere utile utilizzare delle barre orizzontali per il tag <hr> si possono specificare gli attributi size e width <hr size="4" width="50%"> 22 11
Stili logici e stili fisici Stili logici danno un informazione sul tipo di contenuto (la loro rappresentazione è lasciata completamente al browser) Esempi: <em>, <strong>, <code>,... Stili fisici specificano l aspetto del contenuto (che il browser dovrà rispettare) Esempi: <b>, <i>,... 23 Sequenze di escape Servono per inserire nella pagina caratteri speciali che non possono essere utilizzati direttamente t perché hanno un significato particolare per l HTML Esempi: < = < > = > & = & è = è é = é È = È 24 12
Link... Permettono di creare collegamenti ad altri documenti Struttura: <a href="indirizzo">...</a> <a href="http://www.unipv.it">università di Pavia</a> I pathname possono essere anche relativi <a href="xxx/miofile.html">università di Pavia</a> 25... link È anche possibile creare collegamenti all interno dello stesso documento o a sezioni specifiche di un altro documento <a href="#sez1">sezione 1</a> crea un link a sez1 nel documento corrente <a href="miofile.html#sez1">sezione 1</a> crea un link a sez1 nel file MioFile.html sez1 sarà definito it da: <a name="sez1">questa è la sezione 1</a> 26 13
Link a indirizzi e-mail Permettono di aprire il programma per la composizione del messaggio con un clic <p> L ing. <a href="mailto:marco.porta@unipv.it">marco Porta</a> può essere contattato... </p> L ing. Marco Porta può essere contattato... 27 Includere immagini Si possono utilizzare immagini in formato GIF, JPEG e PNG attraverso il tag <img> (non richiede il tag di chiusura) <img src="miaimmagine.gif"> È possibile specificare le dimensioni anche se non è strettamente necessario... <img src="miaimmagine.gif" width="300" height="138"> È utile specificare anche testo alternativo 28 14
Il colore di sfondo della pagina Se nessun colore è specificato, il default è bianco o grigio il colore è impostato attraverso l attributo bgcolor del tag <BODY> <body bgcolor="yellow"> Esistono 16 colori testuali predefiniti (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) È possibile specificare il colore anche con la codifica esadecimale bgcolor="#02fc16" Attenzione: attributo deprecato! 29 Immagini di sfondo È possibile specificare un immagine da visualizzare come sfondo della pagina attraverso l attributo background del tag <BODY> <body background="miaimmagine.gif"> L immagine viene ripetuta automaticamente in modo che, indipendentemente dalle sue dimensioni, copra tutto lo sfondo Attenzione: attributo deprecato! 30 15
Link a elementi multimediali Un link può anche riferirsi a un immagine, un animazione,... basta specificare l elemento multimediale nell attributo href <a href="miaimmagine.gif">immagine 1</a> <a href="miofilmato.mov">filmato 1</a> Un immagine può anche essere un link <a href="miaimmagine.gif"> <img src="immaginepiccola.gif"> </a> 31 I font Con l HTML è possibile specificare il tipo di font da utilizzare per un certo elemento famiglia, colore, dimensione, Si utilizza il tag <font> con gli attributi face, color, size, Attenzione: tag deprecato! <font face="sans-serif" color="red" red size="+2"> <h1>questo è un titolo con carattere <em>sans-serif </em>, colore rosso e dimensione <EM>+2</EM> rispetto al font di default</h1> </font> 32 16
Tabelle... Permettono una suddivisione in righe e colonne utili per strutturare tt informazioni i i intrinsecamente i t tabellari Sono fondamentali per layout non banali della pagina consentono di strutturare la pagina in diverse aree Sono descritte in termini di righe e colonne tabella tag <table> righe tag <tr> colonne tag <td> e <th> 33... tabelle... Tabella con n righe e m colonne: <table> <tr> <td>riga 1, Colonna 1</td>... <td>riga 1, Colonna m</td> </tr>... <tr> <td>riga n, Colonna 1</td>... <td>riga n, Colonna m</td> </tr> </table> Celle riga 1 Celle riga n Riga 1 Riga n Tabella 34 17
... tabelle Attributi di <table> width larghezza; border bordo; align allineamento orizzontale; valign allineamento verticale; cellpadding spazio all interno delle celle; cellspacing spazio tra le celle; bgcolor colore di sfondo; background immagine di sfondo Attributi di <tr> align allineamento orizzontale; valign allineamento verticale; bgcolor colore di sfondo Attributi di <td> e <th> width larghezza; height altezza; bgcolor colore di sfondo; background immagine di sfondo; align allineamento orizzontale; valign allineamento verticale; colspan numero di colonne occupate; rowspan numero di righe occupate 35 HTML "avanzato" -I form... Permettono all utente di fornire degli input 36 18
... i form... Sono definiti attraverso il tag <form> Il tag <input> permette di creare vari tipi di controlli text finestrelle di input testuale checkbox opzioni selezionabili radiobutton opzioni mutuamente esclusive password finestrelle input password image immagini (es. bottoni disegnati) button bottoni submit bottoni invio form reset bottoni reset form file invio i file hidden dati nascosti 37... i form Altri tipi di input tag <button> bottoni (possono contenere immagini) i i) tag <textarea> aree per l immissione di testo (su più righe) tag <select> e <option> elenchi tag <label> etichette Una volta inseriti, i dati devono essere inviati a qualcuno tipicamente, a un server che li elaborerà (attributo action del tag <form>) Due metodi disponibili per l invio GET e POST (attributo method del tag <form>) 38 19
HTML "avanzato" - I frame... Permettono di suddividere la finestra del browser in più sottofinestre t Importante: per ragioni di usabilità e accessibilità, i frame andrebbero sempre evitati!! 39... i frame Si creano attraverso i tag <frameset> e <frame> ogni sottofinestra contiene un documento HTML diverso È possibile specificarne le caratteristiche se devono avere i bordi, lo spessore dei bordi, lo spazio tra un frame e l altro, se possono essere ridimensionati, se devono avere le barre di scorrimento,... attributi frameborder,, border,, framespacing del tag <frameset> attributi noresize, scrolling,... del tag <frame> 40 20
i frame Un esempio <HTML> <HEAD> <TITLE>Un semplice documento con frame</title> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="http://www.virgilio.it/"> <FRAME src="http://www.altavista.com/"> </FRAMESET> <FRAME src="http://www.google.com/"> <NOFRAMES> <P>Spiacente, questo sito utilizza i frame... </NOFRAMES> </FRAMESET> </HTML> 41 i frame E possibile fare in modo che cliccando su un link in un frame venga caricata una pagina in un altro frame il frame destinazione deve avere un nome <HTML> <HEAD> <TITLE>Frame e target</title> </HEAD> <FRAMESET rows= 50%,50% > <FRAME name= main src= file1.html > <FRAME src= file2.html > </FRAMESET> </HTML> file2.html <HTML> <HEAD> <TITLE>Frame e target</title> </HEAD> <BODY>... <A href= http://... target= main >xxx</a>... </BODY> </HTML> 42 21