Il linguaggio HTML - Fondamentali

Published in

· 6 years ago

Cos'è HTML?
In principio i computer avevano capacità grafiche ridottissime o nulle, e le informazioni memorizzate elettronicamente (tipicamente documentazione sul software e/o hardware della macchina stessa, o informazioni di qualunque genere rappresentabili in forma testuale) avevano, in fase di visualizzazione, l'aspetto di sequenze di linee di caratteri il cui contenuto era di pura informazione. Per chiarire, non c'era la possibilità, per esempio, di mostrare in corsivo le ultime due parole della precedente frase. Ancora, non si poteva cambiare il font di visualizzazione, che era fisso e stabilito dal sistema operativo, né i suoi attributi (come, appunto, il corsivo o le dimensioni), e l'unica formattazione possibile del testo si otteneva indentando le righe con gli spazi e le tabulazioni e spaziandole con gli Enter. Per simulare elementi tipografici comuni, come i bordi delle tabelle o le linee orizzontali e verticali si usavano i caratteri +, -, |, _, \, /, # e simili. Non si potevano quindi associare al testo informazioni riguardanti il suo aspetto estetico, ed è questo che si intende che il testo visualizzato era costituito da pura informazione.

Per soddisfare le esigenze di organizzazione e reperimento delle informazioni contenute nei documenti testuali venne inventato l'SGML, un linguaggio a marcatori che permettevano di identificare parti del testo. I marcatori non sono altro che particolari sequenze di caratteri che possono racchiudere o separare parti del testo. Scopo primario dell'SGML non era quello di formattare parole o frasi, ma essenzialmente di renderle riconoscibili dal resto. Per esempio, l'identificazione con un particolare marcatore, o tag, dei titoli dei vari capitoli e paragrafi di un documento rendeva possibile compilare automaticamente un indice del documento stesso, o una «bibliografia» di più documenti (per esempio, di tutti i testi scritti da un particolare autore, o che trattavano un particolare argomento). Dal momento che parti del testo avevano ora associati degli attributi, il passo successivo, una volta affermatesi piattaforme più evolute dal punto di vista dell'interfaccia utente, era proprio quello di usare tali informazioni accessorie per presentare il testo all'utente umano in una forma non più «grezza» ma formattata in un certo modo, senza che l'autore del documento si dovesse più preoccupare di formattare artigianalmente il testo stesso.

Nasceva così l'HTML o HyperText Markup Language (Linguaggio Ipertestuale a Marcatori). Già il nome indica un'evoluzione ancora più importante rispetto ai progenitori: il documento HTML da testuale diventa ipertestuale. Questo significa un documento (o una serie di documenti, come le pagine di un sito web) con un'organizzazione logica non più sequenziale come il testo stampato, ma contenente collegamenti arbitrari da una parte del testo a un'altra, collocata ovunque nel testo stesso o in altri testi correlati. È importante sottolineare qui che con «piattaforme più evolute dal punto di vista dell'interfaccia utente» non si intende esclusivamente ambienti grafici come Windows, OS/2, MacIntosh o X-Window, ma anche ambienti a caratteri dotati, per esempio, della capacità di visualizzare testo a colori e/o sottolineato e di intensità maggiore o minore (come per esempio molti terminali carattere o le console testuali Unix, o lo stesso ambiente MS-DOS su PC).

Naturalmente, per visualizzare correttamente questo nuovo tipo di documento testuale non era più sufficiente l'uso di visualizzatori o editor di testo, come Vi, Emacs, edit.com, more, less o Notepad. La parallela nascita e diffusione del servizio Internet noto come WWW (World Wide Web, o Ragnatela Mondiale), e l'adozione del formato HTML per i documenti da rendere disponibile su tale servizio, hanno comportato la comparsa e l'evoluzione di programmi in grado di leggere i tag dell'HTML e di interpretarli in modo da presentare il documento all'utente con una certa veste grafica e formattazione: i cosiddetti web browser, i più noti dei quali sono Netscape Navigator e Microsoft Internet Explorer in ambiente Windows (anche perché recenti protagonisti di una guerra commerciale senza esclusione di colpi), e di nuovo Netscape Navigator e Lynx in ambiente Unix. Quest'ultimo è un esempio lampante di quanto si diceva nel paragrafo precedente, essendo un browser che gira in modalità carattere.

I primi passi
Se avete avuto la pazienza di arrivare fin qui, possiamo ora chiederci: «Ma com'è fatto un file HTML?». Come abbiamo detto, un file HTML è un file di testo che contiene anche delle informazioni accessorie (in gergo TLC si direbbe «Segnalazione in banda») destinate a essere interpretate dal web browser. Questo è lo scheletro base di un file HTML:

 
< HTML> 
< HEAD> 
< /HEAD> 

< BODY>

Un documento HTML deve sempre iniziare con il tag < HTML> e terminare con il suo duale < /HTML>. La sezione < HEAD> può contenere delle informazioni accessorie riguardanti per esempio il titolo del documento, una descrizione, eventuali parole chiave e così via. La sezione < BODY>; invece contiene il testo vero e proprio e i tag di formattazione/impaginazione. Come prima prova, salvate in un file su hard disk lo scheletro di file HTML appena descritto, per esempio con nome prova1.html, dopodiché aprite tale documento con il vostro browser. Se tutto è andato come previsto, avrete una bella... pagina vuota. Riaprite il file con un editor di testo, come il Notepad (Windows) o il Vi (Unix), e andate ad aggiungere subito dopo il tag < HEAD> la seguente linea:

 
< TITLE>Questo e' un titolo< /TITLE>

Ora aprite il file prova1.html con il browser. Cambiato nulla? Sì, non nella finestra (che è sempre vuota) ma nella barra del titolo, che ora mostra il titolo che abbiamo appena inserito.

Cominciamo a scrivere
Riprendiamo il file di prova e aggiungiamo dopo il tag < BODY> le seguenti righe:

 
< H1>Il mio primo documento< /H1> 

< P> 
Questa frase deve apparire in caratteri normali sotto il titolo della pagina. 
< /P> 

< P> 
Questo e' il secondo periodo, distinto dal precedente. 
< /P>

Ecco i primi tag che servono a specificare attributi del testo. Anzitutto, come si può notare, dato un tag che identifica una parte di testo, esiste il corrispondente tag di chiusura che ha la barra / in più, e delimita il raggio d'azione del tag stesso. Il tag (da paragraph) identifica un paragrafo e fa sì che il browser visualizzi quel paragrafo separandolo dagli elementi precedente e seguente del testo. Il tag < H1> invece mostra del testo in caratteri grandi e in grassetto. Esistono 6 diversi tag «H» (da header, intestazione) con la cifra dopo la H che va da 1 a 6. Sperimentate pure la differenza fra tutti questi usando sempre il nostro file HTML di prova.

Gli attributi del testo
Quindi abbiamo un tag che individua un paragrafo di testo, il , e alcuni tag usati per titolare sezioni di testo. Il browser visualizza paragrafi e/o titoli successivi inserendo fra di essi una riga vuota. È però possibile intervenire sul testo con un grado di finezza maggiore, cambiando le caratteristiche di visualizzazione di singole sequenze di caratteri all'interno del paragrafo. Un esempio concreto è dato dal terzo paragrafo di questo articolo, quello che introduceva l'HTML. Lì è possibile (se cliccate sul precedente link) osservare che alcune parole sono scritte in grassetto, altre in corsivo, altre sottolineate, altre ancora con una combinazione di tali attributi. Come si può immaginare, esistono dei tag per ognuno di questi effetti tipografici, ognuno accompagnato dal rispettivo tag di chiusura:

 
< B>: per visualizzare del testo in grassetto (Bold in inglese); 
< I>: per visualizzare del testo in corsivo (Italic in inglese); 
< U>: per visualizzare del testo sottolineato (Underlined in inglese);

Ma un testo non ha soltanto gli attributi di stile. Un'altra caratteristica importante dei caratteri di stampa è quello che in gergo tipografico si chiama corpo. Per intenderci, la «grandezza» dei caratteri. Certe frasi, infatti, oltre (o invece) che essere scritte in grassetto potrebbero essere scritte in caratteri più grandi per evidenziarle meglio (si pensi ai titoli di un giornale). Il tag che ci interessa è (e relativo tag di chiusura). Da solo, però, esso non serve a niente; perché abbia un effetto visibile dev'essere specificato l'attributo SIZE seguito dal segno «=» e da un numero. Per esempio, la scritta che avete visto in precedenza in questo paragrafo, è stata ottenuta così:

 
< FONT SIZE=+2>in caratteri più grandi< /FONT>

Il numero da specificare può essere preceduto da un segno + o -. In tal caso esso è interpretato dal browser come un incremento o un decremento rispetto alle dimensioni di default impostate nello stesso browser, altrimenti sono le dimensioni assolute da usare per il rendering del testo.

Possiamo però fare di meglio, in quanto un altro attributo del testo è il font dei caratteri che li compongono. Per esempio, potremmo scrivere un testo in Arial oppure in Courier New. Il tag coinvolto è sempre , con l'attributo FACE, il segno «=» e il nome del font fra virgolette (ATTENZIONE!!! Dev'essere il nome esatto!). Se il font nominato non è installato nel sistema, o se si è scritto il nome errato (i due casi sono equvalenti) il browser non farà niente, nel senso che ignorerà la direttiva. Ecco come sono state ottenute le due diciture in Arial e Courier New:

 
< FONT FACE="Arial">Arial< /FONT> 
< FONT FACE="Courier New">Courier New< /FONT>

Ovviamente SIZE e FACE possono essere combinati (provatelo sul file di esempio).

Immagini
Inserire un immagine è immediato: basta fare uso del tag < IMG> (dall'inglese IMaGe) specificando l'URL del file da visualizzare. Questo tag non ha il corrispondente tag di chiusura.

 
< IMG SRC="prova.gif"> 
< IMG SRC="/programmi/prova.gif"> 
< IMG SRC="../programmi/prova.gif"> 
< IMG SRC="http://www.server.prova.it/directory/prova.gif">

La figura precedente (per chi se lo chiede... è lo stemma degli ultras della mia squadra) è stata inserita con il primo dei tre esempi riportati sopra. Gli altri tre, invece, mostrano come si possa specificare un percorso assoluto, relativo alla directory in cui si trova la pagina HTML visualizzata e un URL completo, con indicato anche il server da cui il browser prenderà la figura. Nota importante: anche su sistemi di tipo Windows, si deve SEMPRE usare la barra normale / e non quella inversa \ per separare le directory. Come si vede dal quarto esempio, non è necessario che la pagina HTML che visualizza un immagine e l'immagine stessa siano sulla stessa macchina. Se il file specificato nel tag IMG non esiste, il browser non batterà ciglio, limitandosi a visualizzare un'iconcina standard.

Linee orizzontali
Se vogliamo separare due blocchi di testo in maniera più marcata della semplice linea vuota inserita di default dal browser, possiamo usare una linea orizzontale, specificata dal tag < HR> (da Horizontal Row):

Questo tag, come il tag IMG, non ha terminatore.

Riepilogo parziale
Fin qui abbiamo visto diverse caratteristiche di base dell'HTML, che riassumiamo di seguito per comodità:

Tag di base

L'ipertesto
Le caratteristiche fin qui presentate farebbero dell'HTML niente più che l'equivalente elettronico di un linguaggio per tipografi, che specifica dove e come stampare del testo e con quali caratteristiche grafiche. La prima novità sostanziale che incontriamo è costituita dagli iperlink, che trasformano un testo in ipertesto (le lettere H e T del nome, appunto). Sostanzialmente, un testo tradizionale viene letto in sequenza, come una pagina stampata, è cioè monodimensionale, mentre un ipertesto è multidimensionale; esso non ha cioè intrinsecamente una «direzione» di lettura, potendo invece inglobare dei collegamenti che permettono di passare a un altro punto arbitrario del testo, anche su un'altra pagina o addirittura su un altro computer. Tali collegamenti possono essere usati per far accedere l'utente a una pagina dal contenuto attinente a quella corrente, a un indice, ecc., a piacimento dell'autore dell'ipertesto. Quel che serve è un modo per indicare il target del collegamento.

Nel caso dell'HTML, il tag utilizzato per creare un collegamento ipertestuale è %lt;A>, da Anchor, o àncora. Come un'ancora, appunto, può essere usato per marcare un punto di un documento in modo da poterlo «agganciare» da un'altro punto (o, come si diceva, anche da un'altro documento che puo' essere ovunque sulla rete). Il seguente esempio:

 
< A NAME="target">< /A> 
ecc.

crea, in corrispondenza del punto in cui si trova, un riferimento di nome "target" che può essere usato come obiettivo (target, appunto) del tag < A> usato in quest'altro modo:

 
< A HREF="#target">Clicca qui< /A>

Se fate clic su queste parole, vi ritroverete al paragrafo precedente, e se visualizzate il sorgente di questa pagina vedrete le due forme del tag < A> appena introdotte. Per capirne meglio l'uso, provate a modificare la tabella riassuntiva vista in precedenza, in modo che la prima colonna di ogni riga punti al relativo paragrafo.

L'iperlink così come presentato ora serve ad agganciare un altro punto nella stessa pagina. Per riferire un altro documento, bisogna utilizzare come valore del modificatore HREF il nome del file stesso, così: < A HREF="prova1.html">< /A>. Se si vuole agganciare un punto definito, basta porre dopo il nome del file il carattere # seguito dal nome usato nel modificatore NAME. Per esempio, se in prova1.html ci fosse un < A NAME="target">< /A>, il link precedente diventerebbe: < A HREF="prova1.html#target">< /A>. Nel caso si voglia collegare un documento situato in una diversa directory basta specificare il nome del file con il percorso, relativo o assoluto, e nel caso il documento sia su un'altra macchina in rete, si dovrà fornire un URL (Universal Resource Locator, Localizzatore Universale di Risorse) completo, in maniera simile a quanto già introdotto per le immagini.

Ancora sull'impaginazione
Occasionalmente sarà necessario formattare del testo in maniera particolare, per esempio per riportare frammenti di codice di programma. Create un nuovo file HTML, chiamato per esempio listato.html, in cui andrete a scrivere le seguenti righe:

 
#include < stdio.h> 

int main(int argc, char *argv[]) 
{ 
  if (argc) 
     printf("Hai passato %d argomenti", argc); 
  else 
     { 
       printf("Non hai passato argomenti"); 
       exit(1); 
     } 

  exit(0); 
}

Per praticità, potete anche usare il copia/incolla. Ora salvate il nuovo file e apritelo con il browser. Avete ottenuto una schifezza. Dov'è finita la formattazione?

Avete appena scoperto che il browser non tiene conto delle spaziature e degli «a capo» come i normali editor di testo, o meglio non ne tiene conto l'interprete HTML. Rinominate infatti listato.html come listato.txt e visualizzatelo col browser. Adesso, a parte i tag HTML, il testo che avete copiato nel corpo appare esattamente come è stato immesso. Cos'è successo, allora? E' successo che l'HTML comprime in un singolo spazio (ASCII 32) ogni sequenza di spazi, caratteri di tabulazione e ritorni carrello. Se ci fosse la necessità di inserire del testo che debba apparire esattamente come digitato, per esempio listati di programma, il tag da usare è lt;PRE>, insieme al suo compagno lt;/PRE>.

Rinominate in listato.html il precedente file e apritelo con l'editor di testo. Racchiudete ora il listato del programma (in pratica tutto ciò che è racchiuso dal tag BODY) con i tag lt;PRE> e lt;/PRE>, salvate e riaprite il file con il browser. Ora il piccolo programma appare esattamente come è stato digitato. O quasi. Dov'è finito il testo che segue la parola include? Casualmente, questo testo inizia e finisce con i caratteri lt; e gt;, e la conseguenza è che il browser lo scambia per un tag HTML e tenta di interpretarlo. Non esistendo nessun tag < stdio.h>, il browser non fa niente, ma l'effetto collaterale è la scomparsa del testo stesso, che come tutti i tag non viene visualizzato. Vedremo nella seconda parte come ovviare all'inconveniente.

Per concludere questa rassegna, accenniamo al tag < TT> (con il gemello < /TT>), usato per marcare una stringa all'interno di un paragrafo da visualizzare con un carattere a spaziatura fissa, come una macchina per scrivere o simili (TT = TeleType, o Telescrivente). Di solito, per convenzione, si scrivono in questo modo (in genere con il carattere Courier New) nomi di file, comandi di sistema o istruzioni di un linguaggio di programmazione, come ho fatto anch'io finora in questo articolo. < TT> è una comoda alternativa all'uso di ogni volta.

Il seguito alla prossima...
Per ora si può terminare qui. Quelli presentati nel corso di questo articolo sono i tag di base che permettono di costruire una pagina HTML, anzi un intero sito (con gli iperlink). Le pagine ottenute avranno, è vero, un aspetto molto spartano, ma per questo c'è la seconda parte di questa miniserie. Intanto potete scorrere il sorgente di questo stesso articolo, dove potrete trovare alcune cose sicuramente interessanti, nonché ancora non spiegate... :-)