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]