Mettere informazione in rete

Abbiamo ripetuto più volte, nel corso del testo, che uno degli aspetti innovativi di Internet è la facilità con cui è possibile non solo reperire, ma anche immettere informazione. L'utente occasionale della rete tende spesso a limitare questa possibilità ai casi più ovvi: posta elettronica, messaggi a liste e newsgroup. L'universo di World Wide Web è visto invece come puro territorio di navigazione: la sua 'costruzione' è considerata appannaggio di una casta ristretta di 'maghi' del computer, capaci di dominare le esoteriche istruzioni di HTML, il linguaggio utilizzato per creare le pagine colorate ed accattivanti della grande ragnatela mondiale.

Le ragioni per le quali la diffusione di informazioni attraverso WWW è spesso ritenuta fuori dalla portata di un utente ordinario sono fondamentalmente due. Da un lato, HTML è visto come un linguaggio 'informatico' e dunque per definizione complicato: parente stretto di quei linguaggi di programmazione che sono lasciati volentieri alle cure dei professionisti. Dall'altro, per inserire una (o più) pagine su World Wide Web è necessario disporre di spazio macchina su un server collegato permanentemente alla rete. E il termine 'server' tende ad evocare un supercomputer inaccessibile, una macchina circondata da tecnici in camice bianco e lontana anni luce dal personal computer poggiato sulla scrivania di casa.

Come il lettore avrà forse già intuito, entrambi questi pregiudizi sono totalmente infondati. HTML non è un linguaggio di programmazione ma un linguaggio di marcatura, e se i due termini possono suonare egualmente astrusi alle orecchie di un profano, la realtà cui si riferiscono è assai diversa: come vedremo, un linguaggio di marcatura è concettualmente assai vicino alle convenzioni simboliche adottate da un correttore di bozze per 'marcare', ad esempio, porzioni del testo da stampare in corsivo o in grassetto; se vogliamo, le stesse sottolineature che molti di noi utilizzano per evidenziare passi e sezioni del testo che stanno leggendo sono una forma di marcatura. Uno degli obiettivi di questo capitolo è fornire a chiunque voglia 'vedere dentro la scatola', e provare a preparare documenti 'Internet-ready', gli strumenti di base per farlo: con un minimo di pazienza e di curiosità, si tratta di un compito alla portata di tutti.

Quanto ai server, non sono inaccessibili né concettualmente né praticamente; molte delle macchine che sono dietro alle complicate URL della rete sono in tutto analoghe a quelle che abbiamo sulla scrivania - e quand'anche così non fosse, per pubblicare una pagina in rete non c'è alcun bisogno né di possedere, né di saper usare un server: basta disporre di un po' di spazio sul suo disco rigido. Spazio che molti fornitori di connettività saranno felici di affittarci, a prezzi a volte poco più che simbolici.

Insomma: mettere informazioni su World Wide Web è facile, economico e - se possiamo permetterci un'osservazione valutativa - anche 'politically correct': perché si contribuisce a rendere la rete patrimonio collettivo, si allarga l'offerta informativa, e si evita di lasciarla unicamente nelle mani della grande industria e (anche questa è in fondo un po' una casta!) dei 'guru' dell'informatica.

Affittare spazio macchina o realizzare un proprio server?

Supponiamo dunque di aver deciso di compiere il grande passo: o perché abbiamo deciso noi stessi di cimentarci con HTML, o perché, in qualità di responsabili di una ditta, di una associazione, o semplicemente dell'organizzazione di un convegno, desideriamo una 'vetrina' in rete per la nostra offerta informativa (e magari anche per la nostra offerta di beni e servizi). Da dove cominciare?

Una prima decisione che dobbiamo prendere è se affittare spazio macchina da qualcuno, o realizzare in proprio un nostro server. Vediamo di capire esattamente qual è la differenza concettuale (ed economica) fra le due alternative.

Affittare spazio macchina vuol dire, come si è accennato, 'noleggiare' una porzione del disco rigido di una macchina connessa alla rete. Normalmente, si tratterà della macchina di un fornitore di connettività, o di uno dei tanti 'Web space provider' sparsi per la rete. Facciamo un esempio pratico, e supponiamo di voler inserire in rete un insieme di pagine, illustrazioni e informazione varia (magari un file sonoro, o un catalogo di prodotti completo di modulo d'ordine). Queste pagine potranno essere state tranquillamente realizzate da noi (o da uno specialista ingaggiato allo scopo) sul computer di casa o dell'ufficio: come vedremo, gli strumenti per farlo sono alla portata di chiunque. Supponiamo che complessivamente si tratti di 3 Mb di dati (l'equivalente di circa 2 dischetti floppy - vi assicuriamo che c'entra moltissimo materiale!). Per stare larghi, potremmo decidere di affittare 5 o 10 Mb di spazio macchina. Naturalmente, sarà importante che il server che ci ospita sia perennemente collegato alla rete (chi noleggia spazio macchina ha tutto l'interesse a fare del suo meglio per avvicinarsi a questo obiettivo, giacché ne va del suo parco clienti) e sia facilmente accessibile dall'esterno, disponga cioè di linee-dati sufficientemente ampie in rapporto alla quantità di informazione resa disponibile e all'interesse (numero di richieste dall'esterno) che tale informazione suscita. Non ha invece alcuna importanza la sua collocazione fisica: quando affittiamo spazio macchina, ci viene fornito in genere (se così non fosse, sarà bene rivolgersi a un altro fornitore!) un accesso FTP al nostro 'pezzetto' di disco rigido, in modo da poter gestire da casa le nostre pagine. Questo vuol dire che affittare spazio macchina su un server americano non comporta alcuna differenza pratica rispetto al rivolgersi a un fornitore italiano (può anzi rivelarsi più economico, e i server americani, che dispongono spesso di linee più potenti, possono essere più facilmente accessibili dall'esterno). I soli problemi possono essere di immagine, dato che l'indirizzo delle nostre pagine sarà riconducibile a un dominio americano (tipicamente, finirà per '.com') anziché italiano ('.it').

Consulteremo dunque le offerte relative al noleggio spazio macchina di un certo numero di fornitori. Tenete conto che alcuni, oltre a far pagare lo spazio su disco rigido, fanno pagare una certa quota anche per il traffico generato (pagheremo cioè di più, quante più persone 'visitano' il nostro sito). In genere, il pagamento a traffico avviene per scaglioni di 50, 100 o 200 Mb di dati (e costituisce una buona ragione, assieme alla velocità di trasferimento, per tenere 'leggere' le nostre pagine), ma non comporta un aggravio di costi eccessivo - tanto più che corrisponde al nostro 'successo' in rete.

Quanto dobbiamo preventivare di spendere? E' difficile, quasi impossibile fornire cifre esatte. Spesso, un individuo o un'associazione possono inserire un certo numero di pagine non commerciali gratis o a prezzi poco più che simbolici presso il proprio fornitore di connettività, a patto che il traffico generato sia 'normale': in Italia, MC-link, Agorà e Video On Line mettono ad esempio a disposizione un servizio di questo tipo. Se gli scopi non sono commerciali, prezzi assai bassi sono garantiti anche da alcune società americane; Webcom, forse la più utilizzata (http://www.webcom.com), fa pagare ad esempio 9 dollari e 95 al mese uno spazio di 5 Mb e un traffico di 200 Mb mensili - più che adeguato per gli scopi di un'associazione culturale, o per chi volesse inserire in rete pagine di informazioni personali. I prezzi per servizi commerciali sono naturalmente più alti; tuttavia, con una cifra compresa (a seconda della quantità di materiale inserita in rete) fra il milione e i 10 milioni annui si dovrebbe essere in grado di inserire in rete un sito completo, piuttosto elaborato e con un traffico abbastanza sostenuto. I prezzi di un fornitore italiano sono in media più elevati di quelli praticati sul mercato americano, ma il vantaggio di 'trattare' nella nostra lingua (specie se non si ha grande familiarità con l'uso della rete) e di figurare all'esterno come sito italiano possono giustificare la maggiore spesa.

Oltre ad affittare (e riempire) lo spazio macchina, dobbiamo anche decidere con che tipo di indirizzo renderci 'visibili' all'esterno. Normalmente, se il nostro fornitore di spazio Web ha un indirizzo del tipo 'fornitore.it' e la nostra ditta si chiama, poniamo, 'scarpebelle', le nostre pagine saranno raggiungibili all'indirizzo 'www.fornitore.it/scarpebelle'. Non sarebbe più prestigioso un indirizzo del tipo 'www.scarpebelle.it'? Probabilmente sì - e per averlo non serve disporre di un proprio server: bisogna registrare il dominio (in Italia presso il GARR) e collegarvi, con un cosiddetto 'link simbolico', la porzione (directory) di disco rigido assegnataci. Due pratiche delle quali si occuperà volentieri (ma non gratis) il nostro fornitore di spazio Web.

Se affittare spazio macchina è così facile, quand'è che conviene invece realizzare un proprio server? Intuitivamente, in tutti i casi nei quali l'informazione da immettere in rete è veramente molta, e vogliamo controllarla direttamente. Una grande industria, una banca, un ente di ricerca vorranno probabilmente disporre di un server interno per motivi di sicurezza, di prestigio, ma anche e soprattutto di comodità (anche tenendo conto della possibilità di utilizzare tecnologie Internet per collegamenti di rete interni, una tendenza che acquisterà notevole rilievo nel prossimo futuro e che va sotto il nome di Intranet). Tenete conto, comunque, che la realizzazione e la gestione di un server Internet hanno costi ben superiori a quelli, talvolta quasi irrisori, dell'affittare spazio macchina. E questo non tanto per il costo delle macchine, quanto per la necessità di disporre di personale qualificato per configurarle e farle lavorare: un server Internet ha bisogno di un system administrator, e si tratta di competenze che hanno il loro prezzo.

Che tipo di informazione si vuole diffondere

Naturalmente, un fattore importante nella scelta fra affittare spazio macchina e realizzare un proprio server - e anche nella scelta fra realizzare da soli le proprie pagine o affidarsi ad esperti - è rappresentato dal tipo di informazioni che si vogliono diffondere. Vediamo brevemente tre esempi: mettere in rete un sito personale, mettere in rete il sito di una associazione, e vendere beni e servizi attraverso la rete.

Mettere in rete la propria home page

Siamo nel caso più semplice: in genere, un sito personale è per definizione autocostruito (anche perché probabilmente si tratta della realizzazione sulla quale desideriamo avere il controllo più diretto e puntuale), e nessuno penserebbe mai ad acquistare un server per uno scopo di questo tipo. Un sito relativamente semplice, che abbia funzione di autopromozione e di presentazione del proprio lavoro (curriculum, link ai siti connessi con la propria attività e i propri interessi, nel caso di un giornalista free-lance o in casi analoghi qualche esempio dell'attività svolta, qualche foto), occuperà relativamente poco spazio. Spesso, se si lavora presso un ente o una azienda che dispongono di un sito Internet, una pagina di questo tipo potrà essere tranquillamente ospitata (è consuetudine ad esempio che università ed enti di ricerca offrano spazio ai propri dipendenti e collaboratori per la presentazione della loro persona e del loro lavoro); se non troviamo ospitalità 'in casa', potremo rivolgerci ad alcuni siti Internet che ospitano gratuitamente, a scopo promozionale, pagine personali non troppo complesse; una lista la trovate su Yahoo!, alla URL http://www.yahoo.com/Business_and_Economy/Companies/Internet_Services/Web_Presence_
Providers/Free_Web_Pages/
. Altrimenti, come si è detto, l'hosting di pagine personali è offerto a prezzi poco più che simbolici da molti fornitori di connettività.

Realizzazioni più impegnative

Il sito di un'associazione è, nella maggior parte dei casi, un esempio un po' più complesso. Presumibilmente vorremo informare sulla storia e gli scopi dell'associazione, rendere disponibili documenti e materiale vario che ne illustri l'attività (ad esempio verbali e resoconti di riunioni, programmi di incontri e convegni, e magari anche un'edizione elettronica dei relativi atti), l'organigramma delle cariche sociali (e volendo l'elenco dei soci), una pagina di aggiornamenti e notizie sul campo del quale ci si occupa, moduli per comunicare per via telematica il proprio interessamento o la propria adesione. E' poi buona norma di 'netiquette' inserire sempre, in un sito di questo tipo, una pagina di rimandi alle altre risorse reperibili in rete sullo stesso argomento o su argomenti connessi.

La decisione se realizzare autonomamente o far realizzare ad altri le pagine relative a un sito di questo tipo dipenderà in gran parte dalla nostra confidenza con HTML; per una realizzazione più curata, tuttavia, sarà preferibile rivolgersi a degli esperti: tenete presente, infatti, che accanto alla padronanza di HTML la realizzazione di pagine 'professionali' presuppone ormai competenze di impaginazione e grafiche non molto dissimili da quelle richieste per la realizzazione di una rivista a stampa.

Quanto invece alla scelta fra l'affitto di spazio macchina e la realizzazione di un proprio server, in un caso quale quello delineato la prima soluzione rimane la più economica e la meno problematica. Se poi, anziché di un'associazione privata, si trattasse ad esempio di un dipartimento universitario o di un organismo pubblico, la soluzione privilegiata sarebbe probabilmente quella dell'ospitalità interna delle pagine, nel primo caso presso il server dell'università (o della facoltà), e nel secondo presso il server dell'ente di appartenenza o di un ente pubblico connesso.

Vendere beni e servizi attraverso la rete

La realizzazione di una vera e propria impresa commerciale in rete può essere un compito ben più complesso. Ad esempio, potremmo voler interfacciare direttamente il database degli articoli giacenti in magazzino con il catalogo accessibile via Internet (e magari predisporre dei meccanismi automatici di sconto per gli articoli che superassero una certa giacenza), e potremmo voler accettare direttamente ordini attraverso carta di credito, con la conseguente necessità di disporre a livello di server dei protocolli necessari a transazioni sicure (attraverso la crittografazione automatica degli ordinativi). Avremo probabilmente bisogno di un servizio assistenza che possa comunicare via posta elettronica con i clienti, e della garanzia di un controllo totale sui tempi di funzionamento (e di eventuale malfunzionamento) del server. In un caso di questo tipo, la realizzazione di un proprio server avrebbe i suoi vantaggi: si noti che non dovremmo necessariamente installare la macchina presso la nostra sede (con conseguenti, e presumibilmente ingenti, spese di cablaggio), ma potremmo anche optare per l'hosting presso un fornitore di connettività già cablato. In sostanza, anziché affittare un pezzetto di disco rigido, affitteremmo lo spazio in cui installare la nostra macchina, i cavi che la connettono alla rete, e la competenza dei tecnici che la sorvegliano e la fanno funzionare.

Non è detto, comunque, che la vendita di beni e servizi attraverso la rete non possa essere condotta - a costi bassissimi - attraverso il semplice noleggio di spazio macchina: se volessimo limitarci a rendere disponibile un catalogo di prodotti non sterminato, e un modulo di ordinazione, potremmo anche in questo caso ricorrere tranquillamente a un server altrui. Gli spazi che Internet mette a disposizione per i 'negozi personali' sono notevolissimi, e i costi di gestione sono indubbiamente molto, molto più bassi di quelli di un negozio reale.

Costruire una pagina per World Wide Web

Abbiamo detto che costruire una pagina HTML è alla portata di tutti. I prossimi paragrafi costituiscono un breve manuale introduttivo alla realizzazione di pagine da inserire su World Wide Web. Prima di iniziare, sono però necessarie alcune avvertenze preliminari. La costruzione di pagine Web non eccessivamente sofisticate, è, anzi, deve essere, una attività alla portata di chiunque. Basta affrontare con un po' di buona volontà lo studio dei fondamenti del linguaggio HTML, con cui vengono costruiti i documenti multimediali sulla rete.

Naturalmente il discorso è diverso se si intende fornire un vero e proprio servizio informativo, con pagine complesse, ed effetti grafici. In questo caso è necessario avere anche competenze di grafica, oltre ad una conoscenza approfondita di HTML, e magari anche di linguaggi di programmazione come Java. Se si perseguono risultati professionali o editoriali, è dunque meglio rivolgersi ad esperti, oppure formarsi una competenza specialistica nel campo.

Le pagine che seguono forniranno una introduzione iniziale, ma non pensate di imparare HTML così in fretta! Ci sono molte istruzioni delle quali non parleremo, molti punti che andrebbero approfonditi o integrati ed eventualmente corretti. Se intendete perfezionare la vostra conoscenza di queste tecniche dobbiamo quindi rimandarvi ai moltissimi manuali che si trovano sulla rete stessa (in qualche caso anche in italiano), o alle specifiche ufficiali della IETF. Come al solito, piuttosto che lasciare un elenco di indirizzi, vi consigliamo di fare una salto alla pagina Web del catalogo Yahoo! dedicata a World Wide Web. Le voci Authoring, HTML e Information and documentation contengono miriadi di rimandi a questo tipo di risorse.

In alternativa ci sono anche alcuni libri dedicati al tema. Tuttavia si tratta nella maggior parte di traduzioni che arrivano in Italia con un ritardo notevole, e dunque spesso non rispecchiano una situazione che si evolve giorno per giorno.

HTML e i suoi 'dialetti'

Cominciamo richiamando alcune nozioni che abbiamo già introdotto. HTML sta per HyperText Markup Language, ovvero 'linguaggio di marcatura per ipertesti'. In particolare HTML è una particolare applicazione di un potente metalinguaggio orientato alla descrizione di complesse strutture documentali in formato digitale: lo Standard Generalized Markup Language.

Sviluppato per la prima volta nei laboratori del CERN, HTML ha subìto una complicata evoluzione. Questa ha determinato il diffondersi di diverse versioni ufficiali del linguaggio, che coesistono con una serie di estensioni introdotte unilateralmente dalle maggiori aziende produttrici di browser. E di norma le estensioni introdotte dalla Netscape non sono interpretate da Mosaic o da Explorer, e viceversa.

Attualmente la versione ufficiale dello standard è quella denominata HTML 2. Tutti i browser condividono le istruzioni specificate in questo standard ufficiale, e le interpretano in modo coerente.

Tuttavia già prima del rilascio definitivo di questa versione era cominciato il lavoro per la definizione di una versione ancor più estesa, che doveva introdurre una serie di notevoli potenziamenti. In una prima fase questa versione sperimentale fu chiamata HTML +. Quando ci si è resi conto che l'elaborazione stava producendo un vero e proprio salto evolutivo nel linguaggio si decise di far confluire una piccola parte delle innovazioni nella versione 2 del linguaggio (ad esempio i Form interattivi), e di iniziare contestualmente la definizione di una nuova versione, battezzata HTML 3.

HTML 3 si trova tuttora in fase di sviluppo, uno sviluppo in parte stimolato ma in parte senz'altro complicato dalle varie estensioni proprietarie che Netscape e Microsoft hanno introdotto, e continuano ad introdurre. Parte di queste estensioni sono state accolte nelle bozze dello standard. Di conseguenza, anche se HTML 3 ancora non esiste ufficialmente, molti browser sono in grado già ora di interpretare le istruzioni presenti in questa futura terza versione ufficiale del linguaggio. Nel frattempo il lavoro solitario dei produttori di browser, specialmente Netscape, non si è fermato, ed ulteriori istruzioni (come quelle che permettono l'utilizzazione dei cosiddetti frame) sono state introdotte. Tuttavia appare molto difficile che tali istruzioni possano essere tutte accettate nell'ambito della versione 3 ufficiale del W3 Consortium. Viceversa tecniche come i fogli di stile, presenti nello standard, non sembrano interessare molto la Netscape, almeno per ora.

Riassumendo: HTML si presenta attualmente come una lingua ufficiale con tanto di 'vocabolario della Crusca', HTML 2, affiancata da una lingua di fatto, HTML 3, ancora priva di grammatica autorizzata, e da una serie di dialetti, che si parlano in quel di Richmond (Microsoft) o Mountain View, California (Netscape).

Per quanto ci riguarda, le istruzioni che illustreremo sono tutte parte dello standard ufficiale rilasciato dal W3C e dalla IETF, lo HTML 2. Ricordate d'altra parte che le estensioni del linguaggio sono appunto estensioni: un volta capiti i concetti base, il loro apprendimento non dovrebbe presentare eccessive difficoltà.

Gli editor HTML

Prima di immergerci nei misteri di HTML è bene dire che esistono degli strumenti che possono essere molto utili per la creazione di pagine Web. Questi strumenti possono essere divisi in tre categorie.

La prima è quella degli editor specializzati. Si tratta di strumenti di supporto, che permettono di evitare la digitazione di ogni singolo marcatore grazie a pulsanti o menu a tendina. Ma questi strumenti non sono altro che editor ASCII, un po' particolari. Una volta immesso il tag, eventuali correzioni vanno comunque fatte a mano. Non c'è dubbio comunque che programmi di questo tipo facilitano notevolmente la realizzazione di pagine Web, specialmente per i più esperti. Allo stato i migliori esemplari di questa categoria di programmi sono HotDog e il Kenn Nesbitt's WebEdit per l'ambiente Windows, entrambi shareware; AsWedit, invece, è un ottimo editor freeware per i sistemi X-Window (gira perfettamente su Linux, il sistema Unix per computer con processori Intel distribuito gratuitamente su Internet). Su Macintosh viene molto usato un editor programmabile denominato Bbedit. La maggior parte di questi strumenti viene distribuita con varie formule su Internet. Un elenco molto completo è quello disponibile attraverso il catalogo Web di Yahoo! che già conosciamo.

Sicuramente più amichevoli nell'uso sono i fogli di stile con macro-istruzioni per i due wordprocessor più diffusi sul mercato: WordPerfect e Microsoft Word (uno veramente ottimo, Internet Assistant, lo ha rilasciato gratuitamente la Microsoft stessa; funziona solo con la versione 7 di Word). Con questi strumenti la costruzione di una pagina avviene utilizzando i normali comandi del wordprocessor, e poi la pagina viene tradotta da un convertitore. In realtà le cose non sempre filano lisce, anche perché non tutti i comandi e le istruzioni HTML (specialmente quelle che producono complessi effetti di composizione) vengono supportati. Comunque, se si usano normalmente WinWord o WordPerfect, i convertitori integrati sono probabilmente i migliori strumenti a disposizione dei neofiti (e non solo) per realizzare velocemente pagine Web.

Infine stanno facendo la loro comparsa proprio in questi mesi i primi editor HTML nativi con modalità WYSIWYG. Il primo programma di questo tipo per piattaforma Windows è Netscape Navigator Gold, la cui prima versione ufficiale (dopo alcune release sperimentali) è uscita a fine marzo 1996. Per ora, Netscape Navigator Gold ha ancora alcuni limiti nella gestione del linguaggio, che potranno essere auspicabilmente superati nell'annunciata versione Atlas Gold. Ma le premesse sono veramente ottime: realizzare pagine Web con Netscape Gold è altrettanto facile che realizzare un documento impaginato e graficamente complesso con un wordprocessor dell'ultima generazione. Anche la Adobe ha annunciato il rilascio di un editor con capacità simili, mentre, ad un livello certamente superiore, sulle workstation Silicon Graphics della classe WebForce da tempo ne è disponibile uno, naturalmente basato sul sistema Unix X-Window.

Alcuni concetti di base

HTML è un linguaggio 'di marcatura': un linguaggio cioè composto di istruzioni (che definiamo tag o marcatori) che vanno inserite all'interno di un testo. Tali istruzioni informeranno il browser, ad esempio, su quale parte del testo sia un titolo, quale parte vada interpretata come un link ipertestuale a un'altra pagina Web (o a un'altra sezione della stessa pagina), in che punto della pagina vadano visualizzate le immagini (e quali immagini occorra visualizzare), e così via. In termini tecnici i marcatori descrivono gli elementi di cui un documento è composto.

Sia il testo sia i marcatori vengono memorizzati in formato ASCII. Un documento HTML è dunque un unico file ASCII che includerà sia il contenuto che vogliamo far visualizzare al browser, sia le istruzioni HTML usate per spiegare al programma come visualizzare quel contenuto. Per distinguere queste ultime dal contenuto testuale vero e proprio si usa un particolare artificio sintattico: ogni marcatore deve essere racchiuso fra parentesi acute, in questo modo:

<marcatore>

Ci sono due tipi di elementi nel linguaggio HTML. Il primo tipo assegna ad una data stringa o blocco di testo una particolare funzione. E' un po' come se si dichiarasse: questo è un titolo, questo è un paragrafo, questo è un link, e così via. Gli elementi di questo tipo vengono rappresentati con due marcatori: un marcatore all'inizio della stringa o del blocco di testo a cui ci si riferisce, ed uno alla fine. Il marcatore finale è uguale a quello iniziale, salvo che per la parentesi acuta aperta:

<marcatore>testo a cui si riferisce il marcatore</marcatore>

In alcuni casi il marcatore finale può essere omesso, poiché il contesto permette di dedurre automaticamente la fine di un certo elemento. Ad esempio un paragrafo finisce sicuramente dove inizia un altro paragrafo, o un altro elemento di livello pari o superiore.

Gli elementi del secondo tipo, invece, non si riferiscono ad un blocco di testo, bensì descrivono delle operazioni che il browser deve effettuare: ad esempio inserire una immagine, o disegnare una linea, o ancora saltare una riga. Questi elementi, ovviamente, vengono rappresentati da un solo marcatore.

Gli elementi sono le istruzioni fondamentali del linguaggio HTML. Ma naturalmente gli elementi non bastano. Serve anche un modo per caratterizzare un certo elemento; ad esempio: non è sufficiente dire "questo è un link", ma occorre anche specificare la destinazione di quel link. O ancora, potremmo voler dire "questo titolo deve essere centrato", "questa riga deve avere un dato spessore". Queste operazioni in HTML vengono effettuate tramite gli attributi degli elementi. Un attributo specifica appunto le caratteristiche di un certo elemento. Per utilizzare un attributo basta inserire dentro il marcatore il nome, seguito dal segno di uguale e dal valore (nel caso degli elementi 'pieni', questa operazione va fatta solo nel marcatore di apertura):

<marcatore nomeattributo=valore>

Un elemento può avere anche molteplici attributi, ognuno con un suo valore. Il valore degli attributi può essere contenuto tra apici. Questi sono obbligatori solo se il valore contiene degli spazi bianchi, ma è consigliabile utilizzarli sempre.

Un ultimo aspetto preliminare che occorre conoscere per la creazione di documenti in HTML riguarda le lettere accentate e i caratteri speciali. Tutti i browser Web con interfacce grafiche sono perfettamente in grado di visualizzarli. Ma, per essere trasmessa e ricevuta correttamente da qualunque server e client, su qualsiasi piattaforma essi si trovino, una pagina HTML dovrebbe limitarsi sempre a usare solo la codifica ASCII standard, che non contiene nessuna delle lettere accentate.

I linguaggi SGML, come HTML, forniscono uno strumento sintattico che permette di superare questa difficoltà: le entità carattere. Una entità è sostanzialmente una sequenza di caratteri ASCII standard che rappresenta un carattere non presente in quell'insieme. Per identificare queste entità si usano due caratteri delimitatori all'inizio ed alla fine: la e commerciale (&), e il punto e virgola (;). Tra questi due delimitatori possono occorrere un numero qualsiasi di caratteri. In allegato alle specifiche dello HTML sono state distribuite due liste ufficiali di entità per i caratteri degli alfabeti latini e per i caratteri speciali. I nomi delle entità per i caratteri sono stati creati con un artificio molto semplice e comodo da ricordare: il carattere stesso, a cui si aggiungono le stringhe "grave" per indicare la versione con accento grave, "acute" per indicare la versione con accento acuto, "uml" per indicare la versione con Umlaut, e così via. La distinzione tra maiuscolo e minuscolo è rilevante.

Ecco la lista delle entità per i caratteri accentati dell'ortografia italiana:

À &Agrave;
à &agrave;
È &Egrave;
è &egrave;
É &Eacute;
é &eacute;
Ì &Igrave;
ì &igrave;
Ò &Ograve;
ò &ograve;
Ù &Ugrave;
ù &ugrave;

Per fare in modo che una pagina Web venga visualizzata correttamente da qualsiasi client è dunque necessario sostituire le lettere accentate con le corrispondenti entità carattere. Quando le scrivete non dimenticate il punto e virgola: indica al browser dove finisce la sequenza di controllo.

I migliori editor HTML hanno dei meccanismi di traduzione automatica da carattere esteso a entità. In caso contrario la cosa più comoda è scrivere il testo normalmente e poi operare le sostituzioni con la funzione 'search and replace' presente in tutti gli editor e i wordprocessor degni di questo nome; volendo, ci si potrà creare una apposita macro.

Gli elementi principali di un documento Web

Dopo aver visto i concetti di base che sono sottesi alla codifica HTML, vediamo alcuni degli elementi fondamentali che servono a realizzare una semplice pagina Web.

In primo luogo ogni documento HTML ha una macrostruttura. Il primo elemento di questa macrostruttura serve ad identificare un file HTML come tale: una specie di meta-elemento. Il marcatore corrispondente è

<HTML>...</HTML>

A sua volta l'elemento <HTML> contiene due elementi: una intestazione, seguita dal corpo vero e proprio del documento. L'intestazione viene codificata con il marcatore:

<HEAD>...</HEAD>

All'interno della intestazione del documento può essere inserito il marcatore che dà un titolo alla pagina. Questo titolo non farà parte della pagina: si tratta del titolo che compare nella barra superiore della finestra del browser, e che viene automaticamente inserito nella lista dei segnalibri se qualcuno, conquistato dalla vostra creatività, vorrà aggiungervi la pagina da voi realizzata. Per questo va scelto con una certa oculatezza: né tanto lungo da non entrare nella barra e nel menu dei segnalibri, né tanto corto da essere incomprensibile. Il comando relativo è

<TITLE>...</TITLE>

Il corpo del documento viene identificato dal marcatore

<BODY>...</BODY>

Tra questi due marcatori va inserito il testo del documento HTML che si intende pubblicare, con annessi tutti gli altri marcatori con i quali si vorrà descriverne la struttura e la forma.

Per proseguire in questa nostra introduzione, ed evitare di essere troppo astratti, realizzeremo una piccola pagina Web. Si tratta di un breve elenco di risorse dedicate alle Scienze umane su Internet, elenco che un immaginario letterato italiano vuole mettere in rete, per aiutare i suoi colleghi navigatori.

Ecco il nostro testo, a cui abbiamo già aggiunto gli elementi della macrostruttura appena visti:

<HTML>
<HEAD>
<TITLE>Le Scienze Umane su internet</TITLE>
<HEAD>
<BODY>
Scienze Umane su Internet
Le risorse e servizi per le scienze umane su Internet
Su Internet esistono ormai molti server che forniscono risorse e servizi dedicati al mondo delle scienze umane in generale e della letteratura in particolare.
L'elenco che segue, senza pretendere di essere esaustivo, presenta alcuni tra i maggiori nodi raggiungibili via Internet con una breve nota descrittiva. Esso verrà aggiornato periodicamente in base alle conoscenze dei responsabili di queste pagine.
Segnalazioni e consigli, che vivamente sollecitiamo, possono essere inviati a Fabio Ciotti.
I centri di ricerca
Text Encoding Initiative Home Page, il sito di riferimento per la TEI
The SGML Web Page, la SGML Web Page di Robin Coover presso il SIL, una miniera
CETH Home Page, uno dei maggiori centri di ricerca dedicato all'Informatica Umanistica
Le biblioteche virtuali
The On-line Books Page
Electronic Texts Center - University of Virginia
Humanities Text Initiative, l'archivio testuale della University of Michigan
Project Gutenberg Home Page, la home page del più famoso archivio di testi elettronici
Progetto Manuzio: una biblioteca elettronica per la letteratura italiana promossa dall'Associazione Liber Liber
Le riviste scientifiche
Network-Based Electronic Publishing of Scholarly Works: A Selective Bibliography
The Stanford Electronic Humanities Review, versione elettronica della prestigiosa rivista dell'Università di Stanford
</BODY>
</HTML>

Il titolo, abbiamo detto, viene visualizzato sulla barra superiore della finestra del browser, ma non all'interno della pagina.

Naturalmente è possibile visualizzare uno o più titoli anche all'interno della pagina. Questi titoli vengono normalmente visualizzati dal browser con un carattere di dimensioni maggiori del normale.

Per indicare che una data frase svolge la funzione di titolo, va usato il marcatore

<H1>...</H1>

che indica appunto un Heading, cioè un titolo interno al documento, di primo livello: il più importante, e dunque anche quello che il browser enfatizzerà maggiormente in sede di visualizzazione. La prima riga del nostro testo diventerà dunque:

<H1>Scienze Umane su Internet</H1>

HTML mette a disposizione 6 livelli di titoli interni numerati da 1 a 6. Così, l'istruzione <H1>...</H1>, indica, come nel caso appena visto, l'inizio di un titolo di primo livello (il titolo di capitolo, per fare un parallelo con la stampa); <H2>...</H2> indica un titolo di secondo livello (potrebbe essere, ad esempio, il titolo di un paragrafo), e così via. Gi ultimi due livelli di titolo vengono generalmente resi dai browser con caratteri più piccoli rispetto al normale, e possono essere utilizzati per delle note alla fine della pagina.

Tornando al nostro esempio, possiamo utilizzare un titolo di secondo livello per marcare il sottotitolo della pagina:

<H2>Le risorse e servizi per le scienze umane su Internet</H2>

Potremmo poi usare titoli di terzo livello per indicare le intestazioni delle tre categorie di risorse elencate nella pagina:

<H3>I centri di ricerca</H3>
[...]
<H3>
Le biblioteche virtuali</H3>
[...]
<H3>
Le riviste scientifiche</H3>
[...]

Occorre fare attenzione a chiudere ogni titolo che viene aperto, e ad usare lo stesso marcatore di titolo al momento di aprirlo e al momento di chiuderlo (così, un titolo di secondo livello aperto con <H2> va ovviamente chiuso con </H2> e non con </H3>).

Tutti i marcatori per i titoli interni (come del resto quelli per i paragrafi) supportano un attributo che permette di specificare l'allineamento del testo rispetto al margine quando viene visualizzato. Il nome dell'attributo è ALIGN, e i valori possibili, che specificano il tipo di allineamento, sono:

  • center
  • left
  • right

Ad esempio:

<H1 align=center>Scienze Umane su Internet</H1>

centrerà il titolo della pagina che stiamo realizzando.

Insieme ai titoli, in un documento c'è naturalmente anche il testo normale. Nella stampa il testo viene diviso in blocchi, i capoversi, che gli anglosassoni chiamano paragrafi. Questa segmentazione serve a dividere il testo in unità concettuali, ed aumenta la leggibilità. Anche un documento HTML può essere diviso in capoversi, attraverso un apposito marcatore. Il browser, infatti, non riconosce gli 'a capo' inseriti dal nostro editor o dal nostro word processor. Il marcatore in questione è

<P>

Il paragrafo sarebbe un elemento pieno, ma poiché la sua fine è identificabile automaticamente (finisce quando comincia un nuovo paragrafo!) si può omettere il marcatore di chiusura (le più recenti indicazioni del W3C suggerisocno invece di chiudere il capoverso con </P>, N.d.A.).

L'effetto pratico di questa istruzione è quello di inserire due salti linea nel flusso del testo a video. Si noti che dopo un titolo il browser va a capo automaticamente: l'istruzione <P> in questo caso ha l'effetto di separare ulteriormente il titolo dal testo: se vogliamo un titolo ben staccato dal testo la metteremo, altrimenti no.

Oltre al marcatore <P>, che identifica un vero e proprio elemento del testo, c'è anche una istruzione di puro e semplice salto linea:

<BR>

Questa istruzione fa saltare il testo all'inizio della riga successiva. Si possono anche usare molti marcatori <BR> in sequenza per creare delle spaziature verticali.

Oltre ai normali capoversi, in un testo possono comparire anche elenchi ordinati di voci, o liste. Le liste possono essere numerate (ad ogni 'voce' o paragrafo della lista è assegnato un numero progressivo) o non numerate (ogni voce o paragrafo della lista è preceduto da una pallina). HTML consente di specificare degli elementi lista. Le liste non numerate vanno realizzate con il marcatore

<UL>...</UL>

Il marcatore <UL> (che può essere ricordato come abbreviazione di Unordered List) va posto all'inizio della lista, che va chiusa con </UL> alla fine. Ad ogni voce della lista va premessa l'istruzione

<LI>

Le liste numerate si costruiscono nello stesso modo, ma l'istruzione di apertura è <OL> (Ordered List) e quella di chiusura è </OL>. All'interno, le solite <LI> (che compaiono dunque solo all'interno di una coppia di istruzioni <UL> e </UL> o <OL> e </OL>). Si noti che alla fine di una voce di lista <LI> il browser capisce che deve andare a capo perché subito dopo segue o un'altra istruzione <LI>, o l'istruzione di chiusura della lista.

Così, ad esempio

<OL>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</OL>

produce la visualizzazione di

  1. Prima voce
  2. Seconda voce
  3. Terza voce

mentre

<UL>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</UL>

produrrà

  • Prima voce
  • Seconda voce
  • Terza voce

Nel testo scelto come esempio, useremo le liste (non numerate) per 'scandire' i diversi siti ai quali fa riferimento la pagina:

<H3>I centri di ricerca</H3>
<UL>
<LI>Text Encoding Initiative Home Page, il sito di
    riferimento per la TEI
<LI>The SGML Web Page, la SGML Web Page di Robin Coover
    presso il SIL, una miniera
<LI>CETH Home Page, un dei maggiori centri di ricerca
    dedicato all'Informatica Umanistica
</UL>

Molto spesso è necessario evidenziare dei segmenti testuali per portarli con maggiore enfasi all'attenzione del lettore. Per fare questo nella stampa tradizionale, e di conseguenza nei word processor, si usano i cosiddetti stili di carattere: corsivo, grassetto, sottolineato. HTML dispone di due tipi di stili di carattere: stili logici e stili fisici. I primi sostanzialmente permettono di specificare quale sia la funzione 'logica' di una data sequenza di caratteri, mentre i secondi servono piuttosto ad indicare come tale sequenza vada resa tipograficamente (o a video). I principali marcatori per gli stili logici sono i seguenti:

Stili logici

<STRONG>...</STRONG> Testo molto rilevante. Viene reso di norma in grassetto
<EM>...</EM> Testo enfatizzato. Viene reso di norma in corsivo
<CITE>...</CITE> Testo citato. Viene reso di norma in corsivo
<SAMP>...</SAMP> Esempio. Non esiste per ora un particolare standard di visualizzazione
<ADDRESS>...</ADDRESS> Indirizzo. Viene reso in grassetto con un carattere piccolo, oppure impaginato a sinistra.

Ecco invece i marcatori più noti per gli stili fisici:

Stili fisici

<B>...</B> grassetto
<U>...</U> sottolineato
<I>...</I> italico
<BIG>...</BIG> carattere più grande
<SMALL>...</SMALL> carattere più piccolo

Gli 'stili logici' sono considerati preferibili rispetto agli 'stili fisici' perché sono indipendenti dalla 'materia scritta' e rispondono dunque meglio alla filosofia di base, propria di un linguaggio di marcatura 'logico' come SGML, di indipendenza dallo strumento di visualizzazione contingentemente usato. Ad esempio,

<STRONG>Testo da enfatizzare</STRONG>

produce in genere un testo in grassetto, ma potrebbe produrre su browser diversi un testo enfatizzato in modi diversi (ad esempio in grassetto italico, o in reverse, o colorato in rosso...). Ma, in linea di principio, un'istruzione <STRONG> potrebbe essere usata anche per spiegare ad un sintetizzatore vocale di leggere le pagine utilizzando un volume più alto o una determinata inflessione di voce.

Una precisazione ulteriore va data per lo stile sottolineato. La sottolineatura è in genere utilizzata dai browser per segnalare visivamente il testo 'attivo' attraverso il quale, agendo col mouse, si può seguire un legame ipertestuale. Il testo attivo è marcato in genere anche da un colore particolare, ma qualcuno potrebbe non avere il monitor a colori. Di conseguenza è sempre meglio evitare il sottolineato, perché potrebbe indurre in confusione i lettori. Inoltre non è più riconosciuto dalle versioni più recenti dei browser.

Chiudiamo la nostra descrizione dei comandi più utilizzati per strutturare e formattare il testo presentando due marcatori che influenzano la visualizzazione.

Il primo serve a inserire una linea separatrice fra paragrafi. Si tratta di un'istruzione 'secca' che ha la forma <HR>. Per evitare che la linea separatrice sia troppo attaccata al testo è in genere preferibile farla precedere e seguire da un'istruzione <P>.

Il secondo invece permette di allineare al centro intere sezioni del documento: <CENTER>, che va inserito nel punto in cui inizia il blocco di testo da centrare, e </CENTER>, che va inserito alla fine. Va notato comunque che l'indicazione della centratura di porzioni di testo attraverso l'uso dell'attributo 'ALIGN' nel tag relativo al titolo o al paragrafo (es.: <P ALIGN=center>...</P>) è stilisticamente preferibile all'uso del marcatore <CENTER> ed è riconosciuto da un numero maggiore di browser.

Vediamo dunque come la nostra pagina si è trasformata dopo avere inserito tutti gli elementi che abbiamo descritto in questo paragrafo. Notate che abbiamo anche tradotto i caratteri accentati nelle corrispettive entità carattere SGML.

<HTML>
<HEAD><TITLE>Le Scienze Umane su Internet</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Scienze Umane on-line</H1>
<H3 ALIGN="center">Le risorse e servizi per le scienze umane su Internet</H3>
<P>Su Internet esistono ormai molti <EM>server</EM> che forniscono risorse e servizi dedicati al mondo delle scienze umane in generale e della letteratura in particolare.
<P>L'elenco che segue, senza pretendere di essere esaustivo, presenta alcuni tra i maggiori nodi raggiungibili via Internet con una breve nota descrittiva. Esso verr&agrave; aggiornato periodicamente in base alle conoscenze dei responsabili di queste pagine.
<P>Segnalazioni e consigli, che vivamente sollecitiamo, possono essere inviati a Fabio Ciotti.
<HR>
<H3>I centri di ricerca</H3>
<UL>
<LI>Text Encoding Initiative Home Page, il sito di riferimento per la <EM>TEI</EM>
<LI>The SGML Web Page, la SGML Web Page di Robin Coover presso il SIL, una miniera
<LI>CETH Home Page, uno dei maggiori centri di ricerca dedicato all'Informatica Umanistica
</UL>
<H3>Le biblioteche virtuali</H3>
<UL>
<LI>The On-line Books Page
<LI>Electronic Texts Center - University of Virginia
<LI>Humanities Text Initiative, l'archivio testuale della University of Michigan
<LI>Project Gutenberg Home Page, la home page del pi&ugrave; famoso archivio di testi elettronici
<LI>Progetto Manuzio: una biblioteca elettronica per la letteratura italiana promossa dall'Associazione <STRONG>Liber Liber</STRONG>
</UL>
<H3>Le riviste scientifiche</H3>
<UL>
<LI>Network-Based Electronic Publishing of Scholarly Works: A Selective Bibliography
<LI><EM>The Stanford Electronic Humanities Review</EM>, versione elettronica della prestigiosa rivista dell'<STRONG>Universit&agrave; di Stanford</STRONG>.
</UL>
</BODY>
</HTML>

Sfondi e dimensionamento dei caratteri

Prima di vedere come si inseriscono i link e le immagini in un pagina Web, esaminiamo alcune istruzioni che permettono di ottenere un controllo maggiore sull'aspetto della pagina Web. Si tratta di comandi non inclusi nello standard HTML 2, e dunque non necessariamente riconosciuti da tutti i browser.

Il primo gruppo di istruzioni comprende gli attributi che possono essere aggiunti al marcatore <BODY> per inserire un colore o una immagine nello sfondo della pagina, e per assegnare un colore al testo della pagina. Il primo ha la forma

BACKGROUND= "URL o path locale di un file grafico"

ed ha la funzione di specificare una immagine di sfondo per la pagina. L'immagine viene automaticamente affiancata fino a coprire tutto lo sfondo.

In alternativa si può usare l'attributo

BGCOLOR="#colore identificato con il suo numero RGB in notazione esadecimale"

che permette di assegnare un colore allo sfondo. Notate che per indicare il colore occorre utilizzare il sistema RGB in notazione esadecimale. RGB sta per RED GREEN BLUE, i tre colori fondamentali. Come è noto, miscelando in diversa quantità questi tre colori è possibile ottenere tutti i colori dello spettro. Lo stesso meccanismo è utilizzato per rappresentare i colori in modo digitale: ogni colore viene individuato attraverso la quantità di ogni fondamentale che contiene. Per indicare questa quantità si usa un indice numerico: variando gli indici si possono ottenere i vari colori. Per motivi strettamente informatici gli indici RGB vengono scritti in notazione numerica esadecimale (una notazione che ha base 16, e utilizza le nove cifre della notazione decimale più le lettere fino a F). Ad esempio il bianco, il cui indice è '255255255', viene scritto 'FFFFFF'. Per sapere quale indice esadecimale corrisponde ad un dato colore è necessario usare dei programmi di grafica, ma gli editor HTML più evoluti hanno tutti un sistema visuale per la scelta del colore. Rimane da dire che nel caso di alcuni colori è possibile usare anche i nomi per esteso:

  • Aqua (Celestino)
  • Black
  • Blue
  • Fuchsia
  • Gray
  • Green
  • Lime (Verde Chiaro)
  • Maroon
  • Navy (Blu Mare)
  • Olive (Verde oliva)
  • Purple
  • Red
  • Silver (Grigio Chiaro)
  • Teal
  • White
  • Yellow

La medesima notazione va usata con gli attributi che danno il controllo del colore del testo normale e dei link:

  • TEXT="#RGB: indica il colore del testo per tutto il documento"
  • LINK="#RGB: indica il colore dei link"
  • VLINK="#RGB: indica il colore dei link già attivati"
  • ALINK="# RGB: indica il colore dei link mentre si attivano con il mouse"

Ad esempio la seguente istruzione, che inseriremo nella nostra pagina di esempio, produce una pagina con lo sfondo giallo, il testo blu scuro, i link da attivare in rosso e i link attivati in rosso mattone:

<BODY BGCOLOR="#FFFF80" TEXT="Navy" LINK="Red" VLINK="#800000">

Occorre prestare molta attenzione nella scelta dei colori o delle immagini di sfondo e dei colori del testo: c'è infatti il rischio di rendere la pagina illeggibile. Va dunque data la preferenza al massimo contrasto possibile tra le tonalità di colore, e vanno evitate immagini di sfondo con linee molto accentuate, poiché si confondono con i caratteri del testo. Un altro consiglio di stile relativo alle immagini di sfondo riguarda naturalmente la dimensione: evitate di scegliere per lo sfondo immagini troppo 'pesanti' (che cioè occupano troppa memoria): intasano inutilmente la rete, e rallentano la visualizzazione della pagina.

Il secondo gruppo di istruzioni che analizziamo in questo paragrafo è stato introdotto da Netscape (Mosaic infatti, più conforme allo standard ufficiale, non le riconosce) e permette di controllare la dimensione del carattere nella pagina. Abbiamo già visto che gli elementi per i titoli provocano un cambiamento di dimensione del font nella visualizzazione. Le istruzioni che elenchiamo ora danno però la possibilità di avere un controllo molto più raffinato della dimensione del carattere, e permettono di ottenere effetti grafici molto particolari. Naturalmente questi marcatori contravvengono a tutti i principi del markup funzionale... ma l'occhio vuole la sua parte!

La dimensione del carattere in un documento HTML può essere espressa in termini assoluti o relativi. Nel primo caso si usa il seguente marcatore:

<FONT size="indice">Testo...</FONT>

L'indice è un numero da 1 a 7. La dimensione normale del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale. La dimensione normale, espressa in termini assoluti, può essere modificata con il seguente marcatore inserito subito dopo l'istruzione <BODY>:

<BASEFONT size="indice">

Questa istruzione ha effetto su tutto il documento e naturalmente influisce sulle eventuali direttive di font relative.

Per esprimere la dimensione del font in termini relativi invece si usa la seguente scrittura:

<FONT size="+/-indice">Testo...</FONT>

Anche in questo caso l'indice può variare da 1 a 7. Il valore di riferimento rispetto a cui la dimensione può variare è la dimensione del carattere normale. Miscelando queste varie direttive è possibile ottenere effetti come questo:

<FONT SIZE="+7">C</FONT><FONT SIZE="+4">I</FONT><FONT SIZE="+2">A</FONT>O

figura 78
figura 78: L'effetto dei tag <FONT SIZE="+n">

Inserire dei link

HTML è un linguaggio che fondamentalmente ha la funzione di creare ipertesti distribuiti sulla rete Internet. È dunque naturale che preveda un marcatore capace di definire i link ipertestuali, e le loro destinazioni. I link in una pagina Web sono aree attive del testo (ma eventualmente anche un'immagine o, con procedimenti più complessi dei quali non ci occuperemo in questa sede, aree all'interno di un'immagine) che ci permettono, con un click, di saltare al documento collegato.

La prima cosa che occorre decidere è dunque quale parte del testo si vuole rendere attiva, e poi inserire il marcatore per definirla come link. La sintassi di questa istruzione è la seguente:

<A HREF="URL del documento di destinazione">testo attivo</A>

A sta per anchor, ancora in inglese. Il valore dell'attributo HREF deve contenere la URL completa del documento di destinazione. Ricordate, vanno indicate sia la parola chiave sia l'indirizzo e il path del file attraverso la sintassi:

tipo server://nome.host/pathname.file

Ad esempio prendiamo il riferimento al Progetto Manuzio presente nella nostra pagina di esempio, e costruiamo un link alla pagina che contiene il catalogo della biblioteca virtuale. La relativa URL è:

http://www.liberliber.it/biblioteca/index.htm

Scegliamo di trasformare le parole 'Progetto Manuzio' in bottoni del link:

<A HREF="http://www.liberliber.it/biblioteca
/index.htm">Progetto Manuzio</A>: una biblioteca elettronica per la letteratura italiana promossa dall'Associazione <STRONG>Liber Liber</STRONG>

Il marcatore <A> permette anche di definire eventuali punti di destinazioni di un link all'interno di una certa pagina. La sintassi è la seguente.

<A NAME="identificatore">testo che ha la funzione di bersaglio</A>

L'identificatore può essere una qualsiasi stringa alfanumerica. Per indicare una destinazione interna ad una pagina è sufficiente aggiungere nel valore dell'attributo HREF, subito dopo la URL della pagina, il simbolo # seguito dall'identificatore del punto di destinazione.

<A HREF="URL#identificatore">testo attivo</A>

Oltre che definire link tra documenti di World Wide Web, è anche possibile permettere ai futuri visitatori della nostra pagina di inviarci dei messaggi di posta elettronica. Il meccanismo è sempre uguale, ma si userà una URL particolare:

mailto:utente@nome.host

Ad esempio nella nostra pagina di prova possiamo collegare questa possibilità alla stringa 'Fabio Ciotti' nella frase "Segnalazioni e consigli, che vivamente sollecitiamo, possono essere inviati a Fabio Ciotti". Otterremo dunque:

Segnalazioni e consigli, che vivamente sollecitiamo, possono essere inviati a <A HREF="mailto:ciotti@axrma.uniroma1.it">Fabio Ciotti</A>.

Una volta visualizzata la pagina, la stringa risulterà attiva. Facendoci 'click' sopra, il browser aprirà una finestra con un editor per scrivere il messaggio e un bottone per spedirlo. Il messaggio arriverà automaticamente all'indirizzo di posta elettronica del destinatario.

Chiudiamo questo paragrafo con un consiglio per facilitare l'inserimento di URL corrette nelle pagine che state realizzando. La migliore strategia è questa: usando il vostro browser visitate i siti ai quali vi interessa inserire rimandi nella pagina HTML che state preparando. Aggiungeteli alla lista dei bookmark. Nel gestire la lista dei bookmark, la maggior parte dei browser crea un file HTML con i link già preparati. Ad esempio, se usate Netscape questo file generato automaticamente dal programma si chiamerà bookmark.htm, e lo troverete di norma nella directory da cui lanciate Netscape. Fate una copia di questo file chiamandola, ad esempio, links.htm: potrete costruire la vostra pagina partendo da lì, con i link già pronti, oppure lavorare tagliando e incollando all'interno dell'editor o del word processor che usate.

Incorporare immagini e informazioni multimediali

World Wide Web è un sistema di pubblicazione multimediale. Questo significa che è possibile inserire in un documento anche informazioni non testuali. Tuttavia il grado di integrazione di queste informazioni varia in base al loro tipo.

I browser Web possono gestire direttamente alcuni formati di file grafici. Conseguentemente HTML prevede degli elementi specializzati che permettono di segnalare l'inserimento di immagini all'interno della pagina.

Il marcatore che svolge questa funzione ha la seguente sintassi:

<IMG SRC="pathname o URL file grafico">

Questo elemento non ha ovviamente bisogno di un marcatore di chiusura (non marca una zona di testo, ma segnala solo la posizione in cui inserire una immagine). Il valore dell'attributo SRC può essere o il pathname (nome del file, preceduto dal percorso completo per arrivarvi, 'navigando' all'interno delle directory del disco rigido) del file grafico, se questo è presente nello stesso computer del file HTML, o la URL corrispondente a un file grafico contenuto in un qualsiasi host di Internet.

Normalmente tutti i file che compongono una pagina Web risiedono nel disco rigido della medesima macchina. Il pathname del file grafico va espresso in relazione alla collocazione del file HTML. Se, ad esempio, entrambi sono collocati nella stessa directory, basterà specificare come valore di SRC solo il nome del file (è consigliabile, specialmente per i meno esperti, fare in questo modo per evitare spiacevoli sorprese); altrimenti si dovranno specificare anche i nomi delle directory (cartelle nel mondo Macintosh) in modo relativo a quella in cui si trova il file HTML, separati dalla barra (/). Ad esempio, se il file HTML si trova nella directory 'testi' e le immagini in una directory 'immagini' allo stesso livello, il path sarà '../immagini/file.gif'.

È anche possibile dare un pathname assoluto, iniziando il percorso dalla directory radice. Tuttavia in questo caso occorre avere cura, in fase di preparazione delle pagine, di 'simulare' la stessa struttura di directory che si troverà sull'host destinato ad ospitarle definitivamente. Notate peraltro che il server HTTP ha una sua directory radice, generalmente diversa da quella del file system per motivi di sicurezza. Le stesse regole di indirizzamento dei file valgono anche nella costruzione di riferimenti ipertestuali tra documenti residenti sullo stesso host.

L'effetto prodotto dal marcatore <IMG> è quello di far inserire al browser l'immagine specificata dall'attributo SRC (source) nel punto esatto del documento in cui deve essere inserito. È possibile ottenere degli effetti di impaginazione usando l'attributo ALIGN associato al marcatore. I principali valori di questo attributo, e i loro effetti sulla visualizzazione, sono i seguenti:

left allinea l'immagine al margine sinistro della pagina facendo scorrere il testo intorno
right come sopra, al margine destro
middle allinea il testo prima e dopo l'immagine all'asse mediano dell'immagine
top come sopra, al lato superiore dell'immagine
bottom come sopra, al lato inferiore

Questi valori sono interpretati da quasi tutti i browser, sebbene siano stati introdotti da Netscape. Nella nostra pagina di esempio, potremmo inserire un logo decorativo tra il titolo e il sottotitolo. Il nome del file di immagine è 'human.gif':

<H1 ALIGN="center">Scienze Umane on-line</H1>
<CENTER><IMG SRC="human.gif"></CENTER>
<H3 ALIGN="center">Le risorse e servizi per le scienze umane su Internet</H3>

Notate che abbiamo incluso il marcatore <IMG> all'interno di una istruzione <CENTER>, per centrare l'immagine come il testo che la precede e segue.

I formati di file per le immagini debbono ovviamente essere scelti tra quelli riconosciuti dai browser Web. Per il momento i formati leggibili da quasi tutti i browser sono i seguenti:

  • GIF
  • JPEG
  • HDF
  • XBM
  • XPM

Tenete presente, comunque, che il formato più usato è GIF, seguito a ruota da JPEG, più conveniente in termini di compressione, ma lievemente meno preciso nella visualizzazione. XBM e XPM sono invece i formati bitmap in ambiente X-Window, usati spesso per le icone standard presenti nelle pagine che mostrano il contenuto di directory.

Siccome le immagini occupano molto spazio (si tratta cioè in genere di file piuttosto 'corposi'), possono rallentare molto la ricezione di una pagina, e le troppe immagini tendono a intasare la rete, con danno anche per gli altri utenti. È quindi consigliabile utilizzare immagini non troppo grandi, e preferire, quando è possibile, un numero di colori non eccessivo, a meno che lo scopo della pagina non sia proprio quello di mostrare delle immagini di alta qualità. Ad esempio, è abbastanza inutile inserire un logo o una immagine decorativa usando 32 milioni di colori - i potenziali clienti si addormenterebbero davanti al video in attesa di veder completata l'immagine. Preferiremo quindi un'immagine con 256 colori (ma per un logo già 16 colori potrebbero bastare) - e come formato, 200x150 sarà certo meglio di 640x400.

Diversamente dalle immagini, suoni e video digitali non possono essere integrati in modo immediato dentro le pagine Web, a meno di sfruttare le possibilità offerte dal linguaggio di programmazione Java o da programmi plug-in specifici come quello disponibile per i video Quick time. Tuttavia è possibile inviare attraverso World Wide Web contenuti informativi multimediali in modo molto semplice: basta definire il file corrispondente come destinazione di un link dentro una pagina Web. Naturalmente la sintassi per questi collegamenti è esattamente la medesima usata per la definizione di link ipertestuali tra documenti. Ad esempio, volendo mostrare un video digitale in formato MPEG (un formato di compressione per immagini in movimento molto usato su Internet), basterà scrivere:

<A HREF= "video.mpg">Se premi qui potrai vedere un filmato</A>

Quando l'utente attiverà il collegamento, il browser riceverà il file 'video.mpg' dal computer remoto, e poi, se adeguatamente configurato, attiverà l'applicazione di supporto appropriata per permetterne la visualizzazione.

Quando rivolgersi ad esperti

Siamo giunti alla fine della nostra introduzione alla costruzione di pagine Web. Dopo aver aggiunto tutti marcatori, la nostra pagina di esempio si presenta in questa forma:

<HTML>
<HEAD><TITLE>Le Scienze Umane su Internet</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF80" TEXT="Navy" LINK="Red" VLINK="#800000">
<H1 ALIGN="center">Scienze Umane on-line</H1>
<CENTER><IMG SRC="human.gif"></CENTER>
<H3 ALIGN="center">Le risorse e servizi per le scienze umane su Internet</H3>
<P>Su Internet esistono ormai molti <EM>server</EM> che forniscono risorse e servizi dedicati al mondo delle scienze umane in generale e della letteratura in particolare.
<P>L'elenco che segue, senza pretendere di essere esaustivo, presenta alcuni tra i maggiori nodi raggiungibili via Internet con una breve nota descrittiva. Esso verr&agrave; aggiornato periodicamente in base alle conoscenze dei responsabili di queste pagine.
<P>Segnalazioni e consigli, che vivamente sollecitiamo, possono essere inviati a <A HREF="mailto:ciotti@axrma.uniroma1.it">Fabio Ciotti</A>.
<HR>
<H3>I centri di ricerca</H3>
<UL>
<LI><A HREF="http://www.uic.edu/orgs/tei/">Text Encoding Initiative Home Page</A>, il sito di riferimento per la <EM>TEI</EM>
<LI><A HREF="http://www.sil.org/sgml/sgml.html">The SGML Web Page</A>, la SGML Web Page di Robin Coover presso il SIL, una miniera
<LI><A HREF="http://cethmac.princeton.edu/">CETH Home Page</A>, uno dei maggiori centri di ricerca dedicato all'Informatica Umanistica
</UL>
<H3>Le biblioteche virtuali</H3>
<UL>
<LI><A HREF="http://www.cs.cmu.edu/Web/books.html">The On-line Books Page</A>
<LI><A HREF="http://www.lib.virginia.edu/etext/ETC.html">
Electronic Texts Center - University of Virginia</A>
<LI><A HREF="http://www.hti.umich.edu/sgml/">Humanities Text Initiative</A>, l'archivio testuale della University of Michigan
<LI><A HREF="http://jg.cso.uiuc.edu/PG/welcome.html">Project Gutenberg Home Page</A>, la home page del pi&ugrave; famoso archivio di testi elettronici.
<LI><A HREF="http://www.liberliber.it/biblioteca/index.htm">
Progetto Manuzio</A>: una biblioteca elettronica per la letteratura italiana promossa dall'Associazione <STRONG>Liber Liber</STRONG>
</UL>
<H3>Le riviste scientifiche</H3>
<UL>
<LI><A HREF="http://info.lib.uh.edu/pr/v6/n1/bail6n1.html">
Network-Based Electronic Publishing of Scholarly Works: A Selective Bibliography</A>
<LI><A HREF="http://shr.stanford.edu/shreview/">The Stanford Electronic Humanities Review</A>, versione elettronica della prestigiosa rivista dell'Universit&agrave; di Stanford
</UL>
</BODY>
</HTML>

E questa che segue è una immagine che ci mostra il risultato finale, visualizzato attraverso Netscape:

figura 79
figura 79: La pagina Web del nostro esempio come viene visualizzata da Netscape

Un risultato accettabile. Naturalmente il linguaggio HTML nelle sue versioni avanzate ed estese permette di realizzare anche pagine molto più complesse, sia dal punto di vista strutturale sia dal punto di vista grafico. Ma la discussione dettagliata di queste possibilità avanzate richiederebbe una disponibilità di spazio ben maggiore di quella concessa da un manuale introduttivo come questo.

La progettazione e implementazione di veri e propri servizi informativi su World Wide Web, infatti, richiede competenze specialistiche in diversi settori: a partire dallo studio grafico delle pagine e delle illustrazioni, fino alla integrazione dei servizi Web con sistemi di database relazionali, o alla progettazione di complicate applicazioni per effettuare transazioni commerciali su Internet, campo quest'ultimo che richiede una particolare attenzione ai problemi di sicurezza.

La necessità di un intervento specialistico è ancor più evidente se si considerano le potenzialità offerte da strumenti come il linguaggio di programmazione distribuita Java, o le prospettive aperte dall'introduzione su Internet di ambienti tridimensionali grazie al linguaggio VRML.

In conclusione, possiamo quindi ribadire quanto premesso all'inizio di questo capitolo. Se l'esigenza è quella di avere una home page personale, le abilità e le competenze richieste sono assolutamente alla portata di qualsiasi utente della rete dotato di un po' di pazienza e curiosità. Ma in tutti i casi in cui la diffusione di informazioni attraverso World Wide Web è elemento strategico di un progetto editoriale, scientifico o commerciale è consigliabile rivolgersi a esperti o ad aziende specializzate, che possono garantire quella vasta serie di competenze necessarie a realizzare un vero e proprio sistema informativo in rete.

torna a inizio pagina