Dispensa di HTML per chi muove i primi passi nel Web

Transcript

Giorno dopo Giorno - Scritture quotidiane
Un blog di Sergio Fumich – www.sergiofumich.com
Helps & Tools for the Web and Webmasters
Dispensa di HTML
per chi muove i primi passi nel Web
INDICE
1
2
3
4
Che cos’è HTML .........................................................................................................................4
Creazione di documenti HTML ...................................................................................................5
Testo e marcatori..........................................................................................................................6
Marcatori di struttura ...................................................................................................................8
4.1 Il marcatore <!DOCTYPE>.....................................................................................................8
4.2 Il marcatore <HTML> .............................................................................................................8
4.3 Il marcatore <HEAD>..............................................................................................................8
4.4 Il marcatore <TITLE>..............................................................................................................8
4.5 Il marcatore <BODY> .............................................................................................................8
5
Marcatori fondamentali di HTML .............................................................................................10
5.1 Creazione di titoli...................................................................................................................10
5.2 Marcatura dei paragrafi..........................................................................................................10
5.3 Elenchi ...................................................................................................................................11
5.4 Altri marcatori........................................................................................................................11
6
Collegamenti ..............................................................................................................................13
6.1 Collegamenti interni...............................................................................................................13
6.2 URL (Uniform Resource Locator).........................................................................................14
6.3 Collegamento ad altro materiale Internet...............................................................................14
7
Inserire immagini ed elementi multimediali nei documenti ......................................................16
7.1 Attributi del marcatore <IMG>..............................................................................................16
7.2 Inserire suoni e filmati ...........................................................................................................16
8
Immagini cliccabili ....................................................................................................................19
8.1 Mappe cliccabili di tipo client-side........................................................................................19
9
Creazione di tabelle....................................................................................................................21
9.1 Le sezioni di una tabella.........................................................................................................21
9.2 Gruppi di colonne...................................................................................................................22
9.3 I marcatori <TR>, <TH> e <TD>..........................................................................................22
9.4 Formattazione di una tabella ..................................................................................................23
9.5 Allineamento entro le celle ....................................................................................................23
9.6 I margini delle celle................................................................................................................24
10 Creazione di moduli ...................................................................................................................25
10.1 Elenchi di voci .......................................................................................................................25
10.2 Il marcatore <TEXTAREA>..................................................................................................26
11 Suddivisione in aree indipendenti (frames) ...............................................................................27
11.1 Impostazione delle frame .......................................................................................................27
11.2 Impostazione dei collegamenti...............................................................................................28
12 Marcatori applet e incorporamento di oggetti............................................................................29
12.1 Il marcatore <PARAM> ........................................................................................................30
12.2 La coppia di marcatori <APPLET>…</APPLET>...............................................................30
13 Fogli di stile ...............................................................................................................................32
13.1 Posizionamento variabile delle informazioni di stile.............................................................32
13.2 Indipendenza da uno specifico linguaggio.............................................................................32
13.3 Uso contemporaneo di più style sheets per uno stesso documento (cascading)....................32
13.4 Dipendenza dal media utilizzato per la visualizzazione ........................................................32
13.5 Performances..........................................................................................................................33
13.6 Default style sheets language.................................................................................................33
13.7 Style sheets interni .................................................................................................................33
13.8 Style sheets esterni .................................................................................................................34
13.9 Media descriptors...................................................................................................................35
2
14 Cascading Style Sheets Level 1 .................................................................................................36
14.1 Commenti...............................................................................................................................36
14.2 L’ordine di cascata .................................................................................................................37
14.3 Il modello di formattazione....................................................................................................37
14.4 I font di caratteri.....................................................................................................................37
14.5 Il colore del testo e dello sfondo ............................................................................................38
14.6 Il testo.....................................................................................................................................38
14.7 Box .........................................................................................................................................39
14.8 Proprietà di classificazione ....................................................................................................41
14.9 Spazi bianchi ..........................................................................................................................41
14.10 Liste....................................................................................................................................41
14.11 Unità di misura negli style sheets ......................................................................................42
15 Cenni di HTML dinamico..........................................................................................................43
15.1 Collezioni ...............................................................................................................................43
15.2 Il modello a oggetti ................................................................................................................43
15.3 La gestione degli eventi .........................................................................................................44
3
1
Che cos’è HTML
HTML è l’acronimo di HyperText Markup Language, un linguaggio per creare ipertesti, costituito
da un sistema di codici (marcatori o tag) che definiscono le caratteristiche di un documento e ne
guidano la composizione sullo schermo.
Con il termine ipertesto si intende un documento che può essere letto in una forma non lineare. Un
ipertesto, cioè, consente di leggere uno o più documenti saltando direttamente al loro interno o
dall’uno all’altro, in base alle specifiche esigenze, interessi o necessità, senza dover seguire, come
se si leggesse un libro, un percorso sequenziale o lineare per raggiungere la medesima
informazione.
Il linguaggio HTML è stato creato dal Center for High Energy Physics in Svizzera con lo scopo di
consentire ai ricercatori del Centro stesso di potersi scambiare direttamente online la propria
documentazione servendosi, invece che del supporto cartaceo, dello schermo di un computer.
Il linguaggio HTML viene utilizzato per organizzare le informazioni in modo da creare documenti
elettronici che possono essere sfogliati tramite computer per passare rapidamente da un argomento
all’altro, invece di dover leggerne l’intero contenuto in una forma sequenziale. L’organizzazione dei
documenti elettronici è un’operazione che richiede impegno ma, se utilizzata correttamente,
consente di “navigare” tra le informazioni e i riferimenti incrociati fino a raggiungere l’argomento
finale desiderato senza essere obbligati a leggere parti del documento irrilevanti o non necessarie.
4
2
Creazione di documenti HTML
Per creare un documento HTML, si devono avere a disposizione, come minimo, un editor di testo,
per la creazione del codice sorgente, e un navigatore o browser, per la visualizzazione del
documento generato dal codice sorgente.
Inoltre, nel caso si desideri inserire nel documento elementi grafici e non solo testuali, si avrà
bisogno di un software grafico, e qualora si voglia rendere disponibile il documento in Internet,
anche di una applicazione FTP per la collocazione del documento sul server web.
Per creare il codice sorgente di un documento HTML, sebbene oggi esistano sofisticati editor
WYSIWYG e convertitori, che sollevano l’autore dal compito della generazione del codice
lasciandogli solo quello di affinarlo per ottenere i risultati finali desiderati, sono più che sufficienti
Blocco Note (Notepad) per l’ambiente MS Windows e vi per l’ambiente Unix.
5
3
Testo e marcatori
Quando si utilizza un linguaggio come HTML, non si ha alcun bisogno di preoccuparsi di come
verranno formattate le parti di un documento, ma sarà sufficiente segnalarle singolarmente,
applicando alle stesse l’opportuno marcatore che indicherà il tipo di elemento stesso.
I documenti HTML sono fondamentalmente composti da tre elementi:
testo sul quale si interviene;
marcatori che determinano gli elementi di un documento;
marcatori che inseriscono altri oggetti, come immagini, suoni, piccoli programmi
complementari (applet) ed elementi animati.
I marcatori, che rappresentano i comandi del linguaggio HTML, sono elementi di testo racchiusi tra
parentesi angolari ( < >) .
Alcuni marcatori del linguaggio HTML sono utilizzati singolarmente, altri vanno usati in coppia,
cioè uno (marcatore di apertura) dovrà essere inserito prima del testo cui si riferisce, l’altro
(marcatore di chiusura) dovrà chiudere il testo. Qualsiasi cosa inserita fra il marcatore di apertura e
quello di chiusura sarà influenzata dal marcatore stesso.
Esempio:
<MARCATORE>componente testuale</MARCATORE>
Il marcatore di apertura e quello di chiusura sono praticamente identici nella componente letterale
con la sola eccezione che il secondo viene preceduto da uno slash (/).
Nella scrittura del codice, è buona norma inserire contemporaneamente il marcatore di apertura e
quello di chiusura, lasciando al momento immediatamente successivo l’inserimento del contenuto
da racchiudere tra di essi.
In alcune situazioni i marcatori possono comprendere anche uno o più attributi. Un attributo
specifica ulteriori informazioni quali, ad esempio, il colore, le dimensioni, l’allineamento,
l’indirizzo del collegamento oppure il testo che dovrà apparire al posto di un’immagine.
Esempio:
<MARCATORE BGCOLOR=”#RRGGBB”>componente testuale</MARCATORE>
L’attributo nell’esempio definisce un colore di sfondo. Nel caso di marcatori a coppie, gli attributi
vengono sempre inseriti nel marcatore di apertura.
In linea generale, non viene rilevata la differenza nella scrittura dei marcatori fra lettere maiuscole e
minuscole o combinazioni di esse. Per facilitare la lettura e la loro identificazione all’interno del
codice sorgente di un documento HTML, si consiglia di scrivere i marcatori utilizzando solo
caratteri maiuscoli.
Al contrario dei marcatori, il testo contenuto tra gli stessi sarà riprodotto, sulla pagina finale
interpretata, con la sequenza di caratteri maiuscoli e minuscoli utilizzati nel codice sorgente.
I browser ignorano qualsiasi tipo di formattazione che non sia stata definita utilizzando marcatori.
Di conseguenza la presenza di spazi aggiuntivi, righe bianche o fermi di tabulazione inseriti nel
testo non avranno alcun effetto sull’aspetto finale del documento HTML.
I tre seguenti esempi di scrittura produrranno tutti lo stesso effetto finale:
<MARCATORE>Testo compreso fra i marcatori</MARCATORE>
<MARCATORE>
Testo compreso fra i marcatori
6
</MARCATORE>
<MARCATORE>
Testo compreso
fra
i
marcatori
</MARCATORE>
In molte situazioni è richiesta la presenza di marcatori inseriti all’interno di una coppia di altri
marcatori (marcatori annidati). La tecnica dell’annidamento dei marcatori consente di applicare a
un unico elemento di un documento HTML vari stili di formattazione.
Esempio:
<B><I>Testo in grassetto e corsivo</I></B>
Lo stesso effetto dell’esempio precedente si otterrà anche invertendo l’ordine dei marcatori:
<I><B>Testo in grassetto e corsivo</B></I>
7
4
Marcatori di struttura
Si definiscono marcatori di struttura alcuni marcatori HTML che definiscono e descrivono la
struttura di un documento. Generalmente non hanno alcun effetto sull’aspetto del documento o delle
informazioni contenute al suo interno, ma permettono ai browser o agli editor HTML di identificare
le caratteristiche del documento.
Alcuni sono elementi dichiarati imprescindibili per un corretto codice sorgente di un documento
HTML dall’organizzazione che stabilisce le regole HTML stesse, il Consorzio W3
(http://www.w3.org).
4.1
Il marcatore <!DOCTYPE>
Il marcatore di struttura <!DOCTYPE> è di tipo singolo e ha lo scopo di identificare il documento
come un documento HTML che si adegua a specifici standard HTML.
Esempio:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
Il marcatore va inserito all’inizio del codice sorgente del documento HTML.
4.2
Il marcatore <HTML>
La coppia di marcatori <HTML> viene utilizzata per racchiudere qualsiasi elemento del codice
sorgente, a esclusione del marcatore <!DOCTYPE>.
La coppia di marcatori indica che per creare il documento è stato utilizzato HTML.
Esempio:
<HTML>
… tra questi due marcatori viene inserito tutto il materiale testuale
relativo al documento…
</HTML>
4.3
Il marcatore <HEAD>
La coppia di marcatori <HEAD> definisce l’intestazione del documento, cioè la parte di documento
utilizzata per identificare il documento o per farvi riferimento.
Il marcatore <HEAD> deve essere inserito subito dopo il marcatore <HTML>.
4.4
Il marcatore <TITLE>
La coppia di marcatori <TITLE>, obbligatoriamente richiesta dalle specifiche HTML, applica un
titolo al documento e va inserita all’interno della coppia di marcatori <HEAD>.
Si consiglia di inserire tra i marcatori un titolo che sia il più descrittivo possibile in modo da
facilitare il reperimento o l’identificazione dei propri documenti inseriti in Internet.
4.5
Il marcatore <BODY>
La coppia di marcatori <BODY> indica che tutte le informazioni contenute tra il marcatore di
apertura e il corrispondente marcatore di chiusura fanno parte del corpo principale del documento.
Racchiudono cioè tutto quanto verrà visualizzato dal browser.
Il marcatore di apertura <BODY> viene immesso immediatamente prima delle informazioni che si
desiderano inserire nel documento HTML. Tecnicamente, tutti gli altri marcatori che verranno
successivamente utilizzati saranno annidati nella coppia di marcatori <BODY>…</BODY>.
8
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio di struttura di un documento</TITLE>
</HEAD>
<BODY>
… tra questi due marcatori viene inserito tutto il materiale testuale
relativo al documento…
</BODY>
</HTML>
È possibile assegnare al marcatore <BODY> degli attributi per specificare il colore di sfondo del
documento, il colore di default del testo e dei collegamenti.
I colori vengono specificati da un numero RGB (Reed-Green-Blue, rosso-verde-blu), una sequenza,
preceduta dal carattere #, di tre numeri esadecimali di due cifre che definiscono la quantità di rosso,
di verde e di blu da utilizzare per la creazione di uno qualsiasi dei 16,7 milioni di colori disponibili.
La corretta miscelazione dei livelli RGB permette, cioè, di creare un qualsiasi colore.
Ad esempio, #FFFFFF rappresenta il bianco, #FF0000 il rosso pieno, #00FF00 il verde pieno,
#0000FF il blu pieno, #000000 il nero.
In alternativa, molti colori possono essere specificati in base al loro nome di colore standard.
L’attributo BGCOLOR=”#rrggbb” oppure BGCOLOR=”nome” applica un colore allo sfondo del
documento in base.
L’attributo TEXT applica un colore al testo normale del documento.
L’attributo LINK applica un colore ai collegamenti di un documento. LINK corrisponde al testo di
ancoraggio visibile nel documento. L’attributo ALINK assegna un colore al collegamento attivo
(Active Link). L’attributo VLINK definisce il colore dei collegamenti già visitati (Visited Link).
9
5
Marcatori fondamentali di HTML
In questa sezione si descriveranno i marcatori di HTML per la creazione dei vari livelli di titolo, dei
paragrafi e degli elenchi di voci e quelli per far risaltare alcune parti di un testo. L’effetto finale
dell’applicazione al testo di tali marcatori dipenderà dal tipo di browser e di computer utilizzato per
visualizzare il documento.
5.1
Creazione di titoli
HTML prevede sei diversi livelli da applicare ai titoli, contrassegnati dai marcatori che vanno da
<H1> a <H6>. Tutti i marcatori per i livelli di titolo devono essere utilizzati in coppia.
<H1> corrisponde al titolo di primo livello, cioè di carattere maggiore rispetto ai successivi, mentre
<H6> è il titolo di sesto livello, minimo possibile e con la più piccola dimensione di carattere
rispetto ai cinque livelli superiori.
A tutti i livelli di titolo viene applicato automaticamente il grassetto.
L’uso dei sei livelli di titolo si adatta alla maggior parte delle situazioni nelle quali è necessario
creare una struttura gerarchica di importanza dei paragrafi.
5.2
Marcatura dei paragrafi
Con HTML, servendosi della coppia di marcatori <P>…</P>, si ha la possibilità di suddividere le
informazioni in paragrafi.
È possibile stabilire l’allineamento a sinistra (default), al centro o a destra oppure la giustificazione
del paragrafo attraverso l’attributo ALIGN, che può assumere rispettivamente i valori LEFT,
CENTER, RIGHT e JUSTIFY.
Esempio:
<P ALIGN=”RIGHT”> ….. </P>
Dopo aver scritto un paragrafo di testo, potrebbe sorgere la necessità di far risaltare frasi o parole in
modo che queste emergano nel contesto del paragrafo al quale appartengono.
Per ottenere questo risultato, HTML mette a disposizione diversi marcatori. Se ne elencano di
seguito alcuni.
<EM> … </EM>
Enfatizzano il testo racchiuso solitamente applicandovi il corsivo
<STRONG> … </STRONG> Applicano al testo racchiuso un’enfasi maggiore, di solito il grassetto
<B> … </B>
Applicano al testo la formattazione del grassetto
<I> … </I>
Applicano al testo la formattazione del corsivo
<SUB> … </SUB>
Applicano al testo la formattazione di pedice
<SUP> … </SUP>
Applicano al testo la formattazione di apice
<U> … </U>
Applicano al testo la formattazione della sottolineatura.
Si ha anche la possibilità di applicare ad una porzione di paragrafo più di un marcatore, annidandoli.
10
5.3
Elenchi
Vi sono situazioni nelle quali, in un documento HTML, devono apparire informazioni organizzate
sotto forma di elenco in modo da facilitare la percezione delle varie informazioni suddivise per
punti.
Per creare un elenco è necessario innanzitutto inserire una coppia di marcatori che specifichino che
le informazioni racchiuse dovranno apparire sotto forma di elenco.
Si potrà definire un elenco ordinato, cioè un elenco di punti numerati sequenzialmente,
servendosi della coppia di marcatori <OL> … </OL>.
Si potrà definire un elenco non ordinato, cioè un elenco puntato, servendosi della coppia di
marcatori <UL> … </UL>.
Successivamente si farà precedere dal marcatore <LI> ogni voce dell’elenco.
Esempio:
<H2>Corsi Anno Formativo 2002/2003</H2>
<UL>
<LI>Analista Programmatore object oriented
<LI>Tecnico di Sistemi di Reti / Webmaster
<LI>Tecnico E-commerce
<LI> Tecnico di grafica multimediale / Web Designer
</UL>
Si ha la possibilità di aggiungere alle voci attributi di testo o informazioni aggiuntive sulle modalità
di rappresentazione. Ai marcatori <UL> e <OL> si può assegnare l’attributo TYPE che ne
determina la rappresentazione.
Nel caso degli elenchi non ordinati TYPE può assumere i valori “disc”, “circle” e “square”.
Nel caso degli elenchi ordinati TYPE può assumere i valori “1”, “a”, “A”, “i”, “I”. Il primo valore
si riferisce alla rappresentazione delle voci con numeri arabici (1, 2, 3, …), il secondo ed il terzo a
una rappresentazione alfabetica rispettivamente, minuscola e maiuscola (a, b, c, … A, B, C, …), gli
ultimi due ad una rappresentazione mediante la numerazione romana rispettivamente minuscola e
maiuscola (i, ii, iii, … I, II, III, …).
5.4
Altri marcatori
<DIV> … </DIV>
La coppia di marcatori è usata per impostare una divisione o sessione all’interno del documento.
Anche per questa coppia di marcatori è utilizzabile, come già per il marcatore <P>, l’attributo
ALIGN per allineare la divisione a sinistra, a destra o al centro.
La coppia di marcatori <CENTER> … </CENTER> è un’abbreviazione non standardizzata della
coppia di marcatori <DIV ALIGN=”CENTER”> … </DIV>.
<BLOCKQUOTE> … </BLOCKQUOTE>
La coppia di marcatori può essere usata per l’inserimento di citazioni. <BLOCKQUOTE> crea un
paragrafo uguale agli altri paragrafi di testo normale, con la sola differenza che tutte le righe
verranno fatte rientrare verso destra rispetto al margine sinistro.
<PRE> … </PRE>
11
La coppia di marcatori può essere usata per individuare un blocco di testo che deve essere
visualizzato con un carattere a spaziatura fissa. Con i marcatori <PRE> gli spazi e le righe
aggiuntive racchiusi sono significativi.
<DL> … </DL>
La coppia di marcatori può essere usata per creare un elenco di definizioni. All’interno della coppia
<DL> i marcatori singoli <DT> identificano l’inizio di ogni voce dell’elenco e i marcatori singoli
<DD> l’inizio di ogni definizione di voce.
<ADDRESS> … </ADDRESS>
La coppia di marcatori può essere usata per racchiudere le informazioni relative all’autore e al
documento.
<CODE> … </CODE>
La coppia di marcatori può essere utilizzata per contrassegnare un frammento di codice sorgente
che viene, di solito, riportato in carattere a spaziatura fissa.
<CITE> … </CITE>
La coppia di marcatori può essere usata per contrassegnare la citazione di un libro, di un articolo o
simili. Nella maggior parte dei browser il testo viene riportato in corsivo.
<BR>
Inserisce interruzioni di riga. Se si inserisce un marcatore di interruzione di riga e si vuole essere
sicuri che la nuova riga inizi sotto un elemento, ad esempio un’immagine, al marcatore dovrà essere
assegnato l’attributo CLEAR=”ALL”. Questa combinazione indica alla riga successiva di iniziare al
di sotto di qualsiasi altro oggetto eventualmente presente sulla riga stessa.
12
6
Collegamenti
Quando si creano documenti HTML, in effetti si realizza un documento che può essere sfogliato
passando da un argomento all’altro, ovvero saltando da una pagina all’altra o da un concetto
all’altro senza doverlo necessariamente leggere in sequenza.
I collegamenti (o ipercollegamenti o link) sono parti predefinite di un documento che si possono
selezionare per accedere ad altri argomenti, documenti o siti Web, cioè a raccolte di documenti
HTML.
La realizzazione di collegamenti ipertestuali si basa su àncore. “Ancora” (o ipercollegamento) è un
termine specialistico per indicare la parte di un collegamento ipertestuale che contrassegna
l’elemento sul quale si può fare clic col mouse per accedere ad altre parti dello stesso documento o
ad altri documenti. In HTML un’ancora è realizzata con la coppia di marcatori <A> … </A>.
I marcatori di ancoraggio vengono associati a uno dei due seguenti attributi:
HREF che consente all’utente di saltare da una porzione di informazione a un’altra. Questa
combinazione di marcatore e attributo crea quello che viene definito un ipercollegamento.
Esempio:
<A HREF=”http://cuochi.italiani.org/ricette/pasticcio.html”>Pasticcio di maccheroni</A>
Facendo clic sulle parole “Pasticcio di maccheroni”, il browser caricherà il documento che si
trova su un server web all’indirizzo “http://cuochi.italiani.org/ricette/pasticcio.html”.

6.1
NAME identifica, invece, una posizione all’interno di un documento. Tale posizione potrà fare
parte di un URL (un indirizzo nel Web), in modo che il lettore abbia la possibilità di accedervi
direttamente.
L’attributo NAME viene di solito utilizzato in documenti relativamente lunghi evitando di dover
far scorrere manualmente il contenuto del documento per raggiungere la posizione desiderata.
Collegamenti interni
Un collegamento interno punta a una posizione definita all’interno di un documento.
I collegamenti interni hanno senso soprattutto quando si sta creando un documento HTML molto
esteso e non si ha alcuna possibilità di suddividerlo in documenti separati. In queste situazioni si
potranno utilizzare i collegamenti interni in modo che puntino a una nuova posizione dello stesso
documento.
Per definire l’elemento al quale punta un marcatore di ancoraggio si utilizza l’attributo NAME.
Esempio:
<H2><A NAME=”maccheroni”>Pasticcio</a> di maccheroni</H2>
Questo tipo di ancoraggio non viene segnalato dal browser quando visualizzerà il documento.
Per creare all’interno del documento un collegamento diretto al paragrafo intitolato “Pasticcio di
maccheroni” si inserirà opportunamente un collegamento a #maccheroni come nell’esempio:
… una ricetta per un gustoso <A HREF=”#maccheroni”> pasticcio di maccheroni</A>.
Se il collegamento deve essere inserito in un documento diverso da quello contenente il paragrafo
intitolato “Pasticcio di maccheroni”, che, reso disponibile su di un server web, abbia per URL
l’indirizzo “http://cuochi.italiani.org/ricette/pasticci.html” si scriverà come segue:
13
… una ricetta per un gustoso <A HREF=”http://cuochi.italiani.org/ricette/pasticci.html#maccheroni”>
pasticcio di maccheroni</A>.
6.2
URL (Uniform Resource Locator)
Con il termine URL, acronimo di Uniform Resource Locator, si indica un indirizzo di Internet al
quale accedere per reperire le informazioni desiderate.
Gli URL si differenziano in base al loro tipo di specificità e si distinguono in URL assoluti (o
completi) e URL relativi (o parziali).
Se si sta creando un documento che si desidera pubblicare in Internet, si utilizzerà un URL assoluto
in modo che qualsiasi utente Internet possa sempre reperire la pagina.
Se, invece, si sta creando un documento che contiene collegamenti ad altri file contenuti nella stessa
cartella, si utilizzerà un URL relativo, in quanto il collegamento fa riferimento ad un file nella
cartella o directory corrente.
Tutti i documenti HTML possono usare gli URL per collegarsi ad altre informazioni, altri
documenti HTML, altri siti in Internet o anche a file grafici o sonori.
Gli URL riconoscono la differenza fra caratteri minuscoli e maiuscoli, e, pertanto, su alcuni
computer si possono ottenere a seconda della modalità di digitazione diversi risultati. Di
conseguenza, se si crea un nome di file nel quale appaiono sia caratteri minuscoli che maiuscoli,
quando si crea un collegamento a tale file all’interno di un documento, si dovrà utilizzare la
medesima sequenza di lettere maiuscole e minuscole.
Un URL è composto da un indicatore di protocollo, dal nome dell’host e dal nome della directory
e/o dal nome del file.
Esempio:
http://space.tin.it/scuola/snhcec/index.html
http://
corrisponde all’indicatore di protocollo e indica al server come
inviare le informazioni.
space.tin.it
corrisponde al nome dell’host e definisce un computer di Internet.
/scuola/snhcec/
corrispondono ad un percorso costituito dai relativi nomi di directory.
index.html
corrisponde al nome del file memorizzato nel computer host.
Si cerchi di evitare la creazione di nomi di directory o di file che contengano spazi o caratteri strani.
Poiché alcuni server hanno dei problemi a riconoscere i caratteri non comuni, o riconoscono la
differenza tra maiuscole e minuscole, per evitare inconvenienti ci si limiti all’uso delle lettere
(minuscole), ai numeri, agli underscore (_), ai punti (.) o ai segni più (+).
6.3
Collegamento ad altro materiale Internet
Nello stesso modo con cui è possibile stabilire un collegamento a documenti HTML, file grafici o
altri file indicando il corretto URL, si ha anche la possibilità di creare un collegamento ad altri tipi
di informazione presenti in Internet, come, ad esempio, gruppi di discussione o archivi di file.
Per farlo è necessario indicare il corretto protocollo di trasferimento. Per protocollo s’intende il
modello in base al quale due computer possono colloquiare.
14
Protocollo
URL
HTTP
FTP
Gopher
News (NNTP)
Mail
Telnet
File
http://
ftp://
gopher://
news:
mailto:
telnet://
file://
oppure file:///
wais://
Wais
15
7
Inserire immagini ed elementi multimediali nei documenti
In un documento HTML si avrà sempre la possibilità di inserire facilmente immagini, intendendo
per immagine un qualsiasi oggetto grafico: disegno, fotografia, grafico, ecc.
Le immagini che si intendono inserire in un documento HTML devono essere in formato GIF, JPG
o PNG. Sono tutti formati di tipo compresso che richiedono meno spazio su disco e un tempo di
download inferiore rispetto agli altri formati disponibili.
Le immagini GIF sono più adatte per oggetti grafici disegnati o per immagini con un numero di
colori relativamente limitato. Le immagini JPG sono più adatte per le riproduzioni fotografiche o
per le immagini con molti colori o tonalità di grigio. Il formato PNG, riconosciuto solo dai browser
più recenti, combina in sé i vantaggi offerti dai formati JPG e GIF.
L’inserimento di un’immagine in un documento HTML avviene utilizzando il marcatore <IMG>
associato all’attributo SRC, il cui scopo è quello di puntare a un URL contenente l’immagine.
Esempio:
<IMG SRC=”topolino.jpg”>
7.1
Attributi del marcatore <IMG>
SRC=”…”
ALT=”…”
BORDER=n
ALIGN=”bottom”
=”left”
=”middle”
=”right”
=”top”
HSPACE=n
VSPACE=n
HEIGHT=n
WIDTH=n
7.2
Definisce l’URL contenente l’immagine da inserire.
Definisce un testo alternativo da visualizzare se l’immagine non viene
visualizzata.
Controlla lo spessore del filetto di contorno espresso in pixel, che viene
applicato alla struttura di contenimento dell’immagine.
Allinea il lato inferiore dell’immagine alla linea di base della riga
corrente.
Consente di posizionare l’immagine lungo il margine sinistro ma di
spostarla verso l’alto o verso il basso nell’area disponibile; il testo che
affianca l’immagine sarà quindi fatto scorrere lungo il lato destro della
struttura di contenimento dell’immagine.
Allinea la linea di base del testo alla metà verticale della struttura che
contiene l’immagine.
Allinea l’immagine al margine destro della pagina con la possibilità di
spostarla verso l’alto o verso il basso nell’area di ingombro disponibile. Il
testo viene fatto scorrere alla sinistra dell’immagine.
Allinea la parte superiore del testo al lato superiore dell’immagine.
Controlla lo spazio orizzontale inserendo uno spazio bianco posto ai
fianchi dell’immagine. Il valore n è espresso in pixel.
Controlla lo spazio verticale inserendo uno spazio bianco posto sopra e
sotto l’immagine. Il valore n è espresso in pixel.
Definisce l’altezza dell’immagine. Il valore n è espresso in pixel.
Definisce la larghezza dell’immagine. Il valore n è espresso in pixel.
Inserire suoni e filmati
Per inserire filmati o spezzoni sonori all’interno di un documento basta creare un collegamento
ipertestuale con un file scaricabile da un server. Bisogna prestare attenzione alle dimensioni del file:
un file audio o video può richiedere tempi di download eccessivi.
Internet Explorer ha introdotto alcune innovazioni al mondo dei multimedia online. Si tratta di
alcuni comandi che permettono di inserire direttamente nel documento filmati AVI online, suoni di
sottofondo e scritte scorrevoli.
16
Per inserire un file AVI direttamente nella pagina si ricorre all’attributo DYNSRC del marcatore
<IMG> come nel seguente esempio:
<IMG DYNSRC=”tango.avi” SRC=”tango.jpg” ALT=”Tango argentino”>
Il risultato dell’esempio sarebbe la riproduzione di un video AVI con Internet Explorer, di una foto
con Netscape, della scritta “Tango argentino” con Lynx.
Per inserire un suono di sottofondo ad un documento da visualizzare con Internet Explorer si ricorre
al comando <BGSOUND> e al suo attributo LOOP.
Esempio:
<BGSOUND SRC=”squillo.wav” LOOP=5>
L’attributo LOOP indica quante volte il suono deve essere ripetuto. Per far ripetere il suono fino a
che non si abbandoni il documento, bisogna assegnare a LOOP il valore INFINITE oppure –1.
È possibile inserire delle scritte scorrevoli in un documento da visualizzare con Internet Explorer
utilizzando il comando <MARQUEE>, che può essere associato al marcatore <Hn> per creare
scritte di dimensioni superiori.
Esempio:
<H3><MARQUEE>Questa è una scritta scorrevole</MARQUEE></H3>
Il marcatore <MARQUEE> dispone di una serie di attributi che consentono di definire l’aspetto, il
comportamento, la direzione, la velocità e il numero di ripetizioni della scritta.
BGCOLOR definisce il colore di sfondo su cui si muove la scritta. Il suo valore può essere
espresso in codifica esadecimale o attraverso un nome di colore.
HEIGHT e WIDTH indicano l’altezza e la larghezza dello sfondo su cui si muove la scritta.
Possono avere sia un valore espresso in pixel, sia in percentuale rispetto alla larghezza dello
schermo.
HSPACE e VSPACE definiscono lo spazio libero tra i lati dello sfondo in cui scorre la scritta e il
testo che le sta attorno. HSPACE definisce lo spazio ai lati e VSPACE quello sopra e sotto.
ALIGN e i suoi tre valori TOP, MIDDLE e BOTTOM allineano il testo vicino allo sfondo di
scorrimento della scritta rispettivamente in alto, lungo la linea mediana e in basso. Il testo della
scritta scorrevole sarà invece sempre allineato in alto rispetto lo sfondo.
BEHAVIOR determina il comportamento della scritta sullo schermo. Se gli si assegna il valore
SCROLL la scritta apparirà sul lato destro, scorrerà verso sinistra, sparirà completamente per poi
riapparire sul lato destro. Se il valore è SLIDE, la scritta si fermerà non appena la prima lettera
tocca il lato sinistro dello schermo, per sparire e riapparire a destra. Il valore ALTERNATE non fa
mai sparire la scritta dallo schermo, facendola rimbalzare da destra a sinistra e viceversa.
DIRECTION è un attributo che si applica solo a BEHAVIOR=SCROLL, che è il valore di default,
e può avere come valori LEFT e RIGHT che indicano la direzione del movimento.
LOOP determina il numero di ripetizioni degli scorrimenti. LOOP=INFINITE o LOOP=”-1” fa
scorrere la scritta all’infinito.
SCROLLAMOUNT e SCROLLDELAY determinano la velocità di scorrimento della scritta sullo
schermo. SCROLLAMOUNT indica il numero di pixel che si spostano alla volta; un valore elevato
17
fa scorrere velocemente la scritta. SCROLLDELAY indica il numero di millisecondi tra uno scatto
e l’altro della scritta; valori elevati determinano un movimento più lento e con scatti più visibili.
18
8
Immagini cliccabili
Le immagini cliccabili (o image map o mappe cliccabili) consentono di fare clic sull’immagine, o
parte di essa, per attivare un collegamento a un’altra pagina o a un’altra immagine.
Le immagini cliccabili sono un elemento ottimale per creare menu contestuali, ovvero consentire di
fare clic su varie parti della medesima immagine per attivare collegamenti a documenti o oggetti
diversi.
I controlli inseriti in un’immagine cliccabile vengono eseguiti dal software del browser, nel caso
essa sia un’immagine cliccabile client-side; ovvero dal software del server nel caso di un’immagine
cliccabile server-side. In entrambi i casi la procedura di inserimento di una mappa cliccabile in un
codice sorgente HTML è molto simile.
Per inserire una mappa cliccabile in un documento si procede come segue:
1. Si inserisce l’immagine nel codice sorgente HTML.
2. Si definiscono le aree cliccabili dell’immagine (mappatura).
3. Si definisce la mappa, ovvero si specificano a quali aree dell’immagine cliccabile
dovranno essere collegate le informazioni.
La differenza più importante fra le immagini cliccabili client-side e server-side sta nel fatto che le
seconde richiedono l’assistenza dell’amministratore di rete.
8.1
Mappe cliccabili di tipo client-side
Per indicare che un’immagine è una mappa cliccabile si aggiungerà al marcatore <IMG> che
inserisce l’immagine nel documento HTML l’attributo ISMAP, se la mappa è di tipo server-side,
oppure l’attributo USEMAP=”#nomemappa” se è di tipo client-side.
Per definire le aree cliccabili sarà necessario suddividere l’immagine in sezioni alle quali associare
i collegamenti alle informazioni che si desidera vengano richiamate.
Nella mappatura di un’immagine tutti i punti e le coordinate relative vengono misurati in pixel a
partire dall’angolo superiore sinistro dell’immagine intera., servendosi di coordinate di tipo x, y. Il
punto con coordinate “0,0” corrisponde all’angolo superiore sinistro dell’immagine.
Nella mappatura, le forme rettangolari richiedono l’indicazione delle coordinate dell’angolo
superiore sinistro e di quello inferiore destro; le forme circolari richiedono la definizione delle
coordinate del centro e la misura del raggio; le forme poligonali richiedono solo l’identificazione
delle coordinate di ciascun angolo. Qualsiasi altra forma potrà essere rappresentata servendosi di
una combinazione di rettangolo, cerchio, poligono.
La definizione delle componenti di una mappa cliccabile è fatta utilizzando la coppia di marcatori
<MAP NAME=”…”> … </MAP> e marcatori <AREA> per definire le singole aree.
L’attributo NAME di <MAP> assegna un nome al marcatore <MAP>.
Gli attributi del marcatore <AREA> sono i seguenti:
COORDS=”x1,y1,x2,y2,…” specifica le coordinate che definiscono l’area dell’immagine cliccabile.
HREF=”url” specifica la destinazione del collegamento dell’area della mappa cliccabile.
19
NOHREF indica che quando si fa clic sull’area non si otterrà alcun risultato.
SHAPE=”…” specifica il tipo di forma dell’area dell’immagine cliccabile, RECT per il rettangolo,
CIRCLE per il cerchio e POLYGON per il poligono.
Esempio:
<MAP NAME=”demomap”>
<AREA SHAPE=”RECT” COORDS=”169,92,297,220” HREF=”quadrato.html”>
<AREA SHAPE=”CIRCLE” COORD=”71,158,66” HREF=”cerchio.html”>
<AREA SHAPE=”POLYGON” COORDS=”396,92,463,222,334,222” HREF=”poligono.html”>
</MAP>
20
9
Creazione di tabelle
Il marcatore <TABLE>…</TABLE> permette di costruire una tabella le cui celle ordinate in righe e
colonne possono contenere un qualsiasi costrutto HTML.
Il marcatore <TABLE> consente diversi attributi. Ad esempio:
SUMMARY=”testo” permette di fornire una breve descrizione dello scopo e della struttura della
tabella a vantaggio di chi usa browser non visuali.
TITLE=”testo” farà visualizzare da parte del browser un piccolo riquadro (tool tip) che compare
sulla tabella quando si posiziona il mouse su di essa.
WIDTH=length definisce la larghezza dell’intera tabella e può essere espressa in pixel o in
percentuale rispetto alla larghezza della finestra di visualizzazione del browser. Se tale attributo non
è definito, la larghezza della tabella è determinata dal browser stesso.
BGCOLOR=”#rrggbb” definisce il colore di sfondo tramite il codice RGB.
Ogni costrutto <TABLE> può contenere un marcatore <CAPTION> … </CAPTION> che racchiude
in sé il titolo della tabella, e che comparirà al di sopra di questa nella visualizzazione del browser. Il
marcatore <CAPTION> può essere indicato solo immediatamente dopo il marcatore di apertura
<TABLE> della tabella e deve essere l’unico per quella tabella.
I marcatori <TR> definiscono le righe, mentre i marcatori <TD> definiscono le celle della tabella.
Esempio:
<TABLE>
<CAPTION>Titolo della tabella</CAPTION>
<TR><TD>Prima cella della prima riga</TD><TD>Seconda cella della prima riga</TD>….</TR>
<TR><TD>Prima cella della seconda riga</TD><TD>Seconda cella della seconda riga</TD>….</TR>
….
</TABLE>
9.1
Le sezioni di una tabella
Le righe di una tabella, definite ciascuna dal marcatore <TR>, possono essere raggruppate in più
sezioni.
Tramite i marcatori <THEAD>, <TFOOT> e <TBODY> è possibile infatti definire rispettivamente
una intestazione che verrà visualizzata nelle prime righe della tabella, una chiusura visualizzata
nelle ultime righe ed una o più sezioni centrali che conterranno i dati.
Queste suddivisioni permettono al browser di gestire lo scrolling del corpo della tabella
indipendentemente dall’intestazione e dalle note di chiusura, in modo tale che se la tabella è più
lunga di una schermata, intestazione e note di chiusura siano comunque visualizzate. Inoltre,
stampando la tabella, intestazione e note di chiusura vengono ripetute in ciascuna pagina di stampa,
permettendo una più facile lettura ed interpretazione dei dati.
21
9.2
Gruppi di colonne
I marcatori <COLGROUP> e <COL> offrono la possibilità di creare delle suddivisioni verticali
entro la struttura della tabella utili all’applicazione di diversi layout di formattazione tramite gli
style sheets od i consueti parametri HTML.
Una tabella può contenere un solo implicito gruppo di colonne o più gruppi definiti ciascuno da un
marcatore <COLGROUP>.
L’attributo SPAN=numero del marcatore <COLGROUP> definisce il numero (>0) di colonne del
gruppo. Se viene omesso, il gruppo sarà formato da una colonna sola.
In alternativa, il numero di colonne compreso in un gruppo può essere indicato dal ripetersi del
marcatore <COL>.
L’attributo WIDTH=multi-length permette di specificare l’ampiezza di ciascuna colonna del
gruppo. Il valore può essere specificato in pixel, in percentuale o come valore relativo
dell’ampiezza delle colonne l’una rispetto alle altre.
L’attributo WIDTH ammette il valore “0”, in questo caso il browser adatta la larghezza della
colonna alla più ampia stringa o immagine contenuta in una qualsiasi delle sue celle.
Esempio. I seguenti due costrutti creano entrambi una tabella con le stesse caratteristiche:
<COLGROUP SPAN=3 WIDTH=50>
</COLGROUP>
<COLGROUP>
<COL WIDTH=50>
<COL WIDTH=50>
<COL WIDTH=50>
</COLGROUP>
Se le caratteristiche delle colonne sono costanti per tutto il gruppo, è vantaggioso utilizzare il primo
costrutto; mentre se occorre specificare singolarmente l’ampiezza di una o più colonne, occorre
utilizzare il marcatore <COL>.
9.3
I marcatori <TR>, <TH> e <TD>
Ogni marcatore <TR> permette, definendo la singola riga, di espletare tutte le funzioni costruttive
della tabella stessa.
Ogni <TR> può essere seguito da uno o più <TH> e da uno o più <TD> che definiscono le celle
(ovvero le colonne) della riga.
Un marcatore <TH> definisce un header, una intestazione di colonna o riga. Il testo che segue il
marcatore viene automaticamente formattato in modo da essere evidenziato rispetto alle altre celle
della stessa tabella.
Ogni marcatore <TD> indica il contenuto della cella corrispondente.
L’attributo ROWSPAN dei marcatori <TH> e <TD> indica il numero di righe occupate dalla cella.
Il valore di default è 1, mentre il valore 0 indica che la cella occupa tutte le righe dalla corrente
all’ultima della tabella.
22
L’attributo COLSPAN dei marcatori <TH> e <TD> indica il numero di colonne occupate dalla
cella. Il valore di default è 1, mentre il valore 0 indica che la cella occupa tutte le colonne dalla
corrente all’ultima della tabella.
9.4
Formattazione di una tabella
L’attributo BORDER del marcatore <TABLE> definisce un bordo dello spessore indicato in pixel,
che viene applicato a tutta la tabella, cioè a tutte le celle.
L’attributo FRAME specifica quale lato della cornice che circonda ogni cella debba essere visibile.
La sintassi di FRAME è:
FRAME=VOID | ABOVE | BELOW | HSIDES | LHS | RHS | VSIDES | BOX | BORDER
VOID (nullo) è il valore di default e corrisponde a nessun bordo esterno.
ABOVE applica il bordo al margine superiore delle celle.
BELOW applica il bordo al margine inferiore delle celle.
HSIDES applica il bordo ai margini superiore ed inferiore delle celle.
VSIDES applica il bordo ai margini destro e sinistro delle celle.
LHS applica il bordo solo al margine sinistro.
RHS applica il bordo solo al margine destro.
BOX applica il bordo ai quattro margini.
BORDER applica il bordo ai quattro margini.
L’attributo RULES definisce invece quali linee di separazione devono apparire tra le celle di una
tabella. L’effetto è dipendente dal browser utilizzato. La sintassi è la seguente:
RULES=NONE | GROUPS | ROWS | COLS | ALL
NONE: nessuna linea (è il valore di default).
GROUPS: le linee appaiono solo tra i gruppi di righe e tra i gruppi di colonne.
ROWS: le linee appaiono solo tra le righe.
COLS: le linee appaiono solo tra le colonne.
ALL: le linee appaiono sia tra le righe che tra le colonne.
9.5
Allineamento entro le celle
L’allineamento del testo e degli altri oggetti che possono essere inseriti entro le celle delle tabelle, è
definito dal valore degli attributi ALIGN e VALIGN, che possono essere associati a diversi costrutti
delle tabelle.
Il parametro ALIGN specifica l’allineamento dei dati e la possibile giustificazione del testo rispetto
ai bordi delle celle. La sintassi è:
ALIGN=LEFT | CENTER | RIGHT | JUSTIFY | CHAR
LEFT determina l’allineamento a sinistra del testo.
CENTER determina l’allineamento centrato del testo.
RIGHT determina l’allineamento a destra del testo.
JUSTIFY determina la giustificazione del testo (allineamento contemporaneo a destra e a sinistra).
CHAR determina l’allineamento del testo rispetto ad un determinato carattere definito con
l’attributo CHAR.
Il parametro VALIGN definisce la posizione verticale dei dati entro una cella. La sintassi è:
VALIGN=TOP | MIDDLE | BOTTOM | BASELINE
23
TOP allinea il contenuto delle celle al margine superiore.
MIDDLE centra verticalmente il contenuto delle celle.
BOTTOM allinea il contenuto delle celle al margine inferiore.
BASELINE è usato per garantire che la prima riga di testo di ogni cella della stessa riga sia sulla
stessa linea base.
Il parametro CHAR=character specifica il carattere che si vuole utilizzare per definire
l’allineamento tramite ALIGN=CHAR.
9.6
I margini delle celle
L’attributo CELLSPACING del marcatore <TABLE> specifica lo spazio che il browser deve
lasciare tra i margini della tabella e le celle più esterne e tra le celle stesse. La sintassi è
CELLSPACING=length dove length viene espresso in pixel.
L’attributo CELLPADDING=length indica invece lo spazio che si vuole rimanga libero tra il
margine delle celle ed il loro contenuto, e può essere espresso sia in pixel che come valore
percentuale.
24
10 Creazione di moduli
Per HTML, un modulo è esattamente ciò che si intende, ovvero un sistema relativamente
impersonale per ottenere informazioni standardizzate.
Un modulo è generato dalla coppia di marcatori <FORM> … </FORM>, usati per racchiudere
l’intero frammento di codice relativo al modulo.
Per il marcatore <FORM> sono possibili i seguenti attributi:
ACTION=”…” definisce cosa accadrà ai dati dopo che questi sono stati immessi e confermati.
ENCTYPE=”…” specifica il tipo di codifica MIME per i dati del modulo.
METHOD=”…” identifica i metodi; le opzioni valide sono GET e POST.
Dopo aver inserito nel codice sorgente la coppia di marcatori <FORM> … </FORM>, si potranno
inserire fra di essi dei marcatori <INPUT> che creano i campi nei quali verranno immesse le
informazioni richieste.
Attributi di <INPUT> sono:
CHECKED che visualizza quale voce viene attivata per default tramite una casella o un pulsante di
opzione.
MAXLENGTH=n che indica il numero massimo di caratteri che il campo potrà contenere.
NAME=”…” che assegna un nome al campo.
SIZE=n che definisce la dimensione del campo in base al valore di n espresso in caratteri.
TYPE=”…” che indica il tipo di campo. I valori validi sono: TEXT, PASSWORD, CHECKBOX,
RADIO, BUTTON, SUBMIT, RESET, FILE, IMAGE e HIDDEN.
VALUE=”…” che indica il valore del campo o l’etichetta da visualizzare per BUTTON, SUBMIT e
RESET.
Si ricordi che per collegare tra di loro più pulsanti di opzione (RADIO) in modo che sia possibile
selezionarne uno soltanto, tali pulsanti devono avere lo stesso attributo NAME.
10.1 Elenchi di voci
Gli elenchi di voci sono elementi che contengono diverse voci tra le quali effettuare una selezione.
Un elenco di voci è definito dai marcatori <SELECT>…</SELECT>.
I possibili attributi sono:
MULTIPLE che indica un elenco dal quale è possibile effettuare contemporaneamente più di una
selezione.
NAME=”…” che assegna un nome al campo.
25
SIZE=n che determina l’ampiezza dell’elenco che verrà visualizzato. Il valore n corrisponde al
numero delle voci dell’elenco quando verrà aperto.
I marcatori <OPTION> definiscono le voci che appariranno nell’elenco.
Suoi attributi sono:
SELECTED che identifica quale opzione risulterà selezionata per default.
VALUE=”…” che indica il valore del campo.
10.2 Il marcatore <TEXTAREA>
Le aree di testo, definite dalle coppie di marcatori <TEXTAREA>…</TEXTAREA>, consentono
di creare in un modulo una sezione nella quale il lettore potrà inserire i propri commenti o altri tipi
di informazioni.
Attributi di <TEXTAREA> sono:
COLS=n che definisce la larghezza del campo testo. Il valore n corrisponde al numero di colonne.
NAME=”…” che indica il nome del campo.
ROWS=n che indica il numero massimo di righe di testo ammesse nel campo.
26
11 Suddivisione in aree indipendenti (frames)
Le frame (o aree indipendenti) consentono di suddividere la pagina in vari pannelli, ognuno dei
quali contiene un proprio documento HTML e permette, così di visualizzare in una sola volta più
documenti.
La creazione di una pagina suddivisa in pannelli autonomi richiede un’attenta pianificazione. Si
deve decidere la posizione delle frame e assegnare a queste un nome identificativo; poi è necessario
definire quali e quanti elementi dovranno essere inseriti nelle frame e quale pannello sarà destinato
a contenere il corpo principale della pagina. Un’attenta pianificazione di queste procedure iniziali
aiuterà sensibilmente la fase di sviluppo del contenuto della pagina e la creazione dei collegamenti
fra le varie frame.
Dopo aver creato e sviluppato il contenuto dei vari documenti HTML relativi alle frame, si può
creare il documento finale suddiviso in frame. Questo tipo di documento (documento strutturato)
indica al browser quali frame sono disponibili e dove dovranno essere visualizzate segnalando
inoltre gli elementi da visualizzare nelle finestre dei browser che non gestiscono le frame.
Il documento strutturato non deve contenere i marcatori <!DOCTYPE> e <BODY>.
La coppia di marcatori <FRAMESET>…</FRAMESET> definisce un documento suddiviso in
frame. La coppia di marcatori <NOFRAMES>…</NOFRAMES> definisce l’area del documento che
sarà visibile ai browser che non sono in grado di visualizzare le frame.
Attributi di <FRAMESET> sono i seguenti:
BORDER=n che definisce lo spessore del bordo espresso in pixel di tutte le frame.
BORDERCOLOR=”#rrggbb” o BORDERCOLOR=”nome_colore” che definisce il colore del
bordo delle frame.
COLS=”n, n, …” che definisce la dimensione delle colonne espressa in pixel, percentuale o parte
rimanente (“*”).
FRAMEBORDER=n che specifica la presenza (“1”) o meno (“0”) del bordo delle frame.
FRAMESPACING=n che definisce lo spazio bianco da lasciare fra le frame espresso in pixel.
ROWS=”n, n, …” che definisce la dimensione delle righe espressa in pixel, in percentuale o in
termini di spazio rimanente.
11.1 Impostazione delle frame
La costruzione delle frame avviene inserendo marcatori <FRAME> all’interno della coppia
<FRAMESET>.
Attributi di <FRAME> sono:
BORDER=n che specifica lo spessore del bordo della frame espresso in pixel.
FRAMEBORDER=n che definisce la presenza (n=1) o meno (n=0) del bordo della frame.
27
NAME=”…” che assegna un nome alla frame.
NORESIZE che impedisce il ridimensionamento della frame.
SCROLLING=”…” che definisce se il contenuto della frame potrà o meno scorrere. I valori
ammissibili sono YES, NO e AUTO. L’uso del valore YES richiede la visualizzazione di barre di
scorrimento mentre il valore NO non consente lo scorrimento del contenuto della frame.
SCR=”url” che identifica il file sorgente che dovrà essere visualizzato nella frame.
11.2 Impostazione dei collegamenti
Ogni collegamento di una pagina Web suddivisa in frame deve prevedere la presenza dell’attributo
complementare TARGET=”…” del marcatore <A>, che punta alla frame di destinazione del
collegamento.
Esempio:
<A HREF=”viaggio.html” TARGET=”contenuto”>Diario di bordo</A>
Con l’attributo TARGET si possono utilizzare alcuni nomi riservati che identificano particolari
finestre.
_top è un nome di destinazione che attiva nella stessa finestra del browser un ambiente senza
gestione delle frame.
_window fa sì che il collegamento apra una nuova finestra.
Oltre ad essere utilizzato come attributo del marcatore <A>, TARGET viene riconosciuto da
qualsiasi altro tipo di collegamento come quelli di un’immagine cliccabile o in un modulo.
28
12 Marcatori applet e incorporamento di oggetti
Il trattamento di formati di dati non supportati in maniera nativa dai browser, generalmente avviene
tramite l’avvio di programmi esterni. La coppia di marcatori <OBJECT>…</OBIECT> consente
all’autore di specificare se i dati debbano essere trattati tramite applicazioni esterne oppure da altri
programmi specifici per la visualizzazione all’interno dello stesso browser.
I tipi di informazioni che devono essere specificate si possono raggruppare in tre categorie: la prima
contiene le informazioni sull’implementazione dell’oggetto incorporato, la seconda i dati da
visualizzare, la terza tutti i valori richiesti dall’oggetto durante il suo processo.
Gli attributi del marcatore <OBJECT> sono:
CLASSID=”url” usato per specificare l’indirizzo dove è memorizzata l’implementazione di un
oggetto.
CODEBASE=”url” definisce il percorso di riferimento da utilizzare per costruire gli indirizzi
relativi specificati dagli attributi CLASSID, DATA e ARCHIVE.
CODETYPE=”…” specifica la tipologia dei dati ottenuti all’atto dello scaricamento dell’oggetto
specificato dall’attributo CLASSID.
DATA=”url” usato per definire l’indirizzo dove sono memorizzati i dati dell’oggetto.
TYPE=”…” specifica il tipo del contenuto per i dati indicati dall’attributo DATA.
ARCHIVE=”url list” consente di indicare una lista, separata da spazi di URL di archivi contenenti
risorse di interesse per l’oggetto che si sta elaborando. Il caricamento preventivo di interi archivi
permette di ridurre i tempi di realizzazione di un oggetto nel momento in cui questo verrà reso dallo
user agent.
DECLARE quando presente, dichiara l’oggetto senza attivarlo.
STANDBY=”…” permette di inserire un messaggio che il browser può visualizzare durante il
tempo che impiega a visualizzare l’oggetto in fase di elaborazione.
Esempio.
<OBJECT CLASSID=http://www.ora.it/calendar>
Calendario del mese corrente
</OBJECT>
Il testo inserito all’interno della coppia di marcatori viene visualizzato nel caso il browser non sia in
grado di processare l’oggetto indicato e renderlo a video.
<OBJECT DATA=”calendar.gif” TYPE=”image/gif”>
</OBJECT>
</OBJECT>
L’esempio mostra come nel caso in cui il browser non possa realizzare l’oggetto, si possa avvertirlo
di visualizzare in cambio un’immagine, e qualora anche questo non sia possibile il testo.
29
12.1 Il marcatore <PARAM>
Attraverso il marcatore <PARAM> è possibile specificare l’insieme di valori richiesti da un oggetto
durante la sua fase di elaborazione. Suoi attributi sono:
NAME=”…” che definisce il nome di un parametro conosciuto dall’oggetto e necessario durante la
sua fase di elaborazione.
VALUE=”…” che specifica il valore del parametro indicato dall’attributo NAME.
VALUETYPE=”DATA | REF | OBJECT” che indica il tipo dell’attributo VALUE.
DATA è il valore di default e implica che il valore specificato da VALUE sia valutato e passato
all’oggetto come tipo stringa.
REF indica che quanto specificato da VALUE è una risorsa remota definita da un URL, dove sono
memorizzate le informazioni necessarie all’oggetto.
OBJECT implica che il valore specificato da VALUE sia un identificatore che si riferisce ad un
oggetto altrove definito all’interno dello stesso documento.
TYPE=”…” che specifica il tipo del contenuto della risorsa designata dall’attributo VALUE nel
caso in cui VALUETYPE sia REF.
Esempio.
<PARAM NAME=”height” VALUE=”100” VALUETYPE=”DATA”>
<PARAM NAME=”width” VALUE=”100” VALUETYPE=”DATA”>
<PARAM NAME=”month” VALUE=”3” VALUETYPE=”DATA”>
<OBJECT DATA=”calendar.gif” TYPE=”image/gif”>
</OBJECT>
</OBJECT>
12.2 La coppia di marcatori <APPLET>…</APPLET>
La coppia di marcatori <APPLET>…</APPLET>, usata per gestire l’inclusione all’interno di un
documento HTML di programmi JAVA è stato dichiarato superato dalle specifiche HTML 4 a
favore dei marcatori <OBJECT>…</OBJECT>.
<APPLET> permette la definizione di tutta una serie di attributi, tra cui:
CODEBASE=”url” che specifica l’indirizzo Internet di base sotto cui si possono trovare tutti gli
elementi dell’applet da includere. In sua assenza il default è lo stesso indirizzo da cui viene caricata
la pagina HTML.
CODE=”…” che specifica il nome del file .class contenente il codice compilato.
NAME=”…” che indica il nome per l’applet in esecuzione, in modo da consentire l’interazione tra
gli applet presenti in una stessa pagina.
ARCHIVE=”…” che specifica una lista di URL di classi JAVA (separati da virgole) da scaricare
preventivamente.
OBJECT=”…” che indica una risorsa contenente una rappresentazione sequenziale dello stato di un
applet.
30
WIDTH=n che specifica l’iniziale larghezza dell’area di visualizzazione dell’applet, con esclusione
delle eventuali finestre che l’applet stessa può creare.
HEIGHT=n che, analogamente al precedente, definisce l’altezza dell’area di visualizzazione.
31
13 Fogli di stile
L’HTML soffre di notevoli limitazioni riguardo alla presentazione dei dati in un formato gradevole
ed allo stesso tempo efficace. Nell’ambito scientifico in cui il Web ha visto la prima espansione, gli
autori erano maggiormente tesi alla validità del contenuto, piuttosto che all’aspetto delle loro
pagine.
Con l’esplosione del Web, le limitazioni stilistiche dell’HTML hanno portato ad un uso non
ottimale dello stesso linguaggio. Per sopperire alla carenza di strutture di formattazione sono nate
espansioni dello stesso linguaggio create ad hoc per un determinato browser. Gli autori sono stati
costretti ad un uso eccessivo delle immagini per sopperire a carenze stilistiche della formattazione
del testo e, per il controllo delle parti volutamente bianche di una pagina, a sfruttare pesantemente le
tabelle per definire il layout di una pagina, o ancora ad utilizzare programmi piuttosto che l’HTML.
Gli style sheets (fogli di stile) risolvono in parte i problemi ed offrono maggiori possibilità per
quanto riguarda la presentazione di una pagina. Utilizzando gli style sheets diventa infatti facile
controllare lo spazio tra le righe di testo, l’allineamento dei paragrafi, i colori del testo e dello
sfondo, la dimensione e lo stile delle fonti e molti altri importanti dettagli.
Le informazioni di stile possono essere indicate per specifici elementi o per gruppi di elementi, sia
all’interno del documento HTML che le vedrà applicate, sia in uno style sheet separato dal
documento. La modalità con cui avviene l’associazione tra uno style sheet ed un documento è
indipendente dal linguaggio utilizzato per la stesura dello style sheet stesso.
13.1 Posizionamento variabile delle informazioni di stile
È possibile posizionare gli style sheets in file separati dai documenti che li utilizzano, per consentire
una loro condivisione tra più documenti.
Può però talvolta essere utile includere le informazioni di stile entro il documento a cui verranno
applicate, sia raggruppandole all’inizio del documento, sia definendole come attributi degli elementi
nidificati entro il corpo del documento.
13.2 Indipendenza da uno specifico linguaggio
È possibile utilizzare diversi linguaggi per la definizione delle istruzioni degli style sheets.
13.3 Uso contemporaneo di più style sheets per uno stesso documento (cascading)
Alcuni linguaggi per la stesura degli style sheets, come ad esempio CSSL (Cascading Style Sheets
Language), permettono l’unione di informazioni stilistiche provenienti da diverse sorgenti. Le
informazioni così ottenute vengono considerate in base all’ordine sequenziale in cui avviene
l’unione.
13.4 Dipendenza dal media utilizzato per la visualizzazione
La visualizzazione di un documento redatto con l’HTML 4 può avvenire con media differenti:
visual browser, sintetizzatori vocali per utenti non vedenti… Nei singoli marcatori, infatti, possono
essere usati particolari parametri ed accorgimenti utili a rendere un documento comunque adatto
alla visualizzazione in senso lato ed alla stampa.
Lo stesso invece non avviene per gli style sheets, adatti di volta in volta a specifici media.
È quindi utile in ogni style sheet indicare la categoria di media con cui è compatibile. Browser che
usano media non adatti evitano così l’uso del foglio stesso. Una soluzione a questa limitazione è
32
l’utilizzo di style sheets alternativi adatti a specifici media, la cui disponibilità dovrebbe essere
evidenziata dal browser e di cui dovrebbe esser resa possibile la selezione.
13.5 Performances
L’utilizzo di style sheets per la formattazione di un documento può determinare un rallentamento
nella visualizzazione del documento stesso, soprattutto quando lo style sheet è esterno o le regole
di stile sono elencate nell’intestazione di pagina.
Per ovviare a questo inconveniente è stato reso possibile inserire le regole di stile entro i vari
marcatori sparsi nel documento con l’attributo STYLE. Tuttavia questa scelta porta altri svantaggi
come ad esempio la perdita dei vantaggi della condivisione tra diversi documenti.
13.6 Default style sheets language
Le regole di stile possono essere redatte utilizzando diversi linguaggi. Il linguaggio maggiormente
utilizzato è il CSSL, Cascading Style Sheets Language, o semplicemente CSS, disponibile in
diverse versioni. Qui si prenderà in considerazione la prima o CSS1.
È possibile dichiarare il linguaggio utilizzato per gli style sheets tramite il marcatore <META>
nell’intestazione del documento.
Esempio.
<META HTTP-EQUIV=”Content-Style-Type” CONTENT=”text/css”>
Se la dichiarazione viene omessa, il linguaggio di default è comunque il CSS.
13.7 Style sheets interni
Le regole di stile in un documento, siano esse elencate entro l’intestazione, oppure definite di volta
in volta per i singoli marcatori, devono rispettare il linguaggio indicato come default, e ne devono
quindi seguire la sintassi.
Le indicazioni di stile del linguaggio CSS hanno la forma: “name: value” e sono separate le une
dalle altre da “;”.
Il marcatore <STYLE> è utile per dichiarare le informazioni di stile entro l’intestazione di un
documento. Suoi attributi sono:
TYPE=”…” che specifica il linguaggio di style sheets, che così specificato sostituisce
eventualmente quello dichiarato come default.
MEDIA=”…” che indica il medium di destinazione del documento nell’intenzioni dell’autore. Se il
parametro MEDIA viene omesso, il valore assegnato di default è screen.
Un unico marcatore <STYLE> può contenere più regole di stile, e più marcatori <STYLE> possono
susseguirsi entro l’intestazione del documento.
Esempio.
<HEAD>
<STYLE TYPE=”text/css”>
H1 {border-width: 1; border: solid; border-color: red; text-align: center}
</STYLE>
</HEAD>
33
I browser che non riconoscono gli style sheets possono o non considerare il contenuto della coppia
di marcatori <STYLE> o visualizzarlo come testo. Alcuni linguaggi di style sheets, come il CSS,
usano una particolare sintassi per nascondere il contenuto ai browser che non lo supportano.
Esempio.
<HEAD>
<!-H1 {border-width: 1; border: solid; border-color: red; text-align: center}
-->
</STYLE>
</HEAD>
All’interno di una coppia di marcatori <STYLE> possono essere dichiarate le regole di stile per
tutte le ricorrenze di uno specifico elemento, oppure per tutte le ricorrenze di un elemento
appartenente ad una specifica classe (attributo CLASS) o ancora per un’unica ricorrenza di un
elemento (attributo ID).
Esempio.
<HEAD>
H1.primaclasse {border-width: 1; border: solid; border-color: red; text-align: center}
#primoid {border-width: 1; border: solid; border-color: blue; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=”primaclasse”>Titolo bordato di rosso e centrato</H1>
<H1 ID=”primoid”>Titolo bordato di rosso e centrato</H1>
<H1>Titolo standard</H1>
</BODY>
Utilizzando i marcatori <DIV> e <SPAN> associati ai marcatori <STYLE> è possibile definire lo
stile anche per elementi non originariamente definiti dal linguaggio HTML.
13.8 Style sheets esterni
L’uso degli style sheets esterni piuttosto che della coppia di marcatori <STYLE> presenta numerosi
vantaggi, tra cui la condivisione dello stesso style sheet tra più documenti, la possibilità di apportare
modifiche di stile senza modificare effettivamente il sorgente della pagina e il retrieval selettivo da
parte dello user agent dello style sheet appositamente definito per il media utilizzato.
Ad un unico documento possono essere associati più style sheets, la cui interazione è controllata da
regole dipendenti dal linguaggio di stile utilizzato.
Gli style sheets associati ad un documento possono essere mutuamente esclusivi, in modo tale che
l’utente possa selezionare quello più consono alle sue esigenze (alternate style sheets). Agli
alternate style sheets è possibile associare un persistent style sheet che viene comunque applicato al
documento in aggiunta all’alternate style sheet selezionato.
Per associare uno style sheet ad un documento occorre utilizzare il marcatore <LINK>, la cui
sintassi è:
<LINK HREF=”miostyle.css” REL=”stylesheet” TYPE=”text/css”>
34
Il valore attribuito al parametro HREF=”url” rappresenta l’indirizzo del file di stile, mentre TYPE
indica il linguaggio di stile utilizzato per le informazioni di stile entro lo style sheet indicato da
HREF.
Il parametro REL assume il valore REL=”stylesheet” se lo style sheet è di tipo persistent o lo si
vuole indicare come default, mentre REL=”alternate stylesheet” se lo style sheet è di tipo alternate.
Diversi style sheets sono distinti tramite un diverso valore dell’attributo TITLE associabile al
marcatore <LINK>.
Se nella sintassi del marcatore <LINK> si ha REL=”stylesheet” e TITLE non viene definito, lo
style sheet è di tipo persistent; viceversa, se a parità del valore attribuito a REL, viene definito il
parametro TITLE, lo style sheet diventa il default o preferred. Allo stesso modo per specificare che
si tratta di un alternate style sheets, occorre indicare, oltre a REL=”alternate stylesheet”, anche un
TITLE per il marcatore <LINK>.
Per associare ad un unico documento più style sheets occorre indicare nell’intestazione del
documento una sequenza di marcatori <LINK> e/o <STYLE>. Le regole di interazione tra le
informazioni di stile racchiuse in ogni style sheet vengono dettate dall’ordine in cui appaiono entro
l’intestazione del documento.
13.9 Media descriptors
Sia al marcatore <LINK> che a <STYLE> è possibile associare l’attributo MEDIA per la
definizione delle informazioni di stile inserite entro lo style sheet. Indicando per uno stesso
documento più style sheet applicabili a differenti media, lo user agent può selezionare ed utilizzare
solo quello adatto al media corrente.
I seguenti valori possono essere assegnati all’attributo MEDIA:
SCREEN che indica un documento redatto ai fini della visualizzazione tramite schermo, ma
solitamente ben si adatta alla stampa ed alla proiezione. È il valore di default.
TTY che indica un documento redatto ai fini della visualizzazione con una fonte fissa di caratteri,
come ad esempio teletypes o terminali o schermi con limitate capacità di visualizzazione.
TV che indica un documento redatto ai fini della visualizzazione con supporti di tipo televisivo,
caratterizzati da bassa risoluzione, un numero limitato di colori e di funzioni di scorrimento.
PROJECTION che indica un documento redatto ai fini della proiezione.
HANDHELD che indica un documento redatto per supporti caratterizzati da schermi piccoli,
monocromatici e con grafica limitata, connessi a bassa velocità.
PRINT che indica un documento redatto ai fini della stampa o della visualizzazione in modalità
anteprima di stampa.
BRAILLE che indica un documento redatto ai fini della lettura tramite device di tipo braille tactile.
AURAL che indica un documento redatto ai fini dell’ascolto tramite sintetizzatori vocali.
ALL che indica un documento utilizzabile da tutti i media.
35
14 Cascading Style Sheets Level 1
Le informazioni di stile del linguaggio CSS1 presentano una sintassi del tipo:
H1 {color: blue}
Dove H1 rappresenta il selector, ovvero l’elemento o gli elementi a cui verrà applicata la regola di
stile, mentre color: blue, detta declaration, è la dichiarazione di stile, composta di due parti:
property (color) e value (blue).
L’attributo ID=”nome” assegna un nome al marcatore a cui è associato. Il nome, che deve essere
unico all’interno di un documento, può essere usato per definire entro lo style sheet lo stile del
particolare marcatore. Entro lo style sheet il selector è in questo caso indicato dal nome del
marcatore unito tramite il carattere “#” al valore dell’attributo ID.
Esempio.
H1#verde {border-width: 1; border: solid; border-color: green; text-align: center}
Se il selector entro la dichiarazione di stile non comprende il nome dell’elemento, ma è del tipo:
#verde {border-width: 1; border: solid; border-color: green; text-align: center}
lo stile così definito può essere applicato ad un qualsiasi elemento entro il documento, ad esempio
ad un paragrafo indicato dal marcatore <P ID=verde>.
Il parametro CLASS=”cdata-list” dichiara l’appartenenza del marcatore a cui viene associato ad
una o più classi costituite da insiemi di marcatori a cui si vogliono attribuire le stesse caratteristiche
di formattazione tramite gli style sheets.
Esempio.
<HTML>
<HEAD>
H1.verde {color: green}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=verde> Titolo di primo livello di color verde </H1>
</BODY>
</HTML>
Per indicare le regole di stile di una classe a cui possono appartenere elementi diversi, la sintassi
semplificata è del tipo “.verde”. Alla CLASS=verde possono pertanto appartenere marcatori di tipo
diverso.
Per specificare uno stile particolare per un elemento quando questo è nidificato entro un altro
elemento e solo in tale precisa situazione, è possibile utilizzare una particolare sintassi per la
dichiarazione di stile. Ad esempio, se si vuole indicare il colore rosso per il testo incluso in un
elemento EM solo quando questo è nidificato in un elemento H2, la regola di stile diventa:
H2 EM {color: red}
Quando occorre applicare le stesse regole di stile a diversi elementi se nidificati in altri elementi, è
possibile raggrupparli in un’unica informazione di stile del tipo:
H1 EM, H2 EM, DIV CODE {color: blue}
14.1 Commenti
Entro uno style sheet è possibile inserire commenti racchiusi tra i caratteri /* … */.
36
14.2 L’ordine di cascata
Gli style sheets possono essere interni al sorgente HTML, o esterni in file a sé stanti. Entro uno
style sheet esterno è inoltre possibile importare altri style sheets instaurando così una vera e propria
cascata.
L’elemento che permette l’impostazione di uno style sheet in un altro è @import url. Entro uno
style sheet tutte le dichiarazioni @import devono precedere le regole di stile dello style sheet.
Se entro uno o più style sheets vengono definite regole di stile differenti per uno stesso elemento,
possono sorgere dei conflitti che vengono automaticamente risolti in base all’ordine con cui gli style
sheets vengono associati al documento.
Le regole di stile proprie dello style sheet corrente sovrascrivono quelle degli style sheets importati
e tra questi gli ultimi importati sovrascrivono i precedenti.
14.3 Il modello di formattazione
Per il linguaggio CSS1 ogni elemento ha forma rettangolare ed è racchiuso in una serie di scatole
anch’esse rettangolari.
L’insieme delle scatole che circondano un elemento ha nel nucleo il contenuto dell’elemento,
mentre attorno dall’interno verso l’esterno possono essere individuate delle aree denominate
padding, border e margin.
Il background del padding è lo stesso definito per l’elemento. Il colore e lo stile del bordo viene
indicato dalla proprietà border dell’elemento. Il margine è sempre trasparente.
14.4 I font di caratteri
Le proprietà utili a definire i font sono:
font-family che può assumere valori alternativi, separati fra loro da virgole. Indicare valori
alternativi permette un controllo sulla visualizzazione anche nell’ipotesi che alcuni font indicati non
siano disponibili sul sistema dell’utente o non siano conosciute con lo stesso nome.
Nell’indicare il valore della proprietà font-family è possibile indicare un singolo font o una
generica famiglia di font: serif, sans-serif, cursive, fantasy, monospace.
font-style che può assumere i valori normal o italic.
font-variant che può assumere i valori normal e small-caps (maiuscoletto).
font-weight che può assumere i valori: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600,
700, 800, 900. I valori da 100 a 900 indicano un “peso” sempre maggiore per il testo: 400
corrisponde a normal, mentre 700 corrisponde a bold. I valori bolder e lighter indicano un peso
relativo a quello eventualmente ereditato dagli elementi contenenti l’elemento per cui viene definità
la proprietà.
font-size che può essere espressa come absolute-size, relative-size, length, percentage.
Possibili valori assunti da absolute-size sono xx-small, x-small, small, medium, large, x-large, xxlarge. Solitamente a video i valori adiacenti dovrebbero essere caratterizzati da un fattore di scala di
1,5, cioè se la font-size definita medium è di 10pt, la large è di 15pt.
37
L’espressione relative-size è interpretata dallo user agent relativamente alla dimensione del font
dell’elemento parent. Possibili valori sono larger e smaller.
L’espressione length può assumere un qualsiasi valore in punti tipografici (pt), in pixel (px), in
centimetri, in millimetri, ecc.
L’espressione percentage assume invece un valore percentuale riferito alla dimensione
eventualmente ereditata da un elemento parent o alla dimensione di default del testo.
font permette di definire tutte le proprietà precedenti in un’unica regola di stile, omettendo i nomi
delle singole proprietà.
14.5 Il colore del testo e dello sfondo
Il colore del testo contenuto in un elemento è indicato come color o foreground color, in
contrapposizione con il background color o colore di sfondo.
Lo sfondo può anche essere rappresentato da un’immagine ripetuta un numero sufficiente di volte
da riempire l’area occupata dall’elemento.
Ogni colore può essere rappresentato da un nome o dal corrispondente valore del codice RGB,
ovvero dal valore esadecimale dei colori rosso, verde e blu che compongono il colore stesso.
Esempio.
H1 {color: #ff0000}
H1 {color: rgb(255,0,0)}
H1 {color: rgb(100%, 0%, 0%)}
La proprietà color definisce il colore del testo di un elemento. Il colore di sfondo dell’area occupata
da un elemento è definita dalla proprietà background-color.
La proprietà background-image permette di indicare un file immagine che, ripetuto un numero
sufficiente di volte, andrà a riempire lo sfondo dell’elemento. Può essere utile indicare comunque
un colore di sfondo che verrà utilizzato nel caso in cui l’immagine non fosse disponibile.
Tramite la proprietà background-repeat è possibile far sì che la stessa immagine venga ripetuta
solo in senso orizzontale o verticale oppure non venga ripetuta affatto. Possibili valori di
background-repeat sono: repeat (default), repeat-x (determina la ripetizione solo in senso
orizzontale) repeat-y (ripetizione in senso verticale) e no-repeat (l’immagine compare una sola
volta).
La proprietà background-attachment può assumere i valori scroll e fixed. Se è definito il valore
scroll (valore di default) lo sfondo scorre assieme al testo, mentre se è definito il valore fixed, lo
scorrimento del testo non implica lo scorrimento dello sfondo che rimane invece fisso rispetto allo
schermo.
Se è stata definita un’immagine come sfondo di un elemento, la proprietà background-position ne
specifica la posizione iniziale. Il suo valore può essere espresso come percentuale, lunghezza o
tramite parola chiave (top, bottom, left, center, right).
14.6 Il testo
La proprietà word-spacing permette di ridefinire lo spazio tra le parole. Il valore associato viene
aggiunto a quello di default e può essere negativo.
38
Con la proprietà letter-spacing si può variare il normale spazio visualizzato tra le lettere di ogni
parola.
La proprietà text-decoration può assumere i seguenti valori: underline, overline, line-through o
blink.
L’allineamento di un elemento rispetto agli altri elementi circostanti viene espresso con la proprietà
vertical-align. I valori che può assumere sono:
baseline – allinea la linea base dell’elemento con quella dell’elemento parent.
middle – allinea il centro della dimensione verticale dell’elemento con la base della linea che lo
contiene.
sub – l’elemento viene reso in una posizione di pedice rispetto all’elemento precedente.
super – l’elemento viene reso in una posizione di apice rispetto all’elemento precedente.
text-top – la sommità dell’elemento è allineata con quella del più alto elemento di testo della linea
che lo contiene.
text-bottom – la base dell’elemento è allineata con quella dell’elemento di testo posizionato più in
basso, della linea che lo contiene.
top – la sommità dell’elemento è allineata con la sommità del più alto elemento della linea che lo
contiene (non necessariamente testo come per text-top).
bottom – la base dell’elemento è allineata con la base dell’elemento posizionato più in basso della
linea che lo contiene (non necessariamente testo come per text-bottom).
La proprietà text-transform consente di formattare il testo in capitalize (tutte le iniziali maiuscole),
uppercase (tutto il testo in maiuscolo), lowercase (tutto il testo in minuscolo). Il valore none
annulla invece ogni valore ereditato da un eventuale elemento parent.
L’allineamento orizzontale del testo viene definito dal valore assunto dalla proprietà text-align, che
può essere left, right, center e justify.
Per definire il rientro (identazione) della prima riga di un blocco di testo rispetto alle rimanenti,
occorre definire la proprietà text-indent, il cui valore, espresso in lunghezza o percentuale, può
anche essere negativo.
Tutti gli elementi hanno una proprietà detta line-height che definisce l’altezza complessiva di una
linea di testo. La differenza tra la dimensione del font e l’altezza della linea è detta leading, halfleading è la metà della differenza posta sopra e sotto il testo.
L’altezza della linea può essere espressa da un valore numerico o percentuale. Se il valore è
numerico, l’altezza della riga è data dal prodotto di tale valore e la font-size.
14.7 Box
Il presente paragrafo fa riferimento al modello di formattazione.
Le proprietà del margine sono: margin-top, margin-right, margin-bottom, margin-left e margin.
39
Le proprietà indicano le distanze dei diversi margini dell’elemento da quelli circostanti. Le distanze
possono essere espresse come valore numerico o percentuale e possono assumere valore negativo
determinando la sovrapposizione degli elementi.
La proprietà margin permette di indicare i valori dei quattro margini, nell’ordine superiore, destro,
inferiore, sinistro, con un’unica regola di stile. Se a margin è associato un solo valore, questo vale
per tutti e quattro. Se sono associati due o tre valori, quello o quelli mancanti vengono resi uguali ai
margini opposti.
Le proprietà del padding, cioè dell’area tra il bordo ed il contenuto dell’elemento, sono: paddingtop, padding-right, padding-bottom, padding-left e padding. Rappresentano la distanza del
contenuto dell’elemento dai bordi superiore, destro, inferiore e sinistro, e possono essere espresse
tramite lunghezze o valori percentuali. Non possono assumere valori negativi. La proprietà padding
permette di indicare i quattro valori con un’unica regola di stile in modo analogo a margin.
Per definire lo spessore del bordo occorre utilizzare le proprietà: border-top-width, border-rightwidth, border-bottom-width, border-left-width e border-width. Il valore di queste proprietà può
essere espresso tramite le parole chiave thin, medium, thick, o lunghezze. La proprietà borderwidth permette di definire lo spessore dei quattro lati del bordo di un elemento con un’unica regola
di stile in modo analogo a margin.
Altra proprietà del bordo di un elemento è border-color. Il colore del bordo può essere espresso
tramite il suo nome o il suo codice esadecimale.
La definizione dello stile del bordo avviene tramite border-style che può assumere da uno a quattro
valori. I possibili valori sono:
none – non viene disegnato alcun bordo
dotted – il bordo è una linea punteggiata
dashed – il bordo è una linea tratteggiata
solid – il bordo è una linea continua
double – il bordo è una linea doppia che occupa tutta l’ampiezza indicata da border-width
groove – il bordo viene visualizzato come un solco tridimensionale in cui il rilievo viene reso dal
colore indicato da border-color opportunamente ombreggiato
ridge – il bordo viene visualizzato tridimensionalmente come un rilievo emergente verso l’esterno,
reso dal colore indicato da border-color opportunamente ombreggiato
inset – il bordo assume un aspetto tridimensionale ombreggiato verso l’interno
outset – il bordo assume un aspetto tridimensionale ombreggiato verso l’esterno.
Se a border-style è associato un solo valore, questo vale per tutti e quattro i bordi, se i valori indicati
sono due o tre, i valori mancanti vengono resi uguali ai valori opposti.
40
Per definire con un’unica regola di stile le caratteristiche di uno dei quattro bordi, possono essere
usate le proprietà border-top, border-right, border-bottom e border-left.
Esempio.
H1 {border-top: medium solid yellow}
Per semplificare ulteriormente la definizione del bordo di un elemento, racchiudendo in un’unica
regola di stile le caratteristiche finora viste, è possibile definire la proprietà border.
Esempio.
H1 {border: medium ridge gray}
Le proprietà width e height per un elemento ridefiniscono le dimensioni dello stesso in fase di
formattazione. I valori loro assegnati sovrascrivono le dimensioni originarie e possono essere
espresse come lunghezze o percentuali.
Per variare la posizione di un elemento orizzontalmente e far sì che il testo lo circondi, può essere
definita la proprietà float, che può assumere i valori left, right e none.
La proprietà clear specifica se un elemento accetta al suo fianco la presenza di elementi floating.
Più precisamente, il valore ad essa associato indica da quale lato non viene accettata la presenza di
elementi di questo tipo. I valori possono essere: none, left, right, both.
14.8 Proprietà di classificazione
La proprietà display, applicabile a tutti gli elementi, classifica gli elementi in categorie piuttosto
che definire per essi particolari caratteristiche di stile, ed indica se e come l’elemento cui è associata
viene visualizzato. Possibili valori sono:
block – l’elemento è contenuto in una sua propria box, solitamente separata dal resto del documento
da line-break
inline – indica che l’elemento è compreso nella stessa linea dell’elemento precedente. Il box
dell’elemento viene ridimensionato in base alla dimensione del contenuto
list-item – ha un significato simile a block ed è tipico degli elementi delle liste
none – l’elemento non viene visualizzato.
14.9 Spazi bianchi
La proprietà white-space definisce come vengono resi gli spazi bianchi entro un elemento. Possibili
valori:
normal – è il valore di default. Più spazi bianchi vicini vengono ridotti ad un unico spazio
pre – gli spazi bianchi vengono resi come indicato nel sorgente (come per il marcatore <PRE>)
nowrap – inibisce gli a capo automatici entro l’elemento e questi devono essere indicati
direttamente col marcatore <BR>.
14.10 Liste
Tramite gli style sheets è possibile indicare un’immagine come punto elenco di liste puntate, oppure
utilizzare la proprietà list-style-type per indicare lo stile del punto. Possibili valori di list-style-type
41
sono: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha e
none.
Con list-style-image è possibile indicare l’immagine che si vuole utilizzare come punto elenco di
una lista. Il valore di questa proprietà è l’URL dell’immagine stessa.
La posizione del punto elenco è definita da list-style-position, che può assumere i valori inside o
outside (valore di default).
Le tre proprietà possono essere definite con un’unica regola di stile tramite list-style.
Esempio.
LI {list-style: url(http://www.pluto.it/immagini/pallina.gif) disc inside}
14.11 Unità di misura negli style sheets
Le unità di misura relative supportate dagli style sheets sono em, ex e px.
Con la prima unità di misura si indica un fattore moltiplicativo per l’altezza del font dell’elemento
(definito da font-size).
1ex indica il fattore 1 moltiplicato per l’altezza della lettera “x” nella famiglia di font dell’elemento.
px indica misure espresse in pixel.
Le unità di misura assolute supportate sono in (inches), cm (centimetri), mm (millimetri), pt
(points, 1pt=1/72in), pc (picas, 1pc=12pt).
Infine le dimensioni associate alle proprietà negli style sheets possono essere espresse come
percentuali relative ad altri valori, tipicamente la font-size dell’elemento, ma comunque variabili
dipendentemente dalla proprietà stessa.
42
15 Cenni di HTML dinamico
L’HTML dinamico (DHTML) è una tecnologia che consente la modifica volante del contenuto di
un documento HTML, creando dei contenuti dinamici.
Al posto di caricare pagine successive dal server remoto, l’effetto desiderato è ottenuto definendo
oggetti su una singola pagina ed intervenendo sulle loro variazioni di stato al passare del tempo.
DHTML si basa sullo standard degli style sheets approvato dal W3 Consortium, tuttavia la resa nei
due maggiori browser, Netscape Communicator e Internet Explorer, è abbastanza differente.
DHTML presenta pagine con una ricca formattazione e permette di interagire con i contenuti senza
scaricare altri dati dal server. Una pagina, cioè, può reagire immediatamente alle azioni dell’utente
senza la necessità di una interazione con il server.
Grazie al supporto di Cascading Style Sheets, Dynamic HTML consente agli sviluppatori un
controllo preciso della formattazione, dei font e del layout, offrendo un modello a oggetti
estremamente avanzato per creare le pagine interattive.
15.1 Collezioni
Le collezioni DHTML sono insiemi di oggetti.
Al momento del caricamento della pagina HTML, il browser ordina i marcatori del linguaggio
raggruppandoli per collezioni, prima fra tutte quella denominata all. Questa prima collezione è una
sorta di indice generale, comprendendo al suo interno ogni elemento presente nel documento.
Ogni marcatore è inserito all’interno dell’appropriata collezione nell’ordine in cui questo arriva allo
user agent. Almeno quattro tra le collezioni possibili sono costruite simultaneamente: all,
stylesheets, imports e scripts.
Un metodo per referenziare un oggetto all’interno di una collezione è quello di riferirsi a questo in
base alla posizione che lo stesso assume nella specifica collezione. Ad esempio,
document.images[2] indica la terza immagine all’interno di un documento.
Un altro metodo è quello di assegnare all’elemento un’etichetta tramite l’attributo ID. Questo
secondo metodo è sicuramente maggiormente efficiente in termini di manutenzione della pagina.
15.2 Il modello a oggetti
Il modello ad oggetti del DHTML rende ogni elemento di un documento HTML programmabile
grazie all’utilizzo delle sue proprietà e dei metodi di variazione.
L’oggetto principale per ogni documento è sempre l’oggetto window, che corrisponde alla finestra
di visualizzazione del browser. Può essere sottinteso, essendo sempre presente.
Figlio di window è l’oggetto document.
L’oggetto tipo “collezione” si riferisce alla particolare raccolta di elementi di HTML presenti
all’interno del documento. Tale oggetto indica al browser che l’elemento si può trovare dentro
quella particolare collezione, e precisamente è quello di posizione n-esima o quello che ha per
etichetta quella definita dall’attributo ID.
43
L’oggetto style rende possibile l’accesso agli attributi definibili con gli style sheets, come fossero
proprietà di quel preciso oggetto.
15.3 La gestione degli eventi
Il browser all’atto del caricamento della pagina si crea una tabella contenente l’elenco di tutte le
funzioni presenti del documento, incrociandole con le particolari categorie di eventi che le possono
attivare. Fatto ciò si pone in attesa che si verifichi un evento tra quelli da lui schedati per attivare la
funzione appropriata, e quindi lo script associato scritto in un linguaggio di script riconosciuto, ad
esempio Javascript.
Uno script client-side, ovvero eseguito localmente e non dal server Web, è un programma, redatto
con svariati possibili linguaggi, che può accompagnare un documento HTML o essere compreso al
suo interno.
Gli scripts possono essere divisi in due categorie: quelli eseguiti solo una volta all’atto del
caricamento della pagina, e quelli invece attivati dal verificarsi di eventi particolari causati da vari
fattori, soprattutto dalle azioni intraprese dal navigatore. I primi compaiono all’interno del codice
HTML, racchiusi dal marcatori <SCRIPT>, i secondi devono la loro attivazione alla presenza
all’interno di altri marcatori di attributi di evento intrinseco (intrinsic event attributes), quali
ONLOAD, ONUNLOAD, ONCLICK, ONMOUSEOVER, ONMOUSEOUT, ecc.
44