Che cos'è Internet? Che cos'è il World Wide Web?

Transcript

1 Che cos'è Internet? Internet viene definita come la Rete delle Reti e costituisce il più moderno sistema di comunicazione e di divulgazione dell'informazione oggi esistente. Internet collega fra di loro milioni di imprese, enti pubblici e singole persone utilizzando computers che fanno uso di linee telefoniche, linee private dedicate, satelliti per la comunicazione, ed altri mezzi trasmissivi per comunicare fra di loro. Un numero sempre più elevato di persone, in tutte le nazioni, sono connesse a Internet da casa, dall'ufficio o dalle scuole. Internet offre una varietà di servizi ed è in continua evoluzione. Fra i suoi servizi più comuni si possono annoverare: La Posta Elettronica; I Gruppi di Discussione; La pubblicazione delle pagine Web -HTTP-, il così detto World Wide Web; Il servizio di trasferimento file FTP - File Transfert Protocol ecc. Che cos'è il World Wide Web? Il World Wide Web (Grande Ragnatela Mondiale), chiamato anche Web, è la parte di Internet che supporta la multimedialità. Questo importantissimo sistema di comunicazione e distribuzione delle informazioni contiene un'immensa raccolta di documenti fra di loro collegati: le pagine web. Poiché il Web supporta testo, grafica, suoni e video, tutti questi elementi possono essere inclusi in una pagina Web. Un Sito Web è una raccolta di pagine Web gestite da qualcuno e memorizzate su un computer denominato Server Web. Qualsiasi computer che disponga del software adatto, e sia connesso a Internet, può funzionare come Server Web. Le pagine memorizzate sul Server vengono inviate a chi ne fa richiesta (Al computer Client). Il Browser è il software utilizzato dal computer Client per richiede al Server le pagine. Il Browser, appena la pagina richiesta sarà disponibile, provvederà anche a visualizzarne il contenuto (ad attivare il programma designato per ascoltarne i contenuti o per riprodurre i filmati ecc). Le pagine Web sono contenute in file con estensione.htm o.html e devono essere memorizzate - si file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (1 di 21)12/09/

2 dice pubblicate - sulla memoria di massa di un Server Web. Una pagina Web può essere collegata ad altre pagine, e questo collegamento viene effettuato attraverso l'uso dei collegamenti ipertestuali. Un collegamento ipertestuale (link) viene utilizzato, generalmente, per connettere una pagina Web ad un'altra sullo stesso server Web, ma può anche servire per connettere la pagina ad altre pagine su altri computer in qualsiasi parte del mondo. Che cos'è l'hypertext Markup Language? La creazione delle pagine Web viene effettuata utilizzando l'hyper Text Markup Language (o HTML). Questo linguaggio è caratterizzato da particolari marcatori, chiamati tag o markup, che servono per indicare i collegamenti ad altri documenti; contrassegnare il testo in modo da definire come dovrà essere visualizzato (font, dimensione dei caratteri, colori di primo piano e di sfondo); indicare la presenza di immagini, filmati ed altri oggetti (Le immagini e i filmati in realtà non sono fisicamente presenti nella pagina. I tag html servono per indicare i file che li contengono) ecc. Alcuni tag di esempio sono: <B>... </B> per marcare un un testo in grassetto, <P>... </P> per indicare un nuovo paragrafo, <HR> per visualizzare una linea orizzontale attraverso la pagina ecc. Per visualizzare una pagina Web scritta in HTML, si utilizza, come già si è detto, un programma denominato Browser Web. I Browser in commercio sono parecchi (alcuni hanno caratteristiche particolari e sono più adatti a un certo tipo di computer): i più usati sono però Internet Explorer e Netscape Navigator. Per garantire che i vari Browser possano interpretare tutti allo stesso modo l'html, esiste un'organizzazione chiamata "World Wide Web Consortium", la quale ha lo scopo di formalizzare gli standard del linguaggio HTLM. Ovviamente, per costruire una pagina Web è molto utile e comodo un Editor specialistico, adatto allo scopo, come può essere Front Page Express, l'editor stesso di Front Page, oppure Word in modalità costruzione pagina Html. Quando viene utilizzato un editor di questo tipo, i tag verranno automaticamente inseriti nel testo e saranno i vari pulsanti, messi a disposizione dell'editor stesso, a facilitare il lavoro di digitalizzazione. Inizialmente, però, per creare semplici pagine Web può essere utile il "Blocco Note". Questo programma è presente fra gli Accessori nella Barra delle Applicazioni del nostro computer. I tag, in questo caso, dovranno essere inseriti manualmente, ma questa operazione potrà essere utile per imparare ad utilizzarli e a comprenderne il funzionamento. Il Blocco Note è un Editor molto semplice ed ha un comportamento neutro - cioè non aggiunge alcun carattere di controllo al file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (2 di 21)12/09/

3 testo digitato. Il Blocco Note può quindi essere utilizzato per costruire la pagina Web completa di testo e tag. (La stessa cosa, volendo, può essere fatta con gli Editor specialistici, lavorando però in modalità HTML, modalità che permette di inserire direttamente i vari tag). Gli elementi di una pagina Web Il titolo di una pagina Web è di solito il primo elemento della pagina e ne identifica l'argomento o lo scopo. Quando si visualizza la pagina mediante un Browser, il titolo appare nella barra del titolo. Il titolo è anche il nome assegnato alla pagina quando quest'ultima viene inserita fra i siti preferiti del Browser (Internet Explorer). Il corpo della pagina Web contiene le informazioni visualizzate nella finestra del Browser. lo sfondo della pagina Web è simile a quello di Windows e può essere di un colore uniforme oppure il bianco o il grigio standard.(si può anche utilizzare un'immagine come sfondo) Il testo normale è il testo che costituisce il principale contenuto di una pagina Web e può essere utilizzato in molti formati (formato standard di paragrafo, elenco puntato o numerato ecc). Il testo normale può anche essere in grassetto (<B>), corsivo (<I>) o sottolineato (<U>), e può anche essere di colori diversi. I titoli sono utilizzati per staccare i paragrafi o sezioni di testo di una pagina. Sono espressi con una dimensione di carattere superiore a quella del testo normale (<H1>, <H2> ecc). Si parla poi di immagini in linea per indicare qualsiasi grafica o file di immagine che, anche se non fa parte del file HTML, viene visualizzata automaticamente all'interno della pagina. Il tag <IMG> serve per indicare al Browser quali file di immagine richiedere al server, come posizionarli nella pagina e come visualizzarli. Alcune immagini in linea possono essere animate per rendere più interessante la pagina (Gif animate). Un' immagine non in linea è invece un'immagine che viene collegata alla pagina mediante un collegamento ipertestuale (link) e che quindi non comparirà automaticamente durante la visualizzazione della pagina, ma potrà essere richiamata quando il visitatore farà click con il mouse su quel link. Un'area sensibile è una porzione dell'immagine che attiva una funzione quando viene selezionata. Uno dei più importanti elementi di una pagina Web è rappresentato dai collegamenti ipertestuali (link), o semplicemente collegamenti, che costituiscono il principale strumento per navigare tra le pagine. Facendo click su un collegamento, in genere, si richiede un file ad un Server o si indica al Browser di raggiungere una posizione in un file. Il file richiesto potrebbe essere una pagina Web, un'immagine, un suono, un elemento multimediale in file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (3 di 21)12/09/

4 genere, o persino un programma. I collegamenti consentono anche di attivare l'invio di messaggi di posta elettronica e possono essere realizzati, all'interno di una pagina Web, tramite testo o immagini. Le pagine web possono contenere dei programmi veri e propri (Applet o Script). Le Applet sono programmi in formato eseguibile - formato che ha però ancora bisogno di un programma del Browser per essere eseguito. Gli Script, invece, sono programmi in formato sorgente e verranno interpretati dal Browser appena la pagina sarà disponibile al Browser stesso. Le Applet e gli Script devono essere inclusi all'interno dei rispettivi tag APPLET e SCRIPT, e servono per rendere le pagine interattive. I tag HTML più comuni La maggior parte dei tag è composta da un tag di apertura e uno di chiusura e nell'indicarli non si fa distinzione fra il carattere maiuscolo e minuscolo. La prima serie di tag <HTML> e </HTML> indica l'inizio e la fine di un documento HTML. All'interno deve essere collocato l'intero documento in modo che possa essere interpretato dal Browser. <HEAD> e </HEAD> indica l'area in cui sarà posizionato il titolo della pagina ( <TITLE> e </TITLE> ) ed altri tag di intestazione. <BODY> e </BODY> indica i confini della pagina Web contenente testi, collegamenti ed altro. <HTML> <HEAD> <TITLE>La mia prima pagina WEB</TITLE> </HEAD> <BODY> </BODY> Contenuto della pagina </HTML> Il testo può essere racchiuso in vari tag: <P> e </P> indicano l'inizio e la fine di un nuovo paragrafo (il tag di chiusura non è obbligatorio). Viene inserita una riga vuota prima di ogni <P>. file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (4 di 21)12/09/

5 <BR> Interrompe una riga di testo nel punto in cui compare il tag (va a capo). <H1> e </H1> indica una riga che viene considerata titolo a livello 1 (esistono i tag H2, H3,.. H6) in cui i caratteri di testo vengono evidenziati in modo differente (H1 utilizza un carattere più grosso rispetto ad H2..). <HR> Inserisce una linea orizzontale. <UL> e </UL> Indica l'inizio e la fine di un elenco non ordinato (puntato). <LI> e </LI> Indica una voce in un elenco. <OL> e </OL> Indica l'inizio e la fine di un elenco ordinato o numerato. <H3>Linea Titolo formato 3</H3> <UL Type="disc" > <LI>Prima voce</li> <LI>Seconda voce</li> </UL> Il file precedente quando viene aperto dal Browser Internet Explorer produrrà: file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (5 di 21)12/09/

6 Notare come all'interno del tag <UL> sia stato utilizzato l'attributo TYPE="disc" per indicare che "la puntatura" deve essere effettuata utilizzando un cerchio pieno ("circle" avrebbe prodotto un cerchio vuoto, mentre "square" un quadratino pieno). Il precedente file verrà interpretato nel modo seguente: file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (6 di 21)12/09/

7 Ricordiamo che: Il tag <I>... </I> permette di ottenere un testo in corsivo. Il tag <B>... </B> permette di ottenere un testo in grassetto. Utilizzo del colore di sfondo e di testo Per cambiare il colore di sfondo di una pagina Web si può utilizzare l'attributo BGCOLOR nel tag <BODY>. Il colore può essere indicato utilizzando il codice corrispondente in Esadecimale (il blu chiaro ad esempio corrisponde a #94D6E7 <BODY BGCOLOR=#94D6E7>). Esistono alcuni colori predefiniti che sono indicabili fra doppi apici con i seguenti nomi: Silver,Gray,Marron,Green,Navy,Pink,Purple,Oliver,Teal White,Black,Red,Lime,Blue,Magenta,Yellow,Cyan Per quanto riguarda il colore del testo si può utilizzare il tag <FONT>.. </FONT>. Come attributo di questo tag si può utilizzare COLOR per indicare il colore, SIZE per indicare la dimensione del carattere (da 1 a 7 oppure valore relativi come +2), FACE per file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (7 di 21)12/09/

8 indicare il tipo di carattere. Nell'esempio seguente viene indicato un titolo centrato e un testo di colore blu con carattere Tahoma Utilizzo di un suono di sottofondo Il Tag <BGSOUND> imposta il file audio che dovrebbe essere riprodotto durante la visualizzazione della pagina. <BGSOUND SRC="Tstsuono.wav" LOOP="INFINITE"> file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (8 di 21)12/09/

9 Il parametro LOOP indica il numero di volte che il suono specificato deve attivarsi. Se per questo attributo si specifica "INFINITE", allora il suono viene ripetuto fino a che l'utente non esce dalla pagina o fa click sul pulsante Stop del Browser. Il parametro SRC indica al Browser dove trovare il file audio da suonare. I formati accettati variano: quelli più comuni sono i file audio di base (AU), i file MIDI (MID) e i file audio di Windows (WAV). I collegamenti ipertestuali di tipo testo I collegamenti ipertestuali, o più semplicemente link, sono utilizzati per connettere una pagina Web a un'altra pagina sullo stesso server Web, o su un altro server situato in qualsiasi angolo del mondo. Un link può anche indicare un collegamento ad un indirizzo di posta elettronica (facendo click su un link di questo genere sarà possibile inviare una all'indirizzo indicato nel link). E' possibile utilizzare testi o immagini come area sensibile per un collegamento. Un'area sensibile è un'area contenente un testo o un'immagine, sopra la quale il puntatore del mouse cambia aspetto, solitamente assumendo la forma di una mano puntata. I collegamenti in forma di testo sono generalmente sottolineati automaticamente e riportati in colore diverso. Quando si sposta il puntatore del mouse sopra un'area sensibile, nella barra di stato del Browser viene visualizzato anche l'url (l'indirizzo) di destinazione del collegamento. Per indicare un testo che rappresenti un collegamento ipertestuale occorre racchiuderlo nel tag <A>.. </A> (tag ancora). L'attributo HREF in questo tag serve per indicare l'url a cui ci si riferisce. Per un riferimento ad un altro sito web: <A HREF=" a SitoMondo</A> Nell'esempio precedente il testo "Collegamento a SitoMondo" viene utilizzato come collegamento ipertestuale (HREF indica l'url della pagina a cui ci si riferisce). Per un indirizzo di posta elettronica: <A HREF="mailto:... indirizzo di posta..."> Testo </A> Quando il visitatore farà click su questo link, avrà la possibilità di inviare un messaggio di posta elettronica, all'indirizzo indicato, mediante il programma di posta predefinito. Per un riferimento nell'ambito della stesso sito ad una determinata pagina <A HREF="paginanuova.htm">Testo</A> file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (9 di 21)12/09/

10 Nell'esempio precedente "paginanuova.htm" si trova nella stessa directory dove è situato il link. Per un pagina che si trova nella directory Dati a livello inferiore: <A HREF="Dati\paginanuova.htm"> A livello superiore: <A HREF="..\paginanuova.htm"> <A HREF="canzone.mp3"> La linea precedente indica un link ad una pagina che in realtà è un file binario compresso, contenente un brano musicale in formato Mp3. Facendo click su questo link, il Server fornirà il file, in questo caso il brano musicale, che verrà interpretato, non dal Browser che ne ha fatto richiesta, ma dal programma adibito, sul Client, all'elaborazione di quel tipo di file (il Real Player in questo caso ). Occorrerà, ovviamente, aspettare il tempo necessario per il Download. Questo tempo potrà anche essere di alcune decine di minuti se la linea di comunicazione utilizzata è lenta. Se il brano musicale si trova nello stesso sito della pagina e nella stessa directory, il tag utilizzato sarà del tutto simile a quello in cui si faceva riferimento a "paginanuova.htm". (invece di paginanuova.htm si indicherà il nome del file musicale, in questo caso con estensione.mp3). Occorre tener presente che il brano musicale potrebbe essere vincolato ai diritti d'autore, e che la sua diffusione attraverso il Web potrebbe violare questi diritti. Anche le immagini possono essere assogettate agli stessi diritti, per cui utilizzarle nelle proprie pagine, senza autorizzazione dell'autore, potrebbe portare alle stesse violazioni. A titolo informativo, si ricorda che un secondo di segnale musicale digitale non compresso richiede byte. I migliori modem non digitali oggi disponibili hanno una velocità massima teorica in ricezione di bit/sec. Ne consegue che la velocità di download è di qualche migliaio di byte al secondo e quindi per scaricare un brano di 4 minuti occorrerebbero quasi 3 ore. Mp3 è un metodo di compressione che permette di ridurre le dimensioni dei file di un fattore 12 rendendo il download 12 volte più veloce. Così lo stesso brano di quattro minuti richiederà circa un quarto d'ora alla stessa velocità. La compressione Mp3 prevede che vengano eliminate le parti del segnale che sono a frequenze poco sensibili per l'orecchio umano. Nonostante la drastica riduzione delle dimensioni dei file, rispetto a quelle originali non compressi, la qualità audio di un brano Mp3 è paragonabile a quella del CD, a patto che lo si ascolti tramite le schede audio e le casse del computer stesso. Per un riferimento nell'ambito di una posizione in una pagina: file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (10 di 21)12/09/

11 Un altro impiego del tag "ancora" è quello di consentire ai visitatori di muoversi all'interno di una singola pagina Web. Questa tecnica di collegamento è particolarmente utile nelle pagine molto lunghe. Anche un indice di collegamenti può essere utile per facilitare l'accesso ad aree diverse della stessa pagina Web. L'attributo NAME nel tag <A> consente di definire un target o segnalibro, e cioè un testo a cui è possibile fare riferimento in quella pagina da un altro punto della pagina o da un'altra pagina. Il tag <A> con l'attributo NAME andrà collocato per racchiudere il testo che si vuole segnalare (segnalibro). Sarà poi possibile collegarsi a quel particolare punto della pagina indicandone il nome dopo il carattere # nella definizione dell'indirizzo URL (attributo HREF) <A HREF="nuovapagina.htm#segnalibro1">... </A> permette di collegarsi a "nuovapagina.htm" nel punto in cui è stato definito "segnalibro1" Definizione di un segnalibro <A NAME="segnalibro1">...testo da referenziare... </A> I TAG di formattazione delle Tabelle Poiché il controllo sulla visualizzazione del testo in HTML è limitato, in conseguenza del fatto che il testo viene disposto a seconda di com'è al momento la dimensione della finestra con cui lavora il Browser, un ottimo strumento per avere un maggior controllo della disposizione del testo è costituito dalle Tabelle. All'interno delle tabelle verranno disposte le immagini e il testo, per fare in modo che il tutto non sia soggetto ad impaginazioni non appropriate. Il Tag <TABLE>... </TABLE> serve per definire una tabella. All'interno di questo tag se ne usa un altro per definire l'inizio di una nuova riga nella tabella: <TR>... </TR>. All'interno del tag <TR> si usa poi il Tag <TD>... </TD> per contrassegnare il contenuto di una cella. Il Tag <TH>... </TH> viene utilizzato per l'intestazione della Tabella. Esempio: <HTML> <HEAD> <TITLE>Esempio di Tabella</TITLE> </HEAD> file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (11 di 21)12/09/

12 <BODY> <H2>ELENCO PRODOTTI</H2> <TABLE cellpadding=3 border=1> <TR> <TH colspan=2>prodotto</th> <TH>Quantità</TH> <TH>Prezzo</TH> <TH>Totale</TH> </TR> <TR> <TD> </TD> <TD>Stampante</TD> <TD align=center>3</td> <TD align=right>l </TD> <TD align=right>l </TD> </TR> <TR> <TD> </TD> <TD>Video</TD> <TD align=center>2</td> <TD align=right>l </TD> <TD align=right>l </TD> </TR> <TR> <TD colspan=4 align=right><b>totale:</b></td> <TD align=right>l </TD> </TR> </TABLE> </BODY> </HTML> file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (12 di 21)12/09/

13 Vediamo ora alcuni Parametri dei Tag utilizzati per la costruzione delle Tabelle: Parametri del Tag TABLE ALIGN BACKGROUND BGCOLOR BORDER CELLPADDING CELLSPACING COLS HEIGHT WIDTH Specifica se la tabella va allineata sul lato destro o sinistro della pagina. Specifica un immagine da utilizzare come sfondo della tabella. Specifica il colore da utilizzare come sfondo della tabella. Specifica la larghezza del bordo attorno alle celle della tabella, se si utilizza zero, non verrà mostrato alcun bordo. Specifica il numero di pixel fra il bordo di ciascuna cella e il suo contenuto. Specifica il numero di pixel fra le celle della tabella. Specifica il numero di colonne di una tabella; questo valore non è richiesto perché la tabella conta automaticamente il numero di colonne presenti. Specifica, in pixel o in percentuale, l'altezza della tabella. Specifica, in pixel o in percentuale, la larghezza della tabella. Parametri del Tag TR ALIGN Specifica se il contenuto delle celle di una riga va allineato al centro o sul lato destro o sinistro della pagina. file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (13 di 21)12/09/

14 BACKGROUND BGCOLOR Specifica un'immagine da utilizzare come sfondo delle celle nella riga Specifica il colore da utilizzare come sfondo per le celle nella riga. Parametri del Tag TH ALIGN BACKGROUND BGCOLOR COLSPAN VALIGN WIDTH Specifica se il contenuto delle celle di una riga va allineato al centro o sul lato destro o sinistro della pagina. Specifica un'immagine da utilizzare come sfondo delle celle nella riga. Specifica il colore di sfondo delle celle nella riga. Specifica il numero di colonne su cui si estende l'intestazione. Specifica il numero di righe su cui si estende l'intestazione. Specifica la larghezza della cella; la larghezza maggiore, utilizzata per la colonna, verrà utilizzata anche per tutte le sue celle. Parametri del Tag TD ALIGN BACKGROUND BGCOLOR COLSPAN VALIGN WIDTH Specifica se il contenuto delle celle di una riga va allineato al centro o sul lato destro o sinistro della pagina. Specifica un'immagine da utilizzare come sfondo delle celle nella riga. Specifica il colore di sfondo delle celle nella riga. Specifica il numero di colonne su cui si espande la cella. Specifica il numero di righe su cui si estende la tabella. Specifica la larghezza della cella. La larghezza maggiore, utilizzata per la colonna, verrà utilizzata anche per tutte le sue celle. Immagini nelle pagine Web Le immagini possono essere utilizzate come sfondi, linee orizzontali, o come disegni od elementi grafici per migliorare l'aspetto di una pagina Web. Le immagini possono anche essere utilizzate per il collegamento ad altre pagine (Come Link). Esistono due classi di immagini: in linea ed esterne o non in linea. Le immagini in linea sono quelle che vengono visualizzate direttamente nella pagina Web insieme al testo. Le immagini esterne verranno invece visualizzate quando un visitatore farà click su un file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (14 di 21)12/09/

15 collegamento. Esistono tre tipi di formati per le immagini utilizzabili nel Web: JPEG, GIF, PNG. JPEG Joint Photographics Group GIF Graphics Intercange Format PNG Portable Network Graphics Un file JPEG (.jpg o.jpe o.jpeg) rappresenta un'immagine grafica che viene salvata utilizzando tecniche di compressione per ridurre il numero di byte necessari. Quando viene creata un immagine JPEG è possibile specificare un fattore di qualità per raggiungere un equilibrio tra la qualità stessa e la dimensione del file. I file JPEG sono spesso utilizzati per le fotografie perché supportano milioni di colori (generalmente sono immagini molto complesse). Le immagini in formato.jpg sfruttano la tecnica di compressione JPEG che suddivide l'immagine in quadrati di 8x8 pixel, e a ognuno di essi applica prima un algoritmo detto DTC (direct trasform cosine) e poi, al risultato di questo, una combinazione delle due tecniche di compressione RLE ed Entropica in cui i simboli più frequentemente usati vengono codificati con meno bit degli altri. Il risultato è una compressione di un fattore 2 o superiore senza perdita di informazione. Con un trattamento più "spinto" si entra nella compressione Trasparent, dove al prezzo di una perdita d'informazione minima, quasi impercettibile, si ottiene una riduzione della dimensione dei file di un fattore 25; volendo poi accettare un lieve ma percettibile degrado dell'immagine si può comprimere anche di cento volte (compressione Lossy). Un file GIF (.gif) rappresenta un'immagine trattata anche lei con una tecnica di compressione. I file GIF supportano meno colori rispetto ai file JPEG, cosa che li rende non molto efficaci per le foto acquisite da scanner. La tecnica utilizzata per comprimere i file GIF (chiamata compressione LZW) è brevettata, perciò le aziende che offrono prodotti con il formato di file GIF devono ottenere la licenza d'uso. Questo non vale, fortunatamente, per gli utenti tipici del Web. Le immagini GIF interlacciate vengono visualizzate iniziando con una versione a bassa risoluzione che diventa via via più definita. Si tratta di una buona tecnica per le immagini di grandi dimensioni perché il visitatore della pagina Web può vedere subito i contorni dell'immagine che si sta formando. Con le immagini Gif si possono avere sfondi trasparenti e sono anche possibili le animazioni (Gif animate). Il terzo tipo di file immagine è PNG (.png o.ping). Si tratta di un'alternativa rispetto ai file GIF, oltretutto senza vincoli di brevetto. Il formato PNG è stato sviluppato e approvato dal World Wide Web Consortium come standard grafico per Internet. Anche questo è un formato di file compresso che supporta colori e risoluzioni multiple, ma non è supportato da tutti i Browser attuali. Per inserire un'immagine come sfondo della pagina Web si utilizza l'attributo file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (15 di 21)12/09/

16 BACKGROUND nel tag BODY ( <BODY BACKGROUND="gatto.gif">) Il tag <IMG>, con i suoi attributi, viene utilizzato per inserire nella pagina Web un'immagine il linea. L'attributo SRC viene utilizzato all'interno di questo tag per definire l'url da caricare. L'attributo ALIGN servirà per definire l'allineamento che può essere BOTTOM, CENTER, TOP, LEFT, RIGHT. L'attributo ALT servirà per definire il testo il testo alternativo da utilizzare quando non sarà possibile visualizzare l'immagine. Gli attributi HEIGHT e WIDTH definiranno le dimensioni dell'immagine in altezza e in larghezza. BORDER l'ampiezza del bordo da applicare. Con un bordo un'immagine viene visualizzata come se avesse una cornice intorno. Se l'immagine viene utilizzata come link, il bordo intorno viene visualizzato automaticamente con i colori predefiniti per i collegamenti normali, attivi o visitati. Anche la spaziatura tra e intorno alle immagini è importante. Con gli attributi HSPACE e VSPACE viene controllata la quantità di spazio orizzontale e verticale intorno a un'immagine. Si ottiene ad esempio uno spazio aggiuntivo verticale sopra e sotto l'immagine impostando VSPACE=20. <IMG ALING="CENTER" SRC="foto.jpg" HEIGHT=500 WIDTH=400> Nell'esempio seguente viene inserita nella pagina un'immagine con un testo a fianco file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (16 di 21)12/09/

17 Il Link seguente serve per attivare con un click la visualizzazione di un'immagine fuori linea. Se il file referenziante l'immagine non è un.htm, e cioè nel link si fa riferimento direttamente al file immagine compresso, allora l'immagine inviata verrà aperta dal Client con il programma adibito ad aprire automaticamente i file di quel tipo (Potrebbe essere lo stesso Internet Explorer oppure un programma di composizione e trattamento delle immagini a seconda delle impostazioni presenti in Opzioni Cartella - Tipi di File, nella voce - Impostazioni, nella barra delle Applicazioni e Menù di avvio.). Foto di una moto nel deserto Molti problemi derivanti dalla lentezza nel caricamento in linea delle immagini vengono risolti sostituendo le immagini originali con immagini più piccole. Le immagini ridotte vengono dette miniature e costituiranno i link alle immagini originali. La pagina, in questo modo, risulterà molto meno pesante. Ovviamente le immagini a dimensione originale saranno fuori linea e potranno essere visualizzate facendo click sulla rispettiva miniatura. E' possibile creare una miniatura di un'immagine modificandone le dimensioni dell'originale e salvando il file con un altro nome. <A HREF="immagineoriginale.jpg"><IMG SRC="miniatura.jpg"></A> file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (17 di 21)12/09/

18 Se il visitatore fa click sulla miniatura verrà visualizzata l'immagine grande. Per tornare alla pagina si può utilizzare il pulsante indietro del Browser se l' immagine, ovviamente, viene visualizzata da questo programma. Nell'esempio seguente vengono presentate quattro foto mediante le loro corrispondenti miniature. Queste sono state inserite in una tabella di due righe e quattro colonne, per fare in modo che le corrispondenti didascalie risultino ordinate rispetto alle miniature stesse. Per visualizzare i tag utilizzati per la formalizzazione della tabella si può attivare la "Visualizzazzione Html"del Browser. Le foto presentate si riferiscono alla rievocazione del Gran Premio di Formula 1 al Valentino (Torino) tenutasi nell'autunno dell'anno Cisitalia Lancia F1 Alfa Romeo F1 Maserati F1 Di seguito vengono presentate alcune foto, di carattere sportivo, che per la precisione si riferiscono all'arrivo di una Maratona di Torino, a delle fasi di un'altra Maratona (sempre di Torino) dove si vedono Panetta e la Fiacconi, e al Campionato del Mondo di Corsa Campestre svoltosi qualche anno fa al Valentino (Torino). Il Vincitore Durbano (2) Il Terzo classificato Munerotto (1F) file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (18 di 21)12/09/

19 Anche una foto presa da un giornale può servire per ricordare un avvenimento ed essere inserita in una pagina Web, direttamente o come miniatura. La foto che segue è stata riprodotta, mediante scanner, da un quotidiano della città, e per la cronaca ricorda l'arrivo vittorioso del grande Paul Tergat al Cross Mondiale del Valentino. file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (19 di 21)12/09/

20 Creazione di frame in una pagina Web Un frame è un'area rettangolare in cui possono apparire testi e immagini. I frame vengono utilizzati per dividere una pagina Web in una o più finestre; ogni frame visualizza una pagina distinta che può interagire con le altre. Per utilizzare i frame occorre definire un file di definizione in HTML con una combinazione di tre tag e vari attributi per il layout. I tag sono: <FRAMESET>, <FRAME> e <NOFRAMES>. Per ogni tag iniziale <FRAMESET> deve esistere un tag finale </ FRAMESET>. All'interno di una coppia di tag <FRAMESET> ogni frame va definito da un tag <FRAME> senza tag finale </FRAME>. Si utilizza <NOFRAMES> per specificare un testo alternativo da visualizzare se il Browser non supporta i frames; deve esserci un tag finale </NOFRAMES> <HTML> <HEAD> <TITLE>Esempio di due frame orizzontali</title> </HEAD> <FRAMSET ROWS="30%, 70%"> <FRAME SRC="menu2.htm"> <FRAME SRC="home2.htm" NAME="Finestra-Principale"> </FRAMESET> </HTML> Nell'esempio precedente vengono definiti due frame orizzontali (uno occupa il 30% del video l'altro il 70%) in cui verranno caricate le due pagine indicate. Se invece di utilizzare l'attributo ROWS si fosse utilizzato l'attributo COLS i due frames sarebbero stati posti in verticale. file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (20 di 21)12/09/

21 Nell'esempio precedente viene definita la separazione orizzontale della pagina in due frame il secondo dei quali a sua volta viene suddiviso in due frame verticali file:///c /Documenti-Disco-40/DatiSalvati/utilità/appunti%20HTML-SCRIPT/appuntihtml.htm (21 di 21)12/09/