quaderni di usabilità TILS: Scuola Superiore Guglielmo Reiss Romoli

appuntamenti, strumenti di lavoro, personaggi, la rassegna stampa strumenti per approfondire gli argomenti scambia le tue idee ricerche bibliografiche, commenti e suggerimenti, libro degli ospiti consulta i quaderni

vai all'indice del quaderno n° 1

Architettura ed Evoluzione del World Wide Web
HyperText Mark-up Language (HTML): la codifica

Tramite il Web è possibile trasferire informazioni relative a pagine grafiche ipertestuali e l’HTML è il linguaggio con il quale vengono descritte le informazioni ricevute dal browser. Per fare un’analogia con strumenti d'informatica personale, il problema è analogo a quello della visualizzazione (e memorizzazione) delle informazioni di un file per un qualsiasi programma di elaborazione testi (es.: Microsoft Word). Il formato HTML sarebbe in questo caso l'equivalente del formato utilizzato dal programma di elaborazione testi per la memorizzazione dei file (es.: file .doc), mentre il browser sostituisce il programma di elaborazione testi per quanto riguarda la lettura del contenuto del file e la sua rappresentazione sul video della macchina dell'utente (es.: carattere utilizzato nel testo, allineamento del testo, visualizzazione di immagini, …).

Analizzando questa analogia, si può evidenziare una prima differenza tra elaboratore testi e Web, relativa al fatto che nel Web l’accesso al file è tipicamente solo in lettura da parte dell’utente. Una seconda differenza è che nel Web il file è tipicamente memorizzato su di una macchina differente da quella dell'utente, raggiungibile tramite Internet, mentre per l’elaboratore testi il file è normalmente locale. Collegata a questo c’è la caratteristica fondamentale dell’HTML, che è nel fatto che deve essere uno standard indipendente dalla piattaforma. Il server, infatti, non può sapere da chi sarà utilizzata la pagina (browser Microsoft o Netscape, macchia con sistema operativo Windows o UNIX, …) e quindi il formato delle informazioni in esso contenuto dovrà essere indipendente dal programma richiedente.

Per quanto riguarda l’ipertestualità, l’interfaccia grafica adottata dal Web permette di collegare tra loro informazioni tramite parole chiave, detti collegamenti o link. I link vengono evidenziate dal browser in maniera diversa rispetto al testo generico, normalmente con parole in colore blu sottolineate (vedi figura).

image78.gif (14417 byte)

Figura 30: pagina HTML

Questi link si attivano selezionandoli tramite il mouse e ad ogni link è associata l'acquisizione da parte del browser di nuova informazione, tipicamente altre pagine HTML sullo stesso o su altri server. E' proprio questo collegamento tra informazioni differenti sparse nella rete a realizzare quella ragnatela d'informazioni che è il World Wide Web.

Per quanto riguarda il formato adottato dall’HTML, questo deriva dall’SGML (Standard Generalized Markup Language), ideato nel 1979 da Charles Goldfarb [GOL] è poi divenuto standard ISO 8879:1986 SGML. L’SGML è un sistema per la definizione di tipi di documenti strutturati e di linguaggi di "markup". E’ un linguaggio, cioè, che serve per definire la struttura (non l’aspetto) di un documento, tramite la definizione di codici di controllo. L’HTML è uno di questi linguaggi markup ottenuto per semplificazione dell’SGML.

Le istruzioni sono rappresentate da elementi HTML, detti tag, che sono scritti sempre come testo all’interno del file HTML racchiudendoli tra i due caratteri ‘<‘ e ‘>‘ (es.: <p> per indicare l’inizio di un paragrafo, <table> per indicare l’inizio di una tabella, …). Le caratteristiche fissate da un tag HTML rimangono valide fino a che non si incontra un tag di chiusura, ‘</’ e ‘>‘(es.: <p> … </p>, <table> … </table>).

Alcuni dei tag utilizzati in un documento HTML sono:

HTML, è il tag che indica al browser che si tratta di un documento HTML e che apre e chiude qualsiasi pagina con questo formato;
HEAD, contiene l’intestazione del documento, nella quale vi sono informazioni generali, non visualizzate nella pagina;
TITLE, contiene il titolo del documento che viene rappresentato dal browser generalmente nell’angolo superiore sinistro della finestra;
BODY, contiene la parte visualizzata del documento;
H1, H2, … contiene un titolo di primo, secondo, … livello;
P, contiene un paragrafo di testo;
B, rende il testo grassetto;
IMG, specifica l’URL di un file contenente un’immagine;

Ad esempio, la pagina HTML visualizzata nella precedente figura, è scritta come:

<HTML>

<HEAD>

<TITLE>Titolo</TITLE>

</HEAD>

<BODY>

<H3>Pagina di prova</H3>

<P>Testo</P>

<A HREF="http://www.ssgrr.it/">SSGRR</A>

</BODY>

</HTML>

I tag saranno letti ed interpretati dal browser sia per definire il contenuto del documento, sia per definire in che modo sarà visualizzato. Questo legame tra definizione della struttura del documento HTML e visualizzazione del contenuto è una delle semplificazioni che si sono rivelate presto dei limiti del Web, come descritto nel seguito. Infatti, riprendendo il caso del programma per elaborazione testi, l’identificazione di un paragrafo come titolo è importante non solo per definire una particolare visualizzazione, ma anche per definire una struttura utilizzabile, ad esempio, per la realizzazione di un indice.

image79.gif (31272 byte)

 

image80.gif (16480 byte)

Figura 31: associazione di uno stile ad un marcatore di struttura

 

Per creare collegamenti ipertestuali, in HTML viene utilizzato il tag A. Questo tag racchiude il testo che deve essere visualizzato come collegamento ed ha come attributo la parola chiave HREF che specifica l’URL del documento collegato. Ad esempio, il corpo del documento visualizzato in figura, dove il collegamento punta alla home page SSGRR, può essere scritto come:

<body>

<p>Testo</p>

<p><a href="http://www.ssgrr.it">Collegamento</a></p>

</body>

La coesistenza nello stesso file sia del contenuto che dei link è un altro dei limiti dell’HTML, non permettendo, ad esempio, l’aggiunta di link a pagine di annotazioni personale da parte di più utenti, visto che questo vorrebbe dire accedere all’originale sul server.

L’HTML, la cui semplicità è stata essenziale per facilitare la diffusione del Web, ha conosciuto fin da subito una rapida evoluzione con l’introduzione di estensioni del linguaggio in grado di aumentarne le potenzialità. Queste estensioni, sia sottoforma di dialetti proprietari di Netscape e Microsoft sia derivanti da versioni successive dello standard, hanno causato ben presto forti problemi di compatibilità che hanno reso difficile garantire una visualizzazione corretta del documento con differenti browser.