dal click al web server
DESCRIPTION
TRANSCRIPT
Marco Muzzarelli – [email protected]
Dal Click al WebServer
Visualizzare, caricare, creare e pubblicare una pagina Web
Marco Muzzarelli – [email protected]
Protocollo di trasferimento di pagine di Ipertesto
• URL – Uniform Resource Locator– http://www.google.it
identifica univocamente l'indirizzo di una risorsa in Internet, come un documento
o un'immagine
• http – Hypertext Transfer Protocol
• www – World Wide Web• google.it – DNS di
secondo livello• DNS – Domain Name
System
www.google.it
Marco Muzzarelli – [email protected]
Domain Name System
• Il DNS organizza la struttura dell’indirizzo
• Il DNS identifica il luogo dove è presente la pagina richiesta
.it .uk .us .fr .pl .lv .lt .sp .sv .no .dk
…
Domini di 1° livello nazionali
Domini di 1° livello generici
.com .edu .gov .net .mil .org …
Es:www.comune.torino.it
Marco Muzzarelli – [email protected]
La richiesta di dati verso Internet
• La richiesta di connessione ad una pagina web corrisponde ad una richiesta di dati
• Nel caso di connessione diretta al modem (home office) i dati vengono inviati verso la linea telefonica (ISDN - Adsl) o fibra ottica
• Nel caso di connessione su rete locale i dati passano attraverso altri dispositivi e quindi vengono inviati verso la linea telefonica (ISDN - Adsl) o fibra ottica
10110010
10110010
Home office
Local Area Network
www.google.it
www.google.it
Modem/Router
Modem/Router
Marco Muzzarelli – [email protected]
Connessione alla rete Internet
Protocolli di instradamento verso il
webserver
Google.it
10110010
Marco Muzzarelli – [email protected]
Caricamento della pagina Web<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google</title></head><body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onLoad=sf() topmargin=3 marginheight=3><center><div align=right nowrap style="padding-bottom:4px" width=100%><font size=-1><a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.it/ig%3Fhl%3Dit&sig=__G4FoAkG2BgZXFScY56sHYkwh_us=" onmousedown="return rwt(this,'promos','hppphou:it_all','pro','1','__N21hwvXeDt_uNb15jaqHQsL00iU=','')">Home page personalizzata</a> | <a href="https://www.google.com/accounts/Login?continue=http://www.google.it/&hl=it">Accesso</a></font></div><img src="/intl/it_it/images/logo.gif" width=276 height=110 alt="Google"><br><br><form action=/search name=f><table border=0 cellspacing=0 cellpadding=4>
………
</table><table cellspacing=0 cellpadding=0><tr><td width=25%> </td><td align=center><input type=hidden name=hl value=it><input maxlength=2048 size=55 name=q value="" title="Cerca con Google"><br><input type=submit value="Cerca con Google" name=btnG><input type=submit value="Mi sento fortunato" name=btnI></td>……...
</center></body></html>
•La pagina web è ospitata sul Web Server di Google•La prima pagina e tipicamente un file dal nome: index.html
Marco Muzzarelli – [email protected]
Il percorso nella Rete
London Mountain View in 14ms
Google.it in California
Verificare il percorso su http://www.visualroute.com
Inserire l’indirizzo http://www.comune.torino.it
Marco Muzzarelli – [email protected]
HTML e BrowserIl Browser (Opera–Mozilla–IE–Mosaic …)•scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo •legge i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro; inoltre i vari files associati a quel documento (ad esempio le immagini, o i filmati in flash) vengono disposti secondo le indicazioni del codice html
•Linguaggio HTML (Hypertext Markup Language): spiegare al browser come i vari files relativi al documento in esame devono essere disposti all'interno della pagina visualizzata.•E’ possibile visualizzare il codice HTML delle pagine che stiamo visitando.
Marco Muzzarelli – [email protected]
Standard HTMLNon ho mai previsto che il codice sorgente di HTML (cioè la roba con le parentesi angolate) fosse visibile agli utenti. Un browser/editor avrebbe fatto vedere o editare all'utente soltanto il linguaggio di una pagina di ipertesto, come se stesse usando un word processor. Per me, e credevo anche per gli altri, l'idea di chiedere al pubblico di battere a mano le parentesi era inaccettabile quanto chiedere a qualcuno di scrivere un documento in Microsoft Word stendendo il formato in codice binario. Ma la leggibilità dell'HTML si rivelò una manna inaspettata. Con mia grande sorpresa molte persone si familiarizzarono alla svelta con i tag, e iniziarono a scrivere direttamente propri documenti in HTML (Tim Berners-LeeInventore del WorldWide Web)
• HTML Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") non è un linguaggio di programmazione
• Si tratta invece di un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti "tag".
• I file che contengono pagine in html hanno tipicamente estensioni del tipo: .htm .html
Marco Muzzarelli – [email protected]
Alcune regole per i TAG dell’HTML• All'interno di ogni pagina è
presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione
• Hanno differenti nomi a seconda della loro funzione
• I tag vanno inseriti tra parentesi uncinate (<TAG>)
• La chiusura del tag viene indicata con una "/" ("slash“) </TAG>
• Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
<TAG attributi>contenuto</TAG>
• Es.: (disporre un testo giustificato a destra):
<P align="right">testo</P>
• La struttura di un attributo è: attributo="valore"
• La struttura di un tag sarà:<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>
• Alcuni particolari tag non hanno contenuto (ad es. il tag delle immagini)
La loro forma sarà dunque:<TAG attributi>
• Un esempio di immagine:<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">
il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".
• i tag possono essere annidati l'uno dentro l'altro
<TAG1 attributi> contenuto 1<TAG2 attributi> contenuto 2 </TAG2></TAG1>
Marco Muzzarelli – [email protected]
Editor HTMLEsistono programmi che permetto di inserire immagini, tabelle, frame,
form e quant'altro in maniera più intuitiva: si tratta degli editor visuali, editor WYSIWYG ("What you see is what you get", "ciò che vedi è quello che ottieni").
Ad oggi gli editor visuali più utilizzati sono:• Dreamweaver della Macromedia: un editor molto potente e pieno di
funzionalità, ma forse proprio per questo inizialmente difficile da usare. Sicuramente il migliore.
• FrontPage della Microsoft: è l'editor che tutti solitamente utilizzano, perché incluso nel pacchetto Office. In realtà "sporca" molto il codice, visto che la sua attenzione è concentrata su Internet Explorer.
• Golive di Adobe: negli ultimi anni ha perso notevoli quote di mercato, rimane tuttavia un editor serio e una valida alternativa a FrontPage
• Ma anche la possibilità di salvare in HTML dai più diffusi programmi Office: Word – Write OpenOffice
Marco Muzzarelli – [email protected]
Una semplice pagina web con OpenOffice Writer
Marco Muzzarelli – [email protected]
Pubblicare una pagina Web
• Elementi indispensabili:– Un dominio sul quale
pubblicare le paginees: www.mionome.it
– Un accesso al webserver dove pubblicare le pagine
• Alcuni provider forniscono la possibilità di pubblicare la propria pagina direttamente (alice-tiscali-aruba…)
• Connessione FTP al server
• Client FTP– Es: Ws-ftp CuteFtp
SmartFtp
Marco Muzzarelli – [email protected]
Connessione FTP al web server
Marco Muzzarelli – [email protected]
Accesso al Web Server
Pagina di apertura del sito:se non diversamente specificato, digitando l’URL viene aperta la
pagina index.htm (.php) presente nella radice (root) del web server
Indirizzo IP corrispondente all’indirizzo DNS
Finestra di dialogo simile ad “esplora risorse”
File index.htm (.php)
Marco Muzzarelli – [email protected]