Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dal Click al WebServer Visualizzare, caricare, creare e pubblicare una pagina Web
Protocollo di trasferimento di pagine di Ipertesto <ul><li>URL – Uniform Resource Locator </li></ul><ul><ul><li>http://www...
Domain Name System <ul><li>Il DNS organizza la struttura dell’indirizzo </li></ul><ul><li>Il DNS identifica il luogo dove ...
La richiesta di dati verso Internet <ul><li>La richiesta di connessione ad una pagina web corrisponde ad una richiesta di ...
Connessione alla rete Internet Protocolli di instradamento verso il webserver Google.it 10110010
Caricamento della pagina Web <html> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-...
Il percorso nella Rete London    Mountain View in 14ms Google.it in California Verificare il percorso su  http://www.visu...
HTML e Browser <ul><li>Il Browser  (Opera–Mozilla–IE–Mosaic …) </li></ul><ul><li>scarica i vari files che si trovano su un...
Standard HTML <ul><li>Non ho mai previsto che il codice sorgente di HTML (cioè la roba con le parentesi angolate) fosse vi...
Alcune regole per i TAG dell’HTML <ul><li>All'interno di ogni pagina è presente una serie di marcatori (i  TAG ), a cui vi...
Editor HTML <ul><li>Esistono programmi che permetto di inserire immagini, tabelle, frame, form e quant'altro in maniera pi...
Una semplice pagina web con OpenOffice Writer
Pubblicare una pagina Web <ul><li>Elementi indispensabili: </li></ul><ul><ul><li>Un dominio sul quale pubblicare le pagine...
Connessione FTP al web server
Accesso al Web Server Pagina di apertura del sito: se non diversamente specificato, digitando l’URL viene aperta la pagina...
 
Upcoming SlideShare
Loading in …5
×

Dal Click Al Web Server

1,471 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Dal Click Al Web Server

  1. 1. Dal Click al WebServer Visualizzare, caricare, creare e pubblicare una pagina Web
  2. 2. Protocollo di trasferimento di pagine di Ipertesto <ul><li>URL – Uniform Resource Locator </li></ul><ul><ul><li>http://www.google.it </li></ul></ul><ul><ul><li>identifica univocamente l'indirizzo di una risorsa in Internet, come un documento o un'immagine </li></ul></ul><ul><li>http – Hypertext Transfer Protocol </li></ul><ul><li>www – World Wide Web </li></ul><ul><li>google.it – DNS di secondo livello </li></ul><ul><li>DNS – Domain Name System </li></ul>www.google.it
  3. 3. Domain Name System <ul><li>Il DNS organizza la struttura dell’indirizzo </li></ul><ul><li>Il DNS identifica il luogo dove è presente la pagina richiesta </li></ul>.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
  4. 4. La richiesta di dati verso Internet <ul><li>La richiesta di connessione ad una pagina web corrisponde ad una richiesta di dati </li></ul><ul><li>Nel caso di connessione diretta al modem (home office) i dati vengono inviati verso la linea telefonica (ISDN - Adsl) o fibra ottica </li></ul><ul><li>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 </li></ul>10110010 10110010 Home office Local Area Network www.google.it www.google.it Modem/Router Modem/Router
  5. 5. Connessione alla rete Internet Protocolli di instradamento verso il webserver Google.it 10110010
  6. 6. Caricamento della pagina Web <html> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;> <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=&quot;padding-bottom:4px&quot; width=100%> <font size=-1> <a href=&quot;/url?sa=p&pref=ig&pval=3&q=http://www.google.it/ig%3Fhl%3Dit&sig=__G4FoAkG2BgZXFScY56sHYkwh_us=&quot; onmousedown=&quot;return rwt(this,'promos','hppphou:it_all','pro','1','__N21hwvXeDt_uNb15jaqHQsL00iU=','')&quot;>Home page personalizzata</a>&nbsp;|&nbsp;<a href=&quot;https://www.google.com/accounts/Login?continue=http://www.google.it/&hl=it&quot;>Accesso</a> </font> </div> <img src=&quot;/intl/it_it/images/logo.gif&quot; width=276 height=110 alt=&quot;Google&quot;> <br><br> <form action=/search name=f> <table border=0 cellspacing=0 cellpadding=4> ……… </table> <table cellspacing=0 cellpadding=0> <tr><td width=25%>&nbsp;</td> <td align=center> <input type=hidden name=hl value=it><input maxlength=2048 size=55 name=q value=&quot;&quot; title=&quot;Cerca con Google&quot;><br> <input type=submit value=&quot;Cerca con Google&quot; name=btnG> <input type=submit value=&quot;Mi sento fortunato&quot; name=btnI> </td> …… ... </center> </body> </html> <ul><li>La pagina web è ospitata sul Web Server di Google </li></ul><ul><li>La prima pagina e tipicamente un file dal nome: index.html </li></ul>
  7. 7. 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
  8. 8. HTML e Browser <ul><li>Il Browser (Opera–Mozilla–IE–Mosaic …) </li></ul><ul><li>scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo </li></ul><ul><li>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 </li></ul><ul><li>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. </li></ul><ul><li>E’ possibile visualizzare il codice HTML delle pagine che stiamo visitando. </li></ul>
  9. 9. Standard HTML <ul><li>Non 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 </li></ul><ul><li>(Tim Berners-Lee </li></ul><ul><li>Inventore del World </li></ul><ul><li>Wide Web) </li></ul><ul><li>HTML Hypertext Markup Language (&quot;Linguaggio di contrassegno per gli Ipertesti&quot;) non è un linguaggio di programmazione </li></ul><ul><li>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 &quot; tag &quot;. </li></ul><ul><li>I file che contengono pagine in html hanno tipicamente estensioni del tipo: .htm .html </li></ul>
  10. 10. Alcune regole per i TAG dell’HTML <ul><li>All'interno di ogni pagina è presente una serie di marcatori (i TAG ), a cui viene affidata la visualizzazione </li></ul><ul><li>Hanno differenti nomi a seconda della loro funzione </li></ul><ul><li>I tag vanno inseriti tra parentesi uncinate ( <TAG> ) </li></ul><ul><li>La chiusura del tag viene indicata con una &quot;/&quot; (&quot;slash“) </TAG> </li></ul><ul><li>Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma: </li></ul><ul><ul><li><TAG attributi>contenuto</TAG> </li></ul></ul><ul><li>Es.: (disporre un testo giustificato a destra): </li></ul><ul><ul><li><P align=&quot;right&quot;>testo</P> </li></ul></ul><ul><li>La struttura di un attributo è: attributo=&quot;valore&quot; </li></ul><ul><li>La struttura di un tag sarà: </li></ul><ul><ul><li><TAG attributo_1=&quot;valore1&quot; attributo_2=&quot;valore2&quot;>contenuto</TAG> </li></ul></ul><ul><li>Alcuni particolari tag non hanno contenuto (ad es. il tag delle immagini) </li></ul><ul><ul><li>La loro forma sarà dunque: </li></ul></ul><ul><ul><ul><li><TAG attributi> </li></ul></ul></ul><ul><li>Un esempio di immagine: </li></ul><ul><ul><li><IMG widht=&quot;20&quot; height=&quot;20&quot; src=&quot;miaImmagine.gif&quot; alt=&quot;alt&quot;> </li></ul></ul><ul><li>il tag non viene chiuso. Questo tipo di tag viene detto &quot;empty&quot;, cioè &quot;vuoto&quot;. </li></ul><ul><li>i tag possono essere annidati l'uno dentro l'altro </li></ul><ul><ul><li><TAG1 attributi>  contenuto 1 <TAG2 attributi>  contenuto 2  </TAG2> </li></ul></ul><ul><ul><li></TAG1> </li></ul></ul>
  11. 11. Editor HTML <ul><li>Esistono programmi che permetto di inserire immagini, tabelle, frame, form e quant'altro in maniera più intuitiva: si tratta degli editor visuali, editor WYSIWYG ( &quot;What you see is what you get&quot; , &quot;ciò che vedi è quello che ottieni&quot;). </li></ul><ul><li>Ad oggi gli editor visuali più utilizzati sono: </li></ul><ul><li>Dreamweaver della Macromedia: un editor molto potente e pieno di funzionalità, ma forse proprio per questo inizialmente difficile da usare. Sicuramente il migliore. </li></ul><ul><li>FrontPage della Microsoft: è l'editor che tutti solitamente utilizzano, perché incluso nel pacchetto Office. In realtà &quot;sporca&quot; molto il codice, visto che la sua attenzione è concentrata su Internet Explorer. </li></ul><ul><li>Golive di Adobe: negli ultimi anni ha perso notevoli quote di mercato, rimane tuttavia un editor serio e una valida alternativa a FrontPage </li></ul><ul><li>Ma anche la possibilità di salvare in HTML dai più diffusi programmi Office: Word – Write OpenOffice </li></ul>
  12. 12. Una semplice pagina web con OpenOffice Writer
  13. 13. Pubblicare una pagina Web <ul><li>Elementi indispensabili: </li></ul><ul><ul><li>Un dominio sul quale pubblicare le pagine es: www.mionome.it </li></ul></ul><ul><ul><li>Un accesso al webserver dove pubblicare le pagine </li></ul></ul><ul><ul><ul><li>Alcuni provider forniscono la possibilità di pubblicare la propria pagina direttamente (alice-tiscali-aruba…) </li></ul></ul></ul><ul><ul><ul><li>Connessione FTP al server </li></ul></ul></ul><ul><li>Client FTP </li></ul><ul><ul><li>Es: Ws-ftp CuteFtp SmartFtp </li></ul></ul>
  14. 14. Connessione FTP al web server
  15. 15. 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)

×