Internet, Browser e HTML

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 4 HyperText Internet è una infrastruttura che collega tra loro un grandissimo numero di reti di calcolatori utilizzando il protocollo TCP/IP Appoggiandosi a questo protocollo vengono inviate informazioni codificate secondo altri protocolli, stabiliti dalle applicazioni utilizzate dagli utenti per generare le informazioni Uno dei protocolli di alto livello è l HyperText (HTTP), che consente l accesso a risorse distribuite su diversi host (computer) sulla rete con un approccio di tipo ipertestuale I documenti ipertestuali sono codificati secondo le specifiche dettate dallo standard HTML: HyperText Markup Language 5 Modalità di interazione 6 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) Unamacchina(client) ha bisogno di un servizio Un'altra macchina (server) fornisce quel servizio Il client deve contattare il server e chiedergli il servizio desiderato

7 Interazione 8 World Wide Web 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 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 9 World Wide Web 10 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 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,... 11 Identificazione delle risorse 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 12 Identificazione delle risorse 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

13 Identificazione delle risorse 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 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 15 li più comuni 16 li più comuni lo file:// tipo file locale esempio file:///c:/doc/index.html descrizione apre un file locale dal tuo PC lo file:// tipo file locale esempio file:///c:/doc/index.html descrizione apre un file locale dal tuo PC ftp:// mailto: File SMTP ftp://ftp.unimi.it/ mailto:lanzarotti@dsi.unimi.it apre una sessione di trasferimento file tra il tuo PC e un server remoto Permette di inviare un e-mail, se configurato) ftp:// mailto: File SMTP ftp://ftp.unimi.it/ mailto:lanzarotti@dsi.unimi.it apre una sessione di trasferimento file tra il tuo PC e un server remoto Permette di inviare un e-mail, se configurato) http:// HyperText http://homes.dsi.unimi.it/~lan zarot trasferimento di documenti scritti in HTML e JAVA. (lo principale del WWW). http:// HyperText http://homes.dsi.unimi.it/~lan zarot trasferimento di documenti scritti in HTML e JAVA. (lo principale del WWW). 17 li più comuni 18 li più comuni lo file:// tipo file locale esempio file:///c:/doc/index.html descrizione apre un file locale dal tuo PC lo tipo file:// file locale esempio file:///c:/doc/index.html descrizione apre un file locale dal tuo PC ftp:// mailto: File SMTP ftp://ftp.unimi.it/ mailto:lanzarotti@dsi.unimi.it apre una sessione di trasferimento file tra il tuo PC e un server remoto Permette di inviare un e-mail, se configurato) ftp:// mailto: File SMTP ftp://ftp.unimi.it/ mailto:lanzarotti@dsi.unimi.it apre una sessione di trasferimento file tra il tuo PC e un server remoto Permette di inviare un e-mail, se configurato) http:// HyperText http://homes.dsi.unimi.it/~lan zarot trasferimento di documenti scritti in HTML e JAVA. (lo principale del WWW). http:// HyperText http://homes.dsi.unimi.it/~lan zarot trasferimento di documenti scritti in HTML e JAVA. (lo principale del WWW).

19 Nomi host 20 Connessione diretta ad Internet in genere assumono la forma servizio/ macchina www ftp luogo google dsi.unimi dominio com it Per visitare un sito web con un browser, si deve specificarne l indirizzo (esplicitamente o selezionando un link) domini comuni org homes dominio it com dsi.unimi descrizione siti siti italiani commerciali it associazioni, organizzazioni, etc 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 net rete 21 Il successo del web 22 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 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 23 Il successo del web 24 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 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, )

25 Ipertesto 26 Ipertesto Un ipertesto è un testo che può essere letto sequenzialmente oppure seguendo i rimandi (link) associati alle sue diverse parti Il lettore può scegliere il percorso di lettura che preferisce, assecondando liberamente i suoi interessi In ogni punto del documento può comparire un collegamento (link) 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 27 Esempio di documento ipertestuale 28 Multimedialità Indica l insieme delle tecnologie finalizzate alla gestione integrata di informazioni basate su media differenti testo singole immagini immagini in movimento (animazioni, filmati) suoni programmi 29 Esempio di documento ipertestuale multimediale 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

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) 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) 33 Tag 34 Browser Molti tag hanno attributi speciali che permettono una scelta tra alcune opzioni Il valore dell attributo deve essergli assegnato: Esempio: <hr size= n width= m align= x > NOTA: i valori vanno racchiusi tra virgolette L uso di spazi, tabulazioni, maiuscole e minuscole ha il solo scopo di migliorare la leggibilità del codice Interpreta i TAG di HTML Formatta e visualizza i contenuti del documento nel modo specificato nei TAG Include oggetti complessi come immagini, suoni, animazioni 35 Struttura di un documento <title> Titolo della pagina </title> Altre informazioni generali sulla pagina Contenuto della pagina 36 Esempio 1: Intestazione <title>my first HTML document</title>

37 Attributi 38 Esempio 2: paragrafo 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". <title>esempio di Paragrafo</title> <p>primo Paragrafo.</p> 39 Esempio 3: sezioni (fino a 6 livelli) <title>esempio per gli elementi h1... h6</title> <h1>primo capitolo</h1> <p>questo costituisce il primo capitolo.</p> <h2>prima sezione del primo capitolo</h2> <p>questa costituisce essere una sezione.</p> <h3>prima sottosezione della prima sezione</h3> <p>questa costituisce una sottosezione.</p> <h1>secondo capitolo</h1> <p>questo costituisce il secondo capitolo.</p> 40 Esempio 4: Line Breaks <title>indirizzo</title> <p> Mario Rossi<br> Via Mazzini, 21<br> 20135 Milano<br> Italia </p> 41 Esempio 5: Preformatted text 42 Tag per formattare <pre> Scrivo il testo come mi pare: vado a capo e lascio gli spazi che voglio </pre> Titoli: <h1> </h1>,..., <h6> </h6> Paragrafi: <p [align= left center right ]>...</p> Fine riga: <br> Linea: <hr[size= n ][width= m ] [align= left center right ]> Testo a spaziatura fissa preformattato: <pre>...</pre> Allineamento: <div align = left right justify center > </div> <center>... </center>

43 NOTA: Entity Rappresentano in modo universale e indipendente dalla piattaforma i caratteri non coperti dalla codifica ASCII lettere accentate (è = è) lettere appartenenti ad altri alfabeti (&ccedil = ç) simboli matematici ( = ) A ogni simbolo è associato un nome scrivibile in caratteri ASCII, delimitato da & e ; 44 Tag per i caratteri Tipo caratteri: <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> 45 Commenti 46 Esempio È utile inserire commenti al codice per facilitarne la comprensione al momento di una rilettura o di una modifica Sintassi:  I commenti non vengono interpretati dal browser <title> Pagina vuota </title> <body bgcolor=#000000 text=#ffffff link=#ffffff> <! background nero, testo bianco, link bianchi> commento 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 48 Esempio 6: Liste (Unordered) <ul> <li>un esempio di lista,</li> <li>che comprende vari elementi,</li> <li>elencati in ordine.</li> </ul> <ul type=circle> <li> Primo elemento</li> <li> Secondo elemento</li> <li> Terzo elemento</li> </ul>

49 Liste (Ordered) 50 Liste (definition List) <ol> <li> Primo elemento</li> <li> Secondo elemento</li> <li> Terzo elemento</li> </ol> Liste Annidate: <ol> <li> Primo elemento</li> <ol type=a> <li> Secondo elemento</li> </ol> <li> Terzo elemento</li> </ol> <dl> <dt>primo Elemento</dt> <dd>definizione del primo elemento</dd> <dt>secondo Elemento</dt> <dd>definizione del secondo elemento</dd> </dl> 51 Liste ed elenchi 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. 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 52 Immagini 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) <img src=percorso percorso[height=h] ] [width[ width=w] [border=n]] [alt="testo alternativo ] [align=left center right top middle bottom]> 53 Percorso 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 SRC= sottocartella/immagine.gif URL assoluto: l immagine si trova sul Web SRC= "http://homes.dsi.unimi.it/~lanzarot/img.gif 54 Formato immagini I file che contengono immagini hanno formato JPEG, GIF (animate), PNG estensione.jpeg,.jpg,.gif,.png

55 Opzioni per le immagini 56 Esempio 7: Immagini <IMG SRC=immagine.gif...=... > ALT= VSPACE= WIDTH= w HEIGHT= h HSPACE= testo alternativo (se l immagine non è disponibile) numero di pixel attorno all immagine BORDER= n spessore del bordo intorno all immagine ALIGN= BOTTOM MIDDLE TOP LEFT RIGHT <title>esempio per l'elemento img</title> <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> 57 Collegamenti ipertestuali Sintassi: <a href="indirizzo URL"> testo </a> link Link ad un indirizzo di posta elettronica per l'invio di una e-mail <a href="mailto:nome@dominio"> nome </a> link 58 URL Assoluta: Collegamenti ipertestuali: Indirizzi URL (esempio 8) <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> Dove, da qualche parte è stato definito: <p id="frammento">questo paragrafo costituisce un frammento del presente documento. </p> 59 Tabelle 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> </td>) 60 Esempio 9: Tabelle <table>  <tr>  <th> Anno</th>  <th> Temperatura Media</th>  </tr>  <tr>  <td> 2001</td>  <td> 14º</td>  </tr>  <tr>  <td> 2004</td>  <td> 18º</td>  </tr>  </table>

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%) 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> 63 Tabelle 64 Frame Possiamo aggiungere una didascalia all a nostra tabella <caption>temperature medie calcolate negli anni 2001/2004/2007</caption> Attributi: align= bottom posiziona la didascalia sotto la tabella 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 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>