1- I FONDAMENTI DELL’HTML

Carissimi lettori di TGM, buongiorno! E benvenuti a questo informale, inusuale, oseremmo addirittura dire isterico corso di programmazione HTML. Cos'ha di diverso questo corso da tutti gli altri? Il primo è che a spiegarvi le cose sarò io, per cui se vi aspettate il solito polpettone teorico siete fuori rotta: preparatevi a prendere in mano tutto l'occorrente, che qui si fa solo della buona e sana pratica. Poi preparatevi anche a una simpatica novità: non ho nessunissima intenzione di ripetere le solite frasi fatte del tipo: "se scrivete <b>pippo</b> otterrete pippo in grassetto", perché immagino ne abbiate piene le scatole pure voi: per Diana, un corso si può tenere anche senza un tono da funerale, vi pare? In ultima analisi, lungo andare vi porrò dei quesiti - dei veri e propri compiti a casa - ma siccome non posso verificare che li svolgiate, mi limiterò a consigliarvelo per il vostro bene: in fondo i fruitori di queste lezioni siete voi, senza esercizio in HTML non si programma, quindi buon divertimento!

OCCORRENTE

Gl'ingredienti per confezionare la vostra torta virtuale sono pochi, ma buoni. Ecco cosa serve:

- n1 cervello
- n1 editor di testi (va bene anche il notepad di Windows, ma un programma come Hot Dog è vivamente consigliato)
- n2 browser: installate sia Netscape sia Explorer
- n1 connessione a Internet (opzionale)

Il cervello è necessario perché purtroppo in HTML non esiste il tag (comando) <crea_pagina_a_mia_immagine_e_somiglianza>, per cui dovrete per forza di cose sforzarvi a capire cosa fa ogni singolo comando, e come farglielo fare in modo che, interagendo con tutti gli altri comandi lì vicino, possa ricreare a video esattamente ciò che volete. L'HTML infatti è una brutta bestia: è facilissimo da imparare, ma non esistono discorsi teorici validi. Voi date il comando, ma poi è compito del browser interpretarlo come meglio crede. Per capirci meglio: voi cucinate la vostra buonissima torta al limone, ma il palato di chi la mangerà potrebbe sentire un gusto di pera piuttosto che di melanzana. Ecco perché vi chiedo d'installare entrambi i browser sul vostro computer: per poter toccare con mano, senza aspettarsi delle sorprese, ciò che leggeranno i visitatori del vostro sito. Purtroppo le differenze tra le cosiddette "estensioni" di Netscape e Internet Explorer sono tutt'altro che minimali, e non ci sono santi che tengano: se volete mettere su un bel sito dovete per forza conoscerle entrambe, e sopperire dove possibile alle carenze delle une con un uso sapiente delle altre.

Primo discorso da evitare: "Ma tanto il Netscape è il browser più diffuso, la Microsoft mi sta sulle balle, e chi non lo usa s'attacca"

Purtroppo in giro ci sono tantissimi frollocconi che si divertono a parteggiare per questo o quel browser: li trovate in linea con tanto di logo "best viewed with Pippero", che solitamente è l'unica cosa che si legge bene in quella pagina ANCHE col vostro browser preferito. Il primo impulso è sempre quello di spedire una caterva d'insulti al webmaster cliccando sull'apposito link "for problems contact stupidone@casa.sua.com", ma poi alla comparsa del client mail solitamente si desiste, in fondo si ha altro da fare. Per esempio, imparare a non fare lo stesso errore. Una pagina dev'essere fruibile a tutti, tanto più che tra i tutti potrebbe esserci il responsabile di qualche sito molto visitato che, magari, potrebbe trovare la vostra pagina piacevole e interessante e, perché no, degna di essere "linkata": senza colpo ferire, vi trovereste un sacco di accessi in più. Senza aggiungere, poi, che tra i tanti utenti potrebbe sempre nascondersi l'ultimo utente di questo o quel browser semisconosciuto, o di una versione troppo vecchia dei due "caposaldi". Per loro, preparate sempre un bel link alla Microsoft e alla Netscape, con scritto "se avete una versione troppo vecchia del vostro browser, scaricatene una più recente. Questo sito è ottimizzato per le versioni X di IE e NN". Attualmente, il valore di X può assumere i seguenti connotati:
X=1: siete proprio dei blandoni, e desiderate che il vostro sito contenga solo testo e qualche immagine. In tal caso non caricate la pagina di effetti speciali e attenetevi scrupolosamente alle poche norme dell'HTML 2.0, visualizzabili persino con Mosaic e Tiber.
X=2: potete già inserire delle GIF trasparenti, ma non potrete usare i frames (quelle tag che suddividono la finestra del browser in due o più parti, per visualizzare all'interno di esse pagine diverse) né le tabelle con fondo colorato: i primi non sono visualizzabili da Internet Explorer 2, le seconde da Netscape 2.0.
X=3: potete fare tutto ciò che sarà oggetto di questo corso. E' la scelta che più vi consiglio visto che i nuovi browser, oltre che a fornire un'impaginazione quantomai precisa, sono diventati delle vere e proprie multipiattaforme. Possono integrare video, suoni, e applicazioni, permettono di svolgere azioni su un server da remoto e... e poi lo dico io, e basta!

UN BREVE RIPASSO

Veniamo così alle finalità di questa bislacca fiumana di parole: mettervi in grado di confezionare un bel sito, con tanta bella grafica e con un occhio sempre puntato ai problemi di connessione. Nel frattempo, vogliate gradire un breve ripasso.
Innanzitutto, l'HTML è un "metalinguaggio", nel senso che non è un linguaggio di programmazione vero e proprio, non si preoccupa di fornire script (al massimo quelli dovrete inserirli voi, se volete programmare in Java o con ActiveX), ma si basa solo e unicamente su indicazioni, dette "tag", atte a visualizzare del testo o a delimitare dei campi. E' incredibile come queste poche istruzioni, rigorosamente delimitate da apici < e >, possano generare veri e propri capolavori d'impaginazione, roba che per farlo sulla nostra rivista abbiamo bisogno di programmi costosi tipo Quark-Xpress e di un grafico professionista pagato apposta! Con l'HTML invece il grafico potrete farlo voi, comodamente a casa vostra, e senza pagare una lira (a parte quelle che, naturalmente, dovrete sborsare per la rivista: e insomma, nulla è proprio gratuito!). Le istruzioni vanno solitamente "aperte" e "chiuse" alla bisogna, cioè la porzione di testo interessata a questo o a quell'effetto, va delimitata tra <istuzione> e </istruzione>, dove la barra / serve appunto a dire al browser "smetti di visualizzare in quel modo". Vogliamo fare un esempio? E allora, vamos!
Prendete l'editor di testi, create un documento di testo nuovo e scrivete:

<HTML>
<HEAD>
<TITLE>File di prova</TITLE>
</HEAD>
<BODY>

</BODY>
<HTML>

E salvatelo come "base.htm". Questo file sarà proprio il punto di partenza su cui svilupperemo tutto il corso. Il primo tag avvisa il nostro browser che quello che si troverà di fronte sarà un file HTML generico, senza specificare a che tipo di standard vorrà attenersi. Il secondo e il quinto delimitano l'intestazione (head) del documento, mentre i tag titolo (title) avvisano il browser che quello sarà il nome della pagina, da scrivere sulla barra, appunto, del titolo. La vostra finestra di Netscape si aprirà infatti con un bel "Netscape - File di prova". Terminata l'intestazione, inizia il corpo del documento, che non a caso è delimitato dalla coppia di tag body (in inglese, corpo). Tutte le modifiche e le aggiunte che andremo a fare, le faremo tra i tag <body> e </body>. Leggetela bene la frase che precede, perché se qualcuno mi telefona in Redazione chiedendomi "perché io aggiungo le istruzioni alla fine del documento, e il browser non me le visualizza?", gli strappo le unghie personalmente. Ripeto: tutto, e sottolineo TUTTO ciò che segue, andrà aggiunto e/o sostituito SOLO ed ESCLUSIVAMENTE tra i tag corpo. Chiaro? Altro barbatrucco: ricordatevi che quando modificate una pagina per poi farla visualizzare al browser, dovete sempre salvarla e che, solo allora, dovrete premere il pulsante "aggiorna" (che tutti i broswer hanno) per far sì che il medesimo la ricarichi da capo senza ricorrere alla sua cache (memoria tampone).
Bene, ora che avete capito tutto, provate a inserire la stringa:

esempio 1: questa &egrave; una prova di testo in <b>grassetto</b>, <i>corsivo</i>, <b><i>Grassetto corsivo</i></b>, <u>sottolineato</u>, <blink>lampeggiante</blink> e <kbd>con effetto macchina da scrivere</kbd><br>

Il risultato dovrebbe essere, per l'appunto, una frase scritta con gli stili in questione. Abbiamo dunque imparato un po' di cose. Tanto per cominciare, che il carattere "è" non potete scriverlo così, ma dovete usare una speciale codifica HTML, "&egrave;", appunto. Questo perché tutti i computer della terra, compreso il Commodore 64 se solo si potesse attaccare a Internet, capiscono una codifica standard a 7 bit chiamata ASCII-7. Nei 128 (2 elevato a 7 dà 128) caratteri permessi dalla "tabella" in questione, i cratteri accentati e speciali sono esclusi. Questo vuol dire che sul vostro PC potete anche scrivere "la pasta è buona", e il vostro browser la visualizzerà anche giusta, ma potete stare certi che in un altro paese - dove si adotta una tabella di codici diversi - quella frase diventerà, che so, "la pasta § buona", oppure, restando nel nostro paese, un utente Macintosh potrebbe leggerla "la pasta [] buona", o ancora... Potreste essere tentati di scrivere "la pasta e' buona", ma a parte che starebbe male, anche l'apostrofo è un carattere speciale. Quindi, l'unico modo per essere sicuri che la pasta sia buona dappertutto, è proprio quello di usare la codifica internazionale HTML per i caratteri speciali. Una lista dei medesimi occuperebbe un'intera pagina di TGM, per cui vi conviene procurarvela altrove. Altra esigenza specifica, è che scrivere un testo lungo in questo modo sarebbe straziante, per cui serve un editor di testi in grado di convertire istantaneamente le accentate in codici HTML: Hot Dog è proprio il programma che ci serve. Procurarselo su Internet è una stupidaggine (basta inserire Hot Dog in qualsiasi motore di ricerca), quindi sprecate pure dieci minuti di tempo di connessione e installatelo sul vostro hard disk. Probabilmente Hot Dog non effettuerà la conversione subito, ma sicuramente esiste l'opzione per attivarla. Lo so perché è l'editor che usavo io per impaginare Zzap!.
La seconda cosa che abbiamo imparato, invece è che i tag possono "inscatolarsi" gli uni negli altri. E ovviamente vanno aperti e chiusi in successione inversa, come avviene per le parentesi. Mi spiego meglio: se a scuola aveste scritto una cosa del tipo "[x+(16-x]*4)", la vostra professoressa di matematica probabilmente vi avrebbe strappato tutte le unghie e terminati all'istante, previo uno zero spaccato sul diario. Il browser è molto più gentile: si limita a non visualizzare ciò che "sgarra" dalle specifiche del linguaggio. Vale quindi il discorso <b><i>...</i></b>, ma non quello <b><i></b></i>. Può darsi che il vostro browser sia magnanimo e "passi sopra", ma non è detto che tutti lo facciano, e, comunque, ci sarebbe un errore di principio che andrebbe assolutamente corretto. Potete naturalmente scrivere anche <i><b>grassetto e corsivo, </b>solo corsivo</i>: basta che i tag non si sovrappongano in maniera scorretta. Ah, dimenticavo: i tag B indicano il bold (grassetto), il tag I l'italic (corsivo), e... no, mi rifiuto, il cervello ce l'avete pure voi, usatelo!
Dimenticavo: il <br> alla fine indica al browser che la riga è finita, e che desiderate che vada a capo (dovrebbe stare per "break"). Se invece volete fare i precisini, ricordatevi di delineare i paragrafi a inizio e fine con <P> e </P>. Occhio perché un uso errato di <br> e di <P> può notevolmente incasinare la vostra pagina.

COLLEGAMENTI

I collegamenti ipertestuali, detti originariamente link, sono l'anima del cyberspazio: potete cioè saltare all'interno del medesimo documento, aprirne un altro o, addirittura, puntare direttamente ad un paragrafo che si trova non solo su un altro file, ma addirittura su un server lontanissimo. Tutto questo grazie alla coppia di tag A (anchor, ancora). Facciamo un esempio: sul server http://www.casa.mia c'è un documento "piantina.html" così strutturato:

Benvenuti a casa mia!<br>
Qui potete trovare:<br>
<br>
cucina<br>
gas<br>
tavola<br>
tovaglia<br>
lavastoviglie<br>
mestolone<br>
bagno<br>
bidet<br>
lavandino<br>
doccia<br>
tazza<br>
camera da letto<br>
comodino<br>
letto<br>
preservativi<br>
comò<br>
ecc ecc ecc

Bene, immaginiamo che io adesso voglia, dal sito in cui mi trovo, visualizzare immediatamente il contenuto della mia camera da letto, che so trovarsi sul server remoto in questione. Come dovrò fare? Innanzitutto, dovrò assicurarmi che il file "piantina.html" presso www.casa.mia, sia strutturato "a paragrafi", cioè che ogni paragrafo sia delimitato da un "nome" specifico che ne contraddistingua l'inizio in modo inequivocabile. Questo, in HTML si ottiene col tag <A NAME= "paragrafo"></A>. Quindi la porzione di testo di cui sopra dovrà iniziare così:
... ...
<A NAME= "camera"></A>
camera da letto
comodino
letto
preservativi
comò
... ...
Così facendo, dirò al browser che quella parte di documento ha un delimitatore iniziale e che ha un nome specifico, "camera", per l'appunto. Ora, torniamo a bomba sul nostro documento locale, e vediamo come collegarci a "piantina.html" in modo opportuno. Inserite:

Volete vedere camera mia? Cliccate <A HREF= "http://www.casa.mia/piantina.html#camera"> QUI </A> per vederla.

Il tag <A HREF></A> assocerà alla parola QUI un collegamento ipertestuale al paragrafo camera (#camera), sul file "piantina.html" che si trova sul server www.casa.mia. Facile, no? Ora, mettiamo invece che il file piantina.html si trovi sul NOSTRO computer e noi ci stiamo lavorando sopra. Vogliamo iniziare il documento con un "ingresso guidato" alla nostra casa. Come effettuare i collegamenti? Semplicemente saltando direttamente al paragrafo che c'interessa, esempio:

<b>Ecco i locali della mia casa</b><br>
<ul>
<li><A href= "#cucina"> la cucina</A>
<li><A href= "#bagno"> il bagno</A>
<li><A href= "#camera"> La camera da letto</A>
</ul>
<hr>
<A name= "cucina"></A><br>
cucina<br>
gas<br>
tavola<br>
tovaglia<br>
lavastoviglie<br>
mestolone<br>
<A name= "bagno"></A><br>
bagno<br>
bidet<br>
lavandino<br>
doccia<br>
tazza<br>
<A name= "camera"></A><br>
camera da letto<br>
comodino<br>
letto<br>
preservativi<br>
comò<br>
ecc ecc ecc

come vedete, nulla di più facile: i rimandi A HREF puntano tutti a riferimenti A NAME, mi raccomando non dimenticatevi che l'asterisco # va messo nell'A HREF e non nell'A NAME, altrimenti non funziona proprio niente. Ricordatevi anche che l'attributo di A NAME non viene visualizzato dal browser, ma usato solamente come "informazione interna". La coppia di tag UL e LI serve rispettivamente a creare una lista non ordinata (con elementi delimitati da un pallino) e a distinguere tra loro gli elementi della lista. Se avessimo voluto mettere una lista ordinata, cioè con elementi elencati progressivamente in numeri cardinali, avremmo dovuto usare <OL> e </OL> al posto di <UL> e </UL>. Si noti anche che la maggior parte dei tag non sono case sentisitive, cioè possono essere scritti indifferentemente in caratteri piccoli o in lettere maiuscole. I riferimenti di tipo HREF possono essere a loro volta di vario tipo:

<A HREF= "http://www.vostro.server/file.xxx">
punta a un file: se si tratta di un tipo di file riconosciuto dal vostro browser o associato a un programma esterno, lo visualizza direttamente, altrimenti lo salva su disco in attesa di essere utilizzato offline dall'utente.

<A HREF= "ftp://ftp.vostro.server/percorso/file.xxx">
preleva tramite protocollo ftp il programma file.xxx che si trova sul vostro server presso il percorso specificato. Se ad esempio vogliamo che l'utente possa prelevare da ftp.funet.fi l'ipotetico file desiderio.zip che si trova in /pub/msdos/games/ (ricordatevi SEMPRE che non si devono usare le backslash del DOS \, ma quelle standard di UNIX e Amiga /), dovreste scrivere qualcosa del tipo: "preleva <A HREF= "ftp://ftp.funet.fi/pub/msdos/games/desiderio.zip"> desiderio </A>".

<A HREF= "mailto:qualcuno@suo.indirizzo.email">
Apre il client mail per spedire una lettera all'indirizzo specificato. Se per esempio volessi farmi spedire qualcosa, io dovrei inserire: <A HREF= "mailto:paolone@digibank.it"> Clicca qui per mandarmi i tuoi insulti </A>.

Questi sono i riferimenti più comuni, è possibile che nel corso dei mesi ne usciranno sempre di nuovi. Tenete poi presente una cosa, soprattutto quelli di voi che non hanno mai visto Unix in vita loro: i sistemi operativi seri sono case-sensitive, cioè distinguono le lettere minuscole da quelle maiuscole. Questo vuol dire che se il vostro provider usa un server su cui gira Unix, e voi volete metterci una pagina sopra, dovrete scrivere CORRETTAMENTE tutti i nomi dei file, altrimenti combinate solo un bel macello. Per capirci meglio, in dos potete chiamare il file "pippo.zip" in tutti i modi che volete: "PiPPo.ZiP", "PIPPO.ZIP", ecc ecc. In Unix no: pippo.zip sarà una cosa, e PIPPO.ZIP tutta un'altra. Altro trucco del mestiere: potrebbe darsi che un giorno voi scriviate qualcosa del tipo:

cliccate <A HREF= "prrrrt.wav"> QUI </A> per sentire una bella pernacchia.

E che il file prrrrt.wav si trovi esattamente nella stessa directory della pagina HTML su cui compare la succitata riga. Voi cliccate lì per sentire la pernacchia, ma il computer risponde con un bel "Object not found". Ma che strano: il file prrrrt.wav è proprio lì! Perché non lo trova? Niente panico: senza addentrarci sui problemi di configurazione dei sistemi operativi, diciamo solo che basta precedere il nome dei file da "./": questi due caratteri infatti dicono al computer di cercare solo ed esclusivamente nella directory corrente il file da caricare. Modificate cioè la stringa di cui sopra in

cliccate <A HREF= "./prrrrt.wav"> QUI </A> per sentire una bella pernacchia.

Potrà sembrare una stupidaggine, ma io stesso quando ero agl'inizi (praticamente sei mesi fa) ci sono stato sopra a piangere per una buona mezzora.

IMMAGINI

Mettiamo che adesso vogliate fare un simpatico scherzone a vostra sorella, magari mettendo a disposizione di 50.000.000 di utenti di Internet una sua fotografia in pantofole, appena sveglia, con due occhiaie così e i capelli scarruffati. Come fare? Beh, saltiamo pure tutta la problematica che vi serve lo scanner per digitalizzare la foto e via dicendo, e supponiamo pure che la foto ce l'abbiate, che sia in formato JPeG (su internet vanno per la maggiore il GIF e il JPG, se non sapete cosa sono... installate il Paint Shop Pro e imparatelo!), e che si chiami "racchia.jpg". Come inserirla? Vediamo.
Il comando che va a cercare un file immagine è innanzitutto <IMG>, uno dei pochi tag che non ha bisogno di una negazione finale (/) per dire al browser che il comando medesimo è finito. Adesso non è che se scrivete <IMG racchia.jpg> avete risolto il problema, anzi, lasciatemi però dire che l'uso delle immagini in HTML sia quanto di più semplice ci possa essere. Voi gli date tutti i parametri di cui ha bisogno, e l'IMG fa tutto il resto.
Tanto per cominciare, bisogna comunicargli che deve andare a cercarsi il file da visualizzare, e questo lo si fa con l'attributo SRC. Per tanto dovremo scrivere <IMG SRC= "racchia.jpg">, e solo a questo punto la sorellina inizierà a terrorizzare anche chi viene a visitare il vostro sito. Ma per ottenere un effetto dolorifico maggiore, cosa bisogna fare? Beh, per esempio aggiungendo un bordo, e questo lo sia fa con l'attributo BORDER. Assegnandolo, il browser disegnerà attorno all'immagine specificata da SRC una cornice di tanti pixel quanti ne vorremo. Volete l'esempio? Eccovelo!

<CENTER>
Questa ragazza in cornice<br>
<IMG SRC= "racchia.jpg" BORDER= "5"><br>
&egrave; mia sorella appena sveglia<br>
</CENTER>

Se invece preferite che la foto stia a sinistra e il testo le scorra a destra, potete anche aggiungere l'attributo ALIGN, che stabilisce l'allineamento. In questo caso, dovrete assegnargli un valore "left". L'esempio di cui sopra diventerebbe:

<IMG SRC= "racchia.jpg" BORDER= "5" ALIGN= "left">
Questa ragazza in cornice &egrave; mia sorella appena sveglia<br>

Ovvio che se invece di left inseriste "right" il risultato sarebbe diametralmente opposto: scritte a sinistra e foto a destra. Esistono poi altri valori assegnabili ad ALIGN, che sono "top", "middle" e "center". Questi però stabiliscono il punto esatto in cui il browser deve allienare il testo che segue la foto. Inutile che adesso io stia qui a fare migliaia di esempi: tocca solamente a voi provare, l'HTML è poca teoria e tutta pratica.
Vogliamo farla una cosa difficile adesso? Meglio di no? Allora terminiamo qui la lezione di questo numero dicendo che anche le foto possono essere linkate ad altri documenti, siano essi http, ftp, ecc ecc. Per esempio: siete sempre intenzionati a fare lo scherzo a vostra sorella, ma avete pietà dei vostri lettori, per cui intendete lasciare loro la possibilità di decidere se è il caso di vederla o meno? Niente di più facile: procuratevi una foto decente della stessa, chiamatela "decente.jpg" e poi scrivete:

<CENTER>
Questa &egrave; una voto decente di mia sorella:<br>
<A HREF= "racchia.jpg"> <IMG SRC= "decente.jpg" BORDER=0> </A><br>
Ma se ci cliccate sopra la vedrete senza trucco!<br>
</CENTER>

Tutto questo cosa fa? Semplice, va a prendere l'immagine decente.jpg e la visualizza al posto di quella brutta, e poi inserisce un hyperlink (imparate a usare anche i termini inglesi, mi raccomando) verso l'immagine racchia.jpg che purtroppo conosciamo tutti bene. Ho specificato BORDER=0 per evitare che il browser inserisca di suo una cornice, metodo solitamente utilizzato per distinguere un'immagine fissa da una linkata a qualcos'altro.
Bom, e con questo è proprio tutto, alla prossima!!!

[prossima puntata] [indice]