Sei sulla pagina 1di 252

Guida HTML | Indice delle lezioni | HTML.

it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
Hosting Italiano
U L T I M ' O R A
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Kazaa, odore di stretta
finale
La Finlandia contro
Internet Explorer
Le altre news
di Wolfgang Cecchin
w.cecchin@html.it
L'HTML il principale linguaggio di pubblicazione di pagine Web. Seguendo
questa guida imparerai a realizzare siti in HTML, implementando moduli,
costruendo tabelle e altro ancora. La guida rivolta a coloro che vogliono
imparare l'HTML ma fornisce spunti anche per gli utenti esperti.
Percorso consigliato: principianti
Livello di difficolt:
Corsi di formazione in aula su HTML
La vecchia guida all'HTML
Cerchi la vecchia guida all'HTML? Non l'abbiamo cancellata, basta cliccare sul link!
Navigatore
La pagina HTML
HTML e CSS
Lo Sfondo
Il testo
I link
Le immagini
Le tabelle
I Frame
I Moduli o Forms
Inclusioni audio e
video
Introduzione [torna su]
1. Come funziona un browser
Cosa sono i browser e come utilizzarli per visualizzare il codice HTML
2. Cos' l'HTML
Cosa significa HTML e cosa si intende per TAG
3. Prima di cominciare davvero: lo standard HTML
Gli standard dell'HTML attuale e le sue prossime evoluzione per il W3C
Come fatta una pagina HTML [torna su]
4. L'estensioni dei file e le impostazioni del browser
Mettiamo a punto il nostro sistema utilizzando il primo file .html
5. I TAG dell'HTML: come scriverli
file:///F|/Corsi/HTML/index.html (1 di 5)01/12/2004 21.14.23
cerca
cerca
Guida HTML | Indice delle lezioni | HTML.it
U L T I M ' O R A
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Kazaa, odore di stretta
finale
La Finlandia contro
Internet Explorer
Le altre news
Cosa sono i TAG HTML e la scrittura ad indentazione
6. I commenti
Inserire commenti nel codice HTML per aiutare l'orientamento nel
codice
7. Maiuscolo o minuscolo?
I Tag HTML possono essere scritti sia in maiuscolo sia in minuscolo
8. Struttura della pagina
L'intera struttura della nostra prima pagina HTML
L'HTML e i fogli di stile (CSS) [torna su]
9. Separare il layout dal contenuto
Le nuove esigenze della progettazione di pagine HTML con i CSS
10. Gli elementi HTML e i fogli di stile
La classificazione dei TAG HTML in rapporto ai CSS
Lo sfondo di un documento HTML [torna su]
11. Impostare il colore di sfondo
Come scegliere e come impostare il colore di sfondo di una pagina
Web
12. Inserire unimmagine di sfondo
Come inserire un'immagine sullo sfondo della propria pagina Web
13. Eliminare i margini delle pagine
Come eliminare i margini per visualizzare una pagina Web in tutta la
superficie del browser
14. Impostare la lingua del documento
Come impostare la lingua di un documento HTML
15. Approfondimenti: lo sfondo con i CSS
Lo sfondo di un documento HTML pu essere impostato anche per
mezzo dei fogli di stile
Il testo di un documento HTML [torna su]
16. Impostare il colore del testo e dei link per tutta la pagina
Come scegliere il colore del testo e come cambiare i colori dei link
nella pagina HTML
17. Titoli, paragrafi, blocchi di testo e contenitori
Formattare il testo in una pagina web secondo le sue funzioni
18. Scegliere lo stile (grassetto, corsivo & C.)
Come modificare lo stile del carattere di una pagina Web
19. Scegliere il font del testo.
Uno sguardo al passato: come definire il carattere con il tag FONT
20. Scegliere il colore del testo
file:///F|/Corsi/HTML/index.html (2 di 5)01/12/2004 21.14.23
Guida HTML | Indice delle lezioni | HTML.it
Definire il colore del testo della pagina Web
21. Gli elenchi nell'HTML
Elenchi ordinati, non ordinati ed elenchi di definizioni
Il cuore del WWW: i Link [torna su]
22. I link e l'ipertestualit
Introduzione all'ipertestualit e alla funzione dei link in una pagina Web
23. I percorsi assoluti e relativi
Le differenze di funzione fra link assoluti e link relativi
24. I link interni o ancore
I link che puntano all'interno dello stesso documento
25. Gli attributi dei link
Target, Title, hreflang, accesskey, base tag e il colore dei link
Le immagini e le mappe di immagine [torna su]
26. Inserire le immagini
Quali tipi di immagini e come inserirle in una pagina HTML
27. Disporre le immagini in un contesto
Decidere dove posizionare le immagini rispetto al testo
28. Le mappe di immagine
Come definire le diverse zone cliccabili di un'immagine
29. Le mappe di immagine lato server
Utilizzare tecnologie di tipo server per definire le zone cliccabili di
un'immagine
Le tabelle [torna su]
30. Tabella: struttura di base
Celle, colonne, righe: come scrivere la prima tabella in HTML
31. Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>
I tag supplementari che permettono di mettere ordine nelle zone della
tabella
32. Raggruppare gli stili delle colonne
I tag per ordinare le colonne: <colgroup> e <col>
33. Raggruppare celle con rowspan e colspan
Come dare alle tabelle una struttura pi elastica raggruppandone gli
elementi
34. Annidare tabelle
Come annidare una tabella dentro l'altra
35. Attributi del tag table
Perfezioniamo la visualizzazione di una tabella: border, cellspacing e
cellpadding
file:///F|/Corsi/HTML/index.html (3 di 5)01/12/2004 21.14.23
Guida HTML | Indice delle lezioni | HTML.it
36. Attributi di <table>, <tr>, <td>
Gli attributi per le dimensioni, lo sfondo l'allineamento, i bordi, l'a capo
37. Impaginare un layout con le tabelle
Usare le tabelle per disegnare il layout del sito: fisso o fluido
I Frame [torna su]
38. Comporre una pagina in frame
Cosa sono i frame; la struttura di un frameset; i frameset annidati
39. Attributi dei frames per la visualizzazione
Gli attributi: scrolling, noresize, frameborder, marginheight e
marginwidth
40. I link in un frameset e il tag noframes
Come gestire i collegamenti all'interno di un frameset; il tag NOFRAME
41. L'iframe
Un particolare tipo di frame: gli iframe o inline frame
42. Vantaggi e svantaggi dei frames
Quali motivi per usare o non usare una struttura a Frame
43. Impaginare a livelli con i CSS
Un altro metodo di impaginazione: i livelli e i CSS
I Moduli (forms) [torna su]
44. Struttura del tag form
La struttura del tag Form e i suoi principali utilizzi
45. Un po' d'ordine: raggruppare i moduli
Come rendere pi eleganti e razionali i nostri moduli con il tag fieldset
46. Il tag Input
I campi dei form: come utilizzare il tag input
47. I bottoni (sumbit, reset, button, image)
Inserire i bottoni o bottoni di immagine per inviare i moduli
48. Inserire testo (campo testo, textarea, password)
Inserire nella pagina i campi testuali per l'inserimento del testo
49. Consentire delle scelte (checkbox, radio, select)
Permettere all'utente di effettuare delle scelte singole o multiple
50. Altri campi (file e hidden)
Come inviare un file o delle variabili nascoste ad un server
51. Approfondimenti sui form
Controllare il passaggio da un campo all'altro e gestire il layout dei form
Includere elementi multimediali e script [torna su]
file:///F|/Corsi/HTML/index.html (4 di 5)01/12/2004 21.14.23
Guida HTML | Indice delle lezioni | HTML.it
52. Premessa: il tag object
Suggerimenti per l'inclusione di file esterni. La sintassi del tag Object
53. Includere un file Audio
Inserire un file audio di sottofondo o un elemento del lettore RealOne
54. Includere un file Video
Inserire un fimato video e accenni allo streaming sul Web
55. Includere un file Flash
Come includere nelle vostre pagine un filmato Flash
56. Includere un file Java
Come includere un file Java definendo un testo alternativo
57. Includere file di scripting o CSS
Inclusione di file JavaScript, VBScript e CSS
Linguaggi e strumenti [torna su]
58. I meta tag
Come migliorare il posizionamento sui motori. Titolatura, Meta Tag
59. Il DocType
Dichiarare la tipologia del documento con il DocType
60. Configurare un programma FTP
Come pubblicare i file sul proprio sito con un programma FTP
61. Gli editor visuali
Come scrivere una pagina Web. I principali editor WYSIWYG
62. Una precisazione sul WWW e sui linguaggi
L'invenzione del WWW e le specifiche dei nuovi linguaggi
63. Conclusioni
Validare i propri documenti e continuare ad imparare a costruire siti
Web
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
file:///F|/Corsi/HTML/index.html (5 di 5)01/12/2004 21.14.23
Come funziona un browser | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Come funziona un browser
Non ho mai previsto che il codice sorgente di HTML (cio
la roba con le parentesi angolate) fosse visibile agli
utenti. Un browser/editor avrebbe fatto vedere o editare
all'utente soltanto il linguaggio di una pagina di ipertesto,
come se stesse usando un word processor. Per me, e
credevo anche per gli altri, l'idea di chiedere al pubblico
di battere a mano le parentesi era inaccettabile quanto
chiedere a qualcuno di scrivere un documento in
Microsoft Word stendendo il formato in codice binario. Ma
la leggibilit dell'HTML si rivel una manna inaspettata.
Con mia grande sorpresa molte persone si
familiarizzarono alla svelta con i tag, e iniziarono a
scrivere direttamente propri documenti in HTML
Tim Berners-Lee, L'architettura del nuovo Web, Feltrinelli,
Milano, 2001
L'HTML e i browser
L'HTML il linguaggio con cui potete indicare come i vari elementi vanno
disposti in una pagina Web. Un documento html non nient'altro infatti che un
file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle
immagini all'interno della pagina, su come far scorrere il testo, e altre cose di
questo genere.
Il Browser il programma che usate quando navigate nel Web e svolge
principalmente due compiti:
G scarica i vari files che si trovano su un computer remoto (il server) e
che fanno riferimento a un certo indirizzo
G legge i documenti scritti in html, e a seconda delle indicazioni ivi
contenute, visualizza la pagina in un modo, piuttosto che in un altro;
inoltre i vari files associati a quel documento (ad esempio le immagini,
o i filmati in flash) vengono disposti secondo le indicazioni del codice
html
Oltre ad Internet Explorer, il browser pi diffuso, esistono altri browser: prima
di tutto lo "storico" Netscape Navigator, con cui la Microsoft ha ingaggiato
una vera e propria guerra (vincendola). Poi il browser open source Mozilla,
che nasce da Netscape e ha la particolarit di essere a codice aperto, cio
con la possibilit per gli sviluppatori di vedere com' fatto il programma. Una
parte di utenti (si tratta sempre di una minoranza comunque rispetto allo
strapotere di Internet Explorer) utilizza poi Opera, un browser norvegese
celebre per la sua velocit di visualizzazione delle pagine. Ovviamente
esistono anche molti altri browser. Per ciascuno di essi esistono poi differenti
versioni a seconda del sistema operativo (Windows, Mac OS, Linux, o altri).
importante sin dall'inizio acquisire una mentalit multi-browser, perch il
mestiere del webmaster non consiste tanto nel conoscere nei minimi dettagli il
codice HTML, quanto piuttosto nel sapere come il codice HTML verr
visualizzato sul computer dell'utente: infatti uno dei lavori pi difficili quello di
riuscire a far vedere correttamente il proprio sito con i browser e le piattaforme
http://www.html.it/guida/html_01.htm (1 di 2)01/12/2004 21.14.56
cerca
Come funziona un browser | Guida HTML | HTML.it
pi svariate.
I files scaricati dal web vengono memorizzati in una particolare cartella del
computer che prende il nome di cache.
In Internet Explorer possibile visualizzarla utilizzando i comandi:
Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file
In Mozilla:
Modifica > Preferenze > Avanzate > Cache
In questo modo verr mostrato il percorso della cartella in cui i documenti
vengono temporaneamente memorizzati.
La visualizzazione di un file html da parte del browser prende il nome di
rendering della pagina. Motore di rendering dunque quella sezione del
browser che si occupa di mostrare sul video la pagina.
Il compito del linguaggio HTML dunque quello di spiegare al browser come i
vari files relativi al documento in esame devono essere disposti all'interno
della pagina che stiamo visualizzando.
In qualsiasi momento possibile visualizzare il codice HTML delle pagine che
stiamo visitando. Con Internet Explorer:
Visualizza > HTML
Con Mozilla :
Visualizza > Codice Sorgente
oppure si pu effettuare la stessa operazione, utilizzando il tasto destro del
mouse per visualizzare il menu a tendina, e scegliendo poi la voce
corrispondente.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_01.htm (2 di 2)01/12/2004 21.14.56
Cos lHTML | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Cos lHTML
HTML l'acronimo di Hypertext Markup Language ("Linguaggio di
contrassegno per gli Ipertesti") e non un linguaggio di programmazione
(sono linguaggi di programmazione il C, il C++, il Pascal, il Java, e sono
linguaggi di scripting il PHP, l'ASP, il PERL, il JavaScript).
Si tratta invece di un linguaggio di contrassegno (o 'di marcatura'), che
permette di indicare come disporre gli elementi all'interno di una pagina: le
indicazioni vengono date attraverso degli appositi marcatori, detti "tag".
Ci significa che l'HTML non ha meccanismi che consentono di prendere
delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro"),
e non in grado di compiere delle iterazioni ("ripeti questa cosa, finch non
succede questo"), n ha altri costrutti propri della programmazione.
Il linguaggio HTML, pur essendo dotato di una sua sintassi, non presuppone
la logica ferrea e inappuntabile dei linguaggi di programmazione: se vi
dimenticate di chiudere un tag, non verranno prodotti dei messaggi di errore;
se non rispettate la sintassi probabilmente non otterrete la visualizzazione
della pagina che desiderate, ma nient'altro. A volte vi troverete persino a dover
adottare dei "trucchetti", non proprio da manuale, pur di visualizzare la pagina
correttamente con ogni browser.
Suggerimenti: Pu succedere - soprattutto a chi alle prime armi - di
continuare a modificare un file, ma di non riuscire a vederne le
modifiche. Questo succede perch la pagina visualizzare sempre quella
vecchia memorizzata nella cache. Quando state elaborando pagine per il
web, ricordatevi di impostare la cache del vostro browser in modo che il
file html venga ricaricato ogni volta che richiamate la pagina.
In Internet Explorer:
Strumenti > Opzioni Internet > Generale > Impostazioni >
Ricerca versioni pi recenti delle pagine memorizzate:
G all'apertura della pagina
In Mozilla:
Modifica > Preferenze > Avanzate > Cache >
Confronta la pagina nella cache con la pagina in rete:
G ogni volta che vedo una pagina
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_02.htm01/12/2004 21.15.11
cerca
Prima di cominciare davvero: lo standard HTML | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Prima di cominciare davvero: lo standard HTML
L'organizzazione che si occupa di standardizzare la sintassi del linguaggio
HTML (il W3C: Word Wide Web Consortium) ha rilasciato diverse versioni di
questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e - da un certo punto in
poi - l'HTML si evoluto in XHTML (si tratta dell'HTML riformulato come
linguaggio XML - ne sono gi state rilasciate due versioni).
La versione dell'HTML che esamineremo in questo corso l'ultima rilasciata:
si tratta dell'HTML 4.01 del 24 dicembre 1999.
Anche se abbiamo detto che l'HTML si evoluto in XHTML ci sono delle
ottime ragioni per incominciare a studiare l'HTML e non l'XHTML:
G di fatto l'HTML verr utilizzato ancora per diversi anni come
linguaggio principe delle pagine web
G alcuni concetti dell'XHTML richiedono gi una certa comprensione
dei problemi che si acquisisce solo con l'esperienza. L'HTML pi
immediato e consente di incominciare subito a produrre documenti web
G chi conosce l'XHTML non pu non conoscere l'HTML. La
conoscenza dell'HTML infatti il prerequisito essenziale di ogni
webmaster. Comunque le differenze tra i due linguaggi non sono cos
marcate e passare dall'uno all'altro non dovrebbe richiedere molta
fatica.
Per gli approfondimenti sulle differenze tra i vari linguaggi vi rimando tuttavia
all'appendice di questa guida.
Un'ultima avvertenza: in molte lezioni presente una sezione denominata
"approfondimenti". Chi inizia adesso a studiare HTML ed alla sua prima
lettura pu tranquillamente ignorare quel paragrafo. Le indicazioni ivi
contenute vi torneranno utili a una seconda lettura, o man mano che prendete
confidenza con l'HTML e l'arte di sviluppare siti web.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_03.htm01/12/2004 21.15.17
cerca
L'estensioni dei file e le impostazioni del browser | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
L'estensioni dei file e le impostazioni del browser
Per iniziare a scrivere pagine web avete bisogno di:
G uno o pi browser per visualizzare le pagine
G un editor testuale per scrivere il codice HTML (potete usare il blocco
note di Windows, o altri editor testuali come 1Page, che gratuito
First Page)
G durante questo corso non utilizzeremo editor visuali: n FrontPage, n
DreamWeaver, n GoLive, o altri. Su HTML.it troverete delle guide
appositamente scritte per loro.
L'estensione del file
Aprite una pagina con il blocco note, e salvate il file in qualche cartella del
vostro computer. Il file dovr avere estensione "html", ad esempio miaPagina.
html.
Fino a qualche tempo fa si era soliti attribuire ai file l'estensione htm, ma
questo avveniva perch il dos e poi Windows 3.1 non erano in grado di gestire
i file con nomi di grandezza superiore a 8 caratteri ed estensione superiore
alle 3 lettere. Dunque .html era diventato .htm, cos come .jpeg era diventato .
jpg.
Il problema delle estensioni stato ampiamente superato sin dai tempi di
Windows 95, e di conseguenza oggi il webmaster pu decidere se attribuire ai
files estensione .html o .htm. Siccome stiamo parlando di linguaggio HTML,
personalmente preferisco l'estensione .html, ma una questione di gusti
(HTML.it, ad esempio, continua con il vecchio metodo).
Se avete dato alla pagina l'estensione .html o .htm, il browser dovrebbe
essere in grado di aprire il file in automatico cliccandoci su due volte. Per
modificare la pagina utilizzate i comandi Visualizza > HTML, cambiate il
codice, salvate, utilizzate il pulsante "aggiorna" del browser e dovreste
visualizzare le modifiche.
Se invece il file non associato al browser, ma continua ad apparire come
documento di testo, evidentemente questo avviene perch l'estensione non .
html, ma .html.txt, alcuni sistemi operativi hanno infatti la cattiva abitudine di
nascondere l'estensione dei file (con il pretesto di rendere pi usabile il
sistema operativo stesso).
Per visualizzare l'estensione del file in sistemi Windows andate in una cartella
e quindi:
Strumenti > Opzioni cartella > Visualizzazione
E poi togliere la spunta da:
"Nascondi le estensioni dei file per i tipi di file conosciuti"
infine premere il pulsante:
"Come cartella corrente"
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/guida/html_04.htm (1 di 2)01/12/2004 21.15.26
cerca
I TAG dell'HTML: come scriverli | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I TAG dell'HTML: come scriverli
Struttura di un tag
Abbiamo detto che all'interno di ogni pagina presente una serie di marcatori (i
TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a
seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>),
la chiusura del tag viene indicata con una "/" ( il simbolo comunemente detto
"slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del
tag medesimo, secondo questa forma:
<TAG attributi>contenuto</TAG>
Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a
destra:
<P align="right">testo</P>
dall'esempio evidente che la struttura di un attributo : attributo="valore"
Quindi in definita la struttura di un tag sar:
<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>
Alcuni particolari tag non hanno contenuto - perch ad esempio indicano la
posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente
questi tag non hanno neanche chiusura. La loro forma sar dunque:
<TAG attributi>
Ecco un esempio di immagine:
<IMG widht="20" height="20" SRC="miaImmagine.gif" ALT="alt">
come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty",
cio "vuoto".
Annidamento e indentazione
Una caratteristica importante del codice HTML che i tag possono essere
annidati l'uno dentro l'altro. Anzi molto spesso necessario farlo.
Ad esempio:
<TAG1 attributi>
contenuto 1

<TAG2>
contenuto 2
</TAG2>
</TAG1>
Potremmo quindi avere ad esempio:
http://www.html.it/guida/html_05.htm (1 di 2)01/12/2004 21.15.37
cerca
I TAG dell'HTML: come scriverli | Guida HTML | HTML.it
<P align="right">
testo 1

<P align="left">
testo 2
</P>
</P>
L'annidamento ci permette quindi di attribuire formattazioni successive al testo
che stiamo inserendo.
Come si pu vedere gi nell'esempio, una buona norma utilizzare dei
caratteri di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare il
testo ogni volta che ci troviamo in presenza di un annidamento e man mano
che entriamo pi in profondit nel documento.
In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il
contenuto viene spostato verso destra di un tab: non si tratta soltanto di un
fattore visivo, ma l'allineamento di apertura e chiusura tag viene mantenuto
anche se scorriamo in verticale il documento con il cursore.
Questa procedura si chiama indentazione, e grazie ad essa il codice HTML
risulta pi leggibile. Si confronti ad esempio:
<P align="right">testo 1<P align="left"> testo 2 </P></P>
con:
<P align="right">

testo 1
<P align="left">
testo 2
</P>
</P>
per il browser i due esempi sono equivalenti, ma per l'utente umano evidente
che la differenza notevole: pensate ad una pagina complessa visualizzata in
un unico blocco di testo: sarebbe del tutto illeggibile!
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_05.htm (2 di 2)01/12/2004 21.15.37
I commenti | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I commenti
Unaltra strategia importante, per rendere il nostro codice pi leggibile quella
di inserire dei "commenti" nei punti pi significativi: si tratta di indicazioni
significative per il webmaster, ma invisibili al browser. Inserendo i commenti in
punti specifici del documento ci permette di mantenere lorientamento anche in
file molto complessi e lunghi. La sintassi la seguente:
<!-- questo un commento -->
e ci permette di "commentare" i vari punti della pagina. Ad esempio:
<!-- menu di sinistra -->
<!-- barra in alto -->
<!-- eccetera -->
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_06.htm01/12/2004 21.15.44
cerca
Maiuscolo o minuscolo? | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Maiuscolo o minuscolo?
LHTML case unsensitive, cio indipendente dal formato. Questo significa
che del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.
<P ALIGN=RIGHT>
e
<p align=right>
vengono letti allo stesso modo dal browser.
Fino a qualche tempo fa, per aumentare la leggibilit del codice, era buona
norma scrivere in maiuscolo il nome del tag (es: <P>) e in minuscolo gli
attributi (es: align=right). Quindi:
<P align=right>
Tuttavia oggi, per analogia con l'XHTML (che figlio dellXML e dell'HTML ed
case sensitive, sensibile al formato) consigliabile scrivere tutto in
minuscolo, per abituarsi gi al linguaggio che verr. Maiuscolo e minuscolo, in
ogni caso non costituiscono errore.
Fino a questo momento - per rendere pi chiare le differenze - abbiamo
utilizzato la vecchia abitudine di alternare maiuscolo e minuscolo
differenziando tag e attributi, dora in poi invece tutta la sintassi HTML della
guida sar in minuscolo.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_07.htm01/12/2004 21.15.49
cerca
Struttura della pagina | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Struttura della pagina
Basandoci sulle indicazioni precedenti, incominciamo a scrivere la nostra
prima pagina html.
Per prima cosa inseriamo una riga che indica che stiamo utilizzando le
specifiche del Word Wide Web Consortium che riguardano il codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
esamineremo ulteriormente questa riga nell'appendice, per ora lasciamola
cos.
Poi apriamo il nostro primo tag, che indica che quanto compreso tra apertura
e chiusura in codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
... altri tag ...
</html>
Un documento HTML normalmente diviso in due sezioni:
Testa (<head>)
Contiene informazioni non immediatamente
percepibili, ma che riguardano il modo in cui il
documento deve essere letto e interpretato. Questo
il luogo dove scrivere - ad esempio - i meta-tag
(alcuni sono ad esclusivo beneficio dei motori di
ricerca), script JavaScript o VbScript, fogli di stile,
eccetera
Corpo (<body>)
Qui racchiuso il contenuto vero e proprio del
documento
Ci occuperemo in seguito della head (l'argomento verr ripreso poi nella
conclusione della guida. Per ora facciamo riferimento soltanto a due tag che
devono essere presenti in questa sezione:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
indica al browser che deve caricare il set di caratteri occidentale (e non - ad
esempio - il set di caratteri giapponese).
<title>Nome del sito</title>
Il title il titolo della pagina e compare in alto sulla barra del browser (se
guardate in alto a sinistra del browser noterete la scritta "Struttura della pagina
| Guida HTML | HTML.it"). bene compilarlo da subito, onde evitare poi di
avere pagine senza titolo. Da quanto abbiamo detto la nostra prima pagina
sar questa, che consultabile anche nell'esempio allegato:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
http://www.html.it/guida/html_08.htm (1 di 2)01/12/2004 21.15.58
cerca
Struttura della pagina | Guida HTML | HTML.it
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>
<body>
<!-- Scriveremo qui -->
Qui il nostro contenuto
</body>
</html>
D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti
all'interno del body, quando non sia indicato diversamente.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_08.htm (2 di 2)01/12/2004 21.15.58
HTML.it
Qui il nostro contenuto
http://www.html.it/guida/esempi/01.html01/12/2004 21.16.03
Torna indietro
Separare il layout dal contenuto | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Separare il layout dal contenuto
LHTML in origine nato come linguaggio per formattare i documenti presenti
sul Web. Proprio per questo motivo il contenuto (ad esempio <p>qui il mio
testo</p>) e i tag che indicano uno stile o una colorazione del contenuto (ad
esempio <font color=red>, che colora il testo di rosso) si trovavano
mischiati allo stesso livello.
Tuttavia vari anni di Web hanno fatto nascere lesigenza di separare il
contenuto dalla presentazione del contenuto medesimo.
Se per esempio io avessi tutti i titoli del mio documento in rosso e in grassetto,
e a un certo punto decidessi di trasformarli in verde e in corsivo, con lHTML
classico (cio lHTML 3.2) dovrei andare a modificarmi a mano ogni tag
contente le indicazioni della formattazione.
Quindi:
<p>
<font color="red">
<b>titolo 1</b>
</font>
</p>
diventerebbe:
<p>
<font color="green">
<i>titolo 1</i>
</font>
</p>
ma se questa operazione non comporta difficolt su una singola pagina,
questa operazione diventa insostenibile (o quantomeno difficoltosa, tanto che
converrebbe scrivere un programma che effettuasse la conversione al posto
nostro) su website molto grandi, a volte di centinaia di pagine.
Proprio per questo come dicevamo - da un certo punto in poi nata
lesigenza di separare il contenuto (la scritta titolo 1), dalla formattazione (il
colore rosso e il grassetto). Per farlo necessario utilizzare i fogli di stile, e il
contenuto della pagina vista pocanzi diventerebbe qualcosa di questo genere:
<p class="formattaTitoli">
titolo 1
</p>
mentre la colorazione del testo verrebbe poi affidata alla classe
formattaTitoli, descritta in unaltra parte del documento, o anche in un file
separato. Dunque basta editare la classe formattaTitoli per cambiare
laspetto anche di centinaia di pagine.
importante sapere da subito che alcune cose che stiamo imparando hanno
la possibilit di essere espresse con una soluzione pi elegante, e che
consente al webmaster di gestire pi agevolmente i propri siti. Alcuni elementi
descritti nella guida corrente sono addirittura deprecati dal W3C, cio
http://www.html.it/guida/html_09.htm (1 di 2)01/12/2004 21.16.12
cerca
Separare il layout dal contenuto | Guida HTML | HTML.it
destinati a cadere in disuso (come il tag <font>): man mano che li
incontreremo (perch allo stato attuale del Web ancora importante
conoscerli) vi avvertir che esistono altre soluzioni applicabili tramite i fogli di
stile. Tuttavia in questo contesto non esamineremo i fogli di stile (detti anche
CSS: Cascading Style Sheets), perch un argomento che presuppone gi
la conoscenza del linguaggio HTML. Per questo vi rimandiamo allapposita
guida ai CSS di HTML.it, che se vorrete potrete consultare dopo aver letto la
guida allHTML.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_09.htm (2 di 2)01/12/2004 21.16.12
Gli elementi HTML e i fogli di stile | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Gli elementi HTML e i fogli di stile
Un altro concetto importante che gli elementi vengono classificati nella
trattazione a fogli di stile secondo tre tipologie:
Elementi di blocco
Sono sostanzialmente gli elementi che
costituiscono un blocco attorno a s, e che di
conseguenza vanno a capo, come i paragrafi, le
tabelle, le form.
Elementi inline
Sono gli elementi che non andando a capo -
possono essere integrati nel testo, come i
collegamenti o le immagini
Liste Lista numerate, o non numerate
La guida che state leggendo, senza entrare minuziosamente in questa
classificazione, ne tiene conto, in modo da rendere pi agevole il passaggio da
una formattazione inserita nel codice HTML, a una formattazione che utilizzi i
fogli di stile. Infatti, man mano che comincerete a costruire siti web, sentirete
lesigenza di passare a una formattazione avanzata. Le due cose tuttavia non
vanno sentite in contrapposizione: i fogli di stile sono semmai un arricchimento
e unespansione del codice HTML, viceversa non possibile apprendere i fogli
di stile senza conoscere il codice HTML.
Approfondimenti
Nella lezione della guida CSS dedicata alla Classificazione degli elementi
viene approfondito l'argomento da noi trattato.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_10.htm01/12/2004 21.16.19
cerca
Classificazione degli elementi | Guida CSS | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Classificazione degli elementi
La prima lezione di questa guida potrebbe spiazzarvi. Non parleremo di CSS,
ma di (X)HTML. O meglio, riprenderemo alcuni aspetti di questo linguaggio
che sono propedeutici per una migliore comprensione del meccanismo di
funzionamento dei CSS. Sapere bene su che cosa si interviene con i fogli di
stile un passo necessario, visto che le cose di cui parleremo, specie con
l'avvento e l'abuso degli editor visuali, sono spesso trascurate o misconosciute
dai pi. Se mi passate la metafora, possiamo dire che faremo come un bravo
chirurgo che prima di imparare gli strumenti deve conoscere bene il corpo
umano per operare con successo e senza fare danni. Inizieremo con la
classificazione degli elementi.
Elementi blocco e elementi in linea
Osservate una pagina (X)HTML tentando di non pensare al contenuto ma solo
alla sua struttura. Mettete in atto, insomma, una specie di processo di
astrazione. Per aiutarvi ecco un'immagine. Una pagina (X)HTML, per iniziare,
non altro che un insieme di rettangoli disposti sullo schermo di un monitor.
Non importa che si tratti di paragrafi, titoli, tabelle o immagini: sempre di box
rettangolari si tratta.
Nell'immagine potete per osservare che non tutti i box sono uguali. Alcuni
contengono altri box al loro interno. Altri sono invece contenuti all'interno dei
primi e se si trovano (come si trovano) in mezzo a del testo notate che esso
scorre intorno senza interrompere il suo flusso e senza andare a capo. Avete
nell'immagine la rappresentazione visiva, anche se un p semplificata, della
fondamentale distinzione tra gli elementi (X)HTML, quella tra elementi blocco
ed elementi inline.
Gli elementi blocco sono i box che possono contenere altri elementi, sia di
tipo blocco che di tipo inline. Quando un elemento blocco inserito nel
documento viene automaticamente creata una nuova riga nel flusso del
documento. Provate a inserire in una pagina (X)HTML queste due righe di
codice:
<h1>Titolo</h1>
<p>Paragrafo</p>
Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perch <H1>
e <P> sono elementi blocco.
Gli elementi inline non possono contenere elementi blocco, ma solo altri
elementi inline (oltre che, ovviamente, il loro stesso tipo di contenuto,
essenzialmente testo). Nell'immagine sono i rettangoli con il bordo verde.
Come si pu notare, quando sono inseriti nel documento non danno origine ad
una nuova riga.
Una terza categoria quella degli elementi lista. Comprende in pratica solo
l'elemento LI (list item).
Per un elenco completo degli elementi blocco si veda questa pagina della
guida a XHTML. Qui trovate invece l'elenco degli elementi inline.
http://www.html.it/css/guida_css_02.htm (1 di 3)01/12/2004 21.16.26
cerca
Classificazione degli elementi | Guida CSS | HTML.it
Elementi rimpiazzati (replaced elements)
Un'altra distinzione da ricordare quella tra elementi rimpiazzati ed elementi
non rimpiazzati. I primi sono elementi di cui uno user agent (il "motore" e la
mente di un browser) conosce solo le dimensioni intrinseche. Ovvero, quelli in
cui altezza e larghezza sono definite dall'elemento stesso e non da ci che lo
circonda. L'esempio pi tipico di elemento rimpiazzato IMG (un'immagine).
Altri elementi rimpiazzati sono: INPUT, TEXTAREA, SELECT e OBJECT. Tutti
gli altri elementi sono in genere considerati non rimpiazzati.
La distinzione importante perch per alcune propriet diverso il trattamento
tra l'una e l'altra categoria, mentre per altre il supporto solo per la prima, ma
non per la seconda.
Struttura ad albero di un documento
Un altro concetto fondamentale che dovreste assimilare quello della struttura
ad albero di un documento. Il meccanismo fondamentale dei CSS infatti
l'ereditariet. Esso fa s che molte propriet impostate per un elemento siano
autamaticamente ereditate dai suoi discendenti. Sapersi districare nella
struttura ad albero significa padroneggiare bene questo meccanismo e
sfruttare al meglio la potenza del linguaggio.
Presentiamo subito un frammento di codice HTML:
<html>
<head>
<title>Struttura del documento</title>
</head>
<body>
<h1>Titolo</h1>
<div>
<p>Primo <a href="pagina.htm">paragrafo</a></p>
</div>
<p>Secondo<b>paragrafo</b></p>
</body>
</html>
Questa la sua rappresentazione strutturale secondo il modello ad albero:
Il documento in buona sostanza una perfetta forma di gerarchia ordinata in
cui tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio
(parent-child in inglese, imparate la dicitura perch nei linguaggi come DOM
o Javascript ci si riferisce agli ordini della gerarchia proprio con questi
termini.). Ogni elemento genitore e/o figlio di un altro.
Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice
figlio (child) quando racchiuso in un altro elemento. In base a queste
semplici indicazioni possiamo analizzare il nostro documento.
http://www.html.it/css/guida_css_02.htm (2 di 3)01/12/2004 21.16.26
Classificazione degli elementi | Guida CSS | HTML.it
BODY, ad esempio figlio di HTML, ma anche genitore di H1, DIV e P.
Quest'ultimo a sua volta genitore di un elemento B.
Ovviamente, se osservate bene, potreste concludere che anche BODY in
qualche modo genitore di B. Non esattamente cos. Introduciamo ora
un'altra distinzione, mutuata anch'essa dal linguaggio degli alberi genealogici,
quella tra antenato (ingl: ancestor) e discendente (ingl: descandant).
Semplice da capire. La relazione parent-child valida solo se tra un elemento
e l'altro si scende di un livello. Esattamente come in un albero familiare si
indica la relazione tra padre e figlio. Pertanto possiamo dire che HEAD figlio
di HTML, che A figlio di P, etc. Tra DIV e A, invece si scende di due livelli:
diciamo allora che DIV un antenato di A e che questo rispetto al primo un
discendente.
C' un solo elemento che racchiude tutti e non racchiuso: HTML.
Continuando con la metafora familiare potremmo dire che il capostipite, ma
in termini tecnici si dice che esso l'elemento radice (ingl: root). E qui
spazziamo il campo da un possibile fraintendimento: l'elemento radice di un
documento (X)HTML non BODY. E che HTML non sia una semplice
dichiarazione ma sia trattato alla stregua di qualunque altro elemento lo potete
testare aprendo questa pagina con Explorer 6, Mozilla, Opera 6 o Explorer 5
Mac.
Come si vede abbiamo iniziato una guida dedicata a un linguaggio
prettamente visuale tornando alle origini di HTML, ovvero al concetto di
struttura. Non un capriccio, semplicemente dare il giusto inquadramento
ai CSS: che sono nati per modificare lo stile di elementi strutturali e non vanno
intesi come un linguaggio grafico. Per queste cose esistono Flash o
Photoshop.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/css/guida_css_02.htm (3 di 3)01/12/2004 21.16.26
Impostare il colore di sfondo | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Impostare il colore di sfondo
Incominciamo a vedere come ottenere la nostra prima pagina HTML nel modo
in cui desideriamo visualizzarla.
Se vogliamo impostare un colore di sfondo necessario impostare il relativo
attributo del tag body. Cos:
<body bgcolor="blue">
bgcolor sta per "background color", cio "colore di sfondo". Molti colori sono
disponibili utilizzando le corrispondenti parole chiave in inglese.
Qui potete trovare un esempio della pagina con lo sfondo blu
Tuttavia non consigliabile inserire la notazione del colore facendo riferimento
a questo tipo di sintassi, dal momento che non possiamo sapere esattamente
a quale tonalit di colore corrisponda il blu del computer dellutente.
preferibile in molti casi utilizzare la corrispondente codifica esadecimale del
colore, che ci permette tra le altre cose di scegliere anche tonalit di colore
non standard. Con la notazione esadecimale il nostro esempio diventa:
<body bgcolor="#0000FF">
Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili
anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):
colore parola chiave notazione
esadecimale
arancione orange #FFA500
blu blue #0000FF
bianco white #FFFFFF
giallo yellow #FFFF00
grigio gray #808080
marrone brown #A52A2A
nero black #000000
rosso red #FF0000
verde green #008000
viola violet #EE82EE
http://www.html.it/guida/html_11.htm (1 di 2)01/12/2004 21.17.36
cerca
Impostare il colore di sfondo | Guida HTML | HTML.it
Il numero di colori che lutente ha a disposizione dipende dalla scheda video.
Oggi si va da una risoluzione minima di 256 colori a una risoluzione che
prevede svariati milioni di colori.
Per capire di cosa stiamo parlando, provate a visualizzare questa pagina
cambiando il numero di colori visualizzati sul monitor. Per fare ci, in
Windows, andate in: Pannello di controllo > Schermo > Impostazioni e
cambiate il numero dei colori, applicate i cambiameni e tornate a visualizzare
la pagina. Come si vede la visualizzazione della tonalit di colore
sensibilmente diversa passando da 256 a 65.536 colori (16 bit).
Poich non c modo di sapere quale scheda video abbia lutente (o come
labbia impostata), i webdesigner per molto tempo hanno fatto riferimento alla
"palette sicura" dei 256 colori che sicuramente lutente in grado di
visualizzare. Si tratta della cosiddetta palette web safe.
C per da dire che oramai la stragrande maggioranza dei computer
impostata per visualizzare almeno migliaia di colori, dunque lutilizzo della
palette "web safe" non pi cos strettamente necessaria (lo era nei primi anni
del web).
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_11.htm (2 di 2)01/12/2004 21.17.36
HTML.it
Qui il nostro contenuto
http://www.html.it/guida/esempi/body/02.html01/12/2004 21.17.40
HTML.it
Qui il nostro contenuto
http://www.html.it/guida/esempi/body/03.html01/12/2004 21.17.55
I colori e il loro uso nel Web | Teoria Grafica | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Teoria Grafica Ricerca:
Home Grafica Teoria Grafica I colori e il loro uso nel Web
Commenti (8) Stampa Invia
Cosa sono i colori web safe?
I computer pi vecchi hanno schede video e monitor in grado di visualizzare
correttamente soltanto 256 colori. Questi 256 colori vengono gestiti diversamente
dalle piattafome PC e Mac; a causa di queste differenze rimangono soltanto 216
colori comuni.
Se vogliamo essere sicuri che i nostri lavori vengano visti perfettamente da qualsiasi
utente (anche quelli che hanno computer con settaggi video a 8 bit, ovvero che
visualizzano solo 256 colori), dobbiamo utilizzare per i nostri lavori solo i 216 colori
riportati nella tabella qui sotto, detti appunto colori "web safe".
Oggi, comunque, la stragrande maggioranza degli utenti ha computer che
dispongono di una ampia quantit di ram video e di monitor moderni che consentono
di visualizzare ben pi di 256 colori.
Sintesi addittiva e sottrattiva
Parlando di web, giusto considerare che i nostri lavori verranno nella maggior parte
dei casi visualizzati su di un monitor e non letti su carta. Ci sono differenze
fondamentali su come i vari media visualizzano i colori e vale la pena averne una
minima conoscenza.
I monitor (e in generale molte delle apparecchiature elettroniche) usano la sintesi
additiva RGB (Red - Green - Blue), al contrario tutte le stampanti e le pubblicazioni
su carta usano la sintesi sottrattiva CMYK (Cyan - Magenta - Yellow - blacK).
Senza entrare troppo in argomenti tecnici, lo "spazio colore" (cos si chiama la

http://pro.html.it/articoli/id_221/idcat_41/pag_3/pag.html (1 di 2)01/12/2004 21.18.11
Cerca
I colori e il loro uso nel Web | Teoria Grafica | PRO.HTML.IT
gamma dei colori visualizzabili) dei monitor dato dalla combinazione di fasci di luce
di colore differente (appunto rosso, verde e blu) che colpiscono locchio;
questultimo, quando viene raggiunto da una luce costituita da due o pi componenti,
non in grado di percepire separatamente le parti: ne elabora invece una sintesi
globale, facendoci "vedere" un colore intermedio fra quelli iniziali.
Lo spazio colore degli stampati costruito invece tramite i pigmenti ciano,
magenta, giallo (e nero), che si sovrappongono e si combinano assorbendo ognuno
la componente di luce del colore complementare al proprio e riflettendo invece la
componente che hanno in comune.
interessante notare che, mentre nella sintesi additiva il colore ottenuto dalla
combinazione di rosso, verde e blu il bianco, nella sintesi sottrattiva il colore
risultante dalla somma di ciano, magenta e giallo il nero. La ragione che avendo
ognuno dei colori primari della sintesi sottrattiva (ciano, magenta e giallo) il potere di
assorbire una delle tre differenti parti della radiazione visibile, mescolandoli tutti e tre
l'intero spettro visibile verr assorbito e nessuna luce sar riflessa verso
l'osservatore.
da notare inoltre che i colori CMYK risultano di solito meno brillanti di quelli RGB.
[ 1 2 3 ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_221/idcat_41/pag_3/pag.html (2 di 2)01/12/2004 21.18.11
vota
Inserire unimmagine di sfondo | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Inserire unimmagine di sfondo
Per inserire unimmagine come sfondo sufficiente utilizzare la seguente
sintassi:
<body background="imgSfondo.gif">
Per ora presupponiamo che limmagine di sfondo si trovi nella stessa cartella
della nostra pagina HTML, vedremo in seguito (quando parleremo delle
immagini) come inserire immagini che si trovano in altre cartelle.
Limmagine di sfondo verr ripetuta in orizzontale e in verticale.
anche possibile combinare i due attributi, in modo che mentre limmagine di
sfondo viene caricata, venga comunque visualizzata una colorazione della
pagina:
<body bgcolor="#0000ff" background="imgSfondo.gif">
Ecco subito un esempio di pagina impostata con lo sfondo.
importante assegnare sempre un colore alla pagina anche quando lo
sfondo della pagina bianco (al massimo assegnare bgcolor="#FFFFFF").
Infatti, come impostazione predefinita, il browser assegna alla pagina il colore
di sfondo che lutente ha impostato nella finestra del sistema operativo: quindi
se lutente ha impostato uno sfondo nero e voi non avete assegnato nessun
colore di sfondo alla pagina, la vostra pagina sar nera.
Se usate Windows, per fare una prova provate a impostare diversamente il
tema delle finestre. Dal pannello di controllo: Schermo > Aspetto >
Combinazione e poi scegliere:
"nero a contrasto elevato", oppure "prugna".
Infine visualizzate questa pagina - che senza sfondo e vedrete che la
pagina HTML prender la colorazione che avete impostato nel tema delle
finestre.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_12.htm01/12/2004 21.18.30
cerca
HTML.it
Qui il nostro contenuto
http://www.html.it/guida/esempi/body/04.html01/12/2004 21.19.06
HTML.it
Qui il nostro contenuto
http://www.html.it/guida/esempi/body/05.html01/12/2004 21.19.19
Eliminare i margini delle pagine | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Eliminare i margini delle pagine
Abbiamo detto allinizio che il lavoro del webmaster consiste non soltanto nel
conoscere alla perfezione il linguaggio HTML, ma soprattutto nellessere un
esperto del modo in cui i browser visualizzano le pagine.
Negli esempi precedenti avrete notate che il browser secondo limpostazione
predefinita - lascia un po di margine tra la pagina e il bordo della finestra.
Questo in alcune situazioni (ad esempio se volete disporre un logo in alto a
sinistra) pu dare fastidio.
Per eliminare il bordo sufficiente inserire i seguenti attributi del body:
<body leftmargin="0" topmargin="0">
Questa sintassi funziona correttamente con ogni browser moderno (Internet
Explorer, Netscape 6 o superiore, Mozilla, Opera), come possibile vedere
nellesempio.
Tuttavia bene sapere che i browser nel corso degli anni hanno introdotto dei
tag e degli attributi "proprietari", con lo scopo di ottenere determinati effetti di
visualizzazione, o indicare in qualche modo particolare il contenuto.
Questa situazione capitava soprattutto nei primi anni del web, quando
Microsoft e Netscape lottavano per il predominio del mercato: in qualche
misura la guerra dei browser stata anche guerra di tag proprietari, con gravi
difficolt per gli sviluppatori che si trovavano continuamente di fronte a pagine
che non venivano visualizzate allo stesso modo.
Per questo motivo fino a qualche anno fa per togliere il margine con Netscape
4.x dovevate inserire:
<body marginleft="0" margintop="0">
Mentre per togliere il margine con Internet Explorer:
<body leftmargin="0" topmargin="0">
Se avrete a che fare con pagine web di altri webmaster vi capiter spesso di
incontrare questo genere di sintassi:
<body leftmargin="0" topmargin="0" marginleft="0" margintop="0">
Questa sintassi serviva per eliminare il margine sia con Netscape 4.x, sia con
Internet Explorer, specificando tutti e quattro gli attributi.
Al giorno doggi potete invece limitarvi a scrivere:
<body leftmargin="0" topmargin="0">
Fortunatamente negli ultimi anni lottica della guerra dei browser cambiata, e
i produttori di software sono passati dalla competizione per chi implementa
nuove e fantastiche funzionalit proprietarie, al tentativo di rilasciare browser
http://www.html.it/guida/html_13.htm (1 di 2)01/12/2004 21.19.28
cerca
Eliminare i margini delle pagine | Guida HTML | HTML.it
che aderiscano al meglio agli standard del W3C (non un caso che sia la
Netscape, sia la Microsoft facciano parte del consorzio), senza perdere di vista
la velocit nelleffettuare il rendering della pagina.
Ladesione agli standard non pu che essere un bene, dal momento che
potenzialmente significa per noi sviluppatori la stesura di codice "universale",
che funzioni correttamente a prescindere dal browser e dalla piattaforma
(speriamo).
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_13.htm (2 di 2)01/12/2004 21.19.28
http://www.html.it/guida/esempi/body/06.html
Qui il nostro contenuto
http://www.html.it/guida/esempi/body/06.html01/12/2004 21.19.49
HTML.it - browser: la guerra dei browser
HOME| SHOP| CORSI IN AULA| FREE INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004: 'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per i
prodotti televisivi?
Sony: Walkman contro iPod
W3C10: il W3C compie 10
anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale che
bazar
Le altre news - RSS
La guerra dei browser
di Francesco-Saverio Caccavella
La guerra dei browser uno dei leit-motiv pi sfruttati e dibattuti dalla comunit di
Internet; probabilmente anche una delle maggiori e pi piacevoli vidende da
seguire perch segna, con i suoi alti e bassi, tutta la storia del World Wide Web; la
sua evoluzione, la sua diffusione. una delle storie pi piacevoli anche perch non
racconta soltanto le vicende commerciali di due grosse societ ma anche quelle di
intere comunit di persone che, anno dopo anno, hanno seguito l'evolversi di questi
strumenti essenziali parteggiando ora per uno ora per l'altro. Insomma, la guerra dei
bowser, cos come si sviluppata, stata decisa da chi il Web lo usa e no solo da
chi con il Web costruisce imperi.
Abbiamo parlato sinora di due soli browser che hanno partecipato a questa
"guerra", questo perch i soli partecipanti che hanno affilato le armi e combattuto
ferocemente sono stati Netscape (Navigator e poi Communicator) e Internet
Explorer i quali, attraverso colpi bassi e lunghe diatribe, hanno praticamente
relegato ad una utilizzazione di nicchia gli altri browser, sfruttando le proprie
posizioni dominanti, i propri capitali e, spesso e volentieri, i propri avv ocati.
A tutt'oggi, la guerra ha un vincitore: Internet Explorer 5 sicuramente, per
semplicit d'uso, integrazione con Windows, velocit e diffusione il browser pi
adatto ad un'utenza che trova nella semplicit di utilizzo e nella compatibilit le
necessarie componenti di un software. Netscape non ha per abbandonato il
campo, la versione 6 del suo browser, nel momento in cui scriviamo appena
uscita la Previous Release 6, eredita ci che di buono c'era nella precedenti
versioni, migliorando l'affidabilit e la velocit di esecuzione.
Le prime avvisaglie di una contrapposizione fra i due browser si ebbero gi con le
prime release del browser Microsoft: tra l'Agosto e il novembre 1995 uscirono le
versioni finali di Internet Explorer 1.0 e 2.0; Netscape aveva rilasciato nel maggio
1994 la versione 1 di Navigator e, anche sotto la pressione delle voci che davano
per imminente l'uscita di Internet Explorer 3.0, present nel marzo 1996 Netscape
2.0. In questi periodi due erano le principali preoccupazioni degli sviluppatori di
Browser: il nascente supporto per Java e Javascript (VB Script per la Microsoft), la
compatibilit con lo (pseudo)standard HTML 3.0 che diventer in futuro (Gennaio
1997) HTML 3.2 e lo sviluppo dei plug-in che, introdotto nelle versione beta di
Netscape 2.0 sin dalla fine del 1995, sar presto accolto anche da Explorer.
Tutta la nuova tecnologia venne integrata e perfezionata nei due browser
nell'Agosto 1996, quando in contemporanea uscirono sia il Netscape sia l'Explorer
di terza generazione. Entrambi apportavano serie innovazioni, Explorer tuttavia,
dopo che Netscape aveva guidato la standardizzazione nei mesi precedenti, integr
la compatibilit ai CSS che Netscape non aveva ancora reso disponibile. Entrambi i
browser soffrivano anche di numerosi bug e incoerenze dovute alla velocit con cui
erano stati messi sul mercato (pensare che tra l'Aprile e l'Agosto 1996 uscirono ben
sei versioni beta: tre per ogni prodotto).
La battaglia per si spost subito su un altro versante: quello giudiziario. In una
lettera datata 12 agosto 1996 ed indirizzata al DOJ (Department of Justice)
l'avvocato della Netscape Communications accusava Microsoft di concorrenza
sleale: i manager della casa di Redmond avrebbero spinto, grazie alla diffusione del
proprio sistema operativo, le case di produttori di Personal Computer e i Service
Provider a favorire la diffusione del proprio browser a danno di Netscape. Il
dipartimento di giustizia americano aprir in settembre la quarta, sino allora,
inchiesta contro Microsoft e un anno dopo gli accertamenti legali porteranno
all'apertura del processo la cui definitiva sentenza non prevista a breve.
http://www.html.it/dossier/03_browser/03.htm (1 di 2)01/12/2004 21.20.10
cerca
HTML.it - browser: la guerra dei browser
Le vicende giudiziarie si conoscono: Explorer 4.0 integrato in Windows 98, come
Explorer 5.0 lo sar di Windows 98 SE e Explorer 5.5 di Windows Millennium; anzi,
il browser parte integrante del sistema operativo e non possibile disinstallarlo se
non attraverso software terzi e poco diffusi fra gli utenti (come 98lite); Microsoft
anche accusata di aver fatto pressione e sulla Netscape e su altre societ di
software e hardware al fine di scampare accordi favorevoli al suo monopolio.
Netscape stata a guardare le vicende del processo e la sua versione del browser
ne ha risentito, e molto. In poco pi di tre anni Microsoft riuscita a capovolgere i
rapporti di forza tra i due browser: l'80% di mercato che nel 1996 apparteneva a
Netscape ora appartiene ad Explorer con picchi ancora pi alti nel caso di nuovi
utenti.
In quest'ultimissimo periodo buone nuove si annunciano per Netscape; la nuova
versione del navigatore sembra offrire nuove e migliori caratteristiche tali da poter
concorrere direttamente con il prodotto di Microsoft e la forza di una societ come
America On Line, che si gi tolta parecchie soddisfazioni nei confronti di Bill
Gates, potrebbe rendere paritetiche le forze finanziarie in modo da far passare in
secondo piano le preoccupazioni monopolistiche.
Microsoft non star a guardare; probabilmente la risposta a questo nuovo attacco
potrebbe forse venire proprio dalla "Net philosophy" che la societ va
propagandando da un po' di tempo al fine di "creare una nuova generazione di
prodotti e servizi Internet in grado di offrire a consumatori e aziende il Web nel
modo desiderato, in qualsiasi momento e luogo e tramite qualunque dispositivo".
Una cosa tuttavia ci rende contenti; messe da parte le bizze e le recriminazioni, i
due colossi stanno tornando a riflettere sulle tecnologie, sugli standard,
sull'usabilit. La nuova concorrenza che si annuncia sar, probabilmente,
all'insegna di problematiche nuove.
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/dossier/03_browser/03.htm (2 di 2)01/12/2004 21.20.10
Impostare la lingua del documento | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Impostare la lingua del documento
Tramite lattributo "lang" possibile specificare ai motori di ricerca e al
browser dellutente quale lingua stiamo utilizzando. La sintassi per la lingua
italiana :
<body lang="it">
Questo attributo non solo una propriet del tag body, ma pu essere riferito
alla maggior parte dei tag HTML che vedremo (come paragrafi, blocchi,
tabelle, eccetera). importante sottolineare che questo attributo non carica
automaticamente il set di caratteri necessari alla visualizzazione della lingua,
ma si limita a specificare che il documento (o parte del documento) nella
lingua indicata.
Si tratta di un attributo che vi sar utile soprattutto se vi capiter di sviluppare
dei siti multilingua (e poi di doverli inserire nei motori di ricerca).
Ecco il codice che esemplifica gli argomenti appresi finora in questa lezione,
visualizzabile anche in questa pagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>
<body leftmargin="0" topmargin="0" background="imgs/sfondo00006.gif"
bgcolor="#66CCFF" lang="it">
Testo di prova
</body>
</html>
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_14.htm01/12/2004 21.20.32
cerca
HTML.it
Testo di prova
http://www.html.it/guida/esempi/body/07.html01/12/2004 21.21.21
Approfondimenti: lo sfondo con i CSS | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Approfondimenti: lo sfondo con i CSS
Tutti gli attributi del body che abbiamo visto finora (da eccezione dellattributo
"lang") sono caratteristiche che riguardano il layout della nostra pagina
HTML. Come si pu vedere, con una sintassi di questo genere:
<body leftmargin="0" topmargin="0" background="imgs/sfondo00006.gif"
bgcolor="#66CCFF" lang="it">
Il nostro testo.
</body>
il layout e il contenuto sono mischiati tra loro. Gli attributi "background" e
"bgcolor" sono addirittura deprecati nelle specifiche del W3C: significa che
andranno perduti.
In un approccio di impaginazione che utilizzi i fogli di stile, laspetto che
riguarda la visualizzazione deve essere separato dal contenuto.
Il nostro body si ridurr quindi a qualcosa di minimale, come:
<body lang="it">
mentre le regole che indicano come visualizzare lo sfondo saranno
visualizzate in una locazione separata del documento.
Le regole su come impostare lo sfondo con i CSS vengono spiegate
dettagliatamente nella relativa lezione della guida ai CSS.
I fogli di Stile sono estremamente potenti, e dando unocchiata al link che ho
segnalato poco sopra si pu leggere che anche possibile fissare lo sfondo in
modo che non si ripeta:
<body style="background-image: url(sfondo.gif); background-repeat: repeat;">
si tratta di una sintassi che funziona bene persino con Netscape 4.x, come si
pu vedere nella pagina di esempio.
Oppure possibile "fissare lo sfondo" in modo da potervi fare scorrere sopra il
contenuto della pagina. La sintassi la seguente:
<body style="background-image: url(sfondo.gif); background-attachment:
fixed;">
come si pu vedere anche nellesempio.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/guida/html_15.htm (1 di 2)01/12/2004 21.21.35
cerca
Gestione dello sfondo | Guida CSS | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Gestione dello sfondo
Esamineremo in questa lezione le propriet relative alla gestione dello sfondo.
Sin dalle origini di HTML stato possibile definire un colore o un'immagine di
sfondo per le nostre pagine web. La scelta si restringe comunque a due
elementi: il corpo principale della pagina (<BODY>) o le tabelle. Un'altra
limitazione riguarda il comportamento delle immagini di sfondo: esse vengono
infatti ripetute in senso orizzontale e verticale fino a riempire l'intera area della
finestra, del frame o della tabella. Proprio questo comportamento ha fatto
sempre propendere per la scelta di piccole textures in grado di dare la
sensazione visiva dell'uniformit. Grazie ai CSS queste limitazioni vengono
spazzate via e le possibilit creative, compatibilit permettendo, sono davvero
infinite.
Ecco la lista delle propriet, applicabili, ed questa la prima grande
innovazione dei CSS, a tutti gli elementi:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di
un elemento. La propriet background, invece, una propriet a sintassi
abbreviata con cui possiamo definire sinteticamente e con una sola
dichiarazione tutti i valori per lo sfondo. La analizeremo alla fine. Prima
necessario chiarire significato e sintassi delle propriet singole.
background-color
Definisce il colore di sfondo di un elemento. Questa propriet non ereditata.
Sintassi
selettore {background-color: <valore>;}
Valori
G un qualunque colore
G la parola chiave transparent
Usando transparent come valore un elemento avr come colore quello
dell'elemento parente. Nell'esempio: il colore di #div2 impostato su
transparent, per cui esso sar, per l'appunto, trasparente, lasciando
emergere il colore dell'elemento parente (#div1).
Esempi
body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)
http://www.html.it/css/guida_css_17.htm (1 di 4)01/12/2004 21.21.51
cerca
Gestione dello sfondo | Guida CSS | HTML.it
background-image
Definisce l'URL di un'immagine da usare come sfondo di un elemento. Questa
propriet non ereditata.
Sintassi
selettore { background-image: url(<valore>); }
Valori
G un URL assoluto o relativo che punti ad un'immagine
G la parola chiave none. Valore di default.
Usare none equivale a non impostare la propriet: nessuna immagine verr
applicata come sfondo.
Esempi
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.server.it/images/sfondo.gif); }
Usando questa propriet da sola si ottiene lo stesso risultato che in HTML si
aveva con l'attributo background (vedi esempio).
Piccolo consiglio. Una buona norma e il buon senso vogliono che quando si
definisce un'immagine come sfondo si usi sempre anche un colore di sfondo e
che questo colore consenta una lettura agevole del testo. Se le immagini sono
disabilitate, ad esempio, il browser mostrerebbe il suo colore di sfondo
predefinito: se questo bianco e il nostro testo pure sarebbe evidentemente
un disastro. Attenzione, dunque!
background-repeat
Con questa propriet iniziano le novit. Essa consente di definire la direzione
in cui l'immagine di sfondo viene ripetuta. Propriet non ereditata.
Sintassi
selettore {background-repeat: <valore>;}
Valori
G repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il
comportamento standard.
G repeat-x. L'immagine viene ripetuta solo in orizzontale.
G repeat-y. L'immagine viene ripetuta solo in verticale.
G no-repeat. L'immagine non viene ripetuta.
L'esempio riporta i quattro diversi comportamenti con un'immagine di sfondo
applicata ad una tabella.
Esempi
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
background-attachment
http://www.html.it/css/guida_css_17.htm (2 di 4)01/12/2004 21.21.51
Gestione dello sfondo | Guida CSS | HTML.it
Con questa propriet si imposta il comportamento dell'immagine di sfondo
rispetto all'elemento cui applicata e all'intera finestra del browser. Si decide,
in pratica, se essa deve scorrere insieme al contenuto o se deve invece
rimanere fissa. Propriet non ereditata.
Sintassi
selettore {background-attachment: <valore>;}
Valori
G scroll. L'immagine scorre con il resto del documento quando si fa lo
scrolling della pagina (esempio)
G fixed. L'immagine rimane fissa mentre il documento scorre (esempio)
Questa propriet consente risultati estetici di grande impatto ed consigliabile,
per ottenerne il meglio, usarla sia in combinazione con le altre propriet sia
con immagini grandi.
Esempi
body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }
background-position
Propriet un p complessa. Definisce il punto in cui verr piazzata
un'immagine di sfondo non ripetuta o da dove inizier la ripetizione di una
ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla
compatibilit e alla resa, non omogeena, tra i vari browser. Propriet non
ereditata.
Sintassi
selettore {background-position: <valore> o <valori>;}
Valori
I valori possibili sono diversi. Tutti per definiscono le coordinate di un punto
sull'asse verticale e su quello orizzontale. Ci pu avvenire nei seguenti modi:
G con valori in percentuale
G con valori espressi con unit di misura
G con le parole chiave top, left, bottom, right
L'esempio render tutto pi chiaro. Per questo documento di esempio
abbiamo usato queste impostazioni:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}
Significa che l'immagine apparir a 50px dal bordo superiore e a 50px da
quello sinistro della finestra. Potevo usare invece dei pixel altre unit di misura
o percentuali. Come al solito, la scelta delle percentuali mi assicura una
maggiore affiidabilit a risoluzioni diverse. Allo stesso modo potevo utilizzare
le parole chiave. Se, ad esempio, uso:
http://www.html.it/css/guida_css_17.htm (3 di 4)01/12/2004 21.21.51
Gestione dello sfondo | Guida CSS | HTML.it
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: center center;
}
l'immagine di sfondo apparir centrata in entrambe le direzioni (esempio).
Logica vuole, trattandosi di definire le coordinate che si impostino due valori.
Definendone uno solo esso sar usato sia per l'asse orizzontale che per quello
verticale.
background
E veniamo alla propriet background. Con essa, ricordiamolo, possiamo
definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la
dichiarazione non deve contenere necessariamente riferimenti a tutte le
propriet viste finora, ma deve contenere almeno la definizione del colore di
sfondo.
Sintassi
selettore {background: background-color background-image background-
repeat background-attachment background-position;}
I valori non vanno separati da virgole. L'ordine non importante, ma quello
dato il pi logico e andrebbe rispetatto: si va in ordine di importanza.
Esempi
In questa pagina di esempio lo sfondo della pagina stato cos settato con
l'uso della propriet background:
body {
background: white url(sfondo.gif) repeat-x fixed;
}
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/css/guida_css_17.htm (4 di 4)01/12/2004 21.21.51
Background-color
Questo il div #div1.
Codice:
#div1 {
background-color : Aqua;
}
Questo il div #div2: trasparente e il suo colore diventa quello dell'elemento parente.
Codice:
#div2 {
background-color: transparent;
}
Questo il div #div3.
Codice:
#div3 {
background-color : Aqua;
}
Questo il div #div4: il colore di sfondo rosso.
Codice:
#div2 {
background-color: red;
}
http://www.html.it/css/test/back_color.html01/12/2004 21.21.57
Background_image
Un'immagine di sfondo applicata nel modo tradizionale si estende a
tutta la pagina.
Codice:
body {
background-color : blue;
background-image: url(sfondo.gif);
font : bold 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #CC0000;
}
http://www.html.it/css/test/back_image.html01/12/2004 21.22.38
Back-repeat
Background-image: repeat
Abbiamo applicato alla tabella qui sotto una piccola immagine di sfondo. Il risultato, usando il
valore repeat quello classico di HTML.
Codice:
table.tab1 {
background-image: url(sfondo.gif);
background-repeat: repeat;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Background-image: no-repeat
Se usiamo il valore no-repeat il risultato questo: l'immagine viene mostrata solo una volta
nell'angolo superiore sinistro.
Codice:
table.tab2 {
background-image: url(sfondo.gif);
background-repeat: no-repeat;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Background-image: repeat-x
http://www.html.it/css/test/back_repeat.html (1 di 2)01/12/2004 21.23.18
Back-repeat
In questo caso abbiamo usato repeat-x: lo sfondo ripetuto solo in senso orizzontale.
Codice:
table.tab3 {
background-image: url(sfondo.gif);
background-repeat: repeat-x;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Background-image: repeat-y
Ultima possibilt. Con repeat-y l'immagine ripetuta solo in senso verticale.
Codice:
table.tab4 {
background-image: url(sfondo.gif);
background-repeat: repeat-y;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
http://www.html.it/css/test/back_repeat.html (2 di 2)01/12/2004 21.23.18
Background-attachment scroll
Background-attachment: scroll
Se usiamo il valore scroll otteniamo questo effetto.
Codice:
body {
background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: scroll;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
http://www.html.it/css/test/back_attachmentscroll.html01/12/2004 21.23.35
Background-attachment fixed
Background-attachment: fixed
Ecco come funziona il valore fixed per questa propriet. Scorrendo la pagina lo sfondo
rimane fisso.
Codice:
body {
background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
http://www.html.it/css/test/back_attachmentfix.html01/12/2004 21.23.58
Background-position
Background-position: uso dei pixel
Codice:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
http://www.html.it/css/test/back_position.html01/12/2004 21.24.13
Background-position
Background-position: uso di parole chiave
Codice:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: center center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
http://www.html.it/css/test/back_position2.html01/12/2004 21.24.29
Background
Background
Codice:
body {
background: White url(sfondo.gif) repeat-x fixed;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
http://www.html.it/css/test/background.html01/12/2004 21.24.51
HTML.it
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 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 Testo di prova Testo di prova
http://www.html.it/guida/esempi/body/08.html01/12/2004 21.25.21
HTML.it
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 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 Testo di prova Testo di prova
http://www.html.it/guida/esempi/body/09.html01/12/2004 21.25.35
Impostare il colore del testo e dei link per tutta la pagina | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Impostare il colore del testo e dei link per tutta la
pagina
Il testo
Se non impostate nessun colore per il testo, di default il testo di una pagina
nero.
Tuttavia il nero non sempre leggibile con tutti i colori di sfondo. Immaginate
ad esempio di volere utilizzare come sfondo il colore nero: con una pagina
nera e testo nero non leggeremmo nulla!
Abbiamo allora la possibilit di assegnare un colore per il testo di tutta la
pagina, semplicemente utilizzando questo attributo del tag body:
<body text="red">
Quindi potremo avere, ad esempio:
<body bgcolor="#0000ff" text="#ffffff">
come nellesempio consultabile in questa pagina.
I link
Non c bisogno di spiegare che cosa siano i link: lesperienza della
navigazione nel web ci ha infatti insegnato che il link un collegamento, un
ponte tra una pagina laltra.
Non tutti per sanno che i link testuali hanno diversi stati:
Status Codifica in HTML
4.01
Descrizione
Collegamento
normale
link Normalmente il link quando si
trova "a riposo" viene
evidenziato in qualche maniera
allinterno della pagina HTML, in
modo che sia facile per lutente
individuarlo. NellHTML
tradizionale il link sempre
sottolineato ( possibile
eliminare la sottolineatura
soltanto usando i CSS). Di
default i link sono blu
(#0000FF).
http://www.html.it/guida/html_16.htm (1 di 3)01/12/2004 21.25.52
cerca
Impostare il colore del testo e dei link per tutta la pagina | Guida HTML | HTML.it
Collegamento
visitato
visited Un link visitato, quando lURL
della pagina compare nella
cronologia dellutente. Di
default i link visitati sono di
color violetto (pi esattamente:
#800080).
Collegamento
attivo
active Il collegamento attivo nel
momento in cui il link stato
cliccato e sta avvenendo il
passaggio da una pagina
allaltra.
Non si tratta di una
caratteristica particolarmente
utile oggi, ma quando i modem
avevano una velocit molto
inferiore a quella odierna,
vedere un link "attivo" era
comunque unindicazione sul
fatto che qualcosa stava
avvenendo.
Con Internet Explorer
possibile vedere anche una
linea tratteggiata attorno al
collegamento attivo.
Un ulteriore condizione in cui un
link si rileva "attivo" quando si
utilizza il tasto destro del mouse
su di lui. Insomma un link
attivo quando "ha il focus".
Collegamento al
passaggio del
mouse
non presente
("hover" nei CSS)
Con lHTML 4.01 al passaggio
del mouse sul link si pu fare
ben poco, coi fogli di stile
invece possibile creare
qualche effetto di
visualizzazione.
Abbiamo dunque tre stati canonici dei link (link a riposo, link attivo e link
visitato) e una condizione aggiuntiva introdotta dai fogli di stile (status del link
al passaggio del mouse):
Anche il colore dei link di tutta la pagina pu essere tramite gli attributi del
body:
I link secondo le impostazioni predefinite sono blu, per cambiare colore:
<body link="red">
Per cambiare colore ai link visitati (di default viola):
<body vlink="green">
i link visitati vengono memorizzate nella cronologia del browser, quindi se
volete ripristinare il colore originario dei link, sufficiente cancellare la
cronologia.
Per cambiare colore ai link attivi:
<body alink="yellow">
http://www.html.it/guida/html_16.htm (2 di 3)01/12/2004 21.25.52
Impostare il colore del testo e dei link per tutta la pagina | Guida HTML | HTML.it
La sintassi completa per impostare i link quindi:
<body link="red" alink="yellow" vlink="green">
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_16.htm (3 di 3)01/12/2004 21.25.52
HTML.it
Qui il nostro contenuto
http://www.html.it/guida/esempi/body/10.html01/12/2004 21.25.55
Titoli, paragrafi, blocchi di testo e contenitori | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Titoli, paragrafi, blocchi di testo e contenitori
Nulla ci vieta di scrivere direttamente allinterno del tag body, come gi
abbiamo visto negli esempi precedenti, senza utilizzare nessun tag.
A dire la verit per pi pratico racchiudere il testo in appositi tag a seconda
della funzione che il testo sta svolgendo. La nostra pagina risulter pi
semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere
la formattazione che desideriamo.
Come abbiamo detto dallinzio, i tag sono infatti dei marcatori che ci
permettono di mantenere ordine nella pagina e ottenere il layout che
desideriamo.
I principali tag-contenitori da utilizzare per "racchiudere" il testo sono:
Nome tag Visualizzazione
codice
Descrizione
<h1>titolo 1 </h1>
<h2>titolo 2 </h2>
<h3>titolo 3 </h3>
<h4>titolo 4 </h4>
<h5>titolo 5 </h5>
<h6>titolo 6 </h6>
titolo 1
titolo 2
titolo 3
titolo 4
titolo 5
titolo 6
"H" sta per "heading",
cio titolo: le
grandezze previste
sono sei. Dall<h1>,
che il pi importante,
si va via via
degradando fino all
<h6>.
Il tag <hx> (sia esso
h1 o h6) risulta
formattato in grassetto
e lascia una riga vuota
prima e dopo di s. Si
tratta dunque di un
elemento di blocco.
<p>paragrafo </p>
Esempio:
<p>paragrafo 1</p>
<p>paragrafo 2</p>
paragrafo 1
paragrafo 2
Il paragrafo lunit di
base entro cui
suddividere un testo. Il
tag <P> lascia una
riga vuota prima della
sua apertura e dopo la
sua chiusura.
http://www.html.it/guida/html_17.htm (1 di 4)01/12/2004 21.26.13
cerca
Titoli, paragrafi, blocchi di testo e contenitori | Guida HTML | HTML.it
<div>Blocco di testo</
div>
Esempio:
<div>blocco 1</div>
<div>blocco 2</div>
blocco 1
blocco 2
Il blocco di testo va a
capo, ma - a
differenza del
paragrafo non lascia
spazi prima e dopo la
sua apertura.
<span>contenitore</
span>
Esempio:
<span>contenitore 1</
span>
<span>contenitore 2</
span>
<span>contenitore 3</
span>
contenitore 1
contenitore 2
contenitore 3
Lo span un
contenitore generico
che pu essere
annidato (ad esempio)
allinterno dei DIV.
Si tratta di un
elemento inline, che
cio non va a capo e
continua sulla stessa
linea del tag che lo
include.
Avrete modo di
utilizzare lo <SPAN>
soprattutto quando
incomincerete ad
usare i fogli di stile.
Le differenze tra <P>, <DIV> e <SPAN> sono quindi che:
G <P> lascia spazio prima e dopo la propria chiusura
G <DIV> non lascia spazio prima e dopo la propria chiusura, ma -
essendo un elemento di blocco - va a capo
G <SPAN> -essendo un elemento inline - non va a capo
Un esempio dovrebbe chiarire il tutto.
Per quel che riguarda il tag heading (<h1>, , </h6>) da notare che la
grandezza del carattere varia a seconda delle impostazioni che lutente ha sul
proprio computer.
Con Internet Explorer, ad esempio, basta andare in: Visualizza > Carattere
Per vedere il titolo crescere o decrescere.
Allineare il testo
Tutti i "tag-contenitori" che abbiamo appena visto (e molti altri tag di quelli che
vedremo) permettono di allineare il testo utilizzando semplicemente lattributo
align.
Se avete seguito finora la presente guida, avrete anche indovinato che
lattributo "align" disapprovato dal W3C, dal momento che per allineare il
testo bisognerebbe invece utilizzare i fogli di stile.
In ogni caso, vediamo come potremmo ad esempio allineare il testo di un
paragrafo:
http://www.html.it/guida/html_17.htm (2 di 4)01/12/2004 21.26.13
Titoli, paragrafi, blocchi di testo e contenitori | Guida HTML | HTML.it
Allineamento Sintassi Visualizzazione codice
HTML
Testo allineato a
sinistra
<p
align="left">testo</p>
<p align="left">Nel mezzo
del cammin di
nostra vita mi ritrovai per
una selva oscura ch la
diritta via era smarrita</p>
Testo allineato a
destra
<p
align="right">testo</
p>
<p align="right">Nel mezzo
del cammin di
nostra vita mi ritrovai per
una selva oscura ch la
diritta via era smarrita</p>
Testo giustificato <p
align="justify">testo</
p>
<p align="justify">Nel mezzo
del cammin di
nostra vita mi ritrovai per
una selva oscura ch la
diritta via era smarrita</p>
Andare a capo
Per andare a capo molti webmaster utilizzando lapertura arbitraria di paragrafi
che non contengono nulla e che vengono lasciati aperti. Ad esempio:
<p>
<p>
<p>
Si tratta in buona sostanza di un errore, visto che per andare a capo esiste il
tag <br> ("break", cio "interruzione").
Per andare a capo quindi sufficiente scrivere un <br>. Per saltare una riga
ne occorrono due:
<br><br>
Un altro valido tag per dividere la pagina in parti il tag <hr> ("horizontal
rule"), che serve per tracciare una linea orizzontale. Ecco il tag in azione:
Questo tag ha anche alcuni attributi (deprecati, perch la formattazione
andrebbe fatta con i CSS):
Lattributo "noshade" evita di sfumare la linea, "size" indica laltezza in pixel,
"width" la larghezza in pixel o in percentuale, "align" lallineamento. Con
Internet Explorer si riesce persino a impostare il colore:
<hr noshade size="5" width="50%" align="center" color="red">
Risultato:
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/guida/html_17.htm (3 di 4)01/12/2004 21.26.13
HTML.it
titolo 1
titolo 2
titolo 3
titolo 4
titolo 5
titolo 6
PRIMO PARAGRAFO
testo testo testo
testo testo testo
SECONDO PARAGRAFO
testo testo testo
PRIMO BLOCCO
testo testo testo INCOMINCIA LO "SPAN" testo testo testo FINE DELLO SPAN testo testo testo
FINE PRIMO BLOCCO
CONTINUA IL SECONDO PARAGRAFO testo testo testo FINE DEL SECONDO PARAGRAFO
http://www.html.it/guida/esempi/tag/13.html01/12/2004 21.26.47
Scegliere lo stile (grassetto, corsivo & C.) | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Scegliere lo stile (grassetto, corsivo & C.)
Nella grafica cartacea con "stile di un testo" si intende la variante del "tondo",
del "corsivo", o del "grassetto" di un carattere tipografico.
Nel parlare di stili del testo in HTML solitamente si suddividono i tag in grado di
attribuire lo stile al testo in stili fisici e stili logici:
G vengono definiti come fisici quei tag che definiscono graficamente lo
stile del carattere, indipendentemente dalla funzione del contenuto del
tag
G vengono definiti come logici quei tag che forniscono anche informazioni
sul ruolo svolto dal contenuto del tag, e in base a questo adottano uno
stile grafico
Gli stili fisici
I principali stili fisici sono:
Codice HTML Visualizzazione Descrizione
<b>testo in
grassetto</b>
Esempio:
Questo
<b>testo</b>
in grassetto
Questo testo in grassetto Formatta il
testo in
grassetto.
<i>testo in
corsivo</i>
Esempio:
Questo
<i>testo</i>
in corsivo
Questo testo in corsivo Formatta il
testo in
corsivo.
Tuttavia
bisogna
evitare di
evidenziare in
corsivo dei
blocchi di
lunghezza
considerevole,
perch la
leggibilit del
corsivo nel
web lascia a
desiderare.
Meglio
limitarsi a
poche parole.
http://www.html.it/guida/html_18.htm (1 di 6)01/12/2004 21.27.02
cerca
Scegliere lo stile (grassetto, corsivo & C.) | Guida HTML | HTML.it
<pre>testo
preformattato</
pre>
Esempio:
<pre>
Nel mezzo del
cammin di
nostra vita
mi ritrovai per
una selva
oscura
ch la diritta
via era
smarrita.
</pre>
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ch la diritta via era smarrita.
Il motore di
rendering del
browser
restituisce il
testo cos
come stato
inserito nel file
html
dallautore
stesso
(preformattato
quindi), senza
riformattarlo.
Di fatto un
tag poco usato.
<u>testo
sottolineato</
u>
Questo testo
sottolineato
Esempio:
Questo
<u>testo</u>
sottolineato
Questo testo sottolineato Sottolinea il
testo presente
nel tag.
Nel web le
sottolineature
del testo sono
da evitare, per
non
confondere il
lettore con i
link.
<strike>testo
barrato</
strike>
Esempio:
Questo
<strike>testo</
strike>
barrato
Questo testo barrato Con il testo
barrato,
vengono
indicate (ad
esempio) le
correzioni.
<sup>testo in
apice</sup>
Esempio:
E=mc<sup>2</
sup>
E=mc
2
"Superscript":
indica al
browser di
portare il testo
al di sopra
della linea di
scrittura. Utile
per formule
matematiche
(ad esempio le
potenze)
http://www.html.it/guida/html_18.htm (2 di 6)01/12/2004 21.27.02
Scegliere lo stile (grassetto, corsivo & C.) | Guida HTML | HTML.it
<sub>testo in
pedice</sub>
Esempio:
H<sub>2</
sub>O
H
2
O "Subscript":
indica al
browser di
portare il testo
al di sotto
della linea di
scrittura (utile
ad esempio
per i simboli
chimici)
Di fatto i tag <b> e <i> sono molto utilizzati, perch consentono di cambiare lo
stile del testo al volo.
Gli stili logici
Come abbiamo visto gli stili logici forniscono anche informazioni sul contenuto
e la loro formattazione spesso lasciata al browser con risultati a volte
deludenti. Proprio per questo gli stili logici sono entrati in disuso e sono poco
usati.
Riportiamo di eseguito i principali stili logici, per completezza, ma non sar
necessario ricordarseli.
Codice HTML Visualizzazione Descrizione
<abbr>abbreviazione</
<abbr>
Esempio:
<abbr>C/A</abbr>
HTML.it
C/A HTML.it Indica un
abbreviazione.
Nessun rendering del
testo particolare
<acronym>acronimo</
acronym>
Esempio:
<acronym>HTML</
acronym>
HTML Indica un acronimo.
Nessun rendering del
testo particolare
<address>indirizzo</
address>
Esempio:
<address>HTML.it - via
dei Castani 183/185
00172 Roma</address>
HTML.it - via dei
Castani 183/185
00172 Roma
Serve per indicare gli
indirizzi: siano essi e-
mail, o indirizzi fisici.
Il testo viene
visualizzato in corsivo
http://www.html.it/guida/html_18.htm (3 di 6)01/12/2004 21.27.02
Scegliere lo stile (grassetto, corsivo & C.) | Guida HTML | HTML.it
<blockquote>blocco di
citazione</blockquote>
Esempio:
<blockquote> Nel mezzo
del cammin di
nostra vita mi ritrovai
per una selva oscura ch
la diritta via era smarrita
</blockquote>
Nel
mezzo
del
cammin
di nostra
vita mi
ritrovai
per una
selva
oscura
ch la
diritta
via era
smarrita
Sono blocchi di
citazione.
Il testo viene
rientrato verso destra.
<cite>citazione</cite>
Esempio:
<cite> Nel mezzo del
cammin di
nostra vita mi ritrovai
per una selva oscura ch
la diritta via era smarrita
</cite>
Nel mezzo del
cammin di nostra
vita mi ritrovai per
una selva oscura
ch la diritta via era
smarrita
Per citazioni brevi: il
testo visualizzato in
corsivo.
<code>codice</code>
Esempio:
<code>if (document.all)
alert (&quot;ciao&quot;);
</code>
if (document.all) alert
("ciao");
Indica un blocco di
codice in linguaggio
di programmazione.
Nessun rendering del
testo particolare
<dfn>definizione</dfn>
Esempio:
<dfn>LHTML un
linguaggio di
contrassegno</dfn>
LHTML un
linguaggio di
contrassegno
Indica una
definizione: il testo
visualizzato in corsivo
<em>enfasi</em>
Esempio:
Ti ho detto <em>questo!
</em>
Ti ho detto questo! Serve per porre
lenfasi su
unespressione: il
testo visualizzato in
corsivo
<kdb>keyboard</kdb>
Esempio:
<kdb>digitazione da
tastiera</kdb>
digitazione da tastiera Indica una digitazione
da tastiera: il testo
viene visualizzato a
spaziatura fissa
http://www.html.it/guida/html_18.htm (4 di 6)01/12/2004 21.27.02
Scegliere lo stile (grassetto, corsivo & C.) | Guida HTML | HTML.it
<q>citazione allinterno
della frase</q>
Esempio:
Come diceva Don
Abbondio: <q>&quot;Il
coraggio, uno non se lo
pu dare&quot;</q>
Come diceva Don
Abbondio: "Il
coraggio, uno non se
lo pu dare"
Indica una citazione
breve allinterno del
testo. Nessun
rendering del testo
particolare
<samp>esempio</
samp>
Esempio:
<samp>ecco un esempio
di &quot;samp&quot;</
samp>
ecco un esempio di
"samp"
Indica un esempio. Il
testo viene
visualizzato a
spaziatura fissa.
<strong>rafforzamento</
strong>
Esempio:
Ecco un <strong>testo
rafforzato</strong>
Ecco un testo
rafforzato
Inseriamo i dati nella
variabile temporanea
temp
<var>variabile</var>
Esempio:
Inseriamo i dati nella
variabile temporanea
<var>temp</var>
Inseriamo i dati nella
variabile temporanea
temp
La variabile viene
visualizzata in corsivo.
Approfondimenti
Come si pu vedere molti tag (logici e fisici) tradiscono lorigine scientifica e
informatica del Web (sono presenti tag per blocchi di codice di
programmazione, per definizioni, per lindicazione delle variabili).
Sorprendentemente nessuno dei tag fisici o logici stato dichiarato "deprecato"
dal W3C, ma anzi tutti questi tag sono passati dallHTML 3.2 originario fino
allXHTML (passando illesi attraverso lHTML 4).
Per quel che riguarda i tag fisici: a rigor di logica lo stile "grassetto" dovrebbe
essere ottenuto con i fogli di stile (cos come tutte le formattazioni), ma
evidentemente la possibilit di ottenere un testo in grassetto semplicemente
scrivendo "<b>testo</b>" troppo comoda per poter essere considerata
obsoleta.
Per quel che riguarda i tag logici: in realt questo tipo di tag offrono un ulteriore
aiuto al webmaster anche in un approccio a fogli di stile. Se infatti si ha
laccortezza di ridefinire i tag allinterno della definizione degli stili, si hanno
molte occasioni di utilizzare una formattazione mirate a seconda della funzione
del contenuto: in questottica, il fatto che alcuni tag logici non restituiscano
nessun rendering particolare addirittura un invito a ri-definire lo stile del tag.
http://www.html.it/guida/html_18.htm (5 di 6)01/12/2004 21.27.02
I
Scegliere il font del testo | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Scegliere il font del testo
La presente lezione tratta la scelta del colore, delle dimensioni e del tipo di
carattere del testo attraverso lutilizzo del tag "font". Si tratta di un argomento
obsoleto, perch la formattazione del testo in tutti i siti moderni viene attribuita
attraverso i fogli di stile. Lutilizzo del tag <font> inoltre disapprovato dal
W3C, e dunque sta cadendo in disuso. In ogni caso si tratta di un argomento
che un buon webmaster non pu ignorare: come gi detto per studiare i fogli di
stile ci sar tempo, e comunque un passo che viene dopo la conoscenza
dellHTML.
Il tipo di carattere (cio il "font") che il browser visualizza di default il "Times".
Purtroppo questo carattere (ottimo per la carta stampata) non adatto a
essere visualizzato sul monitor di un computer: una questione di "grazie" (le
grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire
per rendere pi leggibile il carattere).
Dal momento che i caratteri con grazie non ottengono il risultato voluto sul
monitor (quello cio di rendere le lettere maggiormente riconoscibili e di
conseguenza il testo pi leggibile), ma anzi ottengono leffetto contrario, si
preferisce di solito utilizzare dei caratteri senza grazie come il "Verdana",
l"Arial" o l"Helvetica" (si veda l'articolo I font e la tipografia del testo).
Per scegliere il tipo di carattere con cui un font deve essere visualizzato
sufficiente usare la sintassi:
<font face="Arial">testo in Arial</
font>
testo in Arial
<font face="Verdana">testo in
Verdana</font>
testo in Verdana
<font face="Geneva">testo in
Geneva</font>
testo in Geneva
Tuttavia bene sottolineare da subito che non possibile far s che lutente
visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale
dellarte lutente che naviga in internet pu visualizzare solo i caratteri che
sono installati nel suo sistema: in Windows si tratta dei caratteri presenti in:
Pannello di controllo > Tipi di caratteri.
Se ad esempio scarichiamo da http://font.html.it il carattere Hackers, lo
scompattiamo e lo inseriamo nella cartella dei caratteri, saremo poi in grado di
visualizzare sul nostro computer il testo in Hackers.
Ma quando metteremo il nostro sito nel web gli utenti visualizzeranno un
semplicissimo Times. Come nellesempio sotto indicato:
http://www.html.it/guida/html_19.htm (1 di 3)01/12/2004 21.27.18
cerca
Scegliere il font del testo | Guida HTML | HTML.it
<font face="hackers">testo in
hackers</font>
testo in hackers
Per questo motivo bene tener conto di due accorgimenti:
G scegliere caratteri "sicuri" , che siano cio senzaltro presenti sul pc
dellutente
G non indicare un solo carattere, ma una serie di caratteri che
gradualmente si allontanano dal risultato che vorremmo ottenere, ma
non di molto, fino ad indicare la famiglia a cui il nostra carattere
appartiene. In questo modo il browser dellutente cercher di trovare
nella propria cartella dei fonts il primo carattere indicato, se non lo trova
passer al secondo, e solo come ultima spiaggia sceglier si utilizzare
il carattere predefinito (il famigerato "Times")
Vediamo alcuni esempi di famiglie "sicure" di caratteri:
<font face="Verdana, Arial,
Helvetica, sans-serif">Verdana e
caratteri simili</font><br>
<font face="Arial, Helvetica, sans-
serif">Arial e caratteri simili</
font><br>
<font face="Times New Roman,
Times, serif">Times e caratteri
simili</font> <br>
<font face="Courier New, Courier,
mono">Curier e caratteri simili</
font><br>
<font face="Georgia, Times New
Roman, Times, serif">Georgia e
caratteri simili </font> <br>
<font face="Geneva, Arial,
Helvetica, sans-serif">Geneva e
caratteri simili</font>
Verdana e caratteri simili
Arial e caratteri simili
Times e caratteri simili
Curier e caratteri simili
Georgia e caratteri simili
Geneva e caratteri simili
vero: limpossibilit di scegliere i caratteri che preferiamo limita terribilmente
le nostre possibilit espressive, ma il bello di sviluppare per il web proprio
accettare di creare con delle regole ben definite, e a volte anche molto
vincolanti.
Per i titoli delle pagine, i menu, e quantaltro potremmo poi sempre utilizzare
delle immagini con il nostro carattere tipografico preferito (ad esempio delle
"gif").
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/guida/html_19.htm (2 di 3)01/12/2004 21.27.18
I font e la tipografia del testo | Teoria Grafica | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Teoria Grafica Ricerca:
Home Grafica Teoria Grafica I font e la tipografia del testo
Commenti (7) Stampa Invia
I font e la tipografia del testo
di Rossella Facchini (r.facchini@html.it)
mercoled 24 luglio 2002
Cosa sono
Il carattere o font la forma grafica delle lettere che compongono un alfabeto. Un
progetto grafico riuscito dipende anche da un' appropriata scelta del font. Sbagliare
carattere pu significare affaticare la lettura o rendere addirittura illeggibile un testo,
cosa che vanificherebbe ogni sforzo di comunicazione. Non bisogna quindi
sottovalutare questa scelta, e per realizzare un buon lavoro bisogna conoscere i font.
Quali tipi di font esistono?
Esistono parecchie classificazioni dei font, qui ci occuperemo delle pi utili e
conosciute. Possiamo dividere i font in 4 grandi famiglie (serif, sans-serif, calligrafici
e fantasia), anche se ultimamente la variet dei font in circolazione ha ulteriormente
suddiviso le categorie e ampliato la scelta. Sicuramente le pi importanti sono le
prime due, che a loro volta si suddividono in innumerevoli sottocategorie.
Come riconoscerli?
G Serif o graziati, sono caratterizzati da dei trattini (grazie o serif appunto) pi
o meno elaborati in chiusura delle aste. I font graziati vengono di solito usati
per dare uno stile elegante o un'effetto old style.
G Sans-serif o bastoni, sono, al contrario dei serif, privi di alcun fregio in
chiusura delle aste. Di gran lunga i pi usati sul web, simboleggiano
semplicit e informalit ma anche stabilit e modernit. Per queste due ultime
caratteristiche i sans-serif sono preferiti per i loghi delle aziende moderne.
G Script o calligrafici, simulano la scrittura a mano libera (corsiva) spesso
inclinata e con lettere che tendono ad unirsi fra loro. Sono tipici dello scritto a
mano libera e quindi da usare per effetti particolari. Di non facile leggibilit.
G Fantasia, comprendono tutti quei caratteri con particolari effetti o fregi che
non possono essere catalogati nelle categorie qui sopra. Questi tipi di font
sono assolutamente sconsigliati per testi lunghi.
Un'altra suddivisione che pu essere utile conoscere quella che riguarda la

http://pro.html.it/articoli/id_214/idcat_41/pro.html (1 di 2)01/12/2004 21.27.25
Cerca
I font e la tipografia del testo | Teoria Grafica | PRO.HTML.IT
spaziatura fra i caratteri; esistono infatti caratteri, detti monospaced, in cui tutte le
lettere hanno la stessa larghezza (ovvero sia lettere strette come la i che lettere
larghe come la o occupano lo stesso spazio), mentre in tutti gli altri la larghezza
dipende dalla forma della lettera stessa.
Piccole regole derivanti dall'esperienza e dal buon senso:
Le 4 categorie di font non andrebbero mai mescolate fra di loro, soprattutto se non
avete l'esperienza per creare effetti particolari. Quindi se scegliete un font graziato
non affiancategli un bastoni. In generale non utilizzate mai pi di 2 (massimo 3) font
differenti per uno stesso layout. Creerebbero solo disordine e un'idea di indecisione
e instabilit.
[ 1 2 3 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_214/idcat_41/pro.html (2 di 2)01/12/2004 21.27.25
vota
I font e la tipografia del testo | Teoria Grafica | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Teoria Grafica Ricerca:
Home Grafica Teoria Grafica I font e la tipografia del testo
Commenti (7) Stampa Invia
Leggibilit
Eccoci al momento clou: illustrer brevemente alcuni punti che potranno aiutarvi a
capire come rendere leggibili al meglio i vostri testi.
G Prima di tutto, risulta da alcuni studi che la parte superiore del font ad
aiutarci maggiormente a distinguere un carattere dall'altro, potete verificarlo
semplicemente anche voi provando a leggere il testo dell'esempio qui sotto:
importante quindi (soprattutto nello studio di loghi e di testate per siti web)
che la parte superiore del testo non sia coperta da effetti grafici e fregi.
G provato che leggiamo riconoscendo le parole nella loro interezza, non
riassemblando le singole lettere. Per questo motivo meglio evitate i titoli
totalmente maiuscoli che risultano pi monotoni e difficili da leggere, creando
un rettangolo visivo sempre uguale.
G I font serif, bench molto odiati da alcuni navigatori sul web, sono molto pi
leggibili dei sans-serif. Il merito da attribuirsi alle grazie che, enfatizzando il
movimento orizzontale del testo, aiutano l'occhio a seguire meglio la riga.
G Qualunque font usiate, una cosa vale sempre: l'italic (ovvero la versione del
font inclinata verso destra o corsivo) davvero poco leggibile e faticoso. Non
abusatene mai, ma soprattutto non usatela per enfatizzare un lungo testo, in
quanto otterreste l'effetto opposto.
G Per la migliore leggibilit le righe di un testo non devono essere n troppo
lunghe n troppo corte. Nel primo caso infatti l'occhio far un grosso sforzo a
seguire la riga fino in fondo senza 'perdersi', nel secondo invece far uno
sforzo eccessivo nel continuo 'andare a capo'. La lunghezza ottimale si aggira
intorno ai 60/70 caratteri per riga, ma da 40 fino a 80 caratteri sono
accettabili.
G Anche l'interlinea (ovvero la distanza che intercorre fra una riga e la
successiva) gioca il suo ruolo quando si parla di leggibilit. Come sempre la
cosa migliore non esagerare n in un verso n in quello opposto. Una
interlinea troppo larga crea, infatti, difficolt nel cercare la riga successiva

http://pro.html.it/articoli/id_214/idcat_41/pag_2/pag.html (1 di 2)01/12/2004 21.27.39
Cerca
I font e la tipografia del testo | Teoria Grafica | PRO.HTML.IT
quando l'occhio 'va a capo', e, al contrario, una interlinea troppo stretta pu
creare confusione fra i caratteri di due righe successive.
[ 1 2 3 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_214/idcat_41/pag_2/pag.html (2 di 2)01/12/2004 21.27.39
vota
I font e la tipografia del testo | Teoria Grafica | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Teoria Grafica Ricerca:
Home Grafica Teoria Grafica I font e la tipografia del testo
Commenti (7) Stampa Invia
Font di sistema
Parlando di web indispensabile parlare di font di sistema. I font di sistema sono
quel ristretto numero di caratteri che il sistema operativo installa di default. Perch
parlare di questi font quando in circolazione ce ne sono migliaia? Il motivo che se
noi scegliamo per un testo in HTML un font 'non di sistema' non possiamo avere la
certezza che il navigatore lo abbia installato e lo visualizzi correttamente. Possiamo,
grazie ai fogli di stile (CSS) dare alcune alternative al browser, ma ricordiamoci che
se non lo facciamo o se nessuna delle alternative un font di sistema rischiamo che
l'utente visualizzi il testo del nostro sito con il font di default, solitamente il Times
New Roman.
La seguente tabella che suddivide i font di sistema di Windows e MacOs per famiglie
pu aiutarvi nella giusta scelta di alternative ai vostri font preferiti permettendovi cos
di programmare una corretta visione dei vostri lavori per la maggioranza dei
navigatori.
Windows MacOs
Serif Garamond
Bookman Old Style
MS Serif
Book Antiqua
Times New Roman
New York
Palatino
Times
Sans-serif Verdana
MS Sans Serif
Arial
Century Gothic
Arial Narrow
Arial Rounded MT Bold
Monaco
Geneva
Helvetica
Chicago
Monospaced Courier
Courier New
Courier
[ 1 2 3 ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]

1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_214/idcat_41/pag_3/pag.html01/12/2004 21.27.45
Cerca
vota
Scegliere il colore del testo | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Scegliere il colore del testo
Adesso che abbiamo scelto il carattere con cui scrivere il nostro testo
possiamo scegliere il colore, con la sintassi:
<font color="blue">testo blu</
font>
ovvero:
<font color="#0000FF">testo
blu</font>
testo blu
ovvero
testo blu
La scelta del colore pu essere effettuata nello stesso momento in cui si
sceglie il tipo di carattere (dal momento che "face" e "color" sono entrambi
attributi del tag "font"). La sintassi :
<font face="Verdana, Arial,
Helvetica, sans-serif" color="blue">
testo blu in Verdana
</font>
testo blu in Verdana
Una volta scelto il colore possiamo sempre decidere di cambiarlo:
<font face="Verdana, Arial,
Helvetica, sans-serif" color="blue">
testo blu in Verdana</font><br>
<font face="Verdana, Arial,
Helvetica, sans-serif" color="red">
testo rosso
</font>
o meglio ancora:
<font face="Verdana, Arial,
Helvetica, sans-serif" color="blue">
testo blu in Verdana<br>
<font color="red">
testo blu in Verdana
testo rosso
o meglio ancora:
testo blu in Verdana
testo rosso
http://www.html.it/guida/html_20.htm (1 di 4)01/12/2004 21.29.09
cerca
Scegliere il colore del testo | Guida HTML | HTML.it
testo rosso
</font>
</font>
La seconda sintassi preferibile alla precedente, perch la scelta del tipo di
carattere viene effettuata una sola volta, evitando cos di scrivere del codice
inutile. Da notare che per evitare la ripetizione i due tag sono annidati luno
dentro laltro.
Le dimensioni del testo
Le dimensioni del testo si attribuisco mediante lattributo "size" del tag font.
Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>:
G valori interi da 1 a 7
G valori relativi alla dimensione di base del tag font (di default "3")
Nel caso dei valori interi, ecco la scala di grandezza:
<font size="1">testo di grandezza
1</font><br>
<font size="2">testo di grandezza
2</font><br>
<font size="3">testo di grandezza
3</font><br>
<font size="4">testo di grandezza
4</font><br>
<font size="5">testo di grandezza
5</font><br>
<font size="6">testo di grandezza
6</font><br>
<font size="7">testo di grandezza
7</font><br>
testo di grandezza 1
testo di grandezza 2
testo di grandezza 3
testo di grandezza 4
testo di grandezza 5
testo di
grandezza 6
testo di
grandezza
7
Nel caso dei valori relativi alla dimensione di base possibile "spostarsi" nella
scala di grandezza del <font> utilizzando i segni "+" e "-".
Abbiamo detto che la grandezza del font di base di default nel browser 3.
Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve
essere di 2 misure pi grande della dimensione del font di base, quindi avremo
un font di grandezza 5. Vediamo lesempio:
http://www.html.it/guida/html_20.htm (2 di 4)01/12/2004 21.29.09
Scegliere il colore del testo | Guida HTML | HTML.it
<font size="+2">
Testo di grandezza +2 rispetto al
font di base (3).<br>
Cio font di grandezza 5.
</font>
<br><br>
<font size="5">
Testo di grandezza 5.
</font>
Testo di grandezza
+2 rispetto al font di
base (3).
Cio font di
grandezza 5.
Testo di grandezza 5.
Come si pu vedere le due sintassi sono equivalenti.
La grandezza del font di base pu anche esser cambiata:
<basefont size="1">
<font size="+2">
Testo di 2 grandezze superiore al font di base, sopra definito.
</font>
<br>
<font size="3">
Testo di grandezza 3.
</font>
<br><br>
<basefont size="2">
<font size="+2">
Testo di 2 grandezze superiore al font di base, sopra ridefinito.
</font>
<br>
<font size="3">
Testo di grandezza 3.
</font>
Come si pu vedere nella pagina esemplificativa.
importante evitare di cadere nellerrore di pensare che la dimensione relativa
faccia riferimento al precedente tag font. La dimensione relativa fa sempre
riferimento alla dimensione del font di base:
Ecco un esempio corretto, ma
che non dar il risultato
desiderato, perch la
dimensione relativa fa sempre
riferimento al <basefont>:
<font size="7">
Testo di grandezza 7
<font size="-1">
testo di grandezza inferiore di 1 al
font di base (che di default 3),
NON al tag precedente
</font>
</font>
Testo di
grandezza
7 testo di grandezza inferiore
di 1 al font di base (che di
default 3), NON al tag
precedente
Anche se non corretto farlo, Internet Explorer consente di utilizzare il tag
<basefont> per impostare in una sola volta il tipo di carattere del testo e il suo
colore, come si pu vedere nellesempio.
http://www.html.it/guida/html_20.htm (3 di 4)01/12/2004 21.29.09
Scegliere il colore del testo | Guida HTML | HTML.it
Tuttavia questo tipo di trucco non funziona correttamente n con Mozilla (e
quindi neanche con Netscape 6 o superiore, dal momento che eredita il
motore di rendering di Mozilla), n con Opera.
NOTA BENE
Quando state utilizzando il tag <font> - sia che utilizziate il size i valori interi,
sia che utilizziate le i valori relativi al tag di base -, in realt la grandezza del
carattere dipende dalle impostazioni del browser dellutente (come gi
abbiamo visto per i tag "heading").
Con Internet Explorer ad esempio andando in: Visualizza > Carattere.
Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei
font.
Questo appunto per le grandezze da 1 a 7 sono grandezze anchesse relative.
Questa caratteristica da un lato positiva (permette di ingrandire testi piccoli),
dallaltra pu risultare molto fastidiosa per il webmaster.
Lunico modo per fissare il carattere (ancora una volta) quello di utilizzare i
fogli di stile, esprimendo le dimensioni in pixel.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_20.htm (4 di 4)01/12/2004 21.29.09
HTML.it
Testo di 2 grandezze superiore al font di base, sopra definito.
Testo di grandezza 3.
Testo di 2 grandezze superiore al font di base, sopra ridefinito.
Testo di grandezza 3.
http://www.html.it/guida/esempi/tag/14.html01/12/2004 21.29.42
HTML.it
Testo di 2 grandezze superiore al font di base.
Testo di grandezza 2.
Testo di 3 grandezze superiore al font di base.
Testo di grandezza 6.
http://www.html.it/guida/esempi/tag/15.html01/12/2004 21.29.51
Valori e unit di misura | Guida CSS | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Valori e unit di misura
In questa lezione vedremo quali sono i tipi di valore e le unit di misura con cui
possibile impostare le tante propriet dei CSS. Prima di tutto, per,
opportuno spiegare due fondamentali regole di base.
1. I valori di una propriet non vanno mai messi tra virgolette. Uniche
eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da pi di
una parola (esempio: "Times New Roman").
2. Quando si usano valori numerici con unit di misura, non bisogna lasciare
spazio tra numero e sigla dell'unit. E' corretto quindi scrivere 15px oppure
5em. E' invece sbagliato usare 15 px o 5 em. In questi casi la regola sar
ignorata o mal interpretata.
Unit per le dimensioni
Questo la lista delle unit di misura usate per definire dimensioni, spazi o
distanze. Nella pratica comune solo alcune di esse sono realmente usate. Le
elenchiamo comunque tutte per completezza.
G in (inches - pollici): classica misura del sistema metrico americano.
Praticamente nullo il suo valore su un supporto come un browser web
viste le variabili relative a risoluzione e ampiezza dei monitor.
G cm (centimetri): stesso discorso visto per i pollici, la difficolt maggiore
sta nella resa su monitor, che altra cosa rispetto alla carta stampata.
G mm (millimetri): vedi centimetri.
G pt (points - punti): unit di misura tipografica destinata essenzialmente
a definire la dimensione dei font.
G pc (picas): unit poco usata. 1 pica equivale a 12 punti.
G em (em-height): unit di misura spesso usata dagli autori CSS. 1 em
equivale all'altezza media di un carattere per un dato font. E' un unit di
misura relativa.
G ex (ex-height): poco usata. 1 ex equivale all'altezza del carattere x
minuscolo del font scelto.
G px (pixels): unit di misura ideale su monitor. E' quella pi usata e
facile da comprendere.
Percentuale
Un valore espresso in percentuale da considerare sempre relativo rispetto
ad un altro valore, in genere quello espresso per l'elemento parente. Si
esprime con un valore numerico seguito (senza spazi) dal segno di
percentuale: 60% pertanto corretto, 60 % no.
Colori
Sui diversi modi per esprimere il valore di un colore si veda la lezione su
colore e CSS.
http://www.html.it/css/guida_css_13.htm (1 di 2)01/12/2004 21.30.02
cerca
Valori e unit di misura | Guida CSS | HTML.it
Stringhe
Alcune propriet dei CSS possono avere come valore una stringa di testo da
inserire come contenuto aggiunto nel documento. I valori espressi da stringhe
vanno sempre racchiusi tra virgolette. Le propriet in questione sono tre:
content, quotes, text-align (ma solo per le tabelle definite con i CSS).
Valori URI
Si tratta di URL che puntano a documenti esterni (in genere immagini, come
negli sfondi). Possono essere URL assoluti o relativi. In questo caso il path fa
sempre riferimento alla posizione del foglio di stile e non del documento
HTML. La definizione dell'indirizzo sempre introdotta dalla parola chiave url
e va inserita tra parentesi tonde senza virgolette. Esempio: url(immagini/
sfondo.gif).
Unit per gli angoli
Due propriet comprese nella sezione dei CSS dedicata ai dispositivi audio
possono essere espresse con unit di misura relative agli angoli. Le due
propriet sono azimuth e elevation. Le unit di misura queste:
G deg (degree - grado): descrive l'ampiezza di un angolo (es. 90deg).
G grad (gradians): descrive l'ampiezza di un angolo su una scala 1-400
(es. 100grad = 90deg)
G rad (radians): decrive l'ampiezza di un angolo su una scala 1-pi greco
Unit di tempo
Anche le unit di tempo trovano spazio solo negli stili audio. Sono usate in
genere per impostare la pausa tra le parole lette da un sintetizzatore vocale. Si
applicano solo a queste tre propriet: pause, pause-after, pause-before. Le
unit di misura sono:
G s (secondi)
G ms (millisecondi)
Unit di frequenza
Usate solo negli stili audio, definiscono la frequenza del segnale:
G hz (Hertz)
G khz (Kilohertz)
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/css/guida_css_13.htm (2 di 2)01/12/2004 21.30.02
Gli elenchi nell'HTML | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Gli elenchi nell'HTML
Se abbiamo la necessit di inserire un elenco di termini, possiamo utilizzare le "liste", che
sono sostanzialmente di tre tipi:
G Elenchi ordinati
G Elenchi non ordinati
G Elenchi di definizioni
Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari
elementi della lista (ciascuno con il proprio tag), si chiude il tag dellelenco. La sintassi ha
quindi questa forma:
<elenco>
<elemento>nome del primo elemento
<elemento>nome del secondo elemento
</elenco>
come si pu vedere, il tag che individua lelemento della lista non ha bisogno di chiusura
(la sua chiusura, in questo caso, opzionale).
Le liste di definizioni hanno una struttura leggermente diversa che vedremo a breve.
Gli elenchi ordinati
Gli elenchi ordinati sono contraddistinti dallenumerazione degli elementi che
compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da
lettere o numeri (se utilizzate un programma di videoscrittura, siete abituati a chiamarli
elenchi numerati).
Il tag da utilizzare per aprire un elenco ordinato <ol> ("ordered list") e gli elementi sono
individuati dal tag <li> ("list item"):
<div>Testo che precede la
lista
<ol>
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ol>testo che segue la lista
</div>

Testo che precede la lista
1. primo elemento
2. secondo elemento
3. terzo elemento
testo che segue la lista
Da notare che il tag che individua lelenco lascia una riga di spazio prima e dopo il testo
che eventualmente lo circonda (come avviene per il <p>); fa eccezione per linclusione
di un nuovo elenco allinterno di un elenco preesistente: in questo caso non viene lasciato
spazio, n prima, n dopo.
Gli elementi dellelenco sono sempre rientrati di uno spazio verso destra: tutto questo
serve a individuare in modo inequivocabile lelenco.
Lo stile di enumerazione visualizzata di default dal browser quello numerica, ma
possibile indicare uno stile differente specificandolo per mezzo dellattributo type. Ad
http://www.html.it/guida/html_21.htm (1 di 4)01/12/2004 21.30.14
cerca
Gli elenchi nell'HTML | Guida HTML | HTML.it
esempio:
<ol type="a">
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ol>
Gli stili consentiti sono:
Valore
dell'attributo
type
Stile di enumerazione
type="1"
( cos di
default)
numeri
arabi
<ol type="1">
<li>primo
<li>secondo
<li>terzo
</ol>
1. primo
2. secondo
3. terzo
type="a"
alfabeto
minuscolo
<ol type="a">
<li>primo
<li>secondo
<li>terzo
</ol>
a. primo
b. secondo
c. terzo
type="A"
alfabeto
maiuscolo
<ol type="A">
<li>primo
<li>secondo elemento
<li>terzo
</ol>
A. primo
B. secondo
C. terzo
type="i"
numeri
romani
minuscoli
<ol type="i">
<li>primo
<li>secondo elemento
<li>terzo
</ol>
i. primo
ii. secondo
iii. terzo
type="I"
numeri
romani
maiuscoli
<ol type="I">
<li>primo
<li>secondo elemento
<li>terzo
</ol>
I. primo
II. secondo
III. terzo
Gli elenchi non ordinati
Gli elenchi non ordinati sono individuati dal tag <ul> ("unordered list"), e gli elementi
dellelenco sono contraddistinti anchessi dal tag <li> (in buona sostanza si tratta di quello
che i programmi di videoscrittura chiamano elenchi puntati):
<ul>
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ul>
il tipo di segno grafico utilizzato per individuare gli elementi dellelenco di default dipende
dal browser, ma di solito un "pallino pieno". possibile comunque scegliere un altro tipo
di segno:
http://www.html.it/guida/html_21.htm (2 di 4)01/12/2004 21.30.14
Gli elenchi nell'HTML | Guida HTML | HTML.it
Valore
dell'attributo
type
Stile di enumerazione
type="disc"
( cos di
default)
visualizza un
"pallino"
pieno.
la
visualizzazione
di default
<ul type="disc">
<li>primo
<li>secondo
<li>terzo
</ul>
G primo
G secondo
G terzo
type="circle"
visualizza un
cerchio
vuoto al
proprio interno
<ul type="circle">
<li>primo
<li>secondo
<li>terzo
</ul>
H primo
H secondo
H terzo
type="square"
Visualizza un
quadrato
pieno al
proprio interno
<ul type="square">
<li>primo
<li>secondo elemento
<li>terzo
</ul>
I primo
I secondo
I terzo
Da notare inoltre che il tipo di segno grafico, varia in automatico al variare
dellannidamento della lista. Ad esempio:
<ul>
<li>primo della 1a lista
<li>secondo della 1a lista
<ul>
<li>primo della 2a lista
<li>secondo della 2a lista
<ul>
<li>primo della 3a lista
</ul>

</ul>

<li>terzo della 1a lista

</ul>
G primo della 1a lista
G secondo della 1a lista
H primo della 2a lista
H secondo della 2a lista
I primo della 3a
lista
G terzo della 1a lista
Elenchi di definizioni
Gli elenchi di definizioni sono individuati dal tag <dl>. Gli elementi dellelenco (a
differenza delle liste ordinate, e delle liste non ordinate) questa volta sono formati da due
parti:
<dt>
definition term: indica il termine da definire. A differenza
dellelemento <li> in questo caso non c rientro.
<dd>
definition description: la definizione vera e propria del
termine. Lelemento rientrato.
Vediamo un esempio:
http://www.html.it/guida/html_21.htm (3 di 4)01/12/2004 21.30.14
Gli elenchi nell'HTML | Guida HTML | HTML.it
<p>Ecco i principali tag per delimitare il testo:
<dl>
<dt><p>
<dd>individua l'apertura di un nuovo paragrafo

<dt><div>
<dd>individua l'apertura di un nuovo blocco di testo

<dt><span>
<dd>individua l'apertura di un elemento inline,
cui attribuire una formattazione atraverso gli stili
</dl>
ci sono poi altri tag che...
</p>
Ecco i principali tag
per delimitare il
testo:
<p>
individua
l'apertura di
un nuovo
paragrafo
<div>
individua
l'apertura di
un nuovo
blocco di
testo
<span>
individua
l'apertura di
un elemento
inline, cui
attribuire una
formattazione
atraverso gli
stili
ci sono poi altri tag
che...
Approfondimenti
Ovviamente la scelta del tipo di elenco attraverso lattributo type deprecato dal W3C,
perch si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe
effettuata utilizzando i CSS. Con i fogli di stile c anche la possibilit di scegliere
unimmagine (ad esempio una GIF) come segno distintivo per lelenco puntato. Chi fosse
interessato ad approfondire pu consultare la relativa lezione della guida ai fogli di stile.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_21.htm (4 di 4)01/12/2004 21.30.14
I link e l'ipertestualit | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I link e l'ipertestualit
Una delle caratteristiche che ha fatto la fortuna del web lessere costituito
non da testi ma da ipertesti (unaltra delle caratteristiche che hanno fatto
grande il web senzaltro la possibilit di interagire, ma questo un altro
discorso).
I link sono il ponte che consente di passare da un testo allaltro. In quanto
tali, i link sono formati da due componenti:
G il contenuto che nasconde il
collegamento (non importa se si tratta
di testo o di immagine)
la parte visibile del link, e
proprio per questo lutente deve
essere sempre in grado di
capire quali sono i collegamenti
da cliccare allinterno della
pagina
G la risorsa verso cui il collegamento
punta
Si tratta di unaltra pagina (sullo
stesso server o su un server
diverso), oppure un
collegamento interno a un punto
della pagina stessa
Di solito per spiegare che cosa sono i link si utilizza la metafora dellancora
con la testa allinterno del documento stesso, e la coda in un altro
documento (o allinterno di un altro punto del documento stesso).
Link che puntano ad altri documenti
Ecco la sintassi per creare un link con riferimento a un sito web:
Le risorse per webmaster sono su <a href=http://www.html.it/>HTML.IT</
a>.
Che d come risultato: 'Le risorse per webmaster sono su HTML.IT'.
Come si pu intuire la testa della nostra ncora il testo HTML.IT, mentre la
coda, cio la destinazione (specificata dallattributo href) il sito web verso cui
il link punta, cio http://www.html.it.
indifferente che la destinazione dellancora sia una pagina HTML di un sito,
unimmagine, un file pdf , un file zip, o un file exe: il meccanismo del link
funziona allo stesso modo indipendentemente dal tipo di risorsa; poi il browser
si comporter in modo differente a seconda della risorsa. Ad esempio:
http://www.html.it/guida/html_22.htm (1 di 2)01/12/2004 21.30.31
cerca
I link e l'ipertestualit | Guida HTML | HTML.it
Immagine .gif, .jpg, .png Viene visualizzata nel browser
Documento .html, .pdf, .doc La pagina visualizzata nel browser.
Nel caso dei documenti .doc e .pdf
l'utente deve avere installato sul proprio
pc l'apposito plugin (nella maggior parte
dei casi sufficiente che abbia installato
rispettivamente Microsoft Word e Adobe
Acrobat Reader). Se non installato il
plugin il sistema chieder all'utente se
salvare il file.
File .zip, file .exe Viene chiesto allutente di scaricare il file
NOTA bene: per motivi di sicurezza
non possibile eseguire un file .
exe direttamente dal web; lutente
dovr sempre prima scaricarlo sul
proprio PC.
Potete anche specificare un indirizzo mail. In questo caso si aprir
direttamente il client di posta dellutente con lindirizzo e-mail pre-impostato. La
sintassi la seguente:
<a href=mailto:tuaMail@nomeTuoSito.it>Mandami une-mail</a>.
Che d come risultato: Mandami un'e-mail.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_22.htm (2 di 2)01/12/2004 21.30.31
I percorsi assoluti e relativi | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I percorsi assoluti e relativi
Percorsi assoluti
Fino a quando ci troviamo nella condizione di creare un sito web di dimensioni
ridotte (poche pagine) non avremo problemi di complessit, e possiamo anche
ipotizzare di lasciare tutti i nostri file in una medesima cartella. evidente per
che man mano che il nostro sito web cresce avremo bisogno di un maggior
ordine. Si presenter allora lesigenza di inserire le immagini del sito in una
cartelle diverse (in modo da averle tutte nella medesima locazione), e magari
sar opportuno dividere il sito in varie sezioni, in modo da avere tutti i
documenti dello stesso tipo allinterno di un contesto omogeneo.
I siti web sono dunque organizzati in strutture ordinate: non a caso si parla di
albero di un sito, per indicare la visualizzazione della struttura alla base del
sito.
Poich lorganizzazione di un sito in directory e sottodirectory una cosa
normalissima, dobbiamo imparare a muoverci tra i vari file che costituiscono il
sito stesso, in modo da essere in grado di creare collegamenti verso i
documenti pi reconditi, destreggiandoci tra le strutture pi ramificate.
Per farlo esistono due tecniche:
G indicare un percorso assoluto
G indicare un percorso relativo
Nel caso in cui il documento a cui vogliamo puntare si trovi in una particolare
directory del sito di destinazione, con i percorsi assoluti non abbiamo che da
indicare il percorso per esteso.
Se esaminiamo:
Leggi le risorse sui <a href=http://www.html.it/css/index.html>fogli di stile</a>
Possiamo vedere chiaramente che il link indica un percorso assoluto e fa
riferimento a una particolare directory. Nella fattispecie:
http://
Indica al browser di utilizzare il protocollo per
navigare nel web (lhttp)
www.html.it/ Indica di fare riferimento al sito www.html.it
css/
Indica che la risorsa indicata si trova allinterno
della cartella css
index.html
Indica che il file da collegare quello chiamato
index.html
Insomma, per creare un collegamento assoluto sufficiente fare riferimento
allurl che normalmente vedete scritto nella barra degli indirizzi. I percorsi
assoluti si usano per lo pi, quando si ha la necessit di fare riferimento a
http://www.html.it/guida/html_23.htm (1 di 4)01/12/2004 21.30.47
cerca
I percorsi assoluti e relativi | Guida HTML | HTML.it
risorse situate nei siti di terze persone.
Percorsi relativi
Spesso vi troverete tuttavia a fare riferimento a documenti situati nel vostro
stesso sito, e se state sviluppando il sito sul vostro computer di casa (cio
in locale) magari non avete ancora un indirizzo web, e non sapete di
conseguenza come impostare i percorsi. utile allora capire come funzionano
i percorsi relativi.
I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al
documento in cui ci si trova in quel momento.
Per linkare due pagine che si trovano allinterno della stessa directory
sufficiente scrivere:
<a href=paginaDaLinkare.html>collegamento alla pagina da linkare nella
stessa directory della pagina presente</a>
Poniamo ora di trovarci in una situazione di questo genere:

Dalla pagina index.html vogliamo cio far riferimento al file interna.html, che
si trova allinterno della directory interna, che a sua volta si trova allinterno
della directory prima.
La sintassi la seguente:
<a href=prima/interna/interna.html>Visita la pagina interna</a>
Vediamo adesso lesempio opposto: dalla pagina interna vogliamo far
riferimento a una pagina (index.html) che si trova pi in alto di due livelli:
La sintassi la seguente:
<a href=../../index.html>Visita la pagina interna</a>
Come si vede, con i percorsi relativi valgono le seguenti regole generali:
http://www.html.it/guida/html_23.htm (2 di 4)01/12/2004 21.30.47
I percorsi assoluti e relativi | Guida HTML | HTML.it
Per far riferimento a
un file che si trovi
allinterno della stessa
directory basta linkare
il nome del file
<a href=paginaDaLinkare.html>collegamento
alla pagina</a>
Per far riferimento a
un file contenuto in
una cartella di livello
inferiore alla posizione
corrente, basta
nominare la cartella
seguita dallo slash, e
poi il nome del file.
Secondo la formula:
cartella/nomeFile.
html
<a href=prima/interna/interna.html>Visita la
pagina interna</a>
Per tornare su di un
livello, sufficiente
utilizzare la notazione:
../nomeFile.html
<a href=../../index.html>Visita la pagina
interna</a>
Grazie a questi accorgimenti potete agevolmente navigare allinterno delle
directory del vostro sito: se ce ne fosse bisogno potrete per esempio tornare
su di un livello rispetto alla posizione del file, scegliere unaltra cartella, e poi
scegliere un altro file:
../altraCartella/nuovoFile.html
Per approfondimenti potete consultare la pagina desempio.
Approfondimenti
A volte potrete incontrare la notazione:
Leggi le risorse sui <a href=/css/index.html>fogli di stile</a>
Se il vostro sito allinterno di un server Unix (ma la sintassi funziona anche in
sistemi Windows, basta che non siano in locale), questa notazione non deve
stupirvi: il carattere / indica la directory principale del sito, altrimenti detta
root. Dunque <a href=/css/index.html> un altro modo di esprimere i
percorsi assoluti allinterno del proprio sito.
Un'altra cosa importante da sapere che quando metterete il vostro sito
all'interno dello spazio web, l'indicazione della index all'interno di una directory
facoltativa. Al posto di questo:
http://www.html.it/css/index.html
sufficiente indicare la directory:
http://www.html.it/css/
Verificate solo con il vostro gestore dello spazio web (cio "hosting"), se le
pagine index della directory devono avere forma index.html, index.htm,
index.asp, index.php, home.asp, o altro.
Consigli per i nomi dei file
Quando mettere nel web il vostro sito internet, vi accorgerete che esistono due
famiglie di sistemi operativi: Windows e Unix. Questi due sistemi operativi
utilizzano differenti modi per gestire i file, dunque alcuni accorgimenti sono
necessari:
http://www.html.it/guida/html_23.htm (3 di 4)01/12/2004 21.30.47
I percorsi assoluti e relativi | Guida HTML | HTML.it
G consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti
non sempre vengono interpretati correttamente), meglio ovviare a
questa necessit con un trattino basso (cio _). Ad esempio:
mio_file.html
G maiuscole e minuscole possono fare la differenza (in ambiente Unix
spesso la fanno), quindi controllate il modo in cui avete scritto i file
Inoltre quando create un collegamento state attenti a non avere una notazione
simile a questa:
<a href="file:///C|percorso\nomeFile.html">testo</A>
significa che state facendo un riferimento (assoluto) al vostro stesso computer:
chiaro che quando metterete i file nel vostro spazio web, le cose non
funzioneranno pi.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_23.htm (4 di 4)01/12/2004 21.30.47
HTML.it
Sono nella pagina principale
G pagina principale
G 1a pagina
H pagina interna
G 2a pagina
G 3a pagina
http://www.html.it/guida/esempi/link/index.html01/12/2004 21.30.53
I link interni o ancore | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I link interni o ancore
possibile anche creare un indice interno al documento, utilizzando le ncore.
Ciascuna ncora pu avere infatti un nome:
<a name=primo>Stiamo per esaminare la struttura. Eccetera</a>
Da notare che in mancanza dellattributo che indica il collegamento (href) le
ncore non vengono viste come link, ma la loro formattazione indistinguibile
dal normale testo.
In un ipotetico indice allora possibile far riferimento allncora presente
allinterno del documento attraverso un link che punti ad essa:
<a href=#primo>vai al primo paragrafo</a>
il cancelletto indica che il collegamento deve cercare un ncora chiamata
primo allinterno della pagina stessa.
Se non si specifica il nome dellncora a cui si vuol puntare, viene comunque
creato un link che punta ad inizio pagina (viene cercata unncora il cui nome
non specificato). Questo infatti un ottimo escamotage per creare link
vuoti (in alcuni casi vi occorreranno). Ad esempio:
<a href=#>link vuoto</a>
Per creare un indice interno alla pagina si procede dunque in due fasi distinte:
G creazione dellancora a cui puntare (<a name=mioNome>)
G creazione del collegamento allancora appena creata e riferimento
attraverso il cancelletto (<a href=#mioNome>)
bene non confondere le due fasi.
Un esempio di quanto appena esposto lo potete trovare nella pagina
dellesempio.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_24.htm01/12/2004 21.31.10
cerca
HTML.it
Esempio di uso delle ncore per un indice
interno
G Primo paragrafo
G Secondo paragrafo
G Terzo paragrafo
G Quarto Paragrafo
G Falso link (la pagina punta a se stessa)
Primo paragrafo
Torna all'indice
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim nulla sit amet felis. Sed
consequat felis sed est. Quisque porta mi at nibh. In sodales felis ut neque. Aenean et metus in turpis
malesuada faucibus. Ut ligula enim, egestas et, volutpat id, gravida sed, risus. Mauris vulputate
pellentesque magna. Mauris est sem, dignissim vel, viverra quis, sollicitudin vel, tellus. Donec in
urna vitae mauris molestie tincidunt. Duis ullamcorper. Cras mauris elit, faucibus ut, volutpat et,
sollicitudin a, nunc. Ut lacus. Praesent nisl purus, sodales sed, ultrices id, elementum sit amet, ante.
Duis a arcu. Aenean eros nisl, imperdiet vulputate, blandit vel, euismod non, neque. Mauris ultricies.
Nulla fringilla, lorem ut mollis consequat, urna orci accumsan erat, sit amet rutrum nunc odio sit amet
massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim nulla sit amet felis. Sed
consequat felis sed est. Quisque porta mi at nibh. In sodales felis ut neque. Aenean et metus in turpis
malesuada faucibus. Ut ligula enim, egestas et, volutpat id, gravida sed, risus. Mauris vulputate
pellentesque magna. Mauris est sem, dignissim vel, viverra quis, sollicitudin vel, tellus. Donec in
urna vitae mauris molestie tincidunt. Duis ullamcorper. Cras mauris elit, faucibus ut, volutpat et,
sollicitudin a, nunc. Ut lacus. Praesent nisl purus, sodales sed, ultrices id, elementum sit amet, ante.
Duis a arcu. Aenean eros nisl, imperdiet vulputate, blandit vel, euismod non, neque. Mauris ultricies.
Nulla fringilla, lorem ut mollis consequat, urna orci accumsan erat, sit amet rutrum nunc odio sit amet
massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim nulla sit amet felis. Sed
consequat felis sed est. Quisque porta mi at nibh. In sodales felis ut neque. Aenean et metus in turpis
malesuada faucibus. Ut ligula enim, egestas et, volutpat id, gravida sed, risus. Mauris vulputate
pellentesque magna. Mauris est sem, dignissim vel, viverra quis, sollicitudin vel, tellus. Donec in
urna vitae mauris molestie tincidunt. Duis ullamcorper. Cras mauris elit, faucibus ut, volutpat et,
sollicitudin a, nunc. Ut lacus. Praesent nisl purus, sodales sed, ultrices id, elementum sit amet, ante.
Duis a arcu. Aenean eros nisl, imperdiet vulputate, blandit vel, euismod non, neque. Mauris ultricies.
Nulla fringilla, lorem ut mollis consequat, urna orci accumsan erat, sit amet rutrum nunc odio sit amet
massa.
http://www.html.it/guida/esempi/link/ancore.html (1 di 4)01/12/2004 21.31.13
HTML.it
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim nulla sit amet felis. Sed
consequat felis sed est. Quisque porta mi at nibh. In sodales felis ut neque. Aenean et metus in turpis
malesuada faucibus. Ut ligula enim, egestas et, volutpat id, gravida sed, risus. Mauris vulputate
pellentesque magna. Mauris est sem, dignissim vel, viverra quis, sollicitudin vel, tellus. Donec in
urna vitae mauris molestie tincidunt. Duis ullamcorper. Cras mauris elit, faucibus ut, volutpat et,
sollicitudin a, nunc. Ut lacus. Praesent nisl purus, sodales sed, ultrices id, elementum sit amet, ante.
Duis a arcu. Aenean eros nisl, imperdiet vulputate, blandit vel, euismod non, neque. Mauris ultricies.
Nulla fringilla, lorem ut mollis consequat, urna orci accumsan erat, sit amet rutrum nunc odio sit amet
massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim nulla sit amet felis. Sed
consequat felis sed est. Quisque porta mi at nibh. In sodales felis ut neque. Aenean et metus in turpis
malesuada faucibus. Ut ligula enim, egestas et, volutpat id, gravida sed, risus. Mauris vulputate
pellentesque magna. Mauris est sem, dignissim vel, viverra quis, sollicitudin vel, tellus. Donec in
urna vitae mauris molestie tincidunt. Duis ullamcorper. Cras mauris elit, faucibus ut, volutpat et,
sollicitudin a, nunc. Ut lacus. Praesent nisl purus, sodales sed, ultrices id, elementum sit amet, ante.
Duis a arcu. Aenean eros nisl, imperdiet vulputate, blandit vel, euismod non, neque. Mauris ultricies.
Nulla fringilla, lorem ut mollis consequat, urna orci accumsan erat, sit amet rutrum nunc odio sit amet
massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim nulla sit amet felis. Sed
consequat felis sed est. Quisque porta mi at nibh. In sodales felis ut neque. Aenean et metus in turpis
malesuada faucibus. Ut ligula enim, egestas et, volutpat id, gravida sed, risus. Mauris vulputate
pellentesque magna. Mauris est sem, dignissim vel, viverra quis, sollicitudin vel, tellus. Donec in
urna vitae mauris molestie tincidunt. Duis ullamcorper. Cras mauris elit, faucibus ut, volutpat et,
sollicitudin a, nunc. Ut lacus. Praesent nisl purus, sodales sed, ultrices id, elementum sit amet, ante.
Duis a arcu. Aenean eros nisl, imperdiet vulputate, blandit vel, euismod non, neque. Mauris ultricies.
Nulla fringilla, lorem ut mollis consequat, urna orci accumsan erat, sit amet rutrum nunc odio sit amet
massa.
Secondo paragrafo
Torna all'indice
Fusce elit. Cras a turpis non eros viverra rhoncus. Aliquam cursus mauris vel augue. Sed venenatis
odio a ante. In hac habitasse platea dictumst. Donec id massa. Praesent pharetra laoreet arcu. Nam
purus. In ut lacus vitae risus porttitor tempus. Proin vulputate lobortis lorem.
Fusce elit. Cras a turpis non eros viverra rhoncus. Aliquam cursus mauris vel augue. Sed venenatis
odio a ante. In hac habitasse platea dictumst. Donec id massa. Praesent pharetra laoreet arcu. Nam
purus. In ut lacus vitae risus porttitor tempus. Proin vulputate lobortis lorem.
Fusce elit. Cras a turpis non eros viverra rhoncus. Aliquam cursus mauris vel augue. Sed venenatis
odio a ante. In hac habitasse platea dictumst. Donec id massa. Praesent pharetra laoreet arcu. Nam
purus. In ut lacus vitae risus porttitor tempus. Proin vulputate lobortis lorem.
Fusce elit. Cras a turpis non eros viverra rhoncus. Aliquam cursus mauris vel augue. Sed venenatis
http://www.html.it/guida/esempi/link/ancore.html (2 di 4)01/12/2004 21.31.13
HTML.it
odio a ante. In hac habitasse platea dictumst. Donec id massa. Praesent pharetra laoreet arcu. Nam
purus. In ut lacus vitae risus porttitor tempus. Proin vulputate lobortis lorem.
Fusce elit. Cras a turpis non eros viverra rhoncus. Aliquam cursus mauris vel augue. Sed venenatis
odio a ante. In hac habitasse platea dictumst. Donec id massa. Praesent pharetra laoreet arcu. Nam
purus. In ut lacus vitae risus porttitor tempus. Proin vulputate lobortis lorem.
Terzo paragrafo
Torna all'indice
Sed suscipit, leo sed ullamcorper egestas, lorem metus egestas orci, id placerat orci ligula vel dolor.
Mauris ut lorem quis libero mattis accumsan. Nulla sodales. Aenean iaculis magna ut orci. Duis
euismod ante ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vestibulum est. Fusce tincidunt, mauris vitae malesuada feugiat, dolor libero
consequat ligula, nec laoreet est urna ut enim. Nunc venenatis. Phasellus at neque ac neque ultrices
lacinia. Aliquam rutrum lorem eget nisl. Ut vestibulum tortor quis magna. In hac habitasse platea
dictumst. Donec viverra luctus diam.
Sed suscipit, leo sed ullamcorper egestas, lorem metus egestas orci, id placerat orci ligula vel dolor.
Mauris ut lorem quis libero mattis accumsan. Nulla sodales. Aenean iaculis magna ut orci. Duis
euismod ante ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vestibulum est. Fusce tincidunt, mauris vitae malesuada feugiat, dolor libero
consequat ligula, nec laoreet est urna ut enim. Nunc venenatis. Phasellus at neque ac neque ultrices
lacinia. Aliquam rutrum lorem eget nisl. Ut vestibulum tortor quis magna. In hac habitasse platea
dictumst. Donec viverra luctus diam.
Sed suscipit, leo sed ullamcorper egestas, lorem metus egestas orci, id placerat orci ligula vel dolor.
Mauris ut lorem quis libero mattis accumsan. Nulla sodales. Aenean iaculis magna ut orci. Duis
euismod ante ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vestibulum est. Fusce tincidunt, mauris vitae malesuada feugiat, dolor libero
consequat ligula, nec laoreet est urna ut enim. Nunc venenatis. Phasellus at neque ac neque ultrices
lacinia. Aliquam rutrum lorem eget nisl. Ut vestibulum tortor quis magna. In hac habitasse platea
dictumst. Donec viverra luctus diam. Sed suscipit, leo sed ullamcorper egestas, lorem metus egestas
orci, id placerat orci ligula vel dolor. Mauris ut lorem quis libero mattis accumsan. Nulla sodales.
Aenean iaculis magna ut orci. Duis euismod ante ac sapien. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Vestibulum est. Fusce tincidunt, mauris vitae
malesuada feugiat, dolor libero consequat ligula, nec laoreet est urna ut enim. Nunc venenatis.
Phasellus at neque ac neque ultrices lacinia. Aliquam rutrum lorem eget nisl. Ut vestibulum tortor
quis magna. In hac habitasse platea dictumst. Donec viverra luctus diam.
Sed suscipit, leo sed ullamcorper egestas, lorem metus egestas orci, id placerat orci ligula vel dolor.
Mauris ut lorem quis libero mattis accumsan. Nulla sodales. Aenean iaculis magna ut orci. Duis
euismod ante ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vestibulum est. Fusce tincidunt, mauris vitae malesuada feugiat, dolor libero
consequat ligula, nec laoreet est urna ut enim. Nunc venenatis. Phasellus at neque ac neque ultrices
http://www.html.it/guida/esempi/link/ancore.html (3 di 4)01/12/2004 21.31.13
HTML.it
lacinia. Aliquam rutrum lorem eget nisl. Ut vestibulum tortor quis magna. In hac habitasse platea
dictumst. Donec viverra luctus diam.
Sed suscipit, leo sed ullamcorper egestas, lorem metus egestas orci, id placerat orci ligula vel dolor.
Mauris ut lorem quis libero mattis accumsan. Nulla sodales. Aenean iaculis magna ut orci. Duis
euismod ante ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vestibulum est. Fusce tincidunt, mauris vitae malesuada feugiat, dolor libero
consequat ligula, nec laoreet est urna ut enim. Nunc venenatis. Phasellus at neque ac neque ultrices
lacinia. Aliquam rutrum lorem eget nisl. Ut vestibulum tortor quis magna. In hac habitasse platea
dictumst. Donec viverra luctus diam.
Quarto paragrafo
Torna all'indice
Lorem Ipsum, or Lipsum for short, is simply dummy text of the printing and typesetting industry.
Lipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only four
centuries, but now the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lipsum.
Lorem Ipsum, or Lipsum for short, is simply dummy text of the printing and typesetting industry.
Lipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only four
centuries, but now the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lipsum.
Lorem Ipsum, or Lipsum for short, is simply dummy text of the printing and typesetting industry.
Lipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only four
centuries, but now the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lipsum.
http://www.html.it/guida/esempi/link/ancore.html (4 di 4)01/12/2004 21.31.13
Gli attributi dei link | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Gli attributi dei link
target
anche possibile specificare in quale finestra la pagina linkata deve essere
aperta: di default infatti la pagina viene aperta allinterno del documento
stesso, ma possibile specificare che la pagina sia aperta in una nuova
finestra:
<a target=_blank href=http://www.html.it>visita HTML.IT</a>
cio:
visita HTML.IT
vedremo questo attributo pi in dettaglio quando parleremo dei frames.
title
Lattributo title molto importante, e serve per specificare un testo esplicativo
per lelemento a cui lattributo riferito (il title si pu infatti utilizzare anche per
elementi differenti dalle ancore). Questa spiegazione addizionale favorisce
laccessibilit del sito anche ai disabili, alle persone per esempio che hanno
disturbi alla vista.
Se lasciate il cursore del mouse per qualche secondo su un collegamento
dotato di title, vedrete comparire una specie di etichetta con il testo specificato
nel title:
<a title=in HTML.it puoi trovare risorse per webmaster href=http://www.html.
it/ target=_blank >Visita HTML.it</a>
cio:
visita HTML.IT
L'attributo "title" anche utilissimo per migliorare la propria presenza nei
motori di ricerca, che ne vanno a leggere il contenuto.
hreflang
Con hreflang si indica la lingua del documento: si tratta di un attributo che
migliora laccessibilit del sito, oltre ad essere potenzialmente utile per i motori
di ricerca (lattributo pu essere utilizzato ad esempio per specificare la
presenza di una sezione del proprio sito in lingua inglese):
Nel sito del <a href=http://www.w3c.org/ hreflang=eng target=_blank
>Word Wide Web Consortium</a> puoi trovare le specifiche dellHTML in
lingua inglese
cio:
Nel sito del Word Wide Web Consortium puoi trovare le specifiche dellHTML
in lingua inglese
accesskey
http://www.html.it/guida/html_25.htm (1 di 3)01/12/2004 21.31.19
cerca
Gli attributi dei link | Guida HTML | HTML.it
Le accesskey sono delle scorciatoie "da tastiera" che potete utilizzare nel
vostro sito. Si tratta di scegliere delle lettere della tastiera che - quando
vengano digitate dall'utente - permettono di andare direttamente a determinate
pagine.
Per esempio potreste specificare che:
<a href=http://www.html.it/ accesskey=h target=_blank >Torna allhome
page di HTML.it</a>
cio:
visita HTML.IT
In questa pagina digitando ALT + h + invio con Internet Explorer, oppure
direttamente h + invio con Mozilla si accede direttamente allhome page di
HTML.it. Si tratta di un'altra tecnica per migliorare laccessibilit, ma un uso
improprio e indiscriminato di questa tecnica pu risultare davvero deleterio per
la navigazione. Diciamo che le accesskey dovrebbero essere riservate per la
navigazione dei menu che portano alle parti principali del sito.
Colorare i link
Abbiamo gi visto come colorare i link in tutta la pagina.
Possiamo per aver bisogno di colorare alcuni link della pagina in modo
diverso.
Per farlo sufficiente annidare il tag <font> allinterno del link:
<a href="http://www.html.it/ target=_blank ><font color=red size=2
face=Verdana, Arial, Helvetica, sans-serif>Torna allhome page di HTML.it</
font></a>
cio:
Torna allhome page di HTML.it
ovviamente il modo giusto per colorare i link non quello di utilizzare il tag
font, ma quello di utilizzare i fogli di stile, come spiegato nella lezione 10 della
Guida ai CSS.
Il tag BASE
I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file
HTML che stiamo scrivendo.
Se tuttavia vogliamo far riferimento a un differente percorso per tutti i percorsi
relativi, possiamo farlo specificandolo grazie al tag base, che va incluso nella
head del documento. Ad esempio con:
<base href=http://www.mioSitoWeb.com/miaCartella>
specifico che dora in poi tutti i percorsi relativi faranno riferimento al percorso
indicato.
E poi nel documento potr scrivere:
<a href=mioFile.html>collegamento al mio file</a>
sicuro che far riferimento a:
http://www.mioSitoWeb.com/miaCartella/mioFile.html
Si tratta di una caratteristica particolarmente utile quando bisogna mandare ad
esempio delle mailing list in formato HTML: possiamo infatti utilizzare i
percorsi relativi per sviluppare la pagina della mailing list in locale, e
mantenerli inalterati grazie allutilizzo di questo tag. Grazie ad esso siamo
http://www.html.it/guida/html_25.htm (2 di 3)01/12/2004 21.31.19
Gli attributi dei link | Guida HTML | HTML.it
infatti sicuri che anche lutente che ricever la mail potr visualizzare le
immagini e i link con un percorso corretto.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_25.htm (3 di 3)01/12/2004 21.31.19
Inserire le immagini | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Inserire le immagini
Finora abbiamo visto come inserire e formattare il testo allinterno delle nostre
pagine Web. Naturalmente possiamo inserire anche delle immagini: diagrammi
e grafici, fotografie, e in genere immagini create con un programma di
elaborazione grafica (come The GIMP, Photoshop o Paint Shop Pro).
I formati ammessi nel Web sono sostanzialmente tre:
G GIF (Graphic Interchange Format). Le GIF sono immagini con non pi
di 256 colori (dunque con colori piatti e senza sfumature), come grafici
o icone
G JPG: lacronimo del gruppo di ricerca che ha ideato questo formato (il
Joint Photographic Experts Group), idoneo per le immagini di qualit
fotografica
G PNG (Portable Network Graphic). Il PNG un tipo di immagine
introdotto abbastanza di recente, elaborato dal W3C per risolvere i
problemi di copyright del formato GIF (che appunto proprietario);
tuttavia oggi il PNG letto oramai da tutti i browser e offre alcune
caratteristiche che gli altri formati non hanno (come il supporto al canale
alfa, caratteristica questa non ancora perfettamente supportata da ogni
browser).
Non provate dunque a inserire un file .psd ( il formato nativo di Photoshop)
allinterno della vostra pagina HTML: con grande probabilit il browser non vi
caricher il file che vorreste includere (dovete infatti prima convertire il file in
uno dei formati sopra-indicati).
Inoltre importante ricordare che il codice HTML fornisce delle indicazioni al
browser su come visualizzare il testo e le immagini - ed eventualmente i video
e i suoni - allinterno della pagina: il testo (come abbiamo visto) scritto
direttamente nel file HTML, le immagini invece sono caricate insieme alla
pagina. Attenzione dunque a non inserire immagini troppo pesanti (ricordatevi
di ottimizzare sempre i file); bisogna evitare inoltre di sovraccaricare la pagina
con troppe immagini. Allo stato attuale dellarte infatti la maggior parte degli
utenti (e non soltanto quelli italiani) naviga ancora con un modem analogico da
56 Kbs: inserire troppe immagini significa dunque creare pagine lente da
caricare. Per ottenere un sito web dalla grafica accattivante, spesso
sufficiente giocare con i colori dello sfondo e delle scritte.
La sintassi per inserire unimmagine :
<img src="miaImmagine.gif">
dove:
G img significa image, cio immagine
G src significa source, cio origine
Il tag un tag vuoto, che non ha la necessit di essere chiuso.
http://www.html.it/guida/html_26.htm (1 di 3)01/12/2004 21.32.16
cerca
Inserire le immagini | Guida HTML | HTML.it
Ecco ad esempio come inserire il logo di HTML.it in una pagina dallo sfondo
blu (si presuppone che il logo si trovi nella stessa cartella del file HTML):
<img src="logo.gif">
Resta valido il discorso sui percorsi relativi ed assoluti. Avremo ad esempio:
<img src="../img/logo.gif">
<img src=" http://www.html.it/img/logo.gif ">
Dal momento che il browser normalmente non sa quali siano le dimensioni
dellimmagine, finch questa non sia caricata completamente, unottima
abitudine quella di indicare gi nel codice la larghezza (width) e laltezza
(height) dellimmagine: in questo modo si evita di vedere la pagina costruirsi
man mano che viene caricata, poich stiamo dando al browser unidea
dellingombro. Ad esempio:
<img src="logo.gif" width="224" height="69">
Lattributo alt utile per specificare il testo alternativo (alternative text),
fintanto che limmagine non viene caricata o nel caso in cui non lo sia affatto:
<img src="logo.gif"
alt="HTML.it"
width="224" height="69">


Lattributo alt di estrema utilit per rendere il sito accessibile a tutti gli utenti: i
disabili che non sono in grado di vedere nitidamente le immagini sullo schermo
potrebbero avere delle difficolt, nel caso in cui lattributo alt non sia
specificato. Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere
il contenuto delle immagini grazie a dei software appositi (gli screen reader)
che leggono lo schermo tramite un programma di sintesi vocale. Non
specificare il testo alternativo significa rendere impossibile la navigazione.
Nel caso in cui la spiegazione dellimmagine sia particolarmente lunga,
possibile espandere la descrizione sintetica - fornita tramite lattributo "alt" -
grazie ad un altro attributo: si tratta di longdesc (long description), che
permette di specificare un file con una spiegazione estesa dellimmagine. Ecco
la sintassi:
<img src="logo.gif" alt="HTML.it" longdesc=descrizione.html width="224"
height="69">
Nellesempio allegato possibile visualizzare il codice di una pagina con la
descrizione estesa dellimmagine. Nel caso in cui si utilizzi questo attributo
anche buona norma utilizzare un link esplicito alla pagina della descrizione.
longdesc dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle
immagini mappate (argomento che analizzeremo in seguito), in modo da
fornirne una spiegazione esauriente in ogni contesto.
In realt l'attributo alt non serve, come molti credono, a visualizzare un
etichetta esplicativa dellimmagine nel caso in cui il cursore del mouse si
soffermi sopra essa: questo semmai un effetto collaterale che si verifica con
Internet Explorer. Lattributo corretto per far visualizzare un testo che
http://www.html.it/guida/html_26.htm (2 di 3)01/12/2004 21.32.16
Inserire le immagini | Guida HTML | HTML.it
commenti limmagine infatti title:
<img src="logo.gif"
title="HTML.it"
alt="HTML.it"
width="224" height="69">


inoltre possibile specificare la grandezza (in pixel) del bordo attorno
allimmagine:
<img src="logo.gif"
border="3"
width="224" height="69">


Si noti che i link lasciano sempre di default un bordo di un pixel attorno
allimmagine (il colore sar quello espresso nel body dallattributo link, oppure
quello default quindi blu se non specificato altrimenti):
<a href="http://www.html.it"
target="_blank">
<img src="logo.gif"
width="224" height="69">
</a>
Dunque, nel caso dei link se non si desidera avere i bordi, sar necessario
impostarli a 0:
<a href="http://www.html.it"
target="_blank">
<img src="logo.gif"
border="0"
width="224" height="69">
</a>
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_26.htm (3 di 3)01/12/2004 21.32.16
HTML.it

descrizione dell'immagine
http://www.html.it/guida/esempi/esLongDesc.htm01/12/2004 21.32.39
HTML.it
HTML.it il primo sito italiano sul web
publishing, con centinaia di esempi e
guide esplicative
http://www.html.it/guida/esempi/descrizione.htm01/12/2004 21.32.47
Disporre le immagini in un contesto | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Disporre le immagini in un contesto
Se inserita in un testo, normalmente unimmagine va a capo. Cos:
<p>HTML.it &egrave; il primo sito italiano sul web
publishing <img src="logo.gif" width="224" height="69"
border="0"> con centinaia di esempi e guide esplicative </p>
HTML.it il primo sito italiano sul web publishing HTML.it il primo sito
italiano sul web publishing HTML.it il primo sito italiano sul web
publishing HTML.it il primo sito italiano sul web
publishing con centinaia di esempi e
guide esplicative HTML.it il primo sito italiano sul web publishing HTML.
it il primo sito italiano sul web publishing
Abbiamo tuttavia la possibilit di allineare limmagine e il testo come
preferiamo, utilizzando lattributo align. Vediamo di seguito come vengono
visualizzati align=left e align=right:
<p> <img src="logo.gif" width="224" height="69" border="1"
align="left">
HTML.it &egrave; il primo sito italiano sul web publishing,
con centinaia di esempi e guide esplicative </p>
HTML.it il primo sito italiano sul
web publishing, con centinaia di
esempi e guide esplicative HTML.
it il primo sito italiano sul web
publishing HTML.it il primo sito
italiano sul web publishing HTML.it il primo sito italiano sul web
publishing HTML.it il primo sito italiano sul web publishing HTML.it il
primo sito italiano sul web publishing HTML.it il primo sito italiano sul
web publishing
http://www.html.it/guida/html_27.htm (1 di 3)01/12/2004 21.33.00
cerca
Disporre le immagini in un contesto | Guida HTML | HTML.it
<p> <img src="logo.gif" width="224" height="69" border="1"
align="right">
HTML.it &egrave; il primo sito italiano sul web publishing,
con centinaia di esempi e guide esplicative </p>
HTML.it il primo sito italiano sul
web publishing, con centinaia di
esempi e guide esplicative HTML.
it il primo sito italiano sul web
publishing HTML.it il primo sito
italiano sul web publishing HTML.it il primo sito italiano sul web
publishing HTML.it il primo sito italiano sul web publishing HTML.it il
primo sito italiano sul web publishing HTML.it il primo sito italiano sul
web publishing HTML.it il primo sito italiano sul web publishing
Altri valori possibili sono:
Valore di align Visualizzazione
bottom
allinea la prima riga di testo sulla sinistra nella parte
bassa dell'immagine ( cos di default). Ecco l'esempio.
middle
allinea la prima riga di testo sulla sinistra al centro
dell'immagine. Ecco l'esempio.
top
allinea la prima riga di testo sulla sinistra nel lato
superiore dell'immagine. Ecco l'esempio
Da notare che, mentre align=left e align=right, sono utili per spostare
limmagine a sinistra o a destra, gli altri valori servono piuttosto per disporre le
posizioni verticali di testo e immagini.
Infine con hspace (horizontal space, cio "spazio orizzontale") e vspace
(vertical space, cio spazio veritcale) possiamo impostare lo spazio (in
pixel) che deve essere lasciata tra limmagine e cio che la circonda.
Nel caso di hspace impostiamo uno spazio orizzontale da ambo i lati, come in
questo caso:
<img src="logo.gif" width="224" height="69" hspace="20">
Nel caso di vspace lo spazio verticale, ma sempre da ambo i lati:
<img src="logo.gif" width="224" height="69" vspace="20">
cio:
http://www.html.it/guida/html_27.htm (2 di 3)01/12/2004 21.33.00
Disporre le immagini in un contesto | Guida HTML | HTML.it

Un attributo importante - di cui non vedrete nessun effetto "pratico" di
formattazione, ma che vi servir ad esempio per creare un effetto di "scambio
immagine" grazie a JavaScript - quello che permette di specificare il nome
dell'immagine:
<img src=miaImmagine.gif name="logo">
Approfondimenti
Ovviamente sarebbe meglio impostare lo spessore e il colore dei bordi, gli
spazi e la disposizione del testo attorno alle immagini attraverso i fogli di stile.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_27.htm (3 di 3)01/12/2004 21.33.00
La mia prima home page con la guida di HTML.it
Questa lezione mostra come inserire immagini all'interno di
documenti HTML, grazie all'elemento IMG e a tutti gli attributi che si possono applicare.
In particolare stiamo trattatando del posizionamento del testo rispetto alle immagini con l'attributo
ALIGN.
http://www.html.it/guida_old/07f.htm01/12/2004 21.33.07
La mia prima home page con la guida di HTML.it
Questa lezione mostra come inserire immagini all'interno di
documenti HTML, grazie all'elemento IMG e a tutti gli attributi che si possono applicare.
In particolare stiamo trattatando del posizionamento del testo rispetto alle immagini con l'attributo
ALIGN.
http://www.html.it/guida_old/07e.htm01/12/2004 21.33.13
La mia prima home page con la guida di HTML.it
Questa lezione mostra come inserire immagini all'interno di
documenti HTML, grazie all'elemento IMG e a tutti gli attributi che si possono applicare.
In particolare stiamo trattatando del posizionamento del testo rispetto alle immagini con l'attributo
ALIGN.
http://www.html.it/guida_old/07d.htm01/12/2004 21.33.21
Le mappe di immagine | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Le mappe di immagine
A volte necessario far s che solo una determinata parte di un'immagine sia
collegata a un link. il tipico caso delle Regioni dItalia: abbiamo una cartina e
abbiamo la necessit che alla sagoma di ciascuna regione corrisponda un
differente link.
In questo caso possiamo utilizzare le mappe.
Ne esistono due tipi:
G le mappe lato client
G le mappe lato server (non pi utilizzate)
Le mappe lato-client
Questo tipo di mappa contraddistinto dallattributo usemap del tag img:
<img src=miaImmagine.gif usemap=nomeMappa>
come valore dellattributo usemap bisogna specificare il nome della mappa a
cui l'immagine fa riferimento.
A questo punto non ci resta che creare la mappa:
<map name=nomeMappa>

</map>
Allinterno del tag <map> dobbiamo poi specificare le aree sensibili a cui
corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti.
Per farlo si utilizza il tag <area>, per ogni zona sensibile che vogliamoc reare.
Vediamo un esempio: abbiamo preso la cartina dellItalia e a scopo
puramente didattico abbiamo deciso di mappare la Regione Valle DAosta
con una forma rettangolare, la Sardegna con un cerchio, e la Sicilia con un
poligono (per rendervene conto passate il mouse su una di queste regioni).

http://www.html.it/guida/html_28.htm (1 di 3)01/12/2004 21.33.36
cerca
Le mappe di immagine | Guida HTML | HTML.it
<img src="italia.gif" width="220" height="235" border="1" usemap="#regioni">
<map name="regioni" id="regioni">
<area shape="rect" coords="14,24,35,37" href="http://www.regione.vda.it/"
target="_blank" alt="Valle d'Aosta">
<area shape="circle" coords="45,156,29" href="http://www.regione.
sardegna.it/" Target="_blank" alt="Sardegna">
<area shape="poly" coords="105, 199, 115, 197, 121, 200, 131, 201, 139,
198, 150, 197, 156, 195, 151, 201, 145, 209, 148, 212, 150, 219, 152, 225,
147, 227, 144, 231, 128, 221, 119, 219, 113, 212, 108, 212, 102, 210, 98, 205"
href="http://www.regione.sicilia.it/" target="_blank" alt="Sicilia">
</map>
le coordinate fanno riferimento allimmagine stessa, e il vertice in alto a
sinistra lipotetico punto con coordinate 0,0. Le coordinate dei punti che
descrivono le varie forme si riferiscono alla distanza in pixel da quel punto (si
tratter di volta in volta della x o della y).
Come si pu vedere per definire unarea necessario specificare una forma,
che pu essere di tre tipi:
Forma Descrizione
rettangolare
<area shape="rect">
necessario specificare alcune coordinate del
rettangolo per individuare i veritici.
In particolare sono da specificare (in
questordine):
G la x del lato di sinistra
G la y del lato alto
G la x del lato destro
G la y del lato in basso
circolare
<area shape="circle">
necessario specificare le coordinate del centro
(x e y) e la misura del raggio (in pixel)
poligonali
<area shape="poly">
necessario specificare tutte le coordinate del
poligono a coppie
In ciascun tag <area> inoltre possibile specificare lattributo alt per il testo
alternativo (ed eventualmente il longdesc).
Per il resto, il tag <area> si comporta esattamente come il tag <a>, con la
possibilit di specificare ad esempio il target in cui aprire i link.
In realt non difficile disegnare le mappe, perch ci sono gi software che lo
fanno al posto nostro.
Se utilizzate un editor visuale (ad esempio Dreamwever MX) potete trovare
degli strumenti integrati nellambiente di sviluppo. che vi consentono di
disegnare le mappe in tutta tranquillit.
In alternativa potete utilizzar dei programmi appositi, come CoffeCup Image
Mapper, CuteMap o MapEdit
Per quel che riguarda il luogo in cui posizionare la mappa cos creata, dipende
dalle vostre preferenze: una buona norma per situare la mappa in
prossimit dellimmagine, in modo da poterla reperire facilmente.
Approfondimenti
http://www.html.it/guida/html_28.htm (2 di 3)01/12/2004 21.33.36
Le mappe di immagine | Guida HTML | HTML.it
Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio
sull'area che stata appena cliccata. Per eliminarlo sufficiente utilizzare la
seguente sintassi:
onFocus='this.blur()'
da applicare al tag <AREA> in questo modo:
<area shape="circle" coords="45,156,29" href="http://www.regione.sardegna.
it/" target="_blank" alt="Sardegna" onFocus=?this.blur()?>
Il metodo viene descritto in una pillola di PRO.HTML.it (si tratta in realt di
sintassi JavaScript e non di semplice HTML).
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_28.htm (3 di 3)01/12/2004 21.33.36
Le mappe di immagine lato server | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Le mappe di immagine lato server
In questo caso la mappatura dellimmagine non visibile allinterno della
pagina HTML, ma presente allinterno di un programma sul server, ad
esempio un cgi.
La presenza di una mappa sullimmagine specificata dallattributo ismap del
tag <img> e lindicazione della posizione in cui si trova la mappa sul server
viene data attraverso un link. Ad esempio:
<a href="cgi-bin/images/map2">
<img src="immagine.gif" ismap>
</a>
(notare che lattributo ismap non ha alcun valore).
Il link fa riferimento alla locazione della mappa sul server, e quando lutente
cliccher sul collegamento, sulla barra degli indirizzi comparir qualcosa di
questo genere:
http://www.html.it/cgi-bin/menu.map?25,55
dal momento che il programma sul server avr tradotto la mappa in coordinate
da passare al mouse.
C da dire che le mappe lato server non vengono pi usate, perch
estremamente scomode ( poco pratico mantenere in differenti file le
indicazioni sullimmagine e quelle sulla mappa), dunque non le vedremo nel
dettaglio. Venivano utilizzate soprattutto agli albori del web, quando non tutti i
browser erano in grado di interpretare le mappe lato-client: con le mappe lato-
server si aveva la certezza, allora, che qualsiasi utente potesse leggere
correttamente limmagine (dal momento che il lavoro di mappatura veniva fatto
dal server, appunto, e non dal computer dellutente).
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_29.htm01/12/2004 21.34.13
cerca
Tabella: struttura di base | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Tabella: struttura di base
Le tabelle sono una delle parti pi importanti di tutto il codice HTML: nate sin
dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in
uno strumento indispensabile per gestire i layout grafici.
Il loro ampio utilizzo allinterno dei documenti ha fatto s che nel passaggio
dallHTML 3.2 allHTML 4 - le specifiche delle tabelle venissero estese con una
serie di notazioni destinate a far ordine allinterno di un codice che rischiava
di diventare troppo vasto.
Immaginiamo la nostra prima tabella come una griglia formata da righe e
colonne. I tag necessari per creare una tabella sono:
<table> apre la tabella
<tr> table row: indica lapertura di una riga
<td> table data: indica una cella allinterno di una riga
In questi nostri primi esempi presupponiamo che il numero delle celle
allinterno di ciascuna riga sia costante: ogni riga avr cio lo stesso numero di
celle. Ci sono dei metodi per variare il numero delle celle allinterno di una riga,
ma li vedremo in seguito.
Lattributo border permette di specificare di quanti pixel deve essere il bordo
delle tabelle. Ad esempio:
<table border=2>
Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di
quanto stiamo costruendo. Ecco un primo esempio di tabella:
<table border="1>
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
Che viene visualizzato cos:
prima cella seconda cella
terza cella quarta cella
Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi
width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>,
<td>). Il valore di questi attributi pu essere specificato con una larghezza
fissa (in pixel: in questo caso basta indicare un numero intero), oppure in
http://www.html.it/guida/html_30.htm (1 di 3)01/12/2004 21.34.27
cerca
Tabella: struttura di base | Guida HTML | HTML.it
percentuale (il numero deve essere allora seguito dal simbolo %): in questo
caso la tabella si adatta secondo lo spazio a disposizione.
<table width="300" height="200" border="1>
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
Che viene visualizzato cos:
prima cella seconda cella
terza cella quarta cella
Oppure:
<table width="75%" border="1>
<tr>
<td width="25%">prima cella</td>
<td width="75%">seconda cella</td>
</tr>
<tr>
<td width="25%">terza cella</td>
<td width="75%">quarta cella</td>
</tr>
</table>
Che viene visualizzato cos:
prima cella seconda cella
terza cella quarta cella
Di solito la larghezza e laltezza globali della tabella sono espresse nel tag
<table>, mentre la larghezza delle varie celle viene espressa nei <td> della
prima riga. Laltezza in percentuale non sempre visualizzata correttamente
da tutti i browser.
Come detto inizialmente le tabelle vanno immaginate come delle griglie, tutto
sommato abbastanza rigide: leventuale larghezza specificata nelle celle della
prima riga avr effetto dunque anche sulle celle delle righe sottostanti.
Viceversa non possibile variare arbitrariamente le dimensioni delle celle: le
misure specificate nelle righe sottostanti non avranno infatti effetto, come si
pu vedere nellesempio allegato, che non corretto.
Le dimensioni espresse non devono tuttavia essere in contraddizione ma
http://www.html.it/guida/html_30.htm (2 di 3)01/12/2004 21.34.27
Tabella: struttura di base | Guida HTML | HTML.it
mano che si procede verso linterno della tabella: in un caso simile infatti
vincerebbe il valore specificato nel tag genitore, come si pu vedere nella
pagina di esempio.
Inoltre (come si evince dagli esempi) la visualizzazione dei layout con
indicazioni non corrette a discrezione del browser, quindi si rischia di
ottenere risultati diversi da quelli voluti.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_30.htm (3 di 3)01/12/2004 21.34.27
HTML.it
<table width="75%" border="1>
<tr>
<td width="25%">prima cella</td>
<td width="75%">seconda cella</td>
</tr>
<tr>
<td width="75%">terza cella</td>
<td width="25%">quarta cella</td>
</tr>
</table>
Viene visualizzato cos:
prima cella seconda cella
terza cella quarta cella
ignorando completamente le indicazioni espresse nella seconda riga.

http://www.html.it/guida/tabelle/tabelle1.html01/12/2004 21.34.34
HTML.it
<table width="300" border="1>
<tr width="400" >
<td width="600">prima cella</td>
<td width="600">seconda cella</td>
</tr>
<tr>
<td width="600">terza cella</td>
<td width="600">quarta cella</td>
</tr>
</table>
Viene visualizzato cos:
prima cella seconda cella
terza cella quarta cella
ignorando completamente le indicazioni espresse nella seconda riga.

http://www.html.it/guida/tabelle/tabelle2.html01/12/2004 21.34.45
Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody> | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Creare gruppi di righe: <caption>, <thead>, <tfoot>,
<tbody>
Come dicevamo, la struttura delle tabelle ha letteralmente invaso le pagine
HTML, che si sono riempite di <tr> e di <td>. Per portare un po di ordine in
questo caos nelle specifiche sono state introdotti dei tag (opzionali) che
consentono di capire facilmente quali siano le diverse parti della tabella.
Per individuare facilmente i gruppi di righe sono stati introdotti i seguenti tag:
<caption> lintestazione, il titolo con un commento esplicativo sulla
tabella
<thead>
la testa, la parte iniziale della tabella, quella che
contiene ad esempio indicazioni sul contenuto delle celle
<tfoot> il piede, la conclusione della tabella, quella che consente
ad esempio di tirare le somme
<tbody> il corpo, la parte centrale con il contenuto vero e proprio
della tabella
<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di
righe (row group).
Da notare che contrariamente a quello che si potrebbe pensare il tag
<tfoot> che chiude la tabella, anteposto rispetto al <tbody>. Lidea di base
che il browser nelleseguire il rendering del codice tenga conto della parte
iniziale e della parte finale della tabella, e il corpo vero e proprio sia sviluppato
nella sua interezza tra le due estremit.
Unaltra particolarit che le celle allinterno del tag <thead> possono essere
indicate con <th> (table header), al posto del consueto <td> (table data),
in questo caso il contenuto delle celle automaticamente formattato in
grassetto e centrato.
Ecco comunque uno schema che riassume la struttura delle tabelle secondo
lHTML 4:
http://www.html.it/guida/html_31.htm (1 di 2)01/12/2004 21.34.54
cerca
Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody> | Guida HTML | HTML.it

A questa pagina possibile visualizzare un esempio.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_31.htm (2 di 2)01/12/2004 21.34.54
HTML.it
Fatturato dell'azienda XYZ
Mesi di
attivit
Fatturato da attivit 1 (in
euro)
Fatturato da attivit 2 (in
euro)

Totale 450.000 45.000
gen 10.000 1.000
feb 20.000 2.000
mar 30.000 3.000
apr 40.000 4.000
ago 50.000 5.000
sett 60.000 6.000
ott 70.000 7.000
nov 80.000 8.000
dic 90.000 9.000
A cui corrisponde il seguente codice
(ho evidenziato <caption>, <thead>, <tfood>, <tbody> in grassetto):

<table width="75%" border="1">
<caption><div align="center"><b>Fatturato dell'azienda XYZ</b></div></caption>
<thead>
<tr>
<th width="20%">Mesi di attivit&agrave;</th>
<th width="40%">Fatturato da attivit&agrave; 1 (in euro)</th>
<th width="40%">Fatturato da attivit&agrave; 2 (in euro)</th>
</tr>
</thead>
<tfoot>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
http://www.html.it/guida/tabelle/tabelle3.html (1 di 3)01/12/2004 21.35.01
HTML.it
<td ><b>Totale</b></td>
<td >450.000</td>
<td >45.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td >gen</td>
<td >10.000</td>
<td >1.000</td>
</tr>
<tr>
<td >feb</td>
<td >20.000</td>
<td >2.000</td>
</tr>
<tr>
<td >mar</td>
<td >30.000</td>
<td >3.000</td>
</tr>
<tr>
<td >apr</td>
<td >40.000</td>
<td >4.000</td>
</tr>
<tr>
<td >ago</td>
<td >50.000</td>
<td >5.000</td>
</tr>
<tr>
<td >sett</td>
<td >60.000</td>
<td >6.000</td>
</tr>
<tr>
<td height="24">ott</td>
<td >70.000</td>
<td >7.000</td>
http://www.html.it/guida/tabelle/tabelle3.html (2 di 3)01/12/2004 21.35.01
HTML.it
</tr>
<tr>
<td >nov</td>
<td >80.000</td>
<td >8.000</td>
</tr>
<tr>
<td height="24" >dic</td>
<td >90.000</td>
<td >9.000</td>
</tr>
</tbody>
</table>

http://www.html.it/guida/tabelle/tabelle3.html (3 di 3)01/12/2004 21.35.01
Raggruppare gli stili delle colonne | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Raggruppare gli stili delle colonne
Come possibile suddividere le righe di una tabella in gruppi ordinati, allo
stesso modo possibile raggruppare gli stili delle colonne. Il tag da usare il
<colgroup> e serve per fornire indicazioni su come le colonne debbano
essere visualizzate.
Purtroppo questo tag nel momento in cui scrivo non funziona ancora
correttamente con tutti i browser: il tag correttamente visualizzato da Internet
Explorer, supportato solo in parte da Opera, ma non ben interpretato da
Mozilla (e dunque neanche da Netscape 7), che lo ignora tranquillamente.
Tuttavia trattandosi di una specifica del W3C in futuro il supporto a questa
sintassi dovrebbe essere maggiore.
Prima di vedere nel dettaglio questo tag anticipiamo due concetti che vedremo
in seguito quando ci occuperemo pi approfonditamente della formattazione
delle tabelle e che ora ci servono per meglio comprendere l'uso di <colgroup>.
G Lattributo align pu essere riferito sia a <tr>, sia a <td> e serve per
definire lallineamento dei contenuti a sinistra, a destra o al centro (left,
right, center)
G Lattributo bgcolor pu essere riferito tanto a <table>, <tr>, o <td> e
come abbiamo visto a proposito del <body> - consente di impostare un
colore di sfondo
Il tag <colgroup> - la cui chiusura facoltativa - va posto subito dopo il tag
<caption> e prima di <thead>, e consente di impostare un layout unico per le
colonne senza avere la necessit di specificare allineamento del testo, o il
colore di sfondo per ogni singola cella.
Con lattributo span (da non confondere con il tag <span>) possiamo
impostare il numero di colonne che fanno parte del gruppo.
Per avere un layout di questo genere:

baster allora scrivere:
<table width="75%" border="1">
<colgroup bgcolor="#00FFCC" width="20%" align="right"></colgroup>
<colgroup span="2" bgcolor="#33CCFF" width="30%" align="center">
<caption>
<div align="center"><b>Fatturato dell'azienda XYZ</b></div>
</caption>
http://www.html.it/guida/html_32.htm (1 di 2)01/12/2004 21.35.07
cerca
Raggruppare gli stili delle colonne | Guida HTML | HTML.it
<thead>
<tr>
<th>Mesi di attivit&agrave;</th>
<th>Fatturato da attivit&agrave; 1 (in euro)</th>
<th>Fatturato da attivit&agrave; 2 (in euro)</th>
</tr>
</thead>
eccetera....
</table>
come illustrato dettagliatamente in questa pagina.
<colgroup> ha lindubbio vantaggio di poter attribuire in una sola volta la
formattazione a un numero elevato di colonne. Ad esempio:
<colgroup span=40 align=right>
Se si preferisce attribuire pi esplicitamente lo stile ad una colonna si pu
usare il tag <col> (che non necessita chiusura) allinterno di <colgroup>. In
questo caso lattributo span va riferito a <col> e non a <colgroup>.
Ad esempio:
<colgroup span="5" width="20" bgcolor="red"></colgroup>
<colgroup width="60">
<col span="5" bgcolor="blue" align="left">
<col span="5" bgcolor="green" align="right">
</colgroup>
come mostrato in dettaglio nella pagina di esempio.
Approfondimenti
I tag <colgroup> e <col> in teoria supportano anche la possibilit di creare
delle celle larghe proporzionalmente. Ad esempio:
<colgroup width=1*>
<colgroup width=2*>
questa sintassi dovrebbe dividere lo spazio a disposizione in tre parti e
assegnare una parte alla prima cella e due parti alla seconda cella. In realt
questa sintassi non ancora supportata da nessun browser.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_32.htm (2 di 2)01/12/2004 21.35.07
HTML.it
Fatturato dell'azienda XYZ
Mesi di attivit
Fatturato da attivit 1 (in
euro)
Fatturato da attivit 2 (in
euro)
Totale 30.000 3.000
gen 10.000 1.000
feb 20.000 2.000
Il cui codice corrispondente :
<table width="75%" border="1">
<colgroup bgcolor="#00FFCC" width="20%" align="right"></colgroup>
<colgroup span="2" bgcolor="#33CCFF" width="40%" align="center">
<caption>
<div align="center"><b>Fatturato dell'azienda XYZ</b></div>
</caption>
<thead>
<tr>
<th>Mesi di attivit&agrave;</th>
<th>Fatturato da attivit&agrave; 1 (in euro)</th>
<th>Fatturato da attivit&agrave; 2 (in euro)</th>
</tr>
</thead>
<tfoot>
<tr>
<td><b>Totale</b></td>
<td>30.000</td>
<td>3.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>gen</td>
<td>10.000</td>
<td>1.000</td>
</tr>
<tr>
<td>feb</td>
<td>20.000</td>
<td>2.000</td>
</tr>
http://www.html.it/guida/tabelle/tabelle4.html (1 di 3)01/12/2004 21.35.12
HTML.it
</tbody>
</table>
L'esempio senza <colgroup> avrebbe rischiesto un maggior dispendio di codice,
anche se allo stato attuale ha l'indubbio vantaggio di essere supportato da un numero maggiore di
browser:
Fatturato dell'azienda XYZ
Mesi di
attivit
Fatturato da attivit 1 (in
euro)
Fatturato da attivit 2 (in
euro)
Totale 30.000 3.000
gen 10.000 1.000
feb 20.000 2.000
Il cui codice corrispondente :
<table width="75%" border="1">
<caption>
<div align="center"><b>Fatturato dell'azienda XYZ</b></div>
</caption>
<thead>
<tr>
<th width="20%" bgcolor="#00FFCC">Mesi di attivit&agrave;</th>
<th width="40%" bgcolor="#33CCFF">Fatturato da attivit&agrave; 1 (in euro)</th>
<th width="40%" bgcolor="#33CCFF">Fatturato da attivit&agrave; 2 (in euro)</th>
</tr>
</thead>
<tfoot>
<tr>
<td bgcolor="#00FFCC" align="right"><b>Totale</b></td>
<td bgcolor="#33CCFF" align="center">30.000</td>
<td bgcolor="#33CCFF" align="center">3.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td bgcolor="#00FFCC" align="right">gen</td>
<td bgcolor="#33CCFF" align="center">10.000</td>
<td bgcolor="#33CCFF" align="center">1.000</td>
http://www.html.it/guida/tabelle/tabelle4.html (2 di 3)01/12/2004 21.35.12
HTML.it
</tr>
<tr>
<td bgcolor="#00FFCC" align="right">feb</td>
<td bgcolor="#33CCFF" align="center">20.000</td>
<td bgcolor="#33CCFF" align="center">2.000</td>
</tr>
</tbody>
</table>
http://www.html.it/guida/tabelle/tabelle4.html (3 di 3)01/12/2004 21.35.12
HTML.it
Con il minimo sforzo, con il seguente codice si riesce a impostare il colore, la grandezza e l'allineamento delle celle.
Purtroppo il codice viene visualizzato (per ora) in modo corretto solo da Internet Explorer. Il codice da inserire subito
dopo l'apertura del tag <table>:
<colgroup span="5" width="20" bgcolor="red"></colgroup>
<colgroup width="60">
<col span="5" bgcolor="blue" align="left">
<col span="5" bgcolor="green" align="right">
</colgroup>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
http://www.html.it/guida/tabelle/tabelle5.html01/12/2004 21.35.25
Raggruppare celle con rowspan e colspan | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Raggruppare celle con rowspan e colspan
Finora abbiamo immaginato le tabelle come griglie rigide, in cui il numero delle
colonne era dato come costante e non modificabile. I raggruppamenti di righe
e colonne che abbiamo esaminato finora non hanno modificato minimamente
questa struttura.
In realt possibile raggruppare le delle all'interno delle colonne in modo da
avere ad esempio una riga da 2 colonne e unaltra da 3. Per ottenere questo
risultato necessario specificare che una cella deve occupare il posto di 2 (o
pi colonne). In questo caso si utilizza lattributo colspan sul <td>,
specificando come valore il numero di celle che devono essere occupate. Ad
esempio:

<td colspan="2">
Il cui codice corrispondente :
<table width="430" border="1" bordercolor="#000000">
<tr>
<td width="30%"> <br> <br> <br> </td>
<td width="30%">&nbsp;</td>
<td width="30%">&nbsp;</td>
</tr>
<tr>
<td><br> <br> <br> </td>
<td colspan="2">&nbsp;</td>
</tr>
</table>
Tramite lattributo rowspan (da riferirsi sempre a <td>) invece possibile
creare delle celle che occupino pi di una riga. Ad esempio:
<td rowspan="2">


il cui codice corrispondente :
<table width="430" border="1" bordercolor="#000000">
<tr>
<td width="30%"> <br> <br> <br> </td>
<td width="30%" rowspan="2">&nbsp;</td>
<td width="30%">&nbsp;</td>
</tr>
http://www.html.it/guida/html_33.htm (1 di 2)01/12/2004 21.35.35
cerca
Raggruppare celle con rowspan e colspan | Guida HTML | HTML.it
<tr>
<td><br> <br> <br> </td>
<td>&nbsp;</td>
</tr>
</table>
Per un esempio approfondito esaminare il codice di questa pagina.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_33.htm (2 di 2)01/12/2004 21.35.35
HTML.it
Esempio pratico di rowspan e colspan (visualzizare il codice sorgente del file).
A scopo esemplificativo viene indicato l'orario ipotetico di un'ipotetica classe.
Orario ipotetico
Luned Marted Mercoled Gioved Venerd
8-9
Italiano
Geografia Educazione artistica Educazione Musicale
10-11
Scienze Educazione fisica
Matematica
11-12 Italiano
12-13 Storia Matematica Geografia Educazione tecnica

http://www.html.it/guida/tabelle/tabelle6.html01/12/2004 21.35.42
Annidare tabelle | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Annidare tabelle
anche possibile annidare le tabelle le une dentro le altre. Come in questo
esempio:
<table width="430" border="1">
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td height="24">&nbsp;</td>
<td><table width="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
che d come risultato:




Per evitare che compaiano nel layout degli spazi indesiderati consigliabile
aprire e chiudere la tabella a ridosso del tag della cella che la contiene.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_34.htm01/12/2004 21.35.48
cerca
Attributi del tag table | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Attributi del tag table
Per quel che riguarda il tag <table>, i seguenti attributi che ci permettono di
regolare le distanze tra i margini della tabella (o della cella) e il contenuto:
border (che abbiamo gi visto) specifica la larghezza dei bordi di
una tabella (in pixel)
cellspacing specifica la distanza (in pixel) tra una cella e laltra,
oppure tra una cella e il bordo. Di default un pixel,
dunque occorrer sempre azzerarlo esplicitamente,
quando non lo si desideri
cellpadding indica la distanza tra il contenuto della cella e il bordo. Se
il valore viene indicato con un numero intero, la distanza
espressa in pixel; il cellpadding tuttavia pu anche essere
espresso in percentuale. Di default la distanza nulla
La dimensione indicata nel cellpadding e dal cellspacing - una volta
specificata ha effetto su tutti i lati della cella.
I rapporti tra gli attributi che abbiamo appena esaminato sono regolati come
segue:

Con questa sintassi ad esempio si imposta una tabella con bordo di 1 pixel,
senza spazio tra le celle e con il contenuto che distanziato dai bordi della
cella di 10 pixel:
<table width="75%" border="1" cellpadding="10" cellspacing="0">
come si pu vedere nellesempio.
per quel che riguarda lattributo border, a partire da Internet Explorer 4 e da
Netscape Navigator 6 possibile modificare laspetto dei bordi esterni della
tabella (tramite lattributo frames) e delle righe fra le celle (tramite lattributo
rules).
Vediamo quali sono i possibili valori e i relativi esempi:
http://www.html.it/guida/html_35.htm (1 di 2)01/12/2004 21.35.55
cerca
Attributi del tag table | Guida HTML | HTML.it

esempio spiegazione
<table border="1"
frame="above">
(nelle pagine di esempio qui a
fianco le righe interne tra le celle
sono state azzerate per facilitare
la comprensione, dunque ci
troveremo nella situazione in cui
rules="none")
Il bordo della tabella presente:
G void: in nessun lato. il
valore di default
G above: solo nel lato superiore
G below: solo nel lato inferiore
G hsides: solo nei lati superiore
e inferiore
G vsides: solo a sinistra e a
destra
G lhs: solo nel lato sinistro (left-
hand side)
G rhs: solo nel lato destro (right
hand side).
G box: in tutti e quattro i lati
G border: in tutti e quattro i lati
<table border="1"
rules="rows">
(nelle pagine di esempio qui a
fianco i bordi esterni della
tabella sono stati azzerati per
facilitare la comprensione,
dunque ci troveremo nella
situazione in cui frame="void")
Le righe interne alle celle sono
presenti:
G none: da nessuna parte. il
valore di default
G groups: le righe separano i
gruppi (siano essi gruppi di
righe: <thead>, <tfoot>,
<tbody> - o gruppi di colonne:
<colgroup>)
G rows: le righe separano i vari
<tr>
G cols: le righe separano le
colonne
G all: le righe separano tanto i
<tr>, quanto le colonne
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_35.htm (2 di 2)01/12/2004 21.35.55
HTML.it
contenuto contenuto contenuto
contenuto contenuto contenuto


http://www.html.it/guida/tabelle/tabelle7.html01/12/2004 21.36.01
HTML.it
intestazione 1 intestazione 2
chiusura 1 chiusura 2
corpo 1 corpo 2
corpo 3 corpo 4
corpo 5 corpo 6
http://www.html.it/guida/tabelle/tabelleRules5.html01/12/2004 21.36.21
HTML.it
cella 1 cella 2
cella 3 cella 4
cella 5 cella 6
cella 7 cella 8
cella 9 cella 10
http://www.html.it/guida/tabelle/tabelleFrame1.html01/12/2004 21.36.27
Attributi di <table>, <tr>, <td> | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Attributi di <table>, <tr>, <td>
I seguenti attributi invece hanno invece valore per tutti gli elementi della tabella
(<table>, <tr>, <td>), li presenteremo quindi in un medesimo contesto.
Dimensioni
Abbiamo gi esaminato gli attributi width e height che determinano la
larghezza e laltezza (in pixel o in percentuale) di tabelle, righe o celle.
Lo sfondo
Possiamo assegnare un colore di sfondo tramite lattributo bgcolor, oppure
unimmagine tramite background, come abbiamo gi visto a proposito del tag
<body>.
Vediamo un esempio:
bgcolor codice:
<table width="75%" border="1"
align="center" bgcolor="#00FF00">
<tr>
<td width="50%" bgcolor="#FF0000">
<font color="#FFFFFF">prova</font>
</td>
<td width="50%">&nbsp;
</td>
</tr>
</table>
visualizzazione:
prova
background codice:
<table width="75%" border="1"
align="center" bgcolor="#00FF00">
<tr>
<td width="50%"
background="tabelle/sfondo.gif">
<font color="#FFFFFF">prova</font>
</td>
<td width="50%">&nbsp;
</td>
</tr>
</table>
visualizzazione:
prova
http://www.html.it/guida/html_36.htm (1 di 4)01/12/2004 21.36.42
cerca
Attributi di <table>, <tr>, <td> | Guida HTML | HTML.it
Come gi nel <body> l'immagine di sfondo viene ripetuta, ed possibile
specificare entrambi gli attributi (bgcolor e background) allinterno dello
stesso tag:
<td width="50%" bgcolor=#0000FF background="tabelle/sfondo.gif">
Lallineamento
Lattributo align, se riferito al tag <table>, sposta la tabella rispettivamente a
sinistra (align=left cos di default), a destra (align=right), o al centro
(align=center) del documento. Es:
<table align=right>
Se riferito a <tr> o a <td> invece il contenuto delle celle ad essere allineato
a sinistra, al centro oppure a destra. Es:
<td align=right>
contenuto
</td>
Allo stesso modo valign utile per lallineamento verticale delle celle. I valori
possibili sono top (alto), middle (in mezzo il valore di default), bottom (in
basso), baseline (alla linea di base). Es:
<td height=100 valign=middle>
contenuto
</td>
Colori dei bordi
Per i bordi esistono gli attributi bordercolor, bordercolorlight,
bordercolordark. Ad esempio:
<table border="2" bordercolor="blue" bordercolorlight="#00CCFF"
bordercolordark="#000099">
Questi attributi - che consentono di creare degli effetti bellissimi - sono
visualizzati correttamente soltanto da Internet Explorer, mentre con gli altri
browser (Mozilla, Opera) verranno visualizzati in modo parziale se non
scorretto.
In realt il modo corretto per attribuire un colore al bordo quello di utilizzare i
CSS.
Ci sono tuttavia delle soluzioni - utilizzate dagli sviluppatori sin dallHTML 3
che permettono di mostrare un filetto colorato attorno alle tabelle. La tecnica di
solito quella di lasciar trasparire il colore di sfondo attraverso lo spazio fra le
celle. Vediamo un esempio:
<table width="450" bgcolor="#00CCFF" cellpadding="10" cellspacing="1">
<tr bgcolor="FFFFFF">
<td width="50%"><b>contenuto</b></td>
<td width="50%">&nbsp;</td>
</tr>
</table>
che d:
http://www.html.it/guida/html_36.htm (2 di 4)01/12/2004 21.36.42
Attributi di <table>, <tr>, <td> | Guida HTML | HTML.it
contenuto
nowrap
Grazie allattributo nowrap si pu far s che il contenuto di una cella non vada
a capo, a meno che non lo forziamo espressamente con un <br> ( un
break, cio un "interruzione"):
<table width="100" border="1">
<tr>
<td nowrap>
Se non lo vogliamo non va a capo.<br>Qui va a capo.
</td>
</tr>
</table>
cio:



Se non lo vogliamo non va a capo.
Qui va a capo.
Approfondimenti
Da notare che quando una cella non viene riempita con un qualsiasi elemento
non tutti i browser visualizzeranno i bordi allo stesso modo:
<table width="200" border="1">
<tr>
<td width="50%">
</td>
<td width="50%">contenuto
</td>
</tr>
</table>
cio:
contenuto
Dunque opportuno riempire sempre le celle con qualcosa, sia pure un
&nbsp; ( la notazione per indicare un non-breaking space, cio uno
"spazio che non va a capo"), o un <br>. Attenzione che questi caratteri
speciali prendono le dimensioni del tag <font> allinterno di cui sono contenuti.
Con Netscape 4 per ottenere la visualizzazione desiderata spesso
necessario introdurre una gif trasparente di 1 pixel x 1 pixel (detta shim)
come sfondo della cella.
Ovviamente per ottenere il layout desiderato di bordi e tabelle sarebbe pi
opportuno utilizzare i fogli di stile. Ecco alcuni link interessanti: i margini, il
padding, i bordi, lo sfondo.
L e z i o n e s u c c e s s i v a
http://www.html.it/guida/html_36.htm (3 di 4)01/12/2004 21.36.42
Impaginare un layout con le tabelle | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Impaginare un layout con le tabelle
Le tabelle, grazie alle loro molteplici e multiformi caratteristiche, si sono
rivelate uno strumento indispensabile non solo per impaginare i dati ma
soprattutto per visualizzare i layout grafici: grazie alle tabelle infatti possibile
costruire delle griglie in cui inserire i vari contenuti di un sito e per mezzo degli
sfondi, dei margini possibile riprodurre unimpostazione accattivante.
Visualizzando la pagina dell esempio possibile vedere il layout di HTML.it
impaginato grazie alle tabelle: questo primo esempio utilizza una tabella unica
suddivisa nelle classiche sezioni <thead>, <tbody> e <tfoot>.
In questo secondo esempio il medesimo risultato ottenuto sovrapponenedo
una serie di tabelle, senza cos vincolare tutto a ununica struttura.
Le possibilit di ottenere il layout che abbiamo appena esaminato comunque
sono molteplici. Grazie alle tabelle possibile anche progettare layout liquidi,
che si adattino cio alla risoluzione del monitor dellutente.
vero che limpaginazione a tabelle ha fatto il suo tempo:
G perch mischia la visualizzazione dei dati ai dati stessi, e dunque
difficile da gestire
G perch riempie le pagine con molto codice rallentando lo scaricamento
Oggi siamo in un periodo di transizione. Gli sviluppatori dai vecchi modi di
costruire i siti web (a tabelle), dovrebbero migrare verso qualcosa di nuovo:
verso unimpaginazione che utilizzi i fogli di stile e l(x)html.
Limpaginazione a tabelle rimane, tuttavia, senzaltro una pietra miliare del
web.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_37.htm01/12/2004 21.45.49
cerca
HTML.it



http://www.html.it/guida/tabelle/tabelle8.html01/12/2004 21.45.51
HTML.it



http://www.html.it/guida/tabelle/tabelle9.html01/12/2004 21.45.57
Come impostare un sito ridimensionabile | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design Come impostare un sito ridimensionabile
Commenti (12) Esempio Stampa Invia
Come impostare un sito ridimensionabile
di Wolfgang Cecchin (w.cecchin@html.it)
gioved 27 dicembre 2001
Cambia la risoluzione del monitor e il sito cambia.
Questa una piccola verit, ma anche un errore frequente di chi si trova a
sviluppare per la prima volta delle pagine web. Troppo spesso (e soprattutto
all'inizio) si ragiona basandosi su parametri "cartacei", quando tutto rimane fermo,
fisso e immutabile. Cos si cerca di ottimizzare il sito in modo che non compaiano
barre orizzontali o verticali, ma poi ci si dimentica di domandarsi come si vedr il
mio sito a una risoluzione del monitor diversa da quella in cui sto lavorando?.
Uno dei pregi del web infatti la relativa indipendenza dei contenuti dai "contenitori":
le pagine web possono essere viste infatti in moltissimi modi. Il che vuol dire anche
che posso girare nel web a partire da qualsiasi piattaforma (Windows, Linux o
Macintosh), con qualsiasi browser (Internet Explorer, Netscape Navigator, Mozilla,
Opera), e a qualsiasi risoluzione dello schermo (640x480, 800x600, 1024x768,
eccetera) Ma potrei vedere delle pagine web anche su PALM ...
Web non vuol dire "Windows, Internet Explorer 5 e 800 x 600 "!
Una delle caratteristiche del buon web master dunque quella di sapere adattare il
proprio sito a molteplici situazioni. E se il sito non sar perfetto, almeno dovr essere
decente, e comunque sempre visibile. Oggi la maggior parte degli utenti internet
imposta il proprio monitor in questo modo (dati tratti dal sito Netmechanic: http://www.
netmechanic.com/browser-photo/background.htm#sizes):
G il 50% degli utenti utilizza una risoluzione di 800x60
G il 40% naviga a 1024x768
G una minoranza (circa il 10%) utilizza ancora una risoluzione di 640 x 480
I dati sono solo indicativi e non tengono conto del target: infatti se dovessimo
sviluppare un sito di ICT, dovremmo anche tenere conto del fatto che chi opera nel
ramo informatico di solito utilizza monitor piuttosto grandi che gli consentono una
risoluzione di 1024 x 768 (con cui pi semplice lavorare...).
In ogni caso, visto che oramai gli utenti che utilizzano risoluzioni del monitor di
800x600 e quelli che invece preferiscono 1024x768 si equivalgono, opportuno
sviluppare il sito in modo che si veda in maniera corretta a entrambe le risoluzioni.
[ 1 2 3 4 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]

http://pro.html.it/articoli/id_95/idcat_31/pro.html (1 di 2)01/12/2004 21.46.11
Cerca
vota
Come impostare un sito ridimensionabile | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design Come impostare un sito ridimensionabile
Commenti (12) Esempio Stampa Invia
Come impostare un sito a prescindere dalla risoluzione
Iniziamo dunque a ottimizzare il nostro sito a 800 x 600: si tratta di evitare che nel
sito compaiano barre orizzontali e verticali (in quest'ultimo caso solo se lo si ritiene
opportuno). Impostiamo dunque il sito a una grandezza di 780x450 (con Windows
XP, che utilizza delle barre pi grosse, queste grandezze diventano: 779x430).
Dopodich abbiamo diverse possibilit. A risoluzioni superiori di 800x600:
1) il sito rimane "appoggiato" a sinistra
2) il sito rimane centrato a qualsiasi risoluzione
3) il sito si ridimensiona, occupando la totalit dello schermo
A seconda del tipo di layout potremo preferire una soluzione oppure l'altra. Ma
analizziamo le varie situazioni nel dettaglio.
1) Sito "appoggiato a sinistra".
Si tratta per lo pi di una svista o di un errore di progettazione. Tuttavia in particolari
contesti il sito potrebbe rimanere tranquillamente sulla sinistra del monitor: in questo
caso il webmaster giocher abilmente con il colore di sfondo in modo da
"mimetizzare" il tutto. Cos la parte che a 1024 o a risoluzioni superiori viene lasciata
"vuota", apparir invece come logica continuazione del layout.
2) Sito centrato
la soluzione che prediligono molti portali o testate giornalistiche (HTML.it stesso
impostato in questo modo). Per lo pi il sito viene sviluppato con una testata
(header), una colonna centrale, una o pi colonne laterali, e una chiusura (footer). In
effetti ricorda molto la disposizione tradizionale dei quotidiani. La centratura del sito
viene per lo pi ottenuta con un semplice:
<DI V ALI GN=" cent er " >
aperto subito dopo il <BODY> e chiuso prima della chiusura dello stesso </BODY>.
3) Sito ridimensionabile
Il sito occupa la totalit del monitor a qualsiasi risoluzione (partendo per da
800x600). In questo caso utilizzeremo le tabelle in percentuale in modo che ci siano
una o pi celle mobili, in grado di occupare tutto lo spazio necessario.
[ 1 2 3 4 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]

http://pro.html.it/articoli/id_95/idcat_31/pag_2/pag.html (1 di 2)01/12/2004 21.46.28
Cerca
vota
Come impostare un sito ridimensionabile | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design Come impostare un sito ridimensionabile
Commenti (12) Esempio Stampa Invia
Utilizziamo le tabelle in percentuale
Abbiamo visto che per far s che un sito si ridimensioni a tutta pagina occorre
mantenere varie celle fisse e lasciare una o pi celle libere di ridimensionarsi a
proprio piacimento: saranno queste celle "libere" a colmare lo spazio che altrimenti
risulterebbe "vuoto".
Potrebbe sembrare particolarmente laborioso l'utilizzo delle tabelle in percentuale. A
prima vista saremmo infatti portati a credere di dover utilizzare le proporzioni
matematiche per ri-calcolare la percentuale delle celle di tutto il sito.
Nulla di pi sbagliato. Esiste infatti un piccolo escamotage (che funziona
correttamente con tutti i browser), che ci permette di risparmiare un sacco di lavoro.
Incominciamo a procurarci una gif trasparente di 1 pixel x 1 pixel. Si chiama
"shim" ed un'immagine vuota che nell'ordinaria costruzione di un sito ci utile in
una molteplicit di situazioni:
G Si sa che, se non c' nulla all'interno di una cella, Netscape 4 non la vede.
allora indispensabile riempire la cella con qualsiasi cosa: un "break" (<BR>),
un "non-breaking-space" ( ), oppure la nostra immagine vuota. (La Netscape
in origine aveva creato un tag apposito - lo <SPACER> - per risolvere il
problema delle celle, ma questo tag non ha avuto molto successo).
G Un altro problema che di verifica con Netscape 4 che, quando ci sono delle
tabelle annidate, da una cella interna non possibile vedere lo sfondo che sta
sopra. Anche in questo caso la situazione si risolve mettendo un'immagine
vuota di sfondo. Cos:
<t abl e wi dt h=" 500" bor der =" 1" cel l spaci ng=" 0" cel l paddi ng=" 0"
hei ght =" 400" >
<t r >
<t d backgr ound=" i mgs/ sf ondoOmi no. gi f " al i gn=" cent er "
val i gn=" mi ddl e" >
<t abl e wi dt h=" 100%" bor der =" 0" cel l spaci ng=" 0"
cel l paddi ng=" 0" >
<t r >
<t d backgr ound=" i mgs/ shi m. gi f " > </ t d>
<t d backgr ound=" i mgs/ shi m. gi f " > </ t d>
<t d backgr ound=" i mgs/ shi m. gi f " > </ t d>
</ t r >
</ t abl e>
</ t d>
</ t r >
</ t abl e>
Se non ci fosse l'immagine trasparente, con Netscape 4 la tabella interna
avrebbe uno sfondo bianco.
La nostra immagine vuota, lo "shim", ci viene in aiuto anche nel caso delle tabelle in

http://pro.html.it/articoli/id_95/idcat_31/pag_3/pag.html (1 di 2)01/12/2004 21.46.33
Cerca
Come impostare un sito ridimensionabile | Web Design | PRO.HTML.IT
percentuale. Per quanto possa sembrare strano, infatti, non occorre utilizzare delle
percentuali realistiche, ma basta dare a una cella il valore dell'1% perch questa si
"schiacci" sul proprio contenuto, basta darle invece un valore del 100% perch
si allarghi al massimo.
evidente, a questo punto, che le dimensioni non vanno pi date alle celle (che
saranno dell'1% o del 100%), ma va attribuito al contenuto.
Si tratta dunque di prendere il nostro "shim", dargli le dimensioni che preferiamo, e
quindi schiacciargli contro la cella: la dimensione della cella viene cos tenuta dallo
shim. Stesso procedimento nel caso in cui avessimo del "contenuto vero" contro cui
schiacciare la cella (ricordarsi di usare il "NOWRAP" per le scritte).
[ 1 2 3 4 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_95/idcat_31/pag_3/pag.html (2 di 2)01/12/2004 21.46.33
vota
Come impostare un sito ridimensionabile | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design Come impostare un sito ridimensionabile
Commenti (12) Esempio Stampa Invia
La pagina non risulta appesantita dall'utilizzo di tutte queste immagini vuote:
l'immagine viene infatti caricata una sola volta.
Questo metodo lo uso gi da parecchio tempo (pi di un anno) e funziona
correttamente con ogni browser (con i debiti aggiustamenti).
Ovviamente se le celle ridimensionabili sono pi di una, il 100% deve essere diviso fra
tutte le celle che devono essere ridimensionate. Cos:
Ecco il codice corrispondente al terzo esempio:
<t abl e wi dt h=" 100%" bor der =" 2" cel l spaci ng=" 0" cel l paddi ng=" 3"
bor der col or =" #000000" >
<t r >
<t d wi dt h=" 1%" ><i mg sr c=" i mgs/ shi m. gi f " wi dt h=" 40" hei ght =" 20" ></ t d>
<t d wi dt h=" 33%" >Cont enut o 1</ t d>
<t d wi dt h=" 1%" ><i mg sr c=" i mgs/ shi m. gi f " wi dt h=" 80" hei ght =" 20" ></ t d>
<t d wi dt h=" 33%" >Cont enut o 2</ t d>
<t d wi dt h=" 1%" ><i mg sr c=" i mgs/ shi m. gi f " wi dt h=" 40" hei ght =" 20" ></ t d>
<t d wi dt h=" 33%" >Cont enut o 3</ t d>
<t d wi dt h=" 1%" ><i mg sr c=" i mgs/ shi m. gi f " wi dt h=" 40" hei ght =" 20" ></ t d>
</ t r >
</ t abl e>
Come si vede la somma totale delle celle di 103% e le proporzioni non rispettano la
realt, ma il layout viene visualizzato correttamente, perch la larghezza del 100%
espressa nel tag <TABLE>, che "comanda" le celle sottostanti. Proprio per questo
stesso motivo (che cio le percentuali non rispecchiano pi la realt), non ci sar da
stupirsi se - in talune situazioni - per avere tre celle della stessa misura e che si
ridimensionano allo stesso modo, dovremo dare - ad esempio - alla prima il 60% alla
seconda il 40% e alla terza il 30%.
Sono comunque eventualit da verificare caso per caso nella pagina.

http://pro.html.it/articoli/id_95/idcat_31/pag_4/pag.html (1 di 2)01/12/2004 21.46.40
Cerca
Come impostare un sito ridimensionabile | Web Design | PRO.HTML.IT
Ulteriori problematiche
Questa tecnica non d alcun tipo di problemi finche si utilizza l' "HTML standard" (cio
il 3.2). Se utilizziamo i livelli, dobbiamo invece prestare particolare attenzione (non solo
nei "siti che si ridimensionano", ma anche nel caso del "layout centrato"):
G Livelli in posizione relativa: non abbiamo alcun problema, dal momento che i
livelli in posizione relativa vengono "spostati" insieme con l'elemento che li
contiene.
G Livelli in posizione assoluta: la pagina si sposta o si ridimensiona, viceversa i
livelli rimangono fermi e calcolano la propria posizione dall'alto e da sinistra. Se
non vogliamo vedere i nostri livelli nel bel mezzo della pagina, dobbiamo
utilizzare del codice javascript che individui la posizione e sposti il livello dove
pi ci fa comodo. In uno dei prossimi articoli vedremo come.
[ 1 2 3 4 ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_95/idcat_31/pag_4/pag.html (2 di 2)01/12/2004 21.46.40
vota
Un sito ridimensionabile con i CSS: parte I | CSS | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
CSS Ricerca:
Home Linguaggi CSS Un sito ridimensionabile con i CSS: parte I
Commenti (3) Esempio Stampa Invia
Un sito ridimensionabile con i CSS: parte I
di Cesare Lamanna (c.lamanna@html.it)
luned 15 luglio 2002
Articoli Correlati
G Un sito ridimensionabile
con i CSS: parte II
G Un sito ridimensionabile
con i CSS: parte III
In questa serie di articoli affronteremo un argomento
complesso e affascinante: la realizzazione del layout
di un sito solo con i CSS. La sfida sempre la
stessa: arrivare alla separazione tra stile, layout e
struttura dei contenuti per ottenere pagine pi
semplici da gestire, pi veloci da caricare, pi
accessibili, aderenti agli standard del W3C.
Si tratta, allo stesso tempo, di fare i conti con un ambito di applicazione dei CSS
ancora poco sfruttato ma molto promettente. Se nella gestione della tipografia e delle
propriet dei blocchi di testo l'adozione dei fogli di stile ormai cosa stabile e
accettata, per la costruzione del layout generale di un pagina siamo ancora lontani
da una diffusione che esca dai limiti, a volte davvero pregevoli, di siti personali e/o
sperimentali. Eppure il mercato dei browser oggi propizio e ci sono davvero le
condizioni per fare il salto. In verit il cambiamento richiede un cambio di approccio
notevole e la ridefinizione di metodi di lavoro ormai consolidati: tempo al tempo
dunque.
Ancora una riflessione: l'adozione dei CCS per il layout ha visto spesso come unico
slogan di accompagnamento "Morte alle tabelle!". Che giusto, ma che mette in
secondo piano altri e pi importanti vantaggi: codice pi pulito, facilit di gestione,
migliore accessibilit, portabilit dei documenti. Ma volete mettere? Se io dico:
"Questa pagina fatta senza tabelle", trover sempre qualcuno disposto a dirmi:
"Davvero?! E come si fa?". Facciamo una prova.
Ecco il piccolo esperimento che vi propongo. Seguite questo link. la pagina
principale (incompleta, ma rende l'idea) della sezione PRO HTML.it. fatta senza
usare tabelle, solo con i CSS. Anche i rollover e gli pseudopulsanti della barra
sinistra sono fatti con i CSS (niente Javascript, niente immagini). Funziona in tutti i
browser con un supporto decente degli standard (diciamo dalla versione 5 in su).
Ora provate a visualizzare e confrontare il markup di questa pagina e dell'originale.
Le conclusioni le lascio a voi.
Il modo in cui la pagina stata convertita sar l'argomento conclusivo di questa serie
di lezioni. Prima analizzeremo con un approccio molto concreto altri tipi classici di
layout: a due e tre colonne. Vedremo inoltre come sia possibile ottenere layout
"appoggiati a sinistra", centrati o "liquidi" (quelli che occupano l'intera area della
finestra a qualunque risoluzione). Un utile confronto sar quello con un altro articolo
di questa sezione, dove vengono spiegate le tecniche per ottenere gli stessi risultati
con le tabelle.
[ 1 2 3 ]
[ P a g i n a s u c c e s s i v a ]

http://pro.html.it/articoli/id_210/idcat_8/pro.html (1 di 2)01/12/2004 21.47.10
Cerca
Un sito ridimensionabile con i CSS: parte I | CSS | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
CSS Ricerca:
Home Linguaggi CSS Un sito ridimensionabile con i CSS: parte I
Commenti (3) Esempio Stampa Invia
Prerequisiti
L'argomento, come dicevamo, complesso. Richiede pertanto una conoscenza di
elementi anche avanzati dei CSS. La lista dei prerequisiti tecnici per affrontare con
costrutto le lezioni e passare quindi alla pratica e alla sperimentazione breve.
Saranno solo cenni, in quanto argomenti gi presenti in altre sezioni del sito. In
fondo all'articolo trovate poi una serie di link a risorse sul web: vi consiglio di visitarli
perch rappresentano spesso documenti davvero impareggiabili. Ecco cosa
importante conoscere:
1. Regole di base di (X)HTML e CSS
2. Il "box model"
Ovvero: sapere come ciascuno dei blocchi che formano un pagina pu essere
impostato secondo le sue principali propriet: larghezza e altezza, margini e bordi,
padding e colori di sfondo.
L'articolo "Alleggerire le pagine di dati con i CSS" contiene un utile spiegazione (con
figure esplicative) dei concetti fondamentali.
3. La propriet float
Il floating un altro modo per definire la posizione di un elemento. Cosa succede
quando applico questa propriet? Semplificando: l'elemento viene rimosso dal
normale flusso dei dati e viene portato all'estremit sinistra (o destra) del suo box
contenitore. Il testo eventualmente presente fuori dall'elemento scorre intorno ad
esso. Gli esempi commentati chiariranno meglio il concetto.
4. Il posizionamento
Se si vuole realizzare un layout perfetto non si possono ignorare le regole di base
del posizionamento. La guida ai CSS di HTML.it fornisce al riguardo ottime
indicazioni sui concetti di base. Troverete la spiegazione sui vari tipi di
posizionamento e una serie di utilissimi esempi pratici.
Siti di riferimento
Da quando la costruzione di layout con i CSS diventata una cosa realizzabile
senza grossi traumi (con l'avvento della quinta generazione di browser) partita una
sorta di sfida alla ricerca di soluzioni ottimali. Alcuni siti si sono contraddistinti nella
promozione dell'idea e nella diffusione di supporto, template e discussioni tecniche.
Vi ricordo i pi importanti. Segnateli tra i preferiti. Se siete seriamente interesasti
all'argomento non potete non visitarli e studiarli a fondo: si pu davvero dire che la
stragrande maggioranza dei layout non tabellari ha preso lo spunto da uno di questi.
G A list apart: sulla webzine di Jeffrey Zeldman l'argomento stato presentato
con enfasi in un articolo pionieristico: From Hacks to Standards: A Web
Designers Journey. Alcun soluzioni sono superate, anche per via dell'avvento
di nuovi browser, ma spirito e tono dell'articolo sono quelli della scoperta. Da

http://pro.html.it/articoli/id_210/idcat_8/pag_2/pag.html (1 di 2)01/12/2004 21.47.19
Cerca
Un sito ridimensionabile con i CSS: parte I | CSS | PRO.HTML.IT
leggere
G Glish CSS: Glish il sito curato da Eric Costello e inizia la serie dei siti-
risorsa. La cosa pi importante, oltre a due o tre articoli tecnici, la raccolta di
layout con CSS. Codice commentato, esempi, template pronti per l'uso.
Ecellente.
G Box Lessons: il titolo parla da s. Si tratta dei tutorial sui layout non tabellari di
Owen Briggs. Anche qui potete trovare una serie nutrita di template
commentati e spiegati.
G Layout Reservoir: pochi i template presentati, ma qualit, eleganza e
funzionalit sono di prima scelta.
G CSS/Edge: il sito degli esperimenti di Eric Meyer. Di quest'ultimo appena
uscito in America un meraviglioso libro: Eric Meyer on CSS. Tredici progetti
avanzati spiegati e analizzati nei dettagli. Il codice degli esempi reperibile
sul sito di accompagnamento del libro.
Un cambiamento di approccio
Passare da un layout tabellare all'uso dei CSS richiede alcuni cambiamenti di
approccio nella concezione e nella realizzazione delle pagine. Innanzitutto, imparate
a suddividere concettualmente ogni pagina in sezioni. Esercitatevi con un tipo di
analisi simile a quella proposta in questo esempio. Insomma: non vedete nella
pagina che state progettando un insieme di celle e colonne, ma una struttura
organizzata di sezioni e blocchi di contenuto. In (X)HTML ogni sezione sar
contrassegnata da un tag <div> le cui propriet visuali vanno impostate in un CSS.
Dimenticate approcci tipo: "Apro Dreamweaver e faccio un sito". Gli editor visuali
hanno un supporto scadente dei layout CSS (con l'eccezione del nuovo
Dreamweaver MX). Significa che dovrete rinunciare alle comodit dell'editing
istantaneo e senza vedere codice. Ci pu causare qualche frustrazione iniziale, ma
se siete supportati da buone conoscenze e chiarezza di idee vedrete che la
costruzione dell'HTML sar ancora pi semplice di prima.
[ 1 2 3 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_210/idcat_8/pag_2/pag.html (2 di 2)01/12/2004 21.47.19
vota
Un sito ridimensionabile con i CSS: parte I | CSS | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
CSS Ricerca:
Home Linguaggi CSS Un sito ridimensionabile con i CSS: parte I
Commenti (3) Esempio Stampa Invia
Un layout fluido e ridimensionabile
Bene, il momento della pratica. Ho deciso di evitare lunghe introduzioni su
argomenti teorici. Affronteremo i problemi quando verranno alla luce.
Iniziamo la nostra carrellata da un semplicissimo layout fluido a due colonne con
testata superiore. Questa la struttura che realizzeremo. Il modello dei pi
tradizionali. Una sezione superiore estesa in larghezza, una barra di menu a sinistra,
una sezione di contenuto nella parte destra. Ciascuna delle tre sezioni sar un div
nel documento (X)HTML
Per costruire un layout fluido e ridimensionabile sar sufficiente impostare una
larghezza fissa per la sezione dei menu, lasciando che la parte dei contenuti e la
testata superiore si adattino automaticamente alla dimensione dello schermo. Un
problema da risolvere sar quello dell'altezza della sezione dei menu, che dovr
espandersi automaticamente in base a quella della sezione contenuti.
Ecco l'esempio realizzato (nella parte centrale trovate il codice completo). Osservate
innanzitutto che si tratta di un documento XHTML 1.0 aderente alla DTD
Transitional. Il codice semplice e pulito. Se pensate che gli stili potevano essere
piazzati in un foglio esterno capite bene che bastano poche righe. Vediamo come
abbiamo proceduto alla creazione del layout analizzando il CSS.
L'elemento BODY
body {
mar gi n: 0px;
paddi ng: 0px;
backgr ound- col or : #CCCCCC;
hei ght : 100%;
}
Iniziamo impostando le propriet dell'elemento body. Il margine e il padding vanno
settati a 0px per eliminare lo spazio bianco che ogni browser aggiunge, in misura
variabile, tra i bordi della finestra principale (il cosiddetto viewport) e l'area del
contenuto. Stabiliamo che il colore di sfondo sar un grigio chiaro e settiamo quindi
la propriet height al 100%. Vedremo poi perch necessario impostare questo
valore.
Subito dopo (vedi codice) impostiamo le propriet per i titoli principali (h1) e per i
paragrafi (p).
La testata della pagina

http://pro.html.it/articoli/id_210/idcat_8/pag_3/pag.html (1 di 4)01/12/2004 21.47.25
Cerca
Un sito ridimensionabile con i CSS: parte I | CSS | PRO.HTML.IT
#t est at a {
mar gi n: 0px;
paddi ng: 0px;
hei ght : 70px;
backgr ound- col or : #000099;
backgr ound- i mage: ur l ( sf ondo. gi f ) ;
}
Da qui inizia la definizione delle tre sezioni principali. Si creano tre selettori di tipo id
(ricordiamo che la dichiarazione inizia con il simbolo #) e se ne definiscono le
propriet.
La testata dovr occupare per intero la larghezza della finestra, pertanto non
stabiliamo nessun valore per width. Cos facendo la larghezza sar automaticamente
quella dell'elemento parente. Complicato? Solo se non si ha chiaro un concetto: ogni
documento HTML pu essere visto come un albero, con un elemento radice e con
una serie di altri elementi che possono avere tra di loro rapporti del tipo parente -
figlio. Ecco come si potrebbe visualizzare la struttura semplicissima del nostro
documento:
Per il div #testata, visto che l'elemento parente body, la larghezza sar sempre
uguale a quella di quest'ultimo elemento. In pratica, usate width solo quando volete
specificare una misura e ricordate che la larghezza massima di un elemento non pu
essere superiore a quella dell'elemento parente. Ecco cosa succede se si imposta la
larghezza di body a 600px (visualizza l'esempio). Anche la larghezza della testata si
adatter a questo valore.
Con height stabiliamo invece l'altezza, che sar di 70px. Seguono le impostazioni del
colore e dell'immagine di sfondo.
I menu
#menu {
wi dt h: 180px;
posi t i on: absol ut e;
t op: 70px;
l ef t : 0px;
backgr ound- col or : #CCCCCC;
hei ght : 100%;
}
La sezione dei menu la mettiamo a sinistra. Il div avr una larghezza fissa: con
qualunque risoluzione occuper lo spazio di 180px. Ovviamente si poteva impostare
il valore di width anche in percentuale: in questo caso avremo un layout totalmente
fluido e ridimensionabile (visualizza l'esempio, width=20%). La larghezza espressa in
percentuale sempre relativa a quella dell'elemento parente. Anche per questo div
l'elemento parente body.
La parte successiva della dichiarazione stabilisce in quale punto della pagina verr
visualizzato il div. Il posizionamento scelto di tipo assoluto: l'elemento
completamente eliminato dal flusso dei dati e verr visualizzato in una posizione
dettata dalle coordinate left e top rispetto all'elemento parente (o blocco contenitore).
http://pro.html.it/articoli/id_210/idcat_8/pag_3/pag.html (2 di 4)01/12/2004 21.47.25
Un sito ridimensionabile con i CSS: parte I | CSS | PRO.HTML.IT
La barra dei menu sar dunque posizionata a 0px dal bordo sinistro e a 70px da
quello superiore della finestra del documento. Perch impostiamo 70px facile da
capire: l'altezza della testata: scegliendo una misura inferiore il div #menu si
sarebbe sovrapposto alla testata stessa.
La regola da ricavare e imparare dunque questa: un elemento posizionato in modo
assoluto sar sempre posizionato rispetto al suo blocco contenitore. Esso costituito
da qualunque elemento che abbia un tipo di posizionamento diverso da static. Se un
elemento cos configurato non esiste allora il blocco contenitore l'elemento radice
del documento, <html> (ricordatelo, l'elemento radice <html> e non <body>!). Alla
fine, dal punto di vista visuale le cose non cambiano molto: l'elemento <html>
definisce la finestra centrale del browser, dove trovano posto i contenuti del
documento.
Torniamo a noi. Il posizionamento del div #menu avverr in base ad <html>, in
quanto esso non ha elementi parenti con posizione non statica.
L'altezza del div settata al 100%. Anche qui necessario un chiarimento. L'altezza
di un elemento in genere basata sul suo contenuto. In pratica, se non avessi
stabilito alcun valore per height avrei avuto questa situazione (visualizza l'esempio).
Ma io voglio che la mia barra si estenda per quanto si estende in altezza la pagina!
Basta scrivere height: 100%? Non proprio, perch la percentuale (ormai lo
sappiamo) fa sempre riferimento all'elemento parente. Ecco perch prima abbiamo
impostato l'altezza per <body>! In questo modo il div "menu" avr una dimensione
cui riferirsi e la sua altezza sar sempre uguale, a prescindere dal contenuto, a
quella di <body>.
Tutto risolto? Ancora no. In realt, i browser identificano come altezza di <body>
quella della parte visibile della finestra centrale del browser. Ecco che situazione
avremmo avuto (visualizza l'esempio). Per ottenere il risultato desiderato
sufficiente impostare lo stesso colore di sfondo per il menu e per <body>, come
nell'esempio iniziale). Semplice no?
I Contenuti
#cont enut o {
mar gi n: 0px 0px 0px 180px;
paddi ng: 10px;
backgr ound- col or : #FFFFFF;
}
L'ultima sezione quella per i contenuti principali della pagina. In una prospettiva di
layout liquido e con un div a larghezza fissa (#menu), sar proprio essa che dovr
adattare le proprie dimensioni a quelle della finestra. Come potete vedere non
ricorriamo ad alcun tipo di posizionamento particolare, n specifichiamo la larghezza.
Usiamo semplicemente i margini. Dove andr collocarsi il nostro div? I valori della
propriet margin sono 4. Ricordiamo che l'ordine di lettura sempre questo: TOP -
RIGHT - BOTTOM - LEFT. Se vogliamo che il div "contenuto" non si sovrapponga
alla barra dei menu dovremo impostare un margine sinistro che sia almeno uguale
alla larghezza di quest'ultimo (180px). Per il resto i valori sono di 0px: il div sar cos
adiacente, sugli altri tre lati, agli elementi vicini.
Bene, come vedete non cos difficile. In pochi passi abbiamo ottenuto un layout
senza tabelle e un documento XHTML valido. L'importante imparare le tecniche di
base. Quelle viste in questa prima lezione riguardano:
G l'uso della larghezza automatica
G il posizionamento assoluto
G l'altezza degli elementi
G l'uso dei margini come strumento di posizionamento
Riferimenti
Html.it - Guide di base: Devono sempre essere il vostro punto di riferimento. In
http://pro.html.it/articoli/id_210/idcat_8/pag_3/pag.html (3 di 4)01/12/2004 21.47.25
Un sito ridimensionabile con i CSS: parte I | CSS | PRO.HTML.IT
particolare vi segnalo la guida ai CSS e la guida a XHTML, la cui seconda parte
affronta in forma di tutorial la creazione di un semplice layout non tabellare.
Tutorial sul posizionamento 1 - Eccellente tutorial sulle regole del posizionamento
dinamico con esempi e spieagazioni esaustive.
Tutorial sul posizionamento 2 - Dal sito Web Reference un'altra grande risorsa sullo
stesso argomento. Da leggere e conservare!
Uso del floating - Ancora un ottimo tutorial da Web Reference.
Il box model spiegato dal W3C
Il box model: teoria e pratica - Se i tecnicismi del W3C vi spaventano troverete in
questo tutorial in due parti le risposte che cercate su questo fondamentale
argomento.
[ 1 2 3 ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_210/idcat_8/pag_3/pag.html (4 di 4)01/12/2004 21.47.25
vota
Comporre una pagina in frame | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Comporre una pagina in frame
I frame (riquadri) comparvero per la prima volta con Netscape Navigator 2: si
tratta della possibilit di suddividere una medesima finestra del browser in vari
riquadri indipendenti.
Questa soluzione allepoca si rivel un successo, dal momento che
permetteva notevoli vantaggi:
G Fino a qualche tempo fa la velocit di navigazione era ben poca cosa, e
si navigava con modem analogici molto lenti (anche da 14.4 kbs): i
frame hanno lindubbio vantaggio di non costringere a ricaricare tutta
quanta la pagina, accelerando cos la navigazione dellutente allinterno
di un sito web. Daltro canto il fatto che solo una parte del contenuto sia
ricaricata fa risparmiare banda anche dal punto di vista del server che
deve erogare le pagine
G Per quel che riguarda i webmaster, i frame hanno la caratteristica di
utilizzare una struttura che consente di non ripetere le parti comuni
nelle varie pagine di un sito, dal momento che il contenuto della pagina
(per sua natura) organizzato a zone
G Il fatto di poter mantenere fisso su un lato del monitor il menu di
navigazione e far scorrere sullaltro lato il contenuto piace a molti utenti,
soprattutto quando la risoluzione del monitor bassa (800 x 600 o
640x480, magari su un monitor da 15)
Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames,
tanto che subito dopo linvenzione della Netscape, anche Microsoft si trov a
copiare la possibilit di strutturare le pagine in questo modo; in seguito (con
lHTML 4) i frames divennero una specifica ufficiale del W3C.
Struttura di un frameset
Per utilizzare i frame, necessario creare una pagina che contenga la
dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1">
<title>HTML.it</title>
</head>
<frameset rows=50%,50% cols="50%, 50%">
<frame src="prima.html">
<frame src="seconda.html">
<frame src="terza.html">
<frame src="quarta.html">
<noframes>
<p>Qui pu essere indicato il link a<a href="senzaFrame.html">
una versione del sito</a> che non utilizzi un layout a frame</p>
</noframes>
</frameset>
</html>
http://www.html.it/guida/html_38.htm (1 di 4)01/12/2004 21.48.02
cerca
Comporre una pagina in frame | Guida HTML | HTML.it
Lesempio completo si trova qui.
Come vi sarete accorti, rispetto alle pagine che abbiamo studiato finora
cambiano alcune cose.
In primo luogo cambia il doctype, cio il tipo di documento di riferimento.
Allinizio del documento al posto di questa riga:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
compare ora infatti questa dicitura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd">
stiamo indicando semplice al browser che facciamo riferimento alle specifiche
che servono per regolare il comportamento dei frame.
Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag
<frameset> (set di riquadri), che ci permette di indicare come devono essere
indicati i frames allinterno della pagina
Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:
G rows permette di specificare il numero e la grandezza delle righe, nel
caso in cui venga omesso, significa che ci troviamo di fronte a una
struttura a colonne . Ad esempio:
<frameset cols="33%, 33%,*">
G cols permette di specificare il numero e la grandezza delle colonne e,
nel caso in cui venga omesso significa che ci troviamo di fronte una
struttura a righe
<frameset rows="33%, 33%,*">
Nellindicare la grandezza di ciascuna riga (o colonna) possiamo poi lasciare
che una o pi righe si auto-dimensionino, occupando tutto lo spazio che
rimane, in questo caso utilizzeremo lasterisco (wild card); normalmente
invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti
sistemi di misura (da scegliere a nostra discrezione):
dimensione fissa Questa sintassi crea un frameset di 2 righe con 3
colonne ciascuna, per un totale di 6 riquadri:
<frameset rows="150,*" cols="100,200,*">
Laltezza della 1a riga di 150 pixel, mentre la
seconda si adatta al resto della pagina. Le tre
colonne sono larghe rispettivamente: 100 pixel, 200
pixel, e la terza colonna si adatta al resto della
pagina
percentuale Questa sintassi crea un frameset che si adatta alla
risoluzione. La grandezza dei riquadri espressa in
percentuale:
<frameset rows="20%,80%" cols="25%,25%,50%">
come si pu vedere la prima riga occupa il 20%
dellaltezza, la seconda il rimanente 80%.
Le 3 colonne si dividono la larghezza: la prima
colonna occupa il 25%, la seconda nuovamente il
25%, la terza il 50% dello spazio
http://www.html.it/guida/html_38.htm (2 di 4)01/12/2004 21.48.02
Comporre una pagina in frame | Guida HTML | HTML.it
proporzionale In questo caso la ripartizione proporzionale:
<frameset rows="1*,3*" cols="3*,2*,1*">
G per quel che riguarda le righe: laltezza viene
suddivisa in 4 parti (1+3); la prima riga ne
occupa 1 parte e la seconda riga ne occupa 3
G per quel che riguarda le colonne: laltezza
viene suddivisa in 6 parti (3+2+1); la prima
colonna occupa 3 parti, la seconda riga ne
occupa 2 e la terza 1

Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e
le colonne, dobbiamo specificare dove si trova il file di origine di ciascun
frame. Possiamo farlo con la sintassi:
<frame src="prima.html">
come si pu vedere lorigine di ciascun frame un documento HTML standard
(come quelli che abbiamo analizzato finora): avr dunque la sua dichiarazione
di documento, la sua <head> e il suo <body>.
Se le dimensioni del riquadro non sono sufficienti a mostrare il documento
nella sua interezza, il frame avr delle barre di scorrimento, a meno che non
sia stato esplicitamente specificato il contrario negli attributi (che vedremo tra
poco).
Per visualizzare il codice HTML di ciascun frame sufficiente andare nel
riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:
G Con Internet Explorer:
selezionare HTML
G Con Mozilla:
selezionare this frame > view frame source
possibile anche individuare un frame in modo pi preciso, assegnandogli un
nome:
<frame id=primoRiquadro name=primoRiquadro src="prima.html">
la sintassi corretta per dare un nome a un frame dovrebbe essere:
id=primoRiquadro
tuttavia per questioni di retro-compatibilit (con Netscape 4) oramai entrato
nelluso utilizzare anche name=primoRiquadro.
Frameset annidati
possibile annidare diversi frames luno dentro laltro. In questo caso, al posto
di uno dei tag <frame> sufficiente includere le indicazioni del nuovo
frameset. Cos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1">
<title>HTML.it</title>
</head>
http://www.html.it/guida/html_38.htm (3 di 4)01/12/2004 21.48.02
Comporre una pagina in frame | Guida HTML | HTML.it
<frameset rows="15%,70%,15%">
<frame src="11.html">
<frameset cols="25%,50%,25%">
<frame src="21.html">
<frame src="22.html">
<frame src="23.html">
</frameset>
<frame src="12.html">
<noframes>
<p>Qui pu essere indicato il link a <a href="senzaFrame.html">
una versione del sito</a> che non utilizzi un layout a frame</p>
</noframes>
</frameset>
</html>
Lesempio completo si trova qui.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_38.htm (4 di 4)01/12/2004 21.48.02
HTML.it
Primo riquadro Secondo riquadro
http://www.html.it/guida/frames/frameset1/indice.html01/12/2004 21.48.07
HTML.it
Primo
riquadro
Secondo
riquadro
Terzo riquadro
http://www.html.it/guida/frames/frameset2/indice.html01/12/2004 21.49.36
HTML.it
Primo riquadro
Secondo riquadro
Terzo riquadro
http://www.html.it/guida/frames/frameset3/indice.html01/12/2004 21.49.46
HTML.it
Primo
riquadro
Secondo
riquadro
Terzo riquadro
http://www.html.it/guida/frames/frameset4/indice.html01/12/2004 21.50.08
HTML.it
Primo
riquadro
Secondo
riquadro
Terzo riquadro
http://www.html.it/guida/frames/frameset5/indice.html01/12/2004 21.50.30
HTML.it
Primo riquadro Secondo
riquadro
Terzo
riquadro
http://www.html.it/guida/frames/frameset6/indice.html01/12/2004 21.50.41
HTML.it
1 frameset
1 frame
2 frameset
1 frame
2 frameset
2 frame
2 frameset
3 frame
1 frameset
ultimo frame
http://www.html.it/guida/frames/frameset7/indice.html01/12/2004 21.50.54
Attributi dei frames per la visualizzazione | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Attributi dei frames per la visualizzazione
Attributi del frameset
Il tag frameset non ha (secondo le specifiche ufficiali) attributi per la
visualizzazione. Alcuni attributi tuttavia sono entrati nelluso e sono
correttamente supportati dai browser attuali:
<frameset frameborder="no" cols="25%,75%">
Lattributo
frameborder
(di default
impostato a
yes) permette
di specificare se
nel frameset
devono essere
presenti i bordi.
L'esempio qui
<frameset framespacing="20" border=20
cols="25%,75%">
framespacing
funziona solo con
Internet Explorer
e permette di
impostare lo
spazio tra un
frame e laltro.
Di fatto equivale
allattributo
border, che
permette di
specificare lo
spessore dei
bordi in pixel.
Per mantenere la
compatibilit con
Internet Explorer
4 (che non legge
lattributo
border), di solito
si specificano sia
il
framespacing,
sia il border.
L'esempio qui
<frameset border="10" framespacing="10"
bordercolor=#FF0000 cols="25%,75%">
bordercolor
permette di
specificare il
colore dei bordi
del frameset.
L'esempio qui
Attributi dei frame
A differenza degli attributi del tag frameset, che sono dovuti alla convenzione, i
seguenti attributi del tag frame sono invece descritti nelle specifiche del W3C e
http://www.html.it/guida/html_39.htm (1 di 3)01/12/2004 21.51.04
cerca
Attributi dei frames per la visualizzazione | Guida HTML | HTML.it
permettono di modificare laspetto dei riquadri e il modo in cui lutente pu
interagire con essi:
<frame src=prima.html scrolling=no>
<frame src=prima.html scrolling=auto>
Lattributo
scrolling (di
default impostato
a yes) indica se
si vuol consentire
allutente di poter
scorrere il frame
oppure no.
Nel caso sia
impostato a no,
il frame non ha la
barra di
scorrimento anche
nel caso in cui il
contenuto della
pagina HTML vado
oltre la cornice,
come si pu
vedere
nellesempio.
L'esempio qui
scrolling pu
anche essere
impostato ad
auto.
In questo caso la
barra di
scorrimento
compare in
automatico, ma
solo se necessario
<frame src=prima.html scrolling=no>
<frame src=prima.html scrolling=no
noresize>
noresize
impedisce al
singolo frame di
essere
ridimensionato.
L'esempio qui
Se usato in unione
con
scrolling=no,
di fatto blocca il
contenuto del
frame.
L'esempio qui
Un uso maldestro
di questa tecnica
potrebbe per
impedire all'utente
la corretta
visualizzazione dei
contenuti
http://www.html.it/guida/html_39.htm (2 di 3)01/12/2004 21.51.04
Attributi dei frames per la visualizzazione | Guida HTML | HTML.it
<frame src=prima.html frameborder=0>
frameborder
conesente di far
apparire o meno i
bordi del frame (i
valori ammessi
sono "0" e "1",
ovvero "no" e
"yes").
Se frameborder
impostato a 0 i
bordi non sono
visibili
L'esempio qui
Attenzione per a
come impostate i
bordi nei vari
frame, dal
momento che i
bordi di frame
adiacenti non
sempre vanno
daccordo
(provate)
Questo attributo
permette di
specificare un
valore differente
da quello
impostato nel
frameborder del
<frameset>
<frame marginwidth="50" marginheight="50"
src="prima.html">
marginheight e
marginwidth
permettono di
impostare la
distanza verticale
(marginheigth) e
orizzontale
(marginwidth)
tra i bordi del
frame e il suo
contenuto.
L'esempio qui
Approfondimenti
Ovviamente sarebbe meglio impostare i bordi e gli spazi tra i frame attraverso i
CSS. Nella lezione dedicata ai bordi con i CSS spiegato come fare.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_39.htm (3 di 3)01/12/2004 21.51.04
HTML.it
Primo
riquadro
Secondo riquadro
http://www.html.it/guida/frames/frameset8/indice.html01/12/2004 21.51.07
HTML.it
Primo
riquadro
Secondo riquadro
http://www.html.it/guida/frames/frameset9/indice.html01/12/2004 21.51.19
HTML.it
Primo
riquadro
Secondo riquadro
http://www.html.it/guida/frames/frameset10/indice.html01/12/2004 21.51.29
HTML.it
Dominio
gratuito +
spazio web
illimitato
Per il tuo sito
perch
spendere di
pi? 19.90
euro /anno
SPS-host.it
HostingPlan
piani da 2,16
Wikinews: l'informazione libera
Notizie libere a portata di click.
Dalla Wikipedia nasce Wikinews
Il W3C in campo per il Web
Mobile
Aziende e Consorzio alla ricerca di
soluzioni per il 'dopo WAP'
Rassegna Web di oggi articoli hi-tech selezionati dalla Redazione
ULTIM'ORA
Parola dell'anno 2004: 'Blog'
Lycos: attaccato il sito makelovenotspam.com
Un motore di ricerca per i prodotti televisivi?
Sony: Walkman contro iPod
W3C10: il W3C compie 10 anni
Win2000: stop ai SP, ultimo update nel 2005
Sun, pi cattedrale che bazar
ULTIMI FOCUS
Le nuove armi del Peer to Peer
Il portale chiuso rinasce sul 3G
Spazio e servizi: le nuove Webmail
Supercomputer: IBM di nuovo prima
Novell: non rincorriamo Windows
Con iPod non vince solo Apple
I motori? Uccidono il Web
LINUX
Articoli, news dal Web, download
DOWNLOAD
Hardware, macintosh, Linux ... ...
FORUM DI DISCUSSIONE
Linux, software, Adsl, programmazione, Mac
PROGRAMMAZIONE
VBasic, Python, Delphi, C++, C, Java
WAP
Guida WML, WMLscript, HDML, faq, test
ADSL
Tutte le offerte, le migliori, le pi cliccate, le
pi economiche, faq, articoli
Pubblicit | Supportaci | HTML.it in Home page | contatti | staff | Azienda | Press
room
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
Secondo riquadro
http://www.html.it/guida/frames/frameset11/indice.html (2 di 2)01/12/2004 22.03.57
HTML.it
Dominio
gratuito +
spazio web
illimitato
Per il tuo sito
perch
spendere di
pi? 19.90
euro /anno
SPS-host.it
HostingPlan
piani da 2,16
Wikinews: l'informazione libera
Notizie libere a portata di click.
Dalla Wikipedia nasce Wikinews
Il W3C in campo per il Web
Mobile
Aziende e Consorzio alla ricerca di
soluzioni per il 'dopo WAP'
Rassegna Web di oggi articoli hi-tech selezionati dalla Redazione
ULTIM'ORA
Parola dell'anno 2004: 'Blog'
Lycos: attaccato il sito makelovenotspam.com
Un motore di ricerca per i prodotti televisivi?
Sony: Walkman contro iPod
W3C10: il W3C compie 10 anni
Win2000: stop ai SP, ultimo update nel 2005
Sun, pi cattedrale che bazar
ULTIMI FOCUS
Le nuove armi del Peer to Peer
Il portale chiuso rinasce sul 3G
Spazio e servizi: le nuove Webmail
Supercomputer: IBM di nuovo prima
Novell: non rincorriamo Windows
Con iPod non vince solo Apple
I motori? Uccidono il Web
LINUX
Articoli, news dal Web, download
DOWNLOAD
Hardware, macintosh, Linux ... ...
FORUM DI DISCUSSIONE
Linux, software, Adsl, programmazione, Mac
PROGRAMMAZIONE
VBasic, Python, Delphi, C++, C, Java
WAP
Guida WML, WMLscript, HDML, faq, test
ADSL
Tutte le offerte, le migliori, le pi cliccate, le
pi economiche, faq, articoli
Pubblicit | Supportaci | HTML.it in Home page | contatti | staff | Azienda | Press
room
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
Secondo riquadro
http://www.html.it/guida/frames/frameset12/indice.html (2 di 2)01/12/2004 22.04.25
I link in un frameset e il tag noframes | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I link in un frameset e il tag noframes
Il Target dei link in un frameset
In una struttura a frames pu apparire difficile caricare il contenuto di un link
nella sezione appropriata.
Grazie allattributo target possiamo specificare qual' la destinazione del link;
con questa sintassi siamo dunque in grado di caricare il contenuto di un
collegamento nel riquadro che riteniamo pi opportuno:
<a href=paginaDaLinkare.html target=nomeDelFrame>
come si pu vedere nellesempio.
Ci sono poi delle parole chiave che ci consentono di ricaricare i link in
destinazioni predefinite:
target=_blank
Apre il link in una nuova finestra, senza nome
L'esempio qui
target=_self
Apre il link nel frame stesso ( cos di default)
L'esempio qui
target=_parent
Il documento viene caricato nel frameset precedente
a quello corrente (pi esattamente nel frame
genitore)
L'esempio qui
Il comportamento di _parent particolarmente
evidente in una struttura annidata in cui alcune
pagine HTML contengono a loro volta dei frameset,
come nellesempio: in questo caso viene caricato il
contenuto del link nel frameset immediatamente
precedente alla pagina del link.
target=_top
Il documento viene caricato nella finestra originale,
cancellando ogni struttura a frame.
L'esempio qui
(si noti la differenza con _parent).
Pi esattamente il documento viene carictao nella
parte pi alta ("top") della struttura, ed questo il
motivo per cui il frameset stesso viene annullato e
sostituito dal contenuto del link.
Pu essere noioso specificare per tutti i link il target appropriato. Ci viene in
aiuto allora il tag <base> che ci consente di specificare la destinazione dei tutti
link in una sola volta.
Il tag va inserito nella pagina contenente i link. Ad esempio:
<base target=_blank>
a questo indirizzo possibile visualizzare lesempio completo.
Abbiamo gi incontrato il tag <base> per impostare un percorso predefinito di
http://www.html.it/guida/html_40.htm (1 di 3)01/12/2004 22.04.52
cerca
I link in un frameset e il tag noframes | Guida HTML | HTML.it
default. Ovviamente possibile combinare i due attributi di <base>:
<base href=http://www.html.it target=_blank>
Questa sintassi indica che lindirizzo di base per i percorsi della pagina http://
www.html.it e che tutti i link vanno aperti in una nuova pagina.
Approfondimenti
Tutti si chiedono quasi subito come cambiare il contenuto di due frame con un
solo click del mouse dell'utente. Ecco una soluzione.
Il tag noframes
Allinterno della dichiarazione del <framset> abbiamo sempre visto comparire
lelemento <noframes>: questo tag serviva per browser particolarmente
obsoleti (come Mosaic 2) che non erano in grado di leggere e visualizzare una
struttura frameset. In previsione di situazioni di questo genere possibile
inserire allinterno del tag <noframes> un contenuto appositamente studiato
per questa eventualit, ad esempio lavvertimento che il sito strutturato a
frame, o un contenuto alternativo, oppure una descrizione per i motori di
ricerca (come vedremo tra breve).
La struttura la seguente:
<frameset rows=50%,50%
<frame src="prima.html">
<frame src="seconda.html">
<noframes>
<p>Qui pu essere indicato il link a <A href="senzaFrame.
html">una versione del sito<A> che non utilizzi un layout a frame, oppure un
contenuto alternativo, o anche una descrizione per i motori di ricerca.
</p>
</noframes>
</frameset>
importante capire una volta per tutte come funziona questo genere di tag,
dal momento che un tipo di struttura di questo genere ricorre in diverse
occasioni nellHTML: il tag <noscript> e i contenuti alternativi nel caso
dell<iframe> utilizzano infatti gli stessi principi di funzionamento.
I browser obsoleti non sono in grado di interpretare n la struttura di un
frameset, n tanto meno il <noframes>: non essendo un tag previsto nelle
specifiche rilasciate allepoca in cui questi browser sono stati costruiti, si tratta
infatti di una sintassi del tutto oscura per loro.
Di tutto il codice in questione lunica parte comprensibile a questo genere di
browser lHTML standard compreso allinterno del <noframes>: e questo si
limitano a leggere.
Sono invece i browser moderni che sanno di dover ignorare il <noframes>, dal
momento che il suo contenuto non li riguarda.
C da dire che, se tutti i browser odierni sono in grado di interpretare
correttamente la struttura di un frameset, viceversa sotto molti punti di vista i
motori di ricerca sono paragonabili a browser obsoleti, e non raro che un sito
organizzato a frame sia inserito nellindice dei motori di ricerca in maniera non
corretta: per questo motivo alcuni di essi catturano il contenuto del
<noframes> come descrizione di un sito.
Quindi per evitare messaggi di questo genere a seguito di una ricerca in rete:
http://www.html.it/guida/html_40.htm (2 di 3)01/12/2004 22.04.52
I link in un frameset e il tag noframes | Guida HTML | HTML.it
bene utilizzare il tag noframes per indicare la descrizione del sito: in questo
modo miglioriamo anche il posizionamento nei motori di ricerca. Ad esempio:
<frameset rows=50%,50%>
<frame src="prima.html">
<frame src="seconda.html">
<noframes>
<p>Su PRO.HTML.it - Approfondimenti sul Web Publishing e
articoli per webmaster</p>
</noframes>
</frameset>
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_40.htm (3 di 3)01/12/2004 22.04.52
HTML.it
Intestazione
Menu
prima pagina
seconda pagina
terza pagina
quesrta pagina
Prima pagina
http://www.html.it/guida/frames/frameset16/indice.html01/12/2004 22.05.03
HTML.it
Intestazione
Menu
prima pagina
seconda pagina
terza pagina
quesrta pagina
Prima pagina
http://www.html.it/guida/frames/frameset22/indice.html01/12/2004 22.05.22
L'iframe | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
L'iframe
L'iframe
Iframe significa inline frame: in qualsiasi momento in un documento che
non utilizzi una struttura a frame possibile creare un frame al volo grazie a
questo tag.
Possiamo specificare la larghezza e laltezza del tag, mentre gli attributi di
visualizzazione sono gli stessi del tag <frame>: si tratta di una vera e propria
finestra verso lesterno allinterno di un documento ordinario.
Questo tag correttamente supportato da tutti i browser moderni (Netscape 4
non lo supporta, ma questo browser oramai sta scomparendo). La sintassi :
<iframe src="http://pro.html.it" width="300" height="300">
Contenuto alternativo per i browser che non leggono gli iframe.
</iframe>
come si pu vedere tra lapertura e la chiusura del tag possibile specificare
un contenuto alternativo per i browser che non siano in grado di leggere
l<iframe>: in realt questi browser sono ciechi a questo tag (come abbiamo
visto per il <noframes>) e dunque leggono direttamente il contenuto al suo
interno. Sono invece i browser che supportano questa sintassi a ignorare
volutamente quanto viene compreso tra apertura e chiusura del tag.
Anche in questo caso sar opportuno utilizzare la possibilit di inserire un
contenuto alternativo per migliorare il posizionamento nei motori di ricerca. Ad
esempio:
<iframe src="http://pro.html.it" width="300" height="300">
<p>Su <a href=http://pro.html.it>PRO.HTML.it</a> - Approfondimenti
sul Web Publishing e articoli per webmaster</p>
</iframe>
Un esempio completo disponibile a questa pagina.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_41.htm01/12/2004 22.05.39
cerca
HTML.it
Ecco un <iframe> che si apre su pro.html.it:
Su PRO.HTML.it - Approfondimenti sul Web Publishing e articoli per webmaster
http://www.html.it/guida/frames/iframe/indice.html01/12/2004 22.05.45
Vantaggi e svantaggi dei frames | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Vantaggi e svantaggi dei frames
Abbiamo gi visto allinizio delle lezioni sui frames quali sono stati alcuni dei
motivi di successo dei frames. E cio:
G Dal punto di vista dellutente: evitare di ricaricare le parti comuni
G Dal punto di vista del webmaster: includere il layout comune in pochi
files
G Dal punto di vista dellutente: mantenere in vista alcuni punti del layout
Tuttavia gli svantaggi che comporta un uso scorretto di un layout a frame sono
superiori ai vantaggi che possono derivare dal loro utilizzo.
I motori di ricerca infatti navigano di link in link attraverso il web per catturare
contenuti da indicizzare.
frequente allora che una struttura a frame sia inserita allinterno di un motore
di ricerca in modo errato: a volte viene catturato solo un menu (come in questo
caso), altre volte compare soltanto la parte interna con il contenuto del frame e
dunque viene perso ogni menu di navigazione (come in questo caso).
Per evitare problematiche di questo genere, meglio evitare di utilizzare una
struttura a frame; o nel caso in cui la si desideri utilizzare bene prevedere sin
da subito dei metodi che ricostruiscano il frameset, nel caso in cui sia catturata
soltanto una pagina interna. possibile farlo utilizzando JavaScript (un
linguaggio di programmazione lato-client). Qui vengono indicati alcuni metodi
per ottenere leffetto voluto:
G Ricreare un frameset
G Frameset con pagina corrente
G Ricostruire un frameset
C anche da dire che oggi molti dei motivi che rendevano vantaggioso
lutilizzo dei frames sono venuti meno: la banda a disposizione si ampliata, i
CSS alleggeriscono la struttura dei siti e rendono possibile alcune soluzioni
che prima erano difficili (come quella di mantenere un menu di navigazione
sempre a portata di mano), e la gestione dei contenuti pu essere
semplificata utilizzando le inclusioni lato server.
Viceversa una struttura a frame risulta molto vantaggiosa nel caso in cui si
utilizzino delle vere e proprie applicazioni che utilizzano internet (come le
piattaforme di e-learning, la webmail, eventuali aree riservate del sito con
accesso tramite login e password). In questo caso la suddivisione dei
contenuti evita di sovraccaricare il server (dal momento che cos vengono ri-
caricati solo le parti strettamente necessari), semplifica la gestione, e quindi si
rivela estremamente utile.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/guida/html_42.htm (1 di 2)01/12/2004 22.06.29
cerca
Ricreare automaticamente un frameset 1/2 | Un JavaScript a settimana | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Ricreare un frameset
1/2
numero 22 del 31 maggio 1999
Piu' volte negli articoli di approfondimento di questa lista abbiamo trattato dei
frame e delle problematiche di gestione ad essi legati nella costruzione di un
Website. Chi scrive e' convinto della utilita' di tali strumenti che, se ben dosati,
danno risultati organizzativi apprezabili. I detrattori dei frame trovano terreno
fertile per le proprie critiche nei molti, troppi, siti che di tali strumenti fanno un
uso smodato e inopportuno. Circoscrivendo il giudizio ai soli aspetti tecnici, la
perplessita' che spinge molti webdesigner a non servirsi dei frame e' il
discorso legato ai motori di ricerca. Come noto, i motori di ricerca non sempre
riescono ad indicizzare perfettamente un sito diviso in frame. Molto spesso
invece di linkare il file che crea il frameset (solitamente index.html), richiamano
i singoli frame che tale struttura vanno a costruire. Il risultato e' spesso
disastroso, con pagine senza menu o link di navigazione. In ultima analisi una
ricerca condotta in questi termini rischia seriamente di compromettere i risultati
di un Website e di far perdere potenziali visitatori.
Semplificando, facciamo riferimento al rudimentale grafico che segue. Index.
html e' il nome del file principale che costruisce il frameset e richiama i due
documenti: A nel frame superiore e B nel frame inferiore:
Se il motore di ricerca risponde alla ricerca dell'utente con la pagina index.html
non c'e' alcun problema. Ma se il motore di ricerca trova il documento A o B?
Javascript fornisce una soluzione a questo problema con uno script che fa
della semplicita' la sua arma vincente.
L'esempio si compone di 3 file:
G index.html
G alto.htm
G centrale.htm
Per una piu' semplice comprensione del presente script fai continuamente
riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in
questo modo, con un continuo confronto, comprenderai le peculiarita' di
questo Javascript.
[ P a g i n a S u c c e s s i v a ]
http://www.html.it/mailing/archivio/22/index.htm (1 di 2)01/12/2004 22.06.45
cerca
Ricreare automaticamente un frameset 2/2 | Un JavaScript a settimana | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Ricreare un frameset
2/2
numero 22 del 31 maggio 1999
sx.htm + alto.htm
Il file principale index.html non va modificato in alcuna parte ai fini di questo
script. Al contrario e' necessario agire sui due file richiamati nella struttura dei
frame: sx.htm e alto.htm.
Si e' detto della semplicita' di questo javascript, che si risolve in sole quattro
righe di codice comprese tra i campi <HEAD> dei documenti sopracitati:

Inserito questo codice in entambi i documenti prova a richiamare i file sx.htm e
alto.htm e vedrai che non sara' visualizzato il solo documento che hai cliccato,
ma tutta la struttura del sito. Lo script, infatti, ha verificato che il documento
richiamato e' parte di una struttura a frame, ma che non e' il file principale che
la costruisce.
Se si fosse trattato di un motore di ricerca che linka una pagina parte di un
frameset, il risultato sarebbe stato la visualizzazione dell'intero documento e
non solo parte di esso.
Il file richiamato in sostituzione del documento corrente quando lo script
capisce che il file e' parte di un frameset e' "index.html". Per fare un altro
esempio, se la stessa cosa viene fatta per la home page di HTML.it lo script
andra' cosi' modificato:

Se provi a richiamare il file index.html non c'e' alcun messaggio di errore ne'
malfunzionamento, e il comportamente del frameset e' assolutamente normale.
Per un approfondimento sui frame ti rimandiamo alla guida di HTML.it, ed in
particolare alla sezione in cui tratta di questi strumenti:
http://www.html.it/guida/#frame
l i s t a d e g l i a r r e t r a t i
[ D o w n l o a d ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/mailing/archivio/22/index1.html01/12/2004 22.07.42
cerca
<script>
<script>
Ricreare un frameset con pagina corrente 1/2 | Un JavaScript a settimana | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Frameset con pagina corrente
1/2
settimana 30 - 26 luglio 1999
Nel numero 22 del 31 maggio 1999 abbiamo descritto uno script che consente
di ricreare la struttura del frameset quando si richiama un singolo frame. Per
comprendere pienamente le peculiarita' di un tale script ribadiamo alcuni
concetti espressi in quell'occasione.
Come noto, i motori di ricerca non sempre riescono ad indicizzare
perfettamente un sito diviso in frame. Molto spesso invece di linkare il file che
crea il frameset (solitamente index.html), richiamano i singoli frame che tale
struttura vanno a costruire. Il risultato e' spesso disastroso, con pagine senza
menu o link di navigazione. In ultima analisi una ricerca condotta in questi
termini rischia seriamente di compromettere i risultati di un Website e di far
perdere potenziali visitatori.
Semplificando, facciamo riferimento al rudimentale grafico che segue. Index.
htm e' il nome del file principale che costruisce il frameset e richiama i due
documenti: A nel frame superiore e B nel frame inferiore:
Se il motore di ricerca risponde con la pagina index.htm non c'e' alcun
problema. Ma se il motore di ricerca trova il documento A o B?
Nello script del 31 maggio abbiamo mostrato come caricare l'intera struttura
del frameset quando l'utente raggiunge il documento A o B. Cio' avveniva,
pero', con un piccolo bug che in parte limitava l'utilita' dello script: il browser
rimandava non alla pagina richiamata, ma sempre e comunque alla home
page. In altre parole se si accedeva ad un documento interno al sito, il
Javascript rimandava alla prima pagina, con la conseguenza che il visitatore
doveva navigare nel Website per raggiungere finalmente la pagina trovato sul
motore di ricerca.
Lo script di questa settimana riprende quell'esempio e ne migliora gli effetti,
eliminando il bug sopracitato e rimandando alla stessa pagina linkata.
L'esempio si compone di 2 file:
G index.htm [una semplice struttura a frame che punta a menu.htm e a
prima.htm]
G menu.htm [frame di sinistra]
G prima.htm [pagina principale di destra caricata dal browser nel frame]
G dentro.htm [pagina interna non linkata da index.htm]
http://www.html.it/mailing/archivio/30/index.html (1 di 2)01/12/2004 22.08.01
cerca
Ricreare un frameset con pagina corrente 2/2 | Un JavaScript a settimana | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Frameset con pagina corrente
2/2
settimana 30 - 26 luglio 1999
Per una piu' semplice comprensione del presente script fai continuamente
riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in
questo modo, con un continuo confronto, comprenderai le peculiarita' di
questo Javascript.
Perche' lo script funzioni e' necessario aggiungere su tutte le pagine interne
diverse da prima.htm, il seguente codice:

che rispetto all'esempio analizzato nel numero 22 ha in piu' soltanto l'aggiunta
dell'URL del documento. Questo codice va aggiunto nelle pagine: menu.htm e
dentro.htm tra i tag del documento.
Sulla prima pagina (prima.htm) il codice da aggiungere in testata invece sara'
il seguente:

dove la prima parte serve a caricare la struttura a frame, mentre la seconda a
reindirizzare il frame basso al documento chiamato originariamente.
Affinche' il tutto funzioni e' necessario che i riferimenti alla pagina principale
(all'interno del menu) rimandino non alla pagina interna ma all'intera struttura.
l i s t a d e g l i a r r e t r a t i
[ D o w n l o a d ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/mailing/archivio/30/index1.html01/12/2004 22.08.08
cerca
<script>
<script>
Ricostruire un frameset | Un JavaScript a settimana | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Ricostruire un frameset
1/2
settimana 156 - 04 marzo 2002
Il problema principale che deve affrontare un webmaster, nel realizzare un sito
con frames, quello di far s che l'utente visualizzi sempre l'intera struttura del
frameset, a prescindere dalla pagina da cui si accede.
Come sappiamo, infatti, entrare da una pagina secondaria (come spesso
accade proveniendo da una ricerca su qualche motore) potrebbe significare
non visualizzare i frame nei quali sono contenuti i men con i link di
navigazione (in questo modo il sito risulta non navigabile!).
Gi in passato avevamo visto una possibile soluzione (http://www.html.it/
mailing/archivio/30/) ma lo script di questa settimana si distingue per
semplicit d'uso ed efficacia.
Il codice stato scritto da un forumista di Html.it, Marco Cavicchioli, che ne ha
gentilmente concesso l'utilizzo senza alcuna forma di copyright.
L'esempio si compone di 7 file:
G frameset.htm
G top.htm
G center.htm
G pagina1.htm
G pagina2.htm
G sfondo.gif
Per una piu' semplice comprensione del presente script fai continuamente
riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in
questo modo, con un continuo confronto, comprenderai le peculiarita' di
questo Javascript.
esempio.htm
Lo script semplicissimo da spiegare ma estremamente efficace.
Supponiamo di avere un frameset strutturato in questa maniera:
G 1 frame superiore
G 1 frame laterale sinistro
G 1 frame centrale
La struttura in html sar cos scritta:

[ P a g i n a S u c c e s s i v a ]
http://www.html.it/mailing/archivio/a156/index.html (1 di 2)01/12/2004 22.08.27
cerca
<frameset cols="150,*" frameborder="NO"
border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO"
noresize src="sx.htm">
<frameset rows="90,*" frameborder="NO"
border="0" framespacing="0">
<frame name="topFrame" scrolling="NO"
noresize src="top.htm" >
<frame name="mainFrame" src="center.htm">
</frameset>
</frameset>
Ricostruire un frameset | Un JavaScript a settimana | HTML.it
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/mailing/archivio/a156/index.html (2 di 2)01/12/2004 22.08.27
Ricostruire un frameset 2/2 | Un JavaScript a settimana | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Ricostruire un frameset
2/2
settimana 156 - 04 marzo 2002
Pensiamo, adesso, ad utente che entri direttamente nella pagina "center.htm".
In questa situazione non verrebbe visualizzato il men contenuto nel frame
sinistro e la navigazione sarebbe impossibile.
Il problema si risolve facilmente poche linee di codice javascript, inserite tra i
tag <head> di tutte le pagine che saranno aperte nel "mainFrame".
Ad esempio prendiamo il file "center.htm" e scriviamo quanto segue (tra i tag
<head>):

Questo codice pone una condizione al caricamento della pagina "center.htm";
forzando un po' la mano potrebbe essere interpretato in questa maniera:
"Se, al caricamento della pagina, quest'ultima non contenuta all'interno di
frames ma stata richiamata singolarmente, ricostruisci la struttura del
frameset con l'istruzione document.write"
La personalizzazione semplice e richiede di scrivere lo schema a frames del
sito sostituendo al parametro "src", nella riga relativa al frame in cui vengono
visualizzate le pagine, la stringa "src='+document.location.href+'?a>'".
Spieghiamo con un esempio pratico:
- nel caso di "center.htm" vediamo che il documento fa parte del "mainFrame".
La struttura del frameset, quindi, sarebbe quella vista in precedenza e cio:

Abbiamo detto, per, di voler fare in modo che, anche caricando
singolarmente "center.htm", questa pagina venga inserita automaticamente
nel frameset di origine.
Inseriamo quindi, tra i tag <head> di "center.htm", questo codice:
http://www.html.it/mailing/archivio/a156/index1.html (1 di 2)01/12/2004 22.08.50
cerca
<script>
<frameset cols="150,*" frameborder="NO"
border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO"
noresize src="sx.htm">
<frameset rows="90,*" frameborder="NO"
border="0" framespacing="0">
<frame name="topFrame" scrolling="NO"
noresize src="top.htm" >
<frame name="mainFrame" src="center.htm">
</frameset>
</frameset>
Ricostruire un frameset 2/2 | Un JavaScript a settimana | HTML.it

Come vedete il 5 document.write contiene la stringa
src='+document.location.href+'?a
e sta ad indicare che deve essere cercato come frame mancante il nome della
pagina caricata singolarmente (in questo caso "center.htm").
Lo stesso identico codice (senza nessuna modifica) andr inserito in tutte le
pagine appartenenti al "mainFrame".
Per quanto riguarda il frame superiore e quello sinistro il ragionamento
analogo.
Nella pagina "sx.htm" inseriremo:

Nella pagina "top.htm" invece:

Per accelerare il lavoro sarebbe opportuno mettere i diversi codici in file .js
esterni da richiamare nelle singole pagine.
l i s t a d e g l i a r r e t r a t i
[ D o w n l o a d ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/mailing/archivio/a156/index1.html (2 di 2)01/12/2004 22.08.50
<script>
<script>
<script>
Impaginare a livelli con i CSS | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Impaginare a livelli con i CSS
Abbiamo gi visto due stili di impaginazione: le tabelle e i frame. Come
accennato pi volte allinterno del corso esiste una terza via: limpaginazione
tramite i fogli di stile (ovvero "CSS", cio "Cascading Style Sheets", che
significa "fogli di stile a cascata").
La sintassi dei CSS esula dallargomento del corso presente, importante
tuttavia afferrare il concetto che un elemento pu essere disposto allinterno
della pagina, semplicemente specificando le sue coordinate, o indicando il
modo in cui deve essere spostato rispetto agli elementi che lo circondano.
Nel caso dellimpaginazione tramite i fogli di stile abbiamo per lo pi a che fare
con i tag <span> e <div>, che possono essere accuratamente posizionati e
visualizzati specificando ad esempio:
G larghezza
G altezza
G distanza dallalto
G distanza da sinistra
G colore o immagine di sfondo
G colore, tipo e grandezza dei bordi
G distanza tra il contenuto e il bordo (padding) e tra il bordo e lesterno
(margin)
Per livello (o layer) in HTML si intende appunto un <div> posizionato
tramite i CSS allinterno della pagina.
La sintassi dei CSS molto diversa da quella dellHTML solito.
Ad esempio per posizionare la testata di HTML.it a 50 pixel dallalto della
pagina e 200 pixel da sinistra, con lo sfondo a righe, bordo nero, e una
dimensione di 600 x 80 pixel di necessario utilizzare questa sintassi.
Nella <head>:
<style type="text/css">
#logo {
position:absolute;
left:200;
top:50;
width:600px;
height:80px;
background-image: url(sfondo.gif);
border: 1px solid #000000;
}
</style>
nel <body>:
<div id="logo">
<img src="logo.gif" alt="HTML.it" title="HTML.it" width="224" height="69">
http://www.html.it/guida/html_43.htm (1 di 2)01/12/2004 22.09.30
cerca
Impaginare a livelli con i CSS | Guida HTML | HTML.it
<img src="logo1.gif" alt="HTML.it" title="HTML.it" width="59" height="70">
</div>
Lesempio completo si trova a questo indirizzo.
Il vantaggio di questa impostazione quella di avere una pagina molto pulita:
infatti il file HTML composto soltanto dai <div> (o dagli span) con i contenuti,
mentre lo stile di visualizzazione dei contenuti affidato ai fogli di stile (per lo
pi espressi in un file separato).
Per gli approfondimenti vi rimandiamo allapposita guida sui fogli di stile e alla
sezione PRO di HTML.it che approfondisce questo argomento.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_43.htm (2 di 2)01/12/2004 22.09.30
Html.it
http://www.html.it/guida/livelli/livelli.html01/12/2004 22.09.39
Struttura del tag form | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Struttura del tag form
Uno dei fattori che ha decretato il successo del Web senzaltro la possibilit
di interagire: la possibilit cio di iscriversi a servizi di vario tipo (ad esempio
mailing list), ma soprattutto di partecipare a vere e proprie comunit virtuali,
come il forum di HTML.it.
Per organizzare questo genere di servizi necessario raccogliere in qualche
modo i dati dellutente: per farlo si utilizzano, in maniera molto semplice, i
moduli (cio i form).
Linvio dei dati solitamente organizzato in due parti:
G una pagina principale che contiene i vari campi dei form, che
consentono allutente di effettuare delle scelte, scrivere del testo,
inserire unimmagine
G una pagina secondaria che viene richiamata dalla principale e che
effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di
norma si tratta di una pagina di programmazione che si trova sul
server. Pu essere un cgi, oppure una pagina asp, php, jsp o altro
Noi ci occuperemo della sola pagina principale, dal momento che il modo in
cui struttura una pagina di programmazione esula dagli obiettivi della presente
guida.
Name e action
Per creare una pagina con dei moduli, bisogna utilizzare lapposito tag
<form>: si tratta di un elemento di blocco, come il <p>, quindi il tag <form>
lascia uno spazio prima dellapertura e dopo la chiusura.
<form name="datiUtenti" action="paginaRisposta.php">
.
</form>
Nel caso in non si desideri avere dello spazio superfluo possibile modificare i
bordi del tag utilizzando i fogli di stile. Con questa semplice sintassi:
<form name="datiUtenti" style="border:0px" action="paginaRisposta.php">
Come si pu vedere, "name" serve per indicare il nome del form, "action"
indica lURL del programma o della pagina di risposta che processer i dati.
Grazie all"action" anche possibile far s che i dati vengano inviati in e-mail
al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il
codice questo:
<form action="mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito"
enctype="text/plain" method="POST">
vedremo in una delle prossime lezioni come utilizzare concretamente questa
sintassi.
http://www.html.it/guida/html_44.htm (1 di 3)01/12/2004 22.10.23
cerca
Struttura del tag form | Guida HTML | HTML.it
Method
Quando creiamo un form possiamo scegliere due metodi di invio: GET e
POST.
Con il metodo GET la pagina di risposta viene contattata e i dati vengono
inviati in un unico step.
NellURL della pagina di risposta potremo allora vedere tutti i parametri nella
barra degli indirizzi (pi precisamente nella "query string", cio nella "stringa
di interrogazione") secondo questa forma:
http://www.html.it/esempioForm/paginaRisposta.php?
nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio
i dati (nella forma nome del campo = valore del campo) sono appesi alla
pagina dopo il punto interrogativo.
Alcuni server hanno tuttavia hanno delle limitazioni per quel che riguarda il
metodo GET e non consentono di inviare form con valori superiori a 255
caratteri complessivi. Il metodo GET dunque particolarmente indicato per
form con pochi campi e pochi dati da inviare. La sintassi per linvio in get :
<form name="datiUtenti" action="paginaRisposta.php" method="GET">
Nel metodo POST invece linvio dei dati avviene in due step distinti: prima
viene contattata la pagina sul server che deve processare i dati, e poi vengono
inviati i dati stessi. Per questo motivo i parametri non compaiono nella query
string (dunque se non si desidera che i parametri siano mostrati allutente
questo metodo preferibile).
In questo caso non ci sono limiti sulla lunghezza dei caratteri. La sintassi :
<form name="datiUtenti" action="paginaRisposta.php" method="POST">
Enctype (tipo di codifica)
Prima di passare i dati alla pagina di risposta, che si trova sul server, questi
vengono codificati dal browser in modo da non poter dare adito ad errori (ad
esempio gli spazi vengono convertiti in "+"). Normalmente non necessario
specificare come si vuole effettuare la codifica dei dati, perch sottinteso
linvio di semplice testo. A volte per, come quando necessario inviare
unimmagine, tuttavia indispensabile dichiarare espressamente quali dati
vogliamo inviare. Per farlo necessario utilizzare lattributo
"enctype" ("encoding type", cio "tipo di codifica").
Come dicevamo normalmente non necessario farlo, perch viene sottinteso
questo tipo di sintassi:
<form name="datiUtenti" action="paginaRisposta.php" enctype="text/plain">
Ma nel caso di invio di immagini dovremo dichiarare:
<form name="datiUtenti" action="paginaRisposta.php" method="post"
enctype="multipart/form-data">
Target
Grazie allattributo "target" possibile far aprire i dati del form in una pagina
differente rispetto a quella corrente (o in una determinata parte di un frameset):
<form name="datiUtenti" action="paginaRisposta.php" method="get"
http://www.html.it/guida/html_44.htm (2 di 3)01/12/2004 22.10.23
Struttura del tag form | Guida HTML | HTML.it
target="_blank">
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_44.htm (3 di 3)01/12/2004 22.10.23
Un po' dordine: raggruppare i moduli | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Un po' dordine: raggruppare i moduli
Per la loro natura di "raccoglitori di informazioni", i moduli tendono a
ingigantirsi e diventare lunghissimi. Per questo, con lHTML 4 sono stati
introdotti dei tag per fare un po dordine allinterno dei form.
Grazie al tag <fieldset> possiamo creare delle macro-aree allinterno dei form,
e grazie al tag <legend>, possiamo indicare il nome di ciascuna macro-area.
Poniamo ad esempio di dover raccogliere i dati di un utente, raccogliendo dati
anagrafici, residenza, domicilio e reperibilit sul lavoro.
Possiamo farlo con la seguente sintassi:
<fieldset>
<legend>Dati anagrafici</legend>
<br><br><br>
</fieldset>
<fieldset>
<legend>Residenza</legend>
<br><br><br>
</fieldset>
eccetera
che d:
Dati anagrafici
Residenza
come si pu vedere vengono creati dei riquadri con un indicazione del tipo di
contenuto.
Un altro tag particolarmente utile - si pu utilizzare con ogni tipo di campo che
vedremo dora in poi - il tag <label>, che permette di indicare unetichetta
per il nome del campo.
Ad esempio:
<fieldset>
<legend>Dati anagrafici</legend>
<label>Anno di nascita: <input type="text"></label>
</fieldset>
che d:
Dati anagrafici Anno di nascita:
oppure (cambiando la posizione del testo):
http://www.html.it/guida/html_45.htm (1 di 2)01/12/2004 22.10.41
cerca
Un po' dordine: raggruppare i moduli | Guida HTML | HTML.it
<fieldset>
<legend>Dati anagrafici</legend>
<label><input type="text">: anno di nascita</label>
</fieldset>
che d:
Dati anagrafici : anno di nascita
Come si pu vedere il campo su cui si vogliono dare delle indicazioni deve
essere compreso allinterno del tag label stesso.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_45.htm (2 di 2)01/12/2004 22.10.41
Il tag Input | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Il tag Input
Per quel che riguarda i campi dei form il tag pi utilizzato l<input>, che
senza chiusura. Per specificare un determinato tipo di campo sufficiente
indicare il tipo di input.
Ad esempio:
<input type="text">
crea un campo di testo.
<input type="button">
crea un bottone.
I vari <input> sono dotati di attributi che consentono di indicare il tipo di
campo, il nome ( ad esempio per interagire con JavaScript ), e il valore (per lo
pi il testo visualizzato).
<input type="text" name="tuoTesto" value="qui il tuo testo">
che d:
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_46.htm01/12/2004 22.10.54
cerca
qui il tuo testo
I bottoni (sumbit, reset, button, image) | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I bottoni (sumbit, reset, button, image)
Non c form che si rispetti senza bottone di invio.
La sintassi tradizionale per creare un bottone di invio :
<input type="submit" value="invia I dati">
Ad esempio:
<form action=http://www.html.it target="_blank">
<input type="submit" value="visita HTML.it">
</form>
cio:

Un altro bottone utile il "reset" che una volta premuto - consente di
riportare il form allo stato originario, cancellando ogni cosa scritta finora
dallutente. Ecco un esempio:
<form>
<input type="text"><br>
<input type="reset" value="cancella">
</form>
cio


Esiste infine un tipo di bottone generico, che non esegue nessuna azione
particolare, ma che pu essere ad esempio utilizzato per associare degli
eventi tramite JavaScript.
<form>
<input type="button" value="bottone generico">
</form>
che d:

Il tag <button>
Con lHTML 4 stato introdotto il tag <button> che offre la possibilit di creare
dei bottoni con un aspetto particolarmente ricco.
Il tag <button>, a differenza del tag <input>, d la possibilit di inserire il testo
http://www.html.it/guida/html_47.htm (1 di 3)01/12/2004 22.11.04
cerca
visita HTML.it
cancella
bottone generico
I bottoni (sumbit, reset, button, image) | Guida HTML | HTML.it
del bottone tra lapertura e la chiusura del tag medesimo. Questo ci consente
di specificare anche del codice HTML allinterno del tag.
I bottoni che abbiamo appena visto dovrebbero dunque avere questa forma:
<form action=http://www.html.it target="_blank">
<input type="text"><br>
<button type="button">
bottone generico
</button>
<button type="reset">
cancella
</button>
<button type="submit">
invia
</button>
</form>
cio:

bottone generico cancella invia
Ed ecco un esempio complesso:
<button name="vai" type="submit">
invia
<img src="puntoEsclamativo.gif" width="23" height="67" title="invia adesso"
border="1" vspace="5" alt="invia adesso" align="middle">
<b>adesso</b>
</button>
che d:
invia adesso
Grazie allattributo "disable" infine possibile disabilitare i bottoni.
Es:
<input type="submit" value="invia" disabled>
o anche:
<button type="submit" disabled>
invia
</button>
cio:

invia
http://www.html.it/guida/html_47.htm (2 di 3)01/12/2004 22.11.04
invia
I bottoni (sumbit, reset, button, image) | Guida HTML | HTML.it
Il campo image
Il campo "image" ci consente di utilizzare come bottoni del form delle vere e
proprie immagini e assegnare loro un valore grazie a JavaScript; in questo
caso non si tratta propriamente di un bottone ma la funzionalit la
medesima. Ecco il codice:
<input name="invia" type="image" src="invia.gif" alt="invia il modulo"
title="invia il modulo" width="78" height="38">
cio:
come si pu vedere, se non si specifica nulla, limmagine ha valore di submit.
Gli attributi del campo immagine sono molto simili a quelli del tag <img>.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_47.htm (3 di 3)01/12/2004 22.11.04
Inserire testo (campo testo, textarea, password) | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Inserire testo (campo testo, textarea, password)
Per consentire allutente di inserire del testo possibile utilizzare un campo
testo.
Se il campo su una singola linea avremo:
<input name="mioTesto" type="text" value="qui il tuo testo" size="40"
maxlength="200">
"maxlenght" indica il numero massimo di caratteri che lutente pu inserire,
con "size" si esprimono invece le dimensioni del campo di testo (la larghezza
data dal numero di caratteri).
Se si ha la necessit di indicare un campo che consenta di inserire una grande
quantit di testo conviene invece utilizzare una "textarea" ("area di testo").
Ecco la sintassi:
<textarea name="testo" cols="40" rows="10">qui puoi scrivere il tuo testo</
textarea>
"rows" indica il numero di righe della textarea, "cols" il numero di caratteri
(cio di colonne) che ogni riga pu contenere.
Come si pu vedere, se si vuol indicare del testo predefinito in questo caso
bisogna inserirlo fra lapertura e la chiusura del tag.
Esiste infine il campo password che codifica i caratteri insieriti con degli
asterischi:
<input name="mioTesto" type="password" size="18" maxlength="8">
che d:
da notare che la codifica fornisce una protezione soltanto per chi
eventualmente stia sbirciando sul monitor dellutente. Linvio dei dati attraverso
il web avviene,se non vengono adottate altre misure di sicurezza, 'in chiaro'.
I campi di testo possono essere anche di sola lettura. Ad esempio:
http://www.html.it/guida/html_48.htm (1 di 2)01/12/2004 22.11.39
cerca
qui il tuo testo
qui puoi scrivere il tuo testo
Inserire testo (campo testo, textarea, password) | Guida HTML | HTML.it
<input name="mioTesto" type="text" value="leggere l'informativa" size="25"
maxlength="8" readonly>
che d:
O disabilitati:
<input name="mioTesto" type="text" value="leggere l'informativa" size="25"
maxlength="8" disabled>
cio
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_48.htm (2 di 2)01/12/2004 22.11.39
leggere l'informativa
leggere l'informativa
Consentire delle scelte (checkbox, radio, select) | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Consentire delle scelte (checkbox, radio, select)
Checkbox
Con i checkbox possiamo consentire allutente di operare delle scelte multiple.
Ad esempio:
<fieldset>
<legend>Linguaggi conosciuti</legend><br>
<input type="checkbox" name="html" value="html"> html
<br>
<input type="checkbox" name="css" value="css"> css
<br>
<input type="checkbox" name="javascript" value="javascript"> JavaScript
</fieldset>
che d:
Linguaggi conosciuti
html
css
JavaScript
Si possono anche selezionare uno o pi valori di default:
<input name="html" type="checkbox" value="html" checked>
cio
ed possibile disabilitare una casella:
<input name="html" type="checkbox" value="html" disabled>
cio:
Radio button
I "radio button" ("bottoni circolari") invece consentono di effettuare una
scelta esclusiva. In questo caso quindi una scelta esclude laltra. Per ottenere
questo effetto i campi devono avere lo stesso nome e differente valore:
<fieldset>
<legend>Linguaggi conosciuti</legend>
HTML<input type="radio" name="linguaggio" value="html">
CSS <input type="radio" name="linguaggio" value="css">
http://www.html.it/guida/html_49.htm (1 di 3)01/12/2004 22.11.47
cerca

Consentire delle scelte (checkbox, radio, select) | Guida HTML | HTML.it


JavaScript <input type="radio" name="linguaggio" value="javascript">
</fieldset>
che viene cos visualizzato:
Linguaggi conosciuti HTML CSS JavaScript
Anche in questo caso possibile assegnare un valore di default o disabilitare
un pulsante.
<input type="radio" name="linguaggio" value="html" checked disabled>
cio:

Menu di opzioni (select)
Grazie al tag <select> possibile costruire dei menu di opzioni. In questo
caso ciascuna voce deve essere compresa allinterno del tag <option> (la
chiusura del tag opzionale) e il valore deve essere specificato attravero
l'attributo "value". Con lattributo "selected" si pu indicare una scelta
predefinita:
<fieldset>
<legend>Siti per webmaseter</legend>
<select name="siti" >
<option value="http://www.html.it" selected>www.html.it
<option value="http://freephp.html.it">frephp.html.it
<option value="http://freasp.html.it">freasp.html.it
</select>
</fieldset>
che da luogo a:
Siti per webmaseter
Siccome i menu di scelta tendono a diventare particolarmente lunghi,
nellHTML 4 stato introdotto il tag <optgroup> che consente di suddividere
le varie possibilit di scelta in gruppi tramite lutilizzo di apposite etichette.
Ecco lesempio:
<select name="siti" >
<optgroup label="siti per webmaster">
<option value="http://www.html.it">www.html.it
<option value="http://freephp.html.it">frephp.html.it
<option value="http://freasp.html.it">freasp.html.it
</optgroup>
<optgroup label="risorse per webmaster">
<option value="http://font.html.it">font.html.it
<option value="http://cgipoint.html.it">cgipoint.html.it
</optgroup>
</select>
che d luogo al seguente menu:
http://www.html.it/guida/html_49.htm (2 di 3)01/12/2004 22.11.47
www.html.it
www.html.it
Consentire delle scelte (checkbox, radio, select) | Guida HTML | HTML.it
Infine con il tag select possibile impostare anche delle scelte multiple. Come
si pu vedere, utilizzando lattributo "multiple" laspetto del tag select cambia
notevolmente:
<label>Quale siti visiti?<br>
<select name="siti" multiple>
<option value="http://www.html.it">www.html.it
<option value="http://freephp.html.it">frephp.html.it
<option value="http://freasp.html.it">freasp.html.it
<option value="http://font.html.it">font.html.it
<option value="http://cgipoint.html.it" >cgipoint.html.it
</select>
</label>
cio:
Quale siti visiti?

utilizzando il tasto "ctrl" lutente pu cos effettuare delle scelte multiple.
Tramite lattributo "size" si pu specificare il numero delle voci che devono
comparire nel menu, e conseguentemente regolare laltezza del menu,
aggiungendo o togliendo la barra di scorrimento verticale.
<label>Quale siti visiti?<br>
<select name="siti" size="5" multiple>
<option value="http://www.html.it">www.html.it
<option value="http://freephp.html.it">frephp.html.it
<option value="http://freasp.html.it">freasp.html.it
<option value="http://font.html.it">font.html.it
<option value="http://cgipoint.html.it" >cgipoint.html.it
</select>
</label>
che viene cos visualizzato:
Quale siti visiti?

L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_49.htm (3 di 3)01/12/2004 22.11.47
frephp.html.it
freasp.html.it
font.html.it
cgipoint.html.it
www.html.it
frephp.html.it
freasp.html.it
font.html.it
cgipoint.html.it
Altri campi (file e hidden) | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Altri campi (file e hidden)
Potremmo avere la necessit di passare dei parametri "di servizio", senza far
percepire la loro presenza allutente. In questo caso possiamo utilizzare dei
campi nascosti, presenti allinterno del form ma invisibili allutente (ricordiamoci
sempre di specificare la coppia "nome-valore"):
<input type="hidden" name="urlDiProvenienza" value="www.html.it">
Il campo "file", consente invece di inviare un file sul server, nel caso in cui la
pagina di risposta sia stata programmata correttamente. La sintassi :
<input name="fileUtente" type="file" size="20">
che d:
"size" indica la larghezza del campo. Come si pu vedere, a fianco del
modulo compare il pulsante "sfoglia" o "browse" (a seconda della lingua del
browser dellutente).
Un esempio concreto
Riprendendo un esempio accennato in precedenza, possiamo vedere come
sia possibile consentire allutente di inviarci il contenuto di un questionario
tramite e-mail.
Dal punto di vista dellutente si aprir un messaggio che domanda se si vuole
inviare una mail, ma ci inevitabile se si utilizza questo metodo: per evitare
questa eventualit bisognerebbe infatti usare dei programmi che inviino e-mail
lato-server.
<form name="datiUtente" enctype="text/plain" method="POST" action="mailto:
tuamail@nomeDominio.it?subject=Questionario proveniente dal web">
<fieldset>
<legend>Dati Utente</legend>
<label>Nome: <input name="nome" type="text" size="20"
maxlength="30"></label>
<label>Cognome: <input name="cognome" type="text" size="20"
maxlength="30"></label>
<label>Professione: <input name="cognome" type="text" size="20"
maxlength="30"> </label>
</fieldset>
<br><br>
<fieldset>
<legend>Questionario</legend>
<label>Siti visitati:<br>
<select name="siti" size="5" multiple>
<option value="http://www.html.it">www.html.it
<option value="http://freephp.html.it">frephp.html.it
<option value="http://freasp.html.it">freasp.html.it
http://www.html.it/guida/html_50.htm (1 di 2)01/12/2004 22.11.58
cerca
Sfoglia...
Altri campi (file e hidden) | Guida HTML | HTML.it
<option value="http://font.html.it">font.html.it
<option value="http://cgipoint.html.it" >cgipoint.html.it
</select>
</label>
</fieldset>
<br><br>
<fieldset>
<legend>Campo libero</legend>
<label>Lasciami un parere:<br><textarea name="parere" cols="20"
rows="10"></textarea></label>
</fieldset>
<br><br>
<button type="reset">annulla</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="submit">invia</button>
</form>
che d luogo a questo form:

Dati Utente Nome: Cognome:
Professione:

Questionario Siti visitati:

Campo libero Lasciami un parere:

annulla invia
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_50.htm (2 di 2)01/12/2004 22.11.58
www.html.it
frephp.html.it
freasp.html.it
font.html.it
cgipoint.html.it
Approfondimenti sui form | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Approfondimenti sui form
Lattributo tabindex
Utilizzando il tasto "tab" della tastiera lutente pu passare da un campo del
form allaltro. Per varie ragioni di impaginazione lordine cos ottenuto potrebbe
per non essere quello desiderato. Grazie allattributo "tabindex" che si
applica ai campi dei moduli possibili specificare in quale ordine deve
avvenire il passaggio da un campo allaltro. Il valore di questo attributo pu
variare tra 0 e 32767. Vediamo un esempio:
<form name="datiUtente">
<fieldset >
<legend>Dati utente</legend>
<table width="300" border="1" cellspacing="0" cellpadding="5">
<tr>
<td>
<label>Nome: <input tabindex="1" name="nome" type="text"
size="30" maxlength="30"></label>
</td>
<td>
<label>Professione: <input tabindex="3" name="professione"
type="text" size="30" maxlength="100"></label>
</td>
</tr>
<tr>
<td>
<label>Cognome: <input tabindex="2" name="cognome"
type="text" size="30" maxlength="30"></label>
</td>
<td>&nbsp;</td>
</tr>
</table>
</fieldset>
</form>
che viene cos visualizzato:

Dati utente







Nome:


Professione:


http://www.html.it/guida/html_51.htm (1 di 2)01/12/2004 22.12.07
cerca
Approfondimenti sui form | Guida HTML | HTML.it
Cognome:



come si pu vedere, digitando il tasto "tab", lordine di passaggio da un
campo allaltro non quello indicato nellHTML, ma modificato secondo il
valore di "tabindex".
Il layout dei form
Se siete alle vostre prima pagine HTML, pu apparire difficile avere il controllo
perfetto dei form. Qui potete trovare due articoli che fanno al vostro caso:
G I Form: segreti e trucchi di personalizzazione
G I Form: risposte a domande frequenti
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_51.htm (2 di 2)01/12/2004 22.12.07
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design I Form: segreti e trucchi di
personalizzazione
Commenti (3) Stampa Invia
I Form: segreti e trucchi di personalizzazione
di Saibal (lorenzoforti@html.it)
mercoled 25 settembre 2002
I form sono senza dubbio uno strumento fondamentale per qualsiasi sito web. Ci
offrono la possibilit di ricevere comunicazioni di ogni tipo e rappresentano, quindi,
un canale aperto di comunicazione con i nostri visitatori.
Indipendentemente dal linguaggio utilizzato (lato server come ASP, PHP o PERL
oppure lato client come HTML) tutti i moduli hanno in comune una struttura visibile al
navigatore, scritta in html semplice. Ecco un banalissimo esempio:
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" >
<i nput t ype=" submi t " name=" submi t " val ue=" I nvi a" >
</ f or m>
Per determinare la tecnologia utilizzata baster "leggere" l'action del form e vedere a
che tipo di pagina punta (mi riferisco al tipo di estensione presente).
In questo articolo, con l'ausilio di javascript e fogli di stile, tenter di spiegare qualche
suggerimento che pu essere utile nella realizzazione "strutturale" di un qualsiasi
modulo. Per chi volesse avere una panoramica generica sulla scrittura di form pu
leggere l'Introduzione ai FORM della guida HTML.
Chiunque abbia avuto a che fare con la costruzione di un form si sar certamente
accorto della differenza che pu esserci, in alcuni casi, nella visualizzazione a video
tra Explorer e Netscape (in particolare la versione 4.x; per fortuna l'uscita di
Netscape 6.x ha decisamente ridotto il divario).
In pratica (mi rivolgo a chi non abbia mai avuto modo di verificarlo) i singoli elementi
del form vengono rappresentati con dimensioni diverse a seconda del browser
utilizzato; ci dipende, principalmente, dalla natura stessa dei navigatori che, tra le
particolarit che caratterizzano il loro DOM, hanno anche una differente
interpretazione dei campi.
Penso sia capitato a molti di realizzare un bel modulo (perfettamente integrato con il
resto del sito se visto con Explorer) e di scoprire, invece, che con Netscape la grafica
veniva "stravolta" da qualche textarea apparentemente troppo lunga.
Uno degli obiettivi del tutorial sar proprio quello di cercare di ovviare a questo
problema. Personalmente conosco due ottime soluzioni per riuscire ad ottenere
moduli di dimensioni a video praticamente identiche, sia con IE che con NN: un
metodo utilizza esclusivamente javascript mentre l'altro si avvale dei css.
Prima di continuare, per, vorrei dare risposta ad una domanda che sembra essere

http://pro.html.it/articoli/id_235/idcat_31/pro.html (1 di 3)01/12/2004 22.12.18
Cerca
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
molto diffusa (almeno tra chi alle prime armi): come eliminare lo spazio lasciato da
un form quando inserito in una tabella? (problema che peraltro non si presenta con
Netscape 6.x).
Per capire a cosa mi riferisco guardate questo esempio con Explorer o Netscape 4.x:
Esempio numero 1
Ho impostato appositamente il bordo della tabella ad "1" per far notare che tra il
bottone di submit e la fine della tabella stessa c' uno spazio ben visibile anche se,
nel codice, non abbiamo inserito nessun <br> dopo la chiusura del tag </form>.
Ebbene, probabilmente i puristi dell'html storceranno il naso nel leggere quanto sto
per scrivere ma, come spesso accade, il fine giustifica i mezzi; provate a riscrivere la
stessa pagina spostando i tag di apertura e di chiusura del form tra i tag <tr> della
tabella, in questo modo:
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >
<ht ml >
<head>
<t i t l e>Spazi o f or m</ t i t l e>
</ head>
<body>
<t abl e bor der =" 1" cel l paddi ng=" 0" cel l spaci ng=" 0" >
<t r >
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<t d>
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ t d>
</ f or m>
</ t r >
</ t abl e>
</ body>
</ ht ml >
Qui si trova l'esempio pratico: Esempio numero 2
Vi sarete accorti che scomparso l'antiestetico spazio che poteva rovinarci il layout
del sito. Se, per scrivere questo codice, utilizzate programmi come Homesite o
Dreamweaver, probabile che vi venga segnalato un errore... ma personalmente
non mi preoccuperei pi di tanto; vero che, come gi detto, il metodo utilizzato non
del tutto ortodosso per le specifiche del W3C ma, aggiungerei anche, che i broswer
attualmente in circolazione (compreso l'odiato/amato Netscape 4.x) non hanno mai
dato problemi di visualizzazione.
Se invece non ne volete proprio sapere di andare contro le specifiche ufficiali
utilizzate questo semplice foglio di stile (da inserire tra i tag <head> della pagina):
<st yl e t ype=" t ext / css" >
f or m{mar gi n- bot t om: 0; }
</ st yl e>
Inutile aggiungere che il css non funzioner con Netscape 4.x .
Torniamo adesso al problema di come creare moduli "universalmente" uguali,
indipendentemente dal browser utilizzato.
La prima soluzione utilizzer solamente javascript; personalmente non il metodo
che preferisco (vi accorgerete in seguito della comodit dei css) ma potrebbe essere
utile a chi non ha molta dimestichezza con i fogli di stile.
[ 1 2 3 4 ]
[ P a g i n a s u c c e s s i v a ]

http://pro.html.it/articoli/id_235/idcat_31/pro.html (2 di 3)01/12/2004 22.12.18
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_235/idcat_31/pro.html (3 di 3)01/12/2004 22.12.18
vota
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design I Form: segreti e trucchi di
personalizzazione
Commenti (3) Stampa Invia
Supponiamo di dover inserire un form in una pagina qualsiasi. Solitamente viene
utilizzato il browser predefinito per testare la pagina e, successivamente, si passa
alla visualizzazione con un altro navigatore per le "rifiniture" generali. Se utilizzate
principalmente Netscape non dovrete cambiare metodo di lavoro mentre, se siete
affezionati di casa Microsoft, per questa volta vi chiedo di costruire il modulo
utilizzando come riferimento Netscape.
molto importante che utilizziate il parametro size="valore" all'interno di ogni input,
ad esempio:
<i nput name=" pr ova" t ype=" t ext " val ue=" " si ze=" 15" >
Una volta ottenuto un buon risultato grafico con NN, possiamo passare
all'introduzione del javascript che far il resto del lavoro.
Il codice che sto per scrivere ha effetto solo su Explorer e ridimensiona
automaticamente, in base ad una percentuale scelta da noi, tutti gli elementi di un
modulo.
Tra i tag <head> della pagina che contiene il form inseriamo quanto segue:
<SCRI PT LANGUAGE=" J avaScr i pt " >
f unct i on r i di mensi ona( decNum) {
i f ( navi gat or . appName ! = ' Net scape' ) {
var i ncr Val =" . " +decNum;
f or ( i =0; i <document . f or ms. l engt h; i ++) {
f or ( j =0; j <document . f or ms[ i ] . el ement s. l engt h; j ++) {
var f or mObj =document . f or ms[ i ] . el ement s[ j ] ;
i f ( f or mObj . t ype. t oLower Case( ) == " t ext " | | f or mObj . t ype. t oLower Case
( ) == " passwor d" | | f or mObj . t ype. t oLower Case( ) == " f i l e" ) {
f or mi ncr =f or mObj . si ze*eval ( i ncr Val ) ;
f or mObj . si ze=f or mObj . si ze+f or mi ncr ;
}el se i f ( document . f or ms[ i ] . el ement s[ j ] . t ype. t oLower Case( ) ==
" t ext ar ea" ) {
f or mi ncr =f or mObj . col s*eval ( i ncr Val / 2) ;
f or mObj . col s=f or mObj . col s+f or mi ncr ;
}
}
}
}
}
</ scr i pt >
Successivamente, nel <body>, inseriamo il nostro modulo:
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" >
<i nput t ype=" submi t " name=" submi t " val ue=" I nvi a" >
</ f or m>

http://pro.html.it/articoli/id_235/idcat_31/pag_2/pag.html (1 di 2)01/12/2004 22.12.30
Cerca
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
Infine, immediatamente dopo il tag di chiusura </form>, scriviamo questa stringa che
ha la funzione di richiamare la funzione "ridimensiona" del javascript:
<SCRI PT LANGUAGE=" J avaScr i pt " >
r i di mensi ona( ' 15' ) ;
</ scr i pt >
Il numero "15" la percentuale di ridimensionamento che pu essere cambiata in
base alle esigenze (solitamente un valore compreso tra 15 e 25 va pi che bene).
Supponiamo anche di avere pi di un form nella stessa pagina e di volerli
ridimensionare tutti.
Le strade che possiamo seguire sono principalmente due:
1. Incollare una sola volta questo codice a fine pagina:
<SCRIPT LANGUAGE="JavaScript">
ridimensiona('15');
</script>
2. Mettere lo stesso codice dopo ogni form
Per vedere le modifiche apportate dallo script possiamo visualizzare i primi due
esempi:
G Esempio numero 3 (senza utilizzo del javascript)
G Esempio numero 4 (con utilizzo del javascript)
Il primo documento (da visualizzare con i vari browser) stato ottimizzato per
Netscape e non stato inserito il codice Javascript.
Visualizzando la stessa pagina con IE noteremo che i campi del form sono pi corti
rispetto a quelli visti precedentemente con NN.
Utilizzando il codice, nell'esempio numero 4, possiamo notare come i campi siamo
molto simili in lunghezza. stata usata una percentuale del 15% ma possibile
impostare un valore diverso. Cos facendo il risultato ottenuto nella visualizzazione
"a video" quasi identico.
Lo script, in particolare, "agisce" su determinati elementi:
G Campi Text
G Campi Password
G Campi File
G Textarea
Se da una parte questo javascript ci aiuta a migliorare l'aspetto dei moduli, dall'altra
dobbiamo rilevare alcune controindicazioni derivanti dal suo utilizzo.
Prima di tutto siamo costretti ad inserire diverse righe di codice in tutte le pagine
contenenti i form; inoltre potremmo avere ancora delle differenze estetiche visto che
il javascript viene totalmente ignorato da Netscape 6.x.
Possiamo dire che questa, forse, la migliore soluzione per chi abbia ancora
bisogno di una perfetta compatibilit con l'ormai obsoleto Netscape 4.x.
[ 1 2 3 4 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_235/idcat_31/pag_2/pag.html (2 di 2)01/12/2004 22.12.30
vota
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design I Form: segreti e trucchi di
personalizzazione
Commenti (3) Stampa Invia
Se invece Netscape 4.x non tra i nostri browser prioritari, possiamo utilizzare il
secondo metodo che fa uso dei fogli di stile.
Personalmente la soluzione che preferisco per vari motivi (motivi che restano
comunque soggettivi e non assoluti).
Con i CSS possiamo avere un controllo totale sull'aspetto dei campi; il codice della
pagina decisamente pulito; possiamo aggiungere un tocco di originalit al nostro
lavoro (vedremo poi come); tutte le eventuali modifiche sono veloci e non richiedono
molto tempo.
Anche se alcuni attributi (come width per esempio) non vengono interpretati da
Netscape 4.x, si pu ovviare facilmente a questo problema con un piccolo
stratagemma e, di fatto, creare dei moduli esteticamente cross-browser.
Partiamo dal precedente modulo base:
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" >
<i nput t ype=" submi t " name=" submi t " val ue=" I nvi a" >
</ f or m>
Utilizzato cos com' si ripresenter il solito problema: il campo TEXT sar, a video,
leggermente pi lungo in Netscape 4.x rispetto ad Explorer e a Netscape 6.x.
Esempio numero 5
Per risolvere definitivamente questo inconveniente giunto il momento di inserire
questi CSS tra i tag <head> della pagina:
<st yl e>
. campi f or m{wi dt h: 55mm; }
</ st yl e>
Non facciamo altro che impostare una classe (chiamata in questo caso
"campiform") che determina, in modo univoco, la lunghezza dei campi mediante
l'attributo width dei fogli di stile.
Questo CSS sar interpretato correttamente da Explorer e NN 6.x o sup. (con i quali
i campi saranno di fatto identici) mentre, apparentemente, rester irrisolto il problema
Netscape 4.x che continuer a restituire dei campi pi lunghi del normale.
Se per abbiamo gi detto che l'attributo width non viene letto dall'obsoleto NN 4.x,
ci non vuol dire che non sia possibile utilizzare l'attributo size del campo; anzi:
proprio l'utilizzo congiunto di questi due parametri la chiave di volta per risolvere il
problema iniziale.
I browser pi avanzati prenderanno in esame solo i CSS, mentre i browser pi
vecchi interpreteranno solo l'attributo size. Giocando e prendendo un po' di

http://pro.html.it/articoli/id_235/idcat_31/pag_3/pag.html (1 di 2)01/12/2004 22.12.39
Cerca
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
confidenza con le misure sar estremamente semplice ottenere dei form molto simili
che non stravolgeranno il layout.
Vi presento un esempio che mi servir per dimostrare ci che abbiamo detto finora. Il
modulo di seguito presentato praticamente identico se visto con i tre browser finora
analizzati:
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >
<ht ml >
<head>
<t i t l e>For m</ t i t l e>
<st yl e>
. campi f or m{wi dt h: 55mm; }
</ st yl e>
</ head>
<body>
<t abl e bor der =" 1" cel l paddi ng=" 0" cel l spaci ng=" 0" >
<t r >
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<t d>
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ t d>
</ f or m>
</ t r >
</ t abl e>
</ body>
</ ht ml >
Per richiamare la classe non abbiamo fatto altro che inserire class="campiform"
all'interno del tag del campo interessato.
Explorer e Netscape 6.x, come gi detto, prenderanno come riferimento l'attributo
width dei css, mentre il "caro" e vecchio NN 4.x, non riconoscendo quel foglio di
stile, far riferimento al size presente nel codice. L'unica cosa che ci rester da fare
sar quella di trovare il giusto rapporto tra i millimetri dei css ed il size del campo.
Esempio numero 6
Dopo aver ottenuto dei form crossbrowser potremmo gi essere soddisfatti dei
risultati raggiunti; sono sicuro, per, che non avete voglia di fermarvi qui e siete
esigenti almeno quanto me. Si potrebbe anche pensare di dare un tocco di originalit
ai moduli che, diciamoci la verit, sono decisamente "anonimi" nella veste originale.
Giriamo pagina e vediamo subito qualche esempio pi raffinato.
[ 1 2 3 4 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_235/idcat_31/pag_3/pag.html (2 di 2)01/12/2004 22.12.39
vota
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design I Form: segreti e trucchi di
personalizzazione
Commenti (3) Stampa Invia
Pu capitare, ad esempio, di aver costruito un gran bel sito (magari con grafica e
testo particolarmente curati) e poi vedere un form che "cozza" decisamente con il
resto delle pagine per questioni di estetica.
Ricorrendo sempre ai fogli di stile (vi starete accorgendo che, per un webmaster,
veramente indispensabile conoscerli bene) possiamo determinare il tipo di font, la
grandezza ed il colore del testo. Prendiamo il foglio di stile utilizzato in precedenza e
modifichiamo la classe "campiform" in questa maniera:
<st yl e>
. campi f or m{wi dt h: 55mm; f ont - f ami l y: ver dana, t ahoma, ar i al ; col or :
r ed; f ont - si ze: 10px; }
</ st yl e>
Abbiamo ottenuto un campo del form che:
G utilizzer una famiglia di font prestabilita (in questo caso Verdana, Tahoma e Arial)
G avr il testo in colore rosso
G avr il testo di grandezza 10px
Anche se non strettamente legato all'argomento moduli vorrei darvi un piccolo
suggerimento sull'utilizzo dei css in questa circostanza... un trick come direbbero i
professionisti :) (a tal proposito ringrazio Kuba, un utente del nostro forum).
Nell'attributo size utilizzate sempre, come unit di misura, i px e non i pt. I punti,
infatti, sono sempre relativi mentre i pixel sono una misura assoluta (e questo ci
aiuta ad avere un pieno controllo sul testo).
Ma non finisce qui: i browser di casa Netscape (ed in particolare Navigator 4.x,
anche se ci vuole coraggio a chiamarlo ancora browser) interpretano in modo
differente le misure in pixel rispetto ad Explorer. Nel particolare, un testo di 10px
sar sempre pi piccolo (di un pixel circa) se visto con NN rispetto ad IE ... come
risolvere la questione?
presto detto. Anzich scrivere il canonico font-size: 10px; utilizzeremo font-size:
10.75px; Il trucco sta proprio nell'usare numeri decimali separati da un punto. IE
"legger" solo l'intero a sinistra del separatore, ignorando il resto (quindi avremo
10px); Netscape, invece, interpreter il numero nel suo valore totale (10.75 appunto)
restituendo un testo praticamente uguale a quello restituito da IE.
Se decidiamo di usare questo metodo ricordiamoci di rivedere le misure che
avevamo dato all'attributo size per Netscape 4.x.
Ok... ora che siamo diventati abili anche nel gestire il testo nei moduli possiamo
passare a qualcosa di puramente estetico. Uno dei problemi principali dei campi dei
form il fatto che poco si integrano con le pagine. C' un modo molto semplice per
tentare di rendere i campi pi gradevoli e farli "fondere" con il resto del sito... e
questo risultato ottenuto sempre grazie ai fogli di stile.

http://pro.html.it/articoli/id_235/idcat_31/pag_4/pag.html (1 di 5)01/12/2004 22.12.48
Cerca
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
Ancora una volta riprendiamo la classe "campiform" e aggiungiamo quanto segue:
G border-style: solid; border-color: #006699; border-width: 1; background:
#f0f0f0;
quindi otterremo:
<st yl e>
. campi f or m{
wi dt h: 55mm;
f ont - f ami l y: ver dana, t ahoma, ar i al ;
col or : r ed;
f ont - si ze: 10. 75px;
bor der - st yl e: sol i d;
bor der - col or : #006699;
bor der - wi dt h: 1;
backgr ound: #f 0f 0f 0;
}
</ st yl e>
Provate e visualizzare l'esempio numero 7... carino eh? In questo modo diamo
sicuramente un tocco di originalit ai nostri barbosi moduli e questi fogli di stile vi
permetteranno di integrare perfettamente i campi con il bel layout che avete costruito
per il vostro sito.
Passiamo alle spiegazioni "tecniche": per dare l'aspetto "piatto" ai campi abbiamo
utilizzato queste quattro voci:
G border-style: solid; il tipo di bordo; se avete IE 5.5 o sup. provate anche dashed
al posto di solid
G border-color: #006699; il colore del bordo
G border-width: 1; lo spessore del bordo; dire che 1 va pi che bene
G background: #f0f0f0; il colore di sfondo del campo
Prima di andare avanti, per, soffermiamoci sulla compatibilit di questo css. Non si
riscontrano problemi con Explorer a partire dalla versione 5.x; Opera (nelle versioni
pi recenti) non ha dato particolari problemi; Netscape 6.x e sup. interpreta lo stile in
modo adeguato ma potrebbe lasciare una sorta di piccolo "alone" intorno al campo
(se avete ancora la versione 6.x, non la 7 che io giudico ottima). Se cos fosse
levate, dal campo input, l'attributo type="text" e tutto diventer uguale ad Explorer.
Bene, chi manca all'appello? Credo che ormai la disperazione abbia lasciato spazio
alla rassegnazione: il "caro" Netscape 4.x non riconosce quel tipo di stili.
Probabilmente non ve ne importer nulla ma questa volta c' un ulteriore problema.
Provate a visualizzare l'esempio precedente con Navigator: non solo non interpreta
lo stile in modo appropriato, ma crea anche dei problemi a livello grafico. Questa
volta abbiamo un vero e proprio problema di incompatibilit che va risolto.
Non sono di certo il mago Silvan visto che non ho inventato nulla, ma dal mio piccolo
cilindo magico posso tirare fuori due semplici soluzioni.
La prima vi rimanda all'articolo Riconosciamo i browser con Javascript che ho scritto
qualche tempo fa. In pratica si tratta di creare due tipi diversi di css esterni ed usarli
dopo aver riconosciuto il tipo di browser attraverso l'aiuto di javascript. Potremo,
quindi, scrivere dei CSS ad hoc che vadano bene per Netscape, ed altri che vadano
bene per tutti gli altri.
La seconda soluzione, invece, pi veloce e forse anche pi raffinata. Il W3C, a
partire da CSS1, ha introdotto un piccolo attributo chiamato
G @import url();
Molto brevemente spiego il suo funzionamento: "@import url();" serve ad importare,
nella pagina, css esterni... ha la stessa funzione del tag
<l i nk r el =" st yl esheet " t ype=" t ext / css" hr ef =" xxx. css" >
http://pro.html.it/articoli/id_235/idcat_31/pag_4/pag.html (2 di 5)01/12/2004 22.12.48
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
ma con una variante: possibile importare dei css esterni da un altro css esterno; ed
proprio questa caratteristica che noi sfrutteremo. Forse questa l'unica volta in cui
saremo grati del fatto che NN4.x non interpreta correttamente un determinato
attributo dei css.
Supponiamo di avere questa pagina:
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >
<ht ml >
<head>
<t i t l e>Pr ova i mpor t </ t i t l e>
<st yl e>
. campi f or m{
wi dt h: 55mm;
f ont - f ami l y: ver dana, t ahoma, ar i al ;
col or : r ed;
f ont - si ze: 10px;
bor der - st yl e: sol i d;
bor der - col or : #006699;
bor der - wi dt h: 1;
backgr ound: #f 0f 0f 0;
}
</ st yl e>
</ head>
<body>
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ f or m>
</ body>
</ ht ml >
Abbiamo appena detto che una pagina di questo tipo non sarebbe compatibile con
Netscape 4.x perch alcuni attributi della classe "campiform" darebbero problemi.
A questo punto eliminiamo le righe incriminate e mettiamole in un file .css esterno,
avendo cura di lasciare invariato il nome della classe (in questo caso "campiform").
In pratica apriamo il blocco note, incolliamo quanto segue (senza altre aggiunte) e
salviamo con il nome di "stile.css":
. campi f or m{
bor der - st yl e: sol i d;
bor der - col or : #006699;
bor der - wi dt h: 1;
backgr ound: #f 0f 0f 0;
}
Adesso riprendiamo la pagina precedente e modifichiamola in questa maniera:
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >
<ht ml >
<head>
<t i t l e>Pr ova i mpor t </ t i t l e>
<st yl e>
/ * usi amo @i mpor t pr i ma di ogni al t r a cl asse */
@i mpor t ur l ( ' st i l e. css' ) ;
/ *i mpost i amo l a cl asse */
. campi f or m{
wi dt h: 55mm;
f ont - f ami l y: ver dana, t ahoma, ar i al ;
col or : r ed;
f ont - si ze: 10px;
}
</ st yl e>
</ head>
<body>
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
http://pro.html.it/articoli/id_235/idcat_31/pag_4/pag.html (3 di 5)01/12/2004 22.12.48
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ f or m>
</ body>
</ ht ml >
Esempio numero 8
Cosa abbiamo fatto? Semplice! Abbiamo impostato una classe "campiform"
scegliendo il tipo di font, il colore e la grandezza del testo. Questa classe pu essere
definita "globale" visto che sar interpretata correttamente da tutti i browser.
Prima della classe, per, abbiamo usato @import url(); per assegnare altri attributi
alla classe "campiform".
Netscape 4.x ignorer completamente il css esterno, mentre i browser pi evoluti
importeranno correttamente il foglio di stile esterno e, in pratica, "fonderanno"
insieme le due classi con lo stesso nome come se fosse una unica.
L'unico accorgimento da tenere bene a mente che @import url(); deve essere
messo prima di ogni altra classe. In verit non darebbe problemi con IE neanche
se fosse messo alla fine ma Netscape 6.x e sup. non fonderebbe le due classi...
quindi, per non avere problemi, mettiamolo all'inizio.
Se invece avete gi un foglio di stile esterno il procedimento molto simile. Nel
primo css, che importate con un classico <link rel="stylesheet" type="text/css"
href="xxx.css">, create la classe "campiform" con gli attributi validi per tutti i
browser; in testa al file, per, usate questa riga per importare un secondo foglio di
stile esterno contenente altri attributi validi per i browser pi avanzati:
G @import url('secondo_stile.css');
Concludo la parte relativa alla grafica dei form con un'ulteriore personalizzazione
riguardante, questa volta, i bottoni submit. possibile creare una sorta di "rollover"
sui bottoni del form con l'aiuto congiunto di javascript e css.
La prima cosa da fare creare due classi, molto simili nel testo, ma differenti nei
colori.
Ad esempio, tra i tag <head> della pagina, inseriremo quanto segue:
<st yl e t ype=" t ext / css" >
/ * i mpor t i amo un css est er no */
@i mpor t ur l ( ' st i l e. css' ) ;
/ *i mpost i amo l a pr i ma cl asse */
. campi f or m{
wi dt h: 55mm;
f ont - f ami l y: ver dana, t ahoma, ar i al ;
col or : r ed;
f ont - si ze: 10px;
}
/ *i mpost i amo l a seconda cl asse */
. campi f or m2 {
wi dt h: 55mm;
f ont - f ami l y: ver dana, t ahoma, ar i al ;
col or : whi t e;
f ont - si ze: 10px;
}
</ st yl e>
Il css esterno invece conterr quanto segue:
http://pro.html.it/articoli/id_235/idcat_31/pag_4/pag.html (4 di 5)01/12/2004 22.12.48
I Form: segreti e trucchi di personalizzazione | Web Design | PRO.HTML.IT
. campi f or m{
bor der - st yl e: sol i d;
bor der - col or : #006699;
bor der - wi dt h: 1;
backgr ound: #f 0f 0f 0;
}
. campi f or m2 {
bor der - st yl e: sol i d;
bor der - col or : #333333;
bor der - wi dt h: 1;
backgr ound: #c6c6c6;
}
Il bottone submit, sar cos impostato:
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi "
cl ass=" campi f or m" onMouseOver =" t hi s. cl assName=' campi f or m2' "
onmouseOut =" t hi s. cl assName=' campi f or m' " >
</ f or m>
semplice da notare l'aggiunta fatta:
onMouseOver="this.className='campiform2'" onmouseOut="this.
className='campiform'"
Con questa semplice riga impostiamo la classe da utilizzare sul bottone in base al
comportamente del mouse: allo stato normale viene utilizzata la prima classe; se il
puntatore va sopra il bottone viene usata la seconda classe; una volta che il mouse
si allontanato ritorniamo alla classe iniziale. A voi lascio il divertimento di giocare
un po' con la fantasia.
[ 1 2 3 4 ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_235/idcat_31/pag_4/pag.html (5 di 5)01/12/2004 22.12.48
vota
I Form: risposte a domande frequenti | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design I Form: risposte a domande frequenti
Commenti (4) Stampa Invia
I Form: risposte a domande frequenti
di Saibal (lorenzoforti@html.it)
luned 30 settembre 2002
A chi ha letto l'articolo I Form: segreti e trucchi di personalizzazione far comodo
avere un elenco di risposte alle domande pi comuni sui form... spero vi siano
d'aiuto.
Com' possibile utilizzare un'immagine per inviare un form?
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<a hr ef =" j avascr i pt : document . sai bal . submi t ( ) " ><i mg sr c=" i mmagi ne. gi f "
bor der =" 0" ></ a>
</ f or m>
Al posto di "saibal" dovete utilizzare il nome che avete dato al form. Se per esempio
lo avete chiamato "prova" il collegamento dell'immagine diventer:
<a hr ef =" j avascr i pt : document . pr ova. submi t ( ) " ><i mg sr c=" i mmagi ne. gi f "
bor der =" 0" ></ a>
Ovviamente possibile utilizzare un'immagine anche per resettare un modulo:
<f or mname=" sai bal " act i on=" . . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<a hr ef =" j avascr i pt : document . sai bal . r eset ( ) " ><i mg sr c=" i mmagi ne. gi f "
bor der =" 0" ></ a>
</ f or m>
Infine ricordo che possibile sostituire l'immagine con del semplice testo.
Come posso dare il focus automaticamente ad un campo una volta caricata la
pagina?
Ci sono diversi metodi, ma il pi veloce e breve che conosco questo:
<scr i pt l anguage=" J avaScr i pt " >
<! - -
document . sai bal . pr ova. f ocus( ) ;
/ / - - >
</ scr i pt >
Va inserito direttamente dopo il tag </form>. "saibal" e "prova" vanno sostituiti

http://pro.html.it/articoli/id_237/idcat_31/pro.html (1 di 3)01/12/2004 22.13.27
Cerca
I Form: risposte a domande frequenti | Web Design | PRO.HTML.IT
rispettivamente con il nome del form e del campo.
Posso utilizzare un form in html per ricevere dei messaggi? Posso anche
creare una pagina di ringraziamento?
Premetto subito che la soluzione migliore, in questi casi, quella di usare linguaggi
lato server come CGI (il conosciutissimo Formmail), ASP o PHP. Se non potete
utilizzare questi metodi sappiate che c' una soluzione, anche se non sempre
affidabile.
Innanzitutto, visto che utilizziamo HTML che lato client, molto dipender
dall'utente. Infatti baster che il visitatore non abbia ben configurato il programma di
posta e l'email non arriver. Inoltre il funzionamento limitato ad Outlook Express:
chiunque abbia un altro programma di posta vedr aprirsi una normalissa email
pronta da spedire.
Se tutto questo vi pu andar bene vi scrivo un classico esempio di modulo:
<f or mname=" modul o" met hod=" post " act i on=" mai l t o:
vost r oi ndi r i zzo@pr ovi der . i t " ENCTYPE=" t ext / pl ai n" >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ f or m>
importante inserire la stringa ENCTYPE="text/plain" per essere sicuri che
riceveremo un messaggio leggibile.
Se volete una pagina di conferma dopo che l'utente vi ha inviato il modulo c' un
piccolo espediente anche se tecnicamente non possibile. Prima per facciamo una
breve precisazione.
Nei moduli che utilizzano linguaggi lato server la pagina di conferma viene mostrata
se, effettivamente, l'invio dell'email andato a buon fine... in poche parole c' un
controllo reale sui dati inviati. Questo controllo non pu essere fatto nei moduli html
(che abbiamo detto essere lato client) ma, solamente vezzo estetico, pu essere
effettuato un redirect ad una pagina di ringraziamento. Il reindirizzamento, per,
avviene sempre e comunque indipendentemente dall'esito positivo o negativo
dell'invio. Pu accadere quindi che, anche se l'utente non riuscito ad inviare nulla,
venga mostrata una bella pagina con scritto: "Grazie per avermi mandato un
messaggio. Sei un amico!!".
Se non avete paura di essere insultati dai vostri utenti per questi possibili problemi
ecco come fare un modulo che reindirizza ad una pagina predefinita dopo il SUBMIT:
<f or mname=" modul o" met hod=" post " act i on=" mai l t o:
vost r oi ndi r i zzo@pr ovi der . i t " ENCTYPE=" t ext / pl ai n" onSubmi t =" l ocat i on.
hr ef =' pagi na. ht m' " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" cl ass=" campi f or m" >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ f or m>
Non dovrete fare altro che inserire l'url (relativo o assoluto) della pagina nella stringa:
onSubmi t =" l ocat i on. hr ef =' pagi na. ht m' "
[ 1 2 ]
[ P a g i n a s u c c e s s i v a ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
http://pro.html.it/articoli/id_237/idcat_31/pro.html (2 di 3)01/12/2004 22.13.27
vota
I Form: risposte a domande frequenti | Web Design | PRO.HTML.IT
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_237/idcat_31/pro.html (3 di 3)01/12/2004 22.13.27
I Form: risposte a domande frequenti | Web Design | PRO.HTML.IT

HTML.IT| CORSI IN AULA| ACCESSO FREE| CD-ROM| LIBRI| WEBTOOL DOWNLOAD| FORUM| MLIST| NEWSLETTER.IT
ADSL| ASP| B2B| BASIC| CREA| FLASH-MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA


Home page
Pillole
Contenuti e Web
Writing
Grafica
Leggi e Lavoro
Linguaggi
Multimedia e 3D
Software
Web Design
Web Promotion
Forum di discussione
Area Download
Torna ad HTML.it
I tuoi preferiti
Elimina gli articoli
letti
Elimina tutti gli
articoli
Articoli in rilievo
G Ripulire
immagini digitali
G Data e ora in
Javascript
G Galleria con
effetto rullino
G Proteggere
pagine con
password
G Po-up accessibili
Pillole in rilievo
G Rilevare il
Service Pack 2 di
XP
G Aprire un link in
una finestra pop-
up
G Disabilitare la
Image Toolbar di
Explorer 6
G Disabilitare il
tasto destro del
mouse
Web Design Ricerca:
Home Web Design Web Design I Form: risposte a domande frequenti
Commenti (4) Stampa Invia
possibile limitare i caratteri inseribili di una textarea?
Ovviamente s... e sempre grazie a javascript. Ecco come sar strutturata la pagina:
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" >
<ht ml >
<head>
<t i t l e>Li mi t a Text ar ea</ t i t l e>
<SCRI PT LANGUAGE=" J avaScr i pt " >
<! - - Begi n
f unct i on t ext Count er ( f i el d, count f i el d, maxl i mi t ) {
i f ( f i el d. val ue. l engt h > maxl i mi t )
f i el d. val ue = f i el d. val ue. subst r i ng( 0, maxl i mi t ) ;
el se
count f i el d. val ue = maxl i mi t - f i el d. val ue. l engt h;
}
/ / End - - >
</ scr i pt >
</ head>
<body>
<f or mname=" sai bal " act i on=" . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" >
<t ext ar ea name=" t ar ea" r ows=" 5" col s=" 20" onKeyDown=" t ext Count er
( document . sai bal . t ar ea, document . sai bal . most r a, 100) ; "
onKeyUp=" t ext Count er ( document . sai bal . t ar ea, document . sai bal .
most r a, 100) ; " ></ t ext ar ea>
<i nput r eadonl y t ype=" t ext " name=" most r a" si ze=" 3" val ue=" 100" > Max
Car at t er i
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ f or m>
</ body>
</ ht ml >
Il javascript tra i tag <head> non va toccato; ci che dobbiamo personalizzare sono
le due stringhe da inserire nel tag textarea:
G onKeyDown="textCounter(document.saibal.tarea,document.saibal.mostra,100);"
G onKeyUp="textCounter(document.saibal.tarea,onKeyDown="textCounter
(document.saibal.tarea,document.saibal.mostra,100);" onKeyUp="textCounter
(document.saibal.tarea,document.saibal.mostra,100);">);">
I valori in neretto sono quelli da personalizzare:
G saibal il nome del form
G tarea il nome della textarea

http://pro.html.it/articoli/id_237/idcat_31/pag_2/pag.html (1 di 2)01/12/2004 22.13.41
Cerca
I Form: risposte a domande frequenti | Web Design | PRO.HTML.IT
G mostra il nome del piccolo box che contiene i caratteri rimanenti
G 100 il numero dei caratteri da conteggiare. Il valore deve essere uguale in tutte
e due le stringhe.
possibile rendere un campo non modificabile anche con Netscape 4.x?
Come sapete l'attributo "readonly" valido solo per Explorer e, a partire dalla
versione 6, anche per per Netscape. Ma ovviamente Navigator 4.x non cos
generoso con noi quindi, ancora una volta, bisogno ricorrere a javascript.
Personalmente conosco due soluzioni: a voi la scelta di quella che vi piace di pi.
La prima, proposta da Massimo61 sul nostro forum, decisamente veloce e utilizza
l'istruzione onFocus="this.blur()" in questa maniera:
<f or mname=" sai bal " act i on=" . . . . " met hod=" post " >
<i nput name=" pr ova" t ype=" t ext " si ze=" 25" onFocus=" t hi s. bl ur ( ) " >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ f or m>
La seconda pi lunga ma ugualmente funzionale:
<f or mname=" sai bal " act i on=" . . . . " met hod=" post " >
<i nput t ype=" t ext " name=" pr ova" val ue=" non modi f i cabi l e" onFocus=" ( t hi s.
di sabl ed) ; { t hi s. val ue = saveVal ue; set Ti meout ( ' document . sai bal . pr ova.
bl ur ( ) ' , 1) ; } " >
<i nput t ype=" submi t " name=" submi t " val ue=" Cl i cca & Godi " >
</ f or m>
E, dopo il tag di chiusura del form, inseriamo questo breve codice:
<scr i pt l anguage=" J avaScr i pt " >
<! - -
document . nomef or m. t ext . di sabl ed = t r ue;
saveVal ue=" non modi f i cabi l e" ;
/ / - - >
</ scr i pt >
Anche in questo caso ricordo di personalizzare le stringhe document.saibal.prova
con il nome del proprio modulo e del proprio campo.
Non ho di certo esaurito l'argomento ma spero di aver dato dei buoni spunti per
dimostrare che i moduli, alla fine, non sono cos difficili da gestire come si crede.
Con qualche nozione in pi di css, javascript e html possiamo rendere un modulo
perfettamente visibile anche con Netscape 4.x e vi assicuro che, se siete riusciti a
superare lo stress creato da quello che alcune persone chiamano browser, siete
pronti per affrontare qualsiasi cosa.
[ 1 2 ]

Torna su Commenta
Ritieni questo articolo:
[ I n d i c e a r t i c o l i ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://pro.html.it/articoli/id_237/idcat_31/pag_2/pag.html (2 di 2)01/12/2004 22.13.41
vota
Premessa: il tag object | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Premessa: il tag object
Se volete inserire file multimediali (audio e video), oppure effetti grafici
particolari scritti in qualche linguaggio di programmazione, ricordatevi sempre
di fare attenzione al peso dei file che state inserendo. Siamo infatti sul web e
dunque tutti i file, in un modo o nellaltro, dovranno essere scaricati dal
visitatore del vostro sito per essere correttamente visualizzati.
Bisogna anche considerare che - sebbene la banda a disposizione del
pubblico si stia allargando grazie all'adsl e alle fibre ottiche - non tutte le zone
sono "coperte" da questa tecnologia, e la maggioranza dei visitatori naviga
ancora con modem analogici da 56 Kb.
In ogni caso - banda larga o no - inserire ad esempio un file mp3 da 3 Mb
come musica di sottofondo sarebbe esagerato anche per una connessione
adsl. Quindi: attenzione al peso dei file che inserite!. Per approfondimenti vi
consigliamo la lettura della lezione dedicata alla leggerezza dei siti Web della
nostra guida all'Usabilit.
Nelle lezioni successive ci occuperemo di come includere in pagine Web
elementi multimediali o file di scripting. Per chi fosse interessato alle inclusioni
di file HTML in file HTML rimandiamo all'articolo Come includere codice
esterno nelle pagine web. Per chi volesse invece includere del codice XML in
pagine HTML vi consigliamo la lettura dell'articolo sulle XML Data Islands.
La maggior parte dei file multimediali che vedremo nel corso delle lezioni si
inserisce allinterno delle pagine con il tag <object>, che il tag corretto
secondo le indicazioni del W3C per inserire elementi multimediali, tanto che
nelle specifiche dell'XHTML 2 (levoluzione dellHTML) persino le immagini
devono essere inserite tramite questo tag.
Un altro tag che spesso viene utilizzato per la multimedialit <embed>: si
tratta di un elemento che non nelle specifiche del W3C, ma che stato a
lungo utilizzato, perch supportato sia da Internet Explorer, sia da Netscape
Navigator, a differenza di <object>, che ha dei problemi di compatibilit.
Vediamo i principali attributi di <object>:
data

questo attributo pu essere utilizzato per specificare il
percorso delloggetto da inserire nella pagina
classid

d indicazioni sul percorso delloggetto, ed utile per
identificare il tipo di plugin con cui eseguire loggetto
codebase serve per indicare lURL di base, a cui il codice indicato
in "data" o in "classid" fa riferimento
type il tipo di oggetto da inserire (pi esattamente il
MIME type delloggetto)
archive

si pu indicare una lista di URL, separati da virgola,
contenti risorse relative alloggetto inserito
width, height se necessario, si possono indicare una larghezza e
unaltezza
http://www.html.it/guida/html_52.htm (1 di 2)01/12/2004 22.14.02
cerca
Premessa: il tag object | Guida HTML | HTML.it
Allinterno del tag <object> possibile specificare una sintassi alternativa per i
browser che non leggono questo tag. Inoltre allinterno del tag possibile
specificare eventuali parametri necessari allesecuzione delloggetto.
In molti casi il tag object si occupa di attivare un "plug-in", cio un componente
aggiuntivo che si integra nel browser, per lo pi fornito dal produttore del
software multimediale (es. Flash), in grado di leggere il file multimediale
(qualsiasi esso sia).
Vedremo nelle lezioni seguenti quali sintassi specifiche utilizzare per includere
questi oggetti nelle vostre pagine Web.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_52.htm (2 di 2)01/12/2004 22.14.02
Includere un file Audio | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Includere un file Audio
Audio
Per impostare un suono di sottofondo, solitamente si utilizza questo tag:
<bgsound src="multimedia/audio/jet_pubb.wav">
come in questo esempio.
possibile anche far ripetere la musica allinfinito:
<bgsound src="multimedia/audio/buzz_pubb.wav" loop="infinite">
come in questo caso.
O anche far ripetere la musica un numero prestabilito di volte:
<bgsound src="multimedia/audio/buzz_pubb.wav" loop="2">
come in questaltro esempio.
In realt questa non la sintassi corretta per inserire un file audio, perch
compatibile soltanto con Internet Explorer.
Una sintassi obsoleta, ma crossbrowser :
<embed src="multimedia/audio/jet_pubb.wav" autostart="true">
esemplificata in questa pagina.
Per inserire file audio - secondo le specifiche dell'HTML 4.01 - bisognerebbe
invece utilizzare il tag <object>. La sintassi :
<object data="multimedia/audio/jet_pubb.wav" type="audio/wav"
autostart="true">
<embed src="multimedia/audio/jet_pubb.wav" autostart="true">
</object>
tuttavia, affinch tutto funzioni perfettamente (visto che il tag object ancora
non perfettamente implementato), spesso conviene indicare il tipo di plugin da
utilizzare grazie allattributo "classid".
Questa sintassi ad esempio serve per aprire la barra del lettore multimediale
RealOne (se RealOne non presente, lutente verr avvisato). Notare che
allinterno del tag object vengono espressi i parametri che indicano come
devono essere visualizzati i controlli di RealOne, e la sintassi alternativa per
browser obsoleti (indicata tramite <embed>):
<object id="sound1" classid="clsid:22D6F312-B0F6-11D0-94AB-
0080C74C7E95">
<param name="src" value="multimedia/audio/jet_pubb.wav">
http://www.html.it/guida/html_53.htm (1 di 2)01/12/2004 22.14.21
cerca
Includere un file Audio | Guida HTML | HTML.it
<param name="controls" value="All">
<param name="console" value="sound1">
<param name="autostart" value="false">
<embed src="multimedia/audio/jet_pubb.wav".wav" type="audio/wav"
console="sound1" controls="All" autostart="false" name="sound1">
</object>
cio:

Quando inserite dei file audio, fate sempre caso ad essere i proprietari dei
diritti dautore, o ad avere lautorizzazione a utilizzare la musica (o il suono) in
questione.
Ricordiamo anche che l'uso di suoni o musica di sottofondo se utilizzata in
modo eccessivo pu compromettere l'usabilit del sito. Si veda la nostra
lezione sulla Progettazione senza stile.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_53.htm (2 di 2)01/12/2004 22.14.21
Includere un file Video | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Includere un file Video
Video
Come per laudio anche per i video si dovrebbe utilizzare il tag <object>. La
sintassi identica a quella dei file audio:
<object data="filmato.mov" type="video/quicktime" width="164" height="140">
<embed src="filmato.mov" type="video/quicktime" width="164"
height="140">
</object>
come abbiamo visto per i filmati audio, possibile utilizzare lattributo
"classid" con gli appropriati parametri per aprire barre di visualizzazione e
controlli vari ed eventuali.
Data la grande dimensione che questi file possono raggiungere, per i filmati
(ma anche per laudio) possibile utilizzare lo streaming attraverso il web.
Si tratta di un procedimento che consente di scaricare il filmato gradualmente
dal server, a mano a mano che lo si sta vedendo e in modo del tutto
trasparente allutente.
Per maggiori informazioni sullo streaming video, vi rimandiamo alla sezione
streaming di PRO.HTML.it.
Finora abbiamo visto come inserire singoli filmati audio e video allinterno di
una pagina web, se invece volete sincronizzare diversi filmati audio e video,
dovete utilizzare un linguaggio apposito che prende il nome di SMIL.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_54.htm01/12/2004 22.14.39
cerca
Includere un file Flash | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Includere un file Flash
Flash un software molto potente sviluppato da Macromedia a partire dal
1996. Si tratta di un programma che utilizza grafica vettoriale: significa che le
immagini non vengono descritte attraverso mappe di bit (bitmap), ma
attraverso formule matematiche. Per questo motivo i filmati in Flash pesano
molto meno della grafica tradizionale, e per lo stesso motivo i colori sono
"piatti". Inoltre, proprio perch le immagini sono espresse da formule
matematiche, non c il problema delleffetto "sgranato" dovuto al
ridimensionamento proprio della grafica tradizionale, perch i filmati in flash si
adattano automaticamente alle dimensioni indicate nel codice HTML (o se le
dimensioni sono espresse in percentuale, si adattano alla pagina).
Ovviamente il fatto che le immagini siano espresse grazie a delle formule
una caratteristica di questo software che non tocca minimamente il
webmaster, il quale - quando sviluppa filmati in flash - si ritrova ad usare un
"normale" software visuale.
I file sorgenti dei filmati (quelli su cui gli sviluppatori lavorano) hanno
estensione .fla, i file compilati (quello che si possono vedere in giro per il web)
hanno invece estensione .swf (cio "Shockwave Flash"): questultimo tipo
di file che dovremo inserire dunque nelle nostre pagine HTML.
Per inserire un filmato in flash in una pagina HTML sufficiente utilizzare la
seguente sintassi:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/
swflash.cab#version=6,0,29,0" width="100" height="100">
<param name="movie" value="multimedia/flash/bottone_in-out.swf">
<param name="quality" value="high">
<embed src="multimedia/flash/bottone_in-out.swf" type="application/x-
shockwave-flash" width="100" height="100">
</embed>
</object>
Maggiori informazioni su Flash si possono trovare sul sito dedicato a Flash-MX.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/guida/html_55.htm (1 di 2)01/12/2004 22.14.45
cerca
Includere un file Flash | Guida HTML | HTML.it
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_55.htm (2 di 2)01/12/2004 22.14.45
Includere un file Java | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Includere un file Java
Java un linguaggio di programmazione rilasciato dalla Sun nel 1995, ma in
corso di sviluppo sin dal 1991. Il suo successo nel web dovuto alle famose
"applet" ("piccole applicazioni") che permettono di aggiungere interattivit alle
pagine web.
Oggi si tende a non usare Java per le applet, perch la sua esecuzione
avviene tramite un software chiamato "virtual machine", e ogni volta che tale
software deve essere richiamato da una pagina web, lesecuzione della pagina
stessa risulta rallentata. In pi c' da sottolinare come Internet Explorer 6, il
browser maggiormente diffuso mentre scriviamo, non viene pi distribuito con
la Virtual Machine Java inclusa e dunque chi utilizzer questo browser non
visualizzer le applet se non ha esplicitamente chiesto l'installazione della
componente dal sito Windows Update.
Tutto quello che si pu fare con le applet Java oggi lo si pu fare anche con
Flash o JavaScript, dunque in molti casi si preferisce utilizzare questi linguaggi.
Java rimane una valida alternativa per applicazioni web complesse (ad
esempio i dati e i grafici delle quotazioni finanziarie, che devono essere
aggiornati in tempo reale), o anche per applicazioni come la chat (i client in
Java sono tuttora insuperati).
I file con il codice sorgente hanno estensione ".java", i file compilati (da
inserire nelle nostre pagine web) hanno invece estensione ".class".
La sintassi per inserire un applet java :
<applet code="lake" codebase="multimedia/java/" width="263" height="130">
<param name="image" value="multimedia/java/logo.gif">

<!--html alternativo -->
<img src="multimedia/java/logo.gif" width="263" height="65" alt="html.it">
<!-- fine html alternativo -->
</applet>
che d questo output:

Il W3C ha per deprecato lutilizzo del tag <applet>, e al suo posto dovrebbe
essere preferito il tag <object>:
<object id="appletLake" codetype="application/java" codebase="esempi/
multimedia/java/" classid="java:lake.class" width="263" height="130" >
<param name="image" value="multimedia/java/logo.gif">
<!--html alternativo -->
<img src="logo.gif" width="263" height="65" alt="html.it">
<!-- fine html alternativo -->
</object>
http://www.html.it/guida/html_56.htm (1 di 2)01/12/2004 22.14.53
cerca
Includere un file Java | Guida HTML | HTML.it
questultima sintassi tuttavia non ancora perfettamente funzionante con tutti i
browser.
Infine dal momento che non detto che tutti gli utenti possiedano il software
e il plugin per vedere Java bene inserire del testo HTML alternativo nel
caso in cui la virtual machine che esegue Java non sia presente (nel codice
precedente era presente del codice HTML alternativo, al posto di un avviso).
Ad esempio:
<applet code="lake.class" width="263" height="130">
<param name="image" value="logo.gif">
necessario installare Java sul proprio sistema
</applet>
Una raccolta di gadget in Java presente nella sezione Java di HTML.it.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_56.htm (2 di 2)01/12/2004 22.14.53
Includere file di scripting o CSS | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Includere file di scripting o CSS
JavaScript e VbScript
Cominciamo subito con il dire che JavaScript non Java. JavaScript un
linguaggio di scripting, eseguito dal browser, che permette di creare
interattivit allinterno della pagina.
La sintassi JavaScript deve essere inserita allinterno del tag <script>. Cos:
<script type="text/javascript">
function ciao()
{
alert ("ciao");
}
</script>
e poi nella pagina:
<input type="button" value="clicca" onClick="ciao()">
che d il seguente output:

Se volete imparare a programmare in JavaScript potete consultare la relativa
guida.
Su HTML.it sono presenti numerose raccolte di JavaScript, vi segnalo ad
esempio la mailing list relativa a JavaScript.
VbScript ("Visual Basic Script") anchesso un linguaggio di scripting
eseguito dal browser, ma possibile utilizzarlo soltanto con Internet Explorer.
Se volete consultare la guida relativa, potete andare a questo indirizzo.
I CSS (i fogli di stile)
Infine i fogli consentono di impostare il layout di un documento.
La sintassi per includerli allinterno della pagina :
<style type="text/css">

</style>
Anche in questo caso vi rimando alla guida ai CSS.
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
http://www.html.it/guida/html_57.htm (1 di 2)01/12/2004 22.15.02
cerca
clicca
I meta tag | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
I meta tag
I meta tag
Adesso che abbiamo terminato il nostro sito possiamo occuparci di farlo
trovare dai motori di ricerca.
utile allora impostare correttamente i meta tag all interno della <head> del
documento: si tratta di una serie di parole chiave e descrizioni, che aiutano i
motori di ricerca a classificare il sito.
Abbiamo gi visto il <title>, che il titolo della pagina; ma il testo ivi contenuto
pu comparire anche in seguito alla ricerca in un motore, come titolo del link.
Sar dunque importante impostarlo in modo pertinente:
<title>HTML.it il sito italiano sul webpublishing</title>
C poi il meta-tag "description" che permette di impostare una descrizione
sintetica del sito stesso. Anche in questo caso, la descrizione compare talvolta
nei risultati della ricerca:
<meta name="description" content="HTML.it - il sito italiano sul Web
publishing">
Infine il meta-tag "keywords" permette di indicare alcuni contenuti relativi al
sito stesso.
Le keywords (a seconda del webmaster) compaiono separate da virgola, da
punto e virgola, oppure senza alcun segno di interpunzione:
<meta name="keywords" content="html wml xml smil javascript js dhtml
dynamic xhtml vbscript coldfusion photoshop paint shop pro risorse
webmaster webdesigner flash grafica css applet java asp cgi perl guida free
corso php mysql tutorial lezioni sql database realizzazione siti web leggi
mailing list newsletter gif jpg publishing editor iis webserver apache linux
raccolte script news chat forum fogli di stile hdml wap linux mac apple palmari
computer c++ delphi visual basic vb vbasic">
fortemente sconsigliabile linserimento di keyword "astute" non relative
al contenuto effettivo del sito per migliorare il posizionamento (tipo le
ricercatissime "sesso", "mp3", ecc.). Quando i motori di ricerca se ne
accorgono, per lo pi cancellano il sito dalle loro liste.
Su HTML.it sono presenti molte risorse sull'argomento. L'articolo I Meta-tag:
come scriverli correttamente, ad esempio, un approfondimento su come
impostare i meta-tag.
Un buon posizionamento allinterno dei motori di ricerca una meta difficile da
raggiungere e largomento non si esaurisce certo in poche righe. Per cui, se
siete interessati all'argomento, vi rimando alla sezione Motori di Ricerca di
PRO.HTML.it e al forum di discussione dedicato a Motori di Ricerca e Web
Marketing.
http://www.html.it/guida/html_58.htm (1 di 2)01/12/2004 22.15.10
cerca
Il DocType (DTD)| Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Il DocType (DTD)
Il doctype
Finora ho volutamente tralasciato l'analisi della prima riga di una pagina HTML
(quella che consente di specificare di che tipo di documento si tratta). Il <!
DOCTYPE> assume un aspetto di questo genere:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
Questa riga fornisce alcune informazioni sul documento:
G HTML: il tipo di linguaggio utilizzato l'HTML
G PUBLIC: il documento pubblico
G W3C: il documento fa riferimento alle specifiche rilasciate dal W3C
G - ( il segno "meno"): le specifiche non sono registrate all'ISO
(organizzazione di standardizzazione internazionale). Se lo fossero
state, ci sarebbe stato un "+"
G DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD
("Document Type Definition" cio "Definizione del tipo di documento");
la versione di HTML supportata la 4.01 "transitional"
G EN: la lingua con cui scritta la DTD l'inglese
Inoltre, se necessario, possibile specificare l'indirizzo di riferimento a cui
possibile trovare la DTD: per l'HTML non lo si fa quasi mai, perch gli URL a
cui trovare la documentazione sono universalmente noti.
Per quel che riguarda l'HTML le indicazioni possibili sono tre:
G Strict: una DTD particolarmente rigorosa: esclude ogni elemento che
riguarda il layout (la cui formattazione affidata all'utilzzo dei CSS) e
non consentito l'uso degli elementi deprecati:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
http://www.w3.org/TR/html4/strict.dtd>
G Transitional: una versione temporanea, per consentire il passaggio
da una specifica all'altra. Nella DTD transitionali tag deprecati sono
ammeesi. Questa DTD andr bene nella maggior parte dei casi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
G Frameset. la DTD che riguarda i frames:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
http://www.w3.org/TR/html4/frameset.dtd>
Nelle ultime versioni il tipo di <!DOCTYPE> utilizzato influisce sulla
visualizzazione della pagina da parte del browser. Tale tecnica, chiamata <!
http://www.html.it/guida/html_59.htm (1 di 2)01/12/2004 22.15.17
cerca
Il DocType (DTD)| Guida HTML | HTML.it
DOCTYPE> switch, una delle principali cause di visualizzazione delle
pagine sul Web. A questo argomento HTML.it ha dedicato un lungo e
dettagliato approfondimento nell'articolo Il <!DOCTYPE> ed il <!DOCTYPE>
switch nei moderni browser
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_59.htm (2 di 2)01/12/2004 22.15.17
Configurare un programma FTP | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Configurare un programma FTP
Abbiamo detto sin dallinizio che un sito internet, per essere visibile da tutti,
deve essere presente su un computer che faccia da server, che sia in grado
cio di distribuire i contenuti di un sito a chi ne faccia richiesta nel web.
giunto il momento di spostare il nostro sito internet sul server e per farlo
dobbiamo utilizzare un protocollo che si chiama FTP ("file transfer protocol").
Per prima cosa, cercate uno spazio web in cui trasferire il vostro sito (ce ne
sono di gratuiti, ad esempio su Digiland). Dobbiamo quindi porocurarci un
programma che ci consenta di trasferire i file in maniera visuale dal nostro
computer al computer in remoto. Qui ce ne sono alcuni: i pi famosi sono
CuteFtp e WS-Ftp.
Durante la configurazione del programma dovrete inserire alcuni dati che vi
fornir il gestore dello spazio:
G indirizzo ftp del sito
G nome utente
G password
Come evidenziato in questa schermata:
Una volta che avrete effettuato correttamente la procedura di login, non avete
che da spostare i file dal vostro computer (di solito alla vostra sinistra) al
computer in remoto (a destra).
http://www.html.it/guida/html_60.htm (1 di 2)01/12/2004 22.15.25
cerca
Configurare un programma FTP | Guida HTML | HTML.it
Se avete impostato i collegamenti in modo corretto - in modo che non facciano
riferimento al vostro computer di casa, ma siano linkati fra loro - in questo
caso: avete messo il vostro primo sito nel Web!
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_60.htm (2 di 2)01/12/2004 22.15.25
Gli editor visuali | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Gli editor visuali
Gli editor visuali
Finora abbiamo scritto tutto il codice a mano, ma vi accorgerete presto che
esistono dei programmi che permetto di inserire immagini, tabelle, frame, form
e quantaltro in maniera pi intuitiva: si tratta degli editor visuali, quelli che gli
anglosassoni chiamano editor WYSIWYG ("What you see is what you get",
che significa "ci che vedi quello che ottieni").
Ad oggi gli editor visuali pi utilizzati sono:
G Dreamweaver MX della Macromedia: un editor molto potente e pieno di
funzionalit, ma forse proprio per questo inizialmente difficile da usare.
Sicuramente il migliore.
G FrontPage della Microsoft: leditor che tutti solitamente utilizzano,
perch incluso nel pacchetto Office. In realt "sporca" molto il codice,
visto che la sua attenzione concentrata su Internet Explorer.
G Golive di Adobe: negli ultimi anni ha perso notevoli quote di mercato,
rimane tuttavia un editor serio e una valida alternativa a FrontPage
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_61.htm01/12/2004 22.15.33
cerca
Una precisazione sul WWW e sui linguaggi | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Una precisazione sul WWW e sui linguaggi
Il WWW (Word Wide Web) come lo conosciamo oggi fu inventato da Tim
Berners Lee al Cern di Ginevra nel 1991. Egli invent sostanzialmente tre
procedimenti standard grazie ai quali far colloquiare gli elaboratori fra loro:
G HTTP ("Hyper Text Tranfer Protocol"): il protocollo grazie a cui due
computer differenti si scambiano le informazioni
G URI ("Uniform Resource Identifiers") e URL ("Unified Resource
Locator"): sono due sistemi per individuare in modo univoco la
collocazione di una determinata macchina, di un determinato
documento o di una determinata risorsa allinterno del Web. Un
esempio di URI l'indirizzo web http://www.html.it.
G HTML: un linguaggio standard. Oramai dovrebbe essere chiaro di cosa
si tratta
Linguaggi di markup
A scanso di equivoci, ecco qui una piccola panoramica dei linguaggi che sono
strettamente parenti dellHTML:
G SGML ("Standard Generalized Markup Language"). in pratica lHTML
stato scritto seguendo le specifiche di questo linguaggio. LSGML serve
infatti per creare linguaggi di contrassegno. La maggior parte di noi non
se ne occuper mai, ma lSGML ha fornito la struttura per creare lHTML
G XML (Extensible Markup Language). LXML (modellato anchesso
sullSGML) nato per superare i limiti dellHTML: infatti possibile
creare dei tag personalizzati, che si adattino ad ogni esigenza. Questa
caratteristica facilita linterscambio dei dati tra piattaforme differenti
grazie alluso dellXML.
In pratica si tratta di un meta-linguaggio, in grado di creare altri
linguaggi, adattabili per le esigenze pi disparate.
Es: il WML (Wirless markup Language) per i telefonini, MathML per
descrivere espressioni matematiche, lSVG (Scalable Vector Graphics)
per la grafica vettoriale, lo stesso XHTML
G XHTML ("Extensible HyperText Markup Language"): lXHTML non
nientaltro che la riformulazione dellHTML come linguaggio XML. Infatti
- dopo lHTML 4.01 - non ci saranno pi nuove versione dellHTML,
perch lHTML si evoluto in XHTML
L e z i o n e s u c c e s s i v a
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_62.htm01/12/2004 22.15.39
cerca
Conclusioni | Guida HTML | HTML.it
HOME| SHOP| CORSI IN AULA| FREE
INTERNET| WEBTOOL CREA| DOWNLOAD| FORUM| LIBRI| MLIST| NEWSLETTER
BASIC| PRO ADSL| ASP| B2B| FLASH-
MX| FONT| GIF| HOSTING| LINUX| NEWS| PHP| PROGRAMMAZIONE| SICUREZZA

Hosting Italiano
U L T I M ' O R A
Parola dell'anno 2004:
'Blog'
Lycos: attaccato il sito
makelovenotspam.com
Un motore di ricerca per
i prodotti televisivi?
Sony: Walkman contro
iPod
W3C10: il W3C compie
10 anni
Win2000: stop ai SP,
ultimo update nel 2005
Sun, pi cattedrale
che bazar
Le altre news - RSS
Conclusioni
A questo punto dovreste essere in grado di costruire i vostri siti con le vostre
stesse forze.
una buona abitudine quella di validare il vostro codice HTML, per vedere se
fate degli errori. Per farlo potete utilizzare lo stesso validatore del W3C (che
il pi noto), ma ne esistono anche altri.
Se costruire un sito per voi unoccasione sporadica, questo corso dovrebbe
essere abbastanza esauriente per tutto quello che dovete fare. Ma se "da
grandi" volete fare i Webmaster, il prossimo passo da affrontare la guida ai
fogli di stile. Se poi volete aggiungere effetti grafici particolari ai vostri siti web,
potete anche dedicarvi alla guida a JavaScript.
In ogni caso nellhelp di HTML.it potete trovare dei validi suggerimenti per i
vostri prossimi passi.
Se avete dei dubbi sul codice, potete sempre cercare aiuto nel forum di
discussione di HTML.it.
[ S o m m a r i o ]
1997-2004 - Grafica, layout e guide sono di esclusiva propriet di HTML.it s.r.l. | Note e informazioni legali
http://www.html.it/guida/html_63.htm01/12/2004 22.15.55
cerca