Scope e struttura di un documento HTML

(1)

Ipertesti

Fonti

Dexter Model: Halasz, F. and Schwartz, M. (1994) "The Dexter hypertext reference model."

Grønbaek, K. & Trigg, R., Eds., Communications of ACM 37, 2, Feb. pp. 30-39.

http://citeseer.nj.nec.com/halasz94dexter.html

http://cbl.leeds.ac.uk/nikos/tmp/hypemedia/hypemedia.html

(V. Balasubramanian, Graduate School of Management, Rutgers University, Newark, New Jersey, 1994; currently: http://www.e-papyrus.com/personal/balaindx.html )

Il WORLD WIDE WEB è stato definito un meccanismo di information retrieval basato su IPERTESTI che consente l’accesso all’informazione attraverso piattaforme eterogenee per lo più connesse in

INTERNET. Internet (ai fini del nostro corso) gioca un ruolo passivo: è la rete attraverso la quale i computer sono collegati; nel corso di reti vedrete cosa significa che i computer sono collegati e come avviene la comunicazione, in questo corso prescinderemo da questi aspetti. Il world wide web gioca il ruolo di contenitore: è il contesto all’interno del quale approfondiremo alcuni aspetti relativi alla rappresentazione dei contenuti e della conoscenza. Il concetto di ipertesto, invece, è fondamentale per questo corso in quanto costituisce il modo in cui cui viene organizzata l’informazione accessibile via WWW. Questa sezione è intesa essere una breve introduzione agli ipertesti. Il materiale è tratto per lo più dalle fonti citate a inizio sezione, accessibili via WWW.

Il termine ipertesto è stato coniato da Nelson nel 1965 con la seguente definizione: “un ipertesto è un corpo di materiale testuale o grafico interconnesso in modi complessi che non possono essere convenientemente riprodotti su carta. Può contenere sommari o mappe dei suoi contenuti e le loro inter-relazioni; può contenere annotazioni, aggiunte e note e pié di pagina di studiosi che l’hanno esaminato”. Tuttavia l’origine degli ipertesti è antecedente a questa data e può essere fatta risalire al 1945 quando Bush descrisse uno strumento chiamato “memex”, in cui un individuo può conservare i suoi libri, le sue registrazioni e la corrispondenza e che è meccanizzato in modo tale da poter essere consultato con aumentata velocità e flessibilità, costituendo un supplemento amplificato della memoria. Bush individuò come aspetto fondamentale di memex la possibilità di collegare insieme due elementi. In anni più recenti il concetto di link, inteso come un collegamento (supportato dalla macchina) che può connettere sia parti di uno stesso documento sia documenti diversi, è stato definito caratteristica essenziale di un ipertesto. Proprio la possibilità di esprimere link consente di strutturare il testo in modo non lineare.

Un sistema a ipertesti è costituito da un insieme di nodi (concetti) e di link (relazioni). Un nodo può contenere testo, immagini ma anche animazioni, audio, video o anche programmi (in questi casi si parla più precisamente –anche se il termine è meno usato– di ipermedia). I nodi sono connessi dai link. Se immaginiamo il link come avente una direzione (una freccia) possiamo distinguere un nodo origine (puntatore) e un nodo destinazione (puntato), anche detto ancora. Dato un nodo (puntatore), contenente un link, l’attivazione del link comporta la visualizzazione del nodo ancora. Si noti che i link possono essere bidirezionali, facilitando in questo modo l’attraversamento all’indietro dell’ipertesto, e possono essere tipati. In quest’ultimo caso avremo link di tipo differente, che catturano relazioni di tipo differente fra i nodi. Per esempio si possono immaginare link di appartenenza, link di opposizione, link di dettaglio, ecc. Possiamo anche immaginare di strutturare gli ipertesti in modo gerarchico, nei quali vengono catturate le relazioni di tipo padre-figlio.

(2)

Come si può osservare questa definizione è piuttosto generica e identifica come ipertesti un insieme di sistemi ben più ampio di quelli a cui si può correntemente accedere via web. Se cerchiamo di visualizzare un ipertesto possiamo immaginarlo come un grafo in cui nodi di diverso colore corrispondono a tipi diversi di contenuti e connessioni di diverso colore corrispondono a tipi diversi di relazioni:

Al di fuori del mondo accademico l’approccio a ipertesti è stato a lungo considerato un approccio alle realizzazione di interfacce utente ed è stato utilizzato, per esempio, per realizzare sistemi di help on-line.

Nella letteratura scientifica sono stati definiti diversi modelli di ipertesto, finalizzati a formalizzare i concetti, esposti sopra in modo discorsivo, e le loro conseguenze in termini di rappresentazione e accesso all’informazione. Noi vedremo brevemente solo uno dei più importanti: il Dexter Hypertext Reference Model definito da F. Halasz e M. Schwartz e presentato nel 1990 al NIST Hypertext Standardization Workshop. Curiosità: il nome “Dexter” deriva dal nome della Dexter Inn, New Hampshire, dove nel 1988 si tenne un workshop al quale venne presentata una versione preliminare del modello.

Modello di Dexter

Il modello di Dexter è nato dopo lo sviluppo dei sistemi ad ipertesti come un tentativo di definire una terminologia comune e di catturare in un modello formale alcune astrazioni rilevanti, comuni a molti sistemi di questo tipo. Noi vedremo solo un’introduzione informale al modello in quanto questo è scritto in un linguaggio (il linguaggio Z), il cui insegnamento non è scopo di questo corso.

Chi fosse interessato alla modellazione degli ipertesti è invitato a leggere il survey di Balasubramanian, accessibile via web all’indirizzo indicato all’inizio di questo documento.

In Dexter un sistema a ipertesti è suddiviso in tre layer (strati): il runtime layer, lo storage layer e il within-component layer. Lo storage layer è la parte analizzata più in dettaglio in quanto descrive l’ipertesto vero e proprio, in termini di una gerarchia di componenti, interconnessi da link. Le componenti sono viste come generici contenitori di dati, senza alcuna differenziazione relativa al tipo di dato contenuto (per esempio testo o immagini) o alla struttura insita nei dati medesimi. La modellazione del contenuto e della sua struttura è parzialmente affrontata dal within-component layer, anche se questo argomento non è particolarmente approfondito nel modello di Dexter in quanto, come citato esplicitamente, la varietà dei possibili contenuti e della loro struttura è talmente ampia da non poter essere catturata appieno. L’idea suggerita è che più che tentare di costruire a priori un modello per tutti i possibili contenuti, sarebbe meglio -qualora reputato necessario e su domini specifici- integrare il modello di Dexter con appositi modelli sviluppati per il tipo di contenuti utilizzati in quel contesto.

(3)

Storage e within-component layer riguardano l’ipertesto come entità passiva: una certa quantità di informazione organizzata. Tuttavia i sistemi ad ipertesti comprendono anche una componente attiva: quella che utilizza l’informazione per un qualche scopo, sia esso accedere piuttosto che visualizzare oppure manipolare parte di queste informazioni. Questi aspetti sono catturati dal runtime layer. Anche in questo caso il modello si limita a catturare gli aspetti essenziali dell’interazione e non tutti i dettagli di tutte le possibili interazioni con un ipertesto. Riassumendo, possiamo descrivere i tre strati nel seguente modo:

1. Runtime layer: cattura aspetti essenziali dell’utilizzo dell’ipertesto

2. Storage layer: rappresenta gli aspetti intrinsechi degli ipertesti, in modo passivo e ignorando il contenuto delle componenti

3. Within-component layer: rappresenta la struttura del contenuto delle componenti

Fra i livelli 1-2 e i livelli 2-3 sono inserite delle interfacce: fra i livelli 2-3 è inserita un’interfaccia di ancoraggio (che ignoreremo) mentre fra 1-2 è inserita un’interfaccia di specifica della presentazione. Per specifica della presentazione si intende un meccanismo per mezzo del quale è possibile codificare nella rete ipertestuale (contenuta nello storage layer) informazioni su come una componente debba essere presentata all’utente. Il modello di Dexter fa dipendere il modo in cui un’informazione è presentata non solo dallo strumento che esegue la presentazione ma anche da proprietà intrinseche alla componente medesima e dal link (o dalla sequenza di link) tramite il (la) quale tale componente è stata raggiunta. Per esempio, supponiamo che la componente in questione corrisponda a un documento scritto da un docente per i suoi studenti, nel caso in cui la visualizzazione del documento sia raggiunta da una componente “studente” (es. una pagina di un sito web realizzato per fornire materiale didattico agli studenti) potrebbero essere omesse dalla presentazione alcuni promemoria dell’autore relativi all’impostazione del documento, che dovrebbero invece essere presentati qualora il documento venisse raggiunto da una componente

“docente”.

L’esempio non tragga in inganno facendo pensare che il modello di Dexter cattura forme di adattatività all’utente: sebbene dimostri di cogliere certi aspetti di flessibilità, in Intelligenza Artificiale l’adattatività all’utente è considerata intrinseca all’interazione fra il singolo utente (e non una categoria di utenti) e il sistema: il sistema seleziona/presenta l’informazione basandosi anche sulle informazioni attualmente a disposizione relative allo specifico signor Rossi che lo sta utilizzando.

Storage layer: lo storage layer descrive la struttura di un ipertesto come (1) un insieme finito di componenti, (2) al quale si aggiungono due funzioni, dette resolver e accessor, che consentono l’effettivo accesso alle componenti. Le componenti sono le entità fondamentali dello storage layer:

possono essere atomiche (indivisibili) oppure composte a partire da altre componenti. In questo caso la componenta ha una struttura gerarchica.

Supponiamo, per esempio che a componente C1 sia costituita da C2 e C3 e che C2 sia a sua volta composta da C4 e C5. Possiamo rappresentare questa composizione sia come un albero sia secondo una rappresentazione a scatole cinesi (analoga a quella utilizzata in molti sistemi operativi –tipo Windows– per visualizzare le directory e il loro contenuto):

(4)

Ogni componente ha un identificatore unico (UID); in altri termini non esistono due componenti con lo stesso identificatore.

Nel modello di Dexter i link sono sequenze di due o più specificatori. Ogni specificatore consiste di: (1) la specifica di una componente, (2) l’identificatore di un’ancora, (3) una direzione e (4) una specifica di presentazione. 3-4 sono opzionali. La specifica di una componente individua la componente oggetto del discorso. L’ancora funge da aggancio con il within-component layer e serve ai programmi che devono gestire il contenuto della componente (pur essendo un elemento molto importante del modello la ignoreremo in questa trattazione). La direzione può alternativamente essere from, to, bidirect e none. La specifica di presentazione funge da aggancio con il runtime layer (ignoreremo pure questo elemento). Quindi i link possono avere una direzione e idealmente possono coinvolgere più di due componenti, anche se nelle realizzazioni i link coinvolgono solitamente due componenti. Vediamo un esempio:

Quindi, per esempio, il link “Link1” è definito in base a due specificatori: “C1, From” e “C2, To”.

HTML (Hyper-Text Markup Language)

C1

C2

C3

C4 C5

C1

C2 C3

C4 C5

C1 C2

C3

C4

C5

componenti

Link1 C1, From C2, To Link2 C1, From C3, To

Link3 C2, From C4, To Link4 C2, From C5, To

link

(5)

HTML è un linguaggio che consente di realizzare ipertesti accessibili via web ovvero: attraverso internet, utilizzando i meccanismi di information retrieval offerti dal WWW. I nodi degli ipertesti sono costituiti da pagine HTML (o documenti HTML o semplicemente pagine), i link sono unidirezionali, non tipati. È possibile sia avere link fra pagine diverse sia avere link che collegano porzioni diverse della stessa pagina. Le pagine possono contenere testo, immagini, suoni, video.

Tralasciamo per il momento la possibilità di inserirvi dei programmi.

HTML è un linguaggio di markup (di marcatura): intuitivamente, il realizzatore di una pagina HTML scrive sotto forma di testo il contenuto della pagina medesima, circondando porzioni di testo che vanno trattate in modo particolare con dei tag (etichette). Tali etichette vengono intercettate dai browser, che presenteranno il contenuto circondato dal tag in maniera speciale.

Tutti i documenti HTML sono divisi in due parti: la prima (head) contiene meta-informazioni, quali per esempio il nome dell’autore, il titolo del documento, l’editor eventualmente utilizzato, ecc. La seconda parte (body) contiene l’informazione che verrà visualizzata.

Esempio 1

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Le parentesi angolari contraddistinguono i tag: <HTML>, <HEAD> e <BODY> sono tag. Lo scope di un tag, ovvero il suo campo d’azione, è tutta la porzione di documento che va fra <tag> e </tag>.

Si noti che HTML è case-insensitive, questo significa che i tag possono essere scritti maiuscoli o minuscoli senza differenza alcuna. Io utilizzerò le maiuscole per questione di visibilità. All’interno di un documento HTML possono essere inseriti commenti (che non verranno visualizzati all’utente) parentesizzado i medesimi fra “”. È importante osservare che qualora facciate un errore per cui fra parentesi angolari compare il nome di un tag non definito, i browser si limiteranno ad ignorarlo. Ciò può portare a comportamenti inattesi. Per esempio il tag <B> (con la corrispondente chiusura </B>) viene usato per indicare che il testo racchiuso deve essere visualizzato in grassetto (bold face), se però scrivo per errore:

<V> presunto testo in grassetto </B>

l’effetto sarà che: essendo <V> un tag ignoto sarà trascurato, parimenti verrà trascurato </B> a cui non corrisponde nessun <B> di apertura.

Come sempre in caso di codice, i documenti HTML possono essere scritti con qualsiasi editor però è fondamentale che vengano salvati in formato “solo testo” con estensione html o htm.

Esempio 2

<html>

<head>

(6)

<title>La mia prima pagina</title>

</head>

<body>

Ciao mondo!!!

</body>

</html>

Il precedente è un semplice esempio di pagina HTML non vuota.

Un po’ di TAG

In questa sezione vedremo qualche tag che consente di modificare la presentazione dei contenuti di una pagina quindi tutti i tag che vedremo vengono utilizzati all’interno dello scope di <BODY>.

Questo elenco non è esaustivo ma si limita a riportare i tag di uso più frequente.

Corsivo: <I> … </I>

Grassetto: <B> … </B>

Nuovo paragrafo: <P> … </P>

Lettere accentate: è à … È À … é É … Testo centrato: <CENTER> … </CENTER>

Esempio 3

<BODY>

Questo testo comparirà tutto scritto su di una <I>linea sola</I> anche se vado a capo scrivendolo

<p>

Ora inizio un nuovo paragrafo che verrà

centrato all’interno della pagina

</CENTER>

</P>

</BODY>

Com’è scritto nell’esempio 3, il fatto che nello scrivere il codice di una pagina HTML io interrompa le linee andando a capo non influenza in alcun modo la presentazione del contenuto della pagina.

Infatti i browser spezzano le linee andando a capo o creano nuovi paragrafi solo quando incontrano specifici tag quale per esempio <P>. Anche il numero di spazi che separano le parole è indifferente.

Si osservi inoltre che per inserire nel testo lettere accentate occorre utilizzare la notazione HTML per i caratteri speciali. Un carattere speciale è identificato dalla sequenza &nome; dove i simboli

“&” e “;” parentesizzano il nome del carattere. Questi nomi sono predefiniti ed è possibile trovare il loro elenco su qualsiasi manuale HTML. Nel caso della lingua italiana i caratteri speciali di uso più frequente sono le lettere accentate. Per tutte le vocali (maiuscole e minuscole) sono definiti i caratteri speciali &Vgrave; e &Vacute; (uso la lettera V per indicare una qualsiasi vocale maiuscola o minuscola). Per esempio la lettera “à” è indicata dal carattere speciale à mentre la lettera

“á” è indicata da á. Per fare qualche esempio utilizzando un’altra vocale, la lettera “È” è

(7)

denotata come È la “ò” con ò e così via. Non vedremo i codici corrispondenti ma in maniera analoga sono trattati tutti i tipi di accento, come per esempio “ö” oppure “Ñ”. Un altro carattere speciale che non è un accento ma è di uso assai frequente è lo spazio (blank-space) il cui codice in HTML è  .

In realtà non tutti i tag parentesizzano del testo. Per esempio è possibile andare a capo interrompendo una linea, senza però iniziare un nuovo paragrafo utilizzando il tag <BR> che non ha un corrispettivo </BR>. Analogamente è possibile inserire nella pagina una linea orizzontale utilizzando il tag <HR> (che non ha un corrispondente </HR>).

Altri tag molto utilizzati sono quelli che consentono di presentare liste numerate o puntate di elementi. In HTML le liste puntate sono dette unordered list mentre quelle numerate sono dette ordered list. I tag corrispondenti sono <UL> … </UL> e <OL> … </OL>. Ogni lista contiene un insieme di list item (punti) identificati da <LI> … </LI>.

Esempio 4

<BODY>

<B>Elenco degli argomenti del corso</B><BR>

(gli argomenti verranno affrontati nell’ordine in cui compaiono):

<OL>

<LI> Linguaggio HTML </LI>

<LI> Linguaggio XML </LI>

<LI> Semantic Web </LI>

</OL>

</BODY>

Scope e struttura di un documento HTML

Prima di inoltrarci in dettagli più tecnici del linguaggio HTML riprendiamo il discorso relativo allo scope dei tag e scopriamo la struttura di una pagina HTML, cominciando con un’osservazione.

Supponiamo di voler scrivere una pagina contenente due paragrafi e che, per qualche motivo, l’ultima parte del primo paragrafo e la prima del secondo devono essere scritte in grassetto. In pratica ci aspettiamo qualcosa del tipo:

Questo è il primo paragrafo. Questa parte è scritta in grassetto.

Questo è il secondo paragrafo e la prima parte è scritta in grassetto.

Ebbene stando a quel che abbiamo detto fino il codice corrispondente potrebbe essere:

<BODY>

Questo è il primo paragrafo. <B> Questa parte è scritta in grassetto. </B>

<P> <B>Questo è il secondo paragrafo</B> e la prima parte è scritta in grassetto. </P>

</BODY>

(8)

Nulla però ci vieta di scrivere, alternativamente:

<BODY>

Questo è il primo paragrafo. <B> Questa parte è scritta in grassetto.

<P>Questo è il secondo paragrafo </B> e la prima parte è scritta in grassetto. </P>

</BODY>

Osserviamo che il tag <P> compare fra il tag <B> e la sua chiusura </B> ma non la sua chiusura

</P>. Abbiamo quindi un’alternanza: <B> <P> </B> </P>. Ebbene mentre la prima codifica è corretta (si dice che il documento è ben formato). Nel secondo caso la codifica non è corretta (il documento non è ben formato). Ogni linguaggio informatico (sia esso un linguaggio di presentazione di contenuti, come HTML, sia esso un linguaggio di programmazione, come Lisp o Java) obbedisce a delle regole sintattiche inviolabili che definiscono la struttura delle “frasi” (i programmi) in modo non ambiguo. La sintassi di un linguaggio è lo strumento che consente di realizzare interpreti (come i browser) o compilatori (come gcc o javac), che a loro volta consentono l’esecuzione del codice scritto nel linguaggio in questione. Ricordate infatti che un computer di per sé non è in grado di eseguire le istruzioni scritte in qualsiasi linguaggio (ne esistono centinaia e sono in continua evoluzione!) ma può eseguire solo le istruzioni scritte nel suo linguaggio macchina (troppo a basso livello perché sia possibile programmarci agevolmente applicativi complessi quali quelli a cui siamo abituati). Nel caso dell’HTML le regole sintattiche sono molto semplici e basta seguire gli esempi contenuti in questi appunti per acquisirle. In un certo senso un documento HTML può essere visto come un insieme di scatole cinesi: ogni scatola (tag) contiene altre scatole (tag) ma non può accadere che contenuto e contenitore si accavallino. Per esempio, il codice contenuto nell’esempio 4 può essere rappresentato graficamente nel seguente modo:

Si osservi che la figura non rappresenta il layout della pagina HTML così come verrà visualizzata bensì il layout del codice così com’è scritto nel file. Il codice della figura precedente è corretto, il seguente invece è un esempio di codice non ben formato, che potrebbe quindi creare dei problemi all’atto dell’interpretazione:

<BODY>

<B>Elenco degli argomenti del corso</B><BR>

(gli argomenti verranno

affrontati nell’ordine in cui compaiono):

<OL>

<LI> Linguaggio HTML </LI>

<LI> Semantic Web </LI>

</OL>

</BODY>

BODY B

BR

OL LI

LI LI

(9)

In questo esempio il tag <B> viene chiuso dopo l’inizio del primo tag <LI> mentre l’ultimo tag

<LI> viene chiuso dopo la fine del tag <OL>.

Modificatori

In questa sezione affrontiamo un ultimo aspetto dei tag, il fatto che i tag sono parametrici. Ciò significa che la maggior parte dei tag ha un effetto di default che può essere variato a patto di indicare nel codice HTML delle impostazioni diverse. In alcuni casi (per esempio nella definizione di link) definire dei valori per uno o più modificatori è essenziale. Un primo esempio è il tag <P>, l’indicatore di un paragrafo. È possibile indicare che il testo contenuto nel paragrafo sia allineato a destra (anziché a sinistra, valore di default) utilizzando la seguente specifica: <P ALIGN=right>.

Anche ALIGN è una parola chiave del linguaggio HTML, non è tuttavia un tag. È uno dei parametri che definiscono il comportamento del tag <P>. “right” è il valore che assegnamo ad ALIGN. Si osservi che tale assegnamento è valido solo per l’occorrenza di <P> in questione; non è vero che dal momento di questa definizione in avanti tutti i paragrafi saranno allineati a destra.

Anche <BODY> ha dei modificatori. Fra questi vi sono BGCOLOR, BACKGROUND e FONT_FACE, che controllano rispettivamente il colore di sfondo della pagina, l’eventuale immagine di sfondo e il tipo di carattere utilizzato. Per esempio:

indica che il colore di sfondo della pagina è il bianco e il carattere utilizzato nella pagina è di tipo Arial. Se si vuole utilizzare un’immagine di background se ne deve indicare il path:

<BODY bgcolor="#ffffff" background=”images/bgr1.png”

font_face="arial">

la presenza di BGCOLOR e di BACKGROUND non è conflittuale: i browser danno precedenza a BACKGROUND se però per qualche motivo fosse impossibile visualizzare l’immagine in

<BODY>

<B>Elenco degli argomenti del corso

<OL>

<LI>Linguaggio HTML</B></LI>

<LI> Semantic Web

</OL>

</LI>

</BODY>

BODY B

OL LI

LI LI

(10)

questione utilizzeranno il colore indicato in BGCOLOR. Nota: è sempre meglio definire un valore per BGCOLOR in quanto il colore di default della pagina varia da browser a browser.

Altri due tag nei quali i modificatori giocano un ruolo fondamentale sono <FONT> e <IMG>. Il primo serve per eseguire modifiche sul tipo di carattere usato il secondo per inserire immagini.

Consideriamo, per esempio, una parte della pagina HTML che ho preparato per il vostro corso (quella principale). In essa la scritta “Ricevimento” è in rosso mentre il resto del testo è in nero.

Questo è parte del codice di quella pagina:

<BODY bgcolor="#ffffff" font_face="arial">

<b>Cristina Baroglio</b><br>

Dipartimento di Informatica<br>

Università di Torino

<p>

<b> <FONT color="#ff0000">Ricevimento</FONT> </b>:

mercoledì 14:00 - 16:00 c/o Dip. Informatica

In questo brano di codice possiamo osservare sia l’utilizzo dei modificatori nel tag <BODY> sia l’utilizzo del tag <FONT>. Attraverso COLOR si indica che il colore del testo racchiuso da

<FONT> … </FONT> dovrà apparire di colore rosso. Il resto del testo è invece del colore di default. Oltre al colore è possibile modificare il tipo di carattere e la sua dimensione tramite FACE e SIZE. Altro esempio: supponiamo di volere che la scritta “Ricevimento” sia scritta in courier, in rosso e che i caratteri siano più grandi di quel che è definito di default; possiamo scrivere:

<FONT size=+1 color="#ff0000" face=courier>Ricevimento</FONT>

La dimensione dei caratteri viene indicata con numeri positivi/negativi (+1, +2, -1, -2, …), i nomi dei font sono predefiniti. Si osservi che qualora un browser non possa pre qualche motivo utilizzare il tipo di carattere specificato utilizzerà quello di default.

Astraendoci un attimo e cercando di analizzare il linguaggio HTML tramite questi esempi, possiamo osservare che: (1) i parametri sono individuati tramite il loro nome e non tramite la loro posizione nell’elenco, (2) vengono specificati solo quei parametri dei quali non si intende utilizzare il valore di default. In parole povere abbiamo un comportamento standard (predefinito) modificabile in modo molto vincolato attraverso la specifica di un insieme di valori. Attraverso i meccanismi visti finora non possiamo, per esempio, decidere che tutte le volte che compare un grassetto i caratteri siano scritti in rosso.

Passiamo ora al tag <IMG> per l’inserimento di immagini in un documento HTML. <IMG> è un tag vuoto, nel senso che (come per <BR>) non esiste una chiusura </IMG> corrispondente. Tutte le informazioni relative all’immagine da visualizzare e a come visualizzarla dipendono dai modificatori. I modificatori più importanti del tag <IMG> sono SRC, il ui valore è l’URL (Universal Resource Locator) dell’immagine da visualizzare, e ALT, il cui valore è una stringa che compare sia al posto dell’immagine quando questa per qualche motivo non può essere visualizzata sia quando l’utente porta il mouse sull’immagine. Altri modificatori controllano lo spessore del bordo (cornice) dell’immagine (BORDER, vi si assegna 0 quando non si desidera che compaia alcun bordo), altezza e larghezza dellarea occupata dall’immagine nella pagina (WIDTH e HEIGHT, i valori sono le dimensioni in questione). Le dimensioni vanno indicate solo quando non si vuole utilizzare la dimensione reale dell’immagine; definiscono quindi lo scalamento a cui è sottoposta l’immagine stessa. Vediamo un esempio d’uso di <IMG>:

(11)

In questo caso l’URL è il path relativo che consente di raggiungere l’immagine desiderata.

Link

Fino ad ora abbiamo visto tutti tag finalizzati alla presentazione di contenuti (scrittura delle singole pagine, intese come nodi di un ipertesto). L’altro elemento principe degli ipertesti è il link, il collegamento. I collegamenti sono indicati utilizzando il tag <A> … </A>. Questo tag e la sua chiusura parentesizzano una porzione di pagina (testo o immagine) che verrà visualizzata in maniera particolare e consentirà di accedere a un documento collegato oppure a un’altra porzione del documento stesso. L’URL del documento collegato, da visualizzare, è contenuta nel modificatore HREF del tag <A>. Esempio:

<A href=”http://www.unsito.it/home.html” > clicca qui </A>

Il testo “clicca qui” fungerà da link verso il documento identificato dall’URL http://www.unsito.it/home.html. Il documento verrà mostrato nella stessa finestra del browser in cui è visualizzato il documento contenente il link. È possibile richiedere al browser di aprire una nuova finestra tramite il modificatore TARGET=”_blank”:

clicca qui </A>

Riprenderemo il discorso sul modificatore TARGET quando parleremo dei frame.

Un caso particolare è costituito dai link che puntano ad altre porzioni dello stesso documento. In questo caso occorre identificare i punti a cui saltare, attribuendo un identificatore a una parte di un documento. Sia l’attribuzione dell’identificatore sia la definizione del link viene fatta utilizzando il tag <A> con modifiatori differenti. Per definire un punto a cui saltare (o ancora) si utilizza NAME mentre per definire un link si utilizza anche in questo caso il già citato HREF. Esempio:

…

<a href="#paperino">clicca qui</a>

…

…

Nell’esempio precedente viene definito un link che fa saltare ad una porzione di documento scritta più avanti ed identificata dal nome “paperino”. Nella definizione di un’ancora <A> e </A> non contengono normalemente né testo né immagini.

Si osservi che, più in generale, è possibile saltare ad una specifica porzione di un altro documento, a patto che questo sia identificato da un nome noto. Nella sua forma più generale, un link comprende un’URL e un’ancora come nel seguente esempio:

<A href=”http://www.unsito.it/home.html#idSezione” > clicca qui

</A>

(12)

Tabelle

Le tabelle sono lo strumento HTML principale per definire il formato di una pagina. Spesso i bordi delle tabelle sono invisibili ed il loro unico scopo è ordinare il contenuto della pagina. La definizione di una tabella è un po’ macchinosa; la struttura generale è la seguente:

<TABLE>

<TR>

… </TR>

<TR>

… </TR>

…

</TABLE>

Una tabella (<TABLE> … </TABLE>) è divisa in righe (table row: <TR> … </TR>). Ciascuna riga è divisa in celle (table data: <TD> … </TD>). Al posto di <TD> può comparire anche <TH>

…</TH> (table header o intestazione). All’interno delle varie celle è inserito il contenuto della tabella (testo, immagini, altro) e naturalmente altri tag (link, formattazioni, ecc.). Il tag <TABLE>

ha dei modificatori che consentono di alterarne l’aspetto; inoltre ogni elemento di una tabella (<TR> o <TD>) può avere propri modificatori che ne caratterizzano ulteriormente l’aspetto talvolta rendendolo molto dissimile da quello degli altri elementi della tabella. Vediamo subito un esempio:

Esempio 5

<TD> <b>Telefono</b> </TD>

<TD> <b>Ufficio</b> </TD>

</TR>

<TR>

<TD> Andrea Rossi </TD>

</TR>

<TR>

<TD> Luisa Bianchi </TD>

</TR>

</TABLE>

(13)

Questo codice genera la tabella seguente:

Nell’esempio 5 è stato evidenziato in blu un fatto interessante: si osservi che per quel che riguarda la prima riga della tabella, viene specificato che il colore di sfondo è #CCFFFF (corrispondente all’azzurro in figura), subito dopo nella definizione della prima cella di questa riga si specifica che il colore di sfondo della cella è diverso e pari a #FFCC99 (il color pesca della figura). Volendo rappresentare la tabella tramite la rappresentazione a scatole cinesi citata qualche pagina fa, otterremo qualcosa del tipo:

Consideriamo la prima riga della tabella: per il tag <TR> viene specificato il valore di una proprietà (bgcolor). Tale specifica modifica la presentazione di tutto ciò che è circondato da <TR bgcolor =

#CCFFFF> … </TR> a meno di ulteriori specifiche. Nella fattispecie il primo elemento della prima riga ridefinisce il colore di sfondo attribuendo un valore diverso alla proprietà bgcolor, valore utilizzato solo all’interno di <TD bgcolor = #FFCC99> … </TD>. Utilizzando un termine diverso possiamo dire che esiste un meccanismo di ereditarietà che fa sì che non sia necessario ripetere l’assegnazione di particolari valori ai modificatori di tanti tag diversi, in quanto ciascun tag si trova immerso in un contenitore (un altro tag) ed eredita –almeno in parte– i valori validi in quel contesto.

Tutte le proprietà (modificatori) a cui stiamo facendo riferimento sono relativi al modo in cui viene presentata l’informazione, riguardano quindi gli aspetti grafici e di layout.

La tabella dell’esempio 5 è ben visibile. Molto spesso in HTML si utilizzano invece tabelle prive di bordi (invisibili) il cui unico scopo è ordinare alla vista l’informazione contenuta in una parte di un documento. In questo caso si utilizza : <TABLE border=0 > … </TABLE>.

Form

TABLE

TR

TD TD TD

TR

TD TD TD

TR

TD TD TD

(14)

I form (o moduli) sono lo strumento che HTML fornisce per consentire a un applicativo accessibile via web di acquisire dati inseriti dall’utente. Il tag che consente di definire form è <FORM> …

</FORM>. Il tag <FORM> ha due modificatori i cui valori vanno sempre definiti: action e method.

Spiegheremo il loro utilizzo più avanti in questa sezione. Analizziamo prima quale può essere il contenuto del tag <FORM>. <FORM> può contenere qualsiasi una qualsiasi porzione (ben formata) di un documento HTML, in più può contenere degli elementi finalizzati all’acquisizione di dati e, più precisamente:

1. campi di immissione <INPUT>: consente di definire (fra le varie cose) brevi campi per l’immissione di testo (es. nome, cognome, città, …), bottoni di tipo radio e checkbox, bottoni di sottomissione e reset, password;

2. textarea <TEXTAREA>: consente di introdurre testi lunghi (messaggi per cartoline virtuali, commenti, descrizioni, ecc.)

3. opzioni <SELECT> + <OPTION>: consente di definire un insieme di valori alternativi (I giorni della settimana, I mesi dell’anno, ecc.)

Vediamo un semplice esempio:

<FORM action=”mailto:c@b.it” method=post>

nome: <INPUT type=text name=”nome”> <BR>

cognome: <INPUT type=text name=”cognome”> <BR>

<p>

<INPUT type=submit value="ok">

<INPUT type=reset value="cancella dati">

</FORM>

Sono evidenziate in grassetto le parti di codice relative al form vero e proprio, il resto è codice HTML dello stesso tipo di quello visto fino alla sezione precedente. Ecco la pagina corrispondente:

Come si può osservare gli elementi del form non sono inseriti in modo ordinato nella pagina, se non fosse per i <BR> aggiunti al codice tutti gli elementi del form verrebbero inseriti sulla stessa linea.

Per dare a un form un aspetto più gradevole (ordinato) occorre definire al suo interno una tabella, magari con i bordi invisibili, inserendo i vari elementi nelle sue celle. Per esempio (questo è l’intero file HTML e non solo una porzione come nei casi precedenti):

<html>

(15)

<TR>

</TR>

<TR>

<TD>cognome:</TD>

</TR>

<TR>

<TD>

</TR>

</TABLE>

</FORM>

</body>

</html>

Nell’esempio è stato evidenziato in blu un campo della tabella vuoto: questo campo ha una sua utilità in quanto consente di inserire i bottoni di “ok” e “cancella dati” nella seconda colonna. Ecco il risultato:

Il form dell’esempio contiene due campi di immissione testo e due bottoni: uno per confermare i dati, l’altro per resettare il form (e quindi cancellare i valori immessi). Tutti questi elementi sono definiti utilizzando il tag <INPUT> con valori differenti per “type”: “text” nel caso dei campi testo,

“submit” per il bottone di conferma e “reset” per il bottone di cancellazione dati. Submit e reset sono due casi speciali, tutti gli altri campi contenuti in un form possono essere considerati alla stregua di variabili. Per variabile intenderemo un oggetto identificato da un nome, che può assumere valori differenti. Il nome del campo è contenuto nel modificatore “name”di <INPUT>, tale nome verrà utilizzato dall’applicativo sul lato server, preposto all’elaborazione dei dati, per identificare il dato in questione e trattarlo di conseguenza. Il valore è il dato inserito dall’utente.

(16)

Quando l’utente clicca su un bottone di tipo “submit” l’azione inserita come valore del modificatore

“action”di <FORM> viene eseguita. Tipicamente questa azione consiste nell’attivare un programma, che si trova su di una macchina remota, sui dati inseriti dall’utente, che vengono inviati sotto forma di un insieme di coppie [nome, valore]¹. Nel nostro caso, quindi, verranno inviate due coppie (facciamo finta che l’utente abbia inserito i dati “Giacomo” per nome e “Rossi” per cognome): [nome, “Giacomo”], [cognome, “Rossi”]. L’applicativo da attivare è identificato da un URL (es. http://www.pincopalla.it/servlet/accessDB). Nell’esempio l’azione è mailto:c@b.it:

l’esecuzione di questa azione comporta l’invio di una mail all’indirizzo specificato. Il modificatore

“method” di <FORM> può contenere due valori alternativi “get” e “post”. Il suo significato è legato al protocollo utilizzato per l’invio dei dati in rete: http (Hyper-Text Trasmission Protocol). In questo corso non scenderemo nel dettaglio dei protocolli di comunicazione in quanto questi saranno argomento del corso di reti; potete però immaginare un protocollo di rete come una specifica del formato dei messaggi inviati unito alla specifica delle regole secondo le quali avviene la loro trasmissione e gestione.

Errore grave: il codice a sinistra e quello a destra non sono equivalenti!! Solo quello a sinistra è corretto:

Un bottone “submit” (o “reset”) agisce esclusivamente su ciò che è racchiuso all’interno del

<FORM> … </FORM> in cui esso stesso è racchiuso. È un grave errore spezzare gli elementi di un form in tanti sottoform con l’idea che vengano poi gestiti come un tutt’uno. Ho visto compiere questo errore a diversi studenti che dovevano combinare <FORM> e <TABLE>e anziché inserire la tabella nel form, organizzando in essa i vari <INPUT> spezzavano il form in sottoform inserendoli nei campi della tabella.

Radio, checkbox e textarea

Passiamo ora ad analizzare altri tipi di campi <INPUT>. Cominciamo con il tipo “checkbox”:

Quali di questi luoghi hai visitato?<br>

<INPUT type=checkbox name="Roma"> Roma <br>

<INPUT type=checkbox name="Milano"> Milano <br>

<INPUT type=checkbox name="Bologna"> Bologna <br>

1 La notazione con le parentesi quadre non è una convenzione, il suo uso è puramente didattico e limitato a questo corso.

nome:

</FORM>

<FORM>

nome:

</FORM>

</FORM>

(17)

</FORM>

Ecco cosa compare:

I campi di tipo “checkbox” consentono all’utente di selezionare diverse opzioni fra quelle elencate.

Come si può osservare dal codice ogni opzione corrisponde a una variabile avente un nome diverso.

Il valore della variabile sarà “checked” oppure “not checked” (vero o falso, on o off). Se nella pagina di browser mostrata sopra cliccassi su “ok” invierei una mail con il seguente contenuto:

Milano=on&Bologna=on (scritto tutto attaccato).

Vi sono casi in cui le diverse possibili risposte ad un quesito sono alternative, in tal caso possiamo utilizzare alternativamente “radiobutton” oppure <SELECT> + <OPTION>. Cominciamo con i radio button:

Dove sei nato?<br>

<INPUT type=radio name="citta" value=”Milano”> Milano <br>

<INPUT type=radio name="citta" value=”Bologna”> Bologna <br>

</FORM>

Il browser visualizzerà:

(18)

cliccando su “ok” viene inviata una mail che contiene: citta=Milano. Si osservi che per far sì che i vari radio button corrispondano a valori alternativi di una stessa variabile nella loro definizione viene utilizzato lo stesso “name” (citta) con “value” differenti. È possibile indicare un valore di default per la variabile inserendo in uno dei campi <INPUT value=radio> la keyword CHECKED.

Nell’esempio il valore di default è “Roma”.

Un’alternativa è definire una lista di selezione:

Dove sei nato?<br>

<SELECT name="citta">

<OPTION> Roma </OPTION>

<OPTION SELECTED> Milano </OPTION>

<OPTION> Bologna </OPTION>

</SELECT>

</FORM>

In questo caso le opzioni vengono proposte sotto forma di un menu:

L’opzione di default (in questo caso “Milano”) è indicata aggiungendo la keyword SELECTED nel tag <OPTION>.

(19)

L’ultimo tag per form che vedremo è <TEXTAREA> … </TEXTAREA>, che consente di inserire porzioni di testo di dimensione consistente.

Dicci cosa pensi!<br>

<TEXTAREA name="commento" rows=3 cols=30>

Inserisci un commento ...

</TEXTAREA>

</FORM>

Il testo contenuto fra <TEXTAREA> e </TEXTAREA> costituisce il contenuto di default dell’area di immissione testo, “rows” e “cols” sono il numero di righe e colonne della porzione di textarea visualizzata dal browser:

Frame

Ultimo argomento relativo ad HTML che affrontiamo è la strutturazione di una pagina in frame. Il meccanismo dei frame consente di gestire in modo indipendente parti di una stessa finestra (del browser). In cascuna parte è visualizzata una diversa pagina. Spesso le parti della pagina assumono un ruolo, così è possibile identificare un’area logo, un indice, un frame di visualizzazione delle informazioni, ecc. Supponiamo di voler genericamente strutturare la finestra in N frame. Allora sarà necessario scrivere almeno N+1 pagine HTML: di queste, N saranno visualizzate ciascuna in un frame, l’ultima definisce il modo in cui la pagina è strutturata in frame utilizzando il tag

<FRAMESET> … </FRAMESET> (chiameremo questa pagina pagina principale). La pagina principale avrà genericamente questo aspetto:

…

<FRAMESET …>

<FRAME …>

…

(20)

</FRAMESET>

…

Si osservi che <FRAMESET> è alternativo a <BODY>. Oggigiorno tutti i browser sono in grado di visualizzare e gestire frame tuttavia, qualora si pensi che un certo sito sarà visitato utilizzando browser di vecchia concezione, occorre prevedere una soluzione per ambo i casi all’interno della pagina principale:

…

…

</FRAMESET>

<NOFRAMES>

…

</NOFRAMES>

…

<NOFRAMES> parentesizza una porzione di codice HTML alternativo. Tale porzione di codice viene utilizzata solo nel caso in cui il browser non sia in grado di interpretare <FRAMESET>.

Vediamo un esempio:

<html>

</frameset>

</html>

Questo è il contenuto del file che definisce il frameset. Al di là della definizione del bordo e del suo colore, i punti più importanti da osservare sono il modificatore “rows” e i tag <FRAME>. Il frameset definito sopra suddivide la finestra in due porzioni: alla prima riserva 80 unità (pixel o dimensione percentuale), alla seconda tutto lo spazio restante (simbolo *). Il fatto che sia indicato

“rows” (anziché il simmetrico “cols”) fa sì che il taglio della finestra sia orizzontale anziché verticale. Inoltre in questo caso la pagina è divisa in due parti. Avremmo però potuto dividerla in tre o più parti orizzontali indicando un numero maggiore di valori in “rows”(es. rows=80,80,*). Fra

<FRAMESET> e </FRAMESET> sono definite le caratteristiche dei frame ovvero delle porzioni indipendenti di finestra che si intende utilizzare. Ogni occorrenza del tag <FRAME> definisce un frame. Questo tag ha diversi possibili modificatori; i più importanti sono src (source), il cui valore è l’URL del documento HTML che il frame conterrà inizialmente, e name, un identificatore.

Per fissare le idee, supponiamo che il frame “top” contenga un indice (indice.html: una pagina contenente un certo numero di link ad altri documenti) mentre inizialmente “bottom” è vuoto.

Vorremmo che, ogni volta che un utente clicca su di un link contenuto in “top”, il corrispondente documento HTML venga visualizzato in “bottom”. Quest’azione è possibile perché quando si definisce un link utilizzando il tag <A> è possibile indicare anche il target ovvero la finestra (oppure, possiamo dire ora, il frame) in cui visualizzare la pagina. Quindi ogni link della pagina indice.html sarà definito in questo modo:

(21)

<A target=”bottom” href=”http://qualche.cosa”> testo del link </A>

Gli altri modificatori di <FRAMESET> e <FRAME> (che non vedremo) controllano aspetti stilistici della presentazione.