Nota bene: l'articolo proposto in questa pagina è proprietà dell'autore e non può essere distribuito o riutilizzato in alcun modo o forma senza il suo consenso scritto.
Le informazioni qui riportate risalgono alla data di pubblicazione dell'articolo e non è detto che siano ancora valide o che rispecchino lo stato attuale dei programmi, le posizioni delle persone interpellate o quelle degli autori stessi.

Avviso

Questo articolo suggerisce modalità di sviluppo web basate sulle capacità dei browser Amiga. Sebbene i concetti proposti siano tuttora validi e informativi, consiglio a chi volesse creare pagine web di studiare la struttura HTML ma usare per l'impaginazione esclusivamente la tecnologia CSS (cascade Style Sheet). In futuro conto di scrivere una guida più moderna e al passo con i tempi

L'articolo presenta un refuso circa l'elemento <P> che viene erroneamente indicato come chiusura di un paragrafo. In realtà un paragrafo viene aperto da <P> e chiuso con </P>, solo che la natura non formale di HTML consente di usare il solo elemento di apertura, che quindi ha un effetto a cascata.

Segnalo infine che ho cambiato il sito citato negli esempi, ormai chiuso, con uno più attuale.

Introduzione

Il web non è soltanto un mondo da consultare passivamente: prendere possesso di qualche metro dell'autostrada informatica è più facile di quanto si creda.

Con l'evolversi della rete da strumento per pochi esperti a fenomeno di massa sono aumentate le possibilità anche per chi non è avvezzo alla tecnologia. Oggigiorno creare un sito web ed inserirlo in rete è relativamente facile. Il problema, però, è sapere cosa si vuole fare e come farlo. In caso contrario, improvvisando, il risultato non potrà che essere deludente, portando a un sito come tanti se ne vedono, quando cioè si riescono a visualizzare, fra errori di programmazione ed eccesso di "optional" (JavaScript, animazioni Flash, ecc.) richiesti per la consultazione. Lo scopo di questo tutorial è proprio introdurre alla creazione del proprio sito, sia dal punto di vista strettamente tecnico sia riguardo i contenuti. Alla fine della lettura non sarete dei ciceroni del "web publishing" pronti a realizzare e vendere siti: per questo ci vuole applicazione e qualche approfondimento in più, che non mancheremo di dare se l'argomento risulterà di interesse. Ma avrete la possibilità di mettere in rete qualcosa di valido.
Partiamo dunque in questa esperienza, che sarà divisa in quattro fasi. E' doveroso premettere che questo articolo si rivolge soprattutto ai principianti, e propone una semplificazione degli argomenti trattati al fine di facilitarne la comprensione. Ci perdonino i più esperti, cui speriamo comunque di fornire se non altro qualche indicazione utile.

Creazione del sito

Contenuti e struttura

Prima di tutto, prima anche di sapere quali programmi ci serviranno, dobbiamo prendere carta e penna e decidere che cosa conterrà il sito che vogliamo creare. Per questo tutorial ci orienteremo verso una pagina personale ("Home page") in cui il lettore possa parlare di sé, scrivere cosa gli piace ed indicare i collegamenti ai suoi siti preferiti. Non si tratta di una scelta banale o limitante: parlare di argomenti che interessano o presentarsi è forse il miglior modo per impratichirsi, senza annoiarsi, su una base semplice ma che alla fine può risultare interessante anche per altri (la categoria delle pagine personali è fra le più apprezzate dai navigatori).


Immagine Il primo passo per realizzare un buon sito è deciderne la struttura. Più dettagliato è il piano di lavoro, più facile sarà gestire e aggiornare quanto creato.

Un sito normalmente è costituito da un insieme di pagine collegate fra loro con dei link. Così sarà anche per il nostro, per il quale suggeriamo una semplice struttura composta da una pagina principale, una con le informazioni sul proprietario del sito ed una di collegamenti a siti di amici o ai propri siti preferiti. Il tutto poi potrà essere espanso aggiungendo pagine dedicate ad altri argomenti di interesse, ma per adesso limitiamoci a questo.
Ora facciamo un passo indietro e pensiamo a qualche sito visto in rete nel corso di anni di navigazione. Come erano collegate le pagine? Quali erano i link più comuni? Ne citiamo due per rinfrescare la memoria del lettore: "Torna indietro" ("Back") e "Indice" ("Index"). Questi sono link usati per rendere più agevole la navigazione e permettere in qualsiasi momento di tornare alla pagina precedente o all'indice dei contenuti semplicemente con un clic del mouse. Anche l'organizzazione dei collegamenti fra le parti del sito (qualsiasi, anche il nostro composto da tre pagine) va studiata in fase di progettazione.
Una volta definita la struttura ed i contenuti è tempo di vedere quali programmi ci serviranno.

Software necessario

Chiaramente per creare un sito serve... un browser, se non altro per vedere quanto realizzato prima di metterlo in linea. Tutti i browser supportano la navigazione fuori linea, basta caricare un file con l'apposita opzione (generalmente "Apri file") e seguirne i collegamenti. Se questi sono relativi (ne riparliamo in seguito), il browser capirà che il materiale si trova sul nostro computer e non sulla rete, e ci permetterà di consultarlo senza doverci collegare, con un evidente risparmio di tempo e bolletta. Oltre al browser serve un editor di testi con il quale scrivere le pagine di cui è composto il sito. Volendo è sufficiente l'editor di sistema (Ed o il nuovo Editor del 3.5) ma ci sentiamo di consigliare vivamente CygnusEd o GoldED. Il secondo, a partire dalla versione 5, integra un potente supporto per la creazione di pagine web.


Immagine PPaint di Cloanto, disponibile gratuitamente su Aminet, mette a disposizione numerosi script ARexx utili a chi crea siti web.

Ci servirà poi un client FTP: chi mette a disposizione lo spazio web solitamente offre un accesso personalizzato ad un server FTP sul quale inviare i file che costituiscono il sito. Qui la nostra scelta cade su AmiTradeCenter, un potente client FTP che dalla sua ha l'essere totalmente gratuito ed il supportare l'invio ricorsivo delle directory. Ciò comporta un enorme risparmio di tempo, in quanto con pochi clic si può inviare l'intero sito (qualora col tempo cresca e superi le tre pagine attuali). Di contro, il programma risulta instabile su alcune configurazioni. In questo caso orientarsi su titoli come Gui-FTP (gratuito ma povero) e mFTP.
Come programmi di supporto grafico consigliamo PPaint e TVPaint. Di entrambi è disponibile una versione gratuita in rete. Il primo risulta utile per la realizzazione della classica grafica web (immagini in formato GIF o PNG, mappe, ecc.), mentre col secondo si possono realizzare scritte e loghi ad effetto, tanto per stupire un po’ il visitatore. Attenzione però a non esagerare: si dia priorità ai contenuti. Solo poi, eventualmente, spazio alla grafica. Un sito web non deve essere una mera galleria in cui esporre le proprie capacità grafiche, perché il web è già pieno di queste cose e chi approda sulla nostra pagina vi tornerà se troverà qualcosa di concreto, non soltanto cornici colorate.


Immagine Salvataggio di un'immagine GIF con PPaint. I formati GIF e PNG permettono di creare immagini il cui sfondo è trasparente, ossia lascia vedere cosa c'è sotto. L'utilità di questa tecnica risulta evidente nella foto.

In teoria è tutto, in realtà abbiamo omesso un argomento spinoso ma di cui i più accorti avranno già notato l'assenza. Non abbiamo parlato degli editor HTML visuali. Questa categoria di programmi, il cui rappresentante più famoso è FrontPage per PC, consente di creare siti senza conoscere il linguaggio con il quale le pagine web sono costruite, l'HTML appunto. Con tali programmi si opera in maniera visuale, scegliendo la collocazione degli elementi della pagina e definendone le caratteristiche a colpi di mouse. Apparentemente è la strada più semplice, in realtà vi sono diverse controindicazioni di cui tenere conto.
Semplificando, il problema è questo: le pagine web sono scritte in un linguaggio che ha delle regole semplici ma ferree. Quando il browser accede ad un sito ne interpreta i contenuti secondo tali regole (sebbene i browser PC spesso seguano regole proprie, mentre quelli Amiga risultino estremamente tolleranti verso gli altrui errori). Purtroppo il codice generato da molti editor HTML non rispetta alcuna regola o risulta ridondante e pieno di comandi inutili derivanti dall'implementazione "What You See Is What You Get". La conseguenza è che non tutti i browser visualizzano correttamente la pagina; proprio gli utenti Amiga dovrebbero sapere com'è importante che un sito sia consultabile con qualsiasi browser e non solo con quello più compatibile con l'editor usato per crearlo. Una soluzione c'è: correggere il codice a mano, ma ciò ovviamente richiede la conoscenza dell'HTML...


Immagine MetalWEB, l'unico editor visuale per Amiga. La versione da noi provata, oltre a generare vari errori HTML, presenta diverse lacune nell'interpretazione del codice della maggioranza delle pagine.

C'è poi da dire che gli editor in questione non sono così immediati: è comunque necessario memorizzare la posizione e la funzione di decine di gadget, menù ed opzioni, diverse per ogni applicativo. A questo punto meglio conoscere l'HTML, che resta invariato indipendentemente dal programma usato per scriverlo. Senza contare, almeno su Amiga, che l'unico software di questo tipo, MetalWeb, è tutt'altro che gratuito.
Esiste un'altra categoria di programmi che ci serviranno, si tratta dei correttori. Come detto, l'HTML prevede delle regole, sia di sintassi che di stile. Non rispettare le prime può comportare problemi di visualizzazione anche gravi. E' di vitale importanza accertarsi che le proprie pagine seguano gli standard e non contengano errori. Per questo possiamo servirci di programmi come Tidy o WebLint. Il primo è un port del correttore ufficiale del World Wide Web Consortium (W3C, l'organismo che definisce lo standard HTML). E' un po’ prolisso, ma fa il suo dovere e segnala anche come favorire l'accessibilità della pagina a chi si serve di browser particolari, come i non vedenti. Il secondo è invece uno script Perl, e richiede l'installazione di molte componenti della suite GeekGadgets. Se siete in grado di installarla vi consigliamo l'uso congiunto dei due tool, altrimenti optate pure per il solo Tidy.
Preparate dunque le nostre frecce possiamo finalmente avventurarci nella foresta alla scoperta dell'HTML.

L'HTML

Ed eccoci alla parte centrale del tutorial, il primo approccio con il linguaggio nel quale sono scritte le pagine web di tutto il mondo. L'Hyper Text Markup Language (HTML) è un meta-linguaggio sviluppato all'inizio degli anni 90. Il suo scopo è indicare al browser gli elementi che costituiscono il documento. Nulla di visuale, dunque. Quando si lavora in HTML è fondamentale ricordarsi che l'apetto finale del documento è a discrezione del browser. Purtroppo i recenti sviluppi dello standard, guidati più da produttori esterni che dal W3C, hanno portato molti webmaster ad operare puntando solo alla resa grafica finale delle pagine sul proprio browser. Da qui i frequenti avvisi del tipo "sito ottimizzato per la risoluzione tot ed il browser tale".
Ma torniamo a noi. Quando il browser carica una pagina ne visualizza il contenuto per intero, ad eccezione dei comandi che indicano i vari elementi (tecnicamente detti TAG). Questi possono essere di due tipi: singoli TAG che rappresentano un particolare elemento (ad esempio <HR> che visualizza una barra orizzontale di separazione) oppure contenitori che definiscono le caratteristiche di quanto presente fra essi ed il successivo TAG di chiusura. Vediamo un primo esempio:

  <HTML>
  Ciao mondo!
  <HR>
  </HTML>

Trascrivere l'esempio sull'editor di testi, salvarlo con estensione ".html" (es. "esempio1.html") e caricarlo con il browser: si vedrà una pagina contenente la scritta "Ciao mondo!" seguita da una barra. I comandi racchiusi fra i caratteri "<" e ">" sono i summenzionati TAG HTML. Lo scopo di <HR> è già noto. <HTML> invece indica che quanto segue è un documento HTML. Tutte le pagine iniziano con <HTML> e si chiudono con </HTML>. Il "/" indica appunto il termine (o chiusura) di un TAG di tipo contenitore. L'HTML non fa differenza fra maiuscole e minuscole ed è quindi possibile usare la maiuscole per distinguere più facilmente i TAG dal testo normale. Passiamo ad un altro esempio:

  <HTML>
  Prima riga
  Seconda riga
  Terza riga
  </HTML>

Caricando questa pagina ci si aspetterebbe di vederne il testo diviso su tre linee. Così non è, in quanto l'HTML prevede che tutti i caratteri non stampabili (compreso quindi il fine linea) vengano convertiti in uno spazio. Ciò spiega perché una pagina creata con Mac o PC (i cui caratteri di fine linea sono differenti da quello Amiga) non presenta problemi su Amiga. Per andare a capo in HTML si può usare il TAG <P>, che indica il termine di un paragrafo. L'andata a capo dovrebbe infatti essere utilizzata solo per separare i paragrafi di testo, in quanto la lunghezza della linea visualizzabile varia a seconda del tipo di carattere e della risoluzione scelta dall'utente. Andare a capo dopo 70 caratteri, per esempio, può risultare corretto sul proprio browser ma dare un effetto orribile su quello di un altro. Ecco come dividere le nostre linee:

  <HTML>
  Prima riga<P>
  Seconda riga<P>
  Terza riga
  </HTML>

Il TAG <P> introduce una linea vuota dopo la linea in cui si trova. Questo dipende dalla sua particolare finalità, ossia, come detto, la separazione dei paragrafi. Per ottenere l'andata a capo normale, senza aggiunte o limitazioni (non è infatti lecito concatenare più <P>) si utilizza il TAG <BR>.
Gli esempi visti fin qui sono stati volutamente semplificati. In realtà le pagine HTML prevedono una struttura più formale, composta da un'intestazione (TAG contenitore <HEAD>) in cui inserire il titolo della pagina ed altre cose (eventuali TAG META per i motori di ricerca e script JavaScript). All'intestazione fa seguito il corpo vero e proprio (TAG contenitore <BODY>) del documento, quello che conterrà i nostri testi e i vari elementi. Vediamo dunque la struttura corretta del documento:

  <HTML>
   <HEAD>
    <TITLE>Esempio 4</TITLE>
   </HEAD>
   <BODY>
    Prima riga<P>
    Seconda riga<P>
    Terza riga
   </BODY>
  </HTML>

La giustificazione a destra ha il solo scopo di evidenziare i vari TAG contenitori e non comporta effetti nella visualizzazione del documento, anche perché è regola dell'HTML che gli spazi multipli vengano ridotti ad uno solo e quelli a inizio riga siano ignorati.
Il TAG <BODY> consente anche di decidere il colore del testo e dello sfondo della pagina o di utilizzare come sfondo un'immagine (proprio come avviene sul WB con WBPattern). Per farlo è necessario impostare alcuni attributi. I TAG che abbiamo visto finora erano composti solo dal proprio nome (es. <TITLE>). Determinati TAG permettono di definire anche attributi aggiuntivi, vediamo come, sostituendo la stringa <BODY> dell'esempio precedente con:

  <BODY TEXT="#FFFF00" BGCOLOR="#000000" BACKGROUND="logoeal.gif">

Salvate il nuovo esempio e caricatelo nel browser. Ora la pagina sarà nera con caratteri gialli. Fatto questo nuovo passo tornate qui e concentrazione, perché ci sono molte cose da spiegare tutte assieme.
Partiamo da TEXT. E' un attributo e permette di definire il colore del testo della pagina. Poiché ha un valore, è seguito da '="valore"' (esistono anche attributi che ne sono privi, ad esempio NOSHADE per il TAG <HR> che toglie l'effetto 3D). Attenzione a quelle virgolette! Quando il browser le incontra considera tutto ciò che segue come valore dell'attributo. Dimenticando di chiuderle si corre il rischio che intere porzioni della pagina non vengano visualizzate. E' uno degli errori più comuni ed è una buona ragione per usare spesso il correttore HTML.


Immagine GoldED Studio 6 e il suo plugin WebWorld. L'edit avviene sempre a mano, ma molte operazioni sono velocizzate. In primo piano, ad esempio, la finestra per scegliere comodamente il colore del testo nel documento.

Il valore di TEXT è un numero esadecimale che indica il colore prescelto, nella forma "#rrggbb". Se non conoscete i valori dei colori consultate la tabella presente sul CD o usate gli script di PPaint o GoldED. Sui colori va aperta una parentesi per chi utilizza sistemi privi di scheda grafica, e quindi modalità a 256 colori o meno. In questi casi il browser cerca nella palette corrente il colore più vicino a quello richiesto. Se state decidendo i colori del vostro sito non basatevi sull'aspetto della pagina come la mostra il browser, ma su come il colore appare, ad esempio, in PPaint, ove è possibile effettuare selezioni precise senza approssimazioni. In alternativa alle sequenze esadecimali si possono utilizzare i 16 colori standard HTML riconosciuti da tutti i browser (ve ne sono un'infinità d'altri, che però sono specifici di alcuni browser soltanto).
Acquisito il concetto di '<TAG ATTRIBUTO="valore">' passiamo a BACKGROUND, saltando a pie’ pari BGCOLOR che opera come come TEXT ma si riferisce allo sfondo. Il valore di BACKGROUND indica invece un'immagine da usare come sfondo della pagina.
BACKGROUND ci dà modo di affrontare il problema del riferimento ad altri file presenti sul server, che si tratti di immagini, pagine o archivi. Nel nostro esempio "logoeal.gif", lo sfondo della pagina, è specificato senza indicarne il percorso (path). Questo è un riferimento relativo alla locazione della pagina caricata. Ovunque si trovi il documento HTML (sia esso nel nostro HD o in un server remoto) il browser cercherà l'immagine "logoeal.gif" nella stessa directory. Se invece avessimo utilizzato, ad esempio, 'BACKGROUND="http://www.amiga.it/immagini/logoeal.gif"', il browser avrebbe cercato l'immagine sempre e comunque nella directory "immagini/" del server indicato. Normalmente conviene utilizzare i riferimenti relativi, in quanto ciò rende possibile sia consultare il proprio sito fuori linea, sia spostarlo su un altro server senza dover modificare tutte le pagine.
Ora che sappiamo come riferirci ad elementi esterni, possiamo aggiungere alle nostre pagine immagini e collegamenti ad altri documenti, anche su siti diversi dal nostro. Vediamo come:

  <HTML>
   <HEAD>
    <TITLE>Esempio 5: la pagina di Pippo</TITLE>
   </HEAD>
   <BODY TEXT="#FFFF00" BGCOLOR="#000000">
    <HR>
    <IMG SRC="foto.jpg" ALT="La mia foto"><P>

    Benvenuto nella mia pagina personale!<P>
    Se vuoi sapere chi sono fai click
    <A HREF="chisono.html">qui</A>.<P>

    Se invece vuoi conoscere i miei siti preferiti fai click
    <A HREF="siti.html">qui</A>.
    <HR>
   </BODY>
  </HTML>

Introduciamo subito i nuovi TAG. <IMG> serve ad inserire un'immagine all'interno del documento. L'attributo SRC permette di specificarne percorso e nome, mentre ALT consente di indicare un testo che verrà visualizzato a chi non carica le immagini per permettergli di conoscerne il contenuto. <A> rappresenta un collegamento, i famosi link, l'ossatura del web. L'attributo HREF permette di specificare il documento a cui punta il collegamento, ovvero quale pagina deve richiedere il browser quando l'utente fa clic sul link. A differenza di <IMG>, <A> è un contenitore: tutto il testo presente fra <A> ed </A> viene considerato parte del link e visualizzato con un colore differente (specificabile con l'attributo LINK di <BODY>) e sottolineato. Come avrete notato abbiamo usato nomi file relativi ed in minuscolo. La ragione è che la maggioranza dei server considera differenti maiuscole e minuscole, dunque "siti.html" è diverso da "Siti.html". Per evitare errori poi difficili da individuare è dunque meglio usare solo caratteri dello stesso tipo, in questo caso minuscole per meglio distinguere i file dai TAG HTML.
Ma come si crea un collegamento ad un altro sito? E' semplice, invece del documento locale si specifica l'indirizzo del sito destinazione, anche senza indicare un particolare percorso: in questo caso il server visualizzerà la pagina di default, usualmente "index.html". Per avere un esempio concreto aggiungete all'ultimo documento creato, prima del secondo <HR>, queste linee:

  <P>
  Il miglior sito della rete per me &egrave;:
  <A HREF="http://www.amiga.it">Amiga.it</A>.

Il codice non dovrebbe richiedere ulteriori spiegazioni, se non per quel "http://" prima dell'indirizzo, necessario per indicare al browser con quale protocollo deve collegarsi al sito, visto che è possibile anche creare collegamenti a siti FTP, Gopher o Telnet.


Immagine A tutti può capitare un momento di distrazione, per questo è opportuno utilizzare frequentemente i correttori HTML. Nella foto, WebLint alle prese con una pagina HTML non proprio esemplare.

Richiede invece un approfondimento la sequenza &egrave;. Si tratta di una entità. Proprio perché indipendente dalla piattaforma su cui viene visualizzato, un documento HTML non può basarsi sul valore ASCII specifico dei caratteri ad 8 bit di un sistema, dato che questo varia da macchina a macchina (basti pensare alle differenze fra il set di caratteri AmigaOS e quello MS-DOS). Per risolvere il problema si ricorre all'uso delle entità. Ad ognuna corrisponde un preciso carattere o simbolo. Sta al browser reperire il carattere corretto in base al sistema su cui sta girando. “&egrave;”, nello specifico, è una "e" con l'accento grave. Esistono decine di entità (la lista è disponibile sul CD) la cui sintassi è sempre formata da "&" seguito dal nome dell'entità (e qui vi è differenza fra maiuscole e minuscole!) e dal ";". Torniamo a sottolineare come sia opportuno, per evitare incompatibilità, servirsi di questa soluzione, invece che dei caratteri diretti.
L'HTML mette a disposizione vari sistemi per disporre gli elementi e i testi di una pagina in maniera ordinata, favorendone quindi la leggibilità. E' possibile decidere l'allineamento del testo usando il TAG contenitore <DIV> e il relativo attributo ALIGN. <DIV ALIGN="CENTER">...</DIV> ad esempio centra il testo al suo interno. L'attributo ALIGN è disponibile anche in molti altri TAG, fra cui la serie <Hx>, dove "x" è un numero da 1 a 5, che definiscono le intestazioni, rappresentate con caratteri di corpo maggiore rispetto al normale. Per disporre i contenuti di una pagina si può ricorrere alle liste, o per i più abili alle tabelle. Vediamo un esempio delle prime, servendoci di alcuni dei TAG citati.

  <HTML>
   <HEAD>
    <TITLE>Esempio 6</TITLE>
   </HEAD>
   <BODY>
    <H1 ALIGN="CENTER">I browser Amiga</H1>
    <UL>
     <LI>AWeb
     <LI>IBrowse
     <LI>Voyager
    </UL>
   </BODY>
  </HTML>

La prima cosa che si nota visualizzando il documento è il grande titolo centrato. E' importante sottolineare come il corpo dei caratteri sia impostabile dall'utente utilizzando le preferenze del browser, a ulteriore dimostrazione che l'aspetto finale delle pagine deriva da molti fattori esterni, non controllabili da parte di chi crea le pagine. Sotto al titolo troviamo la lista generata dal TAG <UL>. Tutto ciò che si trova all'interno di questo elemento risulta giustificato a destra. Il TAG <LI> indica una nuova voce della lista, e la sua presenza comporta l'andata a capo e l'aggiunta di un pallino. Sostituendo <UL> con <OL> si ottiene invece una lista numerata. Le liste possono anche essere nidificate, ovvero dopo <LI> si possono utilizzare <UL> o <OL> per creare una nuova lista all'interno di quella corrente.
In alternativa ci sono le tabelle, una soluzione massicciamente utilizzata sul web vista la sua flessibilità, che tuttavia fa rima con complessità di impostazione e manutenzione. In effetti le tabelle sono la causa prima per cui molti rinunciano allo sviluppo manuale dell'HTML e si appoggiano agli editor visuali. Le tabelle sono contenute nel TAG <TABLE>. Una tabella è composta da una o più linee (TAG <TR>), contenenti a loro volta una o più celle (TAG <TD>). Ogni cella rappresenta quasi un documento HTML a sé stante, potendo disporre di sfondi differenti dal resto della pagina o di un allineamento proprio (impostabile per la singola cella o per l'intera linea). Il punto di forza delle tabelle è dato dal fatto che è il browser a calcolarne le dimensioni in base al contenuto delle singole celle, evitando quindi complessi studi di impaginazione all'autore della pagina. Un esempio di questo fenomeno è presente nella figura 7. Vediamo dunque come è fatta una semplice tabella (lasciamo le opzioni avanzate, come le celle che si propagano per più righe o colonne, all'approfondimento dei lettori).

  <HTML>
   <HEAD>
    <TITLE>Esempio 7</TITLE>
   </HEAD>
   <BODY>
    <H1 ALIGN="CENTER">Programmi preferiti</H1>
    <TABLE BORDER>
     <TR>
      <TH>Nome</TH><TH>Descrizione</TH>
     </TR>
     <TR ALIGN="CENTER">
      <TD>AWeb</TD><TD>Browser WWW</TD>
     </TR>
     <TR ALIGN="CENTER">
      <TD>CygnusED</TD><TD>Editor di testi</TD>
     </TR>
     <TR ALIGN="CENTER">
      <TD>AmIRC</TD><TD>Client IRC</TD>
     </TR>
    </TABLE>
   </BODY>
  </HTML>

Si noti come sia molto importante "chiudere" i TAG contenitori <TD>, <TR> e <TH>. Quest'ultimo, una sorta di intestazione, è utilizzabile solo nella prima riga della tabella, e prevede l'allineamento centrale del testo in automatico. L'esempio è volutamente semplice, ma va ricordato che all'interno di un elemento <TD> può essere inserito quasi tutto: immagini, liste, sin anche altre tabelle. Si pensi che molte pagine web sono costituite da enormi tabelle prive di bordi, utilizzate per creare colonne differenti con contenuti specifici.
Quelle presentate sono le fondamenta del linguaggio. Esistono molti altri elementi (un esempio su tutti, i frame, utilizzabili per dividere la pagina a video in più documenti) e decine di attributi differenti. Non possiamo ovviamente trattarli tutti. Se volete approfondire, sul CD troverete una completa guida in italiano al linguaggio.

Messa in rete

Appreso quanto basta per realizzare un primo, pur semplice, sito, è il momento di cercare un server che lo ospiti. Le alternative per un sito non commerciale quale è il nostro sono diverse. Escludendo a priori l'acquisto di uno spazio web (non è proprio il caso, ci può pensare chi realizza siti complessi o con particolari necessità tecniche), è possibile scegliere fra gli spazi messi a disposizione da molti provider (ad esempio Tiscali, TIN, Libero/IOL e InWind offrono parecchi MB, e per giunta su server veloci) e l'hosting gratuito da parte di servizi come Freeweb/Supereva (italiano) o Geocities e Xoom, tanto per citare i più famosi. Entrambe le soluzioni hanno vantaggi e svantaggi. I servizi di hosting gratuito solitamente costringono il malcapitato visitatore a sorbirsi, ad ogni pagina consultata, dei banner, veri e propri cartelloni pubblicitari che si sovvrappongono al nostro sito. E' vero che i browser Amiga offrono funzionalità atte ad eliminare alcuni di questi "spot" indesiderati, ma quando si realizza un sito web bisogna pensare prima di tutto all'utente che lo andrà a consultare, che nella maggior parte dei casi utilizza browser che non offrono scampo da banner talvolta anche piuttosto espliciti e sui quali chi crea la pagina non ha alcun controllo.
L'alternativa è costituita appunto dagli spazi messi a disposizione dai provider. In questo caso lo svantaggio è dato dal fatto che si lega l'indirizzo del proprio sito, quello che la gente nel migliore dei casi memorizzerà nei bookmark, ad un'entità che si potrebbe anche decidere di lasciare, magari per un provider più conveniente o veloce.
Per questo problema esiste comunque una facile soluzione: i domini virtuali, cioè alias brevi per i siti. Nata per abbreviare gli indirizzi dei siti personali, spesso piuttosto lunghi o poco mnemonici, questa tipologia di servizi si rivela utile anche a chi è costretto a traslocare il proprio sito. Esistono parecchi servizi che offrono domini virtuali gratuiti. Il migliore, a nostro avviso, è cjb.net, che mette a disposizione, senza imporre banner (a differenza di altri), una nutrita serie di servizi associabili al proprio sito fra cui forum, chat e supporto per alias di mail (potrete avere un indirizzo tipo webmaster@vostrodominio.cjb.net che invia i messaggi, in maniera trasparente, alla vostra email reale).


Immagine Per immettere in rete i file che compongono il sito probabilmente ci servirà un client FTP. AmiTradeCenter offre una utile funzione per inviare anche il contenuto di un'intera directory, se necessario.

Una volta fatta la propria scelta e compilato il contratto online di adesione (attenzione a leggere le clausole di utilizzo e al fatto che i minorenni devono far effettuare la registrazione ai genitori), sarà sufficiente seguire le semplici istruzioni fornite dal servizio per inserire le proprie pagine. Solitamente basta configurare il client FTP con nome del sito del fornitore di spazio, propria login e password (quelle del servizio di hosting, non quelle del provider, tranne nel caso che siano la stessa entità, si veda InWind), collegarsi ed inviare i file che compongono il sito.
A sito attivato si può pensare di espanderlo, utilizzando funzionalità come contatore e registro degli ospiti. Il contatore è un'immagine che mostra gli accessi alla pagina in cui è posta. Fa un po’ scena, ma è utile per dare un'idea del numero dei visitatori del sito. E' meglio usare il servizio di “counter” offerto dal fornitore dello spazio web, in quanto quelli esterni, pur se spesso più configurabili, funzionano solo se il visitatore ne carica l'immagine, magari da un server straniero intasato, altrimenti neppure conteggiano la visita. Il guestbook, o registro degli ospiti, permette invece ai navigatori di lasciare messaggi o commenti. Il suo utilizzo è da valutare a seconda del tipo di sito, e comunque richiede un controllo frequente del contenuto: un commento sopra le righe basta a danneggiare l'immagine del più bello dei siti.
Con questo è veramente tutto. Speriamo di aver fornito sufficienti elementi, magari a chi era indeciso, per lanciarsi nel mondo del web. L'HTML, lo vedete, non è complesso, e quello che oggi è un divertimento, con un po’ di impegno può diventare anche qualcosa in più. Non è raro infatti che siti nati come hobby siano poi diventati altro.

Approfondimento

Cosa non si deve fare

Leggendo i gruppi di discussione frequentati da chi realizza pagine web può sembrare tutto lecito. In realtà esistono molte restrizioni che è opportuno tenere in considerazione, soprattutto con l'entrata in vigore della nuova legge sul diritto d'autore. La lista dei contenuti proibiti è lunga: oltre ovviamente ai programmi commerciali e ai brani musicali (siano essi in formato WAV/MP3 o riproduzioni MIDI), è illegale, per esempio, pubblicare testi di canzoni (traduzioni comprese), brani tratti da libri o articoli ed immagini prese da siti web o altri media. Fanno naturalmente eccezione i materiali per i quali sia indicato esplicitamente il consenso alla ripubblicazione a determinate condizioni. Chi sul proprie sito infrange il diritto d'autore, oltre a vedersi chiuso lo spazio e magari annullato l'abbonamento al provider, rischia una condanna in sede penale con conseguenze non indifferenti sul piano personale.