19 Mettere informazione in rete

Uno degli aspetti innovativi di Internet è la facilità con la quale è possibile non solo reperire, ma anche diffondere 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 come puro territorio di navigazione: la sua 'costruzione' è considerata appannaggio di una casta ristretta di 'esperti' 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 è talvolta 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. Dall'altro, per pubblicare una (o più) pagine su World Wide Web è necessario disporre dell'accesso a uno dei server collegati 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 assai più semplice linguaggio di marcatura, e se i due termini possono suonare egualmente astrusi alle orecchie di un profano, la realtà alla quale si riferiscono è assai diversa: come si è già accennato, un linguaggio di marcatura è concettualmente assai vicino, ad esempio, alle convenzioni adottate da un correttore di bozze per 'marcare' 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, soprattutto considerando la progressiva moltiplicazione dei programmi di videoscrittura capaci di salvare direttamente un documento in formato HTML.

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 o addirittura gartuitamente.

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

Affittare spazio macchina vuol dire, come si è accennato, 'noleggiare' una porzione del disco rigido di una macchina connessa alla rete, per pubblicarvi le nostre pagine HTML. Normalmente, si tratterà della macchina del nostro 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 potrebbero essere tranquillamente realizzate da noi sul computer di casa o dell'ufficio: come vedremo, gli strumenti per farlo sono alla portata di chiunque; oppure potrebbero essere realizzate da una società di servizi ingaggiata allo scopo, e capace di assicurare al nostro sito un elevato livello di progettazione informativa e grafica. Naturalmente, sarà importante che il server che ci ospita sia facilmente raggiungibile dagli utenti della rete, disponga cioè di linee-dati sufficientemente ampie in rapporto alla quantità di persone che vi accedono. Non ha invece importanza la sua collocazione fisica: sia che si trovi in Italia, sia che si trovi, ad esempio, negli Stati Uniti, accederemo al server con una connessione via Internet, cioè — come è tipico della rete — a costi indipendenti dalla distanza. I soli problemi possono essere di immagine, dato che se il server è negli Stati Uniti 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 (si parte di solito da almeno 500 Kb), 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 mensili di dati e costituisce una buona ragione, assieme alla velocità di trasferimento, per tenere 'leggere' le nostre pagine. Non comporta comunque un aggravio di costi eccessivo — tanto più che corrisponde al nostro 'successo' in rete.

Quanto dobbiamo preventivare di spendere? È difficile fornire cifre esatte. Spesso, un individuo o un'associazione no-profit possono inserire un certo numero di pagine gratis o a prezzi poco più che simbolici presso il proprio fornitore di connettività, a patto che il traffico generato non sia eccessivo: in Italia, MC-link (http://www.mclink.it), Agorà (http://www.agora.stm.it) e Video On Line (http://www.vol.it), ad esempio, mettono a disposizione un servizio di questo tipo. Se gli scopi non sono commerciali, prezzi assai bassi sono garantiti anche da alcune società americane: Webcom, una delle più utilizzate (http://www.webcom.com), fa pagare ad esempio 9 dollari e 95 al mese uno spazio di ben 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 —, mentre Geocities (http://www.geocities.com) addirittura offre spazio gratuitamente, a patto di accettare alcune condizioni (es. il logo di Geocities in ogni pagina). Per avere un elenco aggiornato di siti e provider che offrono servizi di questo tipo, basterà ricorrere, al solito, a Yahoo!.

I prezzi per servizi commerciali sono naturalmente più alti; tuttavia, con una cifra compresa (a seconda della quantità di materiale inserita in rete, dei servizi offerti, ecc.) 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, 'Pippo S.r.l.', le nostre pagine saranno raggiungibili all'indirizzo 'http://www.fornitore.it/pippo'. Ma non sarebbe più prestigioso un indirizzo del tipo 'http://www.pippo.it'? Probabilmente sì — e per averlo non è nemmeno necessario disporre di un proprio server: è sufficiente registrare il dominio (in Italia presso il GARR-NIS, http://www.nis.garr.it/) 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 (oppure la società alla quale abbiamo affidato la realizzazione delle pagine).

Realizzare un proprio server

Se affittare spazio macchina è così facile, quand'è che conviene invece 'mettersi in casa' un server? Intuitivamente, in tutti i casi nei quali l'informazione da immettere in rete è 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, realizzando una Intranet: ne abbiamo parlato più volte in questo libro). Tenete conto, comunque, che la realizzazione e la gestione di un server Internet hanno costi ben superiori a quelli, talvolta quasi irrisori, dell'affitto di 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.

Per farsi una idea di massima, si consideri che una connessione diretta a Internet da 64 Kb — il minimo consigliabile — ha un costo annuo di una trentina di milioni, un computer di potenza sufficiente a gestire un server ha un costo che parte dai 7-8 milioni, che il prezzo del software non dovrebbe superare i 2 milioni e che la consulenza di un amministratore di sistema esperto può costare anche un milione al giorno. Doveroso ribadire che queste sono cifre assolutamente indicative e che non tengono conto di numerosi fattori (non si è parlato ad esempio dei gruppi di continuità, che assicurino il funzionamento delle apparecchiature anche in caso di black-out, delle unità di backup per la sicurezza dei dati, ecc.).

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, infine, vendere o promuovere 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 promozione e di presentazione del proprio lavoro (curriculum, link ai siti connessi con la propria attività e ai propri interessi, qualche foto, ecc.), occuperà relativamente poco spazio, diciamo fra i 100 Kb e 1 Mb. Spesso, se si lavora presso un ente o una azienda che dispongono di un proprio sito Internet, una pagina di questo tipo potrà essere tranquillamente ospitata (è consuetudine, ad esempio, che le università e gli enti di ricerca offrano ai propri dipendenti e collaboratori spazio 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 poc'anzi, 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 o comunque di una iniziativa no-profit è, nella maggior parte dei casi, un esempio un po' più complesso. Presumibilmente vorremo informare sulla storia e gli scopi dell'associazione, rendere disponibili i verbali delle riunioni, i programmi dei convegni, e magari anche un'edizione elettronica del bollettino mensile. È 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.

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 collegare direttamente il database degli articoli giacenti in magazzino con un 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 (per non parlare del fatto che il nostro negozio virtuale è raggiungibile in pochi secondi da qualunque località nel mondo).

Costruire una pagina per World Wide Web

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: la costruzione di pagine non eccessivamente sofisticate è alla portata di tutti; basta affrontare con un po' di buona volontà lo studio dei fondamenti del linguaggio HTML. Il discorso è diverso se si intende fornire un vero e proprio servizio informativo, con pagine complesse e sofisticati effetti grafici. In questo caso è necessario avere competenze specifiche, oltre ad una conoscenza approfondita di HTML e, magari, di linguaggi come Java. Se si perseguono risultati professionali o editoriali, è dunque meglio rivolgersi ad esperti, oppure — avendone la possibilità — formarsi una competenza specialistica nel campo. In quest'ultimo caso, come detto, le pagine che seguono forniranno gli strumenti di base, ma non pensate di imparare i segreti dell'HTML così in fretta! Ci sono molte istruzioni delle quali non parleremo e molti punti che andrebbero approfonditi o integrati. Se intendete perfezionare la vostra conoscenza di queste tecniche dobbiamo quindi rimandarvi alla manualistica specifica, parte della quale si trova sulla rete stessa (in qualche caso anche in italiano). Come al solito, piuttosto che lasciare un elenco di indirizzi, vi consigliamo di fare un salto alla pagina di 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 numerosi 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 (questo stesso manuale deve essere periodicamente rinnovato: ricordate perciò di collegarvi all'indirizzo http://www.laterza.it/internet per le modifiche dell'ultima ora).

HTML e i suoi 'dialetti'

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

Sviluppato per la prima volta nei laboratori del CERN, l'HTML ha subìto una veloce evoluzione. Questa ha determinato il diffondersi di diverse versioni del linguaggio, che coesistono con una serie di estensioni introdotte unilateralmente dalle maggiori aziende produttrici di browser, talvolta non compatibili tra loro. Ad esempio, alcune delle estensioni introdotte dalla Netscape non sono interpretate dal browser della Microsoft (Internet Explorer), e viceversa. Attualmente la versione ufficiale dello standard è quella denominata HTML 3.2, e tutti i browser più recenti condividono la capacità di interpretare in modo coerente la maggior parte delle istruzioni specificate in questo standard.

Riassumendo: HTML si presenta attualmente come una lingua ufficiale con tanto di 'vocabolario della Crusca': HTML 3.2, e con una serie di dialetti, che si parlano in quel di Redmond (Microsoft Internet Explorer) o Mountain View, California (Netscape).

Per quanto ci riguarda, le istruzioni che illustreremo sono quasi tutte parte dello standard ufficiale rilasciato dal W3C e dalla IETF. 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à.

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 del testo da impaginare. Tali istruzioni informeranno il browser, ad esempio, su quale parte del testo sia un titolo, quale parte vada interpretata come un link ipertestuale, 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 vanno memorizzati nel semplice formato ASCII. Se ad esempio stiamo utilizzando un qualsiasi word processor per creare pagine HTML, dobbiamo ricordarci di salvare il file in modalità 'solo testo', e non nel formato proprietario del word processor utilizzato. Un documento HTML è dunque un unico file ASCII che include sia il contenuto che vogliamo far visualizzare al browser, sia le istruzioni HTML usate per spiegare al programma come visualizzare quel contenuto. Ad esempio:

è una riga contenente sia le istruzioni HTML, sia il testo da impaginare. L'aspetto corrispondente è:

Come si può intuire, per distinguere le istruzioni HTML dal contenuto testuale vero e proprio si usa un particolare artificio sintattico: ogni istruzione (come già detto, talvolta le istruzioni HTML vengono chiamate anche marcatori o tag... usiamo tutte le definizioni, così da abituarci) deve essere racchiusa 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. È 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 cui ci si riferisce, ed uno alla fine. Il marcatore finale è uguale a quello iniziale, solo è preceduto dal carattere '/', così:

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

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 spezzare una riga. Questi elementi, ovviamente, non hanno bisogno di un marcatore di chiusura.

Molte delle istruzioni HTML prevedono l'aggiunta di attributi. Può capitare, ad esempio, di voler inserire nel nostro documento una riga di separazione, ma di volerla di uno spessore particolare. In tali circostanza, oltre all'istruzione (<hr> nel nostro caso) aggiungeremo un attributo, ad esempio 'size="5"'. L'aspetto finale del tag sarà perciò <hr size="5">. Notare che l'attributo 'size="5"' è stato inserito all'interno delle parentesi acute e che è separato da uno spazio dall'istruzione. Più in generale:

<marcatore nomeattributo="valore">

Un elemento può avere anche molteplici attributi, ognuno con un suo valore. Il valore degli attributi è normalmente contenuto tra virgolette doppie; virgolette che possono essere omesse se il valore non contiene degli spazi bianchi, ma che è comunque sempre consigliabile utilizzare.

Le lettere accentate

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 in grado di visualizzarli. Ma per essere trasmessa e ricevuta correttamente da qualunque server e client, su qualsiasi piattaforma, una pagina HTML dovrebbe limitarsi a usare la sola codifica ASCII standard, che non contiene nessuna delle lettere accentate.

I linguaggi SGML, come HTML, forniscono uno strumento sintattico che permette di superare questa limitazione: 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, 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.

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

Ed ecco alcuni caratteri speciali che possono tornare utili (notare che le virgolette, i simboli di maggiore e minore e la '&' richiedono un carattere speciale, per non essere confusi con parte di istruzioni HTML):

• Ó &copy;
• Ò &reg;
• > &gt;
• < &lt;
• & &amp;
• " &quot;

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.

Il tag <html>

In primo luogo, si consideri che ogni documento HTML deve iniziare con il tag <html> e deve chiudersi con </html>. Ovvero:

<html>
... qui tutto il documento da impaginare ...
</html>

Questo primo (e ultimo) elemento serve ad identificare un file HTML come tale: una specie di meta-elemento.

Il tag <head>

Altra costante:_ tutte la pagine HTML sono divise in due sezioni: una intestazione, ovvero una sorta di copertina, e un corpo, ovvero il documento vero e proprio. L'intestazione viene codificata con il marcatore <head>. Ad esempio:

<head>
... qui l'intestazione del documento da impaginare ...
</head>

Il tag <title>

All'interno della intestazione del documento può essere inserito il marcatore <title> che dà un titolo alla pagina. Questo titolo non viene visualizzato all'interno della pagina, ma compare nella barra superiore della finestra del browser; inoltre, viene normalmente utilizzato dalla funzione 'add bookmark' (aggiungi segnalibro) dei principali browser. Per questo va scelto con una certa oculatezza: né tanto lungo da non entrare nella barra del browser e nel menu dei bookmark, né tanto corto da essere incomprensibile. Il comando relativo, se aggiungiamo i marcatori dell'intestazione, è:

<head>
<title>... qui il titolo che abbiamo scelto per il nostro documento ...</title>
</head>

Il tag <body>

Dopo l'intestazione possiamo finalmente inserire il corpo del documento, che viene delimitato dal marcatore <body>, così:

<body>...</body>

Il testo del documento HTML che si intende pubblicare va inserito tra questi due marcatori, con annessi tutti gli altri marcatori con i quali si vorrà descriverne la struttura e la forma. Il tag <body> prevede alcuni attributi che analizzeremo in seguito.

Per proseguire in questa nostra introduzione, ed evitare di essere troppo astratti, cominciamo a realizzare subito una semplice pagina Web: una pagina personale (home page) di un ipotetico sig. Mario Rossi. Vi suggeriamo per il momento di non ricorrere a editor specifici per l'HTML, così come sconsiglieremmo l'uso della calcolatrice a chi volesse imparare le addizioni. Usate piuttosto dei semplici editor di testo, o dei wordprocessor, con l'accortezza però di salvare i file in modalità solo testo. È bene sottolineare quest'ultimo punto: è infatti un errore comune non badare, le prime volte, al formato di memorizzazione del file . Con alcuni editor (come il Blocco note di Windows) non è necessario badare al formato di memorizzazione, in quanto salvano sempre in modalità solo testo. Un'altra cosa cui è bene fare caso, è il suffisso da assegnare al nostro file: è buona norma far sì che il file che contiene le nostre pagine Web abbia un nome che termina con .htm oppure con .html (se il nostro sistema operativo lo consente. Windows 3.x consente solo .htm).

Cominciamo, dunque, e — una volta lanciato il nostro editor di testi — scriviamo quanto segue:

<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body>
<h1>Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
</body>
</html>

Figura 101 Il file 'prova.htm' così come viene visualizzato da Internet Explorer

Notiamo che, come previsto, ciò che abbiamo scritto fra i marcatori <title> e </title> non è comparso all'interno della pagina, bensì sulla barra superiore del browser, e che nel riquadro principale è comparso tutto ciò che abbiamo scritto tra i marcatori <body> e </body>. Questo comportamento sarà caratteristico di tutte le pagine Web che realizzeremo.

Nel nostro documento abbiamo inoltre inserito altri due tag di cui non avevamo precedentemente parlato: <h1> e <p> (e relativi marcatori di chiusura).

Il tag <hn>

Il marcatore <h1> indica i titoli della pagina. Ci sono 6 livelli di titoli, dove <h1> è il massimo livello e <h6> il livello più basso ('h' è l'iniziale del termine inglese header). <h1> viene solitamente utilizzato per marcare il titolo di un capitolo, o di una sezione importante, <h6> per identificare una nota a piè di pagina, un copyright o altro testo che non si vuole in grande evidenza. Modificate il vostro file prova.htm nel modo seguente, e verificatene l'effetto con il browser:

<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body>
<h1>Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
<h1>Intestazione di primo livello</h1>
<h2>Intestazione di secondo livello</h2>
<h3>Intestazione di terzo livello</h3>
<h4>Intestazione di quarto livello</h4>
<h5>Intestazione di quinto livello</h5>
<h6>Intestazione di sesto livello</h6>
</body>
</html>

Come si vede, è possibile inserire più titoli all'interno della pagina, anche dello stesso livello (ci sono due <h1>). Tutti i marcatori di questi titoli interni supportano un attributo che permette di specificare l'allineamento del testo. Il nome dell'attributo è align, e i valori possibili, che specificano il tipo di allineamento, sono:

• center
• left
• right

Ad esempio, modifichiamo il primo <h1> aggiungendo l'attributo appena visto:

<h1 align="center">Home page di Mario Rossi</h1>

Il tag <p>

L'altro marcatore che abbiamo introdotto e che ancora non conosciamo è <p>. In qualsiasi documento, di norma, insieme ai titoli c'è anche del testo normale. Nella stampa 'tradizionale' il testo viene diviso in blocchi, i capoversi (che gli inglesi chiamano paragraph), al fine di dividerlo in unità concettuali e aumentarne la leggibilità. Anche un documento HTML può essere diviso in capoversi e lo si fa, appunto, con <p>.

L'effetto pratico di questa istruzione è quello di inserire un 'a capo' e una riga vuota nel flusso del testo a video. Si noti che dopo un titolo <hn> (dove n varia da 1 a 6) il browser va a capo automaticamente.

Prima di andare avanti, facciamo un esperimento che ci mostrerà una peculiarità dell'HTML. Nel vostro file prova.htm aggiungete le seguenti righe:

<p>Questa riga</p><p>appare spezzata.</p>

<p>Quest'altra
riga, invece,
appare scritta tutta
di seguito
nonostante gli a capo.</p>

Salvate il file prova.htm e ricaricatelo con il vostro browser. Ecco cosa vedrete:

Questa riga
appare spezzata.

Quest'altra riga, invece, appare scritta tutta di seguito nonostante gli a capo.

Il tag <br>

Un altro marcatore che riguarda la gestione dei capoversi è <br> (abbreviazione di break). La sua funzione è quella di spezzare una riga, producendo un 'a capo', ma senza introdurre una riga vuota e senza interrompere l'unità concettuale del capoverso (e nemmeno la sua impaginazione; ovvero un capoverso allineato a destra, ad esempio, continuerà ad essere allineato a destra, fino al marcatore </p>, anche se contiene uno o più <br>). <br> non ha un marcatore di chiusura in quanto indica semplicemente il punto in cui intervenire. Ricorrendo a più marcatori <br> in sequenza si possono creare delle spaziature verticali (non è però una soluzione elegante dal punto di vista del codice HTML).

Le liste

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 automaticamente un numero progressivo) o non numerate (ogni voce o paragrafo della lista è preceduto da una pallina). Ecco la sintassi delle liste non numerate:

<ul>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce</li>
</ul>

Il marcatore <ul> (che può essere ricordato come abbreviazione di unordered list) va posto all'inizio della lista, che va chiusa, come di consueto, con </ul>. Ad ogni voce della lista va premessa l'istruzione <li> (dall'inglese list item) e in coda va posto il relativo tag di chiusura (</li>). L'aspetto a video delle unordered list è il seguente:

• prima voce
• seconda voce
• terza voce

Le liste numerate si costruiscono nello stesso modo, ma l'istruzione di apertura è <ol> (da ordered list) e quella di chiusura è, naturalmente, </ol>. All'interno, le solite <li> (che compaiono dunque solo all'interno di una coppia di istruzioni <ul> e </ul> o <ol> e </ol>). Ecco la sintassi e quindi l'aspetto finale:

<ol>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce</li>
</ol>

che produce la visualizzazione di

1. prima voce
2. seconda voce
3. terza voce

Proseguiamo nella costruzione della nostra home page, per verificare delle possibili applicazioni pratiche delle liste e, contemporaneamente, verifichiamo che cosa succede se le 'nidifichiamo', ovvero se includiamo una lista in un'altra:

<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body>
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
<h3>Il mio tempo libero</h3>
<ul>
<li>letteratura</li>
<li>cinema (qui sotto la classifica dei miei
    film preferiti)</li>
    <ol>
    <li>Blade Runner</li>
    <li>Oltre il giardino</li>
    <li>Delicatessen</li>
    </ol>
<li>sport</li>
</ul>
</body>
</html>

Notate che sotto la voce 'cinema', e prima di chiudere la lista principale, abbiamo inserito una ordered list, con una breve classifica. Questa seconda lista è stata leggermente spostata a destra per una migliore leggibilità del codice, ma non è obbligatorio farlo.

Le liste sono uno strumento abbastanza sofisticato e ci sono alcuni utili attributi che possiamo aggiungere:

• <ol type="x"> dove x è uguale a:

• <ol start="n"> dove n è un numero qualunque. Con questo attributo, è possibile far partire la numerazione delle lista dal numero che vogliamo. Questo attributo può sommarsi al precedente. Ad esempio: <ol type="I" start="6">

Un terzo tipo di lista è la definition list (<dl>). Usiamola per aggiungere alla nostra home page delle voci relative al lavoro:

<dl>
<dt>Scuola di Giornalismo di Perugia</dt>
<dd>insegno l'applicazione delle nuove tecnologie alla professione di giornalista</dd>
<dt>Laterza</dt>
<dd>in collaborazione con alcuni colleghi ho scritto un manuale su Internet</dd>
<dt>RAI</dt>
<dd>ho progettato il sistema informativo della trasmissione Media/Mente</dd>
</dl>

<dt> sta a indicare la voce della lista, e <dd> la definizione da associare alla voce. Nella figura che segue l'effetto a video (è stato anche aggiunto un titolo, con <h3>Il lavoro</h3>):

Figura 102 Ecco l'aspetto di una definition list.

Gli stili di carattere (grassetto, corsivo, ecc.)

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 HTML per gli stili logici sono i seguenti:

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

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, che privilegia l'indipendenza dallo strumento di visualizzazione usato. Ad esempio,

<strong>Testo da evidenziare</strong>

produce in genere un testo in grassetto, ma potrebbe produrre su browser diversi un testo evidenziato in modi alternativi (ad esempio in grassetto italico, o in reverse, o colorato in rosso...). Inoltre, in linea di principio un'istruzione <strong> potrebbe essere usata anche per spiegare ad un sintetizzatore vocale (es. per la lettura di testi a non vedenti) di leggere le pagine utilizzando un volume più alto o una determinata inflessione di voce.

Gli stili possono essere sommati; ad esempio, per ottenere un testo corsivo neretto si può scrivere:

<b><i>Questa riga è in neretto e corsivo</i></b>

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 è meglio evitare il sottolineato.

Il tag <hr> ha lo scopo di inserire una linea separatrice fra paragrafi. Si tratta di un'istruzione 'secca' che non richiede tag di chiusura. Alcuni attributi applicabili sono:

• size="n", dove n indica lo spessore della riga (es.: <hr size="5">);
• noshade, che serve a eliminare l'effetto 'ombra' della linea (es.: <hr noshade>);
• width="n% | n", che regola la larghezza della riga, sia in percentuale, relativamente alla larghezza dello schermo, sia in assoluto, in pixel (es.: <hr width="50%"> oppure <hr width="250">);
• align="left | center | right", per allineare la riga rispettivamente a sinistra, al centro e a destra, ad es.: <hr align="right" width="80%"> (gli effetti di questo attributo, ovviamente, sono visibili solo se la linea ha una larghezza inferiore al 100% dello schermo).

Quando si vogliono allineare contemporaneamente più capoversi, e altri elementi HTML che vedremo in seguito, come le tabelle, si può ricorrere al tag <div>. Anche in questo caso la sintassi è molto semplice:

<div align="left | center | right"> ... </div>
(es.: <div align="center"><p>Prova</p></div>)

Le versioni più vecchie di alcuni browser non riconoscono il comando <div>, introdotto relativamente di recente, ma un altro tag (<center>) che però non fa parte delle specifiche HTML standard. Alcuni impaginatori, per assicurare la massima compatibilità alle proprie pagine, li inseriscono entrambi. Es.:

<div align="center"><center><p>Prova</p></center></div>

Doveroso notare che, nel nostro esempio, avremmo ottenuto lo stesso effetto con un assai più semplice <p align="center">Prova</p>. Il tag <div>, comunque, si mostrerà più utile in seguito.

Sfondi e dimensionamento dei caratteri

Prima di vedere come si inseriscono tabelle, link ipertestuali e immagini, esaminiamo alcune istruzioni che permettono di ottenere un controllo maggiore sull'aspetto della pagina Web. Si tratta di comandi non sempre inclusi nello standard HTML, e dunque non necessariamente riconosciuti da tutti i browser (ma sicuramente dai principali e più diffusi).

Gli attributi di <body>

Il primo gruppo di istruzioni comprende gli attributi che possono essere aggiunti al marcatore <body>. Il seguente attributo si può utilizzare per far sì che una immagine venga a costituire lo sfondo di una pagina:

background="file-grafico"
(es.: <body background="stucco.gif">)

Nel caso in cui l'immagine fosse più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie come mattonelle su una parete. Vediamo il listato della nostra pagina di prova con aggiunto questo attributo in <body> e quindi vediamone l'effetto a video:

<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body background="stucco.gif">
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
<h3>Il mio tempo libero</h3>
<ul>
<li>letteratura</li>
<li>cinema (qui sotto la classifica dei miei film preferiti)</li>
<ol>
<li>Blade Runner</li>
<li>Oltre il giardino</li>
<li>Delicatessen</li>
</ol>
<li>sport</li>
</ul>
<h3>Il lavoro</h3>
<dl>
<dt>Scuola di Giornalismo di Perugia</dt>
<dd>insegno l'applicazione delle nuove tecnologie alla professione di giornalista</dd>
<dt>Laterza</dt>
<dd>in collaborazione con alcuni colleghi ho scritto un manuale su Internet</dd>
<dt>RAI</dt>
<dd>ho progettato il sistema informativo della trasmissione Media/Mente</dd>
</dl>
</body>
</html>

Ecco il risultato a video:

Figura 103 Allo sfondo di colore uniforme si è sostituita una immagine che vuole ricordare una parete stuccata.

Ovviamente abbiamo precedentemente provveduto a creare, oppure a prelevare da qualche archivio, l'immagine usata per lo sfondo. Quando si ricorre a simili accorgimenti, si consideri che la leggibilità del testo impaginato può diminuire, specie se i colori dell'immagine non contrastano sufficientemente con quelli usati per i caratteri.

In alternativa all'attributo background, si può usare:

bgcolor="#colore RGB"
(es.: <body bgcolor="#FFFFFF">)

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 e che, come è noto, miscelati opportunamente producono tutti i colori dello spettro. Per motivi strettamente informatici, la miscelazione degli indici RGB avviene in notazione numerica esadecimale (una notazione che ha base 16, e utilizza le dieci cifre della notazione decimale più le lettere fino alla F, ovvero: 0 1 2 3 4 5 6 7 8 9 A B C D E F, dove B, ad esempio, vale 11, e F vale 15).

Sembra complicato, ma vediamo come risolvere il problema nella pratica. Immaginiamo di voler ottenere, per il nostro sfondo, un bianco. Tornando indietro con la memoria ai nostri studi scolastici, ricorderemo che il bianco si ottiene con la somma di tutti i colori dell'iride. Nel nostro caso perciò dovremo assegnare ai nostri 3 indici (red, green, blue) il massimo valore, che nella notazione esadecimale si scrive FF, cioè: <body bgcolor="#FFFFFF"> (FF per il rosso, FF per il verde, FF per il blu). Volendo ottenere il nero, ovvero la sottrazione di tutti i colori, assegneremo ai nostri tre indici il valore più basso (zero, 00 in esadecimale), quindi: <body bgcolor="#000000">. Ancora, sapendo che il giallo è ottenuto con la somma di rosso e verde, scriveremo: <body bgcolor="#FFFF00">. Volendo ottenere, infine, un giallo più pallido, aggiungeremo un po' di blu nella nostra tavolozza elettronica, passando da 00 a 77: <body bgcolor="#FFFF77">.

Vi sembra ancora complicato? Niente paura, per fortuna ci sono due scappatoie. La prima consiste nel ricorso a programmi appositamente realizzati, come Color Manipulation Device, o a programmi di grafica come Paint Shop Pro, Corel Photo-Paint o BME (per Macintosh), grazie ai quali è sufficiente un click del mouse sul colore desiderato per vedersi restituire il suo valore numerico. L'altra scappatoia consiste nel ricorso al nome per esteso del colore, secondo questo elenco:

Es.: <body bgcolor="yellow">. Quest'ultima soluzione è decisamente la più semplice, ma riduce a 16 il numero di colori che possiamo adottare (contro i 16 milioni della notazione esadecimale).

Dove trovare i programmi che abbiamo citato? Per prelevare una copia di Color Manipulation Device (shareware Windows), la URL è http://www.meat.com/software/cmd.html; per prelevare una copia di Paint Shop Pro (shareware Windows): http://www.jasc.com; per ulteriori informazioni su Corel Photo-Paint (commerciale Windows): http://www.corel.com/; per prelevare una copia di BME (freeware Macintosh): http://www.softlogik.com/.

La notazione esadecimale appena vista può essere adoperata per attribuire un colore anche al testo e ai link ipertestuali presenti nella nostra pagina HTML. Ecco la sintassi per ottenere una pagina bianca con il testo rosso scuro:

<body bgcolor="#FFFFFF" text="#990000">

All'interno del tag <body> possiamo aggiungere altri attributi, oltre a text, i quali ci consentono di determinare i colori dei link ipertestuali, secondo questo schema:

• link="#colore RGB" indica il colore dei link
• vlink="#colore RGB" indica il colore dei link già attivati
• alink="#colore RGB" indica il colore dei link mentre si attivano con il mouse

Ad esempio:

<body bgcolor="#FFFFFF" text="#990000" link="00FF00" vlink="#00AA00" alink="#FFFF00">

fa sì che lo sfondo sia bianco, il testo rosso scuro, i link (cioè le parole 'cliccabili') verdi, i link visited, cioè già visitati, verde scuro e i link attivi (active link) gialli. Occorre prestare molta attenzione alla scelta dei colori: c'è infatti il rischio di rendere la pagina illeggibile.

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 dimensionamento dei caratteri

Il secondo gruppo di istruzioni che è utile analizzare permette di controllare la dimensione dei caratteri. Abbiamo già visto che gli elementi per i titoli provocano un cambiamento di dimensione del font. Le istruzioni che elenchiamo ora danno 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 (termini assoluti) si usa il seguente marcatore:

<font size="n">testo</font>

Dove n è un numero che va da 1 a 7, ad es.: <font size="4">testo</font>.

La dimensione normale del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7 si ottiene un font ingrandito.

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

<font size="+/- n">testo</font>

In questo caso n può variare da -2 a +4. Miscelando queste varie direttive è possibile ottenere effetti come questo:

<font size="+4">C</font><font size="+3">I</font><font size="-1">A</font><font size="+2">O</font>

che producono:

CIAO

La dimensione normale, espressa in termini assoluti, può essere modificata con il seguente marcatore inserito subito dopo l'istruzione <body>:

<basefont size="n">
(es.: <basefont size="4">)

Questa istruzione ha effetto su tutto il documento, non ha bisogno di tag di chiusura, e influisce sulle eventuali direttive di font relative. Se, ad esempio, diamo <font size="+1"> ad una parola in un documento con basefont pari a 3 (cioè lo standard), avremo dei caratteri più piccoli rispetto alla stessa parola, cui viene applicato il medesimo tag <font size="+1">, ma con basefont pari a 4. Un po' di esercizi saranno utili per familiarizzare con il meccanismo del dimensionamento relativo. È infine facile verificare che, in seguito a un basefont, anche il range di valori utili del dimensionamento relativo può variare. Ad esempio, con basefont uguale a 4, il range va da -3 a +3 (e non più da -2 a +4).

continua...