HTML per i principianti - I siti personali - Libero

HTML per i principianti

A Cura di ANTONIO FAVINO

La riproduzione, anche parziale, del presente manuale è vietata senza un’esplicita autorizzazione dell’autore ANTONIO FAVINO

HTML peri principianti

Pag.1

15/03/01

15.21


PRIMA DI TUTTO PARLIAMO DI INTERNET Fino a qualche anno fa pochissimi erano a conoscenza dell’esistenza di Internet. Infatti la rete era un fenomeno noto ad alcuni ricercatori universitari, e gli scambi di informazioni avvenivano quasi unicamente in lingua inglese. Al massimo, adoperando i collegamenti telefonici, qualche appassionato di computer si connetteva alle cosiddette BBS, che erano (e sono anche oggi), delle specie di “bacheche elettroniche” in grado di offrire agli utenti una serie di servizi telematici. In realtà Internet è una rete di computer a sua volta formata da altre reti di computer, ed è nata dall’esigenza del Dipartimento alla Difesa statunitense di poter adoperare un sistema di comunicazione in grado di garantire le trasmissioni anche in caso di conflitti atomici. Questa rete telematica era in grado di ricercare i percorsi di trasmissione in modo automatico, identificando tragitti alternativi ovunque vi fossero interruzioni nelle linee telefoniche. Una rete così efficiente serviva per mantenere le comunicazioni tra le strutture militari e i laboratori di ricerca delle università. L’idea, nata verso la fine degli anni ’60, era vincente e, purtroppo, la sua efficacia si è drammaticamente dimostrata, ad esempio, nel corso della guerra nel Kosovo: chiunque, collegandosi ad Internet, poteva assistere in diretta a tutto ciò che avveniva nella città di Belgrado, pur essendo questa isolata da qualsiasi altra forma di comunicazione. La rete militare originaria, che possiamo considerare progenitrice di Internet, aveva un nome un po’ curioso: Arpanet. Negli anni ‘80 Arpanet venne abbandonata per la creazione di una nuova rete ad esclusivo utilizzo militare, così il sistema restò a disposizione di ricercatori e universitari che, in breve tempo, si resero conto che poteva essere utilizzato anche per scopi diversi dalla semplice trasmissione di informazioni professionali. A facilitarne la diffusione contribuì anche il fatto che, in breve, quelle notizie che erano ad uso esclusivo degli specialisti vennero messe a disposizione di chiunque potesse collegarsi alla rete. Circa dieci anni fa venne poi sviluppato un linguaggio, l’HTML, in grado di introdurre contenuti multimediali nella documentazione destinata alla rete. La disponibilità di un codice in grado di arricchire i contenuti dei documenti è servita da impulso all’utilizzo generalizzato di Internet, contribuendo in modo definitivo alla sua diffusione. La creazione del linguaggio HTML ha permesso quindi la crescita del World Wide Web che, tradotto, significa più o meno smisurata ragnatela mondiale. Vista la lunghezza di questo nome, spesso si ricorre all’abbreviazione WWW. In alternativa, il World Wide Web

ANTONIO FAVINO


Pag.2

15/03/01

15.21

può essere semplicemente chiamato Web, o anche W3. A questo punto dovrebbe essere abbastanza evidente come il Web sia solo una parte di Internet, anche se, di fatto, nell’idea di molti le due cose coincidono. Ma come funziona il Web? Finora abbiamo visto che si tratta di una rete a sua volta costituita da altre reti di elaboratori. Il suo pregio sta nella capacità di mettere in comunicazione computer molto diversi tra loro, situati in qualsiasi punto del pianeta, indipendentemente dal sistema costruttivo con cui sono stati progettati. Questo è un vantaggio non indifferente, perché permette il dialogo tra macchine che parlano linguaggi diversi. Inoltre, per mezzo di Internet, è possibile accedere a un numero praticamente illimitato di archivi e di informazioni. Vi è da sottolineare che il Web, essendo costituito da un insieme di reti, non appartiene a nessun ente o stato, di conseguenza non è possibile intervenire con censure o restrizioni per “governarne” i contenuti. Questo significa poter consultare le informazioni direttamente dagli enti universitari che le hanno raccolte, o conoscere le situazioni di popoli o realtà geografiche altrimenti non raggiungibili in altro modo. Per un alunno, e per i suoi professori, tale immensa opportunità comporta l’avere a disposizione notizie su qualsiasi argomento, raggiungibili in modo immediato e, tutto sommato, semplice; permettendo quindi di giungere all’informazione direttamente presso la fonte che l’ha generata. La struttura della rete Internet si basa sulla presenza di fornitori di accesso detti ISP (Internet Service Provider), comunemente chiamati Provider. Gli ISP, a loro volta, si collegano ai National Service Provider (NSP), i quali utilizzano linee molto potenti che rappresentano l’ossatura su cui si regge tutto il sistema di Internet. Per questo motivo essa è una rete di reti. Come si vede, quindi, per poter usare la Rete è necessario il collegamento ad un Provider (ISP). I provider possono essere di tipo commerciale o di tipo istituzionale. I primi offrono il proprio servizio su pagamento di un abbonamento oppure, come accade da un po’ di tempo, in forma “gratuita”. I secondi sono provider che offrono il proprio servizio soltanto a strutture “esclusive” come enti pubblici o Università. Molte scuole italiane dispongono di collegamenti con questo tipo di provider. I National Service Provider non forniscono, in genere, servizi per il singolo utente. Tra gli NSP italiani ce n’è uno, chiamato Gruppo Autonomo Reti di Ricerca (GARR), che fornisce il servizio alle Università e che ha il compito di gestire l’assegnazione dei nomi dei Siti Internet in Italia. Questi nomi, tecnicamente, sono definiti nomi di dominio. Attraverso il nome di dominio, che è un vero e proprio identificativo, si individua un determinato gruppo di computer collegati a Internet. I domini di livello maggiore, cioè i più grandi, sono quelli nazionali oppure, ma questo vale solo per gli Stati Uniti, i domini che specificano il tipo di sito (.com, .edu, .org ecc.). Per quanto riguarda l’Italia il nome di dominio è .it. In un nome di dominio tutte le parti poste alla sua sinistra, separate da un punto, identificano domini sempre più ristretti. In alcuni casi si arriva a identificare anche un singolo computer.

ANTONIO FAVINO


Pag.3

15/03/01

15.21

Per potersi connettere a Internet ogni computer deve essere identificato da un numero chiamato host number IP. Ai nomi di dominio è sempre associato il corrispondente host number. Esistono particolari calcolatori che hanno il compito di comunicare l’host number associato ad un determinato indirizzo, in modo che sia possibile raggiungere fisicamente il relativo computer. Ricapitolando, quindi, Internet è basata su una struttura di collegamenti “dorsali” tra i vari Provider Nazionali (NSP), ai quali si collegano gli Internet Service Provider che, a loro volta, forniscono l’accesso ad ogni singolo utente. Ogni computer connesso alla rete è dotato di un proprio numero identificativo, detto host number IP. Appositi elaboratori hanno il compito di abbinare tale numero al relativo nome di dominio, in modo che sia possibile raggiungere fisicamente il computer che interessa. Una recentissima novità, annunciata nel mese di Novembre 2000, porta ad una vera rivoluzione nella gestione dei nomi di dominio. All’indirizzo http://www.netex.it (ma questa novità fa d’improvviso “invecchiare” tale sistema di indicazione degli indirizzi) è disponibile un software, gratuito, che permette di identificare un sito con una sola parola. Di conseguenza è possibile richiamare il sito di una scuola semplicemente definendolo “scuola”, oppure quello del Parlamento Italiano con il nome Parlamento e così via. È ancora troppo presto per conoscere la reale portata di questa innovazione, ma i presupposti positivi ci sono tutti. Chi vivrà vedrà… Torniamo a noi. I collegamenti a Internet possono avvenire su apposite linee “dedicate” se l’utente è di grosse dimensioni, come nel caso di un’Azienda; oppure su linee “commutate”, se si tratta di un utente che utilizza Internet in modo saltuario. Le linee “dedicate” sono particolari linee telefoniche di alta qualità utilizzate solamente per le connessioni tra computer; quelle “commutate” sono invece normali linee adoperate per la telefonia, occasionalmente “commutate” per il collegamento a Internet o per la trasmissione di fax. Attualmente, per permettere un collegamento a Internet, è indispensabile un particolare apparecchio chiamato modem. Il nome di questo dispositivo nasce dalla contrazione del termine MOdulatoreDEModulatore. La sua funzione è quella di trasformare i dati numerici provenienti dal computer in suoni modulati che possono essere trasmessi lungo le linee telefoniche. Tale operazione avviene nella fase di trasmissione. Nella fase di ricezione, al contrario, l’apparecchio interpreta i suoni che gli giungono dal computer remoto e li demodula trasformandoli nuovamente in dati numerici. Per evitare la perdita di dati esistono dei protocolli di trasferimento gestiti direttamente dal modem. La presenza di Internet e l’evoluzione tecnica nel campo delle trasmissioni hanno fatto nascere altri sistemi di collegamento, chiamati ISDN e ADSL. Attualmente la loro diffusione presso gli utenti non è particolarmente significativa, ma si può ipotizzare che, in un prossimo futuro, sia destinata ad espandersi in modo determinante.

ANTONIO FAVINO


Pag.4

15/03/01

15.21

Come sappiamo, per utilizzare un collegamento a Internet, sono necessari un modem e un abbonamento presso il Provider. Oltre a questi elementi è però indispensabile anche un software in grado di “interpretare” il contenuto dei documenti ipertestuali archiviati nella struttura della Rete. Questo particolare software viene chiamato browser. In realtà questo software, oltre a funzionare da interprete del codice HTML, deve anche provvedere alla gestione dei cosiddetti protocolli di trasmissione, di cui parleremo nel prossimo capitolo. Inoltre, per rendere più competitivo il proprio prodotto, i principali produttori di software hanno arricchito i propri browsers di funzionalità e di elementi accessori per rendere più semplice la navigazione nella rete. L’utilizzo del Web, infatti, è solo uno dei modi di utilizzare Internet, in quanto con essa si possono compiere operazioni di altra natura come utilizzare la Posta Elettronica, inviare files, partecipare a gruppi di discussione, chiacchierare con gli amici o partecipare a videoconferenze. Non è tra gli scopi di questo manuale la descrizione di queste attività, ma è evidente che il browser, con il tempo, si è trasformato da semplice visualizzatore di pagine HTML in un sofisticato programma in grado di gestire lo svolgersi di attività tanto diverse. Negli ultimi anni sulla scena si sono avvicendati diversi browsers che hanno tra loro intrapreso una vera e propria guerra commerciale. Da questa rivalità, costata ai rispettivi produttori migliaia di miliardi, sono usciti vincenti Netscape Communicator e Internet Explorer di Microsoft. Entrambi sono gratuiti e, nella competizione, ad essi si è successivamente aggiunto il browser Opera che, sebbene sia a pagamento, ha il pregio di occupare nei Personal Computer una ridotta quantità di risorse hardware. Molto di più non si può dire su tale software, in quanto non giova certo alla sua diffusione il fatto che, per utilizzarlo, sia richiesto il pagamento di un importo pari a circa sessantamila lire. Descrivere l’uso di ogni browser richiederebbe una trattazione a parte, vi sono però alcune funzionalità, che possono interessare i “debuttanti” del codice HTML, le quali permettono di conoscere i “segreti” delle pagine che più ci colpiscono per il loro aspetto o per le soluzioni adottate. In genere i browser dispongono di una opzione che visualizza il codice HTML dei documenti. Vista la grande quantità di versioni esistenti è piuttosto difficile dare indicazioni precise; in linea di massima si può dire che in Internet Explorer l’opzione si trova nella voce del menu Visualizza alla scelta HTML. In alternativa un click con il tasto destro in un punto della pagina che interessa fa comparire il cosiddetto menu contestuale nel quale, in genere, sono previste diverse opzioni di grande utilità tra cui la visualizzazione del codice. In Netscape Communicator la situazione non è sostanzialmente diversa. Il codice HTML di un qualsiasi documento può, infatti, essere analizzato scegliendo Sorgente pagina dal menu Visualizza. Bisogna dire che, in Netscape Communicator, la visualizzazione del codice sorgente è molto più interessante, specie per chi desidera imparare le tecniche di linguaggio, in quanto i diversi tag sono mostrati con vari colori in modo tale da evidenziarne la funzione.

ANTONIO FAVINO


Pag.5

15/03/01

15.21

Se, anziché visualizzare il codice sorgente, si vogliono salvare le immagini esistenti nei documenti, basta effettuare un click destro su di esse scegliendo dalla finestra del relativo menu la voce Salva immagine con nome…, o una voce simile. Queste indicazioni sono valide per entrambi i browsers. Si tenga presente che le operazioni descritte sono ammesse per ragioni di studio o di analisi delle tecniche utilizzate nei documenti, ma che l’utilizzo degli stessi per nuove pubblicazioni sarebbe una violazione dei diritti in mancanza di un'autorizzazione scritta dell’autore. È invece ammesso il link al documento originario, anche se alcuni autori preferiscono comunque che, anche in questo caso, sia rilasciato un assenso scritto.

QUELLE STRANE SIGLE: TCP/IP, HTTP, FTP Nel momento in cui si comincia ad usare un browser e ci si collega ad Internet, lo si voglia o no, ci si imbatte frequentemente in alcune sigle del tutto ignote, che sembra siano le parole magiche in grado di aprire tutte le porte di questo affascinante mondo. In realtà queste sigle le porte di Internet le aprono veramente, poiché contraddistinguono i cosiddetti “protocolli di trasferimento” dei dati. Questo è il motivo per cui spesso terminano con TP, cioè Transfer Protocol. Sarebbe del tutto fuori luogo entrare in dettagli tecnici che illustrano le differenze tra di essi, faremo quindi una brevissima carrellata generale che dia qualche indicazione sul significato delle diverse sigle e sulle applicazioni utilizzabili per ognuno di questi protocolli. Ovviamente, per prima cosa, parleremo del protocollo TCP/IP, che costituisce la base fondamentale di qualsiasi collegamento a Internet. La sua sigla significa Transmission Control Protocol/Internet Protocol. Come dice il nome, la caratteristica di questo metodo di trasferimento dei dati sta nel fatto che ogni file viene suddiviso in pacchetti secondo il protocollo IP, di cui si è già parlato nelle pagine precedenti. Ognuno di questi pacchetti contiene l’Host Number IP del destinatario, e un secondo identificativo: il Port Number. Quest’ultimo è un numero che indica quale programma, nel computer, deve ricevere i dati. In tal modo i pacchetti viaggiano nella rete in forma del tutto indipendente, attraverso strade completamente diverse, sulla base della ma ggior velocità e sicurezza che appositi computer, chiamati router, provvedono a gestire. Una volta giunto a destinazione il file viene “spacchettato” e ricomposto come era in origine. Il protocollo TCP/IP è indispensabile per potersi collegare a Internet, ed in genere è già installato nel computer insieme con il browser. Se così non fosse, in tutti i CD-ROM che i provider distribuiscono per i propri abbonamenti gratuiti è prevista l’installazione automatica di tale protocollo; quindi è sufficiente adoperare uno di tali CD-ROM per garantirsi la correttezza degli elementi installati. Qualche (piccolo) dettaglio in più è spiegato nel capitolo “QUELLO CHE CI SERVE PER UN COLLEGAMENTO A INTERNET ”.

ANTONIO FAVINO


Pag.6

15/03/01

15.21

Il vantaggio del protocollo TCP/IP sta nel fatto che esso è del tutto indipendente dalla rete utilizzata, tanto che esso è stato inserito nei nuovi sistemi di telefonia mobile, chiamati GPRS, che possono così connettersi alla rete Internet inviando posta elettronica e files. L’architettura GPRS sarà disponibile già dai primi mesi del 2001. Nell’ambito dei protocolli di tipo TCP/IP esistono altri protocolli di comunicazione: HTTP, SMTP e FTP. Il primo Hyper-text Transfer Protocol, è quello su cui si basa tutta la struttura del Web ed è il protocollo di trasferimento dei dati adatto agli ipertesti. Vi è poi il protocollo SMTP (Simple Mail Transer Protocol) creato per la trasmissione della posta elettronica. Infine vi è il protocollo FTP per la trasmissione dei files, che merita qualche parola di illustrazione. Con la nascita delle BBS, prima ancora che la rete avesse il successo che tutti conosciamo, è nata l’esigenza di scambiare files tra un computer centrale e tutti gli utenti che ad esso si connettevano. In pratica tale elaboratore era visto come un’unità disco remota, nella quale fosse possibile creare nuovi files, analizzare il contenuto delle (cartelle), aprire gli archivi. Per poter effettuare tutte queste operazioni era necessario che il computer remoto fosse dotato di un programma FTP server che, colloquiando con il disco rigido, soddisfasse le richieste provenienti dagli altri computer funzionando da interfaccia. La sigla FTP sta per File Transfer Protocol. Oggi esistono diversi tipi di programmi per il trasferimento dei files utilizzando il protocollo FTP. I princ ipali browsers includono al loro interno un programma di interfaccia che si basa su tale protocollo. In genere questi applicativi possono essere distinti tra programmi a caratteri, estremamente snelli ma piuttosto “grezzi”, e programmi con interfaccia grafica, cioè simile a Windows o agli Apple Macintosh, che sono sicuramente più gradevoli e più semplici da usare. Un altro tipo di collegamento che può capitare di dover effettuare, anche se non è un vero e proprio protocollo, è quello ad un server Gopher. In realtà tale tipo di computer ha perso di importanza con l’avvento del Web, ciò non toglie che esso possa rivelarsi utile per ricerche di tipo bibliotecario, o nell’ambito accademico e scientifico. Gopher è, praticamente, una specie di indice che permette di raggiungere determinate informazioni organizzate in struttura gerarchica. Tale struttura è ad albero, per cui esistono alcuni nodi principali da cui si dipartono i rami che, a loro volta, possono contenere altri nodi con ulteriori ramificazioni. I nodi terminali sono un po’ come le foglie dell’albero: essi, infatti, non presentano più alcuna ramificazione. In Gopher tale struttura si basa su un sistema di menu e sottomenu. Selezionando una determinata voce si accede alle risorse ad essa connesse, che possono essere ulteriori sottomenu o files di qualunque genere: documenti, software, o prodotti multimediali. Utilizzando le risorse della rete le strutture ad albero di Gopher si intersecano tra loro in modo del tutto trasparente per il visitatore, che quindi può disporre di materiale che, fisicamente, è disponibile su server diversi. Esistono appositi software di gestione delle strutture ad albero

ANTONIO FAVINO


Pag.7

15/03/01

15.21

utilizzate da Gopher, ma per utilizzi saltuari vanno benissimo i programmi inclusi all’interno dei browsers. Un indirizzo interessante, che può essere adoperato come base di partenza per una visita Gopher, è gopher://gopher.unipi.it.

MA COS’È QUESTO HTML? Giunti a questo punto potrebbe essere interessante capire come si è arrivati a creare un linguaggio adatto alla scrittura di ipertesti. Tutte le fonti fanno coincidere la nascita dell’HTML con l’anno 1991, quando il CERN di Ginevra diede l’avvio al Web istituendo una lista di caselle postali elettroniche (mailing list) chiamata www-talk. Perché questo si potesse realizzare, nel 1989 due ricercatori, Tim Berners-Lee e Robert Caillau, iniziarono a lavorare all’idea di un sistema di informazioni che potesse collegare tra loro i vari documenti presenti sui differenti sistemi di computer in dotazione al CERN. Dimenticavo, il CERN è il Centro Europeo per la Ricerca Nucleare e vi ve ngono effettuati studi energetici sulla fisica delle particelle. Cominciamo la storia fin dall’inizio: HTML è l’abbreviazione di Hyper Text Markup Language e significa, più o meno, linguaggio a marcatori per ipertesti. I marcatori, detti tags, sono costituiti da indicazioni nelle quali si descrive come debba essere trattato il testo tra essi racchiuso. Capisco, esposta in questo modo la faccenda dei tags sembra una faccenda complicata, in realtà avremo modo di parlarne più chiaramente in uno dei capitoli successivi, in modo che tutto risulti più semplice. Il codice HTML è una specifica applicazione che si basa su regole più generali, stabilite da SGML, cioè Standard Generalized Markup Language. Certamente tutte queste sigle possono producono soltanto confusione, quindi conviene fare un po’ di chiarezza. SGML è nato nel 1986 e NON è un linguaggio a marcatori, bensì un linguaggio per poter creare linguaggi a marcatori. Esso, infatti, ha avuto origine all’interno dell’industria editoriale per scambiare con facilità testi scritti con sistemi tipografici diversi. Quindi è un tipo di linguaggio che non ha nulla a che vedere con Internet. L’SGML, però, ha il non piccolo merito di avere stabilito determinate regole riconosciute a livello internazionale. Queste regole sono state fissate da un ente, chiamato ISO, che rappresenta l’Organizzazione Internazionale per gli Standard. In pratica SGML ha stabilito delle regole generali, valide per qualsiasi genere di documento: HTML invece, osservando questi criteri generali, ha elaborato le norme che valgono per i computer e per le pubblicazioni su Internet. Ecco spiegato il perché di tutte queste sigle. La faccenda mi sembra chiarita, quindi torniamo alla cronaca sulla nascita dei documenti ipertestuali. Anche se potrebbe apparire piuttosto curioso, ANTONIO FAVINO


Pag.8

15/03/01

15.21

questa storia può essere fatta cominciare parecchi secoli fa. Secondo molte fonti, infatti, già nel Medioevo si utilizzavano riferimenti fra documenti diversi servendosi della numerazione sequenziale di ogni singola riga o dei versi. In questo modo era possibile rinviare il lettore ad uno specifico punto di un determinato documento, indipendentemente dalle sue dimensioni o dal formato delle sue pagine. Questo meccanismo è durato centinaia di anni, fino ai giorni nostri: pensiamo alle note a piè di pagina o alle bibliografie ragionate dei libri. Un ottimo esempio di questo genere di rimandi è costituito comunque dal Vangelo, in cui il riferimento ai versetti può essere certamente considerato come una forma sia pur rudimentale di ipertesto. È interessante sapere che gli inventori dell’HTML si sono basati su questo concetto per elaborare il loro linguaggio. Per poter parlare di ipertesti concepiti in abbinamento all’utilizzo dei computer dobbiamo invece giungere all’anno 1945. In quel periodo il consigliere scientifico del presidente americano Roosvelt pubblicò un proprio articolo nel quale descriveva l’idea di una macchina in grado di immagazzinare contemporaneamente informazioni di tipo testuale e di tipo grafico, cioè illustrazioni. Il nome di questa macchina rivoluzionaria era Memex, ed essa doveva possedere la capacità di collegare gruppi di dati ad altri blocchi di informazioni secondo le necessità degli utilizzatori. L’ideatore di questo sistema, il Dott. Vannevar Bush, era il direttore dell’ufficio americano per la ricerca scientifica e in quel periodo – non dimentichiamo che era in corso la Seconda Guerra Mondiale – coordinava gli studi sulle possibili applicazioni militari delle ricerche scientifiche. Secondo le idee di Bush, Memex doveva essere in grado di creare una specie di traccia informativa dei diversi collegamenti analizzati, in modo tale che i suoi utilizzatori potessero ripercorrerli anche in momenti successivi. Si dovette comunque aspettare fino agli anni ’60 perché Douglas Engelbart, un ricercatore di Stanford che contribuì anche all’invenzione del mouse, fosse in grado di creare il primo giornale ipermediale, composto da oltre centomila tra riferimenti incrociati, giornali e resoconti. Verso la metà di quel decennio Ted Nelson pubblicò un proprio articolo su Literary Machines, in cui comparvero per la prima volta due termini nuovi da lui coniati: ipertesto e ipermedia. In seguito l’autore, nel suo libro Dream Machines, ipotizzò la possibilità di includere negli ipermedia anche eventuali contributi filmati. In seguito, bastò attendere solo il 1967 perché fosse finalmente sviluppato il primo sistema computerizzato basato sull’utilizzo degli ipertesti. Direttore di tale progetto era il Dr. Andries van Dam, e la sua ricerca era promossa nientemeno che dall’IBM, il più grande colosso americano del settore informatico. Successivamente il sistema venne acquistato per il centro spaziale di Houston, che lo utilizzò nella gestione dell’intera documentazione relativa al famosissimo Progetto “Apollo”. Quel progetto spaziale, due anni dopo, avrebbe portato l’uomo sulla Luna.

ANTONIO FAVINO


Pag.9

15/03/01

15.21

Passò ancora qualche anno, tanto che nel 1972 venne sviluppato un ambiente informativo in grado di essere utilizzato da sistemi computerizzati diversi. Questa nuova applicazione aveva un nome curiosissimo, ZOG… che non voleva significare assolutamente nulla! Il sistema era basato sui cosiddetti frames. In lingua inglese frame significa cornice, o telaio. Nell’ambito di ZOG i frames consistevano in “cornici” al cui interno comparivano in successione il titolo, la descrizione, la barra dei comandi standard e un gruppo di “selezioni” che indirizzavano ad altri frames. In seguito ZOG ebbe ulteriori perfezionamenti e modifiche, divenendo uno strumento molto evoluto, in grado di mostrare istantaneamente a tutti gli utenti collegati ogni aggiornamento dei dati. Esso restò comunque un software basato su testi, non essendo in grado di supportare le caratteristiche grafiche che oggi possiamo apprezzare con HTML. Trascorse ancora qualche tempo quando, nel 1978, Andrew Lippman guidò, in Massachussets, un gruppo di ricercatori per lo sviluppo della Aspen Movie Map. Il progetto prevedeva la riproduzione della planimetria di Aspen, una città del Colorado, per mezzo della quale si poteva effettuare un viaggio virtuale all’interno delle sue strade utilizzando un sistema estremamente sofisticato dall’interattività eccezionalmente spinta. Il visitatore virtuale poteva infatti esaminare il panorama spostandosi in tutte le direzioni, oppure effettuare una sorta di giro turistico osservando la città come se si trovasse in automobile; disponeva inoltre di una mappa in formato ridotto che visualizzava gli spostamenti e permetteva di trasferirsi in un determinato punto accedendovi direttamente. Inoltre, meraviglia finale, era possibile la visita virtuale di alcuni edifici. A buon diritto la Aspen Movie Map viene ancor oggi considerata il primo documento realmente ipermediale nella storia dei computer. Con essa si ebbe l’evidente dimostrazione di ciò che era possibile realizzare con le tecnologie disponibili all’epoca. Mentre i sistemi ipermediali proseguivano la loro evoluzione Theodor Holm Nelson, ovverosia il Ted Nelson che abbiamo conosciuto come inventore del termine ipertesto, coronò il sogno della sua vita proponendo un sistema ipertestuale chiamato Xanadu. Era l’anno 1981 e le basi gettate da tale intuizione sono state ampiamente riprese in quello che oggi conosciamo come World Wide Web. È possibile affermare che Xanadu, petr determinate prestazioni fosse anche superiore al Web dal momento che era in grado di conservare in modo permanente qualsiasi versione di ciascun documento, ricostruendola a partire dalla versione attuale del documento stesso. Tutto ciò era realizzabile perché, attraverso un procedimento che ha del geniale, il sistema teneva traccia di tutte le variazioni apportate ogni qual volta il documento era soggetto a modifiche. Un sistema veramente eccezionale, tanto da essere definito “il luogo magico della memoria letteraria” in cui nulla può essere più diment icato. Purtroppo Xanadu non ebbe seguito, e non fu mai sottoposto ai necessari aggiornamenti. Ted Nelson, dopo anni di delusioni, accettò solo nel 1994 di divenire professore presso la Keio University, per continuare in Giappone le ricerche su Xanadu. Nel frattempo venivano sviluppati software e documentazioni ipertestuali ANTONIO FAVINO


Pag.10

15/03/01

15.21

che, in qualche modo, contribuivano a mantenere viva l’attenzione sull’argomento. In modo particolare, nel 1987, Bill Atkinson sviluppò un sistema di ipertesti per conto della Apple Computer. A tale sistema venne dato il nome di HyperCard. Al tempo Atkinson era già noto per aver sviluppato un programma, chiamato MacPaint, utilizzato sui computer Macintosh di produzione Apple. HyperCard, concepito per quegli stessi computer, permetteva la creazione di applicazioni ipertestuali di tipo grafico. Tra le sue caratteristiche vi era la possibilità di utilizzare immagini computerizzate, moduli, comandi testuali e, come prerogativa principale, vi era la possibilità di effettuare ricerche complete sugli elementi di testo. In pratica il prodotto era qualcosa di molto somigliante all’attuale HTML, ed era fornito tra le installazioni standard di tutti gli Apple Macintosh. In tal modo HyperCard divenne un programma con una buona diffusione; ciò ne fece l’applicazione in grado di contribuire alla massima popolarità dei documenti basati sul modello ipertestuale. I tempi erano ormai maturi per la nascita del linguaggio HTML…anche se in realtà gli studi di Tim Berners-Lee erano iniziati già nel 1980 per sviluppare un sistema in grado di memorizzare qualsiasi associazione casuale tra diversi frammenti di informazione. All’epoca, infatti, presso il CERN di Ginevra esistevano svariati modelli di computer, molte tecniche di memorizzazione e sistemi di richiamo delle informazioni estremamente diversi tra loro. Come se non bastasse alcuni di questi, come CERNET e FOCUS, erano stati direttamente sviluppati dai laboratori di ricerca del CERN. Questo si traduceva, in pratica, nella più completa impossibilità di dialogo tra le diverse macchine. In conseguenza di tale situazione Tim si sentiva veramente irritato poiché la sua agenda elettronica, la sua rubrica telefonica e i suoi documenti erano memorizzati in modo completamente diverso su macchine differenti, impedendogli di accedere contemporaneamente a tutti i propri dati. Una persona che non faccia uso costante del computer fatica molto a comprendere interamente questo disagio. Per dare al lettore un’idea di cosa ciò voglia significare farò un piccolo paragone. Una situazione come quella descritta può assomigliare, infatti, a quella di un’aula dotata di quattro lavagne molto piccole, sulle quali diversi insegnanti abbiano annotato i propri appunti del tutto casualmente, un po’ qua e un po’ là. Se uno studente dovesse ricopiarne il contenuto sarebbe costretto ad alzarsi, leggere una frase su una lavagna, ricopiarla, rialzarsi per cercare la successiva lavagna, ritornare a posto e così via. Non è difficile immaginare quale caos si originerebbe in quell’aula! In ogni caso, per superare questi disagi, Tim Berners-Lee sviluppò il suo primo programma che, ispirandosi a un libro del 1856, venne chiamato “Enquire-Within-Upon-Everything”. Data l’impossibilità di questo nome esso venne semplicemente chiamato “Enquire”. È molto curioso sapere che, in una intervista di qualche tempo fa, Tim ha dichiarato che, a quell’epoca, conosceva solo marginalmente le idee di Ted Nelson sul concetto di ipertesto. La realtà, molto più banale, è che egli desiderava risolvere un problema piuttosto fastidioso esistente in quel momento presso il CERN.

ANTONIO FAVINO


Pag.11

15/03/01

15.21

Pochissimo tempo dopo lo sviluppo del sistema “Enquire” Tim dovette recarsi altrove per sviluppare un sistema di reti e le relative procedure per le chiamate remote. Mentre egli era assente, il CERN rinnovò i suoi sistemi di connessione adottando il protocollo TCP/IP. In tal modo i laboratori di ricerca potevano collegarsi a Internet. Era il 1984, e nei cinque anni seguenti il sito del CERN si espanse al punto da divenire, in Europa, quello di maggiori dimensioni. Come abbiamo visto nei capitoli precedenti il protocollo TCP/IP permetteva il colloquio tra sistemi di computer differenti; inoltre, nel corso di quegli anni, la rete Arpanet veniva abbandonata dal sistema militare statunitense in favore delle università e dei ricercatori scientifici. Si era quindi nel più importante momento di trasformazione verso la diffusione di Internet. Proprio nel 1989 Tim Berners-Lee fece il suo ritorno all’interno del CERN. L’evoluzione che si stava attuando in quel momento era un ottimo terreno di sviluppo perché si diffondesse il concetto secondo cui le informazioni computerizzate dovevano essere quanto più possibile distribuite agli utilizzatori. Tim negli anni precedenti aveva sviluppato un’importante esperienza proprio nella programmazione su reti di computer diversi: ormai c’erano tutte le condizioni favorevoli ad un salto di qualità… Marzo 1989. Tim sottopone ai suoi superiori le proprie proposte segnalando tutte le manchevolezze del sistema esistente, illustrando per contro i vantaggi derivanti dall’adozione di un sistema ipertestuale. Egli mette in evidenza come, in tal modo, si potrebbero superare i problemi legati alle distanze geografiche per utilizzare al meglio i contributi degli studenti, degli insegnanti e dei molti scienziati che spesso collaboravano temporaneamente nelle ricerche di laboratorio. Un sistema ipertestuale avrebbe permesso una più immediata collaborazione nella stesura dei vari progetti, favorendo tempi più rapidi per la loro conclusione. Vorrei aggiungere una mia piccola considerazione: se la lettura di queste righe sfocerà in collaborazioni di gruppo tra più studenti, essi avranno occasione di verificare quanto veritiere fossero le parole di Tim Berners-Lee in quel lontano Marzo del 1989; e quali siano stati i vantaggi derivanti dall’adozione dell’HTML anche per la comunità scientifica. La proposta di Berners-Lee venne definita dall’autore “un semplice schema per connettere differenti sistemi automatizzati per la gestione di informazioni, già utilizzabili presso il CERN”. Secondo tale progetto, un ambiente distribuito su ipertesti poteva essere il sistema ottimale per fornire anche ad una singola interfaccia utente l’accesso a grandi categorie di informazioni elettroniche come resoconti, annotazioni, banche dati, documentazione computerizzata e sistemi di aiuto online. Il sì definitivo a tale proposta non si fece attendere, anche se all’autore venne imposto il raggiungimento di ben precisi obiettivi. Egli dovette quindi

ANTONIO FAVINO


Pag.12

15/03/01

15.21

suddividere il progetto in due fasi. Nella prima il CERN avrebbe fatto uso dei programmi e degli elaboratori esistenti, in modo tale che ogni utente potesse utilizzare browsers molto semplici che garantissero il solo accesso alle informazioni, secondo criteri di carattere sperimentale. Successivamente, nella seconda fase, l’area di applicazione sarebbe stata estesa permettendo anche ai singoli utilizzatori l’aggiunta di nuovo materiale. Ovviamente Tim non poteva effettuare tutto da solo, pertanto richiese la presenza di cinque collaboratori, considerando che la durata di ogni fase non doveva superare i tre mesi. Come spesso succede in questi casi la prima risposta ottenuta fu un no secco: solo dopo diverse, insistenti richieste, nel 1990 gli venne concesso il supporto necessario per dare inizio ai lavori. Così, nell’Ottobre dello stesso anno, il progetto iniziale venne riformulato anche per merito dell’importante supporto assicurato da Robert Cailliau. Le basi del Worl Wide Web erano così gettate… In realtà è necessario evidenziare come il progetto del CERN non era quello di dare origine al WWW, bensì quello di creare un ambiente nel quale scienziati e ricercatori potessero maturare nuove idee sfruttando l’opportunità di scambiarsi scritti e opinioni in modo dinamico. Da questo punto di vista, si può affermare che la nascita del Web non sia stata che un “effetto collaterale” delle ricerche nell’ambito della fisica particellare. I ricercatori del CERN, tra cui Berners-Lee, rimasero comunque impressionati dal modo in cui il modello di ipertesto da loro elaborato fosse stato utilizzato e migliorato da una ditta, la NeXT Software, che iniziò lo sviluppo di un nuovo programma entro brevissimo tempo, a partire dal Novembre 1990. L’applicativo in questione era un browser che permetteva la modifica visuale dei documenti per il Web. Contemporaneamente iniziava anche la progettazione del primo computer in grado di avere funzioni di supporto al World Wide Web. In pratica tale computer sarebbe stato il primo server specifico per la Rete. Nel frattempo le ricerche sul software si erano avviate ed erano state estese ad altri tipi di piattaforme per computer. Il rilascio pubblico del codice HTML avvenne nel 1991. Berners-Lee e il suo gruppo di ricerca aprirono così definitivamente la strada al futuro sviluppo del Web a seguito dell’introduzione dei loro browsers e dei relativi server, del protocollo per le comunicazioni tra i vari computer, del linguaggio necessario per la composizione dei documenti e del sistema per l’identificazione dei siti (URL - Uniform Resource Locator). Nel momento in cui i concetti e protocolli relativi al WWW divennero di pubblico dominio, i programmatori e gli sviluppatori di software di tutto il mondo iniziarono ad introdurre modifiche e miglioramenti. Marc Andreesen, studente presso l’NCSA all’Università dell’Illinois, era uno di questi. L’NCSA è un dipartimento specializzato nel settore dei supercomputer. Nel Febbraio 1993 Andreesen e il suo gruppo rilasciarono la prima versione di un browser grafico per il Web chiamato “Mosaic for X”. Qualche mese dopo, in Agosto dello stesso anno, venne rilasciata la prima versione di Mosaic adatta

ANTONIO FAVINO


Pag.13

15/03/01

15.21

sia al sistema Macintosh, sia ai sistemi Windows. Tale circostanza rappresentò un evento significativo per l’evoluzione del World Wide Web perché, per la prima volta, veniva diffuso un software dall’uso facile e intuitivo in grado di essere impiegato dai principali Sistemi Operativi dell’epoca. Dopo qualche tempo Andreesen lasciò l’NCSA per lavorare in California, non avendo più nessun interesse a proseguire lo sviluppo di Mosaic. Era il mese di Dicembre del 1993. In realtà, trascorso qualche mese, Marc e Eric Bina, uno dei suoi collaboratori su Mosaic, si associarono con Jim Clark per fond are la “Mosaic Communication Corp.”, oggi conosciuta come Netscape. Nel maggio 1994 praticamente tutti i componenti del gruppo che aveva sviluppato Mosaic erano entrati a far parte della società Netscape. Il resto è storia d’oggi. Tutto quanto fin qui raccontato è solo un breve resoconto degli avvenimenti che hanno originato gli ipertesti e il linguaggio HTML. Non c’è dubbio, comunque, che la creazione del Web in seguito delle ricerche di Tim Berners-Lee, seguita dal rilascio del browser Mosaic possono essere considerati come i due fattori più significativi nel determinare il successo e la odierna popolarità del Web. Prima di affrontare l’argomento specifico di questo elaborato, cioè la comp ilazione di pagine HTML, diamo un’occhiata a un piccolo programma di scrittura che sarà il nostro “strumento di lavoro” nella produzione di documenti ipertestuali.

UNO STRUMENTO PER SCRIVERE: “BLOCCO NOTE” Una delle principali ragioni per cui si è diffuso l’utilizzo dei Personal Computer, oltre che per la velocità delle operazioni aritmetiche, va ricercata nel fatto di avere a disposizione uno strumento agile per poter scrivere. Per questa ragione ogni elaboratore è in grado di realizzare archivi facilmente utilizzabili, che possono essere scambiati tra utenti diversi. Gli archivi che il P.C. produce, di qualsiasi tipo essi siano, sono chiamati files. Per poter creare un qualunque documento adoperando il computer dobbiamo, per prima cosa, imparare l’uso di uno strumento di scrittura. Il programma più adatto alla preparazione degli ipertesti è Block Notes, o Blocco Note che dir si voglia. È un’applicazione che fa parte dei cosiddetti editor di testo. Sicuramente più di qualcuno sarà disorientato da questo assurdo parolone inglese; in realtà si tratta banalmente di un programma che permette di produrre files composti con testi redatti dall’utente. In parole più semplici l’editor di testo è la versione moderna della macchina per scrivere, completa del foglio di carta inserito nel rullo. Il suo uso è di una semplicità incredibile: basta digitare dalla tastiera le informazioni che si desiderano registrare, nella forma e con l’aspetto che si ritengono più adatti, e in seguito salvarle sul proprio disco rigido. Anche se sul computer è installata la più vecchia delle versioni di Windows, l’applicazione di Blocco Note è esattamente la stessa, e

ANTONIO FAVINO


Pag.14

15/03/01

15.21

funziona nel medesimo modo. Quindi un documento HTML può essere preparato anche con un computer molto datato.

Figura 1 Apertura del gruppo Accessori in Windows 95

Prima di tutto impariamo come attivare Blocco Note. Chi possiede Windows 95 deve premere il tasto sinistro del mouse sul pulsante ‘Avvio’, oppure ‘Start’ se sul computer è installato Windows 98. Questa azione,

Il gruppo Accessori di Windows 3.x

Figura 2 - Come si presenta il desktop di Windows 3.x

ANTONIO FAVINO


Pag.15

15/03/01

15.21

comunemente detta click, fa aprire un menu che permette di scegliere l’applicazione che interessa. Chi, invece, ha un computer dotato di Windows 3.x dovrà compiere un’operazione un po’ più laboriosa. Dalla finestra di Program Manager deve scegliere una delle icone presenti facendo due click veloci su di essa. Le icone di Program Manager sono i simboli presenti al suo interno, come si può vedere in Fig. 2. Se le operazioni appena descritte mettessero in difficoltà qualcuno, ci si può sempre esercitare con la Guida in linea, che ha il pregio di illustrare l’uso di Windows in modo facile e divertente. In Windows 3.x la guida può essere richiamata dalla finestra di Program Manager con un click su ?. Se si è possessori di un computer che usa Windows 95/98, la Guida in linea è disponibile tra le scelte del menu Avvio (Start in Windows 98). Come dicevamo qualche riga più sopra, a noi interessa usare Blocco Note. Tutte le versioni di Windows sono fornite di un gruppo applicativo chiamato Accessori. Per accedere ad Accessori chi adopera Windows 95/98 dovrà effettuare un click di mouse sul pulsante ‘Avvio’ o ‘Start’, selezionare la voce Programmi e scegliere successivamente Accessori. A operazione ultimata l’aspetto del Desktop sarà quello visibile in Fig. 1. Un click sull’icona di Blocco Note attiverà il programma applicativo Coloro che, invece, adoperano Windows 3.x dovranno seguire una procedura leggermente diversa. In questo caso è sufficiente aprire con un doppio click il gruppo chiamato Accessori presente nella finestra di Program Manager. Effettuando velocemente un doppio click sull’icona di Block Notes farà aprire la finestra dell’applicazione.

Barra del titolo

Cursore e punto di inizio della digitazione

Menu a discesa, detto anche a tendina

Barra dei menu

Figura 3 La finestra di apertura di Bloc Notes

ANTONIO FAVINO


Pag.16

15/03/01

15.21

Blocco Note dispone di alcune opzioni che ne rendono molto più facile l’utilizzo. Tra tutte la più comoda è, senza dubbio, ‘A capo automatico’ che si trova nella voce Modifica della barra dei menu. In questa applicazione esistono però anche altre utili scelte, oltre quella appena vista. Una di queste è Cerca, per mezzo della quale si può velocemente individuare una determinata parola, o una sequenza di vocaboli, all’interno del file di testo. Facendo click su questa voce di menu appaiono le due voci Trova e Trova successivo. Quest’ultima opzione può facilmente essere attivata anche premendo il tasto F3, come segnalato nella parte destra del menu a discesa. Il lavoro di battitura in Blocco Note è inoltre facilitato da una vantaggiosa caratteristica di Windows: gli Appunti. Nel menu Modifica, infatti, sono presenti le tre scelte: Taglia, Copia e Incolla. Con il loro utilizzo è facile manipolare il testo sul quale si lavora spostando o ripetendo qualsiasi parola o qualunque frase. In ogni applicazione di Windows sono presenti queste tre opzioni, e il modo di procedere nel loro uso è sempre lo stesso. Per questo motivo riterrei utile soffermarsi qualche momento nella loro descrizione. La prima cosa da fare è quella di Selezionare la parte di elaborato che deve essere manipolata. Per selezionare una porzione di testo si trascina il mouse sulla parte da evidenziare tenendo premuto il tasto sinistro durante tutta l’operazione. In questo modo Windows ‘conosce’ qual è il settore su cui si desidera agire. Il testo selezionato è semplice da riconoscere poiché è contrassegnato da una fascia nera nella quale i caratteri sono leggibili in colore bianco. Se si vuole ricopiare la parte evidenziata, va scelto Copia dal menu Modifica; se invece si desidera spostare il testo, bisognerà utilizzare l’opzione Taglia nello stesso menu. Con una di queste due azioni il testo evidenziato è registrato in quella particolare area della memoria di Windows chiamata Appunti, cui abbiamo accennato qualche riga più indietro. La fase successiva consiste nel collocare il cursore, che viene mostrato come una barretta intermittente, nel punto in cui si ha intenzione di posizionare il testo. Successivamente va scelta l’opzione Incolla. Questa è disponibile solamente se negli Appunti sono presenti informazioni registrate con un comando di Taglia o Copia. A prima vista tutto questo può apparire piuttosto complicato, ma sarà sufficiente qualche minuto d’esercizio per ‘prendere mano’ con il corretto modo di procedere. Si tenga presente che la porzione di testo contenuta negli Appunti può essere incollata anche molte volte di seguito: essa verrà sovrascritta solo da una successiva operazione di Taglia o di Copia. Tornando al menu Modifica, possiamo vedere che esso è corredato anche da altre scelte, oltre a quelle appena accennate. Una di queste è Elimina. Il nome stesso ci indica il suo utilizzo. Serve, infatti, per cancellare una lettera oppure un’intera parte evidenziata. La stessa funzione è assolta dal tasto Canc, che oltretutto presenta il vantaggio di essere indubbiamente più pratico e veloce.

ANTONIO FAVINO


Pag.17

15/03/01

15.21

Se nel corso della digitazione si ha la necessità di immettere nei propri documenti la data e l’ora correnti esiste l’apposita opzione Data/ora. Nel menu Modifica troviamo inoltre Seleziona tutto, che ovviamente serve per selezionare l’intero documento, e infine Annulla. Quest’ultima preferenza permette di annullare l’operazione effettuata più di recente. La sua presenza ci permette di lavorare con un minimo di sicurezza: se si commettesse un errore, infatti, sarebbe comunque possibile correre ai ripari. L’importante è non farsi prendere dal panico e adoperare immediatamente l’opzione! Un discorso a parte merita il menu File. Il motivo è presto spiegato: utilizzandolo si possono effettuare tutte le operazioni per la manipolazione dei files; mi riferisco all’apertura di quelli esistenti, al salvataggio su disco di quelli nuovi, alla impostazione delle caratteristiche di stampa e alla stampa vera e propria. Il relativo menu a discesa presenta, nell’ordine, un elenco di scelte: Nuovo, Apri, Salva e Salva con nome . Il significato di queste funzioni non è difficile da intuire; ma qualche chiarimento in più certamente non guasta. La scelta Nuovo serve, ovviamente, per creare un nuovo file. In realtà, quando si apre l’applicazione, si presenta una finestra completamente vuota, vale a dire un nuovo file. Basta iniziare la digitazione per realizzare la creazione vera e propria; di conseguenza l’opzione va utilizzata per creare più files in un’unica sessione di lavoro. Se invece si desidera lavorare su un file già esistente, va scelto Apri. Questo fa comparire una seconda finestra, detta di dialogo, che permette di selezionare il file da aprire. L’applicazione Blocco Note è predisposta per cercare i files che hanno come estensione .TXT. Nella casella Tipo File è evidenziata l’estensione predefinita. Preme ndo il triangolino nero posto alla sua destra si possono effettuare scelte differenti; se invece si conosce già il nome del file da aprire è sufficiente

Figura 4 - Apertura di un file in Windows 3.x

digitarlo nella casella Nome File. Nel caso in cui i risultati della ricerca non ci soddisfino, un click con il mouse sulla casella Cerca in dà la possibilità di scegliere altre cartelle, ma anche unità floppy, CD o il Desktop. Anche in questo caso un esercizio di pochi minuti sarà sufficiente per prendere confidenza con le semplici operazioni descritte. Gli utenti di Windows 3.x

ANTONIO FAVINO


Pag.18

15/03/01

15.21

troveranno qua lche lieve differenza rispetto alla descrizione appena fatta; in ogni caso l’illustrazione in Fig. 4 dovrebbe far sparire ogni dubbio. A parte le minime differenze nell’estetica, le scelte Nome file e Tipo file rimangono le stesse già viste per Windows 95/98, anche se il modo di operare è leggermente diverso. Si può infatti scegliere in modo indipendente la Directory e l’unità sulla quale essa si trova. Dal punto di vista della praticità, forse Windows 98 risulta di uso più immediato, ma sostanzialmente tutte le differenze si limitano a questo. Una volta aperto un file, o creatone uno nuovo, si arriva al punto in cui le variazioni prodotte devono essere archiviate sul disco. In questo caso si utilizzeranno le opzioni di salvataggio. Salva si adopera per registrare un file esistente che abbia subìto modifiche. Al contrario la scelta Salva con nome permette di salvare per la prima volta un file nuovo, oppure di effettuare la nuova copia di un file esistente. In questo secondo caso, il file dovrà avere un nome diverso se si trova nella stessa cartella del file di origine (in Windows 3.x le cartelle sono chiamate Directory); mentre il nome può restare uguale se il salvataggio avviene in cartelle diverse. Ci sono molte persone che si confondono nell’utilizzo di queste due opzioni, ed è abbastanza frequente che, volendo salvare una copia del file, qualcuno decida di scegliere Salva. Non è difficile immaginare la disperazione del poveretto al momento di cercare una copia che, in realtà, non è stata mai prodotta. A tutte queste informazioni devo però aggiungere una piccola osservazione. Come abbiamo visto Bloc Notes apre i files con estensione .TXT e, allo stesso modo, la aggiunge al momento di salvarli. Questo, però, ci crea qualche problema con i file codificati HTML, i quali devono avere estensione .HTM oppure .HTML. Di conseguenza, se state lavorando su uno di questi files, al momento di aprirlo potete digitare il suo nome nella casella Nome file, oppure potete scegliere la voce Tutti i files nella casella Tipo file. Arrivati a questo punto siamo in grado di creare e salvare un file. Può esserci però anche l’esigenza di stamparne il contenuto per una rilettura, o per la sua diffusione. Ancora una volta il menu File ci offre le scelte necessarie alla gestione della stampa. Stiamo parlando di Imposta Pagina e Stampa. La prima permette di regolare l’aspetto generale della pagina, dei margini e di eventuali indicazioni accessorie, mentre con la seconda si procede alla stampa effettiva del file. Per gli utenti di Windows 3.x esiste un’opzione supplementare, Imposta stampante, che permette di regolare le proprietà della stampante in base alle necessità di utilizzo. Tutto sommato Blocco Note non è difficile da usare, anzi, per qualcuno potrebbe anche essere divertente. Un po’ di esercizio ci permetterà di prendere confidenza con il programma prima di passare al prossimo capitolo, in cui faremo qualche accenno a un’entità piuttosto misteriosa: il DOS.

ANTONIO FAVINO


Pag.19

15/03/01

15.21

PER POTER LAVORARE: PARLIAMO UN PO’ DEL DOS Che razza di diavoleria è questo DOS? Chi lo conosce? La domanda è più che legittima, perché oggi il DOS è una parte piuttosto nascosta delle diverse versioni di Windows. Dobbiamo parlarne perché alcune sue caratteristiche derivano direttamente da un Sistema Operativo chiamato UNIX. In Internet il sistema UNIX è molto utilizzato, quindi conoscere il DOS ci è utile al momento di gestire i documenti all’interno del nostro sito. Se qualcuno si fosse momentaneamente distratto, gli ricordo che un sito può essere contenuto anche sull’hard disk del nostro computer o, addirittura, in un dischetto! DOS è la sigla di Disk Operating System, e per lungo tempo ha rappresentato il più diffuso Sistema Operativo per Personal Computer. Il Sistema Operativo è un insieme di programmi che serve per far funzionare il computer stesso. Al DOS è possibile accedere per mezzo di una finestra all’interno di Windows 95/98, oppure dopo aver scelto l’opzione ‘Riavvia il sistema in modalità MS-DOS’ del tasto Avvio/Start. In entrambe le situazioni sullo schermo è visualizzato un simbolo come quello che segue: C:\> Si tratta del cosiddetto prompt del DOS, che viene adoperato per l’immissione dei relativi comandi. La sua presenza vuole più o meno significare: “Il Sistema Operativo è pronto...aspetto che Tu mi dia qualche ordine”. Questo ci permette di effettuare qualche piccola operazione di esplorazione sull’hard disk o, meglio ancora, su un dischetto da 3,5”. Per poter aprire una finestra DOS bisogna premere il tasto Avvio/Start, scegliere la voce Esegui e digitare nell’apposito spazio il comando Command. Se, per sicurezza, si vuole lavorare su un floppy disk basta digitare dopo il segno maggiore (>) del prompt: C:\>A: Premendo il tasto “invio” il prompt assumerà questo aspetto: A:\> Questo significa che il sistema ci ha “spostato” sull’unità A:, cioè il floppy disk. Queste poche indicazioni ci hanno permesso di fare una piccola ANTONIO FAVINO


Pag.20

15/03/01

15.21

scoperta: la lettera che compare sulla sinistra del prompt indica l’unità sulla quale ci troviamo in un determinato momento. Per spostarsi da un’unità a un’altra basta digitarne la lettera identificativa seguita dai due punti, e premere il tasto invio. A questo punto bisogna fare una breve precisazione. Tutti, adoperando Windows, sanno cos’è una cartella e come va utilizzata. Per creare una nuova cartella è sufficiente fare un click con il tasto destro del mouse e scegliere l’opzione Nuova Cartella. Fin qui nulla di nuovo. Allo stesso modo dovremmo sapere che le cartelle sono dei “contenitori” all’interno dei quali depositiamo i nostri files. Non starò a descrivere come inserire un file all’interno di una cartella, farò però notare che tutti gli interventi da noi effettuati in Windows si basano su operazioni visive, facilmente verificabili. In DOS tutto ha un funzionamento diverso: le cartelle si chiamano directory e ogni azione può essere effettuata solo impartendo i comandi dalla apposita riga di comando. Quindi, se si desidera controllare il contenuto di una cartella, in Windows basta un doppio click su di essa, mentre in DOS bisogna digitare il comando: A:\>DIR *.* /s /p In questo modo si avrà un elenco che visualizza il contenuto del dischetto, dell’Hard Disk o, più in generale, dell’unità sulla quale ci troviamo. Se il dischetto è vuoto il Sistema Operativo mostrerà una schermata che ci comunica tale situazione. Per questo, adoperando Windows, creiamo sul floppy due cartelle che chiameremo IMAGES e DATI. Dalla finestra DOS riproponiamo il comando precedente, senza però indicare /s e /p. Questa volta ci verrà mostrata una schermata come questa: Il volume nell'unità A non ha etichetta Numero di serie del volume: 155A-1CD6 Directory di A:\ IMAGES DATI

0 file 2 dir

13/01/00 13/01/00

10.37 images 10.37 dati

0 byte 1.456.640 byte disponibili

Adesso, sempre adoperando Windows, possiamo copiare qualche file nel dischetto e all’interno delle cartelle. Sul vostro computer ci sarà sicuramente qualche file che si chiama LEGGIMI.TXT. Lo copiamo più volte inserendone uno in ogni cartella e uno direttamente nel dischetto. Digitando solamente DIR il display mostrato in precedenza modificherà i proprio contenuto aggiungendo il file LEGGIMI.TXT.

ANTONIO FAVINO


Pag.21

15/03/01

15.21

Se però desideriamo “entrare“ in una directory per creare, copiare o cancellare dei file, con tutto ciò che abbiamo visto fino a questo punto non potremmo fare molta strada. Il comando che ci permette di effettuare questa operazione è CD, che significa Cambia Directory. Digitando, ad esempio, CD IMAGES il sistema ci porterà all’interno di questa directory. Facendo una prova ci accorgeremo di una particolarità: il prompt si modifica segnalandoci lo “spostamento”. Esso diventa quindi: A:\IMAGES> Da Windows creiamo, all’interno della cartella IMAGES, una cartella che chiameremo FOTO. Dalla finestra DOS eseguiamo il comando CD FOTO e il prompt cambierà ancora in: A:\IMAGES\FOTO> Eccoci dunque arrivati allo scopo di tutta questa lunga prefazione. Se ci si fa caso, la sequenza di indicazioni del prompt non è molto diversa da quella di certi indirizzi Internet, in cui i vari nomi sono separati da una barra rovesciata. Questo perché i documenti di un sito possono trovarsi all’interno di directory, ne più ne meno come è avvenuto nel nostro dischetto. Ora sarà più chiaro il motivo di questa chiacchierata. Resta da dire un’ultima cosa. Se si desidera “tornare“ alla directory IMAGES bisogna impostare il comando CD .. (notare i due puntini). Se invece si vuole “saltare” direttamente a DATI bisogna usare CD \DATI. Gli effetti dei due comandi sono visualizzati di seguito: A:\IMAGES\FOTO>CD .. A:\IMAGES>CD \DATI A:\DATI> Conviene tenere a mente queste informazioni: esse ci saranno utili quando, nel nostro sito, dovremo puntare a documenti o immagini posizionate in diverse directory.

COME È FATTO UN DOCUMENTO HTML? Costruire una pagina HTML è incredibilmente facile. L’industria della programmazione ha creato splendidi programmi che sono in grado di realizzare documenti molto belli e ricchi di effetti sicuramente affascinanti. C’è però un piccolo particolare, il loro costo supera le centinaia di migliaia di lire e non tutti sono disposti, o sono in grado, di spenderli. Per nostra fortuna,

ANTONIO FAVINO


Pag.22

15/03/01

15.21

come abbiamo visto, ogni computer è dotato di Blocco Note, che non costa nulla e che ci permette di realizzare creazioni che non hanno niente da invidiare a quelle dei migliori siti. In realtà l’interesse che può suscitare una pubblicazione sul Web sta nella fantasia e nella creatività di chi l’ha realizzata, e tali merci non sono vendute con nessun programma. Entriamo comunque in qualche dettaglio più tecnico. Per comprendere come è articolato il linguaggio HTML immaginiamo che la struttura di ogni documento sia composta di tanti mattoncini. Ognuno di essi rappresenta un componente fondamentale del documento. Per questo motivo essi sono definiti elementi del documento. Tanto per fare un esempio tali elementi sono costituiti dalle indicazioni di intestazione, dalle tabelle, dai paragrafi, dalle liste di elenchi e da altri accessori di cui avremo occasione di parlare. Per poter identificare ogni singolo elemento l’HTML utilizza i cosiddetti tags. In lingua inglese il tag è un’etichetta. Nel nostro caso queste “etichette”, o “marcatori”, vengono inserite all’inizio e alla fine di un testo, e ci indicano in quale modo va “interpretato” quel testo. Il browser, di cui abbiamo già abbondantemente parlato, è il programma che riesce a “capire” il significato dei tags e a visualizzarne correttamente il documento. Facciamo un esempio che ci permetta di capire perché l’HTML utilizza queste etichette. Immaginiamo di trovarci in cima all’Himalaya con un quadernino e un cellulare. Ci troviamo in uno dei posti più belli del mondo, ma anche tra i più sperduti, e vogliamo comunicare le nostre impressioni ad alcuni amici, che le debbono scrivere nel Giornalino di Classe. Sul piccolo quaderno ci siamo scritti tutto, ma per farlo stampare ai nostri amici esattamente come l'abbiamo pensato, nella nostra telefonata dobbiamo specificare qual è il titolo, quali sono le parti da sottolineare, quali da scrivere in grassetto, quando saltare una o più righe e via via fornire tutte le istruzioni necessarie alla corretta preparazione del nostro servizio. Il linguaggio HTML serve proprio a questo: dare una veste editoriale ai documenti da pubblicare sul Web. Per evidenziare le diverse caratteristiche del documento si utilizzano i tags, che in apertura sono rappresentati da una “parentesi” ad angolo (). Il tag di chiusura è simile a quello di apertura, con la differenza che il suo nome è preceduto da una barra (/). Al suo interno possono essere presenti altre indicazioni che definiscono le caratteristiche del tag stesso. Tali caratteristiche si chiamano attributi. Nel linguaggio HTML, quindi, per definire di un tag si usa la forma che segue: parte del documento da marcare In questo caso le parentesi quadre servono solo per evidenziare una parte valida solo per alcuni tags. Al momento di preparare un documento, quindi, tali parentesi non vanno indicate. La codifica con il linguaggio HTML non prevede, per nostra fortuna, moltissime regole. Una di esse riguarda l’uso delle lettere maiuscole e

ANTONIO FAVINO


Pag.23

15/03/01

15.21

minuscole. Nella norma, è indifferente che un tag sia inserito in forma maiuscola o minuscola, però in alcuni casi determinati ci sono piccole eccezioni. Come abbiamo già detto nel Cap. 3, l’HTML è stato disciplinato da un comitato di studiosi che ha fissato alcune norme anche sui caratteri da utilizzare. Per questo motivo i tag che definiscono alcune lettere particolari, come le vocali accentate, sono sensibili al fatto che, nella preparazione del documento, siano utilizzati caratteri maiuscoli o minuscoli. Questo proprio per distinguere se si desidera che quel carattere sia visualizzato maiuscolo o minuscolo. Naturalmente, quando ci sarà la necessità, verrà opportunamente segnalato quali tags sono sensibili alle maiuscole o minuscole. In questo volumetto parleremo del codice HTML che è stato approvato da un apposito comitato di studiosi. Per adeguarsi alle evoluzioni tecniche e alle esigenze del pubblico il codice HTML viene periodicamente aggiornato, e ogni revisione viene siglata con un numero. Nel nostro caso si parlerà del linguaggio HTML 3.2, anche se, per determinate particolarità, si farà cenno ad alcune caratteristiche del codice 4.0. A causa della continua evoluzione del linguaggio, inoltre, l’uso di determinati tags viene accantonato a favore di forme più evolute. In conseguenza di ciò alcuni tag vengono del tutto abbandonati, mentre l’utilizzo di altri viene dichiarato disapprovato. Quando un tag viene abbandonato esso non fa più parte delle specifiche HTML, e viene visualizzato dai browsers solamente per mantenere la compatibilità con i vecchi documenti. Nel caso in cui un tag venga classificato come disapprovato, invece, esso è tollerato ma non viene garantito il suo uso futuro. Poiché in questo elaborato tratteremo l’HTML 3.2, alcuni tags risulteranno corretti per tale versione, ma disapprovati per l’HTML 4.0. In tal caso verrà evidenziata la loro condizione di elemento disapprovato, ufficialmente definito come deprecated. Le regole fissate dal Comitato per l’HTML non sono però rispettate da tutti, perché alcuni aggiungono codici “personali”, riconosciuti magari da un determinato browser. A causa di ciò non tutti i tag vengono interpretati correttamente in tutti i casi. I browsers che non riconoscono un determinato tag solitamente lo ignorano. Per noi questo non dovrebbe essere un problema, proprio per il motivo che faremo riferimento alle regole “ufficiali”, ma è giusto essere informati anche di questa eventualità.

Le indicazioni all’inizio del documento Con questa indicazione si è conclusa la premessa, forse un po’ noiosa, ma necessaria. Ora passiamo a vedere come è fatto un documento HTML. In esso devono comparire obbligatoriamente determinati tags, allo scopo di rispettare le specifiche del Comitato SGML, di cui abbiamo parlato nel Capitolo 3.

ANTONIO FAVINO


Pag.24

15/03/01

15.21

Possiamo immaginare un qualsiasi documento HTML come una specie di serpente, dotato di una sua testa e di un lungo corpo. Nella lingua inglese testa si dice HEAD, e corpo BODY. Immaginiamo poi che, come il serpente cobra, sulla testa ci sia un segno. Nel nostro caso tale segno è HTML. Con questo esempio abbiamo introdotto tre tag indispensabili per il codice HTML; quindi il più semplice dei documenti sarà composto così: Il mio documento
Imparo l’HTML

Non avrei mai pensato che scrivere sul Web fosse così facile!!!

…e i risultati si vedono subito!
Come si vede la logica è molto semplice: si comincia con il tag , che apre e chiude tutto il documento; segue poi la testa, con tag , all’interno del quale si colloca il tag . Non è difficile intuire che il suo significato è titolo, cioè la parte che compare nell’intestazione del browser e che “presenta” l’argomento della pagina. È quindi molto importante che questo sia breve, ma che illustri chiaramente i contenuti del documento che si sta leggendo. Purtroppo non tutti applicano questa regola, ed è un vero peccato anche per il visitatore del sito! Qualcuno noterà che, nell’esempio, il tag è scritto in maiuscolo: si tratta di un’abitudine dei programmatori HTML per rendere più evidente la presenza di certi tag. Continuando nella lettura troviamo il tag di chiusura della testa () e il tag . Da questo punto in poi inizia la parte centrale del documento, quella in cui si inseriscono il testo, le immagini, i collegamenti ad altri siti e tutti quegli elementi che servono a dare alle pagine l’aspetto e le caratteristiche che più vi piacciono. Tutto quello ciò che è contenuto tra i tag di inizio e di fine viene visualizzato all’interno della finestra del browser. Il tag
serve per la creazione di “titoli” secondari. Avremo occasione di analizzarlo successivamente. Poniamo, invece, l’attenzione sul tag
. Esso è molto importante perché definisce l’inizio e la fine di un paragrafo. Per un insegnante di Italiano il paragrafo è quel gruppo di frasi, tra loro collegate, con le quali sono suddivisi i capitoli. In informatica il paragrafo è un qualcosa di diverso, perché può essere costituito anche da una singola frase, o da una sola parola: ogni volta che scrivendo sul computer viene premuto il tasto invio, si genera un paragrafo. Il tag
, quindi, comunica al browser di comportarsi come se si fosse premuto il tasto invio, e aggiunge ANTONIO FAVINO


Pag.25

15/03/01

15.21

automaticamente precedente.

uno

spazio

bianco

per

distanziarsi

dall’elemento

Il tag
deve contenere obbligatoriamente dei caratteri di testo. Nel caso si volessero inserire delle righe vuote, oppure si desideri spezzare una certa frase, si può usare il tag
. Quest’ultimo non ha bisogno di chiusura, di conseguenza è del tutto errato aggiungere
. Da ciò si capisce che, quando si prepara un documento in codice HTML, non vengono in nessun modo considerati gli spazi e le righe bianche inserite dall’editor di testo, che quindi possono essere utilizzate per facilitare la leggibilità del codice di base. In realtà un documento come quello presentato è perfettamente regolare dal punto di vista del codice adoperato, ma richiede una dichiarazione, obbligatoria, che “annuncia” ai browser quale versione del linguaggio HTML è stata adoperata. Questa dichiarazione va inserita in testa al documento, prima di qualsiasi altro tag. Essa è: Il mio documento È importante che tale dichiarazione sia riportata esattamente, senza aggiunte o modifiche, in quanto deve rispettare le regole più generali fissate da SGML. Tecnicamente tale enunciato viene chiamato DTD, il cui significato è Definizione del Tipo di Documento. C’è da dire che il tag composto dal segno < seguito dal punto esclamativo (!) che incontriamo nella dichiarazione può essere facilmente confuso con il tag di commento. I commenti, invece, hanno una natura ben diversa, perché sono annotazioni aggiunte dall’autore del documento. Esse servono per individuare determinate parti del codice, oppure per inserire note o spiegazioni. Il tag di commento, ovviamente, non deve seguire alcuna regola di codifica e non prevede di essere chiuso con il segno /, ma con il segno -->. Qui di seguito è mostrato qualche esempio su come deve essere redatto un commento. Negli esempi successivi vengono presentate alcune forme di annotazione:

ANTONIO FAVINO


Pag.26

15/03/01

15.21

Testo da non variare…
Anche se non si tratta di indicazioni obbligatorie, è bene inserire i due seguenti tag, utili per dichiarare il linguaggio utilizzato e il genere di caratteri in uso.

Gestire il testo nel proprio documento: gli stili logici Non è difficile immaginare che la parte “che fa più colpo” in chi legge una qualsiasi pagina Web è quella compresa tra i due tags . Per questo motivo esiste tutta una serie di istruzioni che ci permette di regolare l’aspetto del testo, in modo che abbia determinate caratteristiche. Attribuire ad uno scritto specifiche proprietà come il tipo di carattere, la sua dimensione, il grassetto o il corsivo viene tecnicamente definito formattazione. Anche l’HTML permette di applicare determinate formattazioni al testo. In questa parte del capitolo impareremo ad utilizzare i tags che ne consentono la formattazione. Se voi aprite un qualsiasi libro, o anche un giornale, vi accorgerete che alcuni titoli adoperano caratteri grandi piuttosto evidenti, mentre altri utilizzano caratteri un po’ più piccoli, di dimensioni comunque più grandi di quelle utilizzate per il testo normale. In molti libri scolastici, specie di storia, o di geografia o di matematica, noterete che c’è un titolo grande ad ogni capitolo, e ci sono poi diversi sottotitoli, scritti magari con caratteri abbastanza evidenti ma di dimensioni inferiori. Anche l’HTML prevede la possibilità di utilizzare questi criteri, adoperando sei diversi livelli di enfatizzazione. I relativi tag sono facili da ricordare perché si chiamano H1, e via di seguito fino a H6. Il testo racchiuso nel tag
sarà rappresentato con caratteri molto grandi, in grassetto. Prima e dopo saranno lasciate alcune righe bianche per dare ma ggior risalto al testo. Il tag
, invece, è quello enfatizzato in modo meno evidente. È sconsigliabile saltare tra livelli differenti. Non è quindi troppo sensato iniziare con un tag
, per poi passare al tag
, questo perché non tutti i browser mostrano le enfatizzazioni esattamente allo stesso modo. Conviene quindi adoperare questi tag in modo decrescente, anche perché, a partire dal tag
, le dimensioni del carattere sono inferiori a quelle del

ANTONIO FAVINO


Pag.27

15/03/01

15.21

testo normale, pur mantenendo un’evidenziazione in grassetto. Di seguito è mostrato un testo con le diverse enfatizzazioni:

Testo evidenziato con il tag H1 Testo evidenziato con il tag H2 Testo evidenziato con il tag H3 Testo evidenziato con il tag H4 Testo evidenziato con il tag H5 Testo evidenziato con il tag H6

Una volta definito il titolo, e gli eventuali sottotitoli, si può passare alla stesura dei contenuti scritti del documento. Abbiamo visto che ciò è possibile utilizzando il tag
, eventualmente associato al tag
che permette di inserire righe vuote o interruzioni di riga. Inoltre, per regolare l’allineamento delle righe all’interno della pagina, si può utilizzare il tag ALIGN. Esso può assumere quattro parametri: LEFT; RIGHT; CENTER e JUSTIFY. Sono vocaboli inglesi, ma il loro significato si può intuire con facilità. I primi due significano sinistra e destra. Questo significa che le righe del paragrafo saranno allineate sul lato sinistro o destro dello schermo, mentre sul lato opposto non saranno allineate. Il valore CENTER pone la riga al centro, mentre JUSTIFY allinea il testo in modo tale che i margini destro e sinistro siano sempre allineati. Se non si indica l’attributo ALIGN le righe saranno automaticamente allineate a sinistra. Con l’aggiunta di questi elementi si procede nella redazione del documento, inserendo tutte le informazioni che si desiderano includere nella pubblicazione. Mentre stiamo lavorando sulla nostra “opera” non dobbiamo però dimenticare un particolare. La lettura di qualsiasi opera scritta su carta è piuttosto facile anche se si hanno a disposizione alcune pagine composte dal solo testo. Chi legge un documento a computer, invece, tende a stancarsi con una certa facilità, poiché la lettura a video è piuttosto faticosa e poco attraente. Per questo motivo le informazioni codificate in HTML devono essere abbastanza immediate, interessanti e piuttosto “agili”. Immaginate di leggere questo stesso testo sul monitor di un computer. Già fate fatica ora, immaginiamo cosa succederebbe se questo foglio fosse costituito da uno schermo dal fondo bianco abbagliante!

ANTONIO FAVINO


Pag.28

15/03/01

15.21

Ecco quindi una importante regola da ricordare: l’informazione deve essere immediata: meglio dare poche notizie essenziali da approfondire in una pagina successiva piuttosto che sommergere il lettore di una grande massa di informazioni in un unico elaborato. Per fare questo possiamo concepire un ipertesto come un documento che funziona a strati successivi: dapprima vi è lo strato superficiale che fornisce le informazioni essenziali. Si può poi concepire un secondo strato di approfondimento e, infine, uno strato analitico che può essere presente o meno a seconda del tema trattato. Non bisogna dimenticare, infatti, che il vero protagonista del documento ipertestuale è il visitatore, non l’autore. Tenendo in considerazione questo aspetto, ci si renderà conto che il testo redatto con il solo tag
è piuttosto povero dal lato esteriore: si presenta come una ininterrotta sequenza di parole che riempiono tutto il video, interva llate al massimo da qualche linea vuota di separazione. Per aiutarci, gli ideatori del linguaggio HTML ci hanno fornito ulteriori tags utili alla formattazione del testo. In alcuni elaborati, specie di tipo divulgativo, può presentarsi la necessità di riportare frasi o citazioni tratte da scritti di autori specifici. In questi casi si riveleranno molto utili i tags
e . Il primo cambia i margini in modo tale da creare un blocco di testo separato dalla parte rimanente, utilizzando anche il carattere corsivo. Il secondo dei due tag, invece, si limita solamente alla conversione del carattere in formato corsivo, in quanto va generalmente adoperato per riportare titoli di libri, film, documenti ecc. Allo stesso modo si comportano i tags e . Rispetto alla rassomiglianza esistente tra i diversi tags, viene spontaneo domandarsi che senso abbia disporre di più marcatori che, alla fine, producono lo stesso effetto. In realtà, tornando all’esempio fatto all’inizio di questo capitolo, se consideriamo che i tags hanno la funzione descrivere “la stampa del nostro giornalino” essi saranno diversi sebbene, visivamente, siano rappresentati con il medesimo aspetto. Questo concetto, molto applicato nell’informatica in generale e specificatamente nel linguaggio HTML, ci permette di considerare l’aspetto logico del nostro documento. Lavorando con questo genere di approccio non abbiamo la necessità di sapere quale carattere è utilizzato, o quale sia la sua dimensione, perché possiamo concentrarci soltanto sui suoi aspetti “logici”. In altre parole ci è sufficiente sapere che il titolo creato con H1 è più evidente di quello che utilizza il tag H3, senza doverci curare di ulteriori aspetti. In questo modo, quindi, la presenza di tag diversi, sebbene con le medesime caratteristiche estetiche, ci permette di capire la funzione logica di una certa parte di frase rispetto ad un’altra. Un altro vantaggio di questo modo di operare sta nel fatto che siamo solo relativamente vincolati dal browser adoperato da chi legge, perché sarà compito del software gestire il testo secondo i medesimi criteri logici. Un ultimo punto. Gli ipertesti sono gestiti e censiti da una miriade di grossi computer, chiamati server, alcuni dei quali sono robotizzati. Tra questi ANTONIO FAVINO


Pag.29

15/03/01

15.21

potenti elaboratori vi sono i cosiddetti motori di ricerca che hanno la funzione di elencare i documenti con un determinato contenuto, oppure sintetizzatori vocali, in grado di riprodurre in forma vocale un documento scritto; una suddivisione logica del testo permette di utilizzare al meglio le capacità di questi elaboratori. Ecco spiegato il motivo per cui si dispone di un quantitativo di tag che, solo apparentemente, assolvono al medesimo scopo ed è per questo che essi vengono chiamati Stili Logici. Mi rendo conto che due o tre di queste “tirate” invoglierebbero chiunque a gettare nei campi questo volumetto, ma non sarebbe corretto trascurare questi aspetti, che hanno molta importanza per la visibilità del vostro lavoro. Maggiore visibilità vuol dire anche più probabilità di lettura da una grande massa di persone, anche straniere. Qualche attimo di pausa per “digerire” il malloppo e poi passiamo a una breve descrizione dei tags di formattazione. Si potrebbe cominciare proprio da , che è l’abbreviazione del termine inglese emphasis, il quale significa evidenza o risalto. Va quindi utilizzato per dare rilevanza ad una frase particolarmente significativa. Al contrario, il tag serve per una definizione. In genere è utile per evidenziare una singola parola o un termine di cui si sta fornendo la descrizione. Se questo testo fosse scritto in HTML, il tag verrebbe utilizzato proprio nel vocabolo tag. Purtroppo vi è da segnalare che il browser Netscape non riconosce tale marcatore, di conseguenza esso non viene visualizzato con aspetto diverso dal testo restante. Vi sono poi ulteriori marcatori di questo tipo: , , , e altri adatti a funzioni specifiche. Tutti questi utilizzano un tipo di carattere a dimensione fissa. Sarebbe eccessivo descrivere la differenza tra i caratteri fissi e quelli proporzionali. Per semplicità dirò che i caratteri a dimensione fissa sono simili a quelli della macchina da scrivere. Il tag formatta il testo a dimensione fissa e viene adoperato per descrivere codici di linguaggio per computer. È interessante sottolineare come, in questo caso, si voglia desiderare che il browser visualizzi il testo così come è digitato, compresi eventuali spazi o righe vuote. Per ottenere questo risultato bisogna adoperare un particolare tag, chiamato . Quindi, se si desiderasse mostrare una porzione di programma, ma anche di un’espressione aritmetica, la relativa scrittura sarebbe: ANTONIO FAVINO HTML per i principianti Pag.30 15/03/01 15.21 {PARAM name="bgcolor1" value="330033"} {PARAM name="bgcolor2" value="cc99ff"} {PARAM name="bgcolor3" value="000000"} {PARAM name="bgcolor4" value="9933cc"} {PARAM name="sound" value="chord.au"} {PARAM name=”movetype1” value=”horizontal”} {PARAM name="movetype2" value="vertical"} {PARAM name="movetype3" value="horizontal"} Il successivo tag va invece adoperato quando, ad esempio, si descrivono operazioni al computer che richiedono un’immissione di dati da parte dell’utente. Ecco come potrebbe quindi essere il codice HTML di un paragrafo in cui si utilizza : Per avviare il computer dotato di software salva schermo protetto da password digitare vostra_password per riavviarlo. In questo caso vostra_password corrisponde a quella prescelta in fase di definizione del sistema Questa pagina, visualizzata con un qualsiasi browser, avrà il seguente aspetto: Per avviare il computer dotato di software salva schermo protetto da password digitare vostra_password per riavviarlo. In questo caso vostra_password corrisponde a quella prescelta in fase di definizione del sistema. Per rendere più evidente la parte compresa nel tag è stato utilizzato un carattere particolare. Il suo nome è Verdana. Esso è definito all’interno del tag . Più avanti avremo modo di imparare l’uso di tale tag. Possiamo concludere questa carrellata sui tag di definizione degli Stili Logici parlando di e . Il primo di essi serve per definire caratteri letterali presenti in frasi generiche sul tipo di “rimuovere il floppy disk prima di avviare il computer”; oppure “prima dello spegnimento accertarsi di aver completato le operazioni di scrittura” che alcuni programmi possono visualizzare come avviso informativo. Il tag si adopera invece per enfatizzare una determinata frase adoperando il carattere grassetto. Considerando che in questo capitolo c’erano non poche informazioni, direi che un breve riepilogo può chiarire qualche idea. ANTONIO FAVINO HTML per i principianti Pag.31 15/03/01 15.21 Abbiamo visto che, nel linguaggio HTML, alcuni tipi di formattazione adoperano gli Stili Logici. Essi sono molto utili per la loro flessibilità perché sono indipendenti dal tipo di carattere utilizzato, rendendo quindi più semplice il compito dell’autore. Alcuni di essi si assomigliano esteticamente, ma definiscono diversamente l’informazione contenuta in modo che browser e motori di ricerca ne interpretino la natura. I tag degli Stili Logici sono: : In genere si utilizza nella citazione di titoli di film, libri, documenti ecc. Fa uso del carattere corsivo. : tag per enfatizzare una frase in corsivo. : Definisce un nuovo termine adoperando il carattere corsivo. Non è supportato da Netscape. : Servendosi di caratteri a dimensione fissa va impiegato per riportare codici di programma. : Il tag si adopera per definire immissioni da tastiera, visualizzate con caratteri a dimensione fissa. : Da impiegare per sequenze generiche di caratteri letterali. Usa caratteri a dimensione fissa. : Usato per enfatizzare in grassetto. Oltre a questi, esistono altri tags non appartenenti agli Stili Logici, ma ugualmente utili nella formattazione dei paragrafi. Prima di tutto vi sono i tags da a per la definizione di diversi livelli di titolo; vi è poi il tag che produce un blocco di testo separato dalla restante parte del documento per la citazione di frasi o per l’evidenziazione di determinati argomenti. Tale blocco di testo appare in carattere corsivo e rientrato nei margini. Ogni browser può mostrare lievi differenze nella visualizzazione di tale testo. Infine vi è il tag , che serve per testi preformattati. In altre parole questo marcatore visualizza il testo così com’è scritto, includendo eventuali spazi o righe bianche presenti nello scritto. Se questo tag non viene adoperato i browsers ignorano tali elementi. Fine del riassunto. Adesso si potrebbe verificare se è possibile mettere in pratica ciò che è stato visto fino a questo punto. Qui di seguito è proposto un ANTONIO FAVINO HTML per i principianti Pag.32 15/03/01 15.21 testo da adoperare nella compilazione un documento HTML intitolato “Nuovi Codici per videogiochi”. Ovviamente questo titolo dovrà comparire nella barra del browser. Nell’esempio suggerito compaiono alcune frasi in lingua inglese. Sarebbe stato molto semplice tradurle in italiano, ma siccome sono affetto da manie persecutorie, chi vuole conoscerne il significato dovrà prendersi la briga di convertire in italiano i contenuti di quei passaggi. Il motivo? Anche se il solito incredulo penserà che non è così, i codici sono reali e si possono utilizzare nei giochi indicati. Se poi qualcuno volesse saperne qualcosa di più può connettersi all’indirizzo Internet indicato nel testo. Di tutta questa faccenda l’unica cosa inventata è la richiesta della password…ma penso che questo non dispiacerà a nessuno! ANTONIO FAVINO HTML per i principianti Pag.33 15/03/01 15.21 È sottinteso l’invito ad ogni lettore perché si impegni nel comporre la pagina senza l’ausilio di aiuti esterni: per verificare la correttezza del proprio documento è sufficiente confrontare il risultato finale con l’esempio proposto. Comunque, se qualcuno si trovasse in difficoltà, a Pag.82 viene presentato il codice HTML corrispondente a questo esercizio. Ricordo ai possessori del browser Netscape che quest’ultimo non è in grado di supportare tutti i tag previsti. Ecco i nuovi codici per videogiochi Dopo esserci collegati con il sito Codejunkies all'indirizzo www.codejunkies.com abbiamo ottenuto i codici più recenti da inserire in alcuni dei giochi di maggior successo. Ecco come utilizzarli: FIFA 2000 – GBC =============== Home team has 99 goals 01639CCC Home team has 0 goals 01009CCC Away team has 0 goals 0100AACC Away team has 99 goals 0163AACC Toy Story 2 – GBC ================= Infinite Health 0105aac6 Infinite Lives 0109d4c6 Coins Equal 30 011e7fc6 Turn the AR on just before you exit the level. Immediately turn the AR OFF when you see the Buzz Lightyear Coupon. Come molti sapranno il gioco TOY Story 2 è tratto dal lungometraggio di successo Toy Story 2, apparso nei nostri cinema all’inizio del 2000. Avvisiamo tutti i nostri visitatori che, per accedere alle pagine seguenti, è obbligatoria la registrazione con l’utilizzo di una password. Prima di ogni pagina, quindi, apparirà la seguente domanda: immettere la password prescelta: password Chiudo questa pagina riportando, come sempre, la frase della settimana apparsa oggi su un quotidiano locale: Quando mi disse di essere incorruttibile, capii che alludeva ad una cifra superiore alle mie possibilità. ANTONIO FAVINO HTML per i principianti Pag.34 15/03/01 15.21 Liste, elenchi e piacevolezze varie Abbiamo visto come la preparazione di un testo richieda l’utilizzo di tag diversi, a seconda del contenuto logico di tale testo. Ci siamo inoltre resi conto di come la stesura di uno scritto sia soggetta a formattazioni diverse che permettono una sua più semplice leggibilità. Quando si prepara un documento ipertestuale, infatti, bisogna sempre tenere a mente le esigenze del lettore, il quale deve trovare le proprie informazioni in modo semplice e veloce, e deve poterle leggere in modo sufficientemente rapido senza affaticare inutilmente la vista. Per questo motivo il linguaggio HTML ci mette a disposizione una serie di tag particolarmente adatti allo scopo. Capita di frequente, infatti, di dover predisporre elenchi o liste di argomenti che hanno bisogno, necessariamente, di una apposita formattazione. Esistono quindi i tags , e . L’utilizzo di questi tag è abbastanza semplice. Cominciamo dal primo. Esso va utilizzato per la creazione di elenchi generici, che non hanno necessità di essere numerati. È particolarmente indicato per quel tipo di liste che, abitualmente, sono caratterizzate da “punti elenco”. La lista deve incominciare con il tag ,e ogni nuovo punto elenco deve essere segnalato con il tag . Quest’ultimo marcatore non ha bisogno del relativo tag di chiusura. La fine della lista deve essere ovviamente contrassegnata dal tag di chiusura . Il codice HTML prevede la possibilità di modificare l’aspetto dei punti elenco nelle liste di elenchi generici per mezzo dell’attributo TYPE. I valori possibili sono DISC, SQUARE e CIRCLE. Nel primo caso il browser dovrebbe rappresentare il punto elenco con un cerchio pieno. Il comando SQUARE dovrebbe invece essere rappresentato da un piccolo quadrato vuoto, costituito cioè dai soli bordi. Infine CIRCLE sarà rappresentato da un cerchio vuoto. Il condizionale è d’obbligo poiché non tutti i browsers si comportano alla stessa maniera, inoltre la rappresentazione è condizionata dal fatto che la lista possa essere costruita su diversi livelli di punti elenco. Ecco l’esempio di un codice HTML relativo ad una lista non numerata: Lista del materiale per il disegno tecnico Ecco la lista del materiale necessario alle lezioni di disegno tecnico Matita durezza 2B Compasso Squadre a 30 e 45 gradi Rapidograph ANTONIO FAVINO HTML per i principianti Pag.35 15/03/01 15.21 L’insegnante ricorda che la scuola non risponde del materiale dimenticato nell’aula di disegno Il codice HTML di questo ipotetico e forse improbabile elenco presenta alcune particolari caratteristiche che meritano di essere messe in rilievo. Una di queste riguarda la possibilità di adoperare, all’interno dell’elenco stesso, determinati tag con i quali è possibile formattare il testo in esso contenuto sulla base delle nostre esigenze specifiche. L’elenco in questione avrà perciò l’aspetto che possiamo vedere: Ecco la lista del materiale necessario alle lezioni di disegno tecnico • • • • Matita durezza 2B Compasso Squadre a 30 e 45 gradi Rapidograph • L’insegnante ricorda che la scuola non risponde del materiale dimenticato nell’aula di disegno L’ultima voce dell’elenco, infatti, utilizza un carattere diverso rispetto al testo che la precede, in modo da colpire il lettore e attirare la sua attenzione sul contenuto del messaggio. La voce precedente, invece, adoperando il tag evidenzia il testo con il carattere corsivo. In questo modo ci si renderà conto di come è possibile modificare il testo adattandolo alle proprie esigenze, racchiudendo determinati tag all’interno di altri. In termine tecnico questa operazione viene chiamata nidificazione. Oltre alla creazione di elenchi generici l’HTML permette di generare liste numeriche. Il creatore del codice, in questo caso, è liberato dal compito di apporre la sequenza numerica esatta, in quanto è il browser che provvede automaticamente alla numerazione. Indubbiamente questo rappresenta un notevole vantaggio in quanto gli spostamenti e i riordini delle liste sono facilmente attuabili, senza doversi occupare anche della correzione delle relative numerazioni. Per definire una lista numerata si adopera il tag . È quasi superfluo aggiungere che la lista richiede il tag di chiusura .Come è già stato fatto notare trattando delle liste non ordinate, anche nelle liste numerate si possono adoperare caratteri diversi da quelli numerici utilizzando l’attributo TYPE. È inoltre possibile numerare la lista cominciando da un numero, o una lettera, diversa dalla prima. In questo caso si adopera l’attributo START. Nel caso in cui si desideri modificare la sequenza di numerazione a partire da una determinata voce è possibile usare l’attributo VALUE, associabile soltanto al tag . È importante sottolineare che tali attributi sono stati inclusi nell’elenco dei disapprovati a ANTONIO FAVINO HTML per i principianti Pag.36 15/03/01 15.21 partire dalle nuove specifiche HTML 4.0. Data la varietà di informazioni fornite per le liste numerate, si può riassumere quanto finora visto dicendo che: • Il tag può essere dotato dell’attributo TYPE per definire il tipo di numerazione, e/o dell’attributo START per stabilire il valore da cui iniziare la numerazione. • Il tag può essere dotato dell’attributo TYPE come definito precedentemente, e/o dell’attributo VALUE per modificare la sequenza della numerazione. • Gli attributi START e VALUE sono soltanto numerici e devono rappresentare un numero intero. Sono quindi escluse le numerazioni decimali. A seconda del tipo di numerazione, quindi, il valore 3 potrà rappresentare un numero, la lettera “C” o “c”, la numerazione iii, o la numerazione romana III. La definizione del tipo di numerazione è organizzata come segue: numerazione a numeri arabi numerazione a lettere minuscole numerazione a lettere maiuscole numerazione a numeri romani minuscoli numerazione a numeri romani maiuscoli È importante evidenziare che questo attributo è sensibile alle lettere maiuscole e minuscole, quindi bisogna porre molta attenzione nel suo utilizzo, per non incorrere in errori di visualizzazione. Come terza possibilità in HTML è possibile utilizzare le cosiddette liste di definizione. Ogni termine è costituito da due elementi distinti: l’espressione da definire, contrassegnata con il marcatore , e la vera e propria definizione, che utilizza il tag . L’utilizzo di queste due parti separate permette al browser di visualizzare la parte di definizione (contrassegnata con il tag ) come un blocco di testo spostato sulla destra rispetto al termine marcato con . All’inizio e alla fine della lista, come sempre, vengono richiesti i tags e . Dal momento che si può facilmente verificare la condizione in cui il termine da definire sia estremamente breve, esiste l’attributo COMPACT che “avverte” il browser della brevità dell’elemento in modo tale che la visualizzazione finale sia resa sullo schermo in modo corretto. Come abbiamo detto all’inizio di questo capitolo gli attributi specificano determinate caratteristiche del tag stesso; in questo caso, quindi, il tag sarà definito e dovrà essere adoperato soltanto nei casi in cui il ANTONIO FAVINO HTML per i principianti Pag.37 15/03/01 15.21 termine da definire sia veramente molto breve. Con le specifiche HTML 4.0 questo attributo è entrato a far parte di quelli disapprovati. Qualsiasi tipo di lista può avvantaggiarsi dall’uso di formattazioni particolari, che sono realizzabili adoperando il tag , in modo da visualizzare il testo secondo le proprie esigenze velocemente e con grande facilità. A questo proposito c’è da ricordare che esiste un nutrito insieme di tags dedicati alla gestione dell’aspetto esteriore dei caratteri, che ampliano le possibilità di modifica sulla struttura visiva del documento. Riprendendo ciò che avevo affermato qualche riga più sopra sul tema della nidificazione, i diversi tipi di lista possono essere utilizzati all’interno l’uno dell’altro senza nessuna forma di limitazione. Ovviamente sarà compito dell’autore porre la massima attenzione nel gestire in modo corretto i tags di apertura e chiusura, altrimenti si otterranno risultati completamente inaspettati. Sulla base di quanto visto fino a questo punto si può ipotizzare una lista nidificata piuttosto elaborata che utilizza il codice HTML che viene in seguito mostrato. Per semplicità nel codice non sono stati inseriti i tag di inizio documento (HEAD, TITLE, BODY). Articolo 39 del Codice della Strada I segnali possono essere muniti di pannelli integrativi nei seguenti casi: Per definire la validità nello spazio del segnale. Per precisare il significato del segnale. I simboli da utilizzare per pannelli integrativi Mod. II.6, salvo altri che potranno essere autorizzati dal ministero dei Lavori Pubblici, sono: Pennello e striscia: Segni orizzontali in corso di rifacimento Auto in collisione: Incidente Coda Cartello costituito da due file di auto su sfondo bianco. Il risultato che si otterrà con questo codice HTML sarà il seguente: ANTONIO FAVINO HTML per i principianti Pag.38 15/03/01 15.21 Articolo 39 del Codice della Strada 1. I segnali possono essere muniti di pannelli integrativi nei seguenti casi: a. Per definire la validità nello spazio del segnale. b. Per precisare il significato del segnale. 2. I simboli da utilizzare per pannelli integrativi Mod. II.6, salvo altri che potranno essere autorizzati dal ministero dei Lavori Pubblici, sono: ™ ™ ™ Pennello e striscia: Segni orizzontali in corso di rifacimento Auto in collisione: Incidente Coda Cartello costituito da due file di auto su sfondo bianco. Si noti come l’elenco puntato finale sia visualizzato con punti elenco vuoti, questo perché il browser assegna automaticamente il simbolo appropriato a seconda del livello di nidificazione. Se si desidera una diversa visualizzazione si può comunque ricorrere all’utilizzo del comando TYPE, come è già stato indicato descrivendo le liste generiche. A questo punto ne sappiamo abbastanza sul linguaggio HTML per costruire un documento sufficientemente elaborato. C’è ancora qualcosa da imparare per la gestione degli “abbellimenti” del testo e per l’inserimento di immagini. Nella parte successiva avremo modo di approfondire questi aspetti, oltre che apprendere come avviene il collegamento tra i diversi documenti. Prima di tutto, però, è opportuno controllare se tutto ciò che abbiamo visto fino a questo punto ci è abbastanza chiaro. Una verifica delle nostre capacità si può effettuare costruendo un documento identico a quello mostrato nella pagina che segue. Se qualcuno avesse dubbi o difficoltà può comunque verificare la soluzione dell’esercizio che si trova a Pag.83 Vorrei però ricordare che non tutti i si comportano allo stesso modo rispetto a determinati tags. Ad esempio Internet Explorer 5.5 interpreta restringendo i margini senza adoperare però il carattere corsivo, quindi eventuali differenze di questo tipo non vanno intese come errore di scrittura del proprio codice. ANTONIO FAVINO HTML per i principianti Pag.39 15/03/01 Documenti: la fabbrica 15.21 La meraviglia del nostro tempo, amico mio, sono per me le macchine e gli edifici per le macchine chiamati fabbriche. Simili costruzioni sono alte otto o nove piani, hanno quaranta finestre in lunghezza e quattro in larghezza. Ogni piano ha un'altezza di dodici piedi. Le colonne sono di ferro; le travi che su di esse poggiano pure; le pareti laterali sono però sottili come fogli di carta. Un blocco di simili costruzioni sta su punti elevati che dominano la regione; una foresta di ciminiere e di macchine a vapore, ancora più alte, sottili come aghi, tanto che non si può capire come si reggano; fanno da lontano un meraviglioso colpo d'occhio, specie di notte, quando mille finestre brillano per la luce a gas. P. C. W. Beuth (1823) Intorno, fin dove si poteva distinguere nella foschia, incombevano ciminiere e ciminiere, tutte con la stessa forma brutta e pesante, come l'incubo di un sogno e buttavano dalle loro gole fiati pestilenziali di un fumo che oscurava la luce e rendeva irrespirabile l'aria...Ma quando veniva la notte il fumo si mutava in fuoco. Ogni ciminiera vomitava fiamme e i punti che durante il giorno erano sembrati delle buie caverne splendevano di vivi riflessi rossi, mentre delle ombre si muovevano qua e la negli spiragli infuocati. C. Dickens da 'La strada nera tra le miniere' Rifletto sui documenti 1. 2. 3. I due autori, secondo te, si riferiscono allo stesso tipo di paesaggio? Provano le stesse sensazioni? Da che cosa lo capisci? Informazioni sulla vita dell’epoca Si danno qui di seguito alcune informazioni sulla parrocchia del pastore Alston 1. La parrocchia contiene 1.400 case, abitate da 2.795 famiglie, ovvero circa 12.000 persone 2. Lo spazio in cui abita questa grande massa di popolazione misura meno di 400 yarde quadrate. a. A volte anche nove persone abitano in una sola stanza di dieci o dodici piedi quadrati (1 piede = 0,3 metri) nella quale svolgono tutte le loro attività. b. Non un solo padre di famiglia su dieci in tutto il vicinato ha altro abito oltre l’abito di lavoro, e questo è, per di più, lacero e consunto oltre ogni dire; molti, addirittura, non hanno per la notte altra copertura che questi stracci e per letto null’altro che un sacco pieno di paglia e di trucioli. Conversione delle unità di misura: Yarda Unità di misura lineare corrispondente a 0,9 metri. Piede Unità di misura lineare corrispondente a 0,3 metri. ANTONIO FAVINO HTML per i principianti Pag.40 15/03/01 15.21 Nasce l’ipertesto: collegamenti a documenti e immagini L’esercizio è riuscito? Un bel vantaggio del linguaggio HTML sta nel fatto che ognuno è in grado di valutare errori e imperfezioni, dal momento che basta aprire il proprio browser per controllare se il documento risponde agli obiettivi che noi stessi abbiamo stabilito. Torniamo comunque alla “teoria” per descrivere in che modo possiamo migliorare l’aspetto dei nostri lavori e, elemento fondamentale, come è possibile collegare tra loro documenti diversi. Non dobbiamo dimenticare, infatti, che il principale pregio dell’HTML e del Web sta proprio nel fatto che le informazioni sono tra loro tutte collegabili, facilitando di molto qualsiasi ricerca. Pensiamo alla tipica situazione in cui si debba cercare su un’enciclopedia una qualsiasi informazione. Si apre l’apposito volume, si scorrono le pagine, si leggono i dati di nostro interesse e, molto frequentemente, si è rinviati ad altre voci di approfondimento. Di conseguenza si è costretti a ripetere l’operazione un numero di volte pari al numero di rinvii in cui ci si imbatte. Se la ricerca che stiamo eseguendo è finalizzata a preparare un resoconto o un elaborato siamo costretti a conservare tutti i volumi disponibili, magari su un tavolo troppo piccolo, per attingere alle diverse informazioni. Dal punto di vista pratico tutto ciò crea disagi e perdite di tempo. Se poi si pensa che la situazione descritta può valere per moltissimi altri casi, come la consultazione di leggi e normative, la preparazione di rassegne giornalistiche, le ricerca di informazioni tecniche ecc. ci si renderà conto degli enormi vantaggi che può presentare l’uso del linguaggio HTML, considerando che permette di raggiungere documenti situati fisicamente in ogni parte del globo. A ben pensarci questa, qualche anno fa, era solo fantascienza! Dopo questo spot pubblicitario sulle bellezze del Web passiamo quindi alla descrizione del codice HTML da utilizzare per la realizzazione dei collegamenti, chiamati anche hyperlink o, semplicemente, link. Questi ultimi possono essere di diverso tipo a seconda che si riferiscano ad un’altra parte dello stesso documento, ad un documento presente all’interno dello stesso sito oppure ad un elemento situato altrove. Tutti i tipi di link adoperano il tag seguito dall’attributo HREF. Il tag di chiusura deve essere sempre presente, anche perché i risultati finali sarebbero disastrosi (provare per credere!). Per adoperare un link all’interno dello stesso documento bisogna definire un nome per la sezione del documento a cui ci si vuole collegare. Questa definizione utilizza il tag , questa volta associato all’attributo NAME. Avremo modo di vedere che l’assegnazione di un nome alla sezione di un documento ci permette un collegamento diretto anche se il documento è esterno. Ovviamente, perché questo sia possibile, dobbiamo conoscere il nome della sezione all’interno del documento esterno. L’assegnazione del nome si realizza quindi con questo tag: ANTONIO FAVINO HTML per i principianti Pag.41 15/03/01 15.21 Il tag può essere collocato nel punto esatto in cui si desidera attivare il link, quindi si può inserire anche all’interno di una frase senza problemi di alcun genere. Nell’assegnare il nome della sezione è opportuno essere sintetici, ma conviene evitare nomi generici che possono essere poco significativi, o che possono creare confusione. Tanto per fare qualche esempio, evitare nomi sul genere nome1, oppure sequenze alfabetiche e numeriche poco significative, o sez1, o nomi simili; evitare inoltre nomi sul genere “Automobile Club d’Italia”, facilmente sostituibile con ACI, oppure “Scuola Elementare Salvo d’Acquisto” abbreviabile in SDA, o ancora “hyperlink testuale” definibile anche HYP o HLT o simile. Come ultima raccomandazione si tenga ben presente che, nell’assegnare i nomi di sezione, il linguaggio è sensibile ai caratteri maiuscoli e minuscoli; di conseguenza c’è differenza tra lo scrivere “ACI” rispetto a “aci”. Queste diversità possono essere comunque utilizzate per codificare nomi che, altrimenti, risulterebbero uguali. Una volta assegnato il nome alla, o alle, sezioni si può inserire il link con la sintassi che segue: testo di richiamo del link La parte di testo che richiama il link è, ovviamente, inserita dall’autore del documento a suo piacimento e può essere un termine, una sigla o un’intera frase. Essa verrà visualizzata dal browser come testo sottolineato di colore differente rispetto al contesto. Se il cursore viene spostato su di esso questo assume l’aspetto di una mano e, in alcuni casi, al movimento è associato un cambiamento nella colorazione del testo. Si tenga presente che il linguaggio HTML permette di assegnare colori diversi ai link già visitati e a quelli ancora da visitare. Tali elementi cromatici sono predefiniti nel browser, ma possono essere personalizzati dall’utente oppure modificati dall’autore del documento. Di cons eguenza si possono presentare svariate situazioni nella combinazione di tali colorazioni, tanto da rendere impossibile stabilire una regola valida per tutti. A ciò si aggiunge che vi possono essere piccole differenze di visualizzazione tra i diversi browsers. Allo stesso modo con cui si definisce un collegamento ad una determinata sezione è possibile definire un link ad un diverso documento: la sintassi è molto simile, con la differenza che, al nome della sezione, va sostituito quello del documento. Quindi andrà scritto: testo di richiamo del link L’indicazione con il nome del documento deve fornire la posizione esatta in cui questo si trova. Per tale motivo abbiamo a disposizione due diversi sistemi di indirizzamento: utilizzando l’indicazione di un nome di percorso relativo, oppure assoluto. Nel primo caso si fa riferimento al documento corrente per indicare il documento a cui collegarsi. Nel secondo caso si fornisce un indirizzo assoluto, che non è in nessun modo influenzato dalla posizione del documento corrente. Per rendere tutto più semplice, la ANTONIO FAVINO HTML per i principianti Pag.42 15/03/01 15.21 differenza fra i due sistemi corrisponde, per esempio, all’indicare una strada dicendo: «È la terza alla mia destra» oppure indicando «È la quinta a sinistra dall’inizio di Via Indipendenza». Evidentemente si userà il primo caso ad un passante che si trova di fronte a noi, si ricorrerà al secondo se invece si deve dare un’indicazione ad un’automobilista che si trovi a una certa distanza dalla destinazione. In genere, se si indicano documenti presenti nel proprio sito lo si fa con l’indirizzamento relativo, in tutti gli altri casi si adopera quello assoluto. Come sempre ricordo che un sito normalmente è su un proprio server, ma può risiedere anche su un floppy disk o sull’hard disk del proprio computer. Nell’usare l’indirizzamento relativo si adopera la sintassi standard dei sistemi UNIX, secondo la quale la directory immediatamente superiore si indica con un punto (.), mentre la origine (root ) è indicata dai due puntini (..). Le secondarie sono sempre separate dalla barra (/). Ma come regolarsi per distingue principali, da sotto da root e complicazioni varie? A questo punto ci torna utile tutto ciò che abbiamo visto nel capitolo sul Sistema Operativo DOS a Pag.20. Per non complicarsi troppo la vita, nei propri siti conviene creare tutte le cartelle che servono, senza però nidificarle troppo una all’interno dell’altra. Questo perché si possono creare problemi nel richiamare i diversi documenti presenti nelle varie cartelle. I sistemi per “arrivare” da una posizione ad un’altra sono più di uno. Diciamo che da un documento situato ad un livello “basso” conviene “risalire” al livello più alto con l’uso dei due puntini, e da lì indirizzarsi alla cartella che interessa. Mi rendo conto che, spiegata in questo modo, la faccenda risulta incomprensibile, è per questo motivo che lo schema illustrato nella pagina successiva può essere utile per comprendere più facilmente il meccanismo dell’indirizzamento relativo. In ogni caso, prima di rendere pubblico il proprio sito, è opportuno verificare che i propri funzionino tutti alla perfezione. In queste veriche, non ci sarebbe da stupirsi se si fosse costretti a fare qualche tentavo per inserire correttamente i collegamenti relativi tra i diversi documenti. ANTONIO FAVINO HTML per i principianti Pag.43 15/03/01 15.21 Miosito Libri titolo.htm Documenti Storia Costume abitudini.htm usanze.htm Se, nel documento chiamato abitudini.htm, vi è un richiamo al documento titolo.htm che si trova nella directory libri, per realizzare il collegamento si inserirà il tag: link a titolo Sono d’accordo sul fatto che questo non rappresenta il massimo dell’eleganza, ma dal punto di vista della praticità esso è abbastanza semplice da realizzare. In altre parole i primi due puntini dopo HREF ci fanno “uscire” dalla cartella Costume, i secondi due da Storia, gli ultimi due da Documenti. Dopo tutte queste uscite viene indicato di “entrare” nella cartella Libri dove si trova titolo.htm. Tutto chiaro? Spero di sì, anche perché, al contrario, se si volesse stabilire un collegamento tra titolo.htm, situato all’interno di Libri, e il documento usanze.htm, che si trova in Costume, si dovrebbe utilizzare il tag: link a usanze Come abbiamo già visto nella precedente situazione i due puntini fanno “uscire” dalla cartella Libri e “rientrare”, attraverso la cartella Documenti, nel percorso che porta a Costume e ai documenti in essa contenuti. Mi rendo conto che tutto ciò non è per nulla semplice; è vero però che, se il percorso indicato è corretto si apre il documento indicato, se non è corretto non si aprirà un bel nulla e si dovrà individuare l’errore e correggerlo. Nell’uno e nell’altro caso non è la morte di nessuno, e in caso di errore al massimo ci sarà qualche tentativo in più da compiere per inserire un link corretto. ANTONIO FAVINO HTML per i principianti Pag.44 15/03/01 15.21 Ovviamente tutto questo deve avvenire prima che il sito sia reso pubblico ai visitatori. Con l’occasione vorrei mettere in evidenza che un sito, prima della pubblicazione, va controllato molte volte per individuare tutti gli errori che possono essere involontariamente inseriti, e per verificare la correttezza dei collegamenti. In ogni caso controlli devono servire per accertare l’interesse che il sito stesso può suscitare in chi guarda, e l’autore del sito, in questo caso, può essere un giudice piuttosto severo. L’alternativa all’indirizzamento relativo è costituita dall’indirizzamento assoluto. Alcuni lo utilizzano all’interno del medesimo sito, ma in genere esso si adopera per effettuare collegamenti a documenti posti in altri siti o, addirittura, a forme di documento che adoperano protocolli differenti. Ricordate il Capitolo 2? Abbiamo visto che esistono diversi tipi di server che svolgono vari servizi adoperando protocolli specifici a seconda del tipo di servizio offerto. Quando si desidera effettuare un collegamento ad un documento bisogna quindi indicare, prima di tutto, il tipo di “ambiente” che si desidera utilizzare. Per rendere operativo il link, quindi, si fa ricorso al cosiddetto URL (Uniform Resource Locators), la cui traduzione suona, più o meno, come Localizzatore Uniforme di Risorse. Sicuramente, in un modo o nell’altro, URL è una sigla che avrete letto o sentito, in quanto è l’unico modo con cui è possibile specificare la lo cazione di un file situato in altri server. La sintassi che definisce un URL è la seguente: protocollo://host.dominio [:porta]/percorso/nomefile I valori ammessi per il termine protocollo vengono elencati più avanti. Host identifica il nome assegnato al server, il dominio è invece codificato secondo le regole già esposte a Pag.3. Il numero relativo alla porta può, nella stragrande maggioranza di casi, essere ignorato; mentre il percorso può identificare anche più directory il cui nome è, come abbiamo visto, separato da una barra. Per ultimo viene indicato il nome del file. Per quanto riguarda i tipi di protocollo possiamo avere: ANTONIO FAVINO • file: Identifica un file sul vostro sistema locale, cioè il PC. • ftp: Utilizzato per i file posto su di un server FTP anonimo. Il protocollo FTP è adoperato per lo scarico di files ed è spesso integrato nei principali browsers. • http: È quasi banale doverlo spiegare: riguarda i files presenti sui server del World Wide Web, cioè il 98% di ciò che abitualmente visitiamo. HTML per i principianti Pag.45 15/03/01 15.21 • gopher: tipo di server molto in voga prima che il Web, come una ragnatela, si accalappiasse quasi tutto il traffico di Internet. Su di esso sono presenti semplici documenti di testo non in grado di essere collegati tra loro da link interni. • WAIS: Server WAIS, utilizzato prima dell’avvento del Web dai grandi enti per effettuare ricerche e per indicizzare i dati. • news: gruppi di discussione (newsgroup) della rete Usenet, anch’essa molto in auge prima dell’avvento del Web. In questi newsgroup ci si scambiano informazioni e opinioni dibattendo articoli che gli stessi componenti del gruppo mettono a disposizione. I titoli dei newsgroup sono piuttosto lunghi e complessi sul tipo: rec.sport.baseball. • telnet: interessante servizio, presente in quasi tutti i Sistemi Operativi, che permette di collegarsi ad un computer remoto eseguendo operazioni come se queste avvenissero sul computer locale. Possibilità eccezionale usata solo da pochi specialisti. In realtà essa potrebbe essere effettuata da chiunque. Diciamo che, normalmente, i riferimenti a un documento avverranno nell’ambito del Web, di conseguenza un link ad un indirizzo tipo sarà: link alla pagina principale Ovviamente, allo stesso modo con cui nel medesimo documento è possibile realizzare link a determinate sezioni, ugualmente può essere fatto con i documenti esterni, seguendo la stessa sintassi vista in precedenza: link all’elenco stampanti Come abbiamo visto la creazione di collegamenti ipertestuali ad altri documenti, dello stesso sito o di altri siti, è piuttosto semplice. A questo punto, quindi, con le informazioni a disposizione è possibile creare un documento contenente un link ad un sito esterno, verificandone l’efficacia solamente per mezzo di un semplicissimo click. In questo caso un qualsiasi errore avrebbe come effetto l’impossibilità di visitare il sito in questione. Un indirizzo cui collegarsi potrebbe essere http://utenti.tripod.it/website, che è il sito personale dell’autore. Se si desiderasse un interessante collegamento sulla disponibilità in rete di testi elettronici l’indirizzo è http://www.math.unipd.it/~adr/e-journal/e-text.htm . ANTONIO FAVINO HTML per i principianti Pag.46 15/03/01 15.21 Abbellire il proprio documento: sfondi, immagini e righe di separazione Una volta imparata la tecnica per la creazione dei documenti ipertestuali si può considerare conclusa la parte relativa alle nozioni di base sull’HTML. Tutto quanto viene di seguito, infatti, non è “essenziale” per la creazione di documenti, ma sicuramente contribuisce alla loro buona riuscita estetica. Inoltre non si può negare che la presenza di determinati elementi, come ad esempio le immagini, oltre ad alleggerire la visione del documento può renderne più facile la comprensione. Prima di parlare di immagini, però, bisogna segnalare che, nel codice HTML, è previsto anche un tag che permette l’inserimento di righe orizzontali di separazione. Gli attributi di questo tag permettono di stabilirne lo spessore e la larghezza. Il tag è così costituito: La dimensione del parametro SIZE va espressa in pixel e determina quanto spessa dovrà essere la linea. Un pixel è un singolo punto luminoso che il monitor utilizza per comporre tutto ciò che è visualizzato sullo schermo. Ovviamente il pixel è l’unità di misura minima, se essa non viene indicata è il browser in uso a determinare lo spessore predefinito. Il parametro WIDTH serve per stabilire la larghezza della linea. Il valore predeterminato corrisponde all’intera larghezza dello schermo, e l’allineamento previsto è sempre quello centrato. Nel caso dell’attributo WIDTH si possono usare due diverse unità di misura: oltre che adoperare valori assoluti, espressi in pixel, si possono impiegare valori relativi che indicano una percentuale. In tal caso essa si riferisce alla porzione di schermo occupata dalla linea di separazione. Il tag: determina la costruzione di una linea che occupa il 70% della larghezza dello schermo. Il vantaggio presentato da questo sistema di indicazione è costituito dal fatto che si ottiene sempre lo stesso risultato su qualsiasi schermo, in modo indipendente dalla risoluzione utilizzata. La risoluzione viene impostata da ogni utilizzatore e, mediamente, va da un minimo di 640X480 pixel a 1024X768. In seguito a tale diversità il medesimo documento viene visualizzato in modi diversi a seconda di tale risoluzione: più grande è il numero di pixel impostati, maggiore sarà la “quantità” di documento visualizzata. Per intenderci: una riga avente dimensione di 800 pixel non potrà essere contenuta in uno schermo con le minime dimensioni, perché questo ha una larghezza massima di 640 pixel. Viceversa, se la stessa riga è visualizzata su uno schermo impostato a 1024 pixel essa occuperà circa ¾ della larghezza. L’utilizzo del valore percentuale supera tali problemi, perché è il browser che provvede a calcolare una dimensione adeguata alla risoluzione del monitor. La riga orizzontale, in qualsiasi caso, avrà uno spessore di tre pixel, determinato dall’attributo SIZE. Il browser visualizza le linee orizzontali come un solco “incavato” nella pagina, con un effetto che personalmente reputo estremamente gradevole. Il tag non ha bisogno di ANTONIO FAVINO HTML per i principianti Pag.47 15/03/01 15.21 chiusura e, dopo l’approvazione delle specifiche HTML 4.0, tutti i suoi attributi sono considerati disapprovati. Chiuso l’argomento righe orizzontali passiamo ad un tema sicuramente più attraente per qualsiasi autore: l’inserimento di immagini nel proprio documento. Nel costruire le pagine di esercizio viste fino a questo momento chiunque si è certamente reso conto di quanto esse siano, tutto sommato, “squallidine”. Un fondo bianco con dei caratteri neri che occupano tutto lo spazio disponibile non rappresenta certo il massimo della piacevolezza. Se poi il testo deve spiegare determinati argomenti potrebbe essere necessaria la presenza di qualche illustrazione che semplifichi il discorso. Per questo si è previsto l’inserimento delle immagini, che avviene in modo molto semplice con il tag: Naturalmente, se l’immagine è posta in directory o siti diversi, dovrà esserne indicato l’indirizzo secondo le regole e i criteri che abbiamo già discusso parlando dei link ipertestuali a partire da pag. 42. C’è da far notare che gli attuali browsers sono in grado di visualizzare solo certi tipi di immagine, e più precisamente GIF, JPEG, PNG e XBM. Gli ultimi due tipi di file, sebbene supportati, non sono particolarmente diffusi. Nell’inserire un’immagine all’interno di un documento bisogna tener conto del fatto che essa sia o meno associata ad una parte scritta. Nel primo caso vi è la possibilità di utilizzare l’attributo ALIGN per regolare la disposizione del testo. Se invece si desidera inserire solamente l’immagine a sé stante, la sua posizione nella pagina può essere determinata utilizzando il tag integrato dal relativo attributo ALIGN, secondo le modalità già viste parlando di tale tag. Qualora si adoperasse l’attributo ALIGN all’interno del tag IMG i valori possibili sono: TOP, MIDDLE, BOTTOM, oltre a LEFT e RIGHT. I primi tre collocano la prima riga di testo in linea con il margine superiore (TOP), con il centro (MIDDLE) o con la parte inferiore dell’immagine (BOTTOM). Quest’ultimo è il valore predefinito. In aggiunta si può utilizzare LEFT o RIGHT per posizionare l’immagine a sinistra o destra. Bisogna far notare che, utilizzando uno di questi attributi, non è possibile adoperare uno dei precedenti. Dal momento che, comunque, in mancanza di attributi l’immagine è posizionata a sinistra dal browser, vale la pena utilizzare RIGHT solo nel caso in cui si abbia la necessità di posizionare l’immagine a destra. A titolo di esempio, se si desidera inserire un’immagine con il testo allineato con il bordo superiore si scriverà: Poiché le immagini possono essere utilizzate come punto di origine di un collegamento ipertestuale esse possono essere inserite all’interno di un tag allo stesso modo di una frase o di una parola. Ovviamente le regole sono quelle viste qualche pagina indietro, ed è del tutto indifferente che il link si riferisca allo stesso documento o ad uno esterno. Immaginiamo che ANTONIO FAVINO HTML per i principianti Pag.48 15/03/01 15.21 l’immagine di un quadro permetta il link ad un documento che lo descriva, in tal caso il tag sarà composto come mostrato qui di seguito: Questo tipo di collegamento viene spesso utilizzato per riprodurre la miniatura di un’immagine che, attraverso un click, richiama la stessa immagine in una versione più grande e maggiormente dettagliata. A questo proposito bisogna fare una serie di considerazioni. Non dobbiamo dimenticare, infatti, che le immagini rappresentano un elemento piuttosto “pesante” da scaricare via Internet. Di conseguenza i relativi files devono avere dimensioni quanto più possibile contenute, in modo da essere scaricati rapidamente e con facilità. Inoltre, quando possibile, conviene riutilizzare più volte la medesima immagine poiché i browsers, una volta che essa viene scaricata, provvedono a memorizzarla sul disco rigido del computer. Richiamandola in più documenti, quindi, è sufficiente richiamarla da Internet una sola volta in quanto sarà il browser a gestirne la visualizzazione ogni qualvolta sia necessario. I visitatori ve ne saranno grati, in quanto farete loro risparmiare tempo di connessione tenuto anche conto del fatto che lo scarico di immagini dalle dimensioni eccessive può far desistere coloro che sono dotati di collegamenti non particolarmente veloci. Un modo per gestire al meglio le immagini consiste nell’utilizzare due attributi: WIDTH e HEIGHT. Essi servono per indicare al browser le dimensioni di larghezza e altezza dell’immagine, espressi in pixel, in modo tale che esso sia in grado di gestire più velocemente lo scarico della pagina. Utilizzando questo metodo, inoltre, la stessa icona può essere utilizzata più volte assegnandole le dimensioni più opportune. L’attributo BORDER, inoltre, permette di determinare lo spessore in pixel di un’eventuale bordo. Per evitarne la presenza basta impostare il parametro al valore 0. Internet, per sua natura, è forse uno degli strumenti che garantisce la massima facilità di comunicazione tra qualsiasi individuo che ad essa si connetta. Ci sono però due elementi che possono ostacolare questo tipo di connettività. Il primo è di tipo tecnico, ed è determinato dalla lentezza di taluni collegamenti o dall’inadeguatezza del computer utilizzato da alcuni visitatori. Inoltre certi documenti non vengono solo “mostrati” su un monitor, ma possono essere interpretati da sistemi vocali che leggono il contenuto della pagina. Il secondo ostacolo, forse più serio, è dato dal fatto che alcuni visitatori possono soffrire di problemi fisici che impediscono loro di fruire completamente dei contenuti di un documento. Per questo ogni pagina HTML deve essere “pensata” affinché sia utilizzabile da tutti. Per tale motivo è necessario, anche in base alle specifiche ufficiali HTML, inserire alcuni attributi che servono a comunicare certe informazioni sull’immagine. Il primo di essi è ALT, che inserisce una breve descrizione dell’immagine per coloro che non sono in grado di visualizzarla, o che hanno disabilitato la ANTONIO FAVINO HTML per i principianti Pag.49 15/03/01 15.21 visualizzazione delle immagini dal loro browser. Non esistono limiti sulle dimensioni di tale testo, ma è quanto mai opportuno essere sintetici ed usare due criteri molto importanti: • Inserire una stringa vuota (““) per le immagini che hanno una funzione ornamentale. Ad esempio l’utilizzo di una figura che ha lo scopo di decorare un elenco puntato non deve includere alcun testo alternativo. • Non inserire testi inutili che, oltre a essere frustranti per il visitatore, possono appesantire il lavoro di conversione degli interpreti di tipo vocale o braille. Sempre a titolo di esempio, l’inserimento di un testo sul genere “testo di riempimento per l’attributo ALT” non porta alcun vantaggio al visitatore, ma rallenta gli interpreti non visuali. Ricapitolando, quindi, l’aggiunta di un’immagine ad un documento che utilizzi correttamente tutti i parametri previsti dovrebbe essere strutturata come descritto qui di seguito: Ovviamente le dimensioni assegnate all’immagine devono essere le stesse dell’originale, oppure devono rispettarne le proporzioni in caso di riduzione o ingrandimento. A questo punto qualcuno potrebbe obiettare che, se è possibile inserire delle immagini nel testo, non si vede perché ciò non dovrebbe essere realizzabile anche per lo sfondo. In effetti l’obiezione sarebbe più che sensata. Non a caso, infatti, esiste un parametro che permette di gestire lo sfondo sia come colore, sia come immagine. Si tenga presente che, per le stesse ragioni esposte in questo capitolo, l’immagine di sfondo deve avere piccole dimensioni per poter essere scaricata in modo veloce: sarà il browser a riprodurla in modo tale da riempire interamente lo schermo del monitor. Per questa ragione l’immagine di base deve rappresentare un soggetto non asimmetrico. In caso contrario il risultato finale sarebbe piuttosto sgradevole. La gestione dello sfondo è possibile utilizzando un attributo del tag BODY. Qualora si utilizzi un’immagine esso è BACKGROUND=”nome del file di immagine”. Se invece si adopera un colore va adoperato il parametro BGCOLOR=”valore del colore”. In quest’ultimo caso ulteriori dettagli sulla definizione dei colori in HTML verranno illustrati, in questo stesso capitolo, in una delle pagine successive. Per quanto riguarda l’inserimento delle immagini, invece, si adoperano gli stessi criteri di indirizzamento ampiamente descritti nella parte relativa ai link ipertestuali. In ogni caso, quando si utilizza un’immagine come sfondo della pagina, bisogna sempre verificare che il testo mantenga una chiara leggibilità, e che lo sfondo non appesantisca o renda difficoltosa la visione del documento. Data la grande importanza che hanno le immagini all’interno di una pagina web, è ANTONIO FAVINO HTML per i principianti Pag.50 15/03/01 15.21 consigliabile predisporre nel proprio sito una apposita cartella, da chiamare IMAGES o IMMAGINI, cui facciano riferimento tutti i vostri elaborati. Un documento di “carattere” Un passo alla volta abbiamo imparato a costruire un documento HTML di una certa importanza, con collegamenti, immagini, sfondi e linee di decorazione. A questo punto dobbiamo imparare a gestire i caratteri che compongono la parte testuale, in modo da conferire ad ogni pagina un aspetto più “professionale”. Nel curare l’aspetto esteriore dei caratteri possiamo distinguere due diversi tipi di intervento, a seconda che si modifichi la formattazione del testo, oppure che si vada a variare il tipo di carattere usato. Nel primo caso si interviene sullo stile, come in parte abbiamo già visto a partire da pag. 27; nella seconda situazione, invece, si agisce sull’intero paragrafo modificando la famiglia di caratteri utilizzata, che gli anglosassoni chiamano font. In linea di massima, quando si interviene sullo stile, è preferibile adoperare gli stili logici che abbiamo già ampiamente illustrato in precedenza. Esistono però alcune situazioni che non rientrano nei casi proposti, e che quindi richiedono l’utilizzo degli stili fisici. Essi sono costituiti soltanto da sei tags, e più precisamente: : che sta per Bold, cioè grassetto. : contrazione di Italic, il nostro corsivo. : che significa Typewriter Text, cioè testo a dimensione fissa come nelle macchine da scrivere. : Il suo significato è Underlined, cioè sottolineato. Con HTML 4.0 è incluso tra gli elementi disapprovati. : Utilizza un carattere di maggiori dimensioni. : Al contrario di BIG riduce la grandezza del carattere. In realtà le specifiche HTML 3.2 considerano altri stili fisici, che però con le nuove specifiche sono stati soppressi o disapprovati; per questo motivo ritengo del tutto inopportuna la loro citazione. Ovviamente anche per gli stili fisici è richiesto un tag di chiusura, come previsto anche per gli stili logici. ANTONIO FAVINO HTML per i principianti Pag.51 15/03/01 15.21 Per quanto riguarda la gestione delle famiglie di caratteri si utilizza il tag , il quale presenta anche degli attributi che permettono di definirne le caratteristiche più importanti. Essi sono: SIZE: attributo che permette di assegnare una determinata dimensione al carattere. COLOR: intuitivamente questo attributo serve per gestire il colore del testo. Nelle pagine successive viene spiegato l’utilizzo del colore in HTML. FACE: con l’uso di face si assegna una determinata famiglia di font al testo compreso tra il tag di inizio e quello di chiusura. Il primo di essi deve essere espresso per mezzo di un numero compreso tra 1 e 7 preceduto da un segno più o meno a seconda che si voglia ingrandire o rimpicciolire la dimensione di base. Essa viene stabilita con il tag e, in mancanza, utilizza la dimensione di carattere predefinita con valore 3. Il tag BASEFONT utilizza l’attributo SIZE per stabilire la dimensione di riferimento del testo e, associato allo stesso attributo nel tag FONT, permette di ingrandire o rimpicciolire i caratteri del documento. Il tag BASEFONT non ha necessità di chiusura e non ha effetto sui tag di enfatizzazione già visti a pag.27. L’attributo COLOR può essere espresso in forma numerica o richiamando uno dei sedici nomi di colore stabiliti dal consorzio W3. Tutte le informazioni sull’uso del colore sono descritte nella parte successiva di questo capitolo. L’attributo FACE, infine, permette di richiamare un determinato font o, una lista di font i cui nomi sono separati da una virgola. È buona norma, in uno stesso documento, non utilizzare più di tre diversi caratteri. Poiché non tutti i visitatori possono essere forniti dei font richiamati, è bene indicare almeno un nome alternativo quando si desidera ottenere un determinato effetto grafico. Qualora il carattere richiamato con l’attributo FONT abbia soltanto una funzione di abbellimento non è necessario indicare famiglie di caratteri alternative, in quanto sarà il browser a gestire la visualizzazione in base ai caratteri disponibili sul computer. Per assicurarsi la massima visibilità conviene indicare famiglie di caratteri molto diffuse. I più comuni font sono i seguenti: • Times New Roman • Arial • Trebuchet MS ANTONIO FAVINO HTML per i principianti Pag.52 15/03/01 15.21 • Verdana A questi potrebbero essere aggiunti altri caratteri, la cui diffusione è però meno rilevante, per essi è quindi richiesta l’indicazione di un carattere alternativo: • Comic Sans MS • Garamond • Tahoma Per questi, come alternativa, possono essere indicati nell’ordine Trebuchet MS, Times New Roman e Verdana. I nomi dei caratteri possono essere indicati anche senza l’uso di maiuscole e minuscole in quanto l’attributo è insensibile a tali caratteristiche, l’importante è che i nomi siano racchiusi tra apici e separati da una virgola come nell’esempio Bisogna sottolineare come i tag FONT e BASEFONT, che abbiamo descritto fino ad ora, per quanto validi secondo le specifiche HTML 3.2, in seguito sono stati disapprovati con il rilascio delle nuove specifiche HTML 4.0. La ragione per cui, tra i tag finora visti, molti hanno avuto la dichiarazione di disapprovazione sta nel fatto che, con l’ultima versione di HTML, sono stati ampiamente consolidati i cosiddetti Cascade Stile Sheet, ossia i Fogli di Stile a Cascata. Questi ultimi sono particolari documenti nei quali l’autore elenca le caratteristiche degli attributi e dei tag di un determinato sito, in modo che tutti i documenti vi facciano riferimento. I fogli di stile sono stati introdotti proprio con le specifiche di HTML 3.2 e sono sommariamente descritti nel Capitolo 7. Un ultimo aspetto riguardante i font di stampa riguarda certi particolari caratteri, alcuni presenti solo nella nostra lingua, che hanno bisogno di una determinata sintassi per poter essere visualizzati in modo corretto. Tecnicamente sono chiamati Character Entities o Escape Sequences. Tra essi vanno segnalati prima di tutto i caratteri normalmente adoperati nella definizione dei tag che, per essere correttamente visualizzati in un testo, devono essere indicati in una apposita forma. In generale le Character Entities vanno precedute dal carattere &, e terminano con il punto e virgola (;). Sono previsti tutti i casi specifici delle diverse lingue, come dieresi, accenti circonflessi, accenti acuti e gravi sia per i caratteri minuscoli, sia per quelli maiuscoli; sono inoltre utilizzabili i caratteri dell’alfabeto greco, normalmente adoperati nella rappresentazione dei simboli matematici. Predisporre un elenco di tutti questi caratteri sarebbe piuttosto pesante e, forse, fine a sé stesso. Qui di seguito, quindi, indicherò solamente le Character Entities che possono direttamente interessare la lingua italiana. I ANTONIO FAVINO HTML per i principianti Pag.53 15/03/01 15.21 primi tre caratteri presentati riguardano i segni grafici normalmente adoperati per la definizione dei tag HTML. & & spazio vuoto (blank) Ì Ì ì ì É É é é © © û û α α β β γ γ δ δ Come si può facilmente intuire la gestione di tali caratteri è, tutto sommato, abbastanza semplice e mnemonica. È importante sottolineare la sensibilità ai caratteri maiuscoli e minuscoli delle Character Entities. La loro gestione corretta è associata ai due tag, descritti all’inizio di questo capitolo, in cui viene dichiarato il linguaggio adoperato e il genere di caratteri in uso. corrisponde allo spazio esistente tra due caratteri. Tanto per intenderci quello creato dalla barra spaziatrice quando viene premuta. Abbiamo visto che, normalmente, il linguaggio HTML lo ignora. Di conseguenza si è dovuta “inventare” una apposita Character Entity per inserire questo spazio, ad esempio, tra i due tag di apertura e chiusura di tipo . Si faccia attenzione che, se si utilizza tale carattere all’interno di un tag , si otterrà uno spazio bianco che però avrà la sottolineatura caratteristica dei collegamenti. In tal caso il risultato, da punto di vista estetico, è veramente penoso! Per ottenere ulteriori informazioni sull’argomento è consigliabile collegarsi al “breve” indirizzo: http://www.liberliber.it/biblioteca/w/world_wide_web_consortium/spec ifiche_html40/html/sgml/entities.html. Il sito riporta la traduzione italiana delle specifiche HTML 4.0. ANTONIO FAVINO HTML per i principianti Pag.54 15/03/01 15.21 Gestire il colore Come abbiamo visto nelle pagine precedenti è possibile indicare al browser quali colori utilizzare per lo sfondo o per il testo, in modo da rendere il proprio documento visivamente più gradevole. La gestione dei colori è applicabile a molti degli elementi che compongono un documento, in modo da armonizzarli tra loro per garantire che l’aspetto sia piacevole e, contemporaneamente, abbia una confortevole leggibilità. Le specifiche HTML prevedono una definizione dei colori personalizzata, per ottenere effetti particolari che però non sono compatibili con tutti i computer, oppure una gestione del colore standardizzata che si basa su una gamma di sedici colori predefiniti. Questi ultimi sono determinati, oltre che in forma numerica, anche attraverso un nome univoco secondo la tabella qui di seguito mostrata: Figura 5 - Colori predefiniti dalle specifiche HTML La forma numerica si riferisce alla cosiddetta codifica RGB, che sta per Red Green e Blue. In lingua inglese questi sono i tre colori fondamentali, rosso verde e blu, che combinati insieme permettono, per ogni pixel dello schermo, di creare un qualunque colore. Il problema di questa codifica sta nel fatto che si basa sul sistema di numerazione esadecimale, e che richiede un prodotto in ANTONIO FAVINO HTML per i principianti Pag.55 15/03/01 15.21 grado di visualizzare i valori RGB dei colori che si vogliono definire. Per chi fosse del tutto a digiuno di informatica, la numerazione esadecimale si fonda anziché sulla tradizionale base 10, su una base di sedici unità. Questo significa che alle normali cifre comprese tra 0 e 9 vanno aggiunte le lettere da A fino a F, e che la notazione dei numeri viene modificata secondo i nuovi criteri. Di conseguenza il numero esadecimale 10, per esempio, corrisponde alla cifra 16 nella normale numerazione a base dieci; la cifra C equivale al numero 12 e FF è uguale a 255. Ovviamente questa breve e sintetica spiegazione serve solo a dare un’idea di quanto sia complicata la definizione dei colori con il sistema RGB. Conseguentemente, salvo che non si sia particolarmente ferrati in materia, è consigliabile adoperare i sedici colori predefiniti che sono molto più semplici da utilizzare. L’unica alternativa consiste nell’inserire i valori esadecimali di colori non standardizzati ma il cui codice RGB è conosciuto, magari perché “riprodotto” da un codice HTML costruito da altri. La definizione del colore nel codice HTML utilizza attributi diversi a seconda dell’elemento considerato. Il tag , che abbiamo già visto, permette di assegnare il colore a diversi elementi: lo sfondo, il testo, i link. Per questo si utilizzano quindi gli attributi TEXT, BGCOLOR, LINK, ALINK, VLINK. Tutti questi attributi definiscono, nell’ordine, il colore dei seguenti elementi: • Il testo del documento, tale colore può essere modificato per mezzo dell’attributo COLOR nel tag . • Il colore di sfondo. • La tinta dei link non visitati. • Il colore assunto dai link nel momento in cui si effettua il click. • La colorazione dei link già visitati. A questi attributi va aggiunto COLOR che, come accennato, permette di modificare il colore del testo se inserito nel tag . Un esempio di tag con tutti gli attributi relativi al colore è quello mostrato qui di seguito: Qualche altra piccola informazione In linea di massima tutto quello che c’è da sapere per la costruzione di un buon documento HTML è stato adeguatamente esposto. In realtà ci sarebbero ANTONIO FAVINO HTML per i principianti Pag.56 15/03/01 15.21 altri elementi da descrivere, ma si tratta di argomenti forse troppo complessi per coloro che si avvicinano la prima volta al linguaggio HTML. Con questo codice, infatti, è possibile costruire tabelle adoperando il comando

seguito da una serie di tag correlati che servono per definire righe, colonne, celle e altri elementi della tabella. Viste le diverse particolarità delle tabelle si è ritenuto opportuno non descriverne i tag di costruzione ritenendo l’argomento poco adatto ad un principiante. Oltre alle tabelle il codice HTML permette l’utilizzo dei cosiddetti frames, cioè riquadri che suddividono la pagina in diverse parti indipendenti. In questo modo si può, ad esempio, utilizzare una testata superiore, associata ad un’area per i menu, e ad una terza parte in grado di richiamare al suo interno diversi documenti. Molti siti presenti su Internet utilizzano questa tecnica di costruzione dei documenti. Un’altra caratteristica offerta dal codice HTML è costituita dalle cosiddette Mappe Cliccabili. Queste sono aree predefinite all’interno di una pagina che funzionano come un normale link; con la differenza che questo non è richiamato da una parola o da una frase ma è costituito dall’area stessa. Un grosso vantaggio offerto dalle Mappe Cliccabili è dato dal fatto che queste sono applicabili anche alle immagini, permettendo di creare effetti molto suggestivi. Inoltre esiste tutta una serie di opzioni, applicabile a moltissimi elementi, che permette di creare effetti particolari al passaggio del mouse, o in corrispondenza del click. Chiaramente si tratta di applicare i tag HTML con tecniche molto avanzate, che richiedono una conoscenza del linguaggio molto approfondita. Rimanendo sempre nell’argomento “piccole curiosità” c’è da segnalare la presenza di un attributo del tag BODY supportato solamente da Internet Explorer. In realtà, nel descriverlo, faccio uno strappo alla regola perché si tratta di un elemento “inventato” dalla Microsoft, che però ha il pregio di rendere più piacevole la lettura delle pagine visitate. Utilizzando questo attributo, chiamato BGPROPERTIES, si ha la sensazione che la parte testuale si trovi su un supporto trasparente che “scorre” sopra lo sfondo, facilitando la lettura specialmente se le immagini di quest’ultimo interferiscono con il testo del documento. Personalmente mi auguro che tale attributo venga inserito nelle specifiche ufficiali al più presto, anche perché può andare incontro alle esigenze di coloro che hanno qualche problema visivo. La sintassi corretta per questo attributo è: BGPROPERTIES="FIXED" Già che ci siamo si potrebbe fare cenno ad altri due tag che non sono certo di fondamentale importanza, ma che possono essere utili in alcune circostanze. Essi servono a fornire alcune indicazioni come gli indirizzi di E-mail o notizie sull’autore di un determinato documento. In quest’ultimo caso si possono indicare, oltre al nome dell’autore, l’indirizzo o il numero di revisione del documento. Si badi bene che si tratta di note generalmente incluse a fondo pagina che hanno una pura funzione indicativa e non possono essere usate, ad esempio, alla stregua di indirizzi postali, sebbene il tag si chiami che, in inglese, significa indirizzo. Adoperando questo marcatore le indicazioni vengono automaticamente mostrate con caratteri di ANTONIO FAVINO HTML per i principianti Pag.57 15/03/01 15.21 tipo corsivo. Un esempio del tag può essere quello mostrato nella pagina seguente: Scuola Media “Buonarroti” – Arese/ Classe III B / Ins. Roberto Andreoli / Versione del documento n.5 - Ottobre 1998 Potrebbe verificarsi il caso in cui si voglia fornire un indirizzo di E-mail per comunicazioni, o commenti sul sito web. Anche la posta elettronica è considerata dalle specifiche HTML come un qualsiasi altro link. Per questo motivo la sintassi è molto simile a quella già vista per gli altri tipi di collegamento: Invia la tua posta elettronica qui Se io desiderassi inserire in un documento un richiamo al mio indirizzo di posta elettronica, questo sarebbe così definito: utilizza questo indirizzo per scrivere all’autore del documento Ovviamente, trattandosi di un tag di tipo anchor , esso è soggetto a tutte le regole che abbiamo già visto per tale marcatore, compresa la possibilità di utilizzare immagini che facciano da richiamo al link. Per ulteriori dettagli si può fare riferimento alle indicazioni contenute a partire da Pag. 42. A conclusione del capitolo si può aggiungere un’ultima indicazione, molto importante per chiunque si cimenti nella costruzione di un sito web. Per una convenzione il browser apre automaticamente qualsiasi documento che si chiami INDEX oppure HOME, purché abbia l’estensione .HTM o .HTML. Questo vuol dire che, indicando ad esempio l’indirizzo di fantasia www.nuovo.sito.it, il browser aprirà il documento che, all’indirizzo indicato, avrà il nome index.htm o home.htm. In questo modo la navigazione viene di molto facilitata e i progettisti dei siti hanno un riferimento ben preciso nel preparare quello che è indubbiamente il documento più importante nelle pubblicazioni elettroniche. La cosiddetta Home Page, infatti, è un po’ il biglietto da visita del sito che si sta per visitare: se riesce a stimolare l’interesse del visitatore questo proseguirà nella visione del sito; se invece, per una qualsiasi ragione, la Home Page non riesce a “catturare” il navigatore difficilmente questo tornerà in futuro per nuove visite. Per questo motivo è da evitare la pubblicazione di un sito costituito da qualche riga piuttosto scarna e dalla classica frase: “Il sito è in costruzione, chiedo pazienza ai visitatori”. Una situazione di questo genere è la migliore per far fuggire anche i ANTONIO FAVINO HTML per i principianti Pag.58 15/03/01 15.21 navigatori più appassionati. In tal caso è preferibile predisporre un sito costituito soltanto da due o tre documenti, magari poveri dal punto di vista grafico, ma in grado di fornire quelle informazioni che il titolo promette nel nome o nei contenuti. In pratica, quindi, il sito di una ipotetica Scuola “Leonardo da Vinci” dovrebbe contenere nella Home Page indicazioni relative alla scuola, alla sua locazione e agli eventuali mezzi per raggiungerla. Certamente sarebbe apprezzabile la presenza di una fotografia o di una qualsiasi immagine grafica prodotta dagli alunni. A partire da questo documento di “ingresso” potrebbero essere visitabili altre due o tre pagine nelle quali siano illustrate le attività didattiche, oppure il Piano dell’Offerta Formativa, o ancora alcune peculiarità dell’Istituto che ne rendono particolarmente interessante la frequentazione. Non devono mancare indicazioni riguardanti gli orari per il pubblico, o gli orari di ricevimento dei professori. In realtà la realizzazione di un sito con queste caratteristiche non richiede doti particolari, e in questa situazione le difficoltà sarebbero veramente ridotte al minimo. Quello che principalmente conta è dare libertà alla propria fantasia e infondere il massimo dell’entusiasmo nel lavoro che si sta svolgendo. In questo caso, se nelle proprie intenzioni vi è in progetto l’espansione della documentazione disponibile, può essere accettabile la presenza della nota frase «il sito è ancora in costruzione…» ANTONIO FAVINO HTML per i principianti Pag.59 15/03/01 15.21 ARRICCHIRE UN SITO WEB: UNA QUESTIONE DI “STILE” Beh, la fatica è stata notevole ma alla fine ce l’abbiamo fatta... Bene o male il codice HTML dovrebbe esserci ormai familiare, e con tutto quello che è stato visto dovremmo essere in grado di preparare documenti anche di una certa complessità. Come dicevo in uno dei capitoli iniziali, questo linguaggio non è un qualcosa di statico e inamovibile, ma si adegua alle richieste del pubblico e alle evoluzioni tecnologiche. D’altronde la presenza dell’HTML è stata di impulso per il diffondersi del World Wide Web, conseguentemente il linguaggio si aggiorna costantemente per aggiungere nuove funzionalità e per arricchire la visualizzazione delle pagine Web. Esistono infatti linguaggi paralleli, come il VRML, il DHTML e l’XML che permettono la creazione di visualizzazioni dinamiche o tridimensionali dei diversi documenti. Data la loro complessità non è possibile parlarne in questo elaborato, ma lo stesso HTML è giunto alla versione 4.2 che, già di per sé stessa, ha una sua buona dose di difficoltà. Per questo motivo daremo solo delle indicazioni generiche, che però potranno essere approfondite in seguito, una volta acquisita una certa padronanza del linguaggio. Come si è detto più volte nei capitoli precedenti, infatti, il codice HTML si è sviluppato nel tempo per dare il massimo dell’interattività con il visitatore. Quindi ai testi e alle immagini sono stati aggiunti i contributi multimediali di suoni e filmati. Tutto sommato l’aggiunta di tali apporti funziona come un normale collegamento ad un qualsiasi documento, l’unico limite è dato dal fatto che il browser può accettare solo alcuni tra i diversi tipi di files multimediali oggi disponibili. HTML 3.2 accetta i seguenti tipi di file: ANTONIO FAVINO • Files di tipo testuale .txt • Documenti di tipo HTML .html; .htm • Immagini compresse GIF .gif • Immagini in formato TIFF .tiff; .tif • Immagini di tipo X Bitmap .xbm • Immagini compresse JPEG .jpeg; .jpg • Files di tipo PostScript .ps • Files audio di tipo AIFF .aiff; .aif • Files audio di tipo AU .au • Files audio in formato WAV .wav • Filmati in formato Quick Time .mov • Filmati compressi di tipo MPEG .mpeg; .mpg HTML per i principianti Pag.60 15/03/01 15.21 Bisogna sottolineare che non tutti questi formati sono accettati da qualsiasi computer, di conseguenza alcuni visitatori potrebbero essere esclusi dalla possibilità di utilizzarli. Come vedremo in seguito, infatti, l’autore di una pagina Web, nel costruire il proprio documento, deve fare sì che esso sia fruibile da qualsiasi visitatore per raggiungere il maggior numero possibile di persone. Per questo motivo si deve porre la massima attenzione evitando che alcuni vengano esclusi dalla possibilità di giovarsi interamente di quanto contenuto nel documento. Ovviamente l’utilizzo di questi accorgimenti, associato all’esigenza di evitare comandi ripetitivi e di mantenere una certa uniformità nell’aspetto dei propri documenti, ha fatto scaturire l’idea di creare apposite enunciazioni che contenessero indicazioni generali relative ai diversi elementi di un documento HTML. Queste enunciazioni sono contenute all’interno dei cosiddetti Fogli di Stile, tecnicamente chiamati Cascade Stile Sheet (CSS). In pratica si tratta di documenti HTML che definiscono le caratteristiche dei paragrafi, dei titoli, dei caratteri e degli svariati elementi che compongono un qualsiasi normale documento. I fogli di stile possono essere adoperati come documenti a sé stanti, cui gli altri documenti fanno riferimento, oppure possono essere contenuti all’interno di una pagina HTML per definirne le caratteristiche. Viene spontaneo domandarsi per quale motivo complicarsi la vita con i CSS, quando si dispone di una grande versatilità già con i normali comandi HTML. La ragione va ricercata in due diversi fattori: il primo è il risparmio dello spazio all’interno del sito, il secondo, sicuramente molto più vantaggioso, sta nell’enorme risparmio di lavoro che deriva dall’uso dei Fogli di Stile. Immaginiamo di aver creato un sito composto di cento pagine nel quale il testo è costituito da un determinato carattere di scrittura. Poniamo che, per migliorarne la leggibilità, si decida di adottare un nuovo carattere. Per effettuare tale operazione saremmo costretti a modificare cento pagine in HTML, intervenendo magari più volte in una stessa pagina in base al numero di paragrafi presenti. Il lavoro sarebbe immane, e potrebbe essere insufficiente qualora si desiderassero apportare ulteriori modifiche. Utilizzando i CSS basterebbe invece modificare una sola riga e il gioco sarebbe fatto! Ulteriori modifiche si potrebbero apportare con pochissime correzioni. Oltretutto, se nascessero esigenze particolari anche per un solo documento, basterebbe inserire una sola dichiarazione in più nel Foglio di Stile e modificare leggermente il documento “incriminato” per ottenere il risultato che ci eravamo prefissi. Il supporto dei fogli di stile è stato introdotto proprio con HTML 3.2, anche se solo come previsione per gli sviluppi futuri del linguaggio. I CSS risultano abbastanza semplici da usare, ma un loro esame dettagliato richiede comunque una discreta conoscenza del linguaggio HTML. Per una trattazione destinata ad utenti inesperti approfondire l’argomento sarebbe ANTONIO FAVINO HTML per i principianti Pag.61 15/03/01 15.21 veramente troppo! In ogni caso, se qualcuno desidera approfondire le proprie conoscenze sui CSS, nel capitolo 12 sono indicati gli indirizzi di alcuni siti Web che possono rivelarsi utili per ampliare le proprie conoscenze. In ogni caso, visto che presentare alcune informazioni di base non delinea difficoltà di rilievo, espongo i concetti di base relativi ai fogli di stile in modo da familiarizzare con questo modo di lavorare. Prima di tutto bisogna dire che le tendenze attuali dell’HTML si stanno sempre più orientando verso la separazione dello stile dai contenuti. Da quanto abbiamo visto fino a questo punto è evidente come un qualsiasi documento scritto in codice HTML contiene allo stesso tempo indicazioni relative allo stile, cioè all’aspetto formale, mischiate con il contenuto che si desidera rendere pubblico. Inoltre la limitatezza degli strumenti a disposizione non consente di realizzare pubblicazioni esattamente coincidenti con il pensiero dell’autore, tanto che per posizionare i diversi elementi in una pagina si fa ricorso, in modo improprio, alle tabelle. In realtà lo strumento tabellare è nato solamente per ordinare i dati all’interno di una struttura a griglia. Purtroppo un limite dei fogli di stile sta nel fatto che questi sono compatibili solo con alcune versioni di browser, e cioè Internet Explorer nella versione 3, anche se solo parzialmente, e in modo completo a partire dalla versione 4.0. Netscape Navigator è solo parzialmente compatibile con i CSS. Questo implica che il loro utilizzo, sebbene vada decisamente incoraggiato, per il momento deve prevedere la possibilità di visione anche per coloro che non dispongono delle ultime versioni del browser. Il lavoro dell’autore di un sito, quindi, deve essere il frutto anche di questi compromessi, ed è per questo che la presente trattazione illustra le caratteristiche di HTML 3.2, che rappresenta una sorta di transizione in quanto mantiene una certa compatibilità con il passato pur supportando alcuni tag successivamente sviluppati con le specifiche 4.0. Per permettere la massima flessibilità nella gestione dei fogli di stile si possono utilizzare diversi sistemi di “inclusione” del foglio all’interno del documento. Vi possono essere infatti fogli di stile in linea, utilizzati come qualsiasi altro tag HTML; fogli di stile incorporati, che valgono per l’intero documento, e infine i fogli di stile esterni, documenti a sé stanti utili per più pagine o per un intero sito. La sintassi per redigere un foglio di stile si attiene alle seguenti regole: ANTONIO FAVINO • Ogni regola di stile inizia con il nome del tag di cui si sta definendo lo stile. • La lista degli attributi di stile è racchiusa tra parentesi graffe • Ogni argomento di stile inizia con il nome dell’attributo, seguito dai due punti e dal valore dell’attributo. • Si possono elencare più attributi delimitando ogni argomento con un punto e virgola finale HTML per i principianti Pag.62 15/03/01 15.21 • Se l’attributo è costituito da più parole queste vanno unite con un trattino • Le regole enunciate si applicano ai fogli di stile incorporati e a quelli esterni. Per i fogli di stile in linea solo alcune di queste vengono applicate. Si vedrà in dettaglio il caso specifico La creazione di un foglio di stile, sulla base delle regole viste, può essere ad esempio la seguente: H1,H2 {font-size:18px; font-family:arial; color:blue;} Con tale definizione si è stabilito che i tag e abbiano le stesse dimensioni di carattere, pari a 18 pixel, che utilizzano il font chiamato arial e che il colore del testo è blue. Indubbiamente un bel vantaggio rispetto alla necessità di definire tali parametri ogni volta che si richiama il relativo tag. Il lettore, in ogni caso, deve tenere presente che, a parte i fogli di stile incorporati, le altre forme sono utilizzabili solo con HTML 4.0 e che, in HTML 3.2, i tag sui fogli di stile vengono interpretati dal browser ma non visualizzati. Questo per evidenziare come l’argomento sia solo proposto a livello di informazione generale, in quanto non è applicabile con la versione HTML in discussione per questo elaborato. Proseguiamo comunque con il discorso e vediamo come si inserisce un foglio di stile in linea all’interno di un documento. La tecnica, in questo caso, si basa sulle normali regole HTML adoperando i due tag e . Come attributo dei due tag si utilizza STYLE seguìto dalle definizioni degli elementi che si desiderano regolare. Anche in questo caso un esempio potrà venirci in aiuto: In questo esempio il testo è color blue Il tag modifica il testo corrente utilizzando il carattere Verdana di colore blue con dimensione 10 pixel. Sostanzialmente tale situazione non è molto diversa da quella che si avrebbe con il tag ; infatti un foglio di stile utilizzato in questo modo non presenta grossi vantaggi rispetto alle versioni precedenti di HTML, anche se l’introduzione dei CSS permette più larghe possibilità di modifica per la ricchezza dei parametri disponibili. Si noti l’utilizzo della Character Entity è che rappresenta la “è”. Nelle specifiche HTML non viene indicata la differenza nell’uso del tag rispetto al tag , anche se quest’ultimo viene più spesso usato per lunghi blocchi di testo. ANTONIO FAVINO HTML per i principianti Pag.63 15/03/01 15.21 Considerando che i fogli di stile in linea possono rivelarsi utili solo in caso di variazioni “volanti” o saltuarie, passiamo a descrivere i cosiddetti fogli di stile incorporati. Per questi valgono tutte le regole viste nelle pagine precedenti, e il loro inserimento, valido per tutto il documento che si va a predisporre, deve essere racchiuso tra i tag . Un foglio di stile incorporato, quindi, deve essere gestito come segue: A:hover {color: blue; text-decoration:none} H2 {color:red; margin-top: 8em; margin-bottom: 3em; } In questo caso il foglio di stile incorporato stabilisce che, al passaggio del cursore sul testo che richiama un link, questo cambi aspetto assumendo il colore blue e perdendo la tipica sottolineatura dei links. Per il tag H2, invece, si stabilisce che esso sia di colore rosso e che la spaziatura che lo precede corrisponda a otto volte l’altezza del carattere, mentre quella che lo segue si riduce a tre volte quella del carattere. Vi sarebbero moltissime altre informazioni da aggiungere sull’uso dei fogli di stile, come ad esempio la possibilità di differenziare le caratteristiche di un determinato tag assegnando dei nomi richiamabili come attributi del tag stesso. Evidentemente tali descrizioni comporterebbero una apposita trattazione che non è il caso di affrontare, se non altro perché si tratta di caratteristiche non supportate dalla versione HTML 3.2. Quelle esposte sono solo considerazioni che non ci impediscono di parlare dei fogli di stile esterni, che rappresentano forse l’esempio più flessibile nell’uso dei fogli di stile. Essi sono dei veri e propri documenti indipendenti, caratterizzati dall’estensione .CSS. Al loro interno sono contenuti tutti i codici, come nell’esempio precedente, privi però del tag e di qualsiasi altra intestazione HTML. In pratica essi sono una lista delle caratteristiche che vogliamo attribuire ai diversi tag con la definizione dei relativi attributi. Per collegare ogni documento con i fogli di stile esterni all’interno di ogni tag va inserita la seguente stringa: ANTONIO FAVINO HTML per i principianti Pag.64 15/03/01 15.21 Anche questo tipo di tag è previsto solo da HTML 4.0, esso è di tipo perché fa riferimento a un collegamento esterno di tipo stylesheet, come indicato nell’attributo rel. In href è indicato il nome del file con estensione .CSS. Tale nome è, ovviamente, stabilito dall’autore anche se abitualmente il foglio di stile esterno è chiamato style.css. Come ultima indicazione troviamo il tipo di linguaggio adoperato nel foglio di stile, che in questo caso è di tipo testuale. In questo esempio il documento style.css si trova nella stessa cartella del documento HTML; qualora il documento si trovasse in cartelle diverse si utilizzeranno le regole di indirizzamento descritte a partire da pag. 42. Nell’uso comune il documento .CSS viene posto nella cartella principale, dove vi è anche la Home Page del sito. Solamente nel caso in cui si utilizzino numerosi fogli di stile è opportuno creare per loro un’apposita cartella. RISPETTARE LE REGOLE Arrivati a questo punto siamo in possesso di tutte le informazioni necessarie per lavorare concretamente sul progetto di un sito Web destinato alla pubblicazione. Vorrei sottolineare che non è necessario che tale pubblicazione avvenga su Internet, perché il linguaggio HTML può essere utilizzato per documenti ipertestuali che possono benissimo risiedere su uno o più dischetti, oppure che possono essere memorizzati sull’hard disk per consultazione o, per chi possiede un masterizzatore, essere immagazzinati in un CD-ROM. Alla luce di queste considerazioni il documento ipertestuale può essere sviluppato da un’intera scolaresca, essere inserito in un progetto interclasse o, più semplicemente, può essere il frutto del lavoro di un singolo alunno in luogo delle tesine di tipo cartaceo. A titolo di esempio viene qui rappresentato uno schema di massima per la preparazione di un documento che analizza un determinato periodo storico, descrive le condizioni di vita della popolazione durante il periodo in analisi e mette in relazione a tale periodo la produzione letteraria, musicale e scientifica del tempo. Se, a livello locale, esistessero monumenti o costruzioni di particolare importanza relative al periodo in analisi potrebbe essere interessante fornire le opportune informazioni che darebbero un pizzico di originalità al documento ipertestuale. Naturalmente i riferimenti alla realtà locale possono aprire una vastità di correlazioni, anche di tipo geografico e culturale, che possono essere oggetto di approfondimento per futuri ampliamenti, magari in vista della pubblicazione sul Web o su CDROM. Per evitare che il documento ipertestuale risulti troppo arido, oltre alla presenza di una apposita pagina con i link più interessanti verso altri siti, può essere utile dedicare una o più pagine agli autori della pubblicazione, ANTONIO FAVINO HTML per i principianti Pag.65 15/03/01 15.21 fornendo anche qualche indicazione sulla Scuola o sulla classe di appartenenza. Di sicuro effetto, anche se di non semplice realizzazione, potrebbe essere l’inserimento di giochi, tipo quiz o cruciverba, la cui risoluzione si basa sugli argomenti trattati nel documento ipertestuale. È evidente che lo schema presentato può essere una semplice base di partenza per un lavoro i cui unici limiti sono determinati dalla fantasia e dall’inventiva degli autori. ANTONIO FAVINO HTML per i principianti Pag.66 15/03/01 15.21 HOME PAGE • • • • • IL PERIODO STORICO LETTERA TURA ANTONIO FAVINO CONDIZIONI DI VITA MUSICA LINK UTILI LE SCIENZE HTML per i principianti IL PERIODO STORICO CONDIZIONI DI VITA LINK UTILI INFORMAZIONI SUGLI AUTORI ESERCIZI DIDATTICI INFORMA ZIONI SUGLI AUTORI ESERCIZI DIDATTICI REALTA’ LOCALE DEL PERIODO Pag.67 15/03/01 15.21 Ovviamente lo schema descritto ha il solo scopo di proporre un suggerimento, dal momento che la creatività e l’immaginazione di alunni e insegnanti può dare luogo a realizzazioni sicuramente più valide e interessanti. L’importante è che, nella stesura del codice HTML, si tengano ben presenti le regole stabilite dal consorzio W3 per garantire la massima compatibilità con le risorse di qualsiasi visitatore. Una regola fondamentale, quindi, è quella di inserire correttamente i tag, in modo particolare quelli di chiusura. Se, nella stesura del documento, si aprono dei tag in forma nidificata, cioè l’uno all’interno dell’altro, bisogna provvederne alla chiusura con sequenza inversa rispetto all’apertura. In altre parole il primo tag ad essere chiuso è sempre l’ultimo che è stato aperto. Sicuramente un esempio potrà essere di aiuto per chiarire quello che è stato detto: Documenti: la fabbrica La meraviglia del nostro tempo, amico mio, sono per me le macchine e gli edifici per le macchine chiamati fabbriche. Simili costruzioni sono alte otto o nove piani, hanno quaranta finestre in lunghezza e quattro in larghezza. Ogni piano ha un'altezza di dodici piedi. Le colonne sono di ferro; le travi che su di esse poggiano pure; le pareti laterali sono però sottili come fogli di carta. Un blocco di simili costruzioni sta su punti elevati che dominano la regione; una foresta di ciminiere e di macchine a vapore, ancora più alte, sottili come aghi, tanto che non si può capire come si reggano; fanno da lontano un meraviglioso colpo d'occhio, specie di notte, quando mille finestre brillano per la luce a gas. Guardiamo uno per uno i tag che compongono l’esempio, cominciando da : primo ad essere aperto e ultimo nell’essere chiuso. Subito di seguito troviamo il tag , con il relativo tag di chiusura. C’è da notare che lo stesso effetto si sarebbe ottenuto con il tag , ma che è sempre preferibile l’uso delle formattazioni logiche, come abbiamo già visto in precedenza. Il tag fa iniziare la frase alla riga successiva. In seguito troviamo il tag logico che raggruppa il testo inserendo dei margini rientranti. All’interno di tale tag viene aperto un tag che utilizza un diverso carattere di scrittura, chiamato Verdana. In questa situazione, quindi, il tag è nidificato all’interno di e, come se non bastasse, viene ulteriormente “aperta” una nuova nidificazione con il tag . In seguito, sulla base delle regole HTML, questo è il primo ad essere chiuso, seguito da e da . Come indicato all’inizio il tutto è chiuso dal tag . ANTONIO FAVINO HTML per i principianti Pag.68 15/03/01 15.21 Quella relativa alla consequenzialità dei tag è indubbiamente una delle regole fondamentali nell’ambiente HTML. Un’altra regola molto importante, della quale abbiamo già fatto cenno in un’altra parte di questo documento, è costituita dalla considerazione che la maggioranza (l’ideale sarebbe tutti) dei visitatori possa essere in grado di conoscere il contenuto dei vostri documenti. Si badi bene che non ho utilizzato il termine visualizzare, perché non dobbiamo dimenticare che il codice HTML è pensato anche per macchine a risposta vocale o per la scrittura braille per non vedenti. Se poi restringiamo il campo delle ipotesi a coloro che utilizzano un browser, che sono comunque la maggioranza, dobbiamo comunque tener conto di una grande varietà di situazioni. Prima di tutto la platea dei visitatori utilizza software diversi. Ecco spiegato il motivo per cui ci atteniamo rigorosamente alle regole fissate dal consorzio W3. Tra i browser, inoltre, ci sono differenze di versione anche se il software è dallo stesso produttore. Le capacità di visualizzazione di Internet Explorer 3.0 sono ben diverse da quelle della versione 5.5, anche se il produttore è sempre Microsoft. Il medesimo browser, inoltre, può essere utilizzato su macchine dalle capacità molto diverse, con Sistemi Operativi diversi, con una varietà di configurazioni hardware. Vi sembra un quadro complicato? Non è finita qui! Tralasciando ogni discorso sulla velocità del collegamento a Internet basti dire che, tra le opzioni che alcuni possono avere impostato, può esserci la scelta di non scaricare le immagini, questo per rendere la navigazione più veloce. Va da sé che un sito che basa la propria informazione sull’immagine è totalmente precluso a costoro. È per questo motivo che bisogna inserire un testo alternativo che permetta al visitatore di conoscere il contenuto dell’immagine. Spetterà a lui, in seguito, decidere se scaricare l’immagine o meno. A questo punto si apre un tema sul quale il Consorzio W3 ha dedicato delle apposite normative distinte dall’acronimo WAI, il cui significato è Iniziative di Accesso al Web. Tra i visitatori vi possono essere infatti persone che le immagini non le possono vedere, perché hanno difetti visivi. Altri che non possono usare il mouse perché hanno problemi di motilità alle mani. Altri ancora che non hanno una perfetta percezione dei colori. Vi possono essere anche visitatori che vengono disturbati da immagini con animazioni veloci o con bagliori e repentini cambi di luminosità dello schermo. Tutti costoro hanno il sacrosanto diritto di visitare una pagina Web, e questa pagina deve essere costruita tenendo conto delle loro difficoltà. Per questo motivo è bene rispettare le regole qui di seguito enunciate. Si tenga presente che le normative previste dal protocollo WAI sono state suddivise secondo tre livelli di importanza: il primo ha carattere obbligatorio, il secondo dovrebbe essere utilizzato quanto più spesso possibile, il terzo è fortemente consigliato. ANTONIO FAVINO HTML per i principianti Pag.69 15/03/01 15.21 1. 2. 3. 4. 5. 6. VERIFICHE DEI CONTENUTI DI ACCESSIBILITA’ IN UN SITO WEB LIVELLO 1 Inserire un testo descrittivo per tutti gli elementi non testuali, come immagini, tabelle, files multimediali ecc. Tutte le informazioni trasmesse per mezzo del colore devono essere disponibili anche senza l’utilizzo del colore adottando opportune evidenziazioni a marcatori. Identificare chiaramente gli elementi di natura non testuale e descriverne le funzioni e il contenuto, come ad esempio le tabelle. Organizzare i documenti in modo che siano leggibili anche senza la presenza dei fogli di stile. Evitare effetti con sfarfallii e tremolii dello schermo. Utilizzare un linguaggio semplice e comprensibile, adeguato ai contenuti del sito. Le iniziative di accesso al Web relative al primo livello prevedono anche altre regole, che qui sono state tralasciate in quanto si riferiscono a caratteristiche del documento qui non affrontate, come frames, mappe cliccabili, tabelle ecc. Il Livello 2 delle raccomandazioni prevede una serie di accorgimenti in grado di garantire una maggior leggibilità dei propri documenti: • Prevedere combinazioni tra il colore del testo e quello di sfondo che siano sufficientemente contrastate, per facilitare la lettura di coloro che sono affetti da deficit nella percezione dei colori. • Preferire l’utilizzo del testo per trasmettere le proprie informazioni, piuttosto che affidarsi a delle immagini. • Inserire nel tag tutte le indicazioni relative alla struttura del documento. • Nell’assegnare i valori degli attributi adoperare unità di misura relative piuttosto che quelle assolute, sia nei tag sia nell’uso dei fogli di stile. Anche in questo caso le iniziative di accesso al Web prevedono molte altre norme che qui non sono riportate in quanto si riferiscono a casistiche non trattate nel presente documento. Tutte le regole relative alle Iniziative di Accesso al Web sono rintracciabili all’indirizzo http://www.w3.org/WAI. Il sito è in lingua inglese. ANTONIO FAVINO HTML per i principianti Pag.70 15/03/01 15.21 In aggiunta alle indicazioni del WAI si possono trovare ulteriori informazioni all’indirizzo http://www.cast.org, appositamente sviluppato per facilitare l’accesso ai documenti da parte di tutti gli utenti affetti da handicap fisici o motori. Sebbene sia in lingua inglese la sua visita è molto interessante, anche perché offre un servizio di verifica dei documenti per valutarne la conformità alle norme di accesso. I siti che ottengono la convalida di tutti i documenti in essi contenuti possono apporre un apposito simbolo che ne attesta la conformità. Prima di concludere l’argomento è importante aggiungere qualche osservazione che può tornare utile al momento di pubblicare i propri documenti, per evitare di commettere alcuni errori comuni a molti autori in erba. Nello strutturare il sito è opportuno sviluppare uno schema che permetta un facile raggiungimento delle informazioni, prevedendo in ogni documento una apposita area con i link alle parti principali del sito. Evitare che il visitatore si ritrovi in un “vicolo cieco” che lo obblighi a percorrere a ritroso i collegamenti che lo hanno portato ad un determinato punto. Sebbene tutti i browsers siano dotati di tasti che riportano alla pagina precedente, prevedete sempre la possibilità di raggiungere in modo rapido i documenti più importanti presenti nel sito. Tra questi, ovviamente, spicca la Home Page. Cercate di mantenere uno stile unico nella creazione dei vostri documenti, in modo che si stabilisca una familiarità tra il visitatore e l’aspetto delle pagine, le quali devono essere sintetiche, non eccessivamente cariche di immagini, ma dotate di qualche elemento che le rallegri e le vivacizzi. Questo può essere costituito da colori o da GIF animate, di cui si parlerà in seguito, che contribuiscono sempre a dare un tocco di simpatia a una pagina Web. Una regola fondamentale delle realizzazioni tipografiche prevede di non adoperare più di tre diversi tipi di carattere in una stessa pagina. Purtroppo, con l’avvento del computer, tutti si sono improvvisati tipografi con risultati a volte terrificanti. In questo momento sto pensando a certe bollette di pagamento o ad alcuni volantini che, in nome della chiarezza, sono cosparsi di indicazioni che utilizzano font troppo diversi tra loro. Evitate quindi di eccedere e, se possibile, limitatevi a soli due tipi di carattere per documento: chiarezza e leggibilità ne guadagneranno. Cercate di condensare le vostre informazioni in modo che esse siano condensate in una sola schermata: è molto fastidioso dover scorrere in su e in giù un documento per visualizzare tutte le notizie che esso contiene. In tal senso è opportuno che in testa alla pagina siano sintetizzate tutte le informazioni che la riguardano. Un piccolo sommario con link ad altre sezioni del medesimo documento può rappresentare un’ottima soluzione. Come ho già detto in altra parte dell’elaborato è opportuno utilizzare un numero limitato di immagini, le quali vengono richiamate, anche con diversa dimensione, in più documenti: l’aspetto sarà più attraente ma la navigazione non ne risentirà. Un’ultima raccomandazione. Tutto ciò che viene pubblicato sul Web è il frutto del lavoro e dell’ingegno degli autori. Spesse volte quello che si legge ANTONIO FAVINO HTML per i principianti Pag.71 15/03/01 15.21 su un documento in rete è il frutto di ricerche e approfondimenti costate molto sacrificio, molto tempo e anche molto denaro. Il lavoro di tanti autori è stato pagato appositamente, ma anche se questo fosse il frutto di un’iniziativa volontaria nessuno può sentirsi in diritto di appropriarsi delle fatiche altrui per scopi personali. Per questo motivo tutto ciò che è presente in rete è tutelato dalle leggi sul Diritto d’Autore. Il fatto che Internet metta a disposizione di tutti, e gratis, notizie e informazioni non autorizza nessuno a farne un uso indiscriminato. Attenzione, quindi, nell’utilizzare materiale pubblico per inserirlo all’interno dei propri documenti: immagini, notizie, files e ogni elemento prodotto da altri può essere adoperato solo se vi è un’autorizzazione scritta dell’autore o del legittimo proprietario. Si tenga presente che una recentissima legge considera la violazione del diritto d’autore come un reato! Inoltre sarebbe piuttosto sciocchino mettere a pubblica disposizione materiale chiaramente prodotto da altri: l’autore, ma anche le autorità competenti, si accorgerebbero subito del “furto”. Viceversa, l’utilizzo di link ad altri documenti è, spesse volte, visto con piacere dagli autori in quanto rappresenta senza dubbio un riconoscimento della validità della propria produzione. In ogni caso è opportuno prendere contatti con i responsabili del sito per verificare la possibilità di effettuare il link. Si tenga presente che è vietato anche l’utilizzo di simboli o marchi all’interno di un sito, sia pure se effettuati per mezzo di un collegamento. La regola vale in modo particolare per simboli o emblemi di siti istituzionali, come regioni, comuni, enti pubblici ecc. IL CONSORZIO W3 Il consorzio W3 è nato nell’ottobre 1994 per sviluppare protocolli comuni da applicare nell’ambito del World Wide Web in modo da sviluppare al massimo le potenzialità della rete ed assicurare la sua interoperabilità. Il fondatore del Consorzio W3 è stato quel Tim Berners-Lee, inventore del Web, di cui abbiamo abbondantemente parlato nel capitolo “MA COS’È QUESTO HTML?”. La nascita del Consorzio è stata resa possibile anche per il sostegno di alcune importanti organizzazioni scientifiche: si tratta del Massachusetts Institute of Technology, in collaborazione con il CERN di Ginevra e con il supporto del DARPA e con il contributo della Commissione Europea. Nell’aprile del 1995 un ente francese, l’Istituto Nazionale di Ricerca nell’Informatica e Automazione, mise a disposizione le proprie risorse per divenire il primo sistema europeo del consorzio W3, seguito nel 1996, per quanto riguarda il settore asiatico, dalla Keio University of Japan. Un attento lettore potrà notare che si tratta nella gran maggioranza di enti che hanno contribuito alla storia del Web, come abbiamo visto nei primi capitoli. Oggi fanno parte del consorzio oltre quattrocento organizzazioni in qualità di membri attivi. I compiti del World Wide Web Consortium riguardano l’emanazione di norme tecniche per permettere un accesso universale al Web, per lo sviluppo di software adeguati alle esigenze degli utenti e per un’espansione della rete ANTONIO FAVINO HTML per i principianti Pag.72 15/03/01 15.21 che tenga in considerazione gli aspetti legali, commerciali e sociali legati alle nuove tecnologie. Sotto questo profilo il Consorzio assume anche un ruolo importante per la creazione di adeguati standard. Alla luce di queste attività del Consorzio chiunque desideri informazioni dettagliate sul codice HTML e sulle sue specifiche ufficiali non può non fare riferimento al sito relativo, data la sua indiscussa autorità nel settore. C’è da sottolineare che, a partire dai link ipertestuali presenti in tale sito, è possibile approfondire determinate notizie o leggere la traduzione delle specifiche ufficiali in diverse lingue, tra cui l’italiano. Se qualcuno avesse bisogno di chiarimenti o informazioni più approfondite, quindi, collegandosi all’indirizzo http://www.w3.org sarà in grado di trovare risposta a tutti i suoi dubbi. Ulteriori informazioni sugli indirizzi utili si possono trovare nel Capitolo 12 a Pag. 78. Oltre a tutti i dettagli tecnici sulle specifiche HTML il sito del Consorzio W3 offre anche alcune particolarità molto utili ai webmaster di primo pelo. Ricordo che il webmaster è il responsabile del sito anche sotto il profilo dei contenuti e, nel nostro caso, il termine è usato in modo un po’ scherzoso. Come dicevo sul sito del Consorzio è disponibile un servizio di validazione delle pagine HTML che verifica la correttezza formale del linguaggio utilizzato, segnalando eventuali errori o incongruenze. Qualora il documento risultasse conforme alle specifiche e superasse il controllo al suo interno può essere inserito il certificato di validazione, costituito da un’immagine che ne attesta la correttezza formale. Tale sistema di convalidazione, in lingua inglese ma di facile comprensibilità, è raggiungibile tramite un link dalla Home Page del Consorzio, oppure all’indirizzo http://validator.w3.org/. Per poter effettuare le convalide dei propri documenti, però, bisogna essere collegati a Internet e sottoporre ognuna delle proprie pagine al server del Consorzio. Finché le pagine da analizzare sono poche l’operazione è fattibile, quando bisogna però analizzare un intero sito la faccenda si fa piuttosto noiosa. Per nostra fortuna il Consorzio ci viene incontro fornendo due software, assolutamente gratuiti, che ci permettono una veloce convalida dei documenti e, udite udite, un editor HTML per la veloce realizzazione di pagine Web. Il software per la convalida si chiama Tidy, è di piccolissime dimensioni ed è utilizzabile da una finestra DOS (avete visto che, in qualche modo, questo DOS ogni tanto compare?). La relativa pagina è raggiungibile con un link dalla solita Home Page del Consorzio, oppure all’indirizzo http://www.w3.org/People/Raggett/tidy/. Presso questo sito vengono fornite anche tutte le indicazioni utili all’utilizzo del programma, con alcuni esempi per le operazioni più comuni. Ovviamente, e questa è la nota dolente, tali istruzioni sono in lingua inglese. Una buona notizia, invece, per tutti coloro che dispongono di Sistemi Operativi diversi: a fondo della pagina indicata sono presenti i link alle diverse versioni di Tidy adatte ai più svariati tipi di computer. Una volta tanto chiunque troverà il prodotto per lui più indicato. ANTONIO FAVINO HTML per i principianti Pag.73 15/03/01 15.21 Infine viene il Kit per la costruzione di pagine HTML, utile e veloce per l’inserimento dei tag, abbastanza semplice da usare ma, come molti tra i software gratuiti, presuppone che l’utilizzatore conosca il linguaggio HTML. Questo significa che dovete essere voi a scegliere il tipo di tag da adoperare, anche se è inserito un sistema di controllo formale che verifica la validità del vostro lavoro. HTML-Kit può lavorare in abbinamento con tidy ed è reperibile all’indirizzo http://www.chami.com/html-kit/. Mi sembra superfluo aggiungere che anche qui le istruzioni sono in lingua inglese. In mezzo a questa massa di informazioni in lingua inglese farà piacere sapere che, in data 8 dicembre 2000, è stata tenuta un conferenza presso l’ufficio italiano del Consorzio W3 la cui Home Page si trova all’indirizzo http://w3c.cnr.it. Non ci si facciano troppe illusioni però: molti dei link proposti rimandano a siti in lingua inglese. Pazienza, vorrà dire che approfondiremo la lingua! NONSOLOHTML Questo vuole essere un brevissimo capitolo per fornire una stringatissima panoramica su tutto ciò che NON è HTML. Parlando dei fogli di stile abbiamo visto come, nel tempo, gli stessi utilizzatori del linguaggio si siano resi conto di alcuni limiti imposti da tale codice. L’avvento di un utilizzo commerciale della rete ha così fatto nascere l’esigenza di creare siti quanto più “affascinanti” possibile per indurre interesse nei visitatori. Di conseguenza si sono sviluppati codici e prodotti alternativi che colmassero le “lacune” del linguaggio HTML. Contemporaneamente, sebbene ampiamente deprecato dalle regole del WAI, si è puntato ad un utilizzo dell’immagine come elemento centrale nella trasmissione dei propri messaggi diffondendo l’uso delle cosiddette GIF animate. In realtà queste graziose figurine possono essere adoperate per rallegrare le proprie pagine, in quanto si tratta di vere e proprie animazioni di brevissima durata. Bisogna fare però attenzione a non esagerare nel loro uso, in quanto il movimento può disturbare qualsiasi osservatore se nella pagina sono presenti più di due immagini di tale tipo. Le GIF animate sono facilmente reperibili in rete presso moltissimi siti, anche di provider. Nel capitolo “COME SCOVARE LE INFORMAZIONI” sono indicati i criteri per ricercare tali immagini. Mentre le GIF animate sono normali immagini inseribili all’interno di un documento utilizzando il relativo tag, i codici e i prodotti che vanno ad aggiungersi alle normali funzionalità HTML richiedono conoscenze di programmazione di alto livello riservate ai professionisti del Web. Per questo motivo se ne fa solamente cenno allo scopo di completare una panoramica sulla rete. Elemento di spicco tra questi “accessori” è il linguaggio JAVA, sviluppato da un colosso dell’informatica che risponde al nome di SUN Microsystem, il quale ha dedicato a tale linguaggio di programmazione un intero sito ANTONIO FAVINO HTML per i principianti Pag.74 15/03/01 15.21 visitabile all’indirizzo http://java.sun.com. Per mezzo di tale linguaggio il sito ospitante può eseguire veri e propri programmi sul computer del visitatore realizzando effetti o animazioni altrimenti non possibili con HTML. A puro titolo di esempio si può dire che i controlli sulle pagine HTML effettuati online dal consorzio W3C per la convalida utilizzano proprio il linguaggio JAVA. Perché il linguaggio possa funzionare il computer del visitatore deve essere dotato di un apposito software generalmente fornito con il browser. Quasi indispensabile è poi Adobe Acrobat Reader. Un software che permette di visualizzare documenti, anche voluminosi, in un formato stampabile dalle dimensioni estremamente contenute, quindi facilmente trasmissibile via Internet. Il software può essere scaricato dall’indirizzo Web http://www.adobe.com/acrobat. Vi sono poi altri software, dedicati esclusivamente a compiti specifici, che vengono detti plug-in in quanto aggiungono nuove funzionalità al browser in dotazione. Si tratta di Shockwave e Real Audio. Alcuni browser li includono direttamente al momento dell’installazione. Il primo di essi serve a visualizzare animazioni interattive impossibili da creare con GIF animate o con il codice HTML. Questo tipo di animazione viene generalmente utilizzato da siti commerciali, specialmente legati al mondo automobilistico. Real Audio è invece un particolare riproduttore multimediale che permette la visione o l’ascolto di filmati e brani audio solamente se si è direttamente collegati alla rete. Il successo di tale prodotto sta nell’impossibilità di duplicare o copiare brani e filmati, con gran soddisfazione di Case Discografiche e produttori cinematografici. Nel prossimo capitolo daremo un’occhiata su ciò che serve per poter attivare un collegamento a Internet. QUELLO CHE CI SERVE PER UN COLLEGAMENTO A INTERNET Dopo tanti bei discorsi sui protocolli, sulle regole, sul codice e sui linguaggi affrontiamo insieme un argomento molto più “concreto”, dal momento che si tratta di parlare del computer e della sua reale possibilità di connettersi alla rete. Chiaramente non rientra negli scopi di questo elaborato l’illustrazione dettagliata delle procedure necessarie all’installazione dei diversi software e all’impostazione dei vari parametri: sarebbe eccessivamente dispersivo e complicato entrare nel merito di tali problematiche. Le indicazioni qui contenute si limiteranno a descrivere la dotazione software e hardware necessaria all’attivazione del collegamento. Come abbiamo già detto in uno dei capitoli iniziali bisogna che sul computer sia installato il protocollo TCP/IP. In genere con l’installazione del browser ANTONIO FAVINO HTML per i principianti Pag.75 15/03/01 15.21 viene automaticamente aggiunto anche il protocollo TCP/IP. È comunque possibile controllare la presenza del protocollo sia in Windows sia con Mac OS. Nel primo Sistema Operativo bisogna aprire pannello di controllo e fare doppio click sull’icona Rete. All’apertura deve essere presente sia la dicitura Dispositivo di Accesso Remoto, sia TCP/IP. Chi utilizza iMac con Mac OS deve cliccare sul menu mela, selezionare Pannello di Controllo e aprire Remote Access. Qui sono riportati il nome e la password dell’utente, e il telefono del provider. Tali indicazioni devono essere attive per potersi collegare a Internet. Premere il pulsante Opzioni del pannello Remote Access. Selezionare la scheda Protocollo nella quale deve essere impostato PPP alla voce Usa protocollo. Selezionando dalla barra dei menu la voce RemoteAccess e, successivamente, modem si potranno verificare le impostazioni del modem. Dalla medesima voce di menu RemoteAccess si potrà scegliere anche TCP/IP per i controlli delle relative impostazioni. Qualora le verifiche non corrispondessero alla descrizione bisogna far riferimento ai manuali del computer o alle istruzioni del venditore per eventuali controlli. In Windows, invece, per tali verifiche si devono aprire più icone. Da Risorse del computer aprire l’icona Accesso Remoto. Lì deve essere presente l’icona Crea nuova connessione e almeno un’icona di connessione. Un click destro e l’apertura della voce Proprietà permettono di effettuare le verifiche. Aprire la scheda Tipi di server e controllare che nella finestra Tipi di server per l’Accesso remoto sia valorizzato PPP Internet, Windows NT server, Windows 95 o 98. Nella parte inferiore della finestra deve essere spuntato solamente TCP/IP. Controllata l’esistenza dei protocolli di comunicazione bisogna che sul computer sia installato il browser. I computer più recenti, sia PC sia Macintosh, sono già dotati di tale software. Quelli di qualche anno fa potrebbero non esserne dotati. In ogni caso sia i CD-ROM a distribuzione gratuita dei provider, sia quelli allegati alle riviste contengono i più noti browser pronti per l’installazione. Sotto il profilo hardware è indispensabile il modem. Ne abbiamo già parlato nel primo capitolo: esso serve per trasformare i dati provenienti dal computer in segnali opportunamente modulati per la trasmissione attraverso il cavo telefonico. Esistono due tipi di modem: quelli esterni e quelli interni. I modem esterni hanno all’incirca le dimensioni di un libro tascabile e sono dotati di alcuni indicatori luminosi che informano dello stato di trasmissione sulla linea. Quelli interni sono inseriti nel contenitore del computer e non hanno un aspetto tale da poterli riconoscere se non si è sufficientemente esperti. I computer iMac sono tutti dotati di modem interno. Le verifiche, quindi, devono essere effettuate sui PC in quanto non è possibile determinare la presenza del modem interno se non per mezzo dell’immancabile Pannello di Controllo. Nella finestra Proprietà modem deve comparire il nome e il modello del modem, oppure l’indicazione standard modem. Si tenga presente che, scegliendo la scheda Diagnostica e premendo il pulsante Informazioni…, è possibile verificare il buon funzionamento del modem e le ANTONIO FAVINO HTML per i principianti Pag.76 15/03/01 15.21 indicazioni tecniche relative alle sue caratteristiche. Naturalmente le operazioni descritte si possono applicare anche a chi possiede un modem esterno. Un’ultima risorsa, assolutamente necessaria, è quella forse più ovvia. Magari nessuno ci pensa ma, evidentemente, deve essere attivo un abbonamento valido ad un provider, come già indicato nei primi capitoli. Moltissime scuole possiedono tale abbonamento con enti pubblici, come il Provveditorato o gli Enti Provinciali. Se qualcuno volesse dotarsi di un abbonamento a livello privato non ha che l’imbarazzo della scelta: ormai tutti i principali provider offrono gratuitamente una connessione ad Internet con quei famosi CD che installano automaticamente tutte le risorse necessarie per un corretto collegamento. Le verifiche sulla connessione sono reperibili in Accesso Remoto per gli utenti Windows, e in Remote Access per chi possiede Mac OS. Per utilizzare un collegamento a Internet i computer iMac sono già predisposti dal punto di vista hardware, mentre i PC devono essere dotati almeno di un processore a 200 Mhz, di 32 Mb di memoria per supportare i browsers nelle più recenti versioni. È opportuno che l’hard disk sia abbastanza capiente, con un minimo di 4 Gb di spazio disponibile. Il modem deve supportare una velocità non inferiore ai 33.600 bps , altrimenti i collegamenti al Web potrebbero trasformarsi in un tormento senza fine anche per la visualizzazione di una singola pagina. A questo proposito vorrei raccontare un episodio: in una situazione di emergenza ho utilizzato un giorno un computer 486 con 8Mb di memoria e un modem che credevo viaggiasse a 14.400 bps. Ho impiegato mezz’ora per scaricare una pagina! Ho poi scoperto che il modem era a 2.400 bps: praticamente fermo. Tenendo presente che il collegamento telefonico COSTA, un modem veloce permette notevoli risparmi sulla bolletta. È l’unico componente sul cui prezzo non conviene speculare. Anche se non necessario, è opportuno dotarsi di un software per la gestione della posta elettronica. Anche questo, in genere, è incluso nel “pacchetto” del browser sebbene alcuni, per proprie ragioni di praticità, utilizzano software di terze parti. In genere si tratta di prodotti a pagamento, come Outlook, che gestiscono anche appuntamenti e pianificazioni, oppure si tratta di prodotti disponibili in Internet, a pagamento o finanziati con la pubblicità, come ad esempio Eudora. Quest’ultimo è facilmente reperibile nei CD-ROM allegati alle riviste e, data la sua diffusione, nella sezione software dei principali provider: basta collegarsi ai siti TIN, Italia Online, Libero, Supereva, Jumpy, ecc. e cercare la voce software oppure download per trovare la versione più recente di Eudora. ANTONIO FAVINO HTML per i principianti Pag.77 15/03/01 15.21 Elencando altri software non strettamente necessari per il collegamento, ma certamente molto utili, si possono nominare la Java Virtual Machine, necessaria per l’esecuzione degli applet JAVA, Real Audio e Shockwave oltre che Adobe Acrobat Reader. Di tutti questi applicativi si è già parlato in un apposito capitolo. Nelle indicazioni fino ad ora illustrate non è stato fornito alcun suggerimento relativo alle impostazioni del provider, questo perché ogni fornitore di servizio richiede specifiche caratteristiche che differiscono da quelle di tutti gli altri. Per eventuali indicazioni è quindi opportuno controllare le istruzioni accluse al software, verificare la pagina di aiuto se già si possiede un collegamento attivo, oppure chiamare i numeri telefonici di Help desk per ottenere l’assistenza tecnica in linea. Anche se la notizia non è strettamente legata alla dotazione del computer, bisogna sottolineare come un’iniziativa del governo adottata nel mese di marzo 2000 insieme con l’Associazione Bancaria Italiana permette agli studenti della classe prima superiore di acquistare un computer nuovo di zecca utilizzando un prestito gratuito per lire 1.440.000 rilasciato dalle banche aderenti all'iniziativa, restituito in 24 rate di lire 60.000. Tale iniziativa invitava le banche ad estendere il prestito anche agli studenti di altre classi, come pure agli insegnanti ed è inserita nell’ambito del Programma di Sviluppo delle Tecnologie Didattiche che mira a diffondere l’uso del computer nella scuola. È un programma estremamente ambizioso che si prefigge risultati piuttosto importanti. A titolo di esempio, già dal 2001 il Piano prevede un PC ogni 25 alunni nella scuola Elementare da ridurre a uno ogni 15 per il 2002. Sono previsti corsi di formazione per i docenti e realizzazioni di aule multimediali. Per le Scuole superiori gli obiettivi sono ancora più qualificati. Speriamo che non si frappongano ostacoli e che, come troppo spesso accade, nascano impedimenti alla concreta realizzazione dei traguardi indicati. Tutto quanto c’era da dire su HTML & affini può considerarsi concluso. Nel prossimo capitolo vedremo insieme come si effettua una ricerca di informazioni su Internet. COME SCOVARE LE INFORMAZIONI Un vecchio proverbio dice che nessuno nasce maestro, e questa è una profonda verità. Di conseguenza anch’io, per fornire le informazioni presenti in questo libro, ho dovuto documentarmi cercando tutte le notizie utili alla stesura del testo. Fin qui nulla di strano. La particolarità sta nel fatto che tali notizie le ho ricercate direttamente nella rete, così come potrebbe fare ognuno di voi. Non è tra gli scopi di questo opuscolo illustrare come avviene la navigazione in Internet, ma può tornare utile la semplice conoscenza dei cosiddetti Motori ANTONIO FAVINO HTML per i principianti Pag.78 15/03/01 15.21 di Ricerca. Questi sono particolari siti Internet che permettono ai visitatori di richiedere informazioni sui documenti presenti nella Rete. In pratica, tramite i loro potenti computer, si possono formulare delle domande su un determinato argomento, o su una certa parola e in risposta si riceve un elenco di indirizzi web nei quali compaiono l’argomento o la parola ricercata. Data la vastità dei documenti ormai presenti in Rete è praticamente impossibile che questi siano tutti registrati negli elenchi dei pur potenti computer utilizzati dai Motori di Ricerca, inoltre alcuni di questi si interessano solo di determinati argomenti, oppure adoperano software che “cercano di interpretare” la richiesta del visitatore. A causa di ciò le risposte possono non essere soddisfacenti, oppure possono fornire risultati non previsti. Per carità, non c’è niente di male in tutto questo, anche perché tali risposte possono far nascere la curiosità di approfondire argomenti di cui non si sospettava neppure l’esistenza; in ogni caso se la ricerca è mirata ad un determinato risultato questo deve essere raggiunto in modo ottimale, il più rapidamente possibile. I Motori di Ricerca oggi disponibili sono piuttosto numerosi, personalmente ritengo però che solo un limitato numero di essi sia in grado di assolvere il proprio compito con efficienza e puntualità. Quelli più “vecchi”, in genere, sono quelli che, per la loro vastità, danno maggiori garanzie di successo. Tra questi si possono includere Altavista (www.altavista.com), Yahoo (www.yahoo.com), Lycos (www.lycos.com), Google (www.google.com). Utilizzando gli indirizzi indicati ci si collega, generalmente, al sito statunitense del Motore di Ricerca, ma molti di essi rimandano automaticamente alla versione in lingua italiana dello stesso motore. Questo può costituire un vantaggio per determinate ricerche ma, considerando l’enorme produzione di documenti in Inglese, specifici argomenti possono essere approfonditi solo consultando documentazione prodotta in tale lingua. Immagino già la delusione di molti di voi, mentre non ho difficoltà a intuire con quale gioia il vostro insegnante di lingua straniera accoglierà questa notizia. Per quanto concerne i Motori di ricerca italiani vi è da segnalare Virgilio (www.virgilio.it), e Arianna, raggiungibile dal Sito di Italia Online all’indirizzo http://www.iol.it. Vi è poi da segnalare un interessantissimo sito che rappresenta la guida italiana ai motori di ricerca. Il suo nome non è difficile: http://www.motoridiricerca.it. In esso vi si possono trovare moltissime utili indicazioni per utilizzare al meglio i vari Motori di Ricerca finora visti. Un sito molto interessante dedicato all’utilizzo degli ipertesti all’interno della scuola è reperibile all’indirizzo http://www.ips.it/scuola/home.html Molto interessante è anche la visita al sito http://www.icra.org. ANTONIO FAVINO HTML per i principianti Pag.79 15/03/01 15.21 Per la redazione di questo elaborato ho reperito moltissime informazioni nei siti ufficiali delle diverse organizzazioni relative all’HTML. Il “tempio” presso il quale attingere tutte le notizie tecniche sulle diverse versioni del linguaggio è quello del consorzio W3 all’indirizzo http://www.w3.org. Dalla home page si può accedere ad un’enorme quantità di settori che spaziano dalle specifiche tecniche, alla storia, ai dettagli su ogni singola versione, alle diverse forme di dichiarazione (DTD). Interessante anche l’approfondimento sulla storia dell’HTML e del Web all’indirizzo http://ei.cs.vt.edu/~wwwbtb/book/chap1/ht_ist.html. Chi ha poca familiarità con l’inglese può utilizzare la traduzione italiana delle specifiche HTML collegandosi all’indirizzo: http://www.liberliber.it/biblioteca/w/world_wide_web_consortium/inde x.htm. Una interessante trattazione su HTML 3.2 si trova all’indirizzo http://www.hut.fi/~jkorpela/HTML3.2/ Interessanti notizie sull’uso dei CSS, i Cascade Stile Sheet, oltre che nelle specifiche ufficiali si trovano all’indirizzo http://www.w3.org/Style/LieBos2e/enter/, come anche all’indirizzo http://www.w3.org/MarkUp/Guide/Style.html del programmatore Dave Ragget, autore del programma Tidy di cui abbiamo già parlato. Entrambi i siti sono in lingua inglese, ma un’ottima documentazione sull’argomento, in italiano, si può trovare all’indirizzo http://www.html.it/css/css_intro.htm Chi avesse desiderio di approfondire le informazioni su SGML può collegarsi all’indirizzo http://www.isgmlug.org/whatsgml.htm oppure all’URL alternativo: http://kb.indiana.edu/data/afrr.html . Per quanto riguarda una spiegazione semplice ma molto comprensibile sulle basi dell’HTML ci si può connettere al sito dell’NCSA, presso il quale è stato sviluppato Mosaic, il primo browser per il Web. L’indirizzo è http://www.ncsa.uiuc.edu/General/Internet/WWW/htmlprimerp1.html , presso il quale, oltretutto, si ha la possibilità di scaricare il materiale in diversi formati consultabili tranquillamente sul proprio computer senza la necessità di restare collegati a Internet. Per quanto riguarda la ricerca di GIF animate, di cui si è parlato in uno dei precedenti capitoli, affidandosi a uno dei motori di ricerca principali bisogna inserire la stringa “gif animate” oppure, se si utilizza una ricerca internazionale, il termine “animated gif’s”. L’utilizzo degli apici è necessario, sulla base di alcune regole che sono illustrate qui di seguito. Una discreta base di partenza può essere il sito http://www.supereva.it nel quale, a fondo pagina, è riportato un link sotto la voce Clipart. Da lì si possono rintracciare link a siti americani di GIF animate. In alternativa un altro sito interessante è http://www.tuttogratis.it alla voce Grafica o, se si è fortunati, per mezzo di appositi annunci pubblicitari, detti banner, che compaiono proprio in testa alla pagina principale. Considerando che agli indirizzi indicati le pagine sono frequentemente soggette a modifica, le voci elencate potrebbero essere diversamente posizionate nella pagina, o raggruppate con ANTONIO FAVINO HTML per i principianti Pag.80 15/03/01 15.21 criteri diversi sotto differenti indicazioni. In ogni caso difficilmente vengono eliminate dato il grande interesse che suscitano tra gli appassionati. Naturalmente gli indirizzi segnalati in questo capitolo rappresentano solo una minima parte nella vastità di documenti disponibile in rete. Quindi, se si desidera intraprendere una ricerca, è consigliabile delimitare quanto più possibile i termini di richiesta da sottoporre ai diversi Motori. Una regola valida per tutti non è definibile, in quanto ogni Motore di Ricerca ha propri criteri che possono differire notevolmente da quelli dei concorrenti; in ogni caso esistono alcuni piccoli accorgimenti che possono essere accettati da quasi tutti i siti del settore. Innanzitutto è opportuno inserire quanti più termini relativi all’argomento che interessa. Se si ricercano informazioni sulle olimpiadi è inutile scrivere solo “olimpiadi”, ma è opportuno specificare l’anno, il luogo, la specialità che interessa. Per poterlo fare è bene far precedere dal segno + ogni vocabolo inserito. In questo modo il motore di ricerca cercherà i documenti in cui i termini adoperati siano tutti presenti e compaiano contemporaneamente. Se tra le locuzioni ricercate vi è da inserire una frase, questa va racchiusa tra apici. Nelle proprie indagini bisogna cercare di essere il più esatti possibile, inserendo tutti i vocaboli che abbiano la massima attinenza con l’argomento prescelto, evitando accuratamente indicazioni troppo generiche. Se il risultato fosse insoddisfacente leggere le istruzioni d’uso che ogni Motore di ricerca fornisce, adoperando eventualmente la ricerca avanzata. Può anche essere utile il ricorso ai cosiddetti operatori booleani, che permettono comparazioni logiche tra gli elementi. Tramite tali operatori è infatti possibile eseguire una ricerca del tipo: “trova il termine y O il termine z”. Oppure: ”ricercami x VICINO A y”. O ancora “cerco la parola z E la parola y”. Un’altra possibilità è “trova x MA NON z”. In questi esempi ho dato un concetto piuttosto grossolano di come funzionano gli operatori booleani, poiché spesso adoperano i termini inglesi AND, NOT, OR, NEXT. In ogni caso questi concetti potranno risultare familiari qualora doveste leggere gli aiuti in linea sulla “ricerca avanzata” che molti siti propongono. Le cose che restano da dire sull’argomento HTML sarebbero ancora tante. In questo documento ho solo voluto effettuare una panoramica sufficientemente approfondita su quello che può essere il linguaggio, e gli aspetti ad esso correlati. Sono stati però proposti tutti gli strumenti utili per iniziare a lavorare con proficuità, il resto verrà da sé. Come diceva un mio amico: “l’appetito vien mangiando…” ANTONIO FAVINO HTML per i principianti Pag.81 15/03/01 15.21 ESEMPI E SOLUZIONI Nuovi Codici per i tuoi giochi Ecco i nuovi codici per videogiochi Dopo esserci collegati con il sito Codejunkies all'indirizzo www.codejunkies.com abbiamo ottenuto i codici più recenti da inserire in alcuni dei giochi di maggior successo. Ecco come utilizzarli: FIFA 2000 - GBC =============== Home team has 99 goals 01639CCC Home team has 0 goals 01009CCC Away team has 0 goals 0100AACC Away team has 99 goals 0163AACC Toy Story 2 - GBC ================= Infinite Health 0105aac6 Infinite Lives 0109d4c6 Coins Equal 30 011e7fc6 Turn the AR on just before you exit the level. Immediately turn the AR OFF when you see the Buzz Lightyear Coupon. Come molti sapranno il gioco TOY Story 2 è tratto dal lungometraggio di successo Toy Story 2, apparso nei nostri cinema all'inizio del 2000. Avvisiamo tutti i nostri visitatori che, per accedere alle pagine seguenti, è obbligatoria la registrazione con l'utilizzo di una password. Prima di ogni pagina, quindi, apparirà la seguente domanda: Immettere la password prescelta: password ANTONIO FAVINO HTML per i principianti Pag.82 15/03/01 15.21 Chiudo questa pagina riportando, come sempre, la frase della settimana apparsa oggi su un quotidiano locale: Quando mi disse di essere incorruttibile, capii che alludeva ad una cifra superiore alle mie possibilità. ESERCIZIO DI PAGINA 40 Documenti sulla rivoluzione industriale Documenti: la fabbrica La meraviglia del nostro tempo, amico mio, sono per me le macchine e gli edifici per le macchine chiamati fabbriche. Simili costruzioni sono alte otto o nove piani, hanno quaranta finestre in lunghezza e quattro in larghezza. Ogni piano ha un'altezza di dodici piedi. Le colonne sono di ferro; le travi che su di esse poggiano pure; le pareti laterali sono però sottili come fogli di carta. Un blocco di simili costruzioni sta su punti elevati che dominano la regione; una foresta di ciminiere e di macchine a vapore, ancora più alte, sottili come aghi, tanto che non si può capire come si reggano; fanno da lontano un meraviglioso colpo d'occhio, specie di notte, quando mille finestre brillano per la luce a gas. P. C. W. Beuth (1823) Intorno, fin dove si poteva distinguere nella foschia, incombevano ciminiere e ciminiere, tutte con la stessa forma brutta e pesante, come l'incubo di un sogno e buttavano dalle loro gole fiati pestilenziali di un fumo che oscurava la luce e rendeva irrespirabile l'aria...Ma quando veniva la notte il fumo si mutava in fuoco. Ogni ciminiera vomitava fiamme e i punti che durante il giorno erano sembrati delle buie caverne splendevano di vivi riflessi ANTONIO FAVINO HTML per i principianti Pag.83 15/03/01 15.21 rossi, mentre delle ombre si muovevano qua e la negli spiragli infuocati C. Dickens da 'La strada nera tra le miniere' Rifletto sui documenti I due autori, secondo te, si riferiscono allo stesso tipo di paesaggio? Provano le stesse sensazioni? Da che cosa lo capisci? Informazioni sulla vita dell'epoca Si danno qui di seguito alcune informazioni sulla parrocchia del pastore Alston La parrocchia contiene 1.400 case, abitate da 2.795 famiglie, ovvero circa 12.000 persone Lo spazio in cui abita questa grande massa di popolazione misura meno di 400 yarde quadrate. A volte anche nove persone abitano in una sola stanza di dieci o dodici piedi quadrati (1 piede = 0,3 metri) nella quale svolgono tutte le loro attività. Non un solo padre di famiglia su dieci in tutto il vicinato ha altro abito oltre l'abito di lavoro, e questo è, per di più, lacero e consunto oltre ogni dire; molti, addirittura, non hanno per la notte altra copertura che questi stracci e per letto null'altro che un sacco pieno di paglia e di trucioli. Conversione delle unità di misura: Yarda Unità di misura lineare corrispondente a 0,9 metri. Piede Unità di misura lineare corrispondente a 0,3 metri. ANTONIO FAVINO HTML per i principianti Pag.84 15/03/01 15.21 HTML per i principianti __________________________________________________________ 1 PRIMA DI TUTTO PARLIAMO DI INTERNET______________________________________ 2 QUELLE STRANE SIGLE: TCP/IP, HTTP, FTP _____________________________________ 6 MA COS’È QUESTO HTML? ____________________________________________________ 8 UNO STRUMENTO PER SCRIVERE: “BLOCCO NOTE” ____________________________ 14 PER POTER LAVORARE: PARLIAMO UN PO’ DEL DOS ___________________________ 20 COME È FATTO UN DOCUMENTO HTML? ______________________________________ 22 ARRICCHIRE UN SITO WEB: UNA QUESTIONE DI “STILE” ________________________ 60 RISPETTARE LE REGOLE ____________________________________________________ 65 VERIFICHE DEI CONTENUTI DI ACCESSIBILITA’ IN UN SITO WEB LIVELLO 1__________________ 70 IL CONSORZIO W3 __________________________________________________________ 72 NONSOLOHTML_____________________________________________________________ 74 QUELLO CHE CI SERVE PER UN COLLEGAMENTO A INTERNET __________________ 75 COME SCOVARE LE INFORMAZIONI __________________________________________ 78 ESEMPI E SOLUZIONI________________________________________________________ 82 SOMMARIO HTML per i principianti Pag.85 Report "HTML per i principianti - I siti personali - Libero" Your name Email Reason Description Copyright © 2025 M.MOAM.INFO. All rights reserved. | About Us | Privacy Policy | Terms of Service | Help | Copyright | Contact Us | Cookie Policy Sign In Email Password Remember me Forgot password? Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close