Corso di Informatica ECDL Ivan Renesto ivan@renesto.it +393477224641 Ivan Renesto ivan@renesto.it

Libri di Testo Patente Europea del Computer Autori: Dameri, Foresti VOLUME 1 VOLUME 2 Autori: Dameri, Foresti Jackson Libri Ivan Renesto ivan@renesto.it

Modulo 7 Reti Informatiche Volume II Studiare: da pag 192 a pag 273 Per iniziare ………………………………… 193 Navigazione nel Web ………………….. 211 Ricerca nel Web …………………………. 218 Segnalibri ………………………………….. 229 Posta elettronica: Per iniziare ………. 233 Ivan Renesto ivan@renesto.it

Modulo 7 Reti Informatiche Volume II Messaggi ………………………………… 241 Indirizzi …………………………………… 261 Gestione dei messaggi ……………… 268 Volume I Reti Informatiche ……………………. 33 Ivan Renesto ivan@renesto.it

Indice Argomenti Reti Locali La rete delle reti File Transfer Protocol Navigare in Internet La Posta Outlook HTML: introduzione al linguaggio Ivan Renesto ivan@renesto.it

Una rete locale si sviluppa Reti Locali (LAN) LAN: Local Area Network Una rete locale si sviluppa all’interno di spazi limitati “Un insieme di computer tra loro connessi” Mezzo trasmissivo utilizzato per interconnettere gli elaboratori Ivan Renesto ivan@renesto.it

Mezzo trasmissivo condiviso Reti Locali a Bus Ogni computer, per mezzo del proprio hardware (es.: scheda di rete), si connetterà al mezzo trasmissivo Mezzo trasmissivo condiviso (cavo coassiale) Terminatore (assorbe i segnali) Ivan Renesto ivan@renesto.it

in entrambe le direzioni Comunicazione Mitt. Dest. Indirizzo Computer mittente Computer destinatario Scambio di “pacchetti” a 2 da1 creazione a 2 da1 Messaggio a destinazione! 1 2 3 a 2 da1 x assorbimento a 2 da1 x assorbimento a 2 da1 Il segnale si propaga in entrambe le direzioni Il messaggio viene “scartato” dal computer 3, perché non destinato ad esso! Ivan Renesto ivan@renesto.it

Comunicazione: protocolli Protocollo: insieme di regole Tra i più usati nelle reti troviamo i protocolli TCP/IP 1 2 3 TCP/IP: astrattamente, consistono in un insieme di regole che consentono a più computer di portare a termine, in modo completo e corretto, uno o più scambi di informazioni Collisione di due pacchetti di dati Ivan Renesto ivan@renesto.it

Suite di protocolli TCP/IP Suddivisione per livelli: ogni livello tratterà i pacchetti secondo il proprio protocollo ogni livello sarà in grado di comunicare con altri livelli di pari entità Ethernet IP TCP HTTP Protocollo trasferimento Hyper Testi Transport Control Protocol Internet Protocol LIVELLO SOFTWARE LIVELLO HARDWARE Pagina web Informazioni aggiunte da ogni livello TCP Pagina web IP Pagina web TCP Pagina web TCP IP Ivan Renesto ivan@renesto.it

Reti Locali a Stella Ivan Renesto ivan@renesto.it Il mezzo trasmissivo non è più condiviso Il mezzo trasmissivo non è più il cavo coassiale, bensì il DOPPINO TELEFONICO Esiste un dispositivo che sarà il centro nevralgico della rete, e potrà presentarsi in due modi differenti: HUB SWITCH Ivan Renesto ivan@renesto.it

Comunicazione 1 2 6 X X 3 5 X X 4 HUB 1 Ivan Renesto ivan@renesto.it E così via, ogni pacchetto, che l’hub riceve da un computer, viene ritrasmesso su tutti i collegamenti verso gli altri computer Il computer 1 inizia un trasferimento di file con il computer 3 2 1 3 4 5 6 X Il messaggio viene scartato X Il messaggio viene scartato HUB X X Il messaggio viene scartato Il messaggio giunge a destinazione! Il messaggio viene scartato 1 Ivan Renesto ivan@renesto.it

Comunicazione 1 2 6 3 5 4 2 1 6 5 4 3 SWITCH a b c d e f a b c d e f Link Computer a b c d e f 2 1 6 5 4 3 Lo switch, più intelligentemente, controllerà la destinazione del pacchetto e, grazie alla sua tabella di routing, lo smisterà unicamente sul link opportuno Ivan Renesto ivan@renesto.it

La rete delle reti I nodi della rete I dati viaggiano sulla rete sotto forma di pacchetti. Essi saranno caratterizzati da: indirizzo computer mittente indirizzo computer destinazione Internet: in modo astratto può essere visto come un insieme di collegamenti e nodi Consente a due o più computer remoti di mettersi in comunicazione I nodi della rete ISP (Internet Service Provider) Router Internet si appoggia molto sulla rete telefonica Ivan Renesto ivan@renesto.it

Commutazione di pacchetto Router ISP congestione Ivan Renesto ivan@renesto.it

Indirizzi IP Ogni computer, per poter comunicare nella rete, necessita di un indirizzo L’indirizzo ad un computer può essere: Statico Dinamico Tale indirizzo è detto: Indirizzo IP Ivan Renesto ivan@renesto.it

Indirizzi IP Livello di rete (IP: Internet Protocol) Si occupa di trasmettere pacchetti dalla sorgente alla destinazione Ivan Renesto ivan@renesto.it

Indirizzi IP Internet Sorgente Destinazione Indirizzo IP Indirizzo IP Ivan Renesto ivan@renesto.it

Indirizzi IP A . B . C . D 193.68.211.5 Numero tra 0 e 255 Ivan Renesto ivan@renesto.it

Ognuno di questi numeri potrà assumere Indirizzi IP Un indirizzo IP è un numero a 32 bit 8 bit 8 bit 8 bit 8 bit Può essere scomposto in 4 numeri da 8 bit 2 8 = 256 Ognuno di questi numeri potrà assumere 256 valori: da 0 a 255 Ivan Renesto ivan@renesto.it

Indirizzi IP Non tutti gli indirizzi IP possibili sono utilizzabili: 127.0.0.1 127.0.0.1 253.13.62.9 modem 192.168.0.3 192.168.0.4 Internet Non tutti gli indirizzi IP possibili sono utilizzabili: alcuni sono privati 10.*.*.* (rete di classe A) 172.16.*.* (rete di classe B) 192.168.0.* (rete di classe C) Alcuni sono riservati ad uso speciale 0.0.0.0 (default) 255.255.255.255 (broadcast) … Un computer può avere più indirizzi IP. Uno per ogni interfaccia di rete: loopback (127.0.0.0) Rete Locale (192.168.0.0) Point to Point (…) Ivan Renesto ivan@renesto.it

Nomi Simbolici http://www.lastampa.it/redazione/default.asp Gli indirizzi numerici sono pratici da gestire in modo automatico, ma non lo sono dal punto di vista della memorizzazione umana Ad ogni indirizzo numerico può essere associato un nome simbolico Identifica un computer in rete Protocollo di comunicazione Identifica un percorso, espresso in termini assoluti, intendendo come radice del percorso una cartella condivisa del computer identificato dal nome precedente Nome del documento web da visualizzare http://www.lastampa.it/redazione/default.asp Ivan Renesto ivan@renesto.it

Nomi Simbolici: URL URL http://www.lastampa.it Estensione Dominio Tipo di servizio: www (World Wide Web) Estensione http://www.lastampa.it Ivan Renesto ivan@renesto.it

Protocolli Un protocollo costituisce un insieme di regole I protocolli di rete sono un insieme di regole atti a garantire: Il trasferimento di informazioni da un computer a un altro (IP) Il trasferimento senza errori delle informazioni, con controllo sul flusso (TCP) Il trasferimento di informazioni via web (HTTP) Il trasferimento sicuro di informazioni via web (HTTPS) … Ivan Renesto ivan@renesto.it

Protocolli di comunicazione La suite di protocolli TCP/IP è definita “Paritetica” LVL 0 LVL 1 LVL 2 LVL 3 Ethernet IP TCP HTTP, FTP, … LAN, MAN, Internet, … Insieme di protocolli, tra i più usati nelle reti. Ivan Renesto ivan@renesto.it

Protocolli di comunicazione IP: Internet Protocol TCP: Transport Control Protocol HTTP: Hyper-Text Transfer Protocol FTP: File Transfer Protocol SMTP: Simple Mail Transfer Protocol POP3: Post Office Protocol Ivan Renesto ivan@renesto.it

File Transfer Protocol FTP File Transfer Protocol Ivan Renesto ivan@renesto.it

FTP: File Transfer Protocol FTP è un protocollo di trasferimento file, che ci consente di effettuare passaggio di informazione tra due computer che non possono comunicare in altro modo FTP può essere usato mediante: Interfaccia a comandi GUI (Graphical User Interface) Ivan Renesto ivan@renesto.it

FTP: Uso Due sono gli applicativi software necessari all’uso pratico di questo protocollo: FTP Server FTP Client Ivan Renesto ivan@renesto.it

FTP: funzionamento FTP Client FTP Server Internet, LAN, … Passo 2: 192.168.0.1 192.168.0.2 Passo 2: Il computer 192.168.0.1 che deve possedere un client FTP, testuale o con interfaccia grafica, tenta di collegarsi al computer 192.168.0.2 Passo 3: Il computer 192.168.0.2 deve possedere a sua volta un FTP Server attivo, per poter accettare connessioni da un qualsiasi FTP Client FTP Client Passo 4: Il computer 192.168.0.1 (Client), prima di poter prelevare/inviare file da/verso il computer 192.168.0.2 (Server), si dovrà prima identificare mediante autenticazione Passo 1: Il computer 192.168.0.1 vuole trasferire file da/a il computer 192.168.0.2 FTP Server Internet, LAN, … (una rete qualsiasi) Ivan Renesto ivan@renesto.it

FTP: comandi Tra i comandi a disposizione, i più semplici ed utili sono: bin Per impostare un trasferimento di tipo “binario” cd Per cambiare directory get Per prelevare un oggetto put Per trasferire un oggetto dir Per visualizzare il contenuto della directory Ivan Renesto ivan@renesto.it

FTP: Interfaccia testuale help: listato dei comandi disponibili FTP: Interfaccia testuale help <comando>: descrizione del comando Ivan Renesto ivan@renesto.it

FTP: GUI Una interfaccia grafica per effettuare FTP è costituita da Microsoft Explorer Nella barra Indirizzo occorrerà specificare di voler usare il protocollo FTP: scrivendo ftp:// dopodichè occorrerà indicare il nome dell’utente ed il computer sul quale operare con la seguente sintassi: <nome_utente>@<indirizzo computer> Ivan Renesto ivan@renesto.it

FTP: GUI L’indirizzo del computer sul quale accedere, che fornisce il servizio FTP, può anche essere scritto usando il relativo nome simbolico al posto dell’indirizzo IP. Nell’esempio: al computer 192.168.0.100 è fatto corrispondere il nome simbolico grifo.olimpo Ivan Renesto ivan@renesto.it

FTP: autenticazione Per completare l’autenticazione dell’utente a cui sta per essere dato l’accesso al servizio FTP con determinati privilegi, occorre inserire la password Ivan Renesto ivan@renesto.it

FTP: finestra client Ora è possibile trasferire file o cartelle in modo analogo a quando si opera con una normale finestra d’accesso ad una risorsa Ivan Renesto ivan@renesto.it

Web Browsing Navigare in Internet Ivan Renesto ivan@renesto.it

Navigare in Internet Concetti fondamentali: Navigare Sito Pagina Web Portale Server HTTP Client HTTP: Browser Ivan Renesto ivan@renesto.it

Navigare: concetti Navigare è il termine con il quale si indica l’esplorazione dei documenti presenti nella rete globale La rete globale è Internet La navigazione è possibile mediante appositi applicativi: browser Esempi di browser: Microsoft Explorer Opera Mozilla … Ivan Renesto ivan@renesto.it

Un sito Internet Un sito web è una collezione di documenti web Tutti i documenti web del sito possono essere tra loro collegati, mediante link Una pagina web è un documento consultabile in internet tramite un browser Un portale è un sito che offre un punto d’accesso per molti e svariati servizi La prima pagina di ogni sito, per convenzione, dovrebbe chiamarsi: index.htm index.html .jsp .php I link sono collegamenti, impostati dal creatore della pagina web, cliccando sui quali è possibile navigare verso un successivo documento web Ivan Renesto ivan@renesto.it

Volendo navigare Per poter navigare in internet occorre: Un computer Una linea telefonica Un modem e i cavi di connessione al computer e alla linea telefonica Specifico software per la navigazione Software di accesso remoto Browser (programma di navigazione) Mail User Agent (programma di gestione della posta) Un account presso un ISP Credenziali: login e password Numero di telefono dell’ISP Ivan Renesto ivan@renesto.it

Cosa succede HTTP Server Connettersi equivale a fare una telefonata all’ISP Il tempo della telefonata sarà equivalente al tempo di connessione Router …Stabilisce una connessione col suo ISP … Se l’Internet Service Provider si trova ad Aberdeen (Scozia) la chiamata sarà internazionale!!! Il risparmio si trova nella scelta dell’ISP più vicino L’utente vorrebbe navigare in internet … Scambio di informazioni: MTU Login Password … ISP Ivan Renesto ivan@renesto.it

Cosa succede: navigando Messaggio di richiesta di visualizzazione del sito: http://www.meteo.it Il computer in internet, che ospita il sito web richiesto e che risponde al nome www.meteo.it, prepara la prima pagina del suo sito e la spedisce in risposta alla richiesta ricevuta GET www.meteo.it HTTP 1.1 http://www.meteo.it Il messaggio ricevuto viene scartato, la pagina web in esso contenuta viene passata al browser che provvede a visualizzarla Ivan Renesto ivan@renesto.it

Problematiche Navigare richiede la conoscenza precisa dei nomi dei siti I motori di ricerca utilizzando parole chiave ci forniscono indirizzi precisi di siti La memorizzazione di un indirizzo può essere difficoltosa. In aiuto viene lo strumento Preferiti Ivan Renesto ivan@renesto.it

Il Browser: Microsoft Explorer Barra del titolo Il Browser: Microsoft Explorer File Pulsanti di controllo Modifica Visualizza Preferiti Strumenti Aiuto Barra dei menu Pagina Web Rappresentazione grafica di un documento internet così come il browser lo visualizza Barra degli strumenti: Standard Contenente i pulsanti per le funzioni più comunemente usate nella navigazione Barra degli strumenti: Indirizzo Nella casella di inserimento in questa barra potrà essere inserito l’indirizzo del sito da visualizzare Premendo [INVIO] si procederà all’invio della richiesta Cronologia Permette di visualizzare un elenco degli ultimi siti visitati in ordine cronologico, e di sceglierne uno Vai Pulsante che consente di inviare la richiesta di visualizzazione di un sito, il cui indirizzo è stato scritto nella casella di inserimento della stessa barra Ivan Renesto ivan@renesto.it

Browser: Impostazioni di base Le possibili impostazioni di base per Microsoft Explorer riguardano: Pagina Iniziale File Temporanei Cronologia Per modificare le impostazioni: Strumenti  Opzioni internet… Scheda Generale Ivan Renesto ivan@renesto.it

Impostazioni: Pagina iniziale E’ possibile impostare quella che si vuole sia la pagina iniziale visualizzata all’interno del browser: Scrivendo nella casella di inserimento della sezione Pagina iniziale l’URL desiderato Es.: http://www.suse.com Premendo il pulsante Pagina corrente per impostare nella casella l’indirizzo della pagina correntemente visualizzata dal browser Premendo sul pulsante Pagina predefinita per ripristinare la pagina preimpostata dal browser Premendo sul pulsante Pagina vuota (about:blank) per non far visualizzare alcuna pagina all’apertura del browser Ivan Renesto ivan@renesto.it

Impostazioni: Pagina iniziale Per richiamare, in qualsiasi momento, la pagina impostata come iniziale sarà sufficiente premere su questo pulsante, sulla barra degli strumenti: Standard Ivan Renesto ivan@renesto.it

Impostazioni: File temporanei Durante la navigazione, il nostro browser memorizza su una parte di disco locale (cache) informazioni utili ad un suo migliore funzionamento. Tali informazioni non sono indispensabili ed occupano spazio Possono essere eliminate in qualsiasi momento con i pulsanti: Elimina file… Elimina cookie… Ivan Renesto ivan@renesto.it

Impostazioni: Cronologia Il browser può tenere traccia dei siti visitati Esiste una cartella Cronologia in cui vengono memorizzate tali informazioni Dalla finestra Opzioni Internet è possibile: Specificare ogni quanti giorni automaticamente la Cronologia venga cancellata Cancellare la Cronologia premendo il pulsante Cancella Cronologia Ivan Renesto ivan@renesto.it

Cronologia E’ possibile accedere alla cronologia in due modi: Mediante l’apposito pulsante nella barra degli strumenti: Indirizzo Determinerà l’apertura di un menu a cascata dal quale scegliere un URL Mediante pulsante nella barra degli strumenti: Standard Determinerà l’apertura di una sezione laterale sinistra all’interno della finestra del browser Ivan Renesto ivan@renesto.it

Cronologia: accesso diretto Si avrà la possibilità, con semplici click di tasto sinistro del mouse, di visualizzare in base a gruppi cronologici i siti visitati Anche all’interno di questa sezione è disponibile una funzione di ricerca Ivan Renesto ivan@renesto.it

Cronologia: scorrere la lista Pulsante disattivato Indica che non è possibile scorrere la lista cronologica in avanti: ad esempio quando la lista è vuota, non avendo ancora visitato alcun sito, oppure quando si è in fondo alla lista È possibile scorrere la lista cronologica dei siti visitati con i pulsanti: Avanti Indietro Pulsante attivato Indica che la lista cronologica dei siti non è vuota, e che è possibile visionare quali siti sono stati visitati precedentemente Ivan Renesto ivan@renesto.it

Caching dei siti web Un browser oltre a memorizzare gli indirizzi dei siti web visitati durante il suo utilizzo, può anche mantenere in memoria informazioni inerenti il contenuto dei siti visitati Tali informazioni vengono memorizzate in modo permanente, ma sottoforma di file temporanei, in una zona del disco locale chiamata cache Ivan Renesto ivan@renesto.it

Caching: funzionamento D. http://www.renesto.it E. http://www.manzoni.it C. http://www.edes.it B. http://www.virgilio.it A. http://www.meteo.it Zona del disco locale: Cache A B C D E Ivan Renesto ivan@renesto.it

Caching: utilizzo dal browser Digitando il nome del sito nella casella Indirizzo e premendo [INVIO] il browser si adopera per recuperare la pagina web richiesta e per visualizzarla GET B HTTP 1.1 Prima il browser controlla se la pagina web richiesta è presente nella cache Supponiamo ora l’utente voglia rivisitare il sito B Preparando un messaggio di richiesta, inviandolo e aspettando di ricevere in risposta la pagina web? Come? NO! A A B C D B E E D C Ivan Renesto ivan@renesto.it

Caching: richiesta di utilizzo L’utente, utilizzando i pulsanti: Avanti Indietro chiede al browser di rivisualizzare una pagina precedentemente visitata, quindi presente in cache. Il browser la rivisualizzerà senza inoltrare alcuna richiesta via internet Ivan Renesto ivan@renesto.it

Interrompere una richiesta È possibile che per visualizzare una pagina web il browser impieghi molto tempo a causa di una congestione della rete a causa del malfunzionamento di un server o di router … A tale scopo è possibile interrompere la richiesta di visualizzazione mediante il pulsante termina Ivan Renesto ivan@renesto.it

Ripetere una richiesta di visualizzazione Dopo aver interrotto una richiesta di visualizzazione col pulsante termina è possibile ripeterla semplicemente premendo il pulsante aggiorna Tale pulsante impone al browser di non controllare ciò che è contenuto nella cache e di inoltrare una richiesta via internet della pagina specificata Ivan Renesto ivan@renesto.it

Come stampare una pagina web Per effettuare una rapida stampa di una pagina web è possibile utilizzare Il pulsante stampa sulla barra degli strumenti standard L’apposito comando da menu File  Stampa… Ivan Renesto ivan@renesto.it

Le Pagine Web All’interno di una pagina web è possibile raggruppare ogni oggetto in 3 categorie: Testo Immagini Oggetto multimediale (audio, video, …) Ognuno di questi oggetti può essere a sua volta: un link un semplice oggetto (non link) Ivan Renesto ivan@renesto.it

Pagine Web: link Un link è un collegamento Sopra i link il puntatore del mouse da freccia diventa una mano con un dito pronto a premere Ad ogni link è associata una determinata pagina web Cliccare su un link equivale a scrivere l’URL della pagina web associata nella barra indirizzo del browser, ed avviare la richiesta di visualizzazione Ivan Renesto ivan@renesto.it

Una Pagina Web Link alla sezione news high tech del quotidiano la stampa Link alla sezione sport del quotidiano la stampa Link ad una delle novità del giorno: Cyberlibri Link alla pagina web relativa alle Cronache italiane Ivan Renesto ivan@renesto.it

Motori di ricerca Errare anche di un solo carattere l’URL di una pagina web comporta l’impossibilità di visualizzarla Nessuno conosce gli indirizzi di tutti i siti esistenti È impensabile riuscire a ricordare a distanza di tempo l’indirizzo di un sito visitato sporadicamente Ivan Renesto ivan@renesto.it

Motori di ricerca Per risolvere le problematiche appena viste sono stati creati i motori di ricerca Sono siti aventi la funzione di: Accettare in input criteri di ricerca Ricercare pagine web che soddisfino tali criteri Esporre un elenco delle pagine web trovate Consentire rapido accesso ad ognuna di esse Ivan Renesto ivan@renesto.it

Motori di ricerca: esempi Esistono diversi motori di ricerca http://www.google.it http://www.altavista.it ora diventato http://it.altavista.com http://www.virgilio.it Più precisamente http://www.virgilio.it/home/index.html Ivan Renesto ivan@renesto.it

www.google.it Casella di inserimento dei criteri Pulsante di ricerca Ogni motore di ricerca ne possiede una, ed al suo interno è possibile specificare una o più parole che determinino un criterio di ricerca per le pagine web Pulsante di ricerca Sempre presente, serve per avviare la ricerca sul web Ivan Renesto ivan@renesto.it

Criteri di ricerca Specificando come criterio di ricerca: una parola singola il motore di ricerca troverà tutte le pagine web che contengono tale parola più parole il motore di ricerca troverà inizialmente tutte le pagine web che contengono tutte le parole poi troverà quelle che ne contengono solo alcune non si terrà conto dell’ordine delle parole specificato nel criterio di ricerca Ivan Renesto ivan@renesto.it

Criteri di ricerca Specificando come criterio di ricerca: più parole racchiuse tra doppi apici Verranno trovate solo le pagine web che contengono tutte le parole specificate, esattamente nell’ordine in cui sono state inserite È possibile usare operatori logici per ottenere criteri di ricerca complessi Ivan Renesto ivan@renesto.it

Criteri di ricerca: operatori Usando gli operatori + e –, è possibile specificare quali parole devono far parte del risultato di una ricerca e quali no. Esempio: Ristorante + Piemonte – Asti Verranno trovate tutte le pagine web in cui si parla di un ristorante, in Piemonte, ma non ad Asti Ivan Renesto ivan@renesto.it

Criteri di ricerca: attenzione Non tutti i motori di ricerca supportano gli stessi operatori Inserendo caratteri minuscoli il motore di ricerca estenderà il criterio anche ai maiuscoli Inserendo caratteri maiuscoli non verranno considerati i caratteri minuscoli È possibile utilizzare il carattere jolly: * Alcuni caratteri speciali: virgole, trattini, slash, ecc… spesso non vengono considerati dai motori di ricerca Ivan Renesto ivan@renesto.it

Criteri di ricerca: esempio 1 A B Vengono trovate tutte le pagine web che contengono: A, B B, A A B Ivan Renesto ivan@renesto.it

Criteri di ricerca: esempio 2 A + B Vengono trovate tutte le pagine web che contengono: A, B B, A Può essere trovata anche una pagina web che contiene solo A, o solo B? No! L’operatore + indica che le parole da esso legate debbano essere presenti entrambe all’interno di una pagina web Ivan Renesto ivan@renesto.it

Criteri di ricerca: esempio 3 A + B + C Il motore di ricerca visualizzerà il link di pagine che contengono: A, B No! Perché manca C B, A, C Si! Perché l’ordine non conta C, A, B, D, F, Z Si! Perché l’importante è che siano presenti le parole specificate nel criterio di ricerca Ivan Renesto ivan@renesto.it

Criteri di ricerca: esempio 4 A B + C Verranno trovate tutte le pagine web che contengono: A, B, C in un qualsiasi ordine A, C in un qualsiasi ordine B, C in un qualsiasi ordine C Ivan Renesto ivan@renesto.it

Criteri di ricerca: esempio 5 “A B” + C D Verranno trovate tutte le pagine web che contengono: A B, C, D A B, C C, A B, D C, D, A B D, C, A B Ivan Renesto ivan@renesto.it

Criteri di ricerca: esercizio Scrivere un criterio di ricerca affinché: Vengano trovati siti che trattano di ristoranti italiani a New York, in cui però non si cucini pesce Soluzione: ristorant* + italian* + “New York” – pesce Ristorante + italiano + “New York” AND NOT pesce Ivan Renesto ivan@renesto.it

Operatori Logici OR AND AND NOT La ricerca avviene su almeno una delle parole indicate AND La ricerca avviene su tutte le parole indicate AND NOT La ricerca avviene includendo la prima parola ed escludendo la seconda Ivan Renesto ivan@renesto.it

Risultato di una ricerca Criterio utilizzato nella ricerca Breve descrizione del contenuto del sito trovato: le parole chiave del criterio vengono evidenziate rispetto le altre Risultati della ricerca Indirizzo preciso della pagina web trovata, con indicazione della dimensione del documento Link per accedere direttamente al sito Primo risultato Secondo risultato Terzo risultato Ivan Renesto ivan@renesto.it

Strumento Preferiti Tale strumento permette di creare segnalibri Un segnalibro (o bookmark) consiste in un sistema per memorizzare l’indirizzo di una pagina web Generalmente è utile fissare in bookmark gli esiti più interessanti delle nostre ricerche o delle navigazioni Ivan Renesto ivan@renesto.it

Preferiti È possibile accedere a questo strumento mediante: il menu Preferiti, dalla barra dei menu il pulsante Preferiti dalla barra degli strumenti standard Ivan Renesto ivan@renesto.it

Preferiti: il menu Il menu Preferiti si può suddividere in due parti: Sezione superiore del menu Preferiti Il menu Preferiti si può suddividere in due parti: parte superiore ove gestire la creazione, la cancellazione e la strutturazione dei bookmark parte inferiore ove accedere direttamente ai siti relativi ai link memorizzati Aggiungi a Preferiti… Organizza Preferiti… Sezione inferiore del menu Preferiti Ivan Renesto ivan@renesto.it

Preferiti: pulsante Preferiti Organizza… Aggiungi… Il pulsante Preferiti attiverà il riquadro Preferiti a sinistra all’interno della finestra. Le funzionalità del riquadro Preferiti sono lo stesse di quelle offerte dal menu omonimo Aggiungi… Ivan Renesto ivan@renesto.it

La Posta Funzionamento del meccanismo postale via Internet e gestione della posta Ivan Renesto ivan@renesto.it

La posta: invio Invio di una mail Steve Red X Luigi Bianchi 5 MB steve.red@mail.com luigi.bianchi@email.it 2,5 MB 5 MB Steve Red Luigi Bianchi Mail box Casella di posta X Ivan Renesto ivan@renesto.it

La posta: ricezione Ricezione delle mail Steve Red Luigi Bianchi 5 MB steve.red@mail.com luigi.bianchi@email.it 2,5 MB 5 MB Steve Red Luigi Bianchi Mail box Casella di posta Richiesta all’ISP presso il quale Possediamo una casella di posta La posta viene trasferita dalla casella postale (mail box) remota al disco locale dell’elaboratore Ivan Renesto ivan@renesto.it

Outlook Creare un nuovo messaggio Posta ricevuta Ivan Renesto ivan@renesto.it

(identificherà la mail insieme al destinatario) Nuovo messaggio Indirizzo del destinatario Indirizzo di ulteriori destinatari Oggetto del messaggio (identificherà la mail insieme al destinatario) Accoderà il messaggio in attesa di invio Barra di Formattazione del testo del messaggio Corpo del messaggio Ivan Renesto ivan@renesto.it

Allegati Consente di allegare un file alla mail, come utilizzando il menù Inserisci  Allegato… Ivan Renesto ivan@renesto.it

Allegati Selezione del file da allegare Allega il file selezionato Ivan Renesto ivan@renesto.it

Allegati Elenco dei file allegati Ivan Renesto ivan@renesto.it

Allegati La mail scritta viene temporaneamente depositata nella cartella “Posta in uscita”, in attesa di essere effettivamente inviata, e depositata in “Posta inviata”, dove risiederà una copia di ogni mail inviata. Per inviare effettivamente una mail premere il pulsante “Invia/Ricevi” Ivan Renesto ivan@renesto.it

Leggere e-mail Per leggere una e-mail ricevuta occorre eseguire un doppio click sulla e-mail Ivan Renesto ivan@renesto.it

Introduzione al linguaggio HTML Introduzione al linguaggio Ivan Renesto ivan@renesto.it

Corso base di HTML Testi e Riferimenti Manuali on-line Esempi ed esercizi forniti dal docente XML: La Guida Completa Lingua italiana Autori: Heather Williamson HTML 4 for Dummies Lingua inglese Autori: Ed Tittel, Natanya Pitts HTML & XHTML: The Definitive Guide Autori: Chuck Musciano, Bill Kennedy Ivan Renesto ivan@renesto.it

Creare una pagina Web Strumenti di lavoro Browser: Editor (HTML) Netscape Navigator Opera Microsoft Explorer … Editor (HTML) NotePad NoteTab Light Arachnophilia Macromedia DreamWeaver Ivan Renesto ivan@renesto.it

Creare un Hyper Text Un Hyper Text è un semplice documento web, per creare il quale, per semplicità si potrà utilizzare il NotePad di Windows Start > Programmi > Accessori > Blocco Note Il linguaggio di programmazione che si utilizzerà sarà: HTML Hyper Text Mark-up Language Ivan Renesto ivan@renesto.it

Avvio del Blocco Note Ivan Renesto ivan@renesto.it

Salvare Documenti Web Ivan Renesto ivan@renesto.it

Salvare Documenti Web Ivan Renesto ivan@renesto.it

Salvare le modifiche ad un Documento Web Si seleziona il menù File Si seleziona il comando Salva Ivan Renesto ivan@renesto.it

Area di Lavoro: Work Space Ivan Renesto ivan@renesto.it

HTML TAG fondamentali <html> </html> Consentono di delimitare l’inizio e la fine di un documento web <title> </title> Ci consentono di dare un titolo ad un documento web <body> </body> Al loro interno dovrà essere racchiuso il contenuto della pagina web Ivan Renesto ivan@renesto.it

HTML: TAG fondamentali Codice HTML associato ad una semplice pagina web di benvenuto Documento Web visualizzato dal browser Microsoft Explorer Ivan Renesto ivan@renesto.it

HTML: TAG Fondamentali Ulteriori TAG di fondamentale utilizzo sono quelli che trattano della formattazione del testo: <h1> </h1> Formattazione rapida di titoli <br/> Forza il browser ad andare a capo nella visualizzazione del testo <font> </font> Determina la formattazione dei caratteri Ivan Renesto ivan@renesto.it

TAG: <h1> Il testo contenuto tra i tag <h1> e </h1> verrà formattato con le caratteristiche di un titolo di primo livello <h2> </h2> sono usati per i titoli di secondo livello … <h6> </h6> sono usati per i titoli di sesto livello Ivan Renesto ivan@renesto.it

TAG: <br/> Il tag <br/> serve per dire al browser di forzare la visualizzazione a capo di una sequenza di caratteri Es.: <h1>Tecnico di Produzione<br/> grafica per Internet</h1> Ivan Renesto ivan@renesto.it

Proprietà di un TAG I tag: Possiedono un nome Sono racchiusi tra parentesi angolari: < > Possono avere un rispettivo tag di chiusura: <html> … </html> tag con rispettiva chiusura <br/> tag vuoto Possono possedere delle proprietà Ivan Renesto ivan@renesto.it

Proprietà di un TAG <nome_tag proprietà=“valore_proprietà”> Un tag può avere al suo interno una o più proprietà, con relativo valore associato, che descrivono caratteristiche aggiuntive che il contenuto dei tag: <nome_tag> </nome_tag> dovrà avere Ivan Renesto ivan@renesto.it

TAG: <font> <font> </font> size dimensione del font color colore del font face stile del font </font> Ivan Renesto ivan@renesto.it

Esempi di uso dei TAG Ivan Renesto ivan@renesto.it

TAGs: <tt>, <i>, <b>, <big>, <small> Teletype Text (monospaced text) <i> Italic Text <b> Bold Text <s> Stroke Text <u> Underlined Text <big> Big Text <small> Small Text Ivan Renesto ivan@renesto.it

TAGs: Formattazione testo Ivan Renesto ivan@renesto.it

CSS: Fogli di Stile I fogli di stile (Cascading Style Sheets) consentono di impostare le proprietà di formattazione per tutto il documento web I fogli di stile possono essere: Definiti internamente al documento Definiti esternamente in un apposito file Ivan Renesto ivan@renesto.it

CSS: definizione interna Avviene mediante il tag <style> Esempio: <style type=“text/css”> … </style> Ivan Renesto ivan@renesto.it

CSS: definizione esterna Nella documento web, all’interno del tag <head> si inserirà il tag <link> Esempio: <link rel=“stylesheet” type=“text/css” href=“styles.css”> Collegamento ad un oggetto esterno alla pagina web Tipo di oggetto esterno Nome del file che rappresenterà il foglio di stile Ivan Renesto ivan@renesto.it

CSS: foglio di stile Istruzione CSS di base: selettore { proprietà: valore } selettore: è l’identificatore di uno o più elementi proprietà: nome di una delle proprietà CSS predefinite valore: uno dei valori predefiniti per la specifica proprietà Ivan Renesto ivan@renesto.it

CSS: foglio di stile Sintassi corretta per un blocco di dichiarazioni: selettore { proprietà1: valore; proprietà2: valore; … proprietàn: valore } Ivan Renesto ivan@renesto.it

CSS: foglio di stile 1. Scrittura pagina web 2. Definizione foglio di stile Ivan Renesto ivan@renesto.it

CSS: foglio di stile Proprietà di formattazione e allineamento del testo: font-family font-size font-weight font-style text-align text-indent Ivan Renesto ivan@renesto.it

CSS: font-family Valori possibili: “Times New Roman” “Arial” “serif” “fantasy” … Ivan Renesto ivan@renesto.it

CSS: font-size Possibili valori assoluti: Possibili valori relativi: xx-small x-small small medium large x-large xx-large Possibili valori relativi: larger smaller Ivan Renesto ivan@renesto.it

CSS: font-weight Normal Bold Bolder lighter 100 200 300 400 500 600 700 800 900 Ivan Renesto ivan@renesto.it

CSS: font-style Possibili valori: normal italic oblique Ivan Renesto ivan@renesto.it

CSS: text-align Valori possibili: left right center justify Ivan Renesto ivan@renesto.it

CSS: text-indent Indentazione del testo esprimibile come lunghezza: “15px” Indentazione esprimibile come percentuale: “10%” Ivan Renesto ivan@renesto.it

CSS: esempio 1. Creazione documento web 2. Creazione foglio di stile css2.htm 2. Creazione foglio di stile css2.css 3. Visualizzazione mediante il browser Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Tabelle Una tabella è definita da un apposito tag: <table> … contenuto della tabella … </table> Ivan Renesto ivan@renesto.it

Tabelle Una tabella si compone di: Righe (rows) Colonne (columns) I tag che definiscono questi due elementi sono: per le righe: <tr> … </tr> per le colonne: <td> … </td> <th> … </th> Ivan Renesto ivan@renesto.it

Tabelle: <table> Il tag <table> definisce l’inizio di una tabella Tale tag può avere degli attributi: align Che definisce l’allineamento della tabella nel documento width Che determina la larghezza della tabella bgcolor Consente di applicare un colore di sfondo alla tabella border Permette di applicare un bordo di spessore specificabile alla tabella cellspacing/cellpadding Determinano i margini delle celle Ivan Renesto ivan@renesto.it

<table>: align I valori possibili di questo tag (deprecato) sono: left Allineamento a sinistra right Allineamento a destra center Allineamento centrato Ivan Renesto ivan@renesto.it

<table>: width Esprime la larghezza della tabella Il valore di questo attributo può essere, ad esempio, espresso in forma relativa (rispetto lo spazio disponibile all’interno della pagina) mediante una percentuale: Es.: width=“80%” Ivan Renesto ivan@renesto.it

<table>: bgcolor Ci consente di esprimere un colore di sfondo per la tabella: Es.: bgcolor=“orange” Es.: bgcolor=“#44F31A” Ivan Renesto ivan@renesto.it

<table>: border Permette di definire uno specifico spessore per i bordi delle tabelle: Es.: border=“0” (nessun bordo) border=“1” border=“2” … Ivan Renesto ivan@renesto.it

Tabelle: <tr>, <td>, <th> All’interno di una tabella occorrerà sempre definire: 1. Una riga 2. Una colonna 3. Vuoi definire un’altra colonna? SI: torna al passo 2 NO: prosegui al passo 4 4. Vuoi ridefinire un’altra riga? SI: torna al passo 1 NO: fine definizione del contenuto della tabella Ivan Renesto ivan@renesto.it

Tabelle: <tr>, <td>, <th> 1.1 inizio definizione riga <tr> 2.1 inizio definizione colonna <td>, oppure <th> 3.1 fine definizione colonna </td>, oppure </th> 4.1 fine definizione riga </tr> Ivan Renesto ivan@renesto.it

Tabelle: <tr>, <td>, <th> Applicando la sequenza di passi (algoritmo) descritto in precedenza, sarà possibile definire il contenuto di una semplice tabella Ivan Renesto ivan@renesto.it

Tabelle: Esempio di codice HTML <table> <tr> <td> Cella 1 </td> <!– Prima riga, prima colonna -> <td> Cella 2 </td> <!– Prima riga, seconda colonna -> </tr> <td> Cella 3 </td> <!– Seconda riga, prima colonna -> <td> Cella 4 </td> <!– Seconda riga, seconda colonna -> </table> Ivan Renesto ivan@renesto.it

Tabelle: titolo E’ possibile dare un titolo ad una tabella usando il tag: <caption> Es.: <table> <caption><em>My Table</em></caption> … </table> Ivan Renesto ivan@renesto.it

Tabelle: span E’ possibile definire uno “span” su: righe: colonne: Mediante l’attributo rowspan Consente ad una riga di spandersi sulla superficie di più righe Es.: <tr rowspan=“2”> … </td> colonne: Mediante l’attributo colspan Consente ad una colonna di spandersi sulla superficie di più colonne Es.: <td colspan=“3”> … </td> Ivan Renesto ivan@renesto.it

Tabelle: esempio Ivan Renesto ivan@renesto.it

LINK Collegamento Iper-Testuale Consente di passare da un documento ad un altro Un link è associato univocamente all’URL di una precisa risorsa Una risorsa può avere più link al proprio URL La relazione: Link – Risorsa è del tipo: molti - uno Ivan Renesto ivan@renesto.it

LINK Il tag per creare un link ad una risorsa è: <a> Es.: <a href=“X.htm”> questo è un link al documento X.htm </a> Ivan Renesto ivan@renesto.it

LINK: proprietà Un link ha una proprietà di fondamentale importanza che è: href Tale proprietà permette di specificare il percorso, locale, o remoto, relativo o assoluto, ove trovare la specifica risorsa associata al link Ivan Renesto ivan@renesto.it

LINK: contenuto Un link può essere rappresentato da: Testo <a href=“X.htm”> Questo è un link testuale </a> Immagini <a href=“X.htm”> <img src=“immagine.gif”/> </a> Il corpo del link sarà quindi rappresentato da ciò che inseriremo all’interno dei tag <a> … </a> Il corpo del link sarà ciò su cui l’utente dovrà cliccare per visualizzare il documento associato (nell’esempio: X.htm) Ivan Renesto ivan@renesto.it

LINK: esempio Creazione di un documento chiamato: pagina1.htm pagina2.htm Creazione dei link che collegano entrambi i documenti è che permettono di passare dall’uno all’altro Ivan Renesto ivan@renesto.it

LINK: esempio Ivan Renesto ivan@renesto.it

FRAMES Parti di documento che rappresentano documenti indipendenti Necessitano di duplice definizione: Nell’insieme, mediante il tag: <frameset> Individualmente, mediante il tag: <frame> Ivan Renesto ivan@renesto.it

FRAMES: frameset <frameset> è il tag che ci permette di definire un insieme di frame Tra le sue proprietà troviamo: cols: Permette di definire la suddivisione del documento principale per colonne rows: Permette di definire la suddivisione del documento principale per righe Ivan Renesto ivan@renesto.it

FRAMES: frameset <frameset cols=“110,*” …> Il documento sarà diviso in due frame, per COLONNE, di cui la prima andrà dal pixel 0 al pixel 110 Dimensione in pixel della larghezza della colonna (anche esprimibile in percentuale) Dimensione variabile tag che indica le caratteristiche dei frame, nell’insieme, che costituiranno la pagina <frameset cols=“110,*” …> Ivan Renesto ivan@renesto.it

FRAMES: frameset <frameset rows=“150,*” …> La pagina viene suddivisa in due frame orizzontali, per RIGHE, di cui la prima, in altezza, va dal pixel 0 al pixel 150 <frameset rows=“150,*” …> Ivan Renesto ivan@renesto.it

FRAMES: frameset <frameset cols=“110,*” rows=“150,*” …> Ivan Renesto ivan@renesto.it

FRAMES: frameset Altre proprietà del tag <frameset>: frameborder “YES” “NO” border Es.: border=“0” framespacing Es.: framespacing=“0” Ivan Renesto ivan@renesto.it

FRAMES: frame Dopo aver definito un frameset, occorrerà definire i singoli frame e le loro eventuali proprietà: <frame> name src scrolling noresize </frame> Ivan Renesto ivan@renesto.it

FRAMES: esempio Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it

Ivan Renesto ivan@renesto.it