LA PROGRAMMAZIONE DELLE PAGINE WEB Arricchiamo le pagine con un elemento molto importante : le tabelle. E -se è di vostro gusto- magari le possiamo condire con un po' di musica....
	. . nota: per convenzione il testo normale qui di seguito è di colore bruno, i codici HTML (quelli che generano la pagina HTML nel browser) sono i rosso. La parte che cambia rispetto al codice precedente (da evidenziare in quanto oggetto delle spiegazioni )  è in blu'.

Nella scorsa puntata si era visto l'indispensabile per produrre una pagina web. Si aveva iniziato con gli elementi di base : come creare una pagina partendo da zero, con un semplice editor di testo. Si era imparato a creare delle scritte, a spostarle nella pagina, a aumentare o diminuire le dimensioni delle parole, a cambiar loro colore. Si era anche imparato a definire il colore dello sfondo, o a sostituirlo con un'immagine ricorrente (una texture). Infine, si era imparato a costruire dei "rimandi" da una pagina ad un'altra, dovunque essa sia. Il comando

<a ref>

serve a richiamare (=linkare) una pagina presenta nella stessa subdirectory dove c'è la precedente, oppure a richiamare una pagina presente nello stesso computer, o una pagina presente nella stessa nazione come dall'altra parte del mondo. Questo è un aspetto molto entusiasmante di Internet.

Pensate che avevo una home page su cui mi ero messo in testa di far stare troppe cose, e lo spazio era dovenuto troppo poco. Ho ottenuto un'altro spazio a Hong Kong, e chi voleva una certa pagina passava da un server italiano ad uno collocato in Cina. Ebbene, molti non si sono neanche accorti che passavano dall'Italia alla Cina ogni volta che passavano da una pagina all'altra! Come si fa a richiamare un indirizzo sparso per il mondo ? Semplicissimo : al posto di scrivere il nome della pagina (o dell'immagine) che si vuol richiamare, si scrive il suo URL completo. Secondo quanto detto nella scorsa puntata, la riga :

<A HREF="test2.htm">vai alla pagina 2</A>

fa in modo che chi clicca sulle parole "vai alla pagina due" si veda visualizzare nel browser la pagina test2.htm al posto di quella attuale. In pratica, il browser va a cercare il file "test2.htm" e lo visualizza. Ma si può anche indicargli un percorso dove andare a cercare il file. Ad esempio :

<A HREF=c:\pagineHTML\"test2.htm">vai alla pagina 2</A>

E ' una possibilità che sconsigliamo a chi ha iniziato da poco, perché quando il file sarà nella posizione definitiva (sul server) non è detto che trovi le stesse subdirectory che trova sul computer dove lo stiamo preparando, ne' che il server usi un sistema operativo che segua i segni convenzionali che usiamo per indicare le subdirectory. Per le pagine, suggeriamo di mettere tutto nella stessa subdirectory o cartella. E' invece interessante poter rimandare ad un altro sito. Cosa che si può fare trasformando la riga

<A HREF="test2.htm">vai alla pagina 2</A>
in
<A HREF="http ://www.geocities.com/HotSprings/1792">vai alla pagina 2</A>

In questo caso (dovunque si trovi la pagina di partenza, in India o in Madagascar) il browser visualizza la pagina Index.htm di geocities al 1792 di HotSprings. E se io voglio visualizzare un'altra pagina che non sia Index ? Semplice : basta specificarla. Ad esempio :

<A HREF="http ://www.gecocities.com/HotSprings/1792/imago5.htm"> vai alla pagina 2</A>

cliccando sulla scritta "vai alla pagina2" si visualizzerà la pagina dedicata al Caravaggio, "saltando" la pagina Index.htm e indice-italiano.htm.

In questo modo è possibile inviare il vostro visitatore negli angoli più sperduti e a visualizzare direttamente le pagine più nascoste nei siti più complicati.

LE TABELLE

Credo che tutti i vostri potenziali visitatori usino ormai almeno MSIE3 (il browser della Microsoft) o Netscape 3. Con questi programmi è possibile costruire delle "tabelle". Le tabelle sono nate per essere delle tabelle, ma oggi sono usate per fare un po' di tutto, non si riesce più a scrivere una pagina decente senza le tabelle. In particolare, le tabelle sono comunemente usate per scrivere del testo su più colonne.

Per fare una tabella, si usano i tag :

<table> all'inizio, e </table> alla fine.

Dentro questi due tag, si usa <tr> (=table row, riga di tabella) per formare una riga. Sulla riga noi dobbiamo mettere quel che ci va ; iniziamo con uan semplice parola. Per metterla nella tabella, dobbiamo collocare la nostra parola dentro i tag <td> e </td>. Ad esempio, possiamo fare una tabelal con i comandi seguenti

<table> (il comando dice che inizia una tabella)

<tr> (creiamo una riga)

<td>proviamo</td> (forma una cella con dentro la scritta "proviamo")

<td>a formare</td> (forma una cella accanto alla . prima con dentro " a formare")

<tr> (creiamo un'altra riga sotto la prima)

<td>una </td> (forma una cella con dentro la scritta "una")

<td>tabella </td> (forma una cella accanto alla prima con dentro la . . scritta "tabella")

</table> ( dice che la tabella è finita !)

Provo a mettere qui di seguito i comandi senza il mio commento, in modo che copiandoli pari pari creerete una tabella nella vostra pagina. Aprite la vostra pagina con un editor di testo (es. notepad) . Dopo "body" scrivete le righe sotto :

Potete naturalmente cambiare le parole a piacere, e mettere il testo che preferite.

Se caricherete la pagina nel vostro browser, vedrete le vostre parole intabellate in quattro celle, disposte in due righe e in due colonne. E' possibile che vogliate evidenziare i bordi della tabella. Per fare questo, aggiungete accanto alla parola table ( e dentro nei tag < e >) la dicitura :
BORDER=1.

Il risultato sarà dunque :

Se metterete
BORDER=2, o un numero maggiore, vedrete un bordo più spesso.
Si possono aggiungere (oltre che border) anche altre opzioni :

CELLPADDING=1, 2, 3 ecc. (per distanziare le scritte dal bordo della tabella.
Il risultato di solito migliora molto) o

CELLSPACING=1, 2, ecc. (per distanziare una cella dall'altra).

Provate a osservare la differenza di quando mettere in testa alla vostra tabella :

<TABLE BORDER=2 CELLSPACING=5 CELLPADDING=9 >

rispetto a quando mettete il semplice :

<TABLE>

descritto sopra.

Vi faccio notare che i tag <TR> non hanno bisogno del loro "fratello" </TD> di chiusura. Ma metterlo fa molto "professionale".

Faccio un'ultima considerazione sulle tabelle. Il testo ( o l'immagine) dentro al tabella sta a mezz'aria, e spesso non si capisce a cosa corrisponda nella cella vicina. Possiamo allinearlo al bordo superiore, spesso la situazione migliora e la tabella risulta più chiara. Questo allineamento lo si fa con il comando

<TD VALIGN=TOP> al posto del semplice <TD>.

Qualcuno avrà poi notato che ho detto "testo o immagine". Sì, perché nella tabella ci possono essere parole e anche immagini. Per le parole, basta scrivercele. Ma le immagini ? Anche qui, il tutto è abbastanza semplice : basta mettere il richiamo alla figura voluta, con il solito

<IMG SRC="immagine.jpg"> visto nella puntata precedente.

Una cella con dentro l'immagine "teatro3.jpg" allineata in alto sarà dunque :

<TD VALIGN=TOP><IMG SRC="teatro3.jpg">

Se l'immagine teatro.jpg tende a scombinare gli allineamenti, ed è troppo grande o troppo piccola. Dategli voi le dimensioni obbligate
a-in altezza (HEIGHT) o
b-in larghezza (col comando WIDTH). Ad esempio :

<TD VALIGN=TOP><IMG SRC="teatro3.jpg" HEIGHT=165 WIDTH=200>

Ricapitoliamo

i comandi :

Con qualche aggiustamento, si possono creare delle pagine come quella che ho iniziato ad imbastire ( e che potete richiamare in diretta cliccando qui). E'  uno studio non ancora finito per una home-page. Anche qui potete tornare al presente testo tornando "indietro" di una pagina.

AH. LA MUSICA

Molte persone che iniziano a programmare in HTML si lasciano prendere la mano, e si buttano a riempire le loro pagine di effetti speciali, trasformandole in una specie di luna-park : immagini smisurate, suoni, immagini in movimento, scritte che scorrono, e chi più ne ha più ne metta. Sul loro computer funziona tutto a meraviglia : in un attimo si immergono in uno scenario fantascientifico. In realtà i loro visitatori si irritano e piantano a metà la visione di quelle pagine, perche' risultano esageratamente lente da caricare.
Il programmatore non ha idea di questa lentezza, perche' mentre le costruisce esse sono caricate dal suo computer e la cosa è rapidissima.
Anche quando le prova attingendole dal server gli paiono enormemente più veloci di quanto siano agli occhi dei comuni visitatori : il suo browser le ha già messe in cache e impiega un attimo a caricarle. Gli altri invece aspettano minuti e minuti per caricare fronzoli irrilevanti, e magari per caricare oggetti (come la musica di sottofondo) che magari non funziona sul loro computer.

Occorre dunque considerare due o tre cose :

1-non tutti vedranno e sentiranno quel che vedete e sentite voi.
Se andate a cercare font strani (Allegro o Bodoni) sappiate che rischiate di essere l'unico frequentatore delle vostre pagine che le vede così come le avete preparate. Quindi, create sempre una pagina che sta in piedi decentemente anche senza gli effetti speciali! Questi possono essere un complemento, ma non essere la condizione necessaria per comprendere il emssaggio che volete lanciare in rete!

2-calcolate un tempo decente di scarico anche nei momenti in cui le linee sono affollate. Ricordate che la maggior parte della gente (è ovvio ma non ci si pensa!) si collega nelle ore di punta  quando si collegano tutti gli altri e quando Internet è lentissimo! ! !

3-tenete conto che non tutti hanno il vostro browser, non tutti hanno la scheda audio, non tutti hanno un computer tanto potente da visualizzare sequenze mpeg eccetera eccetera! Tenete conto anche che non tutti hanno dei buoni schermi. Vi faccio un esempio. Tempo fa mi scrisse un italoamericano, lamentando che in una mia home-page non vi erano i link promessi nel testo. Io per scrupolo li provai, e gli scrissi che funzionavano. Andammo avanti per una settimana a botta e risposta, fin che (quasi per caso) mi disse che usava un portatile. Fu allora che mi accorsi che il colore dei link sul mio schermo era ragionevolmente diverso dallo sfondo, ma non per lo schermo di un portatile! Il suo schermo non distingueva i miei link dallo sfondo!

In conclusione, lo so che farei molto più piacere a molti di voi se vi magnificassi la possibilità di riempire le vostre pagine di suoni, immagini ed effetti speciali. Ma rischierei solo di prendervi in giro, e vi porterei a costruire pagine che piacciono solo a voi perché gli altri vedrebbero un luna-park... desolato e semiabbandonato !

Comunue, tenete conto della possibilità di inserire i comandi che permettono al visitatore di sentire musica di sottofondo. E' un terreno minato, perché Netscape e Explorer in questo campo funzionano in modo sensibilmente diverso. Provate a mettere le due righe :

<bgsound src="xxx.mid" loop=infinite>

<embed src="xxx.mid" width=0 height=0 autostart=true loop=infinite>

Gli utenti che visualizzano questa pagina con Netscape vedranno qui sopra un player. Il cursore sotto serve e regolare il volume, i tasti sopra per interrompere o far riprendere l'esecuzione, ovvero STOP, PLAY e PAUSA.
Se volete mettere il vostro file mid, potete usare semplicemente i codici sopra, naturalmente al psoto di xxx.mid dovete mettere il nome di un file midi, che può essere costruito da voi o semplicemente trovato su Internet.
Il comando LOOP= indica quante volte va ripetuta l'esecuzione. Mettendo INFINITE va avanti indefinitamente. Il comando AUTOSTART indica se deve partire automaticamente (TRUE significa di sì e FALSE di no, ovvero che il processo di esecuzione è condizionato). Se avete una serie di accessori, provate a vedere cosa succede sul vostro browser mettendo delle dimensioni reali al player :

<EMBED src="xxx.mid" WIDTH="145" HEIGHT="55" AUTOSTART="true" LOOP="true">

Notate che il comando che consente di incorporare nella pagine il file audio, può essere usato anche per incorporare un file video. Basta mettere il file con l'estensione che richiama l'apposito programma che lo esegue : ad esempio,

<EMBED src="xxx.mpg" WIDTH="450" HEIGHT="400" AUTOSTART="true" LOOP="true">

eccetera, visualizza un file mpg. Con continuità (quando finisce ricomincia da capo). Ma qui si va verso l'incerto : vi sono utenti che non vedranno niente, alcuni sistemi operativi che non supportano certi formati (ad esempio, la maggior parte dei server (che gira sotto UNIX) non è compatibile con il formato *.mov (QuikTime), per altro molto diffuso.

Concludendo, un oggetto multimediale (immagini normali, animate, file audio o video...) può essere incluso nella pagina con il comando A HREF, già visto per caricare le immagini. Ad esempio,

<A HREF="filmato.mpg">clicca qui</A>

Farà in modo che (cliccando sulle parole "clicca qui") venga visualizzato un file video MPEG che si chiama "filmato.mpg".

Vi sono poi delle possibilità offerte da certi browser e non da altri. Ad esempio, Netscape 3 offre la possibilità di far lampeggiare le scritte e MSIE 3 no, mentre lo stesso explorer può far scorrere le scritte con il comando :

<MARQUEE >.proviamo ..< /MARQUEE>

<MARQUEE >.a far scorrere..< /MARQUEE>

.proviamo ..< /MARQUEE> .a far scorrere..< /MARQUEE>

<BLINK> lampeggia! </BLINK>

lampeggia!

I possessori di Netscape vedranno la scritta "lampeggia" che appare e scompare. Abbiate pazienza, è un po' lenta ma funziona....
Metto tutti questi comandi sulla pagina WEB, in modo che possiate vedere in linea sia l'effetto che fa che il modo con cui i codici sono inseriti (per fare questo, premete View- e poi HTML se usate Explorer o "View Document Source" se uste Netscape.)

Trattando di HTML non può mancare un accenno ai frames e alle mappe sensibili. Ma -per problemi di spazio- rimandiamo questi due aspetti ad una terza (ed ultima) puntata.
Nel frattempo, ci si può impratichire con le tabelle, che costituiscono uno dei punti più importanti per riuscire a "costruire " delle pagine complesse e strutturate.

Cliccando qui si può andare alla tabella riassuntiva dei codici HTML visti fin qui
Cliccando qui si può andare alla pagina dedicata al colore nell'HTML

Questo testo, le immagini originali e la puntata precedente possono essere viste
anche su Internet, all'indirizzo http ://wwwTopTown.com/NOWHERE/graf.