www.tesseract.it
Io, Informatico
Un Viaggio consapevole tra Informatica e Computer
Capitolo 12
Ipermedia e HTML
Carlo A. Mazzone
Tutti i diritti sono riservati. Nessuna parte di questa pubblicazione può essere riprodotta,
memorizzata in sistemi di archivio, o trasmessa in qualsiasi forma o mezzo, elettronico, meccanico,
fotocopia, registrazione o altri senza la preventiva autorizzazione dell'autore.
1 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Capitolo 12 – Ipermedia e HTML
Capitolo 12 – Ipermedia e HTML
Internet e, più specificatamente, il web hanno assunto in questi ultimi anni una rilevanza davvero
eccezionale. Ciò è vero non solo in relazione agli aspetti informatici ma anche e soprattutto rispetto
ai mezzi di comunicazione e più in generale alla società nel suo complesso.
E' ovvio, che in questo contesto ciò che più ci interessa, non essendo il sottoscritto un sociologo,
sono sicuramente gli aspetti informatici della questione. Voglio qui comunque sottolineare un
elemento di carattere generale a mio avviso di grande importanza. E' pur vero che l'informatica è
senza dubbio teoria, logica e matematica ma, d'altro canto, essa deve servire al progresso della
civiltà umana. E' bene quindi, ogni volta che ci si accinge a progettare un sistema informatico,
verificare quali siano gli impatti concernenti la vita reale e tutti i possibili coinvolgimenti ad essa
collegati.
Ok, vediamo di passare al sodo della questione. Prima di addentrarci negli inevitabili dettagli
pratici, è bene, rispettando la filosofia di “Io, Informatico”, capire come “attaccare” questi concetti
al resto del sistema.
Ciò che in definitiva si vuole ottenere è la creazione di pagine per il web. Per pagina si intende un
certo documento che può essere usufruito tramite internet.
Più in generale, una pagina web può essere vista come un elemento di una vera e propria
applicazione informatica (un programma per computer). Un sito web, infatti, ospita normalmente
diverse pagine tra di esse collegate. L'insieme di queste pagine può essere visto come un vero e
proprio programma. Ciò è tanto più vero quando le pagine sono “dinamiche”, cioè quando il loro
contenuto dipende dalle scelte effettuate dall'utente. Un esempio, semplice e chiarificatore, può
essere un motore di ricerca: le pagine web restituite dal motore di ricerca avranno un contenuto
diverso in base alle parole da noi inserite.
Multimedia, ipermedia ed ipertesti
Le applicazioni informatiche alle quali siamo interessati in questo contesto hanno la particolarità di
utilizzare oltre al classico e semplice testo anche altri elementi come immagini, suoni e video.
Queste applicazioni utilizzano quindi differenti mezzi espressivi per presentare un certo contenuto
informativo. Tali mezzi, che come vi ho appena detto sono il testo, le immagini, i video, ecc.,
prendono il nome di media1. Un'applicazione che ne utilizzo più di uno viene definita applicazione
multimediale.
Multimedialità statica e dinamica
Un contesto multimediale, più in generale definito con il termine di multimedialità, può essere
classificato in base al modo in cui è possibile interagire con esso. Più precisamente si effettua una
distinzione tra le applicazione multimediali a seconda della possibilità o meno, da parte dell'utente,
di scegliere un determinato percorso di lettura e visualizzazione dei contenuti; nel primo caso si
parla di multimedialità statica e nel secondo di multimedialità dinamica.
1
Media è il plurale del termine latino medium che significa appunto mezzo.
2 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Multimedia, ipermedia ed ipertesti
Cercando di essere più schematico vi presento di seguito, in maniera più dettagliata, le due
situazioni:
multimedialità statica (o passiva): l'utente dell'applicazione deve limitarsi a leggere e
visualizzare i contenuti così come progettato dall'autore. L'utente non può decidere, ad
esempio, se visualizzare prima un certo contenuto piuttosto che un altro. Le pagine o
videate vengono presentate una dopo l'altra, normalmente con tempi predefiniti, e come
detto stabiliti dal creatore dell'applicazione.
multimedialità dinamica (o interattiva): l'utente può scegliere di propria iniziativa un
percorso di consultazione dei contenuti dall'applicazione. Agendo con il mouse, la tastiera o
monitor sensibili al tatto (touch screen) egli può visualizzare e consultare sezioni specifiche
dell'applicazione, ovviamente, sempre all'interno dei collegamenti realizzati dall'autore
dell'applicazione stessa.
Ipermedia: colleghiamo i contenuti di un'applicazione multimediale
Con il termine ipermedia si vuole indicare un'applicazione multimediale interattiva. Ipermedia è
quindi un'applicazione, costituita da più media, nella quale vi sono dei contenuti tra di essi in vario
modo collegati e che l'utente può consultare a proprio piacimento. I collegamenti presenti tra i
differenti contenuti vengono definiti in gergo informatico link.
Per immaginarsi un esempio di applicazione ipermediale si può pensare ad un'enciclopedia
informatica, di quelle distribuite su dvd oppure su uno o più cd-rom. In tali applicazioni sono
presenti testi, immagini ed altri contenuti; la cosa notevole consiste nella possibilità di “saltare” da
un contenuto ad un altro cliccando su di una voce (link) per consultare direttamente ciò che più ci
interessa in un dato momento.
Ipertesti
Con il termine ipertesto si intende un'applicazione ipermediale che utilizza un unico mezzo
comunicativo: appunto il testo.
Fu Vannevar Bush, nel 1945, a proporre per primo una struttura di testo non lineare che doveva
corrispondere alla natura associativa della mente umana. Questo lavoro influenzò Ted Nelson che
battezzò tale testo “ipertesto” (Hypertext).
Il termine stesso, ipertesto1, vuole indicare la natura e la capacità di tale tipo di testo di andare oltre
rispetto al testo tradizionale. In quest'ultimo, infatti, la fruizione avviene in maniera sequenziale,
procedendo, almeno in un primo momento, la possibilità di comprendere il senso globale dei
contenuti e non dando la possibilità di accedere in maniera diretta a specifici dettagli e contenuti in
genere.
La parola ipertesto è data dalla composizione delle parole greche yper e textus. Yper significa "sopra, oltre": usata
come prefisso, indica un grado superlativo di ciò che è specificato nel secondo termine del nome composto.
1
3 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Multimedia, ipermedia ed ipertesti
Organizzazione di un ipertesto
Realizzare un buon ipertesto è una questione di tecnica e di esperienza.1
L'approccio più comune, ed anche il più errato, è quello di iniziare a scrivere i contenuti delle
pagine man mano che vengono in mente i dettagli di ciò che vogliamo presentare ai nostri ipotetici
futuri lettori.
E' un impulso irrefrenabile: appena è in possesso di un minimo di indicazioni su come produrre una
pagina per il web il nostro neo-autore si tuffa a capofitto nella produzione. Questi inizia a riempire
la sua pagina con tutto ciò che gli viene in mente sull'argomento che vuole proporre quasi si
trattasse di una gara a tempo. Il risultato, dopo un certo numero di ore di lavoro, è un minestrone
difficilmente digeribile. L'aspetto, spesso disgustoso, ne suggerisce la sorte più idonea: webspazzatura. Fateci caso: internet è piena di spazzatura non raccolta. Un enorme numero di pagine e
relativi siti i cui contatori delle visite, prossimi allo zero, mostrano senza alcuna pietà come quelle
creature siano state totalmente abbandonate. Ambienti desolati e desolanti dove nemmeno gli autori
passano più. Ci si imbatte per caso utilizzano i motori di ricerca; una rapida occhiata per capire che
lì non si troverà niente di interessante e si naviga via oltre. Nel mio caso specifico tali ambienti,
ormai “morti” mi lasciano addosso una spiacevole sensazione di vecchio, di solitudine e di
abbandono. Una sensazione di incompiuto, promesse fatte e non mantenute. In una sola parola:
fallimento.
Voglio essere chiaro: non esiste una ricetta assoluta per il successo di un sito. Ma in definitiva anche
il termine “successo” potrebbe essere fuorviante. Si può realizzare un buon lavoro anche senza
ottenere risultati di visibilità eccezionali: il lavoro sarà comunque valido.
Dovremmo, infatti, distinguere tra bontà dei contenuti del sito e, d'altro canto, bontà
dell'organizzazione dei contenuti stessi.
Relativamente al primo caso mi permetto un suggerimento: specializzare il proprio lavoro. Con
questo intendo dire che quanto più settoriale e specialistico sarà il nostro sito tanto più avrà
possibilità di successo. Internet è stracolmo di contenuti. C'è di tutto. Essere troppo generalisti pone
al rischio di essere poco accattivanti ed al contempo di disperdere le energie per gestire i troppi e
differenti contenuti.
Relativamente al secondo punto, “bontà dell'organizzazione dei contenuti”, il tutto si potrebbe
concentrare in tre parole: progettazione, progettazione ed, ancora, progettazione. Credo di aver reso
l'idea. La progettazione attenta e preventiva del nostro lavoro sarà un ottimo viatico per ottenere un
buon lavoro.
La prima fase della progettazione dovrebbe prevedere un brain storming. Il brain storming è una
metotologia di ricerca, usata soprattutto in campo pubblicitario per stimolare la produzione di idee
creative, basata sulla libera esposizione di impressioni, idee ed intuizioni da parte dei partecipanti.
Essa consiste in intense sessioni di dibattito volte a stimolare proposte e a identificare la soluzione
migliore.
Le regole generali di una seduta di brain storming sono:
•
•
•
1
definire e concordare gli obiettivi da raggiungere;
escludere ogni giudizio critico;
accettare ogni forma di proposta;
Vedi “Designing and Writing Online Documentation” di William Horton.
4 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Multimedia, ipermedia ed ipertesti
•
•
•
produrre un gran numero di idee;
sintesi delle idee espresse;
scelta finale
Da questa fase bisognerebbe uscire con delle idee ben chiare relative agli obiettivi che il nostro
lavoro si propone di raggiungere ed in particolare quali sono i destinatari, i fruitori, principali ai
quali è indirizzato il tutto.
A questo punto risulta necessario organizzare i contenuti.
Esistono dei modi ormai standardizzati per organizzare tali contenuti in un ipertesto. Di seguito vi
mostro i più classici.
Gerarchie
HOME
Ogni rettangolo rappresenta uno specifico argomento. Per home si intende il punto di ingresso
dell'ipertesto. Le frecce rappresentano i collegamenti tra gli argomenti.
Liste lineari
HOME
Liste lineari con alternative
5 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Multimedia, ipermedia ed ipertesti
E' possibile, quando richiesto dall'applicazione, superare la rigidità della lista lineare inserendo dei
percorsi alternativi.
HOME
Reti
Le reti si prestano bene nel sistemi in cui gli argomenti sono abbastanza disomogenei.
HOME
6 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Un po' artisti ed un po' registi: lo storyboarding
Un po' artisti ed un po' registi: lo storyboarding
Una volta organizzati i contenuti è necessario dettagliare il funzionamento dell'ipertesto. A tale
scopo si utilizza di norma uno schema conosciuto come storyboard.
Per storyboard si intende una descrizione dettagliata dell'ipertesto con riferimenti alle singole
pagine, ai collegamenti tra tali pagine ed altre informazioni vitali per l'applicazione.
Il concetto di storyboarding nasce in campo cinematografico; in buona sostanza si tratta di avere
un'idea precisa delle sequenze da girare, delle singole inquadrature, dei dialoghi e così via, prima di
girare le singole scene e di assemblarle successivamente per dare vita alla pellicola finale.
Lo storyboard di un sito web deve esplodere e dettagliare la struttura scelta per costruire l'ipertesto
(gerarchia, lista o rete che sia).
Per siti molto semplici si potrebbe pensare che l'uso di uno storyboard risulti superfluo. In realtà, se
per progetti di medie e grandi dimensioni esso è assolutamente indispensabile, nel caso di piccole
applicazioni web può rappresentare in ogni caso un ottimo modo per evitare di procedere in modo
confuso e disorganizzato nel proprio lavoro.
Non esiste, d'altra parte, un modo univoco per creare uno storyboard. Esso può addirittura essere
rappresentato tramite semplici fogli di carta sui quali appuntare le caratteristiche salienti delle
pagine dell'applicazione.
In ogni caso a partire dal grafico della struttura scelta (ad esempio una gerarchia) bisognerebbe
indicare il nome di ogni cartella e dei file coinvolti:
www.tesseract.it
/index.html
/azienda/chiSiamo.html
/azienda/contatti.html
/servizi/index.html
/servizi/web.html
/servizi/software.html
/links/index.html
/downloads/index.html
/images
Per ogni singolo file elencare gli elementi in esso presenti (immagini e loro posizione), posizione
degli elementi testuali ed i link di collegamento con le altre pagine presenti. Ciò può essere
realizzato sia a mano libera su fogli di carta sia utilizzando appositi software.
Per progetti più complessi ed importanti si potrebbe anche pensare di utilizzare appositi modelli per
definire i contenuti di ogni singola pagina.
Tali modelli potrebbe essere sia esclusivamente testuali che contenenti schizzi grafici del contenuto:
Nome progetto:____________________
Nome pagina: _____________________
URL:
_____________________
Contenuto:
_____________________
_____________________
Link:
_____________________
Azioni:
_____________________
Risorse:
_____________________
Note:
_____________________
Schizzo grafico del contenuto della pagina
7 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Dal contenuto alla sua rappresentazione
Dal contenuto alla sua rappresentazione
Uno degli aspetti cardine del trattamento dell'informazione è dato dalla dicotomia tra contenuto
dell'informazione e sua rappresentazione. Una qualsiasi realtà codificata dalla macchina ha un suo
contenuto informativo che in generale è indipendente da come questo venga poi mostrato
all'esterno.
Un esempio dovrebbe chiarire ciò che intendo dire. Consideriamo la classica frase “Salve mondo”.
Indipendentemente dal supporto attraverso il quale possiamo memorizzare tale frase all'interno di un
certo dispositivo essa sarà sempre la stessa. Se utilizziamo il classico editor di testi Microsoft Word
per scrivere tale frase essa sarà memorizzata in formato su disco con una codifica come la seguente.
La codifica della parole "Salve mondo" in formato Word
Per verificarlo è sufficiente aprire il file con il Blocco Note, o con qualsiasi altro editor di testo
puro.
Salvando il file in formato rft avremo il seguente risultato su disco.
8 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Dal contenuto alla sua rappresentazione
Il contenuto informativo sarà sempre lo stesso; ciò che cambia è il modo di codificare tale
contenuto.
9 - Io, Informatico – Carlo A. Mazzone – versione 20091018
HTML
HTML
Chiunque voglia affacciarsi al mondo del web come autore di contenuti, e non quindi come
semplice utilizzatore, dovrà inevitabilmente confrontarsi con HTML. Ciò è valido oggi e continuerà
ad esserlo per diversi anni a venire.
HTML è ancora una volta un acronimo: HyperText Markup Language ovvero linguaggio di
contrassegno per ipertesti. In realtà, onde evitare equivoci, vi voglio premettere che esso non è un
vero e proprio linguaggio di programmazione come lo sono al contrario, tanto per portare qualche
esempio, C, Pascal, Java ed anche ASP, JavaScript e PHP che analizzeremo in seguito.
HTML non ha, infatti, caratteristiche di programmazione che gli consentano di effettuare scelte in
base ad un certo contesto così come non può effettuare manipolazioni di dati e quant'altro consentito
ad un qualsiasi linguaggio artificiale. HTML non è nato per questo.
Il suo scopo principale è quello di mostrare il contenuto di una pagina e non il suo aspetto.
La prima versione di HTML è opera di Tim Berners-Lee. Questi ha anche coniato il nome World
Wide Web ed ha prodotto il primo server ed il primo client per il web (siamo nel 1990).
Le sue specifiche iniziali sono state in seguito discusse e perfezionate da una vasta comunità di
utenti e programmatori.
L'organizzazione che si occupa della standardizzazione del linguaggio HTML è nota come W3C
(World Wide Web Consortium). Sono state rilasciate diverse versioni di questo linguaggio.
L'ultima, risalente al dicembre 1999, è la 4.01.
Successivamente l'HTML si è evoluto in XHTML (un HTML riformulato con l'ausilio del
linguaggio XML).
Come dicevo, lo scopo, almeno inizialmente, era quello di visualizzare un certo contenuto
indipendentemente dal sistema utilizzato. Con il passare del tempo crescevano le richieste degli
utenti per sempre nuovi elementi di formattazione1. I due principali browser web (visualizzatori di
pagine HTML) Microsoft Internet Explorer e Netscape Nagivator presenti agli albori del web
introducevano ad ogni versione nuove funzionalità di formattazione, spesso purtroppo non
compatibili per entrambi i software.
E' a questa situazione che ci si riferisce quando si parla dell'ormai “epica” guerra dei browser.
Tale guerra, vinta allora dal browser di casa Microsoft, ha lasciato sul campo una vittima illustre: il
contenuto stesso delle pagine. Voglio dire che la sintassi richiesta per arricchire le pagine di nuove
funzionalità ha finito per confondere, spesso anche per un uso improprio del linguaggio, le
caratteristiche di presentazione dei contenuti con i contenuti stessi rendendo le pagine pesanti e
difficilmente modificabili.
Per superare tali problematiche sono nati nuovi standard: dai fogli di stile all'XML. Ma andiamo per
gradi: per ora occupiamoci di HTML.
Per formattazione di una pagina si intende lo stile della pagina stessa: applicazione di un certo tipo di carattere,
allineamento del testo e così via.
1
10 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Salutiamo il mondo in HTML
Salutiamo il mondo in HTML
<html>
<head>
<title>Questo e' il titolo della pagina</title>
</head>
<body>
<!--Questo è un commento-->
Salve <b>mondo</b>
</body>
</html>
La prima cosa che salta all'occhio nel pezzo di codice che vi ho proposto è che HTML è basato su
testo puro. Esso non viene compilato in codice eseguibile, cioè codice direttamente eseguito dal
microprocessore del PC, ma viene interpretato “al volo” dal browser che visualizza i contenuti
descritti dal codice stesso.
Una seconda caratteristica che colpisce chi legge per la prima volta il codice HTML è la presenza,
inframmezzata al testo stesso di alcuni caratteri particolari: le parentesi angolari “<” e “>”.
Tali parentesi racchiudono delle parole che non riguardano direttamente il contenuto che si vuole
rappresentare: <html>, <body>, <title> sono esempi di ciò a cui mi sto riferendo.
Tali oggetti in effetti sono utilizzati allo scopo di definire il comportamento dei contenuti stessi, una
volta che questi dovranno essere visualizzati. Un oggetto del tipo: <nome> viene detto marcatore,
markup o anche Tag.
Come spesso si sente dire: “Niente è per sempre” e ciò vale anche per i contenuti: una pagina web
ha un suo inizio ed una sua fine, così un titolo, un testo in grassetto e così via. Un marcatore
definisce un certo comportamento dei contenuti dal momento in cui lo si incontra nel codice nella
forma <nome> e fa terminare il suo effetto nel momento che lo si incontra nella forma </nome> cioè
con il simbolo “/” (in gergo slash) anteposto, all'interno delle parentesi angolari prima del nome del
tag.
Nell'esempio il frammento di codice:
Salve <b>mondo</b>
mostra come il marcatore <b> (simbolo per il grassetto) modifichi il comportamento della parola
“mondo”.
Il tag <nome> viene detto tag di apertura mentre </nome> viene detto tag di chiusura.
In pratica: Proviamo l'esempio
Per poter provare l'esempio dobbiamo utilizzare un “ambiente di sviluppo” per scrivere il nostro
codice HTML. Almeno all'inizio, si può usare un semplice editor di testo come ad esempio il
Blocco note di Windows. Attenzione: non è possibile usare altri editor più evoluti come Word
oppure Microsoft Word oppure WordPad in quanto questi, in generale, salvano i file NON in
formato testo semplice come richiesto dall'HTML ma aggiungono ai contenuti, come visto all'inizio
del capitolo, tutta una serie di codici proprietari che altererebbero il sorgente della nostra pagina.
11 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Salutiamo il mondo in HTML
Una volta scritto il codice HTML è possibile salvare il file dando un'estensione del tipo .htm oppure
.html. Con tale estensione il Sistema Operativo capirà che il file deve essere aperto da un browser.
Un doppio clic sul nome del file farà il resto.
Tag ed attributi
In generale, un tag da solo non riesce ad esprimere compiutamente una specifica direttiva.
Supponiamo ad esempio di voler realizzare un paragrafo (si utilizza il tag <p>):
<p>Io sono un paragrafo</p>
Come risulta ovvio, deve essere possibile indicare anche ulteriori caratteristiche relative al
paragrafo, come, ad esempio, l'allineamento (a destra, a sinistra, centrato, ...)
In tali occasioni, il tag viene affiancato da un ulteriore “specificatore” detto attributo:
<p align="center">Io sono un paragrafo</p>
Nell'esempio appena riportato vi ho proposto l'attributo align con valore “center” (il valore viene
associato all'attributo con il segno di uguale e racchiuso tra doppi apici).
Nel caso specifico dell'esempio, l'attributo “center” indicato al browser di centrare il paragrafo
all'interno della pagina.
Organizzazione della pagina: sezione head e sezione body
Come potete osservare dal codice dell'esempio, la pagina è organizzata in due sezioni principali:
head
body
La prima, head, detta anche intestazione, definisce alcune caratteristiche generali della pagina,
mentre la seconda, body, o corpo della pagina, serve a racchiudere il vero e proprio contenuto del
documento.
12 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Organizzazione della pagina: sezione head e sezione body
La sezione head
Come detto, tale sezione include una serie di informazioni relative all'intero documento.
Il primo tag da inserire in questa sezione è ovviamente quello relativo al titolo:
<title>Io, Informatico </title>
Di estremo interesse relativamente ai motori di ricerca è il tag meta, che con gli attributi name
(con valore "keywords" e "description") e content aiuta la classificazione del nostro sito sul
web:
Più precisamente, il valore “keywords” serve per creare un elenco di parole chiave che il motore di
ricerca potrà utilizzare indicizzare la pagina:
<meta name="keywords" content="informatica, strutture dati, linguaggi di programmazione">
Il valore "description" potrà essere utilizzato dal motore di ricerca per rendere più indicativa la
catalogazione della pagina:
<meta name="description" content="Un viaggio consapevole tra informatica e computer">
Un altro classico valore utilizzabile per l'attributo name del tag meta è “generator” il quale indica lo
strumento utilizzato per la creazione della pagina:
<meta name="GENERATOR" content="Crimson Editor">
Un ulteriore attributo del tag meta è http-equiv. Nel seguente esempio, esso serve ad indicare la
tipologia di contenuto ed il tipo di caratteri utilizzato:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Qui di seguito, invece, è mostrato come esso possa servire per impostare un aggiornamento forzato
della pagina ogni 300 secondi, caricando allo scadere dei quali la pagina index.html.
<meta http-equiv="Refresh" content="300;URL=/index.html"/>
E' forse da ribadire che tali informazioni, tranne che per il titolo della pagina, non sono visibili
all'utente all'interno del browser.
Voglio inoltre precisarvi che è ben oltre gli scopi del testo che state leggendo essere esaustivo
sull'argomento HTML e Web. Al contrario, il mio intento è quello di presentare gli argomenti
fondanti tale linguaggio cercando di creare una base sufficientemente solida dalla quale partire per
ulteriori approfondimenti.
Nota sulla gestione dei colori
In diverse circostanze è possibile utilizzare l'attributo “color” per indicare uno specifico colore.
Il valore del colore può essere espresso si attraverso un numero esadecimale (preceduto dal simbolo
# e detto codice RGB) oppure tramite uno dei seguenti sedici nomi di colori:
13 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Organizzazione della pagina: sezione head e sezione body
Nomi dei Colori e valori RGB
Black = "#000000"
Green = "#008000"
Silver = "#C0C0C0"
Lime = "#00FF00"
Gray = "#808080"
Olive = "#808000"
White = "#FFFFFF"
Yellow = "#FFFF00"
Maroon = "#800000"
Navy = "#000080"
Red = "#FF0000"
Blue = "#0000FF"
Purple = "#800080"
Teal = "#008080"
Fuchsia = "#FF00FF"
Aqua = "#00FFFF"
Così, il valore "#FFFF00" e “Yellow” si riferiscono entrambi al giallo.
Il codice RGB (Red, Green, Blue) prevede la composizione di un unico colore attraverso le tre
componenti fondamentali di rosso (Red), verde (Green) e blu (Blue) utilizzando un numero
esadecimale a due cifre (da 00 a FF). Tale metodo è noto con il termine “additivo” in quanto si
passa dall'assenza di colore (il nero) alla massima espressione del colore (bianco) aggiungendo man
mano gradazioni di colore.
Ogni colore in esadecimale è così espresso nella forma:
#RRGGBB
dove RR, GG, BB rappresentano rispettivamente le due cifre esadecimali per le componenti rosso,
verde e blu. Si ha così che il codice #000000 avendo tutte le componenti a zero indica il nero,
#FFFFFF con tutte le componenti al valore massimo FF rappresenta il bianco, #FF0000 con la sola
componente rossa al massimo rappresenta il rosso, e così via miscelando tra loro le varie
componenti. Con tale sistema è possibile creare oltre 16 milioni di differenti combinazioni di
colore.
Paragrafi: p, div, pre
Il testo è pur sempre il principe dei contenuti ed il paragrafo il modo più naturale per organizzarlo.
Per sezionare blocchi di testo come paragrafi si utilizza il tag <p>:
<p>Io sono un paragrafo</p>
L'attributo align ci viene incontro per formattare il nostro paragrafo:
<p align="center">Io sono un paragrafo centrato</p>
Align prevede i seguenti valori: left, center, right, justify.
In maniera analoga al tag <p> è possibile utilizzare il tag <div> che agisce su blocchi di testo senza
creare un vero e proprio paragrafo.
<div align="left">Io sono un blocco di testo allineato a sinistra</div>
Cerco di spiegarmi meglio: un paragrafo è caratterizzato dal fatto di essere separato da altri blocchi
di testo da una o più righe vuote. A differenze dal tag <p>, il tag <div> formatta il testo senza
14 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Organizzazione della pagina: sezione head e sezione body
separarlo con tale “spaziatore”. Tale caratteristica lo rende molto utile per posizionare in maniera
precisa intere sezioni della nostra pagina web.
Infine, a volte, può essere utile formattare il testo così come lo digitiamo all'interno del codice
HTML o perchè ne facciamo il copia e incolla da un altro testo già preformattato. In tali casi
possiamo ricorrere al tag <pre></pre>.
Lorem ipsum
Spesso in una pagina, quando siamo alle prese con la disposizione dei contenuti, abbiamo bisogno
di un insieme di testi di prova. E' stato dimostrato che inserire in una data pagina contenuti testuali
comprensibili distrae colui che li guarda; questi, infatti, viene incuriosito dai contenuti e perde di
vista il “contenitore”. Ciò che si vuole ottenere durante la fase di creazione di un dato stile di
pagina, al contrario, è di far concentrare l'osservatore sugli aspetti grafici ed organizzativi (colore
del testo, disposizione ed allineamento dei paragrafi, ecc. ) .
In tutti questi casi si utilizza il cosiddetto “Lorem ipsum”. Si tratta di un insieme di parole della
lingua latina utilizzate già a partire dal 1500 per prove di stampa. Più precisamente le parole sono
estrapolate da un testo di Cicerone del 45 a.c.
Di seguito vi riporto una parte del brano originale dell'opera in cui sono evidenziate, in grassetto, le
parole estrapolate.
«Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro
quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea
voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo
voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui
blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi
sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia
animi, id est laborum et dolorum fuga.... »
Considerando solo le parole in grassetto si ottiene quanto segue:
«Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.»
Il tutto è evidentemente incomprensibile anche per un latinista ; )
E' da sottolineare comunque il fatto che trattandosi di un testo pseudocasuale ne esistono diverse
versioni. In giro per la rete si trovano diversi servizi web (ed anche software) per generare il testo in
questione: giusto per segnalarne uno vi riporto il sito www.lipsum.com.
15 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Organizzazione della pagina: sezione head e sezione body
Per maggior chiarezza vi riporto l'esempio reale di una pagina che utilizza il Lorem ipsum per
mostrare la propria tipologia di impaginazione.
Esempio di utilizzo del Lorem ipsum
Titoli
Uno dei modi più semplici ed efficaci per organizzare i contenuti è quello di utilizzare dei titoli per
le varie sezioni. Per titoli si intende un testo scritto con un formato normalmente più grande del
testo normale. A tale scopo si utilizzano i tag “header” H1, H2, H3, H4, H5 ed H6.
H1 è il titolo maggiore in dimensioni, H6 il più piccolo:
<H1>Io sono il più grande</H1>
<H6>Io sono il più piccolo</H6>
16 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Organizzazione della pagina: sezione head e sezione body
Il testo
Grassetto, corsivo e sottolineato sono tra gli attributi del testo più comuni.
Per il grassetto il tag è <b> (iniziale di bold)
<b>Testo in grassetto</b>
Per il corsivo il tag è <i> (italic)
<i>Testo in corsivo</i>
Per il testo sottolineato il tag è <u> (underline)
<u>Testo sottolineato</u>
Per controllare la formattazione del testo ci viene in aiuto il tag <font>.
Per impostare la dimensione si utilizza l'attributo size (con valore da 1 a 7)
<font size="7">test</font>
L'attributo face consente, invece, di indicare il tipo di carattere:
<font face="Arial">riga di testo con font</font>
E' possibile indicare differenti tipi di caratteri, (separandoli con una virgola) per far si che se i primi
specificati non sono presenti sulla macchina dell'utente possono essere utilizzati gli altri specificati
come alternativa.
<font face="Arial, Helvetica, sans-serif">riga di testo con font</font>
Per indicare uno specifico colore del testo utilizziamo l'attributo color:
<font color="#FF0000">riga di testo di colore rosso</font>
Modificare le impostazioni della pagina
Per default una pagina html prevede il nero per il colore dei caratteri ed il bianco per lo sfondo.
Il colore di sfondo può essere modificato con l'attributo bgcolor:
<body bgcolor="blue">
o, analogamente:
<body bgcolor=”#0000FF”>
E' possibile personalizzare il testo, i link, i link visitati ed i link attivi (sul clic):
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000" alink="#FFFF00">
Per porre un' immagine sullo sfondo della pagina usiamo l'attributo background:
17 - Io, Informatico – Carlo A. Mazzone – versione 20091018
<body background="sfondo.gif">
Gli elenchi
Elenchi non ordinati (Unordered List)
I sette re di Roma
<ul>
<li>Romolo (753 AC - 716 AC)</li>
<li>Numa Pompilio (715 AC - 674 AC)</li>
<li>Tullo Ostilio (673 AC - 642 AC)</li>
<li>Anco Marzio (642 AC - 617 AC)</li>
<li>Tarquinio Prisco (616 AC - 579 AC)</li>
<li>Servio Tullio (578 AC - 535 AC)</li>
<li>Tarquinio il Superbo (535 AC - 510 AC)</li>
</ul>
E ' possibile definire uno stile diverso da quello di default per il pallino nero che identifica
l'elemento:
<ul type=”disc”> (pallino nero: default)
<ul type=”circle”> (pallino vuoto)
<ul type=”square”> (quadrato pieno)
Elenchi ordinati (Ordered List)
I sette re di Roma
<ol>
<li>Romolo (753 AC - 716 AC)</li>
<li>Numa Pompilio (715 AC - 674 AC)</li>
<li>Tullo Ostilio (673 AC - 642 AC)</li>
<li>Anco Marzio (642 AC - 617 AC)</li>
<li>Tarquinio Prisco (616 AC - 579 AC)</li>
<li>Servio Tullio (578 AC - 535 AC)</li>
<li>Tarquinio il Superbo (535 AC - 510 AC)</li>
</ol>
18 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Gli elenchi
Anche in questo caso è possibile modificare il comportamento di default che prevede una
visualizzazione progressiva con i numeri 1, 2, 3 e via dicendo. E' sufficiente usare l'attributo type
nel modo seguente:
<ol type=”1”>, <ol type=”a”>, <ol type=”A”>, <ol type=”i”>, <ol type=”I”>
per ottenere differenti tipi di elenchi (con numeri romani minuscoli, maiuscoli, ecc). Tuttavia, come
nel caso dell'attributo type per la lista non ordinata tale uso non è consigliato dal W3C (come si dice
in gergo è deprecato). Infatti, in generale si cerca di tenere separato il contenuto dalla sua
rappresentazione e si incoraggia a tal proposito l'uso dei CSS (trattati in seguito in questo stesso
capitolo).
Elenchi di definizioni
<DL>
<DT>termine 1
<DD>definizione 1
<DT>termine 2
<DD>definizione 2
<DT>termine 3
<DD>definizione 3
</DL>
19 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Le tabelle
Le tabelle
Man mano che si creano le proprie pagine ci si rende conto di come sia importante posizionare
specifici contenuti in specifiche posizioni all'interno della nostra pagina. I contenuti html sono però
per loro natura sfuggenti alle regole di posizionamento; per ovviare a questi problemi, spesso, il
modo migliore è quello di utilizzare apposite griglie formate da righe e colonne: le tabelle!
Di seguito vi presento il codice per una semplice tabella formata da tre righe (tag <tr>) e due
colonne (tag <td>):
<table width="30%" border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>
Il codice precedente darà come risultato la seguente tabella:
I tag <table> e </table> servono per definire la tabella, per la quale l'attributo width valorizzato al
30% definisce l'occupazione in larghezza espressa in percentuale della pagina mentre l'attributo
border ne definisce lo spessore.
L'utilizzo delle tabelle, come dicevo, risulta di estrema importanza per “bloccare” in specifiche
posizioni vari elementi. Un esempio che vede la coesistenza in un due sezioni ben distinte di un
blocco di testo e di un'immagine immagine è il seguente:
20 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Navighiamo tra le pagine: link, percorsi e URL
Navighiamo tra le pagine: link, percorsi e URL
I collegamenti (link) tra pagine html rappresentano la vera essenza del web; sono, infatti, i
collegamenti che rendono i contenuti “ipertestuali” superando in tal modo la sequenzialità del testo
normale.
Il tag da utilizzarsi è <a> con l'attributo href per specificare la risorsa di destinazione del
collegamento:
<p>Clicca <a href="paginaDestinazione.html">qui</a></p>
Nel caso più semplice il valore dell'attributo href (in questo caso paginaDestinazione.html) è il
nome del file html che vogliamo “linkare” (espressione gergale che significa collegare).
Affinché il collegamento dell'esempio funzioni è indispensabile che entrambi i file relativi alle due
pagine da collegare si trovino nella stessa cartella. In caso contrario, cioè quando i due file si
trovano in cartelle differenti è indispensabile indicare con precisione il percorso in cui si trova il
file destinazione. Tale percorso può essere di due diverse tipologie: assoluto oppure relativo.
Per comprendere appieno tale concetto (di assoluta importanza nello sviluppo delle pagine web) mi
corre l'obbligo di aprire una piccola parentesi.
Parlando di storyboad ho fatto vedere come i vari contenuti vadano organizzati in differenti pagine
(file) e come queste ultime, quando cominciano a crescere di numero, vadano organizzate in varie
sottocartelle. La cartella principale, quella dalla quale discendono le varie altre cartelle e nella quale
è presente il file che rappresenta la home page del sito, prende in genere il nome di cartella radice (o
root directory) del sito.
Sviluppo in locale – pubblicazione in remoto
La prassi (dettata dal buon senso) prevede che le pagine vengano sviluppate in locale (si usa dire
anche “localmente”) intendendo dire che esse vengono create e modificate sul proprio PC. Quando
la struttura del sito comincia ad essere sufficientemente completa si può pensare di pubblicare il sito
in remoto. Ciò significa salvare la propria struttura di file e cartelle sul server che ospiterà il nostro
sito e che sarà raggiungile dai vari nostri futuri (si spera molti ;) visitatori.
Mentre in locale, per aprire una pagina html è sufficiente fare un bel doppio clic sul file
corrispondente (oppure usare la voce di menu del browser web “File->Apri” o qualcosa del genere)
la situazione cambia quando vogliamo riferirci ad una specifica pagina presente sul web server. In
questo caso, infatti, dobbiamo riferirci al percorso preciso in cui risiede la pagina. Se facciamo
riferimento alla pagina attraverso un percorso assoluto dobbiamo indicare il cammino che dobbiamo
fare a partire dalla radice del web server fino ad arrivare al file in questione. La radice del web
server è la cartella principale messaci a disposizione sul web server dove andremo a copiare l'intera
struttura del nostro sito. Per indicare un percorso assoluto ad un file iniziamo a scrivere il percorso
utilizzando il simbolo “/” (detto slash ) seguito dal solo nome del file se il file stesso si trova nella
cartella radice del sito. Ad esempio:
/index.html
Già che ci sono faccio notare come tale nome (index.html) dovrebbe essere, per convenzione, il
nome predefinito da dare al file della home page del sito stesso.
Nel caso in cui il file si trovi in una certa sottocartella, per scriverne il percorso assoluto completo
partiremo dalla radice (simbolo “/”) e scriveremo le varie sottocartelle che dovremo attraversare per
21 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Navighiamo tra le pagine: link, percorsi e URL
raggiungere il file in questione. Lo stesso simbolo “/” lo utilizzeremo come separatore tra i nomi
delle cartelle del percorso. Ad esempio:
/documenti/pubblici/chiSiamo.html
rappresenta l'indirizzo assoluto del file “chiSiamo.html”presente nella cartella “pubblici”,
sottocartella della cartella “documenti” a sua volta sottocartella della radice del nostro progetto web.
Il tutto, mi auguro, dovrebbe risultare meno difficile di quanto non appaia a prima vista.
Passiamo ora ad esaminare gli indirizzi relativi. L'aggettivo “relativo” si riferisce al fatto che il
riferimento viene realizzato a partire da un certo file relativamente ad una data cartella. Tale
cartella viene normalmente detta cartella “corrente”. E' intuitivo che essa è “corrente” per il file a
cui ci stiamo riferendo e dal quale faremo partire il link verso un altro file. La cartella corrente vine
di norma indicata con il simbolo “.” (punto). Dovendoci, ad esempio, riferire ad un file presente
nella stessa cartella corrente indicheremo il percorso relativo come segue:
./paginaDestinazione.html
In generale, il simbolo punto viene considerato presente di default (in maniera predefinita) se il
percorso non inizia con il simbolo “/” (quindi non è un percorso assoluto). Possiamo quindi
scrivere, più semplicemente il solo nome di file:
paginaDestinazione.html
Questo è il motivo per cui, nell'esempio dal tag <a> abbiamo potuto scrivere direttamente qualcosa
del tipo:
<p>Clicca <a href="paginaDestinazione.html">qui</a></p>
Sempre a proposito di indirizzi relativi, viene utilizzato un'altra simbologia per indicare la cartella
genitrice, il simbolo “..” (leggiamo punto punto).
Facciamo allora un esempio:
../../contattaci.html
Il precedente percorso si riferisce ad una pagina di partenza del link presente due cartelle al di sotto
della cartella in cui è presente il file destinazione “contattaci.html”.
URL (Uniform Resource Locator )
In generale, un link html non è detto che debba puntare per forza ad una pagina html. La
destinazione del link potrebbe, infatti, essere qualcosa di più generico: un file immagine, un
documento PDF o word o addirittura un indirizzo di posta elettronica. In definitiva una data risorsa
resa disponibile su internet (da noi o da qualcun altro). Esiste, neanche a dirlo, un termine specifico
per tali risorse generiche: URL ovvero Uniform Resource Locator. Un URL non è quindi altro che
l'indirizzo di una risorsa su Internet utilizzabile come valore dell'attributo href all'interno del tag
<a>. Di seguito vi riporto un esempio valido per inserire un collegamento di posta elettronica:
<p>Scrivimi <a href="mailto:[email protected]">qui</a>
Già che ci siamo cerchiamo di essere un po' più formali nella definizione della struttura di un URL.
22 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Navighiamo tra le pagine: link, percorsi e URL
Link all'interno di una pagina
Di solito i link collegano pagine diverse (si parla di link esterni). E' tuttavia possibile far si che un
link si colleghi ad un punto specifico di una data pagina. In definitiva, sia il link che la destinazione
del link si trovano all'interno della stessa pagina. Si parla, in questo caso, di link interni. Tale
organizzazione può risultare abbastanza utile quando un dato argomento è piuttosto corposo
(lungo ;) e non si vuole comunque suddividerlo in più pagine differenti.
Per implementare questa funzionalità è innanzitutto necessario porre un' etichetta per la
destinazione del link nel punto desiderato.
Un primo metodo prevede l'utilizzo di un elemento chiamato “anchor” (àncora) realizzato
utilizzando l'attributo NAME:
<h2><a name="section1">Sezione 1: Introduzione</a></h2>
Un nuovo metodo per porre un' etichetta per la destinazione del link utilizza invece l'attributo ID,
ad esempio:
<h2 id="section1">Sezione 1: Introduzione</h2>
Come seconda operazione è necessario creare il link vero e proprio verso l'etichetta
precedentemente realizzata.
<a href="#section1">vai alla Sezione 1</a>
Come si vede nell'esempio per puntare all'etichetta “section1” se ne indica il nome facendolo
precedere dal carattere "#". Sottolineo ancora che il nome dell'etichetta è il valore del tag NAME o
dell'attributo ID.
E' possibile creare dei collegamenti a punti specifici di un documento anche a partire da un'altra
pagina. Per far ciò la procedura da realizzarsi è sostanzialmente la stessa. L'unica differenza
riguarda la creazione del link attraverso l'attributo href del tag <a> che deve includere nekl suo
valore anche il nome del file della pagina destinazione(seguito come nel caso di link interno dal
carattere '#' e dal nome della sezione).
Ad esempio:
<a href="pagina.html#section1">vai alla Sezione 1</a>
Inserimento di immagini
Le immagini sono un elemento fondamentale del web e trasformano immediatamente un ipertesto in
un ipermedia. Il tag da utilizzarsi è <img> con l'attributo src (source) che indica il file immagine da
caricare:
<img src="pippo.jpg" width="84" height="48">
23 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Inserimento di immagini
Gli attributi width ed height specificano rispettivamente la larghezza e l'altezza a cui si vuole
impostare l'immagine.
E' sufficiente indicare il solo nome del file nel caso in cui esso risieda nella stessa cartella della
pagina html che lo referenzia; in caso contrario è necessario indicarne il percorso completo
(percorso relativo) come nel seguente esempio:
<img src="../images/pippo.jpg" width="84" height="48">
Inserire file multimediali
Per inserire all'interno di una pagina un file multimediale (sonoro o video) è necessario utilizzare un
opportuno tag, <object>:
Vediamo un primo esempio di utilizzo per un file audio:
<object data="filediesempio.wav" type="audio/wav" autostart="true">
<embed src="filediesempio.wav" autostart="true">
</object>
Il tag <embed> inserito all'interno del tag object è un metodo in disuso che serve a gestire il file
sonoro per browser che non interpretano correttamente il tag object.
Per un file video la sintassi potrebbe essere la seguente:
<object data="filmato.mov" type="video/quicktime" width="164" height="140">
<embed src="filmato.mov" type="video/quicktime" width="164" height="140">
</object>
24 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Incorniciamo le nostre pagine: i frame
Incorniciamo le nostre pagine: i frame
Normalmente, in un sito web, differenti pagine contengono elementi comuni: per rendersene conto,
è sufficiente pensare alla sezione della pagina che contiene il logo del sito o il menu che permette la
navigazione all'interno dei principali contenuti del sito stesso.
Per riprodurre questi elementi comuni all'interno di tutte le pagine è necessario riportare il relativo
codice html in tutte le suddette pagine; va da se che manutenere il sito apportando modifiche ad un
solo elemento costringe alla modifica di tutte le pagine coinvolte.
Per ridurre gli inconvenienti insiti in tali contesti è possibile adottare varie strategie. Una, tra tali
strategie si basa sulla suddivisione della pagina in più “sottopagine” dette frames (cornici).
I frame consentono quindi di organizzare i propri documenti web usando contemporaneamente
differenti viste, ognuna delle quali può contenere una differente pagina html.
Esempio di pagina organizzata in tre frame
Di seguito vi riporto un esempio attinente.
<!-- PAGINA DEFAULT.HTML -->
<HTML>
<HEAD>
<TITLE>Pagina con frame</TITLE>
</HEAD>
<FRAMESET ROWS="10%, *" frameborder="1">
<FRAME SRC="header.html">
<FRAMESET cols="10%, *">
<FRAME SRC="menu.html" NAME="menu" marginwidth="10" marginheight="10">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</FRAMESET>
</HTML>
25 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Incorniciamo le nostre pagine: i frame
L'intera struttura viene definita ed organizzata in una singola pagina utilizzando i tag frameset e
frame. Tale pagina è composta dai classici tag di apertura e chiusura <html> e </html>. Tuttavia è
presente solo la parte HEAD. Infatti, al posto della sezione <body></body> si utilizza una specifica
sezione <FRAMESET> </FRAMESET> per definire appunto l'organizzazione dei frame. Il tag
frameset viene perfezionato attraverso gli attributi ROWS e COLS.
L'attributo ROWS specifica che le cornici devono essere realizzate su righe mentre COLS dispone
le cornici stesse su più colonne. Nel mio esempio il primo frameset definisce tramite l'attributo
ROWS che vi siano due righe; la prima deve occupare il 10% della pagina mentre la seconda riga
tutta la restante parte. Tale comportamento viene indicato con il “valore” '*'. Avremmo ugualmente
potuto indicare <FRAMESET ROWS="10%, 90%" >.
All'interno di di questa struttura definiamo la presenza le primo frame scrivendo:
<FRAME SRC="header.html">
Di seguito vi presento il codice minimale per la pagina header.html:
<!-- PAGINA HEADER.HTML -->
<HTML>
<body>
<h1>questo è l'header</h1>
</body>
</HTML>
L'attributo frame specifica appunto la presenza del contenuto della cornice tramite l'attributo SRC. Il
file header.html verrà dunque caricato nella prima “riga” della pagina con un'occupazione del 10%.
Poiché vogliamo realizzare al di sotto di questa prima cornice una ulteriore sezione contenente altri
due frames inseriamo un altro tag frameset:
<FRAMESET cols="10%, *">
In questo altro frameset indichiamo con l'attributo cols che richiediamo la presenza di una colonna
con una dimensione del 10% ed un'altra che occupi la parte restante (cols="10%, *")
All'interno di questo frameset, utilizzando i tag frame, definiamo i dettagli relativi alle pagine ch e
andranno ad occupare i frame stessi:
<FRAME SRC="menu.html" NAME="menu" marginwidth="10" marginheight="10">
<FRAME SRC="main.html" NAME="main">
Il primo frame avrà come sorgente la pagina menu.html mentre il secondo, dove verrà visualizzata
una pagina diversa a seconda del link cliccato nella sezione dei menu, conterrà inizialmente la
pagina main.html. Da notare l'attributo NAME associato ai vari frame. Ad esempio NAME="main"
che specifica un nome, in questo caso “main” che rappresenta un'etichetta fondamentale per fare
riferimento allo specifico frame.
Veniamo ora alla sezione importantissima dei menu. Questa, come ho già detto, sarà riempita dalla
pagina menu.html.
Di seguito vi riporto il codice di esempio per organizzare un elenco di menu.
26 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Incorniciamo le nostre pagine: i frame
<!-- PAGINA MENU.HTML -->
<HTML>
<HTML>
<body>
<a href="main.html" target="main">home</a><br><!-- main è il nome del frame centrale -->
<a href="pagina1.html" target="_top">pagina 1</a><br><!-- _top forza la visualizzazione a
tutta pagina -->
<a href="pagina2.html" target="_blank">pagina 2</a><br><!-- _blank apre una nuova
finestra del browser -->
</body>
</HTML>
Nel codice presentato si possono notare i classici tag <a> con gli attributi href che specificano i link
di destinazione. La cosa nuova sulla quale è necessario soffermarsi è data dall'attributo target. Tale
attributo specifica il fatto che la pagina di destinazione del link non dovrà essere visualizzata nel
frame in cui è presente il link (cioè nella sezione dei menu) bensì nella sezione main. Infatti il link è
dato dal codice:
<a href="main.html" target="main">
L'attributo target, oltre al nome del frame di destinazione del link, può avere anche altri valori. Ad
esempio, quando si vuole che la pagina di destinazione sia visualizzata a pagina intera vinene
utilizzato il valore _top. Quando invece si vuole che la pagina destinazione venga visualizzata in
una nuova istanza del browser si usa il valore _blank. Quest'ultimo uso è particolarmente indicato
quando il link di destinazione è riferito ad un sito esterno al “nostro”.
Di seguito trovate il codice minimale per le atre apgine coinvolte nell'esempio.
<!-- PAGINA1.HTML -->
<HTML>
<body>
<center>pagina1</center>
</body>
</HTML>
<!-- PAGINA2.HTML -->
<HTML>
<body>
<center>pagina2</center>
</body>
</HTML>
<!-- MAIN.HTML -->
<HTML>
<body>
<center>main</center>
</body>
</HTML>
Attributi del frameset
<frameset frameborder="no" cols="30%,70%">
frameborder è di default impostato a “yes” ed indica che nel frameset devono essere visualizzati i
bordi; chiaramente con “no” se ne impedisce la visualizzazione.
27 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Incorniciamo le nostre pagine: i frame
Attributi del frame
<frame src=”paginadelframe.html” scrolling=”no” noresize>
Il valore di “scrolling” può essere il default “yes” che appunto consente lo scrolling del contenuto
del frame, “no” che lo impedisce ed “auto” nel qual caso la barra di scorrimento appare solo se
richiesto dalla dimensione dei contenuti presenti nel frame.
L'attributo “noresize” impedisce il ridimensionamento del frame.
Infine, è possibile impostare la distanza (in pixel) tra il contenuto del frame ed il frame stesso
<frame marginwidth="80" marginheight="40" src="pagina.html">
28 - Io, Informatico – Carlo A. Mazzone – versione 20091018
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets)
I CSS rappresentano per certi aspetti un tentativo di ritorno alle origini dell'HTML: la separazione
tra contenuto e sua rappresentazione.
In breve un foglio di stile è un elenco di regole di visualizzazione a cui deve sottostare una
determinata pagina web.
I fogli di stile possono essere utilizzati internamente alla pagina (fogli incorporati) o al contrario
usando un file esterno, con estensione .CSS, nel quale vengono definite le regole di formattazione
degli elementi. Si parla in questo secondo caso di fogli collegati.
Una regola è fondamentalmente organizzata in due sezioni:
selettore {blocco della dichiarazione}
Il selettore definisce l'elemento al quale verrà applicata la regola (definita all'interno del blocco
della dichiarazione racchiuso tra parentesi graffe). Ad esempio:
body
{
font-family : verdana, Arial, Helvetica;
font-size : 12px;
color : #000000;
margin-top : 0;
}
dove body rappresenta l'elemento da “configurare” relativamente alle proprietà font-family, fontsize, color, margin-top. I valori delle rispettive proprietà vengono impostati separandoli con i due
punti “:” e terminandone la specifica con un punto e virgola.
Il selettore può essere un qualsiasi tag predefinito del linguaggio HTML; ad esempio: <H1>,
<TABLE>, <P> e così via.
Volendo è possibile utilizzare dei commenti all'interno del foglio di stile per chiarire il significato
delle regole; tali commenti prevedono l'uso dei caratteri /* di apertura commento e */ di chiusura,
come di seguito:
/* questo è un commento */
Le Classi
Per ottenere un controllo più fine sulla visualizzazione degli elementi si fa riferimento al concetto di
classe. Infatti, si potrebbe volere che determinati paragrafi abbiano specifiche formattazioni
differenti da quelle impostate a livello generale. Si possono così creare delle classi di
formattazione; per definire una classe è sufficiente indicarne il nome nel file css facendolo
precedere da un punto.
/*definisco una classe*/
.testorosso
{
color : #FF0000;
}
29 - Io, Informatico – Carlo A. Mazzone – versione 20091018
CSS (Cascading Style Sheets)
La classe in questione si chiama testorosso ed ha la proprietà color impostata appunto sul colore
rosso (FF0000).
Per richiamare nel codice HTML tale comportamento è sufficiente utilizzare l'attributo class:
<P class="testorosso">Questo è un paragrafo con classe</P>
Nel caso di fogli di stile incorporati l'elenco delle regole va posto all'interno del tag head
<html>
<head>
<style type="text/css">
/* qui vanno le regole */
</style>
</head>
...
Vediamo ora un esempio completo con un foglio di stile collegato.
<!-- file html -->
<HTML>
<HEAD>
<LINK REL="StyleSheet" HREF="mystyle.css" TYPE="text/css">
<TITLE>Esempio con CSS</TITLE>
</HEAD>
<BODY>
<H1>Questo è il tag H1</H1>
<P>Questo è un paragrafo normale</P>
<P class="testorosso">Questo è un paragrafo con classe</P>
<A HREF="">Questo è un link di esempio fittizio</A>
</BODY>
</HTML>
Analizzando il precedente codice html si può facilmente osservare la presenza di una classe di nome
testorosso (definita all'interno del tag <p>).
Da notare inoltre come all'interno del tag head sia presente il tag LINK che con l'attributo HREF
indica in quale file trovare l'insieme di regole da applicare per la pagina in questione (in questo caso
il file si chiama mystyle.css)
/* mystyle.css */
/*Questo è un foglio di stile di esempio */
h1 { color : orange; }
body
{
font-family : verdana, Arial, Helvetica;
font-size : 12px;
color : #000000;
margin-top : 0;
}
P
{
text-align: center;
}
/*definisco una classe*/
.testorosso
{
30 - Io, Informatico – Carlo A. Mazzone – versione 20091018
CSS (Cascading Style Sheets)
color : #FF0000;
}
body
{
background-image : url(_background.jpg);
}
/* seguono impostazioni di pseudo-classi */
a:hover {
color : #ffffff;
background : #1c3846;
font-size : 10px;
font-weight : bold;
}
a:link {
font-size : 10px;
color : #000000;
text-decoration : underline;
}
a:visited {
font-size : 10px;
color : #808080;
}
ID ed organizzazione dei contenuti: il layout del sito
Mentre l'uso delle classi consente di riferirsi ad interi gruppi di elementi in varie parti della pagina, a
volte può essere necessario individuare in maniera univoca il comportamento di una specifica
sezione della pagina.
Per capire meglio tale concetto è il caso di fermarsi un attimo a ragionare su aspetti generali inerenti
alla costruzione di un sito web.
Una volta definita la “mission” del sito si inizia ad organizzarne i contenuti e, più in generale, si
lavora allo storyboard del sito stesso. In tale contesto uno degli aspetti fondamentali è la
disposizione delle sezioni in cui deve essere organizzata la pagina (il layout). In qualsiasi sito web,
infatti, è banale riconoscere delle sezioni pressoché standard: una sezione di “intestazione” (detta in
generale “header”) con il nome del sito, un eventuale logo ed a volte un menu di navigazione
integrato. Una sezione con i contenuti veri e propri. Infine, una sezione, di solito posta in fondo alla
pagina, detta quindi “footer” con riferimenti ai copyright ed altre “amenità” del genere. In definitiva
una cosa del genere mostrato nella figura qui sotto:
31 - Io, Informatico – Carlo A. Mazzone – versione 20091018
CSS (Cascading Style Sheets)
Il mio sito
Home - FAQ - News - Contatti
Lorem ipsum dolor sit amet,
consectetur adipisici elit, sed
eiusmod tempor incidunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquid ex ea commodi consequat.
Copyright 2009 - tesseract.it
Il layout di un generico sito web
Il primo approccio che viene in mente per gestire una situazione come quella presentata in figura
consiste nell'utilizzo di un insieme di tabelle per costringere le varie sezioni della pagina a
conservare la propria posizione. Tuttavia, l'uso delle tabelle comporta una serie di problemi tra i
quali la difficoltà di mantenere in maniera semplice l'omogeneità grafica di un ito complesso.
I CSS mettono a disposizione uno strumento formidabile per risolvere tale problematica e di
conseguenza la differenziazione tra contenuto e rappresentazione: gli ID. Con gli ID, infatti, è
possibile assegnare delle caratteristiche grafiche specifiche ad una specifica sezione: intestazione,
footer, ecc.
Il tag HTML che meglio si presta a fungere da contenitore per le varie sezioni è il tag <DIV>.
Infatti, tale tag non ha nessuna caratteristica particolare di formattazione predefinita. Per meglio
chiarire gli aspetti d'uso concreti riporto l'HTML necessario per organizzare il layout appena
definito:
Per definire un ID si fa precedere il suo nome dal simbolo cancelletto “#” come di seguito:
#header
{
background-color: #0022aa;
color: #ffffff;
}
e come per le classi se ne richiama il funzionamento dalla pagina HTML come segue:
<div id="header">
...
</div>
Di seguito vi propongo il codice completo di un esempio minimale; prima il codice HTML:
<div id="header">
<center>
<h1>Il mio sito</h1>
Home FAQ News Contatti
</center>
</div>
32 - Io, Informatico – Carlo A. Mazzone – versione 20091018
CSS (Cascading Style Sheets)
<div id="principale">
<!-- contenuto -->
<p>
Lorem ipsum
dolor sit amet
</p>
<p>
consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquid ex ea commodi consequat.</p>
</div>
<div id="footer">
&copy; 2009 tesseract.it
</div>
</body>
</html>
e quindi il relativo file di regole CSS:
/*
Foglio di stile di esempio
*/
body
{
background-color: #ffffff;
}
#header
{
background-color: #0022aa;
color: #ffffff;
}
#principale
{
background-color: #f5f5f5;
color: #222222;
}
#footer
{
background-color: #f5f5f5;
text-align: center;
}
33 - Io, Informatico – Carlo A. Mazzone – versione 20091018
CSS (Cascading Style Sheets)
34 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Fammi vedere quello che faccio: gli ambienti WYSIWYG
Fammi vedere quello che faccio: gli ambienti WYSIWYG
Sinceramente non so che impressione vi abbia fatto finora l'HTML; credo, comunque, che un
minimo di disorientamento ed una certa sensazione di incapacità di gestire la mole di tag e relativi
attributi sia abbastanza naturale.
Se da un lato l'HTML risulta relativamente semplice da imparare ed utilizzare d'altro canto esso
comporta un notevole sforzo nel caso si vogliano produrre pagine di una certa complessità grafica.
“Da che mondo è mondo” quando il gioco si fa duro si affilano gli strumenti. Dirò una casa banale
ma dovrebbe essere chiaro che: NON VORRETE MICA PRODURRE LE VOSTRE PAGINE
CON IL BLOCCO NOTE DI WINOWS???
In effetti, il blocco note può risultare utile in un primo momento di avvicinamento al linguaggio ma
subito dopo è il caso di munirsi di strumenti più efficienti.
Tra i tanti editor di testi a disposizione mi sento di suggerirne alcuni: Crimson Editor, NotePad++,
PSPad.
Si tratta di ottimi software (gratuiti) che consentono di scrivere i tag html con semplificazioni tipo la
colorazione del codice, la possibilità di gestire più file aperti contemporaneamente e diversi altri
strumenti. Tutti, però, partono dalla scrittura manuale del codice e dalla verifica attraverso il
browser del risultato ottenuto. Nel caso in cui questo non sia soddisfacente si modificheranno i tag
e, dopo, aver salvato la pagina, si verificherà ancora una volta il risultato finché non si raggiungerà
quello cercato e sperato.
Un approccio totalmente diverso vede, invece, la creazione delle pagine html attraverso software
che
consentono di vedere direttamente ciò che si vuole ottenere; un po' come avviene con
programmi come Microsoft Word in cui si scrive il testo, lo si dispone a piacimento, si inseriscono
immagini e così via. Tale modo di procedere ha fatto si che si creasse un acronimo che identifica
questa tipologia di programmi: WISIWIG.
WISIWIG sta letteralmente per:
What You See Is What You Get
e cioè: ciò che vedi (quando crei la pagina) è effettivamente ciò che ottieni come risultato finale.
Tra i più famosi software che ricadono in questa categoria c'è da segnalare sicuramente Microsoft
FrontPage, così come l'ottimo Adobe Dreamweaver (originariamente prodotto dalla Macromedia).
Come al solito, tuttavia, cerco di segnalarvi qualche soluzione gratuita; anche in tali contesti esiste
una buona alternativa ai più blasonati programmi che ho appena menzionato: kompozer .
Kompozer (reperibile all'indirizzo: http://www.kompozer.net/ ) è un completo sistema di authoring
nato sulle ceneri di un vecchio progetto chiamato NVU (da leggersi N-view, per “new view”) tuttora
non più aggiornato.
35 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Moduli: raccogliamo i dati dal web
Moduli: raccogliamo i dati dal web
Un aspetto di fondamentale importanza per una qualsiasi applicazione informatica, e quindi anche
per quelle scritte per il web, risiede nella gestione dei dati forniti dall'utilizzatore (utente)
dell'applicazione stessa. Normalmente, infatti, una applicazione web non deve semplicemente
limitarsi a consentire la navigazione all'interno dei suoi contenuti ma coinvolgere l'utente
consentendogli, ad esempio, di registrarsi per ricevere materiale informativo, postare propri
commenti (postare è una espressione gergale che significa 'inviare dati'), effettuare acquisti o
quant'altro. Per consentire tali tipi di attività il linguaggio HTML mette a disposizione del
programmatore uno specifico tag: <FORM>
Tale marcatore consente di definire nella pagina web una sezione, nota con il termine di modulo,
(form nella terminologia tecnica) con lo scopo di raccogliere specifiche informazioni inserite nella
pagina dal nostro utente. Un semplice esempio può valere più di mille parole:
Vediamo allora come realizzare il form proposto. Come prima operazione è necessario utilizzare i
tag <FORM> e </FORM> all'interno dei quali andremo a racchiudere il testo ed i tag dei vari
elementi.
<form name="moduloEsempio" method="post" action="pagina.asp">
...
</form>
Il tag <form> prevede l'utilizzo di tre attributi:
–
–
–
name: è un nome simbolico con il quale è eventualmente possibile riferirsi al modulo stesso
method: specifica la metodologia con la quale il modulo invia i dati raccolti
action: indica il nome del file che dovrà processare i dati inviati dal modulo
L'attributo method può assumere due diversi valori: GET e POST.
GET raccoglie tutti i dati in una unica variabile di nome QueryString che viene passata alla pagina
indicata nell'attributo action.
POST al contrario passa alla pagina che processa i dati tante variabili quanti sono i campi di
selezione impostati nel modulo.
Vediamo ora i vari elementi del form. Per far ciò vi propongo il codice HTML completo relativo
all'esempio in oggetto.
--------------------------------------------------------------<form name="moduloEsempio" method="post" action="pagina.asp">
Nome e Cognome:
<input type="text" name="nomecognome">
<p>Professione:
<select name="professione">
<option selected value="studente">Studente</option>
<option value="impiegato">Impiegato</option>
<option value="disoccupato">In cerca di occupazione</option>
<option value="pensionato">Pensionato</option>
<option value="autonomo">Lavoro autonomo</option>
</select>
</p>
<p>Sesso: M
<input type="radio" name="sesso" value="maschio" checked>
F
<input type="radio" name="sesso" value="femmina">
</p>
<p>Interessi: </p>
36 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Moduli: raccogliamo i dati dal web
<p>
<input type="checkbox" name="chkInteressi1" value="Lettura">
Lettura
<input type="checkbox" name="chkInteressi2" value="Sport">
Sport
<input type="checkbox" name="chkInteressi3" value="Televisione">
Televisione
<input type="checkbox" name="chkInteressi4" value="Cinema">
Cinema
<input type="checkbox" name="chkInteressi5" value="Politica">
Politica </p>
<p>
<input type="submit" name="Submit" value="Invia">
<input type="reset" name="Reset" value="Annulla">
</p>
</form>
---------------------------------------------------------------
ed il corrispondente risultato nel browser:
Analizziamo in dettaglio i vari elementi:
Caselle di testo
Le caselle di testo sono probabilmente tra gli elementi più utilizzati. Semplicemente si tratta di
elementi che consentono all'utente di inserire del testo al loro interno.
<INPUT TYPE="text" NAME="nomecognome">
E' possibile definire una dimensione a piacere, espressa in caratteri, per il campo di testo
utilizzando l'attributo SIZE. E' inoltre possibile definire il numero massimo d caratteri inseribili in
un dato campo di testo utilizzando l'attributo MAXLENGHT.
37 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Moduli: raccogliamo i dati dal web
<INPUT TYPE="text" NAME="nomecognome" SIZE ="50" MAXLENGHT="64">
Nel caso in cui, come nell'esempio appena portato, la dimensione (SIZE) del campo sia inferiore al
numero massimo di caratteri digitabili (MAXLENGHT) eventuali caratteri in eccesso scorreranno
in orizzontale fino a raggiungere il valore massimo impostato.
Aree di testo (textarea)
Le aree di testo vengono utilizzate quando si vuole che un dato testo occupi più righe. Un utilizzo
tipico può essere ad esempio quello in cui si voglia che l'utente inserisca dei commenti o più in
generale del testo libero.
<TEXTAREA NAME="areaditesto" ROWS="5" COLS="60">
questo è un testo di esempio inserito nell'area di testo
</TEXTAREA >
Gli attributi ROWS e COLS specificano rispettivamente il numero di righe e di colonne di testo del
campo.
Pulsanti di opzione (radio button)
I pulsanti di opzione servono per realizzare elenchi di oggetti dei quali uno solo di essi può essere
selezionato. Quando uno di questi pulsanti viene selezionato gli altri vengono deselezionati in
maniera del tutto automatica.
<input type="radio" name="sesso" value="Maschio" checked>
L'attributo checked associato ad un certo pulsante definisce il pusante stesso come quello che risulta
selezionato in maniera predefinita al momento del caricamento della pagina.
E' possibile definire più elenchi indipendenti di oggetti selezionabili; per far ciò è sufficiente
associare a gruppi di pulsanti diversi attributi NAME differenti.
Caselle di selezione (checkbox)
Le caselle di selezione consentono di scegliere uno o più elementi da un dato elenco. Ogni casella
può essere attiva (stato ON) oppure disattiva (stato OFF) e quindi, al contrario dei pulsanti di
opzione, è possibile selezionare (attivare) contemporaneamente differenti valori.
<INPUT TYPE="checkbox" NAME="chkInteressi1" VALUE="Informatica">
Elenchi a discesa
Gli elenchi a discesa permettono di realizzare liste di elementi in forma di menu dai quali
selezionare la voce di interesse.
<SELECT NAME="professione">
38 - Io, Informatico – Carlo A. Mazzone – versione 20091018
Moduli: raccogliamo i dati dal web
<OPTION NAME="studente">Studente</OPTION>
...
...
</SELECT >
E' possibile associare ad uno degli elementi dell'elenco l'attributo SELECTED per rendere tale
elemento selezionato in maniera predefinita al momento del caricamento della pagina contenente il
modulo.
Pulsanti
I pulsanti sono gli elementi che controllano il funzionamento del form. Ogni form dovrebbe avere
un pulsante di inoltro dati.
<INPUT TYPE="submit" NAME="Submit" VALUE="Invia">
L'attributo TYPE specifica che il pulsante in oggetto deve, una volta premuto, richiamare lo script
indicato nell'attributo ACTION del tag <FORM> passando a quest'ultimo i vari campi e relativi
valori presenti nel modulo stesso.
E' possibile utilizzare un ulteriore bottone che consenta di reimpostare allo stato iniziale i vari
elementi presenti nel form.
<INPUT TYPE="reset" NAME="Reset" VALUE="Annulla">
39 - Io, Informatico – Carlo A. Mazzone – versione 20091018
XML
XML
HTML ha rappresentato senza ombra di dubbio un elemento fondamentale nello sviluppo del web.
La sua estrema semplicità ha reso accessibile ad un enorme numero di utenti la possibilità di
pubblicare e condividere straordinarie quantità di informazioni.
Ma HTML ha mostrato al contempo anche un punto debole di notevole impatto. Quello di non
riuscire a tenere separate le funzionalità relative alla gestione dei contenuti rispetto a quelle legate
alla pura rappresentazione.
Mi preme qui sottolineare come al crescere delle possibilità di comunicazione e scambio di
informazioni si sia fatta sempre più pressante la necessità di avere standard che permettano lo
scambio dei dati tra sistemi tra loro eterogenei. Tale problematica è presente sia se ci riferiamo a
sistemi tra loro geograficamente separati sia, al contrario, relativamente ad entità presenti su di un
medesimo sistema. Il problema è sostanzialmente relativo alla natura del dato che deve essere
convertito da un sistema ad un altro indipendentemente dalla sua rappresentazione esterna.
Un esempio può aiutare a meglio capire il concetto: qualche anno fa i sistemi tipicamente utilizzati
per le riprese video amatoriali erano le cineprese che utilizzavano delle semplici pellicole. Ormai
tali apparecchiature sono praticamente sparite. Successivamente le riprese video sono state
effettuate con sistemi che riversano i filmati su videocassette di differenti formati. I più moderni ed
attuali sistemi utilizzano tecniche digitali di ripresa. In definitiva i mezzi meccanici si modificano
tecnologicamente nel tempo, gli oggetti delle riprese (i filmati video ovvero le informazioni) sono
sempre gli stessi e pressante si fa il problema di convertire i vecchi formati in quelli nuovi al fine di
conservare memoria di quanto già acquisito.
Un discorso simile può essere applicato al campo più squisitamente informatico. Il punto centrale di
ogni contenuto è l'informazione in esso presente e non tanto la sua rappresentazione. Il fulcro è la
comunicazione semplice è standard dei contenuti ai quali si potrà successivamente associare uno
stile, ad essi legato, ma allo stesso tempo indipendente.
L'attuale e più importante risposta a tali problematiche è XML.
Il World Wide Web Consortium (W3C), vale a dire il gruppo che si occupa del coordinamento del
linguaggio HTML, è anche il promotore di XML (Extensible Markup Language).
XML è in realtà una forma semplificata di un altro standard per la gestione dei documenti noto
come SGML (Standard Generalized Markup Language). 1
La natura di XML è quella di essere una semplificazione ed un ridimensionamento di SGML.
Quest'ultimo linguaggio, infatti, già in uso dagli anni '80 nelle grandi industrie tecnologiche e
tipografiche, è troppo “pesante” e “corposo” per adattarsi al web.
La discendenza diretta di XML da SGML rappresenta un suo altro punto di forza. Ciò permette alle
tante compagnie che utilizzano SGML di migrare facilmente i loro contenuti verso XML.
XML è un meta-linguaggio (un linguaggio per creare linguaggi). Esso non è limitato a dei tag
predefiniti come HTML. Al contrario esso permette la creazione di tag propri consentendo la
realizzazione di specifici linguaggi per specifici contesti (matematici, chimici e così via).
Molto del merito relativo alla creazione di XML va probabilmente attribuito a Jon Bosak della Sun Microsystems.
Questi ha infatti presieduto il primo gruppo di lavoro su XML: XML Working Group (originariamente noto come
SGML Editorial Review Board).
1
40 - Io, Informatico – Carlo A. Mazzone – versione 20091018
XML
Ma la vera forza di XML, lo ribadisco, è la sua capacità di rendere isolabile il contenuto dalla
rappresentazione. Inoltre, esso utilizza, per rappresentare tale contenuto, testo in chiaro e non in
formato binario. Ciò consente al contenuto stesso di essere direttamente visualizzato ed interpretato
da un operatore umano. Vi assicuro che questo è un aspetto di enorme importanza nello sviluppo di
una qualsiasi applicazione.
Organizzazione di un documento XML (contenuto, struttura e stile)
Analizzando una data realtà informativa si possono facilmente individuare tre differenti elementi
fondamentali: il suo contenuto, la sua struttura interna ed un suo determinato stile. Come sempre un
esempio può essere chiarificatore.
Immaginiamo di voler elencare e gestire le caratteristiche di una serie di libri. Per ogni singolo libro
possiamo individuare una serie di caratteristiche comuni come ad esempio un titolo, un autore, un
prezzo, un editore, il numero delle pagine, e via dicendo. All'interno di questi elementi possiamo
individuare anche delle relazioni strutturali: un autore avrà un suo nome e cognome, la sua
biografia, così come eventualmente una lista di altri libri pubblicati ad egli associata.
Un ulteriore elemento caratterizzante tale realtà informativa è rappresentato dallo stile con cui
visualizziamo tali informazioni. Potremmo elencare il tutto con una tabella, piuttosto che con una
lista ed applicare font e colori diversi a seconda di preferenze e contesti specifici.
Lo standard XML prevede per questi tre aspetti individuali tre tipi di file separati.
Il primo e più importante è il file del contenuto la cui estensione, senza sorprese è XML.
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<libri>
<libro>
<titolo>Astronomia</titolo>
<editore>De Agostini</editore>
<autore>
<nome>Gianluca</nome>
<cognome>Ranzini</cognome>
<biografia>Laueato in Astrofisica...</biografia >
</autore>
<numeropagine>320</numeropagine >
<prezzo valuta="euro">18.08</prezzo>
</libro>
</libri>
Come potete notare, un file XML è abbastanza simili ad un file HTML. Sono, infatti, facilmente
individuabili una serie di marcatori (tag) che delimitano contenuti specifici. La grossa differenza
nella gestione dei tag, come dicevo prima, sta nel fatto che in generale non siamo costretti a servici
41 - Io, Informatico – Carlo A. Mazzone – versione 20091018
XML
di tag già definiti per noi come avviene in HTML. In HTML abbiamo tag del tipo <p></p> per
definire paragrafi, <Img> per inserire immagini e così via. In ogni caso possiamo fare uso solo dei
tag che la versione specifica del linguaggio HTML ci mette a disposizione.
In XML siamo noi a decidere quali debbano essere i tag e come questi debbano essere organizzati
all'interno del nostro documento. Badate bene che qui stiamo definendo l'organizzazione dei
contenuti e non ci stiamo affatto preoccupando, almeno per il momento, del modo in cui tali
contenuti debbano essere visualizzati.
Ad ogni elemento di interesse si fa corrispondere un tag specifico. Ad esempio, nel nostro caso,
titolo, editore, prezzo e così via. La cosa di rilevo da notare è che non sempre è facile stabilire se
una certa caratteristica debba essere realizzata utilizzando uno specifico tag o se questa debba più
propriamente essere indicata utilizzando un attributo di un altro tag. Molto dipende dal contesto
specifico e dal tipo di utilizzo che si immagina per la struttura in oggetto.
Analizzando con più dettaglio il nostro primo file xml notiamo senza dubbio la prima riga
contenente il tag xml con una serie di attributi:
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
Tale sezione del file prende il nome di dichiarazione XML.
In essa l'attributo version specifica a quale versione di XML fa riferimento il file in oggetto.
L'attributo encoding specifica invece lo schema di codifica dei caratteri utilizzati (UTF-8, EUCJP, ...).
L'attributo standalone rappresenta la dichiarazione di documento autonomo. Esso può assumere i
due valori yes e no. Nel primo caso si indica che non esiste alcun ulteriore documento, collegato a
quello in oggetto, che definisca ulteriori caratteristiche relative al contenuto. Al contrario, un valore
“no”, specifica che esiste un altro documento, esterno al primo, contenente altri dettagli formali per
meglio definire caratteristiche e vincoli dei contenuti da gestire. Tali dettagli prendono il nome di
DTD (Document Type Definition) e possono essere, un po' come avviene per i CSS, sia interni al
documento XML sia esterni ad esso. In questo secondo caso è ovviamente necessario indicare nel
documento XML dove reperire il DTD specifico. Da notare che in SGML l'uso del DTD è
obbligatorio.
Livelli di correttezza per un documento XML
Esistono due differenti livelli in cui può essere classificato e gestito un documento XML.
Documenti ben formati
I documenti ben formati rappresentano un primo livello, non molto restrittivo, in cui può ricadere
un file XML. Per definirsi ben formato un file XML deve sottostare alle seguenti regole:
–
–
Bilanciamento dei tag: ogni tag di apertura (ad esempio <libro>) deve avere un corrispondente
tag di chiusura (ad esempio </libro>). Se tuttavia il tag è un elemento vuoto, che non ha quindi
un tag di chiusura, la sua sintassi deve essere la seguente: </tagvuoto>. Facendo riferimento ad
HTML, un tag che non prevede chiusura è, ad esempio, il tag <br> utilizzato per inserire un
ritorno a capo. Volendo utilizzare in XML un tag di tale tipo esso dovrebbe essere espresso come
<br/>.
Tutti gli elementi devono essere annidati: non si possono avere sovrapposizioni tra tag. Ad
esempio <p><i></p></i> in XML non è consentito.
42 - Io, Informatico – Carlo A. Mazzone – versione 20091018
XML
–
–
–
Valori degli attributi tra virgolette: tutti i valori degli attributi di un elemento devono essere
espressi racchiudendoli tra doppi apici. Ad esempio: <prezzo valuta="euro">
Un solo elemento radice: il documento XML deve avere un unico elemento 'radice' in cui tutti
gli altri elementi devono risultare annidati.
Differenza tra maiuscole e minuscole: i tag sono case sensitive; <Tag> è diverso da <TAG>
Documenti validi
Un documento si ritiene essere valido se ha associato un DTD (Document Type Definition) e se il
documento rispetta i vincoli in esso espressi. Il DTD deve apparire prima del primo elemento del
documento.
Il nome del DTD per convenzione corrisponde a quello dell'elemento radice.
Il DTD, se è interno al documento XML, inizia con una dichiarazione DOCTYPE:
<!DOCTYPE
elemento_radice
[elemento, attributo, entità, notazione]>
Se, al contrario il DTD è esterno esso viene referenziato come segue:
<!DOCTYPE elemento_radice SYSTEM "file.dtd">
In sintesi il DTD serve a definire in maniera formale e rigorosa l'organizzazione dei contenuti
all'interno del file XML.
Anche l'occhio vuole la sua parte: applichiamo uno stile ad XML
Abbiamo visto alcune delle caratteristiche essenziali di XML. Tutto ciò ha riguardato
esclusivamente l'aspetto relativo al contenuto. E' intuitivo come sia necessario individuare dei
metodi che consentano al contenuto di avere una determinata forma usufruibile dall'utente umano.
La risposta è ancora una volta un acronimo: XSL.
L'Extensible StyleSheet Language consente attraverso l'uso di specifici tag di indicare precise regole
di formattazione per ogni singolo elemento di un file XML.
Di seguito riporto un semplice esempio di file XML con un suo corrispondente file XSL.
<!--
File di esempio XML -->
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="sample.xsl"?>
<tasks>
<task>
<name>Interfaccia grafica</name>
<description>configurazione gui</description>
<startDate>14/10/2004</startDate>
<endDate>27/10/2004</endDate>
<priority>Normale</priority>
<percentComplete>0</percentComplete>
<status>Non iniziata</status>
</task>
</tasks>
43 - Io, Informatico – Carlo A. Mazzone – versione 20091018
XML
<!--
File di esempio XSL -->
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="uri:xsl">
<xsl:template match="/">
<HTML>
<BODY>
<TABLE BORDER="0">
<TR STYLE="font-weight:bold" bgcolor='#9faccb' width="100%">
<TD>Attivita'</TD>
<TD width="50%">Descrizione</TD>
<TD>Data inizio</TD>
<TD>Data fine</TD>
<TD>Priorita'</TD>
<TD>Stato</TD>
<TD>% completamento</TD>
</TR>
<xsl:for-each select="tasks">
<xsl:apply-templates/>
</xsl:for-each>
</TABLE>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="task">
<TR>
<TD><xsl:value-of
<TD><xsl:value-of
<TD><xsl:value-of
<TD><xsl:value-of
<TD><xsl:value-of
<TD><xsl:value-of
<TD><xsl:value-of
</TR>
select="name"/></TD>
select="description"/></TD>
select="startDate"/></TD>
select="endDate"/></TD>
select="priority"/></TD>
select="status"/></TD>
select="percentComplete"/></TD>
</xsl:template>
</xsl:stylesheet>
La prima cosa che salta all'occhio è il fatto che il file XSL è molto simile ad un file XML. La cosa è
del tutto normale: i file XSL sono a loro volta dei documenti XML.
44 - Io, Informatico – Carlo A. Mazzone – versione 20091018
