Rudimenti di XHTML

Marcello Missiroli, Mauro Biraghi, Stefano Longagnani

versione 1.2 - dicembre 2004

Indice

1. PREMESSA 2

2. BREVE STORIA DELL’HTML 2

3. IL LINGUAGGIO XHTML 3

4. STRUTTURA DEI DOCUMENTI XHTML 4

5. ELEMENTI BASE 5

6. LISTE DI TUTTI I TIPI 6

7. TITOLI E SOTTOTITOLI 7

8. ANCORE O HYPERLINKS 8

9. IMMAGINI 9

10. FORMATTAZIONE 1010.1. Formati fisici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1010.2. Formati logici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1110.3. Testo con... style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

11. PARAGRAFI 12

12. CARATTERI SPECIALI 13

13. COLORI 13

14. ATTRIBUTI DI PAGINA 14

15. TABELLE 15

1

2 BREVE STORIA DELL’HTML

16. STRUMENTI DI SVILUPPO 1516.1. Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1516.2. Redattori testuali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1616.3. Redattori semigrafici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1716.4. Redattori grafici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1716.5. Quanta: prova su strada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

17. TESTING & UPLOAD 1917.1. Test locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1917.2. Test remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2017.3. Validatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

18. E ora? 21

A. Esercizi e domande 21

B. Legalese 21

1. PREMESSA

Con l’aumento esplosivo che Internet (in particolare la parte visuale di Internet, cioè il WorldWide Web) ha avuto nel mondo recente è opportuno che tutti sappiano un poco di HTML, esoprattutto della sua ultima evoluzione, XHTML.

L’HTML, e quindi l’XHTML che da questo deriva, ha il vantaggio di essere estremamentesemplice, e permette con facilità di ”creare” home pages e altre pagine di argomento vario dapubblicare sull’internet.

L’XHTML, sigla che sta per eXtensible HyperText Markup Language, è il futuro dell’ormaivecchio HTML. Esso riunisce il vecchio standard per la costruzione di pagine web, lo HyperTextMarkup Language (HTML), con il nuovo standard per la descrizione dei dati, lo eXtensibleMarkup Language (XML).

2. BREVE STORIA DELL’HTML

L’HTML è la lingua franca per la pubblicazione di testi, e soprattutto ipertesti, sul World WideWeb. È uno standard non proprietario basato su SGML. Può essere creato e manipolato dastrumenti che vanno da semplici editor di testi a strumenti grafici dedicati, oppure da strumenti(come il PHP) che generano la pagina in modo dinamico attingendo a dati di un database.

È indubbio che sia stato proprio HTML a dare il via alla spinta che Internet sta avendo oggi,coniugando (tra le altre cose) piena compatibilità tra sistemi operativi e piattaforme, grafica eipertestualità.

Le origini dell’HTML vanno cercate a Ginevra, in Svizzera: TIM BERNERS-LEE e ROBERT

CAILLAU lavoravano al CERN. Iniziarono a studiare, nel 1989, un sistema informativo inter-conesso accessibile dai vari computer del CERN. L’idea fu di utilizzare un sistema semplice,

2

3 IL LINGUAGGIO XHTML

utilizzabile tanto terminali a carattere quanto dai terminali grafici. Era nato l’HTML, che ac-coppiato con il protocollo di rete HTTP, è diventato in breve tempo la soluzione più semplice edefficace per la pubblicazione di informazioni di ogni tipo sulla nascente Internet globale.

Il CERN lanciò il Web nel 1991 con un messaggio su una mailing list. Molte persone siunirono al progetto che crebbe rapidamente. In particolare, lo statunitense National Center forSupercomputer Applications (NCSA) spinse MARC ANDREESSEN e ERIC BINA a realizzareprogetti concreti, come il server http (NCSA) e il browser Mosaic per X-Windows (l’ambientegrafico di UNIX). Il programma fu poi sviluppato anche per PC e Mac dando vita al fenomenoche tutti conosciamo, crescendo esponenzialmente ed eclissando tutti gli altri

sistemi informativi. Poco dopo ANDREESSEN lasciò il CERN per fondare una piccola com-pagnia, Netscape Communications, Inc. che in seguito si sarebbe scontrato con Microsoftedurante le cosiddette “Browser war”... Ma questa è un’altra storia.

Il linguaggio HTML è in continua evoluzione, passando dalle versioni 1.0 alle 2.0, 3.0, 3.2,4.0, 4.01 per giungere alla versione attuale, XHTML 1.0.

Il punto di riferimento di questi sviluppi resta il World Wide Web Consortium (W3C), organ-ismo super-partes incaricato di estendere e sviluppare lo standard. Il suo indirizzo web al qualefare riferimento per ulteriori informazioni è http://www.w3c.org e offre, tra le altre cose,un servizio di controllo di aderenza allo standard.

3. IL LINGUAGGIO XHTML

Il formato HTML (HyperText Markup Language) è un semplice linguaggio basato su un sistemadi etichettatura, o contrassegno, delle varie parti (strutture) che compongono un documento. Hapoche e semplici opzioni per la strutturazione del testo (gli elementi del linguaggio di con-trassegno, i cosiddetti TAG), che permettono il suo uso per la produzione di documentazioneipertestuale, completa di menu, di liste e di link interni ed esterni ad altri iperdocumenti.

Dalla sua introduzione negli anni ’90 l’HTML si è purtroppo evoluto in modo caotico, so-prattutto a causa della famigerata guerra dei browser. Microsoft e Netscape infatti svilupparonoelementi di contrassegno e attributi proprietari, mescolando quelli utili per la strutturazione deldocumento a quelli necessari per la sua formattazione visuale. Il W3C ha deciso quindi diriformulare l’ultima edizione dell’HTML, la 4.01, secondo le regole del nuovo linguaggio didescrizione dei dati, l’XML (Extensible Markup Language).

L’XML è un insieme di regole e convenzioni sintattiche con le quali è possibile costruire ipropri elementi di marcatura (costruire cioè TAG definiti dall’utente), da utilizzare nei contestiinformativi più disparati. Sono stati creati già diversi vocabolari XML: ad esempio per la chimi-ca, la matematica, i dati finanziari, e così via. Lo stesso XHTML versione 1.0 non è altro che unvocabolario XML, cioè una specifica applicazione XML. In sintesi l’XHTML è un insieme dielementi di contrassegno definiti in modo compatibile all’ultima versione dell’HTML, la 4.01,mediante le regole di definizione dell’XML nelle cosiddette DTD, cioè le specifiche XML per laDefinizioni di Tipo di Documento, guide create appositamente per identificare e regolare i varielementi di contrassegno di un vocabolario XML quale l’XHTML è.

Un’istanza XHTML è un documento ipertestuale in cui alcuni caratteri svolgono le fun-zioni di mark-up (letteralmente: contrassegno, marcatura).Sono i cosiddetti tag, o elementi del

3

4 STRUTTURA DEI DOCUMENTI XHTML

linguaggio di marcatura, e definiscono la struttura del documento. Vedremo in un secondomomento come dare al documento anche un formato per la sua visualizzazione.

Preme qui sottolineare di non confondere i linguaggi di marcatura, che servono a dare strut-tura e/o formato a documenti multimediali e a dati, con i linguaggi di programmazione veri epropri. Si tratta di due ambiti molto diversi, e per esempio in un linguaggio di marcatura certonon ci aspettiamo di trovare le strutture di controllo tipiche dei linguaggi di programmazione,come gli if..then..else, i cicli while e via di questo passo.

In estrema sintesi l’XHTML è composto fondamentalmente da un insieme di elementi, dettianche tag, che con l’ausilio di eventuali attributi, marcano il testo del documento. Ogni el-emento è identificato da una label (in inglese: etichetta), può possedere alcuni attributi cui èassegnato un valore, ed essere compreso tra i delimitatori “<” e “>”.

Ci si può aspettare di vedere due diverse tipologie di elementi nei documenti XHTML:

1. Elementi standard che descrivono i dati. Questi elementi possiedono un marcatore diinizio e uno di fine. In questo documento a volte saranno scritti a destra e a sinistra deialcuni puntini: <title> ... </title> per evidenziare sia il marcatore di iniziosia il marcatore di fine che devono stare prima e dopo il testo contrassegnato con il tagscelto. Ad esempio, per contrassegnare un paragrafo si usa <p>, come nell’esempio chesegue:

<p>Ecco un paragrafo che finisce con punto e a capo.</p>

2. Elementi vuoti, che non descrivono dati ma che al contrario includono informazioni al-l’interno del documento, per esempio un’immagine, una riga orizzontale, o una inter-ruzione di riga. Tutti e solo gli elementi vuoti terminano con “/>. Ad esempio: <imgsrc=”unafoto.gif”/> oppure <br />.Nel primo caso, per l’elemento img (cheserve per includere nel documento immagini) src è un attributo. Ogni attributo è costi-tuito in generale da un nome (src nel nostro esempio), da un segno di uguale ’=’, e daun valore incluso tra virgolette, assegnato all’attributo, nel nostro caso il nome del file diimmagine unafoto.gif.

4. STRUTTURA DEI DOCUMENTI XHTML

I documenti XHTML sono identificati all’inizio degli stessi da una serie di dichiarazioni chehanno lo scopo di identificare il tipo di documento che si ha di fronte, e di permettere cosìla validazione dello stesso (il controllo della corretta sintassi dei tag utilizzati nel documen-to). Per far ciò è necessario includere alcune righe di dichiarazione, chiamata DTD (DocumentType Definition). In questa breve introduzione prenderemo in considerazione solamente la DTDStrict, la più rigorosa e la DTD Transitional, più compatibile con HTML 4. Ogni documentoXHTML che segua la DTD Strict dovrebbe iniziare con le seguenti righe:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nel caso si volesse un documento di tipo Transitional si usa quest’latro tipo di dichiarazione:

4

5 ELEMENTI BASE

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dopo queste righe di definizione segue l’elemento principale di ogni documento HTML, checontiene tutti gli altri, tutto il testo e tutte le informazioni del documento. Nel caso dell’XHTML(si noti l’attributo xmlns, denominato namespace XML, che conferma che ci troviamo difronte ad un file XHTML) prende la seguente forma:

<html xmlns="http://www.w3.org/1999/xhtml" lang="it">....</html>

All’interno dell’elemento <html> stanno due sezioni:

<head> È la sezione iniziale. Contiene informazioni che riguardano il documento nel suocomplesso All’interno della sezione <head> troviamo solo alcuni elementi (ad esempio:<title> e <meta>). Il titolo del documento, riportato tra i marcatori <title>....</title> è visualizzato solitamente nel titolo della finestra del browser utilizzato.

<body> contiene le informazioni vere e proprie di cui è composto il documento. <dd> Costitu-isce il corpo del documento. Gli elementi al suo interno sono posti nell’ordine con il qualevengono visualizzati. ono suddivisi in categorie per la struttura del documento, fra le qualiricordiamo le intestazioni (come <h1> ..</h1>), le ancore ( <a ... > </a>), idelimitatori di paragrafo (<p> .. </p>) e le liste (<ul> .. </ul>).

In sintesi, la struttura completa di un documento XHTML è la seguente:

<?xml version="1.0" encoding=”ISO-8859-1?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!---- informazioni sul documento --></head><body><!---- documento vero e proprio --></body></html>

5. ELEMENTI BASE

I paragrafi costituiscono in genere gran parte di un documento. Sono parti di testo che in-iziano con la maiuscola e terminano con un punto a capo. Per identificarli appropriatamente ènecessario contrassegnarli con il tag <p> ...</p>.

5

6 LISTE DI TUTTI I TIPI

Per andare a capo all’interno dello stesso paragrafo, per esempio al termine di una riga diuna poesia, è possibile marcare l’ "a capo" solitario con il tag vuoto <br />.

Per tracciare una riga orizzontale, si usa il tag vuoto <hr />.Nota: per pigrizia (ma anche molti programmi WYSIWYG lo fanno) si tende a scrivere i tag

di paragrafo senza chiuderli. È un comportamento che occorre cercare di evitare, dato che lenuove versioni dei browser HTML non tollereranno più questo tipo di "errore".

Per inserire un commento nel linguaggio XHTML occorre usare il tag

<!-- testo ......... -->

6. LISTE DI TUTTI I TIPI

Nei nostri documenti XHTML è possibile creare diversi tipi di liste. Per le liste è necessarioutilizzare almeno due livelli di tag: il primo per dichiarare la lista, il secondo e i successiviper identificare le varie voci (issue) della lista medesima. Annidando questa struttura base èpossibile creare liste con diversi livelli di struttura.

Una lista ordinata (ordered list) è compresa tra i tag <ol> ... </ol>; ogni voce dellalista (list item) è indicato tra gli elementi <li> ... </li>. Ad esempio per ottenere laseguente lista:

1. prima voce della lista

2. seconda voce della lista

3. terza voce della lista

è necessario marcare il testo nel seguente modo:

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

Invece una lista non ordinata (unordered list) è compresa tra gli elementi <ul> ... </ul>; ognivoce della lista anche in questo caso è contrassegnata dagli elementi <li> ... </li>. Ad esempioper ottenere una lista un po’ più sofisticata della precedente perché strutturata, senza numerid’ordine, come quella mostrata qui sotto ...

• prima voce della lista

• seconda voce della lista sempre allo stesso livello

– terza voce della lista, ma stavolta in un livello più interno

∗ e via di questo passo con ulteriori livelli

6

7 TITOLI E SOTTOTITOLI

• torno al livello base e finisco

... è necessario marcare il testo nel seguente modo (si noti che l’indentazione è solo funzionalead una migliora leggibilità):

<ul><li> prima voce della lista </li><li> seconda voce della lista sempre allo stesso livello</li>

<ul><li> terza voce della lista, ma stavolta in un livello

più interno</li><ul><li> e via di questo passo con ulteriori livelli</li></ul>

</ul><li> torno al livello base e finisco </li></ul>

Se invece vogliamo fare una lista di termini e definizioni (definition list), come quella del-l’esempio qui sotto riportato, è necessario includere tutta la lista tra gli elementi <dl> ...</dl>; ogni termine da definire (definition term) è indicato tra gli elementi<dt> ... </dt>, seguito dalla sua definizione contrassegnata dagli elementi <dd> ...

</dd>. Ecco l’esempio:

XHTML

Un linguaggio a marcatura utilizzato per la creazione di documenti per Internet.

XML

Un metalinguaggio utilizzato per la creazione di linguaggi a marcatura

Per ottenere l’esempio mostrato qui sopra è stato utilizzato il seguente codice:

<dl><dt>XHTML</dt><dd>Un linguaggio a marcatura utilizzato per la creazione di documentiper Internet.</dd><dt>XML</dt><dd>Un metalinguaggio utilizzato per la creazione di linguaggia marcatura</dd></dl>

7. TITOLI E SOTTOTITOLI

Le intestazioni (heading) per i titoli di diverso livello, servono per evidenziare titoli di capitolo,sottotitoli, titoli di paragrafo, etc. I livelli a disposizion sono 6, in ordine decrescente di grandez-za e importanza. In pratica cercano di ricostruire la struttura tipica di un un articolo di giornale

7

8 ANCORE O HYPERLINKS

con titolo, sottotitolo, occhiello ecc. Si tenga presente che di norma i livelli dal 4 in giù for-niscono caratteri piccoli (inferiori al testo normale) e scarsamente leggibili. I tag di intestazioneNON richiedono, al loro interno, un tag di paragrafo.

• Primo livello: <h1>Titolo</h1>

• Secondo livello: <h2>Sottotitolo</h2>

• Terzo livello: <h3>Occhiello</h3>

• Quarto livello: <h4>Paragrafo</h4>

• Quinto livello: <h5>Comma</h5>

• Sesto livello : <h6>Sottocomma</h6>

8. ANCORE O HYPERLINKS

Sono forse gli elementi più importanti di un documento XHTML perché trasformano il normaletesto in ipertesto,

Che cos’è allora un ipertesto? Delle tante possibili definizioni di ipertesto, abbiamo sceltoquella di [LNV] ovvero:

L’ipertesto è una forma di testo composta da blocchi di "scrittura" e immaginicollegate da link, che permette una lettura multilineare e multisequenziale.

È una forma di testo che permette al lettore di abbracciare o di percorrere una granquantità d’informazioni in modi scelti dal lettore stesso, e, al contempo, in modiprevisti dall’autore.

Il link è il modo grazie al quale è possibile passare tra i vari elementi che costituiscono l’ipertesto.Di fatto, il world wide wibe compone un unico ed enorme documento ipertestuale. Il tag uti-lizzato per la realizzazione del link si dice àncora ed è contrassegnata dall’elemento <a> ...</a>, con l’avvertenza di assegnare all’attributo href il valore della risorsa da richiamare.Facendo clik sulla zona racchiusa dall’ancora si richiederà il passaggio e la visualizzazione dellanuova informazione.

Prima di passare agli esempi è però necessario introdurre il concetto di URL (Universal Re-source Locator), e la sua estensione più generale, l’URI (Universal Resource Identifier). Sitratta di una stringa che permette di identificare senza incertezza una risorsa (testo, grafica oaltro) presente su internet o sul nostro calcolatore. Nel caso si voglia fare riferimento ad unapagina web, l’URL corrisponde semplicemente all’indirizzo che si legge nella barra dell’ind-irizzo del browser, per esempio "http://www.itisvinci.com/informatica", ed èquesto il valore da assegnare all’attributo href. Facciamo per esempio riferimento nel seguitoa qualche sito di notizie:

8

9 IMMAGINI

<a href="http://www.ansa.it">il sito dell’ ANSA</a><a href="http://www.peacelink.it">il sito di Peacelink</a><a href="http://www.warnews.it">il sito di War News</a>

Nel documento il testo dell’ancora risulterà evidenziato come link da attivare (la sottolineaturadel testo sta proprio ad indicare che si tratta di un link; a seconda che sia stato già visitato o menoil colore risulterà differente). Per attivare il link è sufficiente cliccare sullo stesso con il mouse,e la risorsa indicata come valore dell’attributo href verrà visualizzata. È anche possibile fareriferimento ad un indirizzo email, nel qual caso si porrà ad esempio:

href="mailto:m.schumacher@ferrari.it".

È possibile accedere a parti specifiche di un documento assegnando alla risorsa di destinazioneun valore per l’attributo id e utilizzando il valore di questo attributo come identificatore diframmento in uno URI. Ad esempio, questo è collegamento ad un’URI con un identificatore diframmento che punta ad un’ancora denominata “una_parte”:

<a href="http://www.unsito.org/testo_lungo.html#una_parte">clicca qui! </a>

Nel file testo_lungo.html dovrà però esistere un tag qualsiasi con assegnato all’attributo id ilvalore una_parte. Ad esempio, utilizzando di nuovo l’elemento àncora (per identificare il puntod’arrivo del collegamento, avremo:

<a id="la_parte_puntata"> Ecco dove arriveremo!</a>

Infine, nel caso si vogliano utilizzare dei riferimenti relativi, senza specificare tutto l’URI del-la risorsa puntata (cosa molto comune nel caso di documenti di uno stesso sito web, che sirichiamano reciprocamente), è possibile abbreviare il riferimento nel modo seguente:

<a href="index.html">Vai al file di indice!(in questa stessa directory) </a>

9. IMMAGINI

Una delle caratteristiche di maggior successo del Web è quella multimediale, in particolare lacomponente grafica. È opportuno mettere in risalto che, anche se la tendenza alle connessioniveloci sta aumentando, una pagina grafica può spesso incorrere in una serie di rischi quali:

• Incompatibilità con moderni browser testuali (lynx, wap) e/o di vecchia generazione

• Scarsa leggibilità

• Eccessiva lentezza

9

10 FORMATTAZIONE

In linea di massima occorre cercare di limitare al massimo le immagini, o quantomenolimitarnele dimensioni. Si tenga presente, in particolare, che le gif/jpeg animate ovviamente occupano lospazio corrispondente ad ognuno dei fotogrammi visualizzati dall’animazione.

Se si vuole includere un immagine nel documento la si contrassegna con l’elemento vuoto(dato che non contiene testo) img, in questo modo: <img src="Url dell’immagine"/>. Si noti l’utilizzo dell’attributo src per specificare la posizione dell’immagine da includere.

Specificando all’interno dell’elemento img gli attributi height=”altezza” ewidth=”larghezza” è possibile impostare la dimensione di visualizzazione dell’im-magine prescindendo dalla reale dimensione della stessa. Gli attributi height e widthindicano rispettivamente l’altezza e larghezza e possono essere espressi in pixel o in percentualedella dimensione dell’immagine. Anche se opzionali, questi due attributi sono essenzialiper velocizzare la velocità di caricamento dell’immagine e quindi diminuire il tempo divisualizzazione della pagina.

L’attributo alt permette di specificare testo alternativo all’immagine, sia per motivi di ac-cessibilità della pagina web da parte di non e ipo-vedenti, sia per tutelarsi nel caso per qualchemotivo il caricamento dell’immagine fallisca. Questo testo viene visualizzato al posto dell’im-magine nei casi in cui l’immagine stessa non venga caricata. Verrà inoltre viene visualizzato alpassaggio del mouse sull’immagine. Se, inoltre, si vuole che quando il mouse scorre al di sopradell’immagine venga visualizzato un diverso messaggio, si può assegnare un valore all’attributotitle, valore che - se presente - prevale sul valore dell’attributo alt. Se si vuol fare di unimmagine un link è sufficiente nidificare l’elemento img all’interno dell’elemento <a>, comenell’esempio seguente che riassume un po’ tutto quanto:

<a href="http://www.overseas1971.org"><img src="logoOverseas.gif" alt="OrganizzazioneOverseas" title="Click qui per visitare il sitodell’organizzazione Overseas di Spilamberto,in provincia di Modena" /> </a>

10. FORMATTAZIONE

Un altro fascino degli ipertesti è quello di visualizzare i dati in modo molto ricco, al di là delleimmagini: è possibili variare tipi di carattere, usare colori e quanto altro. Molte di queste pos-sibilità, putroppo, introducono pesanti problemi di compatibilità che impediscono di avere unarappresentazione uniforme al varariare del browser, dei font e/o del sistema operativo utilizzato.

10.1. Formati fisici

Uno degli aspetti più semplici da modificare è quello relativo al carattere del testo: inparticolare è possibili utilizzare semplici marcatori in modo da attivare i seguenti effetti:

• Grassetto (bold): <b> Esempio </b>

• Corsivo (italic): <i> Altro esempio </i>

10

10.2 Formati logici 10 FORMATTAZIONE

• Sottolineato (underline): <u>Terzo esempio </u>

• Testo più grande: <big>Quarto esempio </big>

• Testo più piccolo: <small>Quinto esempio </small>

10.2. Formati logici

I formati che seguono si riferiscono più al significato del testo che non agli aspetti specifici dellaloro formattazione, lasciando al browser o agli stili le modalità di sviluppo.

• Abbreviazione: <abbr title=”Professore”>Prof.</abbr>

• Indirizzo: <address=”Professore”>Via Peruzzi, 9</address>

• Acronimo: <acronym title=”Hypertext Markup Language”>HTML</acronym>

• Citazioni: Esistono diverse tipologie di citazioni, e tutte supportano l’attributo opzionalecite per indicare la sorgente della citazione:

– Cite indica una rivista o giornale <cite>Corriere della Sera</cite>

– Q è una citazione breve, al massimo diuna riga: <q>Cos&igrave; parl&ograve;Zarathustra</q>

– Blockquote offre la possibilità di citazioni su più righe (per esempio una poesia:<blockquote>Tanto va la gatta al largo <br />che ci lascia lo zampino</blockquote>

• Codice di computer: solitamente posto all’interno del tag <pre>, per evitare chel’indentazione del codice sia cancellata: <code> #include \lt;stdio.h&gt;</code>

• Testo modificato: per indicare testo chè è stato modificato dall’ultima versione del doc-umento si hanno a siposizione i tag <del> (testo cancellato) e <ins> (testo inserito)-opzionalmente con l’attributo cite per inidcare il motivo e una spiegazione con l’attrib-uto title. <del title="CENTER deprecato"><P>L’elemento CENTER &egrave; deprecatoin HTML 4.0 e successivi</p></del>

• Definizione: <dfn>Teorema di Pitagora</dfn>. Poco supportato dai browser.

• Enfasi: equivalente logico di <i>: voglio <em>questo</em>!

• Input da tastiera: Battere <kbd>Invio</kbd>

• Output su schermo: Il computer chieder&agrave; <samp>Inserisci in numero</samp>

• Forte enfasi: equivalente logico di <b>. E voglio <strong>solo</strong> questo.

• Variabile di un programma: <var>int x;</var>

11

10.3 Testo con... style 11 PARAGRAFI

10.3. Testo con... style

È possibile specificare il font da utilizzare per la scrittura del testo, il colore e la dimensione.Fino a non molto tempo fa si utilizzava il tag <font>, ma che è caduto in disgrazia pressoil [W3C] per il grande abuso che se ne fa abitualmente (in gergo: “deprecato”). Per questomotivo si consiglia di utilizzare il tag <span>, che unitamente all’attributo style permette dimodificare l’aspetto di una qualsiasi sezione di testo.

Partiamo con un esempio: “Un testo bislacco“ può risultare da questo codice:

Un testo <span style=”color:blue;font-family: ’Century Schoolbook’ Times serif;font-size: 12pt, font-weight: bold”> bislacco </span>

Con un unico tag è quindi possibile possibile modificare radicalmente l’aspetto, cambiando nel-l’odine il colore, il font, le dimensioni e scrivendolo in grassetto. I possibili valori da assegnarea style, sono tantissimi: tra i più usati ricordiamo:

font-family Stabilisce il carattere da usare, se presente. Tenere però presente che usare font”strani” può seriamente compromettere la visibilità della pagina con altri sistemi operativio, più semplicemente, in mancanza del font necessario. Per questo motivo i buoni redattoriXHTML propongono una lista di possibili font, in ordine di preferenza (tenendo presenteche “courier” e “courier new” NON sono la stessa cosa!)

font-size Stabilisce la dimensione del font. Le unità di misura sono in punti (es: 14pt), valoriprefissati fissi (xx-small,x-small, small, medium, large, x-large,xx-large) o relativi (smaller, larger), o in percentuale (es: 150%)

font-style Stabilisce se il font deve essere normale o corsivo (normal, italic)

font-weight Stabilisce se il font deve essere normale o in grassetto, con varie gradzioni(normal, bold, bolder, lighter).

color Stabilisce il colore del font

border Premette di indicare l’esistenza del bordo attorno al testo (in pixel) ed eventualemtnestile e colore. Esempio: border: red 3px.

11. PARAGRAFI

Abbiamo già visto il tag <p> ... </p> qualche pagina addietro. Ora occorre far notareche a questo tag possiamo applicare l’attributo style che abbiamo visto or ora: in questo casoi cambiamenti saranno attivi per l’intero paragrafo. Nel caso dei paragrafi abbiamo però unimportate valore di style aggiuntivo:

text-align Stabilisce se il testo deve essere allineato a bandiera a sinistra (left), a destra(right), giustificato (justify) o centrato (center). Si noti che questo attibutosostituisce il tag <center>, oramai deprecato.

12

13 COLORI

In certi casi può essere utile avere un insieme di attibuti applicabili a più paragrafi, anzichéuno solo. Per questo motivo esiste il tag <div> ... </div>, inventato proprio per questoscopo.

In certi casi, per esempio in file di testo di programmi per computer, può essere utile seguirela formattazione del file, senza dover impazzire a riprodurre la formattazione del file di testocon <br> e altri artifici. Per questo motivo si utilizza il tag <pre>, per indicare che il testo èpreformattato.

12. CARATTERI SPECIALI

Come è noto, i caratteri non-ASCII hanno rappresentazioni diverse a siconda del sistema opera-tivo utilizzato: il modo corretto di rappresentali in modo che siano universalmente riconosciuticonsiste nell’utilizzare le cosiddette entità (entities). Esse sono sempre costituite dal simbolo“&” seguite dal nome dell’entità e chiuse dal putnto e virgola. Eccone alcune delle più diffuserelative alla lingua italiana.

& e “ &amp; e &quot;

< e > &lt; e &gt;

à,è,ì,ò,ù &agrave;, &egrave;, &igrave;, &ograve;, &ugrave;

È &Egrave;

é &eacute;

c© &copy;

[spazio] &nbsp;

La lista è volutamente incompleta: l’elecono completo delle en-tità si può trovare facilmente su Internet, per esempio qui.http://www.ramsch.org/martin/uni/fmi-hp/iso8859-1.html. Nota distile: ricordiamo che l’italiano corretto prevede che gli accenti nella nostra lingua siano sempredi tipo grave, tranne alcune eccezioni (sicché, perché, né, acciocché e così via). Per ulterioridettagli si veda [Appunti Linux].

Importante! Molti browser sono ”tolleranti” e sono in grado di interpretare correttamente ilcarattere non-ASCII...se il file è stato scritto per il medesimo sistema operativo. Non lasciateviingannare dalle apparenze e dalle prove: cercate di usare le entities non appena possibile.

13. COLORI

Un testo multimediale con i colori risulta generalemente più accattivante di un testo in bianco enero. L’uso dei colori in XHTML può essere fatto in due modi:

13

14 ATTRIBUTI DI PAGINA

• Utilizzando i nomi dei colori standard: black, white, red, green, blue,aqua, yellow, fuchsia, grey, olive, lime, navy, silver,teal. Tali colori standard sono largamente utilizzati in tutti i browser in grado di leggereHTML 4.0.

• Utilizzando il codice esadecimale RGB: si tratta di un codice costituito dal simbolo “#”seguito da tre numeri esadecimali a due cifre che indicano il valore del colore rosso (red),verde (green) e blu (blue) nel colore desiderato. Alcuni colori di esempio

Colore Codice RGBRosso #FF0000Nero #000000Ocra #B27F1A

Acquamarina #3CEAE1

Per scrivere quindi una parola in rosso il codice corrispondente è

<p><span color=”#FF0000”>Rosso </span> come il fuoco!</p>

14. ATTRIBUTI DI PAGINA

È possibile specificare il colore della pagina, del testo, dei link non visitati, dei link visitati e unimmagine da usare per riempire lo sfondo e altro e ancora. Le modalità differiscono nel caso diun XHTML Transitional rispetto a un XHTML Strict.

Transitional: E’ necessario indicare alcuni attributi del tag <body>...</body>,specificamente, :

bgcolor stabilisce il colore dello sfondo (background color)

text colore del testo

link colore del collegamento

alink colore del link attivo (active link), quando vi passa sopra il mouse

vlink colore del link visitato (visited link).

background stabilisce l’immagine di sfondo

Ecco un esempio completo:

<body bgcolor="black" text="white" link="magenta"alink="blue" vlink="yellow">

Strict: Gli attributi bgcolor, text e simili sono deprecati in favore degli elementi di stile.

14

16 STRUMENTI DI SVILUPPO

15. TABELLE

Premettiamo che le opzioni a disposizione del programmatori sono tali e tente, per quanto con-cerne le tabelle, che in questa prima opzione ci limiteremo a mostrare solo le opzioni essenziali.Il modo più semplice è quello di mostrare un esempio: una tabella con un aspetto come ilseguente.

Uno Due TreQuattro Cinque Sei

ha un codice come il seguente:

<table border="1"><tbody><tr> <td> Uno </td>

<td> Due </td><td> Tre </td> </tr>

<tr> <td> Quattro </td><td> Cinque </td><td> Sei </td> </tr>

</tbody></table>

Quindi una tabella è racchiusa dai tag <table><tbody> ... </tbody></table>; alsuo interno si trova il tag <tr>..</tr> (table row) che indica l’esistenzadi una riga dellatabella; a sua volta questo tag contiene uno o più tag di tipo <td>...</td> (table data) checontengono i dati della tabella.

Grazie a questi elementi, il browser è in grado di costruire la tabella nella sua interezza.All’interno di ogni tag è possibile specificare moltissimi attributi, in particolare quelli di stile,oltre a

16. STRUMENTI DI SVILUPPO

A questo punto avete già gli elementi per realizzare le vostre prime pagine HTML, ma qualesoftware utilizare? Occorrono due tipi di strumenti, uno per realizzare le pagine (redattori oeditor) e uno per visualizzare le pagine realizzate (browser).

16.1. Browser

Esistono moltissimi programmi che potete utilizzare per navigare sul web, e quasi tutti hannouna loro controparte in altri sistemi operativi. I browser più famosi sono gratuiti, e hanno tuttiun’interfaccia simile, abbastanza semplice da imparare anche per un utente alle prime armi.

Internet Explorer nacque come lo strumento di navigazione di casa Microsoft e, dalla versione“Windows 95” in avanti, si integrò sempre più con esso rendendo “impossibile” l’uso diWindows senza I.E. Ha il pregio di essere supportare tutti i siti Internet esistenti ma èsoggetto a diversi problemi di sicurezza. Esiste sia nella versione Windows che MacOs.

15

16.2 Redattori testuali 16 STRUMENTI DI SVILUPPO

Mozilla Dal nome un po’ insolito1 , Mozilla non è altro che il “cuore” che batte all’interno diNetscape Navigator, per cui possiamo considerarli del tutto equivalente, numerazione aparte (Mozilla 1.2 equivale a Navigator 7.0). A tutt’oggi è il programma più completo perla navigazione, particolarmente ricco di aggiunte (plug-in) che permettono di aumentarele funzionalità del programma. Esiste per tutti i sistemi operativi attuali.

Konqueror è il file manager del progetto KDE. Dopo un inizio travagliato, la versione attualefunziona piuttosto bene, tanto che la Apple ha deciso di utilizzarlo come base per il loroprossimo browser, Safari. Esiste solo per i sistemi UNIX-Like, mentre Safari esiste soloper MacOs.

Opera al contrario dei suoi cugini ha un uso limitato di risorse ed è velocissimo. E’ disponibilesia in forma shareware o adware per i sistemi Windows o Unix-like.

Ricordiamo che è possibile imparare parecchio su questo linguaggio guardando il listato deidocumenti presenti su Internet, poiché tutti i browser hanno un opzione “Visualizza codice sor-gente”. Si tenga però presente che la maggior parte delle pagine web attualmente non sonoscritte in XHTML 1.0 ma in HTML 4.01, con alcune differenze rilevanti.

16.2. Redattori testuali

Gli strumenti di redazione testuali sono vivamente consigliati per le prime esperienze con questolinguaggio: permettono infatti di potersi rendere conto di quello che si sta facendo e come appareuna codifica XHTML pura. Se si è in grado di scrivere XHTML, si impara ad utilizzare infretta un editor più avanzato e simili, e - cosa forse ancora più importante - saranno in grado dicorreggerne gli immancabili problemi (il contrario non è sempre vero). Di più, non pochi esperticontinuano ad utilizzare strumenti testuali per la potenza che offrono. Come redattori puramentetestuali troviamo

Notepad Strumento davvero rudimentale presente su Windows. In ogni caso preferibile a Worde Wordpad, ed ha il dono dell’ubiquità.

vi Editor di testo potentissimo, con sostituzioni multiple e syntax highlighting (mostra i tag,attributi e testo in colori diversi, semplificando la riceca degli errori). Molto difficile dautilizzare per i principianti. Per Linux & Windows.

mcedit Editor testuale rapido e semplice che ricorda quello del Borland C, ma con syntaxhighlighting. Per Linux

kwrite Editor grafico per Linux con syntax highlighting

BBedit Supercorrazzata degli editor per MacOS.

Per visulaizzare il risultato occorre fare affidamento al browser esterno.

1dovuto, pare, alla somiglianza tra l’enorme quantità di codice e un noto mostro alto venti piani

16

16.3 Redattori semigrafici 16 STRUMENTI DI SVILUPPO

Figura 1: Tre modi di scrivere XHTML: Vi, Quanta, Dreamweaver

16.3. Redattori semigrafici

I readattori semigrafici sono programmi che mettono a disposizione dell’utente oltre all’editordi testo, anche una serie di strumenti che “semplificano la vita”: per esempio per inserire un col-legamento a un’immagine sarà possibile selezionare dal dialogo del sistema il file e gli attributiprincipali verranno assegnati automaticamente. Facendo click su un pulsante è possibile vederecome il (o i) browser all’interno di una finestra, ma non è possibile modificare direttamente laversione grafica.

Si tratta forse del sistema che coniuga il massimo della versatilità con una buona dose disemplicità d’uso. Tra i programmi più diffusi troviamo

HotDog (Shareware, $99, 30gg prova). Per Windows

Coffeecup (Shareware, $49, 45 gg prova). Per Windows.

Quanta Editor grafico di KDE. Per Linux/Unix.

16.4. Redattori grafici

Si trata di programmi che permettono di modificare direttamente il programma in forma grafica,vedendo immediatamente il risultato. Pur essendo piuttosto semplici da usare, il loro proble-ma è spesso quello del limitato controllo disponibile e del codice XHTML prodotto, spessoincomprensibile e/o di scarsa qualità, specie accendendo alle funzioni più avanzate. Ecco alcuneopazioni

Mozilla/Netscape è l’opzione che consigliamo:è disponibile su molte piattaforme. Semplice ecompleto.

Amaya Editor realizzato direttamente dal [W3C], un po’ ostico ma in grado di produrre SOLOcodice corrretto. Per tutti i sistemi operativi

Dreamweaver Uno dei programmi migliori del suo campo, in grado di realizzare siti piuttostocomplessi automatizzando molti aspetti. Per Windows e MacOS.

Frontpage Il programma di Microsoft va, se possibile, evitato. Produce codice di scarsa qualitàe generalmente incompatibile con tutto quanto non sia interamente Microsoft.

17

16.5 Quanta: prova su strada 16 STRUMENTI DI SVILUPPO

Continuando con la nostra analisi, vale la pena esaminare le possibilità offerte da MS Word,Star/Open office o Publisher. OK, so che producono codice HTML veramente terrificante!Ma comunque lo fanno - a partire da documenti già esistenti - con relativa facilità. Se questopuò essere utile all’inizio, il codice che producono è assolutamente inadatto per usi professionalisul web (star/openoffice è leggermente meglio).

16.5. Quanta: prova su strada

Come esempio d’uso di programma evoluto creeremo una pagina rapidamente con Quanta,versione 3.1.

Avviando il programma vi troverete di fronte a una finestrasimile a Fig. 1. Per prima cosa stabilite il DTD: selezionate“Strumenti | Cambia DTD”. Nel dialogo che apparirà (mostra-to a lato) scegliete “XHTML 1.0 Transitional” (non è possibileancora selezionare altro tipo di DTD) avendo cura di attivarela voce “Converti il documento al DTD selezionato”.

Ora potete giocare con gli attributi di pagina: fate click sul-la linguetta “Standard” e quindi sul bottone con la bacchettamagica. Apparirà il dialogo mostrato dove potrete fissare confacilità gli attributi dell’elemento <body>.

Ora potete giocare con gli attributi di pagina: fate click sul-la linguetta “Standard” e quindi sul bottone con la bacchettamagica. Apparirà il dialogo mostrato dove potrete fissare confacilità gli attributi dell’elemento <body>.

Ora potete inserire il testo della pagina: fate prima clik con il pulsante P che inserirà i tagdi apertura e chiusura di paragrafo. Se volete assegnare un tag a un elemento di testo (peresempio, il tag <b>) è sufficiente selezionare il testo e premere il pulsante desiderato. Sotto lalinguetta “Tipi di carattere” avrete rapido accesso ai tag di intestazione e di modifica di carattere2

Particolarmente utile, sotto la linguetta “Altro”, l’elenco di tutte le entità HTML.

2Si noti che il programma non usa il tag style per modificare i caratteri ma il deprecato font. Volendo, è facilemodificare il comportamento modificando le impostazioni in “Impostazioni | Azioni”

18

17 TESTING & UPLOAD

Facendo click sull’icona con l’ancora potrete inserire un linkipertestuale.

Particolarmente semplificato risulta l’inserimento di immagi-ni, per le quali risulta calcolata automaticamente la dimensioniin pixel. Per farlo, basta selezionare l’icona con l’immagine (difianco all’ancora) e inserire il nome del file richiesto.

Per visualizzare rapidamente come appare la pagina, fare click sull’icona con l’occhio: ilcodice scomparirà per fare posto alla pagina in forma grafica (così come la interpreterebbekonqueror.

Queste poche note hanno solo scalfito la superficie del programma: per le sue potenzialità,consultate il sito e il manuale di istruzioni.

17. TESTING & UPLOAD

Il primo fattore è:"Vogliamo produrre qualcosa (per es. un sito web reale) come conclusione delnostro progetto?" La risposta a questa domanda è quasi sempre sì. Allora, dobbiamo vedere dovesarà collocato. Il sito web sarà collocato su una rete locale o deve andare su una rete globale(Internet)? Incomincierà a vivere localmente (per es. per sviluppo e testing) - e speriamo dipoterlo portare successivamente su rete globale (quando sarà completatp)? In tutti i casi occorreeffettuare diverse prove prima di passare al rilascio definitivo, esattamente come accade per iprogrammi per computer standard.

17.1. Test locale

Le prove in locale si limitano (di solito) al lancio del browser preferito e controllare se qualcosanon va. L’esistenza però di una grande varietà di browser crea di fatto numerosi problemi airedattori [X]HTML, poiché l’aspetto della pagina visualizzata varia fortemente al variare dellaversione, del programma e/o del sistema operativo. L’unica soluzione consiste nell’effettuaremolte prove, utilizzando i diversi browser a disposizione. Idealmente, si dovrebbe procederecosì:

19

17.2 Test remoto 17 TESTING & UPLOAD

• effettuare prove su diverse piattaforme hardware, almeno su quelle più comuni(Intel+Windows, Intel+Linux, Macintosh)

• effettuare prove con diversi browser (Da iExplorer3.0 a 5.0, Netscape, HotJava, Amaya,Lynx (?) ).

• provarlo con diverse risoluzioni dello schermo (640x480, 800x600, 1024x768). È belloavere uno schermo grande, ma non tutti ce l’hanno!

17.2. Test remoto

Ma la vera la prova del fuoco consiste non tanto nelle prover sul nostro computer, quanto farele “prove sul campo”. Per far questo occorre caricare il sito sul server Internet e accederviattraverso la rete. In questo modo errori anche banali (minuscole/maiuscole, percorsi assoluti,ecc.) salteranno immediatamente all’occhio.

Un esempio: supponiamo che sviluppiate localmente con un Personal Web Server (PWS) del-la Microsoft, e quando avete finito inviate il vostro sito al vostro ISP preferito - che gestisceUnix+Apache. Con PWS è facile scrivere "\" per "/" per separare le subdirectory, e PWS co-munque funziona. Apache invece non lo fa, rispettando così la convenzione Unix (è ragionevole,vero?). Un errore stupido, ma succede.

Non è questa la sede per trattare a fondo l’argomento, ma per trasferiri i files al server occorre:

1. Disporre di un server accessibile (esempio: ftp.tiscalinet.it)

2. Disporre di un account sul sito in questione (esempio: franz / password: destroyer)

3. Utilizzare un programma di ftp (in modo testo: comando ftp; in modo grafico CuteFTP oInternet Explorer (windows), ncftp, konqueror, gftp (Linux), anarchie (MacOS)) pertrasferire TUTTI i files nella directory assegnata, eventualmente rispettando la struttura adalbero da voi creata (sottodirectories).

17.3. Validatori

Scrivere codice XHTML è piuttosto semplice - lo dimostra la quantità di pagine presenti suInternet, scritte in gran parte da non professionisti. Scrivere codice XHTML corretto è, diconverso, altrettanto difficile - lo dimostra la qualità media delle pagine presenti su Internet.

Scrivere codice corretto non vi assicura che la vostra pagina verrà vista nello stesso modo datutti, ma scrivere codice scorretto vi darà la certezza che solo pochi vedranno la pagina comevolevate.

Per controllare la correttezza formale del codice esiste però un semplice strumento a dispo-sizione di tutti: è il validator validator http://validator.w3.org, che appare in figura2.

È possibile accedere al servizio in due modi: fornendo l’URL di una pagina accessibile pub-blicamente via internet (quindi premendo il pulsante “Validate URL”) o spedendo direttamenteil file (selezionando il file con il pulsante “Sfoglia”, quindi premendo “Validate File”.

Il controllo è estremamente pignolo, tanto che chi passa questo controllo può perfino fregiarsidi un apposito logo!

20

B LEGALESE

Figura 2: Servizio di validazione [X]HTML del w3c

18. E ora?

Padroneggiando tutto quello che è stato presentato in queste pagine, dovreste essere in grado giàrealizzare pagine XHTML di media difficoltà. Fatelo! Nel prossimo articolo esamineremo unnuovo DTD (frameset), molti nuovi elementi e un concetto complesso e interessante: i fogli distile (CSS)

A. Esercizi e domande

1. Rappresentare un articolo, con tanto di testo, titolo, occhiello ecc. dell’odierna edizionedella Gazzetta dello Sport.

2. Costruire un gruppo di pagine, linkate fra loro, che descrivano le tre caravelle di CristoforoColombo

B. Legalese

La base di questo documento è stata fornita dalle pagine introduttive di Mario Biraghi (vedi[Biraghi]. Questo documento è pertanto proprietà c©2003 Marcello Missiroli, Stefano Lognag-nani e Mario Biraghi e può essere liberamente distribuito secondo le norme della Free Docu-mentation License. In pratica, siete liberi di stampare, modificare ed emendare questo scritto,purché la modifiche alla scritto stesso soggiaciano a loro volta alla FDL. Per dettagli tecnici sullalicenza, vedere http://www.gnu.org/licences/fdl.html.

21

Indice analitico

a capo, 6attributo

alink, 14alt, 10background, 14bgcolor, 14cite, 11height, 10href, 8link, 14src, 10style

border, 12color, 12font-family, 12font-size, 12font-style, 12font-weight, 12

text, 14title, 10vlink, 14width, 10

browserInternet Explorer, 15Konqueror, 16Mozilla, 16Opera, 16

carattere, 10font, 12

codice RGB, 14colori, 13commento, 6

DTD, 4

elementistandard, 4vuoti, 4

elemento<a>, 8

<abbr>, 11<address>, 11<b>, 10<big>, 11<blockquote>, 11<body>, 5, 14, 18<br />, 6<center>, 12<cite>, 11<code>, 11<dd>, 7<del>, 11<dfn>, 11<dl>, 7<dt>, 7<em>, 11<h1>,<h2>,..., 8<head>, 5<hr />, 6<html>, 5<i>, 10<img />, 10<ins>, 11<kbd>, 11<li>, 6<ol>, 6<p>, 5, 12<pre>, 13<q>, 11<samp>, 11<small>, 11<span>, 12<strong>, 11<table>, 15<tbody>, 15<td>, 15<tr>, 15<u>, 11<ul>, 6<var>, 11deprecato, 12

22

Indice analitico Indice analitico

entità, 13, 18

HTML, 2, 3

immagine, 10intestazioni, 7ipertesto, 8

label, 4link, 8lista

definizioni, 7non ordinata, 6ordinata, 6voce, 6

Netscape, 16

riga orizzontale, 6

tag, 3

URI, 8frammento, 9relativo, 9

URL, 8

XHTML, 2XML, 3, 5

23

Riferimenti bibliografici Riferimenti bibliografici

Riferimenti bibliografici

[Biraghi] Manuale dell’HTML per principianti, in Italiano(by Mario Biraghi mailto:biraghi@usa.net, ),http://www.geocities.com/SiliconValley/5675/html_d.htm

[LNV] Linguaggi Non Verbali e Multimediali ,http://digilander.libero.it/mogent/cm/ricerche/Di SantoMagentManzari.htm

[Appunti Linux] Appunti Linux, Stile letterario, http://lagash.dft.unipa.it/AL/al155.htm

[W3C] Il world Wide Web Consortiumo, http://www.w3c.org

[LG] Insegnare HTML in classe, di Alan Ward c©1999 Linux Gazette.

[Quanta] Pagina di riferimento di Quanta: http://quanta.sourceforge.net

24