Creare un sito web
A cura di Gabriele Favrin
Articolo pubblicato su Amiga Life 115 (novembre 2000)
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.
Contenuti
- Avviso
- Introduzione
- Creazione del sito
- Approfondimento
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).
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.
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.
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...
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.
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 è: <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.
Richiede invece un approfondimento la sequenza è. 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. “è”,
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).
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.