• Save
Storia ed Architettura di Internet e del web
Upcoming SlideShare
Loading in...5
×
 

Storia ed Architettura di Internet e del web

on

  • 4,675 views

Breve storia di Internet e principali nozioni sull'architettura world wide web

Breve storia di Internet e principali nozioni sull'architettura world wide web

Statistics

Views

Total Views
4,675
Slideshare-icon Views on SlideShare
4,237
Embed Views
438

Actions

Likes
7
Downloads
3
Comments
0

8 Embeds 438

http://appuntipsv.blogspot.it 403
http://www.slideshare.net 11
http://appuntipsv.blogspot.com 11
http://lms.complementisperimentali.eu 5
http://www.appuntipsv.blogspot.it 5
http://pinterest.com 1
http://translate.googleusercontent.com 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Storia ed Architettura di Internet e del web Storia ed Architettura di Internet e del web Presentation Transcript

    • Grafica per operatore web Ing. Vincenzo Failla [email_address]
      • Obiettivi:
        • acquisire competenze per usare correttamente i software ed i linguaggi più diffusi per la realizzazione di siti web
        • sapere eseguire la gestione e l’aggiornamento di siti web
    • Breve storia di Internet e del Web 1957 Lo Sputnik
    • Breve storia di Internet e del Web
    • Breve storia di Internet e del Web 1958 Defense Advanced  Research  Projects  Agency Dwight D. Eisenhower
    • Breve storia di Internet e del Web 1969 ARPANET
    • Breve storia di Internet e del Web University of Utah Salt  Lake  City University of California (UCLA) Los Angeles University of California (UCSB) Santa Barbara Stanford Research Institute Stanford
    • Breve storia di Internet e del Web Testimonia il successo della connessione con Stanford Research Institute Dettaglio del log dell’IMP di UCLA (Interface Message Processors, predecessori dei moderni router) 1969
    • Breve storia di Internet e del Web 1969
      • Jonathan Bruce Postel fonda IANA all’interno della Internet Society
      • IANA ha responsabilità nell'assegnazione degli indirizzi IP
      • Principio di Robustezza (RFC 793 – Sett. 1981)
      • I progettisti di software per il web devono scrivere software che aderiscono alle raccomandazioni ma che accettano input da fonti che possono anche non essere consistenti con le raccomandazioni.
      • Vengono pubblicati i primi Request For Comment (progetto ARPANET)
      Be conservative in what you do, be liberal in what you accept from others !!
    • Breve storia di Internet e del Web 1969 ARPANET USA
    • Breve storia di Internet e del Web 1970 ARPANET USA
    • Breve storia di Internet e del Web 1971
      • Ray Tomlinson inventa la posta elettronica
      • Viene presentata la prima versione di FTP
    • Breve storia di Internet e del Web 1972 ARPANET USA
    • Breve storia di Internet e del Web 1973 Robert Kahn e Vinton Cerf Transmission Control Protocol e Internet Protocol
    • Scheda: protocolli Cosa è un protocollo?
      • E’ una descrizione formale del formato dei messaggi e delle regole che devono seguire due entità affinché la comunicazione possa avvenire
      • Un protocollo può essere di basso livello (ad es: come spedire bit attraverso la rete) o di alto livello (come scambiarsi documenti, file o altri oggetti
      • La base di ogni protocollo è il concetto di standardizzazione
      • Esempi di protocollo:
    • Scheda: protocolli Esempio di protocollo: Lex vuole inviare una lettera riservata a Clark
      • Lex scrive la lettera (protocollo di alto livello) e la passa alla sua segretaria.
      • Lana prende la lettera,la imbusta aggiungendo il nome del destinatario e la scritta URGENTE.
      • La busta viene quindi passata all'Ufficio Postale
      • Raggiunge Casa Kent e viene consegnata a Martha
      • La mamma legge il destinatario e la consegna a Clark
      • L’Ufficio Postale trasporta la lettera nella modalità richiesta (urgente)
      Lex Luthor Lana, la segretaria Ufficio Postale locale Ufficio Postale locale Clark Kent Marta, la mamma
    • Scheda: protocolli I protocolli di Internet
    • Scheda: protocolli I protocolli di Internet Un indirizzo IP identifica ogni nodo della rete ed è un identificativo numerico L'indirizzo MAC identificare in modo univoco ogni scheda di rete. Le porte sono numeri (in TCP e UDP sono a 16 bit) utilizzati per identificare una particolare connessione di trasporto tra quelle al momento attive su un calcolatore Es: 00:23:6c:8b:5a:54 Es: 209.85.171.100 Es: porta 80
    • Scheda: protocolli I protocolli di Internet
    • Breve storia di Internet e del Web
      • 1973
      • Primo collegamento internazionale: London University College
      • 1976
      • La regina Elisabetta II in visita ad una base militare invia la sua prima email
    • Breve storia di Internet e del Web 1977 ARPANET USA
    • Breve storia di Internet e del Web MILNET MIlitary NETwork 1979 ARPANET
    • Breve storia di Internet e del Web 1979 USENET I gruppi di discussione: articoli e Netiquette Tom Truscott e Jim Ellis Kevin MacKenzie EMOTICONS Multi-user Dungeon Zork Roy Trubshaw e Richard Bartle Essex University
    • Scheda: Netiquette
      • Parola composta da “Net” ed “etiquètte”
      • Insieme di regole che disciplinano il comportamento di un utente di Internet su newsgroup, mailing list, forum, blog o e-mai
      • Il rispetto della netiquette non è imposto da alcuna legge, ma si fonda sul buon senso (common sense)
        • Spam
        • Mailbombing
        • Eccessivo cross-posting
        • Eccessivo multiposting sui newsgroup di Usenet.
      • Sono comportamenti contrari alla netiquette:
    • Scheda: Netiquette, un esempio 1. E’ bene leggere i messaggi che circolano per almeno due settimane prima di inviare propri messaggi in giro per il mondo: in tale modo ci si rende conto dell'argomento e del metodo con cui lo si tratta in tale comunità. 2. Leggere sempre le FAQ (Frequently Asked Questions) relative all'argomento trattato prima di inviare nuove domande. 3. Se si manda un messaggio, è bene che esso sia sintetico e descriva in modo chiaro e diretto il problema. 4. Non usare i caratteri tutti in maiuscolo nel titolo o nel testo dei tuoi messaggi, nella rete questo comportamento equivale ad "urlare" ed è altamente disdicevole. 5. Non divagare rispetto all'argomento del newsgroup o della lista di distribuzione; anche se talvolta questo comportamento è accettato o almeno tollerato aggiungendo il tag [OT] (cioè Off Topic che significa "fuori argomento") nell'oggetto del proprio messaggio. 6. Se si risponde ad un messaggio, evidenziare i passaggi rilevanti del messaggio originario, allo scopo di facilitare la comprensione da parte di coloro che non lo hanno letto, ma non riportare mai sistematicamente l'intero messaggio originale. Fare questo, in gergo, si dice Quotare. 7. Non condurre "guerre di opinione" sulla rete a colpi di messaggi e contromessaggi: se ci sono diatribe personali, è meglio risolverle via posta elettronica in corrispondenza privata tra gli interessati. 8. Non pubblicare messaggi stupidi o che semplicemente prendono le parti dell'uno o dell'altro fra i contendenti in una discussione. 9. Non pubblicare mai, senza l'esplicito permesso dell'autore, il contenuto di messaggi di posta elettronica o privati. 10. Non inviare tramite posta elettronica messaggi pubblicitari o comunicazioni che non siano stati sollecitati in modo esplicito. 11. Non essere intolleranti con chi commette errori sintattici o grammaticali. Chi scrive è comunque tenuto a migliorare il proprio linguaggio in modo da risultare comprensibile alla collettività.
    • Breve storia di Internet e del Web 1983 Domain Name System
    • Scheda: Domain Name System A cosa serve un DNS? Marco è un amico www.google.com è un sito Il numero di Marco è associato nella rubrica al nome Marco Cell L’indirizzo IP di Google è associato nei DNS al nome di dominio google.com Chiamando Marco Cell il cellulare userà il numero corrispondente contenuto in rubrica Digitando www.google.com il browser userà l’IP corrispondente contenuto nei DNS Quando si accende il cellulare viene caricata la rubrica in memoria Quando ci si collega ad Internet, l’ISP (Internet Service Provider) vengono assegnati dei DNS Marco ha un numero di cellulare Google ha un indirizzo IP Es: www.google.com 209.85.171.100 Telefonino Sito Internet DNS
    • Breve storia di Internet e del Web
      • 1984 – La rete conta ormai mille computer collegati.
      • 1986 – Nasce cnr.it , il primo dominio con la denominazione geografica dell'Italia. È il sito del Consiglio Nazionale delle Ricerche.
      • 1989 – Sono connessi 100mila computer
      • 1987 – Sono connessi circa 30mila computer
    • Breve storia di Internet e del Web 1990
      • Scompare la dizione Arpanet
          • Il primo server Web un  software  che  conserva  le  pagine  web  in  una  parte  del computer,  consentendone    l'accesso   ad  altri
        • Berners­Lee ideò:
          • un  editor  per   creare   dei   testi
          • il  linguaggio per trasformare i testi  in ipertesti: l'HTML
          • lo schema di indirizzo per i vari documenti: URI
          • Rende finalmente pubblica la prima versione del linguaggio che i  computer avrebbero usato per comunicare su Internet: HTTP
    • Breve storia di Internet e del Web
        • Si trattava dell’espansione di un progetto già in corso denominato “Enquire”
      1991
        • Berners­Lee presso il CERN (Centro Europeo di Ricerca Nucleare) pubblica il primo sito web annunciando così la nascita del World Wide Web
        • Inizia la definizione dei protocolli e dei linguaggi da usare su Internet
        • “ Enquire” era in realtà un sistema di condivisione di documenti più simile a wikipedia
    • Scheda: paradigma Client-Server E’ una modalità di comunicazione nella quale un computer (client) accede a delle risorse locate su un altro computer (server) La presenza di un server permette ad un certo numero di client di condividerne le risorse, lasciando che sia il server a gestire gli accessi alle risorse per evitare conflitti tipici dei primi sistemi informatici.
    • Scheda: il Client
      • E’ una componente che accede ai servizi o alle risorse di un'altra componente, detta server
      • Limitata complessità: è in sostanza solo un’interfaccia verso il server
      Esempi di client: Web browser (Firefox, Internet Explorer, Opera…) Programmi per la posta elettronica (Thunderbird, Outlook, Eudora…)
      • Ogni client comunica con il server tramite un Protocollo
      Programmi per il trasferimento di file (Filezilla, SmartFTP, CyberDuck) Protocollo: http, https Protocollo: pop, smtp, imap Protocollo: ftp, sftp
    • Scheda: il Server
      • Implementa gestione logica del sistema
      • Implementa tutte le tecniche di gestione degli accessi
      • Allocazione e rilascio delle risorse
      • Condivisione e sicurezza dei dati o delle risorse
      • Esempi di server:
    • Scheda: protocolli
      • HTTP e HTTPS : pagine web
      • Hyper Text Transfer Protocol
      Livello Applicativo
      • POP, SMTP, IMAP : posta elettronica
      • Post Office Protocol
      • Simple Mail Transfer Protocol
      • Internet Message Access Protocol
      • FTP : Trasferimento file
        • File Transfer Protocol
      • SSH, TELNET : Connessione ad un computer remoto
        • Secure Shell
    • Scheda: protocollo HTTP
      • Le specifiche del protocollo sono gestite dal World Wide Web Consortium
      • Portato avanti da Tim Berners-Lee
      • Insieme ad HTML ed alle URL costituisce il nucleo base del WWW
      • Funziona su un meccanismo richiesta/risposta (client/server):
        • - il client inizia la transazione ed esegue una richiesta
      • - il server restituisce la risposta
      • Nell'uso comune il client corrisponde al browser ed il server al sito web.
      • Vi sono quindi due tipi di messaggi HTTP: messaggi richiesta e messaggi risposta.
    • Scheda: Uniform Resource Identifier (URI)
      • Stringa che identifica univocamente una risorsa generica (indirizzo Web, un documento, un'immagine, un file, un servizio, un indirizzo di posta elettronica)
      <scheme>://<authority><path>?<query>
      • file://C:Documents and SettingsMetatronDesktopUno.txt
      • ftp://ftp.is.co.za/rfc/rfc1808.txt -- schema per servizi FTP
      • s mb://192.168.1.10
      • http://www.math.uio.no/faq/compression-faq/part1.html -- schema per servizi HTTP
      • mailto:mduerst@ifi.unizh.ch -- schema per indirizzi di posta elettronica
      • news:comp.infosystems.www.servers.unix -- schema per newsgroup e articoli Usenet
      • telnet://melvyl.ucop.edu/ -- schema per servizi interattivi telnet
      • irc://irc.freenode.net/wikipedia-it -- schema per IRC
      • Esempi di URI:
      • Sintassi:
    • Scheda: Uniform Resource Locator (URL)
      • L'URL è un URI, che identifica univocamente una risorsa in Internet
      protocollo://<username:password@>nomehost</nomefile><?querystring>
      • Sintassi:
      • Esempio:
      http://www.google.it/webhp?hl=it&tab=iw ftp://pippo:spazio@62.147.163.51/public/ilsignoredeglianelli.pdf
      • Protocollo: HTTP, HTTPS, FTP, MMS
      • Username:password: autenticazione
      • Nomehost: l'indirizzo fisico del server su cui risiede la risorsa (un nome di dominio o un Indirizzo IP)
      • Nomefile : Opzionale. Percorso nel file system del server che identifica la risorsa
      • querystring: Opzionale. una stringa di caratteri che consente di passare al server uno o piu parametri
    • Breve storia di Internet e del Web 1991
        • Berners­Lee realizza a scopo di ricerca il primo vero browser denominato “WorldWideWeb”: inizia la guerra dei Browser !
        • Sviluppato per il sistema NeXTSTEP della NeXT di Steve Jobs
    • Breve storia di Internet e del Web La guerra dei Browser
        • 1992 – Un milione di computer sono connessi in rete
        • 1993 – Lou Montulli realizza Lynx un browser testuale di grande successo
    • Breve storia di Internet e del Web 1993
        • Marc Andreesen realizza Mosaic un browser utilizzabile con il mouse
    • Breve storia di Internet e del Web 1994
        • Tim Berners Lee, in collaborazione con il CERN, fonda presso l’MIT (Massachusetts Institute of Technology), una associazione di nome World Wide Web Consortium (W3C)
      HTTP (HyperText Transfer Protocol) URI URL (in collaborazione con IETF) HTML (HyperText Markup Language) XML XHTML (eXtensible HyperText Markup Language) SVG (Scalable Vector Graphics) Xpath CSS (Fogli di stile a cascata) XSLT (Extensible Stylesheet Language Transformations) CGI (Common Gateway Interface) DOM (Document Object Model) SOAP(Simple Object Access Protocol) PNG (formato grafico)
        • Tra gli standard W3C:
        • Scopi del W3C:
          • Migliorare e standardizzare i protocolli e linguaggi per il WWW
        • Aiutare il Web a sviluppare tutte le sue potenzialità
      Leading the Web to its Full Potential
    • Breve storia di Internet e del Web 1994
        • Marc Andreesen e Lou Montulli fondano “Mosaic  Communication  Corp.”,  che diverrà Netscape, casa produttrice del notorio “Navigator”
    • Breve storia di Internet e del Web 1995
        • La Microsoft entra nel mondo web con MSN (Microsoft Network) ed Internet Explorer
    • Breve storia di Internet e del Web 1995
        • Viene realizzato il browser “Opera “ della Opera Software
        • Internet conta ormai circa 15 milioni di computer in rete
    • Breve storia di Internet e del Web Ten Years Ago Today: Netscape Source Code Liberated Thursday, February 14th, 2008 Today marks ten years since Netscape Communications Corporation announced its intention to release the source code of the then in-development Netscape Communicator 5.0, heralding the beginning of what would become the Mozilla project. At the same time, Netscape stopped charging for Netscape Navigator 4.0 and Netscape Communicator Standard Edition 4.0.
      • Netscape per combattere l’avanzata di IE rende pubblico il codice di Navigator: nasce il progetto Mozilla.
      1999 Gli utenti di Internet sono 50 milioni in tutto il mondo 2004 Gli utenti di Internet sono 200 milioni in tutto il mondo
    • Breve storia di Internet e del Web
        • 2004 - Viene rilasciata la prima release di Mozilla Firefox
        • 2009 – Gli utenti di Internet sono 600 milioni in tutto il mondo
    • Breve storia di Internet e del Web 1981 2009 1995
    • Breve storia di Internet e del Web L’evoulzione del Web
        • Gli standard ed I protocolli finora visti supportano la gestione di pagine HTML statiche, ovvero ipertesti visualizzabili e navigabili tramite browser
        • Nacque l’esigenza di strumenti capaci di generare pagine HTML dinamiche, ad es. per rappresentare dati contenuti in un database
        • Una prima soluzione furono le CGI (Common Gateway Interface) tramite le quali si può far si che il Web server invochi un'applicazione esterna e presenti il risultato come una qualsiasi pagina HTML
    • Breve storia di Internet e del Web L’evoulzione del Web
        • Per conferire maggiore flessibilità al web si è seguito un duplice approccio:
        • Potenziare le funzionalità dei browser tramite linguaggi di scripting
        • Realizzare una nuova generazione di linguaggi integrati con il Web Server
        • Un web server in grado di comprendere i suddetti linguaggi integrati viene detto Application Server
        • Un Sito Web che sfrutta le funzioni messe a disposizione dai linguaggi server side, viene detta Web Application
        • Esempi:
        • Scripting Client Side: JavaScript, VBScript
        • Linguaggi Server Side: php, jsp, asp, asp.NET, perl, python
    • Breve storia di Internet e del Web Pagine dinamiche Vorrei Google Motore PHP, JSP, ASP E’ richiesto Google Commessa Chef Dispensa Kenny Browser Vorrei del pane Ingredienti DB Database Dati Web Server E’ richiesto del pane Pane Google Pane Google
    • Hyper Text Markup Language HTML
    • HyperText Markup Language: Linguaggio di marcatura per ipertesti HTML: introduzione
      • E’ un linguaggio usato per descrivere la struttura dei documenti ipertestuali
      • disponibili nel World Wide Web
      • E’ un codice che viene letto ed elaborato dal browser, il quale genera la
      • pagina che viene visualizzata sullo schermo del computer.
      • Non è un linguaggio di programmazione
      • E’ un linguaggio di markup: descrive il contenuto, testuale e non, di una
      • pagina web
      • La sintassi è stabilita dal World Wide Web Consortium (W3C),
      • I documenti HTML sono in grado di incorporare molte tecnologie, tra le quali:
      • CSS
      • JavaScript
      • Java
      • Flash
      • Un file HTML non è altro che un semplice file di testo, quindi per scrivere HTML basta un semplice text editor.
      HTML: introduzione
      • Esempi:
          • Macromedia Dreamweaver
          • Microsoft Frontpage?
          • NVU
          • …… .
      • Editor “What You See Is What You Get” (WYSIWYG)
        • Svantaggi:
          • Linee di codice non necessarie o non standard (per essere di “aiuto”)
          • Minore livello di controllo sulla pagina web rispetto alla codifica manuale
      • Un documento HTML è basato su I suoi Elementi
      HTML: Elementi, Tag, Attributi e Valori
      • I Tag sono le etichette che si usano per marcare l'inizio e la fine di un elemento.
      • Tutti I Tag HTML devono essere chiusi (Well Formed)
      • Gli elementi HTML consistono generalmente di quattro parti:
          • un &quot;tag di apertura”
          • i suoi attributi e i relativi valori
          • i contenuti
          • un &quot;tag di chiusura&quot;.
      • Attributi
        • Sono delle proprietà che vanno inserite all’interno del Tag di apertura ed I cui valori sono sempre racchiusi tra doppi apici (“)
    • HTML: Esempio
      • <!DOCTYPE html PUBLIC
      • &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
      • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
      • <html>
        • <body>
        • Text Text Text Text Text <br />
        • </body>
      • </html>
      • I Tag:
        • In XHTML tutti I tag dovrebbero essere scritti in minuscolo e devono essere chiusi.
      HTML: standard
        • I tag che non possiedono il rispettivo tag di chiusura (ad es: br e img), devono essere chiusi utilizzando il carattere '/’ (es: <br/>)
        • Il markup deve essere ben costruito (well formed) con gli elementi innestati propriamente
        • Tutti i documenti devono possedere gli elementi: html, head, title e body
    • HTML: standard
      • Gli Attributi:
        • Devono essere scritti in minuscolo ed I loro valori tra doppi apici (“)
        • In luogo dell’attributo “ name” (tranne che nei tag “form”) dovrebbe essere rimpiazzato con “id”
        • L’attributo “ target ” non è più considerato valido
        • L’attributo “ alt ” nel tag img” è obbligatorio
      • Title tag
      <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> <html> <head> <title> Page Title </title> </head> <body> this is the bidy and <b> this text is bold </b> </body> </html> HTML: Tag basilari
      • Paragraph tag
      <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> <html> <head> <title> Page Title </title> </head> <body> <p> this is the body and </p> <p> <b> this text is bold </b> </p> </body> </html> HTML: Tag basilari
      • Division tag
      <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> <html> <head> <title> Page Title </title> </head> <body> <div> <p> this text is grouped with the next one </p> <p> this text is grouped with the previous one </p> </div> </body> </html> HTML: Tag basilari
      • Definisce una divisione o una sezione di un documento HTML
      • E’ spesso usato per raggruppare gruppi di elementi cui applicare lo stesso stile
      • emphasis, line break
      <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> <html> <head> <title> Page Title </title> </head> <body> <p>this is the <strong> body </strong> and</p> <p> <em> this text is bold </em> </p> <br /> </body> </html> HTML: Tag basilari
      • headings
      <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> <html> <head> <title> Page Title </title> </head> <body> <h1> An heading </h1> <h2> and a subheading </h2> <p>this is the <strong>body</strong> </p> </body> </html> HTML: Tag basilari Aiutano nella definizione del formato e della struttura di un documento Ci sono sei livelli di headings in HTML (h1, h2,…,h6)
      • Liste:
        • Liste non ordinate
        • Liste ordinate
        • Definizioni
      • <!– Lista non ordinata -->
      • <ul>
      • <li>xxx</li>
      • <li>yyy</li>
      • <li>zzz</li>
      • </ul>
      • <!– Lista ordinata 
      • <ol>
      • <li>xxx</li>
      • <li>yyy</li>
      • <li>zzz</li>
      • </ol>
      • <!– Definizione -->
      • <dl>
        • <dt>Coffee</dt>
        • <dd>Black hot drink</dd>
        • <dt>Milk</dt>
        • <dd>White cold drink</dd>
      • </dl>
      HTML: Tag basilari
          • ul = u nordered l ist
          • ol = o rdered l ist
          • dl = d efinition l ist
          • li = l ist i tem
          • dt = d efinition t erm
          • dd = d efinition d escription
    • <h2>Where to find the my home page</h2> <p> <a href=&quot; http://www.google.it &quot;>Google</a> </p> HTML: Tag basilari
        • E’ usato per definire un link
        • Il link di destinazione è definito tramite l’attributo “href”
        • Un link può essere assoluto o relativo
      • Tag “ancora” (a)
    • HTML: Tag basilari <h2>Internal link</h2> <p> <a href=&quot;#pippo&quot; >Go to pippo</a> </p> <h2 id=”pippo&quot;>Qui c’è Pippo</h2>
        • Un link può anche essere usato per rinviare l’utente ad un’altra parte della stessa pagina
        • Basta aggiungere l’attributo “id” (ad es.: id=“pippo”) ad un tag della pagina ed usare il carattere “#” come valore dell’attributo href (ad es.: href=“#pippo”
      • Tag “ancora” (a)
    • <img src=&quot;http://www.google.it/images/nav_logo4.png&quot; width=&quot;157&quot; height=&quot;70&quot; alt=”Google logo&quot; /> HTML: Tag basilari
      • img
        • E’ usato per inserire immagini in un documento HTML
        • L’attributo “ src ” dice al browser dove trovare l’immagine
        • Gli attributi “ width ” ed “ height ” fissano la dimensione dell’immagine
        • L’attributo “ alt ” contiene la descrizione alternativa
      • Elementi di presentazione testo
        • Elemento b ( bold )
        • Elemento i ( italic )
      <p> <b> Questo è in bold </b> <i> Questo è in italico </i> <font size=&quot;7&quot; face=&quot;Georgia, Arial” color=&quot;maroon&quot;> M </font>arconi </p> HTML: il testo
        • Elemento font:
          • size
          • color (rgb, nome, o esadecimale)
          • Face (nome del font)
      • input tag
      HTML: Tag basilari
          • text
          • password
          • checkbox
          • radio
          • submit
          • button
          • hidden
      Se il testo deve essere su più linee è utile la textarea: <textarea name='Nome' cols='NumeroColonne' rows='NumeroRighe' > [eventuale testo] </textarea> <input [type='text'] name='Nome' size='NumeroColonne' value='ValoreIniziale'>
        • Le tipologie di input tag sono:
      • Tag base
        • table : elemento che definisce una tabella
        • tr : elemento che definisce una riga
        • td : elemento che definisce una cella. Deve essere racchiuso nel tag tr
      • Altri tag
        • th : elemento che definisce l’intestazione di una tabella
        • colspan ( rowspan ): attributo che indica che la colonna (riga) si spanderà sul numero di celle specificato
      HTML: Tabelle
        • Molti browser se non trovano il DOCTYPE passano in 'quirks mode’, ovvero decidono autonomamente
      Sono permessi anche documenti ben formati, ovvero documenti che, pur essendo privi di DTD (DocType Definition), presentano una struttura sufficientemente regolare e comprensibile da poter essere controllata. E’ un tag che non ha bisogno di chiusura e che ha il compito di fornire informazioni al server Web che ospita la pagina. Il W3C stabilisce che il DOCTYPE deve essere il primo elemento ad aprire il documento. Questo vuol dire che andrebbe posto prima di <HTML>. Le informazioni fornite da DOCTYPE riguardano il tipo di documento visualizzato oltre ad essere necessaria alla comunicazione tra browser e server. HTML: DOCTYPE
    • HTML: DTD
      • Definisce gli elementi leciti all'interno del documento
      • Definisce la struttura di ogni elemento
      • Dichiara una serie di attributi per ogni elemento e che valori possono o devono assumere questi attributi
      • DTD serve ad un parser per controllare la correttezza di un documento (well formed)
    • HTML: DTD <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/.../xhtml1-transitional.dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/.../xhtml1-frameset.dtd&quot;>
      • Esempi:
      • L’elemento “head” contiele informazioni denerali (meta-information) sul documento
      HTML: META
      • HTML include anche l’elemento meta che va inserito all’interno dell’header
      • Lo scopo dell’elemento “meta” è di fornire meta-informationi sul documento
      • Molto spesso questo elemento è usato per fornire informazioni che sono rilevanti per il browser o per I motori di ricerca (ad. Es: la discrezione del contenuto del documento)
      • Keywords per I motori di ricerca
        • Alcuni motori di ricerca usano gli attributi name e content per indicizzare le pagine
        • Purtroppo molti hanno usato questa tecnica per effettuare spam. Pertanto molti motori di ricerca ormai ignorano questo elemento
      <meta name=&quot;description” content=&quot;My Description&quot;> <meta name=&quot;keywords” content=&quot;HTML, DHTML, CSS&quot;> HTML: META
      • Esempi:
      • L’attributo “content” contiene i meta data stessi
      • L’attributo “name” può contenere qualsiasi cosa, tipicamente l’autore, parole chiave e descrizioni
      • I frame permettono di visualizzare più di un documento HTML nella stessa finestra.
      • Ogni documento è chiamato frame ed è indipendente da tutti gli altri
      • Vantaggi
        • gestione di pagine con layout complessi
      • Svantaggi
        • Bisogna tenere traccia di molti documenti contemporaneamente
        • È difficile da gestire la stampa della pagina
      HTML: Frame
      • <frameset>
        • Definisce come dividere la finestra
        • Ogni frameset definisce un insieme di righe o di colonne
        • Il valore associato ad ogni riga (colonna) indica la quantità di finestra usata dalla riga
      • <frame>
        • Definisce quale documento caricare nel frame
      • <iframe>
        • Definisce un frame interno
      HTML: Frame
    • Attributi
      • Border
        • Permette di visualizzare un bordo attorno al frame
      • noresize=”noresize”
        • Impedisce all'utente di cambiare le dimensioni dei frame
      • name
        • Assegna un nome al frame (da usare con l'attributo target dell'ancora) per aprire un documento in uno specifico frame
      HTML: Frame
    • Incorporare un filmato Flash HTML: Flash Objects <object width=&quot;550&quot; height=&quot;400&quot;> <param name=&quot;movie&quot; value=&quot;myFlash.swf&quot;> <embed src=”myFlash.swf&quot; width=&quot;550&quot; height=&quot;400”></embed> </object>
      • Nel codice riportato sopra sono presenti sia il tag <embed> che quello <object>:
        • <object> viene usato da Internet Explorer
        • <embed> viene usato da Netscape - Firefox
    • [email_address] Arrivederci alla prossima lezione FINE