Sei sulla pagina 1di 65

CORSO HTML

Introduzione
La guida si articola in vari passi, ognuno volto a rappresentare i vari elementi che
costituiscono la pagina web. Ogni elemento sara' analizzato sia dal punto di vista del suo
aspetto grafico (cio' che effettivamente viene visualizzato dal browser) sia, ovviamente, dal
punto di vista pratico (la parte che riguarda il codice necessario per la sua realizzazione). E
non potrebbe essere altrtimenti, vista la stretta dipendenza reciproca delle due procedure.
I piu' potrebbero obiettare sull'utilita' o meno di sobbarcarsi l'impegno richiesto
dall'apprendimento del linguaggio, vista l'ampia offerta di editor WYSIWYG, (quello che vedi
e' quello che ottieni), i quali promettono la realizzazione di interi siti web senza la minima
conoscenza di HTML. Purtroppo si renderanno conto immediatamente che le promesse non
verranno completamente mantenute e la conoscenza del linguaggio si rivelera' comunque
indispensabile. Potra' sembrare paradossale, ma programmi del genere sono di estrema
utilita' solo a webmaster esperti che, tramite essi, potranno velocizzare considerevolmente il
lavoro.
Sempre in relazione alla sintassi di HTML, vale senza dubbio la pena di spendere due parole:
la non uniformita' di interpretazione del codice da parte dei rispettivi browser. Questo
significa che la stessa pagina puo' presentare un aspetto differente (e non di rado anche un
differente funzionamento) se visualizzata con Internet Explorer o Netscape o altri
programmi del genere. Anche se dagli ultimi sviluppi sembra che si stia procedendo verso
una maggiore aderenza alle specifiche del W3C (il consorzio per la standardizzazione del
web), e' il browser di casa Microsoft a presentare attualmente le migliori caratteristiche di
interpretazione del codice e di flessibilita' in caso di errori dello stesso.
Restano percio' alcune parti di codice proprietario che verranno contrassegnate nel corso
della guida dalla rispettiva icona. Un altro appunto va mosso in relazione al codice stesso:
alcuni tag ancora di largo uso sono stati dichiarati obsoleti dal W3C perche' sostituibili con
profitto da uno 'pseudo' linguaggio chiamato CSS (Cascading Style Sheet, fogli di stile in
cascata). Essi sono indiscutibilmente utili al webmaster, i potenti strumenti che mettono a
disposizione permettono di superare alcuni limiti vincolanti dell'HTML stesso, sia nel
contesto dell'impaginazione, sia per quanto riguarda il lato estetico del documento.
Ovviamente aggiungono un ulteriore livello di complessita'. Per questo motivo non verranno
illustrati in questa sede (vedi link a sinistra). Ma non ci si preoccupi, questi tag dichiarati
obsoleti resteranno certamente in vigore per parecchio tempo ancora.












I capitoli e breve descrizione dei contenuti
1) Primi passi
Creazione del file HTML, premesse e alcuni consigli.
2) Il testo
Tipo di carattere, dimensione e colore del testo.
3) Formattazione
I paragrafi, le interruzioni di riga, l'allineamento ecc..
4) Liste e linee
Elenchi e linee orizzontali.
5) Le tabelle -prima parte-
La tabella semplice, la tabella a due e quattro celle e regole principali.
6) Le tabelle -seconda parte-
Altezza, larghezza e metodi di allinamento dei contenuti all'interno delle celle.
7) Le tabelle -terza parte-
Allineamento orizzontale e verticale delle tabelle.
8) Immagini
I formati grafici per il web, gli attributi per il tag <IMG>.
9) I link
Il collegamento ipertestuale, elemento essenziale.
10) I colori
Impostare i colori per il web.
10) Frame -prima parte-
Principi e attributi fondamentali.
10) Frame -seconda parte-
La navigazione all'interno dei frame, l'elemento IFRAME.
11) Mappe
Suddividere le immagini in zone sensibili.
12) Form
Breve introduzione ai moduli per l'invio dei dati.
13) Entita'
Il codice per la generazione dei simboli.
14) Metatag
Descrizione e funzioni dei principali metatag.
15) Tutorial
Un breve tutorial per creare una pagina web.
15) Pubblicazione
Operazioni fondamentali per portare il sito in rete con un client FTP.
16) Utilita'
Una serie di indirizzi utili per aiutarci nella costruzione del sito.
Primi passi
Premessa
HTML non e' un linguaggio di programmazione, ma un linguaggio di marcatura (HyperText Markup
Language), ossia la sua funzione e' quella di marcare gli elementi che verranno visualizzati dal browser.
Questo rende la sua struttura, e di conseguenza l'apprendimento, estremamente semplice. Nonostante cio'
non verranno rappresentate in questa sede tutte le implicazioni che una guida veramente completa su HTML
richiederebbe in quanto esula dallo scopo di queste pagine, che hanno la sola pretesa di illustrare al
principiante i fondamenti del linguaggio. Per le specifiche complete di HTML 4.0 si veda la sezione Utilita'.
Un altro punto riguarda il software necessario. Tutto cio' di cui si ha bisogno per la scrittura del codice e' un
semplice editor di testo tipo Blocco Note. Per qualcosa di piu' completo sotto il punto di vista funzionale e
per la realizzazione di una eventuale parte grafica si veda sempre la sezione Utilita'.

Creare un file HTML
La creazione di un file HTML estremamente semplice: apriamo il nostro editor di testo (in questo caso
Blocco Note) e digitiamo quanto segue:

<HTML>
<HEAD>
<TITLE>Prima pagina </TITLE>
</HEAD>
<BODY BGCOLOR=yellow>
La mia prima pagina web
</BODY>
</HTML>

fatto questo dobbiamo salvare il nostro lavoro.
- Clicchiamo sul menu' File > Salva con nome
- alla casella Salva in selezioniamo Desktop
- piu' in basso alla casella Nome file digitiamo il nome che preferiamo, per esempio prima_pagina.html,
l'estensione .html (o .htm) e' indispensabile in quanto se non la specificassimo salveremmo il file in formato
testo
- clicchiamo ora su salva ed il gioco e' fatto.
Noteremo la presenza di una nuova icona, quella tipica di un file html ed un doppio click su di essa avviera' il
nostro browser. Se tutto e' andato per il verso giusto il risultato sara' questo. Per visualizzare il codice di una
pagina web si proceda in questo modo: in Internet Explorer fare click su visualizza e poi su HTML, in
Netscape su visualizza e sorgente pagina. Suddetta operazione si rendera' indispensabile al momento di
modificare o correggere il codice sorgente.
Una piccola precisazione: la visualizzazione e l'eventuale modifica del sorgente e' un'operazione molto piu' semplice e immediata se si utilizza il
browser Internet Explorer o Opera piuttosto che Netscape.

Uno sguardo ai TAG
Il tag <HTML> indica al browser l'inizio del documento e, come quasi tutti i tag, necessita di chiusura. In
questo caso con </ HTML> che ovviamente troveremo alla fine della pagina.
<HEAD> indica l'inizio della testa che conterra', oltre ad altri tipi di informazioni, i metatag necessari ai
motori di ricerca per indicizzare la pagina. Tra i tag <HEAD> ed </ HEAD> vi troveremo anche il tag
<TI TLE> che ha lo scopo di visualizzare nella barra superiore del browser il testo che eventualmente vi
inseriremo. Da chiudersi con </ TITLE>.
<BODY> indica il corpo del documento che contiene praticamente tutto quello che viene visualizzato dal
nostro browser. Naturalmente anche questo tag necessita di chiusura con il rispettivo tag </ BODY>.
Come si puo' notare dal codice esposto in precedenza, viene assegnato un colore al corpo del documento
(BGCOLOR=yellow). In alternativa possiamo impostare un file grafico mediante questo attributo:
BACKGROUND=sfondo.jpg esempio.
NB: nel contesto di questa guida i termini documento, pagina web, file HTML hanno tutti il medesimo significato ed e' indifferente l'uso di un
termine piuttosto di un'altro.

Alcuni utili suggerimenti
Di grande utilita' sono i commenti e gli appunti durante la scrittura del codice. Ne potremo inserire quanti
vogliamo utilizzando questo semplice accorgimento: <!-- appunti vari -->. Tutto ci che si trova all'interno
delle parentesi angolari verr semplicemente ignorato dal browser e non interferira' in alcun modo con il
nostro lavoro.
Prestiamo la massima attenzione alle virgolette " badando a chiuderle quando definiamo un valore: ad
esempio FONT FACE="verdana avrebbe un effetto impredicibile sulle nostre pagine. Va comunque
puntualizzato che il loro uso non e' obbligatorio tranne che in rari casi.
In realta' un file HTML puo' essere salvato indifferentemente sia con estensione .html che .htm. I problemi
sorgono quando si cerca di richiamare, mediante un link, una pagina salvata con suffisso .htm
specificandone invece il suffisso .html (e viceversa). Per questo motivo e' preferibile scegliere fin dall'inizio il
metodo che si preferisce adottare.
Un altro problema che puo' sorgere con il nome dei file riguarda l'uso delle maiuscole. Per i sistemi Windows
non fa alcuna differenza tra Mia_Pagina.html, mia_pagina.html e MIA_PAGINA.HTML, mentre un sistema
basato su Unix accetta solo nomi e suffissi in minuscolo. Per questo motivo e' caldamente consigliato l'uso
dei caratteri minuscoli per i nomi dei file.
Un'ultima precisazione prima di passare al prossimo capitolo: HTML e' case insensitive, ossia non fa alcuna
differenza se il codice e' digitato in maiuscolo o in minuscolo. La scelta e' discrezionale anche se
indubbiamente l'utilizzo del carattere maiuscolo per i tag contribuisce ad una maggiore leggibilit del codice
stesso.

Il testo
Considerazione tanto ovvia quanto scontata, il testo e' un elemento essenziale per lo scambio di
informazione. A rigore potrebbe essere l'unico elemento presente in una ipotetica pagina web deputata al
solo scambio di dati. Per raggiungere lo scopo e' sufficente battere sulla tastiera del nostro calcolatore:


Il tag FONT
Questa potrebbe essere l'impostazione di default del nostro browser, si tratta in questo caso del font (tipo di
carattere) Times New Roman. Ma possiamo fare molto per cambiare questa impostazione ricorrendo al tag
<FONT>. Ecco un esempio:
Testo dimostrativo
Ecco il codice utilizzato:

<FONT FACE=verdana SIZE=2>Testo dimostrativo</FONT>

In questo caso il browser ha 'pescato' il font Verdana presente sul disco fisso. Se non fosse stato possibile
avrebbe visualizzato il solito Times new roman. Per ovviare a questo inconveniente possiamo specificare piu'
di un font:
Testo dimostrativo

<FONT FACE="comic sans ms,arial" SIZE=2>Testo dimostrativo</FONT>

Questo avrebbe permesso al browser di impostare l'Arial nel caso il Comic Sans Ms non fosse disponibile. Si
notino le virgolette a racchiudere i nomi dei font, questo e' uno dei rari casi che in cui si rende necessario il
loro uso.
* In generale le virgolette sono indispensabili quando un attributo (FACE) contiene piu' di un valore, oppure
quando un nome di file e' interrotto da uno spazio bianco (mia pagina.html).

Volendo, possiamo anche cambiarne il colore:
Testo dimostrativo
In questo modo:

<FONT FACE="arial,verdana" SIZE=2 COLOR=blue>Testo dimostrativo</FONT>


E la dimensione:
Testo dimostrativo

<FONT FACE="arial,verdana" SIZE=4 COLOR=blue>Testo dimostrativo</FONT>

Si noti che abbiamo impostato SIZE al valore 4. La gamma di di valori che possiamo dare all'attributo SIZE
spazia da 1 a 7.

I l tag H
Ma esiste un altro modo per variare le dimensioni del testo ricorrendo all'uso del tag <H>
<H6>Testo dimostrativo </H6>
<H5>Testo dimostrativo </H5>
<H4>Testo dimostrativo </H4>
<H3>
Testo dimostrativo
</H3>
<H2>
Testo dimostrativo
</H2>
<H1>
Testo dimostrativo
</H1>
Ecco un elenco delle regole a cui si deve sottostare facendo uso del tag <H>:

- inanzitutto, contrariamente al tag <FONT>, aumentando il valore diminuisce la dimensione del testo
- la scala dei valori va da 1 a 6
- viene automaticamente inserita una riga vuota al disotto del testo interessato

Altre possibilita' di modifica
Ma non e' finita. HTML ci mette a disposizione altri elementi per variare le dimensioni e l'aspetto del testo:
questo testo non e' influenzato
<SMALL> questo testo e' influenzato da SMALL </SMALL>
<BIG> questo testo e' influenzato da BIG </BIG>
Seguono vari tag che ci permettono di adeguare il testo ai nostri scopi:
<B> grassetto </B>
<U> sottolineato </U>
<S> barrato </S>
<I> corsivo </I>
<TT>monospazi at o</TT>

E per finire, un elemento in verita' assai poco usato.
L'attributo TEXT, che ci permette di definire il colore del testo di tutta la pagina una volta inserito all'interno
del tag <BODY>.
<BODY TEXT=red> in questo esempio tutto il testo della pagina sar di colore rosso.
Formattazione
In questo capitolo prenderemo in esame gli elementi (tag e relativi attributi) che ci permettono di dare un
minimo di struttura alla pagina. Per ottenere una impostazione piu' rigorosa si fara' ricorso all'uso delle
tabelle, che illustreremo piu' avanti in una sezione appositamente dedicata.
Il tag P
Il primo elemento che prenderemo in esame e' il tag <P> (paragrafo). <P> ha la possibilita' di contenere
qualunque altro elemento, sia esso un' immagine, del semplice testo oppure una tabella creando una riga
vuota sopra e sotto all'oggetto interessato. Inoltre ne permette l'allineamento in senso orizzontale. La
chiusura </P> non e' obbligatoria.

<P>Questa riga di testo e' interessata dal tag P </P>
<P ALIGN=center>Questa e' allineata al centro </P>
<P ALIGN=right>Questa e' allineata a destra </P>
Inoltre al tag <P> puo' essere associato un'altro attributo di allineamento: <P ALI GN=justify>, che ha la
caratteristica di 'riempire' completamente la riga senza lasciare spazi vuoti al margine sinistro. Infatti il
browser adeguera' il testo interessato spaziando eventualmente le parole della giusta misura.
Si osservi il suo operato nel paragrafo sotto.
Inoltre al tag <P> puo' essere associato un'altro attributo di allineamento: <P ALI GN=justify>, che ha la
caratteristica di 'riempire' completamente la riga senza lasciare spazi vuoti al margine sinistro. Infatti il
browser adeguera' il testo interessato spaziando eventualmente le parole della giusta misura.

L'elemento DIV
In HTML svolge praticamente gli stessi compiti di <P> e se ne differenzia per il fatto che non origina righe
vuote. <DIV> viene usato soprattutto per creare una sorta di "contenitore", utililizzato nelle interazioni
javascript/HTML. Ecco un esempio utile ai nostri scopi:

<DI V ALI GN=cent er > Al l i neament o al cent r o </ DI V>

CENTER
Per questo tag non occorrono molte spiegazioni...

<CENTER>svolge la sola funzione di posizionare al centro </CENTER>



BLOCKQUOTE
BLOCKQUOTE ci permette di indentare il testo (o cio che viene posto al suo interno).
questo testo e' interessato da BLOCKQUOTE
questo no

<BLOCKQUOTE>questo testo e' interessato da BLOCKQUOTE </BLOCKQUOTE>


L'elemento PRE
Questo tag puo' svolgere un'unica funzione: mantenere la posizione del testo esattamente come appare
quando si digita il codice, compresi l'allineamento, il font di default e gli spazi bianchi. Ecco un esempio
pratico.
<PRE>

</PRE>

Interruzione di riga e spaziatura orizzontale
Ecco un paio di elementi un po' bistrattati ma che in alcune occasioni possono rivelarsi estremamente utili.
L'elemento BR
Il primo e' il tag <BR>, la cui funzione e' di spezzare la riga e mandare a capo testo, immagini e qualunque
altro elemento ne venga interessato.

Ne inseriremo uno qui <BR>e due qui <BR><BR>per dimostrazione

Ne inseriremo uno qui
e due qui

per dimostrazione
Si noti che due o piu' <BR> consecutivi creano altrettante righe vuote.
L'entita' &nbsp;
Infine ecco un elemento utilizzabile quando serve un breve spazio bianco senza interruzione di riga. HTML
infatti ignora gli spazi vuoti superiori ad un carattere, e' quindi perfettamente inutile tentare di spaziare due
parole come permette di fare qualsiasi editor di testo.
Questo il sorgente

Prima parola &nbsp; &nbsp; &nbsp; &nbsp; seconda parola.

E questo il suo effetto
Prima parola seconda parola.

Liste e linee
Questo capitolo ha lo scopo di illustrare due elementi che sembrano perdere importanza nei moderni stili di
impaginazione, ma che possono comunque rivelarsi utili in svariate circostanze.
Le liste
Il codice utilizzato per creare una lista e' caratterizzato da una sintassi estremamente semplice, pertanto ci
limiteremo a raffigurarne i vari tipi ed il codice corrispondente senza fornire ulteriori e peraltro superflue
descrizioni.
Lista non ordinata
Prima voce
Seconda voce
Terza voce

<UL>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</UL>

Lista non ordinata tipo "circle"
o Prima voce
o Seconda voce
o Terza voce

<UL TYPE=circle>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</UL>

Lista non ordinata tipo "square"
Prima voce
Seconda voce
Terza voce

<UL TYPE=square>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</UL>


Lista ordinata
1. Prima voce
2. Seconda voce
3. Terza voce

<OL>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</OL>

Lista ordinata con numeri romani minuscoli
i. Prima voce
ii. Seconda voce
iii. Terza voce
<OL TYPE=i>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</OL>

Lista ordinata con numeri romani maiuscoli
I. Prima voce
II. Seconda voce
III. Terza voce

<OL TYPE=I>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</OL>

Lista ordinata con lettere minuscole
a. Prima voce
b. Seconda voce
c. Terza voce

<OL TYPE=a>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</OL>

Lista ordinata con lettere maiuscole
A. Prima voce
B. Seconda voce
C. Terza voce

<OL TYPE=A>
<LI>Prima voce
<LI>Seconda voce
<LI>Terza voce
</OL>


Lista con definizioni
Prima voce
Definizione della prima voce
Seconda voce
Definizione della seconda voce
Terza voce
Definizione della terza voce

<DL>
<DT>Prima voce
<DD>Definizione della prima voce
<DT>Seconda voce
<DD>Definizione della seconda voce
<DT>Terza voce
<DD>Definizione della terza voce
</DL>

Si possono utilizzare anche due o piu' definizioni per ogni voce
Prima voce
Definizione della prima voce
Ulteriore definizione della prima voce
Seconda voce

<DL>
<DT>Prima voce
<DD>Definizione della prima voce
Definizione della seconda voce
Terza voce
Definizione della terza voce
<DD>Ulteriore definizione della prima voce
<DT>Seconda voce
<DD>Definizione della seconda voce
<DT>Terza voce
<DD>Definizione della terza voce
</DL>


L'elemento HR
HR sta per horizontal rule, linea orizzontale, di cui si e' fatto ampio uso finora: l'esempio sotto e' generato
dal tag <HR> senza aggiunta di attributi. Questo tag non ha bisogno di chiusura. Solo Internet Explorer
supporta l'allineamento e la colorazione.


<HR>


Ma puo' essere modificato in vari modi: nell'ampiezza, nello "spessore", nell'allineamento orizzontale.

<HR WIDTH=300>


<HR WIDTH=300 SIZE=1>



<HR WIDTH=300 SIZE=5>


<HR WIDTH=300 SIZE=5 ALIGN=right>


<HR WIDTH=300 SIZE=5 ALIGN=right COLOR=blue>


<HR WIDTH=300 SIZE=1 ALIGN=right COLOR=blue>


Tabelle -prima parte-
La tabella, elemento fondamentale
Ora ci accingeremo a scrivere il codice di quello che rappresenta croce e delizia di chiunque abbia a che fare
con HTML.
Infatti le tabelle sono un ottimo mezzo per ottenere il posizionamento preciso di tutti gli oggetti che via via
inseriremo nelle nostre pagine. La comprensione della loro struttura probabilmente non sar immediata, ma
con un p di pratica riusciremo ad impadronirci della tecnica. Quella che segue la tabella pi semplice che
HTML ci mette a disposizione.
Cella 1

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>


Avrete notato la presenza dell'attributo BORDER=1 all'interno del tag TABLE, serve infatti ad evidenziare il
bordo della tabella stessa. Impostandolo a BORDER=0 otterremmo questo risultato:
Cella 1

Proviamo ora ad aumentarne il valore a 6:
Cella 1


<TABLE BORDER=6>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>


Passiamo ora ad illustrare un paio attributi che ci aiuteranno a definire meglio le propriet della nostra
tabella: CELLPADDING e CELLSPACING
CELLPADDING permette di ottenere una spaziatura tra il bordo interno della tabella ed il suo contenuto, in
questo caso 10 pixel
Cella 1


<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>


Applicando CELLSPACING, in pratica, possiamo variare lo spessore del bordo
Cella 1


<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>


Applichiamo contemporaneamente i due attributi
Cella 1


<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>


Diamo valore 0 a CELLPADDING e CELLSPACING e guardiamo cosa succede:
Cella 1

La tabella a piu' celle
Una tabella composta da una sola cella avrebbe ben poche applicazioni pratiche.
Il prossimo esempio mostra una tabella composta da due celle affiancate.
Cella 1 Cella 2

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
<TD>Cella 1</TD>
</TR>
</TABLE>


Il prossimo esempio ci mostrera' il metodo per costruire una semplice tabella a due celle sovrapposte
Cella 1
Cella 2

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
</TR>
<TR>
<TD>Cella 2</TD>
</TR>
</TABLE>


Prima di passare alla descrizione dei prossimi elementi proviamo ad "assemblare" i due esempi raffigurati in
precedenza.
Cella 1 Cella 2
Cella 3 Cella 4

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
<TD>Cella 2</TD>
</TR>
<TR>
<TD>Cella 3</TD>
<TD>Cella 4</TD>
</TR>
</TABLE>

Si puo' notare che in realta' costruire simili tabelle non e' complicato come potrebbe sembrare a prima vista.
Ecco le regole di base:
Il tag <TD> ..contenuto.. </TD> ci permette di costruire il "contenitore" per i nostri dati e di conseguenza
per espandere la tabella in senso orizzontale.
Il tag <TR> invece "spezza" la riga permettendoci di sovrapporre le celle sviluppando la tabella in senso
verticale.
Secondo le specifiche del W3c i tag di chiusura </TD> e </TR> non sono obbligatori ma, omettendoli,
alcuni browser non consentono la creazione della tabella.

Colspan e rowspan
Questi due attributi offrono l'opportunita' di unire due o piu' celle, sia in senso orizzontale che in senso
verticale. Ecco un paio di esempi corredati di relativo sorgente.
L'attributo COLSPAN permette di unire due celle disposte in senso orizzontale.
COLSPAN cella 1
cella 2 cella 3 cella 4

<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>COLSPAN </TD>
<TD>cella 1 </TD>
</TR>
<TR>
<TD>cella 2 </TD>
<TD>cella 3 </TD>
<TD>cella 4 </TD>
</TR>
</TABLE>


Mentre ROWSPAN permette la "fusione" in verticale.
cella 1 cella 2
ROWSPAN
cella 3 cella 4

<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2>ROWSPAN </TD>
<TD>cella 1 </TD>
<TD>cella 2 </TD>
</TR>
<TR>
<TD>cella 3 </TD>
<TD>cella 4 </TD>
</TR>
</TABLE>


TH
L'elemento <TH> e' in realta' ben poco usato, in quanto l'unica caratteristica che lo differenzia da una
normale cella definita con <TD> e' l'impostazione in grassetto del testo che eventualmente vi verra' inserito.
Cella TH Cella TH
Cella 1 Cella 2

<TABLE BORDER=1>
<TR>
<TH>Cella TH </TH>
<TH>Cella TH </TH>
</TR>
<TR>
<TD>Cella 1 </TD>
<TD>Cella 2 </TD>
</TR>
</TABLE>


CAPTION
Anche <CAPTION> e' assai poco usato. La sua caratteristica e' di definire una cella che occupa tutto lo
spazio orizzontale della tabella, in modo simile a COLSPAN. La differenza sta nel fatto che si puo' usare solo
ad inizio tabella e che non viene visualizzato il bordo della cella stessa.
Cella CAPTION
cella 1 cella 2

<TABLE BORDER=1>
<CAPTION>Cella CAPTION </CAPTION>
<TR>
<TD>cella 1 </TD>
<TD>cella 2 </TD>
</TR>
</TABLE>


Il colore
Non va dimenticata la possibilita' di colorare una tabella data l'utilita' sia dal lato estetico, sia funzionale.
L'attributo BGCOLOR puo' essere definito all'interno del tag <TABLE>, <TR> e dei vari tag che definiscono
le celle.
cella 1

<TABLE BORDER=1 BGCOLOR=yellow>
<TR>
<TD>cella 1 </TD>
</TR>
</TABLE>


In questo esempio abbiamo impostato il colore all'interno dei vari tag a disposizione. Si noti che l'eventuale
bordo mantiene il colore definito in <TABLE>.
Cella 1 Cella 2
Cella 3 Cella 4
Cella 5 Cella 6

<TABLE BORDER=1 BGCOLOR=yellow>
<TR>
<TD>Cella 1</TD>
<TD>Cella 2</TD>
</TR>
<TR BGCOLOR=aqua>
<TD>Cella 3</TD>
<TD>Cella 4</TD>
</TR>
<TR>
<TD BGCOLOR=lime>Cella 5</TD>
<TD BGCOLOR=silver>Cella 6</TD>
</TR>
</TABLE>


Tabelle -seconda parte-
Altezza e larghezza
La tabella sotto e' caratterizzata da misure preimpostate che la obbligano ad assumere le dimensioni volute.
Questo non e' del tutto vero, si tratta infatti delle dimensioni minime che la tabella assume. L'unica misura
che verra' per il momento rispettata e' la larghezza. Ci spiegheremo meglio nel prossimo esempio.
cella 1
cella 2

<TABLE BORDER=1 WIDTH=200 HEIGHT=100>
<TR>
<TD>Cella 1</TD>
</TR>
<TR>
<TD>Cella 2</TD>
</TR>
</TABLE>

Altezza non rispettata..
In questo esempio la tabella rispetta solo l'attributo WIDTH.
Notare che l'altezza e' stata impostata a soli 2 pixel.
cella 1
Questa e' la dimostrazione
che l'altezza non verra'
rispettata

<TABLE BORDER=1 WIDTH=200 HEIGHT=2>
<TR>
<TD>Cella 1</TD>
</TR>
<TR>
<TD>
Questa e' la dimostrazione
che l'altezza non verra'
rispettata
</TD>
</TR>
</TABLE>

Se inserissimo al suo interno un oggetto di larghezza superiore (ad esempio un'immagine larga 250 pixel)
anche quest'ultima imposizione verrebbe ignorata.

Negli esempi precedenti abbiamo definito i valori di HEIGHT e WIDTH in termini di pixel. Allo stesso modo si
potrebbero definire le misure in percentuale:

<TABLE BORDER=1 WIDTH=50% HEIGHT=50%>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>

in questo caso la tabella occupa meta' dello spazio della pagina stessa, ma viene rispettata solo la misura
che riguarda la larghezza. Infatti l'attributo HEIGHT, applicato alle tabelle, e' dipendente dal contesto.
Questo significa che se la tabella dell'esempio fosse posta in una pagina vuota verrebbe rispettata anche la
misura relativa all'altezza.
Cella 1

NOWRAP
Questo attributo regola in qualche modo la larghezza della tabella, in quanto impedisce il ritorno a capo del
testo. In alcuni casi puo' rivelarsi estremamente utile. Va applicato al tag <TD>.
Applicando NOWRAP si impedisce il ritorno a capo del testo
Il sorgente:

<TABLE BORDER=1>
<TR>
<TD NOWRAP>Applicando NOWRAP si impedisce il ritorno a capo del testo</TD>
</TR>
</TABLE>


Allineamento orizzontale dei contenuti
cella 1 cella 2 cella 3
Prestando un minimo di attenzione possiamo dipanare l'apparente matassa rappresentata da questa tabella.
Esaminiamola gradualmente partendo dalla cella 1 nella lista che segue:

cella 1 - nessun allineamento
cella 2 - allineamento al centro agendo all'interno del tag <TD ALIGN=center>
cella 3 - allineamento a destra agendo all'interno del tag <TD ALIGN=right>
Ecco comunque il sorgente completo:

<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR>
<TD>cella 1 </TD>
<TD ALIGN=center>cella 2 </TD>
<TD ALIGN=right>cella 3 </TD>
</TR>
</TABLE>


In questo caso abbiamo allineato contemporaneamente le 3 celle agendo sul solo tag <TR>
cella 1 cella 2 cella 3
allineamento sul tag <TR> (<TR ALIGN=center>)
cella 1 - ...................
cella 2 - ...................
cella 3 - ...................


<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR ALIGN=center>
<TD>cella 1 </TD>
<TD>cella 2 </TD>
<TD>cella 3 </TD>
</TR>
</TABLE>


Allineamento verticale dei contenuti
In questo caso allineeremo i contenuti in senso verticale facendo uso dell'attributo VALIGN (vertical align,
appunto), influenzando solamente i tag <TD>
cella 1 cella 2 cella 3
cella 1 - allineamento in basso agendo all'interno del tag <TD VALIGN=bottom>
cella 2 - nessun allineamento
cella 3 - allineamento in alto agendo all'interno del tag <TD VALIGN=top>

<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR>
<TD VALIGN=bottom>cella 1 </TD>
<TD>cella 2 </TD>
<TD VALIGN=top>cella 3 </TD>
</TR>
</TABLE>


E questo e' l'ultimo degli esempi riguardanti l'allineamento dei contenuti delle tabelle.
cella 1 cella 2 cella 3
allineamento sul tag <TR> (<TR VALIGN=top>)
cella 1 - ...................
cella 2 - ...................
cella 3 - llineamento in basso agendo all'interno del tag <TD VALIGN=bottom>
Si noti che nonostante i contenuti siano stati precedentemente interessati dal tag <TR>, abbiamo annullato
la sua influenza sull'ultima cella agendo direttamente sul proprio tag <TD>.

<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR VALIGN=top>
<TD>cella 1 </TD>
<TD>cella 2 </TD>
<TD VALIGN=bottom>cella 3 </TD>
</TR>
</TABLE>

Tabelle -terza parte-
Allineamento orizzontale della tabella
Per comodita' abbiamo illustrato i metodi di allineamento orizzontale all'interno di un'altra tabella. Cosa che
sarebbe obbligatoria nel caso di allineamento verticale, ma vedremo piu' avanti di cosa si tratta.
Tabella
non
allineata
Tabella
allineata
al
centro

Tabella
allineata
a destra
<TABLE BORDER=1
WIDTH=50>
<TR>
<TD>Non
allineata</TD>
</TR>
</TABLE>
<TABLE BORDER=1 WIDTH=50
ALIGN=center>
<TR>
<TD>Allineata al centro</TD>
</TR>
</TABLE>
<TABLE BORDER=1 WIDTH=50
ALIGN=right>
<TR>
<TD>Allineata a destra</TD>
</TR>
</TABLE>
Possiamo notare che, come tutti gli altri elementi, anche le tabelle si allineano di default sul margine sinistro
della pagina. L'esempio a sinistra ne e' la dimostrazione. Se si osserva il codice del secondo e terzo esempio
si notera' che si e' agito all'interno del tag <TABLE> in questo modo:

<TABLE BORDER=1 WIDTH=50 ALIGN=......>
Come negli esempi del capitolo precedente, avremmo potuto agire anche dall'interno del tag <TD> della
tabella portante, ma ovviamente solo se in presenza di quest'ultima... Ne consegue che il metodo qui sopra
e' utilizzabile in modo indipendente lasciandoci maggiore liberta' d'azione.

Allineamento verticale della tabella
In questo esempio non e' stato impostato nessun allineamento, per evidenziare il fatto che di default la
tabellina si posiziona al centro della tabella portante.
default

<TABLE BORDER=1 WIDTH=150 HEIGHT=150>
<TR>
<TD>

<TABLE BORDER=1 WIDTH=50 HEIGHT=50>
<TR>
<TD>default</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Ma possiamo cogliere l'occasione per imparare un'altra cosa: l'esempio sopra mostra il modo piu' semplice di
annidare una tabella. Infatti, come sarebbe possibile fare con qualsiasi altro oggetto, e' sufficente inserirla
all'interno della cella della tabella ospite.

top

<TABLE BORDER=1 WIDTH=150 HEIGHT=150>
<TR>
<TD VALIGN=top>

<TABLE BORDER=1 WIDTH=50 HEIGHT=50>
<TR>
<TD>top</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Ecco l'esempio pratico corredato di codice. La parte in blu mostra il punto su cui si e' agito. Per ottenere lo
stesso risultato si potrebbe agire in modo analogo sul tag <TR> appena sopra.
Sostituendo <TD VALIGN=top> con <TD VALIGN=bottom>, ovviamente, la tabellina si sarebbe
posizionata in basso.

top +
right


<TABLE BORDER=1 WIDTH=150 HEIGHT=150>
<TR>
<TD VALIGN=top ALIGN=right>

<TABLE BORDER=1 WIDTH=50 HEIGHT=50>
<TR>
<TD>top +right</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Infine, per concludere l'argomento dedicato agli allineamenti, evidenziamo la possibilita' di adottare due
attributi contemporaneamente all'interno dello stesso tag.
Immagini
I formati per il web
La prima versione di HTML non prevedeva l'inserimento di immagini nei documenti, ma
con l'avventarsi della grande massa sulla rete, le esigenze commerciali cambiarono le
cose. Ora HTML supporta tre formati grafici che svolgono egregiamente il loro compito:
- Il formato GIF - formato piuttosto leggero, l'unico con il grande pregio di supportare
l'animazione, ottenuta "impacchettando" diversi file in uno solo. Altro grande pregio e' la
possibilita' di impostare la trasparenza. Supporta al massimo 256 colori.
- Il formato PNG - fino a non molto tempo fa alcuni browser non ne offrivano il
supporto, ostacolo che sembra ora superato. Come per tutti gli altri formati lo "spazio" che
occupa e' influenzato da diversi fattori, ma se mantenuto basso il numero di colori risulta
spesso piu' leggero del GIF. Anche PNG puo' supportare la trasparenza.
- J PG o J PEG - Questo formato compresso e' particolarmente indicato per immagini
complesse come possono essere i paesaggi e le riproduzioni con soggetti umani
restiuendone spesso, soprattutto a parita' di spazio su disco, dettaglio e sfumature in
modo piu' realistico di GIF e PNG.

334 bytes 253 bytes 1.056 bytes

rgb.gif rgb.png

rgb.jpg
Se osservate attentamente, le tre immagini sopra non mostrano alcuna differenza in
qualita'. Cio che fa la differenza e' il peso in bytes, ed e' il formato J PG a pagarne lo
scotto. Se ne deduce che con immagini semplici e povere di sfumature e' conveniente
usare GIF e PNG.

256 colori 13.966 bytes 256 colori 12.837 bytes colore RGB 2.411 bytes

mont.gif mont.png

mont.jpg
Contrariamente all'esempio visto in precedenza e' il formato J PG ad ottenere il miglior
rapporto qualita'/ingombro, questo perche' le immagini ricche di sfumature sono gestite al
meglio dall'algoritmo di compressione di J PG. Ma nonostante tutte le considerazioni finora
prese in esame, la regola migliore resta quella di provare la conversione dell'immagine nei
vari formati ed operare la scelta piu' conveniente.

Gestire il tag IMG
Passiamo ora alla gestione del tag che ci permette di inserire le immagini nel documento. Eccolo nella sua
forma piu' semplice. Si noti che deve essere specificata l'estensione del file, in questo caso di tipo .gif.

<IMG SRC=immagine.gif> <IMG SRC=sfondo_trasparente.gif>
Osservare che la seconda immagine gif mostra lo sfondo trasparente. Purtroppo questa opzione non e'
direttamente fruibile da HTML, ma occorrera' un apposito editor per grafica che permetta di selezionare un
colore da impostare in trasparenza.

Gli attributi HSPACE e VSPACE

<IMG SRC=immagine.jpg HSPACE=50>
L'attributo HSPACE permette di distanziare l'immagine in senso orizzontale di 50 pixel su ogni lato dagli
oggetti vicini (in questo caso i bordi della tabella).





<IMG SRC=immagine.jpg VSPACE=50>
L'attributo VSPACE invece imposta lo spazio vuoto in senso verticale. HSPACE e VSPACE possono essere
usati anche contemporaneamente, creando cosi' uno spazio vuoto di 50 pixel sia in altezza che in larghezza.

Breve parentesi: l'immagine nella tabella
A questo punto cogliamo l'occasione per imparare come inserire un'immagine in una tabella.


<TABLE BORDER=1>
<TR>
<TD>
<IMG SRC=img/cless.gif>
</TD>
</TR>
</TABLE>


Un'immagine puo' anche essere impostata come sfondo di una tabella.


<TABLE BORDER=1 WIDTH=150 HEIGHT=100>
<TR>
<TD BACKGROUND=img/cless.gif>
&nbsp;
</TD>
</TR>
</TABLE>



Se pero' non si introduce nient'altro nella tabella diventa indispensabile specificare altezza e larghezza di
quest'ultima. Avremmo ottenuto un risultato simile inserendo il codice necessario nel tag <TABLE> in questo
modo:
<TABLE BORDER=1 WIDTH=150 HEIGHT=100 BACKGROUND=img/cless.gif>.


Altezza e larghezza
I browser gestiscono automaticamente le dimensioni delle immagini assegnando loro le misure reali. Tramite
gli elementi HEIGHT e WIDTH possiamo pero' scavalcare le impostazioni di default e definire le misure che
preferiamo.

( Dimensioni reali 32x32 pixel )

<IMG SRC=img/chip.gif>



<IMG SRC=img/chip.gif HEIGHT=64 WIDTH=64>


ALT



<IMG SRC=img/alt.gif ALT="immagine reale.gif">

Questo attributo svolge due funzioni. Possiamo verificare la prima posizionando il cursore del mouse
sull'immagine qui sopra: apparira' la stringa di testo affidata all'attributo in questione (vedi codice).

La seconda possiamo verificarla nell'esempio sotto, richiamando un file inesistente. Il browser visualizzera' il
testo da noi impostato al posto dell'ipotetica immagine mancante.



<IMG SRC=file_not_found.gif ALT="immagine mancante.gif">


Il bordo
Attributo scarsamente utilizzato, permette di circondare con un bordo l'immagine interessata.

<IMG SRC=img/bordo.gif BORDER=3>

L'allineamento
In questo paragrafo esamineremo solo i principali attributi che regolano la posizione di un'immagine in
relazione agli altri contenuti, in quanto solo pochi di essi sono universalmente accettati dai vari browser in
circolazione.
Il primo esempio mostra l'impostazione di default, ossia il solo tag per inserire l'immagine.
testo di prova testo di prova testo di prova
testo di prova testo di prova testo di prova testo di
prova testo di prova testo di prova testo di prova
testo di prova testo di prova testo di prova testo di
prova

<IMG SRC=img/desk.gif>


Ora con allineamento a sinistra. E' evidente il fatto che il testo cominci a scorrere dal margine superiore
dell'immagine.
testo di prova testo di prova testo di prova
testo di prova testo di prova testo di prova
testo di prova testo di prova testo di prova
testo di prova testo di prova testo di prova
testo di prova testo di prova

<IMG SRC=img/desk.gif ALIGN=left>


Allineamento al centro:
testo di prova testo di prova testo di prova
testo di prova testo di prova testo di prova testo di
prova testo di prova testo di prova testo di prova
testo di prova testo di prova testo di prova testo di
prova

<IMG SRC=img/desk.gif ALIGN=center>



Ed ora con allineamento a destra.
testo di prova testo di prova testo di prova testo
di prova testo di prova testo di prova testo di
prova testo di prova testo di prova testo di p
testo di prova testo di prova testo di prova testo d
prova
rova
i

<IMG SRC=img/desk.gif ALIGN=right>


I link
Il link e' l'elemento essenziale della rete Internet, essendo Internet stessa basata sulla possibilita' di reperire
un documento presente da ogni computer che vi sia collegato. In parole semplici, Internet non potrebbe
esistere senza collegamenti.
Ecco la sintassi di un collegamento ad un file HTML nella sua forma piu' semplice

<A HREF=nome_documento.html>documento </A>

cosi' viene mostrato dal browser:
Documento
Ovviamente non condurra' da nessuna parte, perche' il file non esiste. Il prossimo esempio mostra un
collegamento reale ad una pagina appositamente preparata:

<A HREF=prova.html>Cliccami </A>

Cliccami

Negli esempi precedenti si e' dato per scontato che il file da richiamare si trovi nella stessa cartella della
nostra pagina, ma se si trovasse all'interno di un'altra cartella dovremmo adottare questo accorgimento:

<A HREF=nome_cartella/nome_file.html>Cliccami </A>

se invece si trovasse all'esterno della cartella si dovra' anteporre due punti alla sintassi del percorso:

<A HREF=../nome_file.html>Cliccami </A>


Finora abbiamo realizzato link per richiamare pagine che si trovano sullo stesso computer. La sintassi che
segue mostra come eseguire un link ad un documento presente sul web.

<A HREF=http://indirizzo_del_sito>nome_sito </A>


Ma HTML offre anche la possibilita' di usare un'immagine al posto del testo. Allo scopo si dovra' inserire il tag
per richiamare il file grafico al posto del testo stesso. Per eliminare il bordo che appare attorno all'immagine
e' sufficente inserire BORDER=0 all'interno del tag <IMG>.

<A HREF=prova.html><IMG SRC=img/link.gif></A>



I link finora presi in esame ci spostano sulla pagina prescelta. Se vogliamo invece aprire una nuova finestra
senza cosi' dover abbandonare la nostra pagina ci viene in aiuto l'elemento TARGET:

<A HREF=prova2.html TARGET=_new><IMG SRC=img/link.gif BORDER=0></A>



L'elemento ANCOR (questo e' il nome vero e proprio di un link) permette di spostarsi anche all'interno della
stessa pagina per raggiungere un punto preciso del documento. Il codice necessario va pero' suddiviso in
due parti separate.
Questa la prima parte

<A HREF=link.html#inizio_pagina>vai a inizio pagina </A>

(link.html e' il nome/file della pagina)
E questa e' la parte di codice che va posta in testa al file HTML:

<A NAME=inizio_pagina></A>

Ecco l'esempio pratico: vai a inizio pagina

Ma le opportunita' offerte dal tag <A> non sono ancora esaurite. Ci offre anche la possibilita' di avviare il
programma di posta elettronica per spedire una e-mail. La sintassi e' estremamente semplice:

<A HREF=MAILTO:@mio_indirizzo>spediscimi una e-mail</A>

spediscimi una e-mail

Il colore del link
Il colore del link puo' essere scelto secondo le preferenze personali. Per assegnare un colore ai link della
nostra pagina dovremo inserire i seguenti attributi all'interno del tag <BODY>
LINK="colore scelto" per i link non ancora visitati
VLINK="colore scelto" per i link gi visitati
ALINK="colore scelto" determina invece il colore del link nel momento in cui viene cliccato.

I protocolli
Finora abbiamo preso in esame un solo protocollo. Un protocollo e' una sorta di procedura o percorso su cui
viaggiano i nostri dati, il piu' importante dei quali e' http (HyperTextTransfertProtocol, protocollo di
trasferimento dell'ipertesto), ma anche ftp (FileTransfertProtocol). In verita' ne esistono molti altri. Citiamo
solo alcuni dei piu' importanti:
nntp://
telnet://
wais://
gopher://

I colori
Codici
In HTML e' possibile visualizzare un colore in due modi. Il primo consiste nel passare come valore
all'attributo BGCOLOR un nome di colore (in lingua inglese). Il sistema e' senz'altro valido, ma pone un limite
alla quantita' di sfumature utilizzabili.
ROSSO FF FF 00 00 FF 00 FF 00
VERDE FF 00 FF 00 FF FF 00 00
BLU FF 00 00 FF 00 FF FF 00
Colori
primari

ROSSO
VERDE
BLU
bianco

R 100%
V 100%
B 100%
rosso

R 100%
V - - - -
B - - - -
verde

R - - - -
V 100%
B - - - -
blu

R - - - -
V - - - -
B 100%
giallo

R 100%
V 100%
B - - - -
ciano

R - - - -
V 100%
B 100%
porpora

R 100%
V - - - -
B 100%
nero

R - - - -
V - - - -
B - - - -
La seconda soluzione consiste nell'uso del codice esadecimale, che non pone praticamente limiti di sorta.
Adottare questo metodo puo' sembrare complicato a prima vista, ma con un minimo di pratica si rivela
invece estremamente semplice. La tabella sopra mostra, sul lato sinistro, i tre colori primari ROSSO, VERDE
e BLU, che opportunamente miscelati ci permetteranno di ottenere una gamma estesissima. Ma qual'e' il
criterio che ci permette di miscelare questi tre colori? Si osservi la seconda colonna da sinistra. Presenta al
suo interno tre coppie di FF, ogni coppia rappresenta un colore primario (ROSSO, VERDE e BLU) alla sua
massima saturazione, che miscelati danno origine al bianco.
La colonna all'estrema destra ci mostra il risultato di cio' che si ottiene miscelando i tre colori primari a
saturazione nulla (tre coppie di zeri):
ROSSO=00
VERDE=00
BLU=00
Questo esempio dovrebbe chiarire le idee
BGCOLOR=#FF0000 BGCOLOR=#00FF00BGCOLOR=#0000FFBGCOLOR=#FFFFFF BGCOLOR=#000000
E le sfumature? Come accennato in precedenza si tratta di sistema numerico esadecimale, e per dare un'idea
senza divagare in astrattismi faremo un esempio pratico: il sistema numerico decimale si basa sul fatto che
abbiamo 5 dita per mano per un totale di 10 dita. Bene, adesso fingiamo di avere 8 dita per ogni mano, per
un totale di 16 dita, ora il nostro sistema numerico diviene a base 16.
Ecco rappresentati i nostri 16 numeri base: 0 1 2 3 4 5 6 7 8 9 A B C D E F
Ed ecco un esempio di colori miscelati
BGCOLOR=#324566 BGCOLOR=#446688 BGCOLOR=#6688AABGCOLOR=#88AACC BGCOLOR=#ABCDEF
Il sistema esa colore ci mette a disposizione ben 16.777.216 colori.

I colori sicuri
Purtroppo la grande varieta' di monitor utilizzati mette alla luce un problema: la mancata fedelta' di
riproduzione del colore. Nonostante il codice sia il medesimo, il colore visualizzato puo' essere sensibilmente
diverso. La seguente tabella mostra i cosiddetti colori sicuri, che non dovrebbero presentare questo tipo di
problematica.
white #FFFFFF black #000000 red #FF0000
magenta
#FF00FF
aqua #00FFFF
blue #0000FF lime #00FF00 yellow #FFFF00
fuchsia
#FF00FF
cyan #00FFFF


La tavolozza 'browser safe'
Premesso che si stia utilizzando un monitor relativamente recente, possiamo disporre di una palette ben piu'
ampia. Questa tavolozza di colori (in teoria) verra' interpretata allo stesso modo sia da Netscape Navigator
che da Internet Explorer prendendo il nome di 'browser safe palette'. I colori possibili sono 216.
Si noti che che suddetti colori sono ottenuti utilizzando unicamente una combinazione delle doppiette
esadecimali
00 33 66 99 cc ff.
ff
ff
ff
cc
cc
cc
99
99
99
66
66
66
33
33
33
00
00
00
ff
cc
00
ff
99
00
ff
66
00
ff
33
00

99
cc
00

cc
99
00
ff
cc
33
ff
cc
66
ff
99
66
ff
66
33
cc
33
00

cc
00
33
cc
ff
00
cc
ff
33
33
33
00
66
66
00
99
99
00
cc
cc
00
ff
ff
00
cc
99
33
cc
66
33
33
00
00
66
00
00
99
00
00
cc
00
00
ff
00
00
ff
33
66
ff
00
33
99
ff
00
cc
ff
66
99
cc
33
66
66
33
99
99
33
cc
cc
33
ff
ff
33
99
66
00
99
33
00
66
33
33
99
33
33
cc
33
33
ff
33
33
cc
33
66
ff
66
99
ff
00
66
66
ff
00
99
ff
66
66
cc
33
66
99
00
99
99
66
cc
cc
66
ff
ff
66
99
66
33
66
33
00
99
66
66
cc
66
66
ff
66
66
99
00
33
cc
33
99
ff
66
cc
ff
00
99
33
ff
00
66
ff
33
33
99
00
66
cc
00
99
ff
33
cc
cc
99
ff
ff
99
cc
99
66
cc
66
00
cc
99
99
ff
99
99
ff
33
99
cc
00
66
99
00
66
ff
33
cc
ff
00
cc
00
cc
33
cc
33
66
66
99
99
cc
cc
ff
ff
ff
ff
cc
ff
99
ff
cc
ff
99
cc
66
99
33
66
00
cc
00
33
00
00 00 00 33 66 99 cc 99 33 cc cc 99 66 33 99 33
33
cc
33
66
cc
66
00
ff
00
33
ff
33
66
ff
66
99
ff
99
cc
ff
cc

cc
99
cc
99
66
99
99
33
99
99
00
99
66
33
66
66
00
66
00
66
00
33
66
33
00
99
00
33
99
33
66
99
66
99
cc
99

ff
cc
ff
ff
99
ff
ff
66
ff
ff
33
ff
ff
00
ff
cc
66
cc
cc
33
cc
00
33
00
00
cc
33
00
66
33
33
99
66
66
cc
99
99
ff
cc
cc
ff
ff
33
99
ff
99
cc
ff
cc
cc
ff
cc
99
ff
99
66
cc
66
33
99
33
00
66
99
00
cc
cc
00
cc
00
ff
33
33
ff
66
00
99
33
00
cc
66
33
ff
99
99
ff
ff
99
cc
cc
00
66
cc
66
99
cc
99
99
ff
99
99
cc
99
33
ff
66
00
cc
66
00
99
cc
33
ff
cc
00
ff
00
ff
66
66
ff
99
33
cc
66
00
99
66
66
ff
ff
66
cc
cc
66
99
99
00
33
66
33
66
99
66
66
ff
66
66
cc
66
66
99
33
00
99
99
33
cc
cc
66
ff
99
00
ff
00
ff
99
66
ff
cc
33
cc
99
33
ff
ff
33
cc
cc
33
99
99
33
66
66
00
66
99
00
33
99
33
33
ff
33
33
cc
33
33
99
33
33
66
66
33
cc
99
66
ff
66
00
ff
00
ff
cc
33
ff
cc
00
ff
ff
00
cc
cc
00
99
99
00
66
66
00
33
33
33
99
cc
33
66
cc
00
00
ff
00
00
cc
00
00
99
00
00
66
00
00
33
66
33
ff
33
00
ff
00
cc
99

00
99
cc
33
cc
ff
66
cc
ff
66
99
ff
33
66
ff
00
33
cc

33
00
cc
00
cc
ff
00
99
ff
00
66
ff
00
33
ff


Frame -prima parte-
Il frame semplice
Una pagina composta da frame e' un insieme di due o piu' file HTML visualizzati contemporaneamente
all'interno della stessa finestra del browser (in realta' i file sono un minimo di tre, ma uno non sara' mai
visibile). L'utilita' e la praticita' di questo metodo e' tuttora fonte di discussioni, ma se ben utilizzato presenta
indubbi vantaggi. Permette ad esempio di caricare toolbar complesse composte da parecchie immagini (e
quindi lunghi tempi di visulizzazione) una volta per tutte, mentre la navigazione del sito avverra' all'interno di
questa intelaiatura (frame, appunto). Chiariremo meglio pi avanti questo concetto. Un punto a sfavore e'
l'incapacita' di certi browser di visualizzare correttamente questo tipo di pagine, ma la colpa di cio' ricade
esclusivamente sull'utente che li utilizza. Vengono infatti distribuiti gratuitamente browser abilitati a questo e
ad altri tipi di contenuti (java e linguaggi interpretati come javascript, oltre che ai css).

Passiamo ora alla realizzazione pratica dei frame. Dovremo creare tre file HTML separati:
questo il file che il browser non visualizzera', ma che avra' il compito fondamentale di delineare le
proprieta' dei frame ad esso affidati. Lo nomineremo corpo.html e scriveremo al suo interno le seguenti
righe di codice:

<HTML>

<FRAMESET COLS=100,*>

<FRAME NAME=sinistra SRC=sx.html>

<FRAME NAME=destra SRC=dx.html>

</FRAMESET>

</HTML>

il secondo lo nomineremo sx.html
editandovi questo codice:

<HTML>
<BODY BGCOLOR=yellow>

frame a sinistra

</BODY>
</HTML>

mentre il terzo lo nomineremo dx.html

<HTML>
<BODY BGCOLOR=gold>

frame a destra

</BODY>
</HTML>

Clicchiamo su corpo.html e se non avremo commesso errori il risultato sara' questo.

Passiamo ad un rapido esame di corpo.html, che e' l'unico file che presenta differenze rispetto ad un
normale file HTML:
COLS stabilisce che il frame dovr essere verticale
100 e' la larghezza in pixel del frame a sinistra (sx.html)
* stabilisce che lo spazio rimanente sara' occupato dal secondo frame (dx.html)

Nell'esempio precedente abbiamo ottenuto una pagina suddivisa dai due frame in senso verticale. Proviamo
a sostituire COLS (colonne) con ROWS (righe) all'interno del tag <FRAMESET>.

<HTML>

<FRAMESET ROWS=100,*>

<FRAME NAME=alto SRC=superiore.html>

<FRAME NAME=basso SRC=inferiore.html>

</FRAMESET>

</HTML>

Per completare l'esempio creiamo gli altri due file che andranno a costituire la pagina.
Primo file:

<HTML>
<BODY BGCOLOR=yellow>

frame in alto

</BODY>
</HTML>

Secondo file:

<HTML>
<BODY BGCOLOR=gold>

frame in basso

</BODY>
</HTML>

e otterremo questo risultato

Come si e' appena visto, la realizzazione di una pagina suddivisa in frame non e' particolarmente
impegnativa ed i limiti imposti da questa tecnica lasciano ampio spazio alla fantasia del webmaster.
I prossimi esempi mostreranno via via soluzioni piu' raffinate, per ora limitiamoci alla realizzazione di una
pagina divisa in tre frame.

<HTML>

<FRAMESET ROWS=15%,70%,15%>

<FRAME NAME=alto SRC=superiore.html>

<FRAME NAME=centro SRC=centrale.html>

<FRAME NAME=basso SRC=inferiore.html>

</FRAMESET>

</HTML>

Per evitare inutili ripetizioni non illustreremo il codice dei tre frame che, come si puo' evincere dal codice
sopra, si nomineranno superiore.html, centrale.html e inferiore.html. Si noti che per dimensionare i
suddetti frame questa volta si e' adottata la suddivisione in percentuali. Ecco il risultato.

Questo esempio utilizza la suddivisione in tre frame, ma in modo leggermente piu' complesso del
precedente. Spicca infatti la presenza di un secondo <FRAMESET>. Come al solito creeremo i tre frame
necessari: superiore.html, sinistro.html e destro.html
Segue il codice per la creazione del FRAMESET:

<HTML>

<FRAMESET rows=100,*>

<FRAME NAME=alto SRC=superiore.html>

<FRAMESET cols=100,*>

<FRAME NAME=sinistra SRC=sinistro.html>

<FRAME NAME=destra SRC=destro.html>

</FRAMESET>

</FRAMESET>

</HTML>

Controlliamo il risultato

Gli attributi
Come per altri elementi, HTML riserva alcuni attributi atti a governare specifiche proprieta'. Eccone alcuni.
Questi riguardano il bordo e andranno inseriti all'interno del tag <FRAMESET>.
FRAMEBORDER ci permette di decidere se rendere visibili o meno i bordi dei vari frame, i suoi valori sono
yes e no.
Per eliminare la sottile linea lasciata dall' attributo FRAMEBORDER conviene adottare anche BORDER=0.
BORDERCOLOR=colo e ci permette di scegliere il colore di un eventuale bordo. r

Questo attributo andra' invece posto all'interno del tag <FRAME>
NORESI ZE impedisce lo spostamento del bordo del frame (cosa possibile anche se quest'ultimo viene reso
invisibile).

I seguenti riguardano i margini e le eventuali barre di scorrimento e vanno inseriti in <FRAME>
MARGINWIDTH indica quanto spazio riservare tra il bordo destro e sinistro del frame e il suo contenuto. Il
valore va definito in pixel.
MARGINHEIGHT indica quanto spazio riservare in alto e in basso.
SCROLLING permette di decidere se visualizzare o meno una eventuale barra di scorrimento. I suoi valori
sono yes, no e auto.
Frame -seconda parte-
La navigazione nei frame
Una volta costruite le nostre pagine suddivise in frame resta da risolvere il problema dei vari collegamenti
che ci permettano la navigazione del sito. Infatti muoversi all'interno dei frame presenta una piccola
differenza rispetto alle pagine cosiddette normali. Questa differenza risiede appunto nei link, che richiedono
la presenza di un attributo che indichi al browser in quale frame aprire la nuova pagina. Procediamo con un
esempio.
Ecco i file necessari:

corpo.html (il FRAMESET)
sx.html (il frame a sinistra)
dx.html (il frame a destra)
ed inoltre nuovo.html che rappresenta la nuova pagina da caricare.
Questo e' il FRAMESET corpo.html, che non presenta differenze rispetto a quelli finora presi in esame:

<HTML>
<FRAMESET COLS=150,*>
<FRAME NAME=sinistra SRC=sx.html>
<FRAME NAME=destra SRC=ds.html>
</FRAMESET>
</HTML>


sx.html richiede invece la presenza del link che ci permettera' di caricare la nuova pagina. La differenza sta
proprio nel link, o meglio nell'attributo TARGET:

<HTML>
<BODY BGCOLOR=yellow>

<A HREF=nuovo.html TARGET=destra>carica nuovo </A>

</BODY>
</HTML>

Ecco spiegata la presenza dell'attributo NAME nel FRAMESET, infatti useremo proprio NAME=destra per
indicare al browser dove aprire la nuova pagina, che altrimenti verrebbe caricata al posto di quella su cui e'
presente il link (in questo caso sx.html).

Questo e' dx.html

<HTML>
<BODY BGCOLOR=gold>
</BODY>
</HTML>


Ed ecco nuovo.html:

<HTML>
<BODY BGCOLOR=violet>

nuova pagina

</BODY>
</HTML>

Cliccando su corpo.html otterremo questo risultato.

Adesso che sappiamo come aprire una nuova pagina, potremo aggiungere quanti link vogliamo che
condurranno ad altrettante pagine. Fortunatamente HTML ci mette a disposizione un tag che permettera' di
indicare al browser la destinazione, senza doverla specificare all'interno di ogni link. Si tratta del tag <BASE
TARGET>, che andra' posto ovviamente nel frame portante i collegamenti.
Nel caso specifico si tratta del file sx.html:

<HTML>
<BODY BGCOLOR=yellow>

<BASE TARGET=destra>

<A HREF=nuovo.html>carica nuovo </A>
<A HREF=nuovo_2.html>carica nuovo_2 </A>
<A HREF=nuovo_3.html>carica nuovo_3 </A>
<A HREF=dx.html>torna alla prima pagina </A>

</BODY>
</HTML>

Ecco l'esempio pratico di <BASE TARGET>

I valori di TARGET
A questo punto facciamo un piccolo passo indietro ed elenchiamo i valori dell'attributo TARGET, nel caso in
cui si desideri aprire una nuova pagina in una destinazione diversa da come descritto finora. L'attributo
TARGET ed i suoi valori andranno acclusi all'interno del link, ed annulleranno anche (solo per quel link) la
destinazione specificata dal tag <BASE TARGET> eventualmente presente.
<A HREF=nuova_pagina.html TARGET=_blank>
il browser aprira' la pagina in una nuova finestra prova
<A HREF=nuova_pagina.html TARGET=_top>
la nuova pagina viene aperta eliminando i frame prova
<A HREF=nuova_pagina.html TARGET=_self>
la pagina viene aperta al posto del frame su cui e' presente il link, come da default. Serve nel caso che sia
stata specificata una diversa destinazione in <BASE TARGET> prova
<A HREF=nuova_pagina.html TARGET=_parent>
l'azione di _parent e' solo teoricamente differente da quella di _top, infatti carica la nuova pagina nel
FRAMESET progenitore (nel caso di FRAMESET annidati) eliminando tutti i frame. prova

Caricare piu' frame contemporaneamente
In alcuni casi puo' essere utile, se non indispensabile, caricare due frame contemporaneamente. Questo
compito viene spesso affidato a J avascript, ma esiste un metodo ugualmente efficace offerto da HTML. Per
raggiungere lo scopo dovremo creare almeno sei file, due FRAMESET e quattro normali file HTML che
andranno a costituire i frame da visualizzare.
Ecco un elenco dei file:
index.html che e' il FRAMESET principale (N 1)
superiore.html il suo primo frame
inferiore.html il secondo frame
Questi tre file rappresenteranno cio che viene visualizzato quando apriamo la pagina. Ecco il sorgente del
FRAMESET:

<HTML>
<FRAMESET ROWS=50%,*>
<FRAME NAME=alto SRC=superiore.html>
<FRAME NAME=basso SRC=inferiore.html>
</FRAMESET>
</HTML>

Segue il codice di superiore.html che portera' i link necessari

<HTML>
<BODY BGCOLOR=yellow>
Questo frame appartiene al PRIMO <FRAMESET>
<BR>
<BR>
<A HREF=index_2.html TARGET=basso>Carica il SECONDO <FRAMESET>
nel frame in basso</A>
<BR>
<BR>
<A HREF=index.html TARGET=_top>Ritorna al frame originale
</BODY>
</HTML>

inferiore.html e' un normale frame, quindi e' superfluo mostrarne il codice.

Questo e' il sorgente del secondo FRAMESET, che verra' caricato cliccando sul link posto sul primo
FRAMESET. Anche in questo caso i due frame sono normali file HTML, e' quindi superfluo mostrarne il
sorgente.
Ecco l'elenco dei file necessari:
index_2.html che e' il FRAMESET in questione (N 2)
sx.html
dx.html
Ecco dunque il sorgente del FRAMESET index_2.html

<HTML>
<FRAMESET COLS=50%,*>
<FRAME NAME=sinistra SRC=sx.html>
<FRAME NAME=destra SRC=dx.html>
</FRAMESET>
</HTML>

E questo e' il risultato. (Per avviare l'apertura del file corretto dovremo cliccare su index.html, come viene
fatto indirettamente in questo caso cliccando sul link)
La dinamica di questa configurazione si spiega in poche parole: cliccando su index.html avvieremo un
normale FRAMESET che visualizza i suoi due frame. Il frame superiore contiene due link, il primo carichera' il
FRAMESET index_2.html al posto del frame inferiore (quello di colore arancio), mentre il secondo link
riportera' alla situazione iniziale ricaricando il suddetto frame.
Come si puo' intuire, le possibilita' di configurazione dei frame trovano un limite solo nella fantasia del
webmaster, offrendo una vasta gamma di soluzioni. Inizialmente puo' sembrare una superflua
complicazione, ma con un minimo di pratica si potranno apprezzare i vantaggi, sia sul piano estetico che
funzionale. esempio

Alcuni browser non supportano pero' la tecnica dei frame. E' quindi consigliabile accludere il tag
<NOFRAME> all'interno del FRAMESET, in modo che possano visualizzare un contenuto alternativo.
Ecco un esempio:

<HTML>
<FRAMESET COLS=100,*>
<FRAME NAME=sinistra SRC=sx.html>
<FRAME NAME=destra SRC=ds.html>
<NOFRAMES>
Spiacente, questo sito utilizza i frame che
purtroppo non sono supportati dal browser in uso.
</NOFRAMES>
</FRAMESET>
</HTML>


Fin'ora, per brevita' e quindi per semplificare la loro realizzazione, sono stati illustrati esempi di codice
incompleti se pur perfettamente funzionanti, ma non aderenti allo standard W3c. Ecco le esatte definizioni
dei FRAMESET e dei FRAME.
Il FRAMESET:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Questo e' un Frameset</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME=sinistra SRC="framesx.html">
<FRAME NAME=pagina SRC="corpo.html">
<NOFRAMES>
<H2>Spiacente, il tuo browser non e'
abilitato alla visione dei frame.</H2>
</NOFRAMES>
</FRAMESET>
</HTML>

Mentre i FRAME sono normali documenti HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Questo e' un Frame</TITLE>
</HEAD>
<BODY BGCOLOR=violet>
Questa puo' essere indifferentemente
una delle due finestre del FRAMESET.
</BODY>
</HTML>


L'<IFRAME>

L'IFRAME potrebbe rappresentare una interessante alternativa ai frame, soprattutto per la facilita' d'impiego.
Purtroppo, pur essendo approvato dalle direttive del W3C, al momento e' supportato solo da Internet
Explorer (versione 3 e successive).
P.S. Anche Netscape 6 ora supporta l'IFRAME
Spiacente, il tuo browser non supporta l'IFRAME.


Questo il codice per realizzare l'IFRAME sopra.

<IFRAME NAME=frame_interno WIDTH=500 HEIGHT=150 SRC=iframe.html>

Qui va inserito l'eventuale contenuto alternativo
per i browser che non supportano l'IFRAME.

</IFRAME>

Il contenuto dell'IFRAME sopra e' un normale file HTML, in questo caso iframe.html
Mappe
Un'interessante opportunit offerta da HTML riguarda la possibilit di
inserire pi link all'interno di una singola immagine, dividendo
quest'ultima in pi aree sensibili di forma e dimensione
accuratamente controllabili. Premettiamo fin da ora che la
suddivisione in figure complesse non cosa semplice e allo scopo
vengono commercializzati software dedicati a svolgere questo
compito. In questo capitolo prenderemo in considerazione solo le
ealizzabili manualmente con il solo ausilio di un editor per grafica, la
cui unica mansione sar di indicarci le coordinate delle varie aree sensibili (praticamente
tutti gli editor saranno in grado di svolgere questa funzione, utilizzabile anche Paint). La
figura a fianco contiene tre link collocati rispettivamente nell'occhio sinistro, in quello
destro e sulla bocca della fiera, che rimanderanno ognuno ad un capitolo differente. Un
semplice trucco (solo Internet Explorer) per visualizzare le varie aree sensibili consiste nel
premere il pulsante sinistro del mouse quando il cursore prende le sembianze tipiche di
una manina e, senza rilasciarlo, di spostarci all'esterno della figura.
forme geometriche r
Diamo uno sguardo al codice:

<IMG SRC=img/tigre.jpg USEMAP=#tigre BORDER=0>

<MAP NAME=tigre>

<AREA SHAPE=circle COORDS="70,100 20" HREF=testo.html>

<AREA SHAPE=rect COORDS="80,35 105,60" HREF=link.html>

<AREA SHAPE=poly COORDS="25 55, 45 30, 65 55" HREF=immagini.html>

</MAP>
il codice qu sopra, oltre ai tag <IMG> e <MAP>, presenta tre tag <AREA SHAPE>, uno per ogni area
sensibile.
Negli esempi seguenti illustreremo le coordinate facendo uso di semplici grafici cartesiani e rappresenteremo
in rosso i valori corrispondenti alle ascisse e in blu quelli corrispondenti alle ordinate.
Prenderemo in esame per primo quello denominato circle (la bocca) essendo il pi semplice da
comprendere.


<AREA SHAPE=circle COORDS="70,100 20" HREF=testo.html>


La figura a fianco (in scala reale) mostra le coordinate usate per definire l'area
sensibile della bocca. Tutti i valori sono espressi in pixel. Diamo uno sguardo al
tag interessato: circle stabilisce che l'area sar circolare, COORDS definisce
tre valori: 70 la distanza del centro dell'area dal bordo sinistro
dell'immagine, 100 la distanza dal bordo superiore, mentre 20 rappresenta
il raggio della zona sensibile, che avr perci un diametro di 40 pixel.


<AREA SHAPE=rect COORDS="80,35 105,60" HREF=link.html>


Questa immagine rappresenta invece l'occhio destro ed il modo di definire
le coordinate differisce leggermente da quello della figura precedente.
Abbiamo infatti quattro numeri significativi: 80 la distanza dal bordo
sinistro dell'immagine al lato sinistro dell'area, 35 quella dal bordo
superiore dell'immagine al lato superiore dell'area. La loro intersezione
definisce un punto preciso (rappresentato dal numero 1) che insieme a
quello generato dalle coordinate 105,60 (il numero 2) consente di
delimitare l'area da noi cercata.


<AREA SHAPE=poly COORDS="25 55, 45 30, 65 55" HREF=img.html>


La delimitazione di quest'area richiede di specificare due valori in pi
rispetto alla precedente, ma il principio il medesimo: infatti l'intersezione
delle linee corrispondenti ai numeri 25 e 55 permette di definire un punto
preciso (l'angolo sinistro dell'area sensibile, rappresentato dal numero 1
nella figura).
Le altre due coppie di numeri indicheranno rispettivamente l'angolo
superiore e quello destro.

Un software specifico permettera' di delimitare aree complesse, compito estremamente impegnativo da
svolgere manualmente.


<IMG SRC=img/chiavi.gif USEMAP=#chiavi BORDER=0>

<MAP NAME=chiavi>

<AREA SHAPE=poly HREF=javascript:void(null)
COORDS="11,9, 5,15, 5,22, 11,28, 11,42, 14,51, 20,52, 22,50, 27,53,
30,53, 32,49, 32,33, 35,33, 37,37, 41,40, 48,47, 54,47, 54,38,
40,24, 40,16, 34,10, 28,8, 24,5, 19,5, 16,9">

</MAP>


I form
Previsti fin dalla versione di HTML 2.0, il form (o modulo) resta l'unica possibilita' di interazione con un
computer remoto tramite l'immissione di dati nella pagina HTML.
Il tag <FORM>, in realta', funziona da contenitore per una serie di altri elementi:
<INPUT ...>
<OPTION>
<SELECT>
<TEXTAREA ...>
<LABEL ...>
Incontreremo piu' avanti questi tag, cercando di aggiungere una breve descrizione del loro operato.

Ecco un semplice esempio di form:
Il tuo nome: La tua e-mail:
Se vuoi aggiungere qualche commento, scrivi nel campo qui' sotto:

Invia query Reimposta

Questo form permette di inserire il proprio nome, l'indirizzo e-mail, un commento e di spedire il tutto, tramite
un clic sul bottone "Invia query", ad un computer dotato di un apposito programma che tratti i dati in modo
prestabilito. In alternativa, il bottone "Reimposta" cancellera' tutti i dati inseriti.
Ora esaminiamo il codice sorgente:

<FORM METHOD=post ACTION="http://www.unsito.com/formscript.cgi">
<CENTER>

Il tuo nome: <INPUT TYPE=text NAME=name SIZE=20>

La tua e-mail: <INPUT TYPE=text NAME=email SIZE=20>

<P>Se vuoi aggiungere qualche commento, scrivi nel campo qui' sotto:

<TEXTAREA NAME=Comments ROWS=10 COLS=40>

</TEXTAREA>

<P><INPUT TYPE=submit><INPUT TYPE=reset>

</CENTER>
</FORM>


<FORM METHOD=post ACTION="http:/ / www.unsito.com/ formscript.cgi">
L' attributo METHOD=post lascia spazio a pochi dubbi, significa che il contenuto del form deve essere
spedito.
Ecco che ACTION="http:/ / www.unsito.com/ formscript.cgi" ci indica con chiarezza l'indirizzo web del
computer e l'indirizzo del destinatario finale, formscript.cgi, che altro non e' che il programma deputato
alla elaborazione dei dati. Da qui' una importante premessa: i form danno risultati acettabili solamente in
abbinamento ad un programma cgi (di solito residente sul server che ospita il sito).

<INPUT TYPE=text NAME=name SIZE=20>
Questo campo di imput permette di inserire il nome, al massimo 20 caratteri. (SIZE=20)
<INPUT TYPE=text NAME=email SI ZE=20>
L' unica differenza dal tag precedente e' il tipo di imput da inserire, in questo caso l'indirizzo di posta
elettronica.

<TEXTAREA NAME=Comments ROWS=10 COLS=40>
TEXTAREA e' il campo per immettere il commento (ROWS indica il numero di righe, COLS il numero di
caratteri per ogni riga)

<INPUT TYPE=submit> <INPUT TYPE=reset>
Ed eccoci finalmente ai tag che generano i due bottoni, la loro azione e' facilmente intuibile.

Gli altri elementi
Il form puo' disporre di altri elementi per far fronte a svariate esigenze. Di seguito verranno illustrati i tag
per generarli e la descrizione della loro azione.

I NPUT TYPE=text
Inserisci il tuo nome


<INPUT TYPE=text NAME=nome MAXLENGTH=30 SIZE=30 VALUE="Inserisci il tuo nome">

Questo elemento merita un po' di attenzione supplementare, se non altro per fornire informazioni utili
riguardo agli attributi che contiene.
MAXLENGTH=30 indica che si potranno inserire al massimo 30 caratteri
SI ZE=30 secondo le specifiche di HTML 4.0 questo attributo dovrebbe definire la larghezza del
campo utile in caratteri..., condizione non sempre rispettata dai browser.
VALUE="Inserisci il tuo nome" imposta del testo di default, in questo caso nserisci il tuo nome I

I NPUT TYPE=password


<INPUT TYPE=password MAXLENGTH=30 SIZE=30>

L'unica differenza rispetto al tag precedente riguarda il fatto che il testo inserito viene visualizzato sotto
forma di asterischi. Questo farebbe pensare ad esigenze di sicurezza, in realta' i dati non vengono affatto
codificati.

INPUT TYPE=checkbox


<INPUT TYPE=checkbox NAME=qualunque VALUE=yes checked>

L'attributo checkbox visualizza una casellina quadrata usata solitamente per input del tipo si/no. Se
l'attributo VALUE presenta il valore yes la casella si presenta gia' spuntata. Checked viene usato dal browser
per controllarne lo stato all'apertura della pagina, nel caso che VALUE sia impostato su yes i dati vengono
inoltrati al programma cgi.

I NPUT TYPE=radio
discreto buono ottimo

<INPUT TYPE=radio NAME=vota VALUE=discreto><B>discreto</B>
<INPUT TYPE=radio NAME=vota VALUE=buono><B>buono</B>
<INPUT TYPE=radio NAME=vota VALUE=ottimo><B>ottimo</B>

Questo attributo permette di operare piu' scelte in merito ad un dato argomento.
Se l'attributo NAME presenta lo stesso valore (in questo caso vota) in comune a piu' caselle RADIO, solo
una di esse potra' essere spuntata.

SELECT
VOTA


<SELECT NAME=giudizio>
<OPTION VALUE=vota selected>VOTA
<OPTION VALUE=discreto>Discreto
<OPTION VALUE=buono>Buono
<OPTION VALUE=ottimo>Ottimo
</SELECT>

La funzione dell'elemento SELECT e' molto simile a RADIO permettendo, tramite un menu a discesa, la
spunta di una sola scelta per volta. La voce selected permette la spunta automatica di una voce (in questo
caso VOTA).
Quella sotto e' una variante di SELECT, l'unica differenza consiste nel fatto che non presenta un menu a
discesa, ma le voci sono esposte direttamente.
VOTA


<SELECT NAME=giudizio multiple>
<OPTION VALUE=vota selected>VOTA
<OPTION VALUE=discreto>Discreto
<OPTION VALUE=buono>Buono
<OPTION VALUE=ottimo>Ottimo
</SELECT>

L'unica differenza che possiamo notare nel codice e' la presenza della parola multiple.

INPUT TYPE=image

<INPUT TYPE=image SRC=img/invia.gif>
IMAGE ha la stessa funzione del bottone SUBMI T, la differenza sta nella possibilita' visualizzare
un'immagine al posto del solito pulsante.


Entit
I simboli generati dalle entita' possono tornare utili in varie circostanze, l' impiego piu' comune puo'
riguardare il semplice marchio di copyright , oppure la e commerciale & o il marchio registrato .
La tabella sotto illustra simboli per ogni uso ed il corrispondente codice per crearli.
&nbsp; &#160; &ETH; &#208;
&iexcl; &#161; &Ntilde; &#209;
&cent; &#162; &Ograve; &#210;
&pound; &#163; &Oacute; &#211;
&curren; &#164; &Ocirc; &#212;
&yen; &#165; &Otilde; &#213;
&brvbar; &#166; &Ouml; &#214;
&sect; &#167; &times; &#215;
&uml; &#168; &Oslash; &#216;
&copy; &#169; &Ugrave; &#217;
&ordf; &#170; &Uacute; &#218;
&laquo; &#171; &Ucirc; &#219;
&not; &#172; &Uuml; &#220;
&shy; &#173; &Yacute; &#221;
&reg; &#174; &THORN; &#222;
&macr; &#175; &szlig; &#223;
&deg; &#176; &agrave; &#224;
&plusmn; &#177; &aacute; &#225;
&sup2; &#178; &acirc; &#226;
&sup3; &#179; &atilde; &#227;
&acute; &#180; &auml; &#228;
&micro; &#181; &aring; &#229;
&para; &#182; &aelig; &#230;
&middot; &#183; &ccedil; &#231;
&cedil; &#184; &egrave; &#232;
&sup1; &#185; &eacute; &#233;
&ordm; &#186; &ecirc; &#234;
&raquo; &#187; &euml; &#235;
&frac14; &#188; &igrave; &#236;
&frac12; &#189; &iacute; &#237;
&frac34; &#190; &icirc; &#238;
&iquest; &#191; &iuml; &#239;
&Agrave; &#192; &eth; &#240;
&Aacute; &#193; &ntilde; &#241;
&Acirc; &#194; &ograve; &#242;
&Atilde; &#195; &oacute; &#243;
&Auml; &#196; &ocirc; &#244;
&Aring; &#197; &otilde; &#245;
&AElig; &#198; &ouml; &#246;
&Ccedil; &#199; &divide; &#247;
&Egrave; &#200; &oslash; &#248;
&Eacute; &#201; &ugrave; &#249;
&Ecirc; &#202; &uacute; &#250;
&Euml; &#203; &ucirc; &#251;
&Igrave; &#204; &uuml; &#252;
&Iacute; &#205; &yacute; &#253;
&Icirc; &#206; &thorn; &#254;
&Iuml; &#207; &yuml; &#255;

Metatag
Abbiamo fondamentalmente due tipi di metatags; al primo tipo, il piu' importante, viene demandato il
compito di aiutare i motori di ricerca nell'indicizzazione del sito, fatta eccezione per un paio di essi che non
svolgono altro compito che ricaricare automaticamente la pagina che ne porta il codice, oppure di
redirezionare il browser ad un altro documento. Infine, la seconda tipologia rientra nella 'nicchia' del
cosiddetto codice proprietario, in quanto vengono interpretati solamente dai browser Microsoft. Si ricordi
che, di qualunque tipo siano, il loro codice deve essere posto all'interno dei tag <HEAD> e </HEAD>.
Meta per i motori di ricerca
Seppure sembri che le ultime generazioni dei motori di ricerca abbiano apparentemente perso un po' di
'interesse' nei confronti dei metatags, vale senz'altro la pena adottarli. In passato erano considerati
fondamentali per ottenere un buon posizionamento ma, come acennato in precedenza, i potenti software dei
motori di ricerca hanno ampliato e mutato i loro criteri di indicizzazione volgendo lo sguardo verso altri tipi di
parametri. Segue un elenco dei principali meta in ordine di importanza.
<META NAME="keywords" CONTENT="parole chiave">
Questo il meta pi importante, viene usato dai motori di ricerca per catalogare la pagina. Se il sito
nell'esempio si occupasse di astronomia alcune possibili parole chiave potrebbero essere galasssie, nebulose,
pianeti, ecc. . Si consiglia di non ripetere le parole e di non eccedere nel numero delle stesse (max 1000
caratteri).

<META NAME="description" CONTENT="www.astronomia.it il sito dell'astronomo dilettante">
Altro meta importante. Usato dai motori di ricerca per associare il link al sito (max 300 caratteri).

<META NAME="robots" CONTENT="index,follow">
Questo meta indica ai motori di ricerca se indicizzare o meno la pagina. Come si evince dall'esempio il
motore e' autorizzato a indicizzare la pagina e a proseguire con i documenti ad essa collegati. Gli altri due
possibili valori sono noindex e nofollow.

<META NAME="revisit-after" CONTENT="30 days">
Viene invitato il motore a rivisitare la pagina ogni 30 giorni.

<META NAME="language" CONTENT="Italian">
Per specificare la lingua usata nel documento.

<META NAME="author" CONTENT="nome dell'au ore"> t
In questo meta e' possibile specificare il nome dell'autore (o degli autori) della pagina in questione.

<META NAME="generator" CONTENT="metapad">
Questo meta serve a specificare l'editor utilizzato per creare la pagina.
Naturalmente esistono molti altri metatag di possibile utilizzo, ma probabilmente di minore importanza ai fini
del posizionamento del sito. Per un elenco piu' completo si vedano gli indirizzi alla sezione Utilita'.

Meta di "refresh"
I meta di refresh non vengono utilizzati dai motori, servono unicamente per scopi legati ad altre esigenze. E'
doveroso puntualizzare che potrebbero essere addirittura poco graditi da questi ultimi, soprattutto quando
rimandano ad una pagina differente.
<META http-equiv="refresh" CONTENT="30">
Questo meta serve per ricaricare la pagina ogni tot secondi (in questo caso 30). In alternativa si puo'
indicare al browser di caricare una pagina differente:
<META http-equiv="refresh"; CONTENT="30 URL=altra_pagina.html">

Metatag proprietari
Questi meta svolgono unicamente una mansione estetica, creando interessanti effetti di transizione
all'apertura o alla chiusura della pagina su cui sono posti. Funzionano unicamente con i browser Microsoft e
si sudddividono essenzialmente in due categorie, la prima e' usufruibile a partire dalla versione 4.0 di
Internet Explorer, mentre la seconda e' interpretabile unicamente dalle versioni 5.5 in poi. Ecco un esempio
di sintassi:
Prima categoria
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=0.5,Transition=1)">
il valore "Page-Enter" puo' essere sostituito con "Page-Exit" ottenendo l'effetto all'uscita dalla pagina.
clicca per una dimostrazione
L'attributo Transition puo' essere impostato su 23 possibili valori, l'ultimo dei quali genera un effetto
'random' mostrando a caso una delle precedenti 22 transizioni ad ogni apertura di pagina. Segue una breve
descrizione dei 23 valori:
0 : apre dai bordi con un rettangolo
1 : apre dal centro con un rettangolo
2 : apre dai bordi con cerchio
3 : apre dal centro con un cerchio
4 : apre dal basso
5 : apre dall'alto
6 : apre da sinstra
7 : apre da destra
8 : apre con "veneziana" verticale
9 : apre con "veneziana" orizzontale
10 : apre a scacchi da sinistra
11 : apre a scacchi dall'alto
12 : apre in dissolvenza
13 : apre da ds e da sx
14 : apre dal centro verso ds e sx
15 : apre dall'alto e dal basso
16 : apre dal centro con una linea orizzontale
17 : apre dall'angolo in alto a destra
18 : apre dall'angolo in basso a ds
19 : apre dall'angolo in alto a sinistra
20 : apre dall'angolo in basso a sinistra
21 : apre con tante righe orizzontali
22 : apre con tante righe verticali
23 : da qu in poi apre random
Quest'ultimo, non compreso nella precedente lista, crea un effetto fading:
<META http-equiv="Page-Enter" CONTENT="blendTrans(Duration=0.5)">

Seconda categoria
Questi sono i meta di transizione interpretati dalle versioni di Internet Explorer 5.5 in poi. Il codice sotto ne
mostra un bell'esempio.
<META http-equiv="Page-Enter"
CONTENT="progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50,duration=4)">
clicca per una dimostrazione
Ecco la lista delle transizioni. Per brevita' ne elencheremo solo il contenuto senza i possibili valori (per es.
MaxSquare=50,duration=4).
Pixelate()
RandomDissolve()
Iris(irisStyle='star', motion='out')
Iris(irisStyle='diamond', motion='in')
Iris(irisStyle='cross', motion='out')
Iris(irisStyle='circle', motion='in')
Iris(irisStyle='square', motion='out')
Iris(irisStyle='plus', motion='in')
Barn(orientation='vertical' motion='in')
Barn(orientation='vertical' motion='out')
Barn(orientation='horizontal' motion='in')
Barn(orientation='horizontal' motion='out')
Inset()
Checkerboard(Direction='left')
Checkerboard(Direction='right')
Checkerboard(Direction='down')
Checkerboard(Direction='up')
RandomBars(motion='horizontal')
RandomBars(motion='vertical')
Slide(bands=5, slideStyle='push')
Slide(bands=5, slidestyle='swap')
Slide(bands=5, slidestyle='hide')
Spiral()
Stretch(stretchStyle='push')
Stretch(stretchstyle='spin')
Stretch(stretchstyle='hide')
Wipe(GradientSize=.50, wipeStyle=0, motion='forward')
RadialWipe(wipeStyle='clock')
RadialWipe(wipeStyle='radial')
RadialWipe(wipeStyle='wedge')
Zigzag(motion='leftup')
Strips(motion='leftup')
Strips(motion='rightup')
Strips(motion='leftdown')
Strips(motion='rightdown')
Wheel(spokes=8)
Inset()
Fade(overlap=1)
Tutorial
Una volta imparati i tag fondamentali, il Webmaster principiante si pone le classiche domande: da dove
cominciare? Come dare una struttura alla pagina?
Questo aspetto viene quasi puntualmente tralasciato dalle varie guide per HTML (e, fatto ben piu' grave,
anche da guide a linguaggi decisamente piu' ostici da comprendere).
Cerchiamo allora di porre un rimedio a questa mancanza, definendo gli aspetti piu' importanti riguardanti
l'impaginazione del documento.
Passo 1
Probabilmente la cosa migliore da fare e' racchiudere l'intero contenuto in una tabella, disponendo i vari
elementi al suo interno, comprese ulteriori tabelle. Questo metodo, a mio avviso uno dei piu' validi, impone
pero' una scelta importante: e' meglio impostare le dimensioni della tabella principale in termini assoluti o
relativi?
Cerchiamo di chiarire. Per assoluti si intende il dimensionamento in pixel, per relativi, in percentuale. Visto
che un esempio vale piu' di mille parole, procediamo.
Ovviamente dovremo prima scrivere i tag fondamentali:

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>

</BODY>
</HTML>


Passo 2
Passiamo ora alla tabella 'portante'. Personalmente preferisco l'impostazione delle dimensioni in pixel. Non si
tratta di una scelta arbitraria, dobbiamo infatti tenere presente che non tutti usano monitor della stessa
dimensione e risoluzione. Questo fatto ha alcune conseguenze sulla impaginazione a volte deleterie, puo'
scombinare completamente la disposizione degli oggetti che avremo 'cesellato' con tanta cura.
Ci riferiremo percio' alla classica risoluzione 800x600, la piu' diffusa in assoluto.

<HTML>
<HEAD><TITLE>Il layout </TITLE></HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center>
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</BODY>
</HTML>

La misura riguardante l'altezza serve al solo scopo didattico e una volta 'riempita' la pagina si rendera'
inutile. L'allineamento invece e' estremamente importante: manterra' il contenuto della nostra pagina al
centro dello schermo, quale che sia la risoluzione impostata dall'utente.
(Per una dimostrazione provare ad impostare la risoluzione a 1024x768 o superiore)
Ecco come si presenta

Passo 3
A questo punto possiamo procedere alla suddivisione della pagina in settori distinti; la parte superiore per un
eventuale logo, il lato a sinistra per i link mentre lo spazio rimanente sara' destinato al contenuto vero e
proprio.

<HTML>
<HEAD><TITLE>Il layout </TITLE></HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center>
<TR>
<TD HEIGHT=50>Qui metteremo il logo </TD>
</TR>
<TR>
<TD>Mentre all'interno di questa cella costruiremo un'altra tabella </TD>
</TR>
</TABLE>
</BODY>
</HTML>

clicca per vedere l'esempio

Passo 4
L'esempio sopra serve per dare una indicazione dei contenuti da inserire. Ora procediamo di un altro passo
inserendo il logo nella cella superiore e una tabella in quella inferiore.

<HTML>
<HEAD><TITLE>Il layout </TITLE></HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center>
<TR>
<TD HEIGHT=50><IMG SRC=tute_img/logo.jpg></TD>
</TR>
<TR>
<TD>

<TABLE BORDER=1 WIDTH=100% HEIGHT=100%>
<TR>
<TD WIDTH=145>cella per i link </TD>
<TD>cella per il testo </TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>
</BODY>
</HTML>

visualizza l'esempio

Passo 5
Trattandosi di un 'sito' a carattere astronomico diviene quasi d'obbligo impostare lo sfondo di colore nero.
Questo perche' le eventuali immagini che verranno inserite avranno appunto il nero quale colore dominante.
Di conseguenza imposteremo il testo su toni chiari (bianco). E' consigliabile dare colori chiari anche ai link.
Effettueremo queste modifiche operando all'interno del tag BODY.

<BODY BGCOLOR=black TEXT=white LINK=#8888ff VLINK=gold>

visualizza l'esempio

Passo 6
A questo punto inseriamo testo e link.

<HTML>
<HEAD><TITLE>The Moon </TITLE></HEAD>
<BODY BGCOLOR=black TEXT=white LINK=#8888ff VLINK=gold>
<TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center>
<TR>
<TD HEIGHT=50><IMG SRC=tute_img/logo.jpg></TD>
</TR>
<TR>
<TD>

<TABLE BORDER=1 WIDTH=100% HEIGHT=100%>
<TR>
<TD WIDTH=145>
<A HREF=#>La Luna [Home Page]</A> <BR>
<A HREF=#>La storia </A> <BR>
<A HREF=#>Le fasi </A> <BR>
<A HREF=#>Carta lunare 1 </A> <BR>
<A HREF=#>Carta lunare 2 </A> <BR>
<A HREF=#>Carta lunare 3 </A> <BR>
<A HREF=#>Carta lunare 4 </A> <BR>
<A HREF=#>Carta lunare 5 </A> <BR>
<A HREF=#>Carta lunare 6 </A> <BR>
<A HREF=#>I principali crateri </A><BR>
<A HREF=#>I mari </A> <BR>
<A HREF=#>La faccia nascosta </A> <BR>
<A HREF=#>Link </A>
</TD>
<TD>
La Luna, satellite naturale della Terra e suo piu' prossimo vicino
celeste, e' un oggetto di perenne fascino per l'osservazione con
strumenti di qualsiasi dimensione. Nonostante le sue piccole
dimensioni (3476 Km di diametro, circa un quarto di quelle della
Terra) essa e' tanto vicina, in media 384.400 Km, che anche un
comune binocolo rivela una dovizia di particolari della sua
superficie piena di crateri.<BR>
Ogni mese la Luna attraversa un ciclo di fasi, dalla luna nuova
(non illuminata) alla luna crescente (primo quarto), alla luna
piena, alla luna calante (ultimo quarto), per ritornare alla luna
nuova. Strettamente parlando, vi sono due tipi di mese. Il primo
dura 27,3 giorni, il tempo che la Luna impiega per compiere una
rivoluzione intorno alla Terra rispetto a un punto fisso, come
le stelle remote; questo e' chiamato <I>mese siderale</I>.
Ma la Terra, durante questo tempo, si muove anch'essa rispetto
al Sole, sicche' la Luna deve compiere qualcosa di piu' di una
rivoluzione per ritornare alla medesima fase osservata dalla Terra.
Il tempo che la Luna impiega a compiere un'intero ciclo di fasi,
29,5 giorni, si chiama <I>mese sinodico</I>. Ogni punto
della superficie lunare e' illuminato dalla luce del Sole per due
settimane, durante le quali la temperatura superficiale raggiunge
il punto di ebollizione dell'acqua (circa 100 C), seguite da una
notte di due settimane, in cui la temperatura piomba a -170 C.
La Luna ruota sul proprio asse ogni 27,3 giorni, lo stesso tempo
che impiega per compiere una rivoluzione intorno alla terra,
sicche' ci rivolge sempre la stessa faccia. In pratica, pero',
possiamo vedere qualcosa di piu' di meta' della superficie della
Luna. L'orbita lunare e' inclinata di circa 5 rispetto all'eclittica
e l'asse della Luna e' inclinato di circa 1,5 rispetto alla sua
orbita, sicche' talvolta possiamo vedere fino a 6,5 oltre i poli
nord o sud della Luna; questo fenomeno viene chiamato
<I>librazione in latitudine</I>. Inoltre, la velocita' con
cui la Luna si muove lungo la sua orbita ellittica varia
ritmicamente come essa si avvicina o si allontana dalla Terra,
mentre il suo asse di rotazione rimane costante. Mentre ruota
intorno alla Terra, la Luna nella sua orbita sembra quindi
oscillare leggermente a est e a ovest, cosicche' possiamo vedere
fino a circa 7 oltre a ciascun bordo; questo fenomeno e'
chiamato <I>librazione in longitudine</I>. L'effetto
complessivo di queste librazioni e' che possiamo vedere il 59%
della superficie della Luna. <A HREF=#>continua >></A>

</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>
</BODY>
</HTML>

visualizza l'esempio

Passo 7
Possiamo ora occuparci del lato estetico, ossia conferire lo stile che preferiamo alle nostre pagine:
- portare TOPMARGIN, LEFTMARGIN, MARGINWIDTH e MARGINHEIGHT della pagina a zero
- azzerare il bordo alle tabelle
- impostare a zero CELLPADDING e CELLSPACING della tabella principale
- eliminare le altezze relative alle tabelle, ormai inutili
- adottare un font piu' elegante.
Un accorgimento utile per la navigazione potrebbe essere il 'linkaggio' del logo di tutte le pagine del sito, in
modo che un click su di esso ci riporti alla homepage. Sempre allo scopo di favorire la navigabilita', in tutte
le pagine dovra' essere presente la cella dei link. Troppo spesso si incontrano infatti siti magari ricchi di
contenuti e graficamente accattivanti, ma praticamente impossibili da navigare. Questi piccoli accorgimenti
potrebbero evitare la fuga di eventuali visitatori dal nostro sito.
ecco come appare
Pubblicazione
Portare il sito nel World Wide Web
Una volta terminata la realizzazione del sito in locale (sul proprio PC) e attentamente collaudato in ogni
particolare, quali la funzionalita' dei collegamenti, l'effettiva presenza delle eventuali immagini inserite ecc.,
e' giunto il momento fatidico della pubblicazione. O quasi. Un elemento da non tralasciare e' il collaudo dello
stesso in differenti browser accertandosi della corretta visualizzazione e, in caso contrario, apportando le
dovute modifiche. Si tenga comunque presente che e' improbabile, se non addirittura impossibile
(soprattutto nel caso di siti di una certa complessita'), l'assenza di lievi differenze. E' invece fondamentale,
ancora una volta, la piena accessibilita' a tutto il contenuto.
Per l'upload del sito sul server web si e' scelto il programma FTP Su er, sia per la sua relativa facilita' d'uso
sia per il suo ineccepibile funzionamento, senza tralasciare il fatto che e' assolutamente freeware (non contiene
spyware e non scarica banner pubblicitari dalla rete). Per procurarsi il suddetto programma, d'ora in poi detto client, si
veda la sezione
rf
Utilita'.
La configurazione
Avviamo il nostro client FTP e procediamo alla configurazione dei parametri indispensabili. La figura sotto
mostra la semplice interfaccia di FTP Surfer. Si noti alla sinistra la 'finestra' Explorer contenente le due icone
'Internet' e 'My Neyghborhood' che rappresentano il nostro futuro sito in Internet.



Un clic con il tasto destro del mouse sull'icona in
basso aprira' un menu' contestuale. Si scelga la voce
'New Site Profile' per configurare i dettagli nella
finestra che apparira' in seguito.


I parametri per il server
I vari parametri per accedere al server web ci verranno forniti dal provider che ospitera' il nostro sito. Questi
constano essenzialmente di tre voci:
l'indirizzo FTP del server (ad esempio ftp.xoom.it)
il nome utente (o user name) che avremo scelto al momento dell'iscrizione
ed infine la password, anche questa definita al momento dell'iscrizione
Passiamo alla compilazione dei vari campi della finestra 'Profiles'. (Figura sotto)
Il campo Name servira' solo a noi per per identificare il nostro sito. Nell'esempio si e' scelto Sito
web. Questo e' ininfluente ai fini della connessione.
Address. Questo campo e' invece fondamentale, qui dovremo digitare l'indirizzo FTP del server web
che ci ospitera'.
Description. Anche questo e' ininfluente ai fini della connessione.
Server type. Non tocchiamo nulla, la voce di default 'Auto detect' fa al caso nostro.
User profile. Di default e' impostata su 'Anonymous', dovremo quindi reimpostarla su 'User defined'
cliccando sulla freccetta rivolta verso il basso. Di conseguenza appariranno i campi User name e
Password.
User name. In questo campo dovremo inserire il nostro nome utente scelto al momento
dell'iscrizione.
Infine nel campo Password digiteremo la nostra password.
Explore from. Lasciamo su 'Login folder' questa voce.
La configurazione per il server web e' ultimata.



La cartella 'Upload'

La definizione della cartella di Upload
non e' obbligatoria ma risultera' essere
comoda al momento di trasferire i file
sul server. Sempre dalla finestra Profiles
cliccare sulla linguetta Upload e poi sul
bottone
apparira' la finestra 'Default upload
location'. Definiamo il percorso della
cartella contenente il sito da pubblicare.



Il server web potrebbe non supportare il passive mode, nel caso, dalla finestra principale del nostro client
clicchiamo su 'Tools' e poi su 'Options', selezioniamo la scheda 'Connection' e deselezioniamo la casella
'Always use PASV mode'.



L' 'Upload' dei file
Arrivato il momento di portare il sito sul server web dovremo avviare il client FTP. Fatto questo, con un clic
sull'icona SITO (o qualunque sia il nome che avremo assegnato in precedenza) il client si colleghera'
automaticamente con il server. La finestra destra di FTP Surfer, che visualizza l'interno della cartella che il
server web ci ha assegnato, dovrebbe presentarsi vuota come nella figura sotto. Un altro clic sull'icona
'Upload' aprira' la finestra 'File upload'.


Ora bastera' selezionare il file da
trasferire e cliccare sul bottone
'Apri' per iniziare l'upload.
In alternativa alla finestra 'File upload' e' possibile trasferire i file direttamente da Esplora risorse, un clic sul
menu' 'Tools' e quindi su 'Windows Explorer' permettera' di trasferire i file voluti. Adottando quest'ultima
possibilita' potremo semplicemente trascinare i file nella finestra di FTP Surfer per iniziare l'upload.
Una volta completata la pubblicazione del sito sara' buona norma avviare il browser e controllare
attentamente che sia tutto funzionante, non e' affatto remota la possibilita' che qualche file si sia perso nei
meandri della grande rete.