ivan [email protected] corso di informatica ecdl ivan renesto [email protected] +393477224641

Ivan Renesto [email protected] 1

Corso di InformaticaECDL

Ivan [email protected]

+393477224641


Libri di Testo Patente Europea del Computer

VOLUME 1 VOLUME 2

Autori: Dameri, Foresti Jackson Libri


Modulo 7Reti 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


Modulo 7Reti Informatiche Volume II

Messaggi ………………………………… 241 Indirizzi …………………………………… 261 Gestione dei messaggi ……………… 268

Volume I Reti Informatiche ……………………. 33


Indice Argomenti Reti Locali La rete delle reti File Transfer Protocol Navigare in Internet La Posta Outlook HTML: introduzione al linguaggio


Reti Locali (LAN)

LAN: Local Area Network

“Un insieme di computer tra loro connessi”

Mezzo trasmissivo utilizzatoper interconnettere gli elaboratori

Una rete locale si sviluppaall’interno

di spazi limitati


Reti Locali a Bus

Mezzo trasmissivo condiviso

(cavo coassiale)

Terminatore(assorbe i segnali)

Ogni computer, per mezzo del proprio hardware(es.: scheda di rete), si connetterà al mezzo trasmissivo


Comunicazione

1 2 3

Mitt.Dest.Indirizzo

Computer mittenteIndirizzoComputer destinatario

Scambio di “pacchetti”

a 2da1creazione

a 2da1

a 2da1

a 2da1

Il segnale si propagain entrambe le direzioni

x

assorbimento

a 2da1

a 2da1

Messaggio a destinazione!

x

assorbimento

a 2da1

Il messaggio viene “scartato”dal computer 3, perché non destinato

ad esso!


Comunicazione: protocolli

1 2 3

Protocollo: insieme di regoleTra i più usati nelle reti troviamo i protocolli TCP/IP

TCP/IP: astrattamente, consistonoin un insieme di regole che consentono a piùcomputer di portare a termine, in modo completoe corretto, uno o più scambi di informazioni

Collisione di due pacchetti di dati


Suite di protocolli TCP/IP

Pagina web

Pagina webTCP

Pagina webTCPIP

Pagina webTCPIP

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à

Informazioni aggiunte

da ogni livello

Ethernet

IP

TCP

HTTPProtocollo trasferimento Hyper Testi

Transport Control Protocol

Internet Protocol

LIVELLO SOFTWARE

LIVELLO SOFTWARE

LIVELLO SOFTWARE

LIVELLO HARDWARE


Reti Locali a Stella

Il mezzo trasmissivo non è più

condiviso

Il mezzo trasmissivo non è più il cavo coassiale, bensì il DOPPINO

TELEFONICO

Esiste un dispositivo che sarà ilcentro nevralgico della rete, e

potràpresentarsi in due modi differenti:1) HUB

2) SWITCH


Comunicazione

2 1

3

4

5

6

HUB

Il computer 1 inizia un trasferimento di file con il computer 3

Il messaggio giunge a destinazione!

1

XIl messaggio viene scartato



X Il messaggio viene scartato

E così via, ogni pacchetto, che l’hub riceve da un computer, viene ritrasmesso su tutti i collegamenti verso gli altri computer


Comunicazione

2 1

3

4

5

6

SWITCH

ab

c

d

ef

Link Computera

bcdef

216543

Lo switch, più intelligentemente, controllerà la destinazione del pacchetto e, grazie alla sua tabella di routing, lo smisterà unicamente sul link opportuno


La rete delle retiInternet: in modo astratto può esserevisto come un insieme di collegamentie nodi

Consente a due o più computer remoti di mettersi in comunicazione

Internet si appoggiamolto sulla rete telefonica

ISP (Internet Service Provider)

Router

I nodi della rete

I dati viaggiano sulla rete sotto forma di pacchetti.Essi saranno caratterizzati da:1. indirizzo computer mittente 2. indirizzo computer destinazione


Commutazione di pacchetto

Router

Router

Router

ISP

ISP

congestione


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


IP

Indirizzi IP

Livello di rete(IP: Internet Protocol)

Si occupa di trasmettere pacchettidalla sorgente alla destinazione


Indirizzi IP

Internet

Sorgente Destinazione

Indirizzo IPsorgente

Indirizzo IPdestinazion

e


Indirizzi IP

A . B . C . D

Numero tra 0 e 255

193.68.211.5


Indirizzi IP

Un indirizzo IP è un numero a 32 bit

8 bit 8 bit 8 bit 8 bit

28= 256

Può essere scomposto in 4 numeri da 8 bit

Ognuno di questi numeri potrà assumere256 valori: da 0 a 255


Indirizzi IP

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)-…

127.0.0.1 127.0.0.1

192.168.0.3 192.168.0.4modem

Internet

253.13.62.9

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 (…)


Nomi SimboliciGli indirizzi numerici sono pratici da gestire inmodo automatico, ma non lo sono dal punto

di vista della memorizzazione umana

Ad ogni indirizzo numericopuò essere associato un nome

simbolico

http://www.lastampa.it/redazione/default.asp

Protocollo di comunicazioneIdentifica un computer in reteIdentifica un percorso, espresso in termini

assoluti, intendendo come radice del percorsouna cartella condivisa del computer identificato

dal nome precedente

Nome del documento web da visualizzare


Nomi Simbolici: URL

http://www.lastampa.it

URLDominio

EstensioneTipo di servizio:

www(World Wide Web)


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) …


Protocolli di comunicazione

LVL 0

LVL 1

LVL 2

LVL 3

Ethernet

IP

TCP

HTTP, FTP, …

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.

La suite di protocolli TCP/IP è definita“Paritetica”


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


FTPFile Transfer

Protocol


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)


FTP: Uso Due sono gli applicativi software

necessari all’uso pratico di questo protocollo: FTP Server FTP Client


FTP: funzionamento

Internet, LAN, …(una rete qualsiasi)

Internet, LAN, …(una rete qualsiasi)

FTPClient

FTPServer

192.168.0.1 192.168.0.2

Passo 1:Il computer 192.168.0.1vuole trasferire file da/ail computer 192.168.0.2

Passo 2:Il computer 192.168.0.1che 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.2deve possedere a sua volta un FTP Server attivo, per poter accettare connessioni da un qualsiasi 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


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


FTP: Interfaccia testuale

help: listato dei comandi disponibili

help <comando>: descrizione del comando


FTP: GUI

Nella barra Indirizzo occorrerà specificare di voler usareil 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>

Una interfaccia grafica per effettuareFTP è costituita da Microsoft Explorer


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


FTP: autenticazionePer completare l’autenticazione dell’utente a cui

sta per essere dato l’accesso al servizio FTP con determinatiprivilegi, occorre inserire la password


FTP: finestra client

Ora è possibile trasferire fileo cartelle in modo analogo aquando si opera con una normalefinestra d’accesso ad una risorsa


Web Browsing

Navigare in Internet


Navigare in Internet Concetti fondamentali:

Navigare Sito Pagina Web Portale Server HTTP Client HTTP: Browser


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 …


Un sito Internet

.jsp.jsp

.php.php

Una pagina web è un documento consultabile in

internet tramite un browser

Un sito web è una collezione di

documenti webTutti i documenti

web del sito possono essere

tra loro collegati, mediante link

I link sono collegamenti, impostati dal creatore

della pagina web, cliccando sui quali è

possibile navigare verso un successivo

documento web

La prima pagina di ogni sito, per convenzione,

dovrebbe chiamarsi:-index.htm-index.html

Un portale è un sito che offre un punto d’accesso

per molti e svariati servizi


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


Cosa succedeHTTP Server

Router

ISP

L’utente vorrebbe

navigare in internet …

…Stabilisce una connessione col

suo ISP …Scambio di informazioni:

-MTU-Login-Password-…

Connettersi equivale a fare una telefonata

all’ISP

Il tempo della telefonata sarà

equivalente al tempo di connessione

Se l’Internet Service Provider si trova ad Aberdeen (Scozia)

la chiamata sarà internazionale!!!

Il risparmio si trova nella scelta dell’ISP più vicino


Cosa succede: navigando

http://www.meteo.it

Messaggio di richiesta di visualizzazione del sito:

http://www.meteo.it

GET

www.meteo.it

HTTP 1.1

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

Il messaggio ricevuto viene scartato, la pagina web in

esso contenuta viene passata al browser che provvede a visualizzarla


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


Il Browser: Microsoft Explorer

Barra del titoloPulsanti di controlloBarra dei

menu

FileModificaVisualizza

PreferitiStrumenti

Aiuto

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

Pagina Web

Rappresentazione grafica di un documento internet così come il

browser lo visualizza


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


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


Impostazioni: Pagina iniziale

Per richiamare, in qualsiasi momento, la pagina

impostata come iniziale sarà sufficiente premere su questo pulsante, sulla

barra degli strumenti: Standard


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…


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


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


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


Cronologia: scorrere la lista È possibile scorrere la lista

cronologica dei siti visitati con i pulsanti:

Avanti Indietro

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

Pulsante attivato

Indica che la lista cronologica dei siti non è vuota, e che è possibile visionare

quali siti sono stati visitati precedentemente


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


Caching: funzionamentoZona del disco locale: CacheA. http://www.meteo.it

AB. http://www.virgilio.it

B

C. http://www.edes.it

CD

D. http://www.renesto.it

E

E. http://www.manzoni.it


Caching: utilizzo dal browser

A

CB

D

E

Supponiamo ora l’utente voglia rivisitare il sito B

A

EC D

B

B

Digitando il nome del sito nella casella Indirizzo e

premendo [INVIO] il browser si adopera per recuperare la pagina web richiesta e per

visualizzarla

Come?Preparando un messaggio di richiesta,

inviandolo e aspettando di ricevere in risposta la pagina

web?

GET B HTTP 1.1NO!

Prima il browser controlla se la pagina web richiesta

è presente nella cache


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


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


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


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…


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)


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


Una Pagina WebLink alla sezione sport del quotidiano la stampa

Link alla sezione news high tech del quotidiano la stampa Link ad una delle

novità del giorno: Cyberlibri

Link alla pagina web relativa alle Cronache italiane


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


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


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


www.google.itCasella di inserimento dei criteri

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


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


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


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


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


Criteri di ricerca: esempio 1 A B

Vengono trovate tutte le pagine web che contengono:

A, B B, A A B


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


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


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


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


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


Operatori Logici OR

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


Risultato di una ricercaCriterio

utilizzato nella ricerca

Risultati della ricercaPrimo

risultato

Secondo risultato

Terzo risultato

Link per accedere direttamente al

sito

Breve descrizione del contenuto del sito trovato:

le parole chiave del criterio vengono

evidenziate rispetto le altre

Indirizzo preciso della pagina web trovata, con

indicazione della dimensione del

documento


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


Preferiti È possibile accedere a questo

strumento mediante: il menu Preferiti, dalla barra dei

menu il pulsante Preferiti dalla barra

degli strumenti standard


Preferiti: il menu 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

Sezione superiore del menu Preferiti

Sezione inferiore del menu Preferiti

Aggiungi a Preferiti…

Organizza Preferiti…


Preferiti: pulsante 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…

Organizza…

Preferiti


La Posta

Funzionamento del meccanismo postale via Internet e gestione della

posta


La posta: invio

[email protected]

[email protected]

2,5 MB

5 MB

Steve Red

Luigi Bianchi

Mail box

Casella di posta

Invio di una mail

X


La posta: ricezione

[email protected]

[email protected]

2,5 MB

5 MB

Steve Red

Luigi Bianchi

Mail box

Casella di posta

Ricezione delle mail

Richiesta all’ISP presso il quale Possediamo una casella di posta

La posta viene trasferita dalla casellapostale (mail box) remota al disco localedell’elaboratore


Outlook

Creare un nuovo messaggio

Posta ricevuta


Nuovo messaggio

Accoderà il messaggio in attesadi invio

Indirizzo del destinatarioIndirizzo di ulteriori destinatari

Oggetto del messaggio(identificherà la mail insieme al destinatario)

Corpo del messaggio

Barra di Formattazione del testo del messaggio


Allegati

Consente di allegare un filealla mail, come utilizzandoil menù Inserisci Allegato…


Allegati

Selezione del file da allegare

Allega il file selezionato


Allegati

Elenco dei file allegati


Allegati

La mail scritta viene temporaneamente depositatanella 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 ilpulsante “Invia/Ricevi”


Leggere e-mail

Per leggere una e-mail ricevuta occorreeseguire un doppio click sulla e-mail


HTMLIntroduzione al linguaggio


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

Lingua inglese Autori: Chuck Musciano,

Bill Kennedy


Creare una pagina Web Strumenti di lavoro

Browser: Netscape Navigator Opera Microsoft Explorer …

Editor (HTML) NotePad NoteTab Light Arachnophilia Macromedia DreamWeaver …


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


Avvio del Blocco Note


Salvare Documenti Web


Salvare le modifiche ad un Documento Web

• Si seleziona il menù File

• Si seleziona il comando Salva


Area di Lavoro: Work Space


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


HTML: TAG fondamentali

Codice HTML associato ad una semplice pagina web di

benvenuto

Documento Web visualizzato dal browser Microsoft Explorer


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


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


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>


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à


Proprietà di un TAG

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

<nome_tag proprietà=“valore_proprietà”>


TAG: <font> <font>

size dimensione del font

color colore del font

face stile del font

</font>


Esempi di uso dei TAG


TAGs: <tt>, <i>, <b>, <big>, <small>

<tt> Teletype Text

(monospaced text)

<i> Italic Text

<b> Bold Text

<s> Stroke Text

<u> Underlined Text

<big> Big Text

<small> Small Text


TAGs: Formattazione testo


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


CSS: definizione interna Avviene mediante il tag <style>

Esempio:

<style type=“text/css”>

…

</style>


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


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à


CSS: foglio di stile Sintassi corretta per un blocco di

dichiarazioni:selettore {

proprietà1: valore;proprietà2: valore;…proprietàn: valore

}


CSS: foglio di stile

1. Scrittura pagina web2. Definizione foglio di stile


CSS: foglio di stile Proprietà di formattazione e

allineamento del testo: font-family font-size font-weight font-style text-align text-indent


CSS: font-family Valori possibili:

“Times New Roman” “Arial” “serif” “fantasy” …


CSS: font-size Possibili valori

assoluti: xx-small x-small small medium large x-large xx-large

Possibili valori relativi: larger smaller


CSS: font-weight Normal Bold Bolder lighter

100 200 300 400 500 600 700 800 900


CSS: font-style Possibili valori:

normal italic oblique


CSS: text-align Valori possibili:

left right center justify


CSS: text-indent Indentazione del testo esprimibile

come lunghezza: “.5in” “15px”

Indentazione esprimibile come percentuale: “10%”


CSS: esempio 1. Creazione documento web

css2.htm 2. Creazione foglio di stile

css2.css 3. Visualizzazione mediante il

browser


Tabelle Una tabella è definita da un

apposito tag: <table>

… contenuto della tabella … </table>


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>


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


<table>: align I valori possibili di questo tag

(deprecato) sono: left

Allineamento a sinistra

right Allineamento a destra

center Allineamento centrato


<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%”


<table>: bgcolor Ci consente di esprimere un colore

di sfondo per la tabella: Es.: bgcolor=“orange” Es.: bgcolor=“#44F31A”


<table>: border Permette di definire uno specifico

spessore per i bordi delle tabelle: Es.:

border=“0” (nessun bordo) border=“1” border=“2” …


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


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>


Tabelle: <tr>, <td>, <th> Applicando la sequenza di passi

(algoritmo) descritto in precedenza, sarà possibile definire il contenuto di una semplice tabella


Tabelle: Esempio di codice HTML

<table>

<tr>

<td> Cella 1 </td> <!– Prima riga, prima colonna ->

<td> Cella 2 </td> <!– Prima riga, seconda colonna ->

</tr>

<tr>

<td> Cella 3 </td> <!– Seconda riga, prima colonna ->

<td> Cella 4 </td> <!– Seconda riga, seconda colonna ->

</tr>

</table>


Tabelle: titolo E’ possibile dare un titolo ad una

tabella usando il tag: <caption> Es.:

<table>

<caption><em>My Table</em></caption>

…

</table>


Tabelle: span E’ possibile definire uno “span” su:

righe: 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>


Tabelle: esempio


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


LINK Il tag per creare un link ad una

risorsa è: <a> Es.:

<a href=“X.htm”>

questo è un link al documento X.htm

</a>


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


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)


LINK: esempio Creazione di un documento chiamato:

pagina1.htm Creazione di un documento chiamato:

pagina2.htm Creazione dei link che collegano

entrambi i documenti è che permettono di passare dall’uno all’altro


LINK: esempio


FRAMES Parti di documento che

rappresentano documenti indipendenti

Necessitano di duplice definizione: Nell’insieme, mediante il tag:

<frameset>

Individualmente, mediante il tag: <frame>


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


FRAMES: frameset

<frameset cols=“110,*” …>

tag che indica le caratteristiche dei frame,

nell’insieme, che costituiranno la pagina

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


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


FRAMES: frameset<frameset cols=“110,*” rows=“150,*” …>

110

150


FRAMES: frameset Altre proprietà del tag

<frameset>: frameborder

“YES” “NO”

border Es.: border=“0”

framespacing Es.: framespacing=“0”


FRAMES: frame Dopo aver definito un frameset,

occorrerà definire i singoli frame e le loro eventuali proprietà: <frame>

name src scrolling noresize

</frame>


FRAMES: esempio

ivan [email protected] corso di informatica ecdl ivan renesto [email protected] +393477224641

Documents