Guide

/* CSS */
.divguida h1 {color:blue; display:inline;}

.divguida {text-align:left; padding: 1.5em; border: 3px solid black; font-family
: arial; font-size: 9pt;}
.divguida a:link, .divguida a:visited {color:blue;}

<center><div class="divguida">
<h1>Lezione N.1 "Origini dell'HTML"</h1>
<hr>
Il linguaggio di programmazione pi conosciuto,l'HTML(HyperText Markup Language),f
u ideato da Tim Berners-Lee e Robert Caillau nel 1989.
L'HTML un sottoinsieme del linguaggio di markup(contrassegnazione) pi generale,l'
SGML (Standard Generalized Markup Language).
Ma perch si dice che l'HTML un linguaggio di contrassegnazione?Perch attraverso de
gli attributi contrassegna documenti web.
Infatti l'obbiettivo dell'HTML quello di creare un linguaggio che permettesse di
creare documenti ipertestuali,trasmessi nella immensa rete di Internet grazie a
ll' HyperText Transform Protocol(HTTP).
L'organizzazione che cura le specifiche del linguaggio la World Wide Web Consort
ium (sito [URL=http://www.w3.org/]www.w3.org[/URL]).
Con l'ultima specifica nato l' XHTML,che molto simile al linguaggio HTML,ma con
pi rigidit per quanto riguarda i tag,ma ne tratteremo nelle prossime lezioni.
<hr>
<p align="center">[size=2] Guida creata per [URL=http://thebigworld.blogfree.net
]The Big World[/URL],vietata la copia senza link alla fonte,per il codice contat
tatemi ([URL=?act=Msg&CODE=4&MID=2872324]FC[/URL] - [URL=http://blogfree.net/?ac
t=Msg&CODE=4&MID=45294]BF[/URL] - [URL=http://forumfree.it/?act=Msg&CODE=4&MID=3
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione N.2 "Come creare un elemento in HTML"</h1>
<hr>
Ora che sappiamo che cos' l'HTML,passiamo alla parte pratica:la costruzione di un
a pagina HTML.
Esistono due modi per creare un documento HTML,trattiamoli insieme:
<ul tipe=circle>
<li>Usare Editor,come Microsoft FrontPage e Dreamweaver,che creano automaticamen

te il codice,facilitando molto il lavoro del webmaster(costruttore di siti),benc
h si possa pensare che con queste tecniche uno possa creare un sito pur non avend
o conoscenze nel campo dell'HTML, consigliabile comunque avere una buona dimestic
hezza nel linguaggio.</li>
<li>Usare il blocco note(preinstallato in windows) per creare a mano il codice,c
on i tag che verranno illustrati nelle prossime lezioni.</li>
</ul>
Usando il secondo metodo poi il documento dovr essere salvato con nome usando l'e
stensione "<b>.html</b>" oppure "<b>.htm</b>" (naturalmente senza virgolette)
es. Index.html - Prova.htm
A questo punto si potr trovare nella directory scelta per il salvataggio un'icona
con il simbolo del browser predefinito,facendo un doppio click su questa verr ap
erto il vostro documento,totalmente bianco per ora,nelle prossime lezione verr sp
iegato come riempirle!
<hr>
439643]FF[/URL]).[/size]</p></div>


<h1>Lezione N.3 "I tag HTML"</h1>
<hr>
Bene,ora che abbiamo creato un documento in HTML,dobbiamo imparare come riempirl
o,sbaglio?Per farlo dobbiamo utilizzare i tag HTML.
Innanzitutto bisogna sapere che un tag delimitato dai due segni < (segno minore)
e > (segno maggiore).
es. [CODE]<p>[/CODE]
All'interno di questi verr poi messo il codice vero e proprio.
Esistono due diversi tipi di tag:
I tag con chiusura
es.[CODE]<head></head>[/CODE]
Come potete notare nel tag di chiusura (</head>),dopo il segno "<" ,viene usato
uno slash (/)
I tag senza chiusura

es.[CODE]<img src="foto.jpg">[/CODE]
Sono senza chiusure perch tutte le informazioni necessarie alla pagina web sono c
ontenute nel tag.
Una cosa importante:<u>dentro i tag HTML si pu scrivere sia in maiuscolo che in m
aiuscolo,ma meglio scegliere la secondo opzione,in quanto nell'XHTML sar permesso
solo l'uso del minuscolo</u>
Gli utilizzi dei tag sono svariati,come inserire immagini,form(moduli),tabelle,f
rame,formattare il testo e tanto altro ancora,ma ne tratteremo nelle prossime le
zioni.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione N.4 "Struttura di base di un documento HTML"</h1>
<hr>
Ora che abbiamo imparato come si crea un documento HTML e abbiamo visto la strut
tura dei tag,dobbiamo sapere quali sono i tag fondamentali per riempire la nostr
a pagina.
Innanzi tutto,il primo tag che si deve usare il tag <b><html></b>,che dichiara a
ppunto che si tratta di un documento HTML;questo tag richiede la chiusura(</html
>) alla fine del codice sorgente(o codice HTML).
In genere subito dopo usato il tag <b><head></b>;che racchiude informazioni dell
a pagina web <u>non visibili nel contenuto della pagina</u>,come il titolo ed ev
entuali codici CSS,di questi tratteremo in un'altra lezione.
Anche il tag <head> richiede la chiusura,che sar <b></head></b>.
Il contenuto della pagina invece andr fra i tag <b><body></b> e la relativa chius
ura </body>;qu son contenuti testi,paragrafi,tabelle,form etc...e ne trattere in
un'altra lezione.
Ora che abbiam visto i tag principali ecco l'esempio di come vengono disposti:
[CODE]<html>
<head>
</head>
<body>
</body>
</html>[/CODE]
A questo punto la nostra pagina sar ancora bianca,visto che questi codici(body) s
ervono a contenere testi etc...ma sono necessari per buttare gi una base di codic
e HTML.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione N.5 "La dichiarazione DOCTYPE"</h1>
<hr>
Il DOCTYPE un elemento che specifica con quale linguaggio(e specifica di esso) i
l documento stato scritto.
La dichiarazione <u>deve occupare la prima riga del codice HTML</u>,prima di ogn
i altro tag(compreso quello <html>),ed la seguente:
<b>[font=Times][size=3]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
//EN">[/size][/font]</b>
-HTML indica il tipo di linguaggio
-PUBLIC che appunto un documento pubblico
-W3C perch il linguaggio fa riferimento alla specifica del W3C
-DTD perch il documento fa riferimento ad una Document Type Definition
-HTML 4.01 Transitional che la specifica di HTML utilizzata
-EN che la lingua (Inglese)
<u>La dichiarazione DOCTYPE non obbligatoria,ma bene usarla perch conforme alla s
pecifica W3C</u>
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione N.6 "La sezione HEAD"</h1>
<hr>
Dentro la sezione HEAD (delimitata dai tag <head>...</head>)possono essere messi
tanti codici,come anche quelli non HTML(CSS e Javascript),ma,visto che non anco
ra ora di parlare di questi,vi illustro l'uso di un tag alquanto importante:il t
ag <b><title></b>.
A cosa serve questo tag?A dare un titolo alla pagina web,cio la scritta che appar
e nella barra in alto,quella dove ci sono anche i pulsanti per l'abbassamento,l'
ingrandimento,il rimpicciolimento e la chiusura della finestra del browser.

l'utilizzo del tag <title> molto semplice,ecco un esempio:
[CODE]<head>
<title>QUI' IL TITOLO DELLA VOSTRA PAGINA</title>
</head>[/CODE]
Semplicissimo l'utilizzo,no?
Ecco un riassunto di quello che abbiamo imparato fino ad ora:
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titolo</tiltle>
</head>
<body>
</body>
</html>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione N.7 "I principali attributi"</h1>
<hr>
Con il termine attributo si intende un qualcosa che va in aggiunta ad il tag,per
esempio
[CODE]<body bgcolor="blue">[/CODE]
Dove <b>bgcolor l'attributo</b> e <b>blue il valore</b>.
Ritornando al nostro discorso,gli attributi principali sono i seguenti:
<ol type=A>
<li>id (che indica un'identit per un tag,spiegheremo poi l'utilit)</li>
<li>class (simile a id ma funzione solamente per i css)</li>
<li>style (dove viene messo il codice css,deprecato)</li>
<li>title (da un titolo ad un elemento)</li>
<li>lang (specifica il linguaggio, usato ben poco perch serve solo a dare informaz
ioni al browser,non necessario finch si usa l'HTML per svago)</li>
<li>dir (stesso discorso di lang,solo che specifica verso che direzione scorre i
l testo)</li>
</ol>
<b>Questi attributi son supportati da quasi tutti i tag ma non sono obbligatori.
</b>
Il pi importante per ora title ecco un esempio di come funziona:
[CODE]<p title="titolo">paragrafo di testo</p>[/CODE]
Ed ecco il risultato(lasciate un istante il mouse sulla scritta sottostante):
<p title="titolo">paragrafo di testo</p>
Naturalmente parleremo anche del tag che abbiamo utilizzato,ma nelle prossime le
zioni.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.8 "Gestione del colore di sfondo"</h1>
<hr>
Prima di tutto spiegher come si pu cambiare il colore di sfondo ad una pagina; molt
o semplice,basta aggiungere un attributo sl tag <body>,ecco quale:
[CODE]<body bgcolor="red">[/CODE]
Ora lo sfondo della nostra pagina sar rosso.
Come avrete capito basta aggiungere l'attributo <b>bgcolor</b> e il valore che s
ar il nome del colore scelto in Inglese.
N.B. E' CONSIGLIATO USARE I COLORI ESADECIMALI([URL=http://www.web-link.it/html/
colori256.htm]qu [/URL] una tabella di questi colori) INVECE CHE IL NOME DEL COLO
RE,IN QUANTO LA TONALITA' DI ROSSO(nel nostro caso) PUO' ESSERE INTERPRETATA IN
MODO DIVERSO DAI VARI BROWSER.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.9 "Inserire immagini come sfondo" </h1>
<hr>
Molto semplice anche l'inserimento di una immagine come sfondo della nostra pagi
na web:l'attributo per lo sfondo semplicemente <b>background</b>,ed ecco un esem
pio:
[CODE]<body background="sfondo.jpg">[/CODE]
Dove andr messo al posto di sfondo l'url dell'immagine(e cambiato anche .jpg se i
l formato fosse diverso).
Ricordo inoltre che possibile combinare il colore di sfondo con le immagini
Per ora ci limitiamo a inserire il nostro sfondo,che andranno poi aggiustati con
i CSS (Cascading Style Sheets),ma fra un po' di tempo =)
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.10 "I margini delle pagine" </h1>
<hr>
Con margine di una pagina si intende la spaziatura del contenuto dal bordo della
finestra del browser,a volte molto fastidioso.
Per togliero baster aggiungerci due attributi al tag <body>,che sono:
[CODE]<body leftmargin="0" topmargin="0" >[/CODE]
Naturalmente cambiando i valori "0" con altri numeri si potranno inserire i marg
ini.
Ecco un codice per riassumere cosa abbiamo imparato fin'ora:
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pagina di prova</title>
</head>
<body bgcolor="#000000" background="immagine.jpg" leftmargin="0" topmargin="0">
</body>
</html>[/CODE]
RICORDO CHE NON E' IMPORTANTE ANDARE A CAPO DOPO OGNI TAG,O QUANTI SPAZI BIANCHI
INTERCORRONO TRA ESSI,lo si fa solo per una questione di maggior ordine.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.11 "Cambiare colore a tutto il testo di una pagina" </h1>
<hr>
Per cambiare colore al testo di una pagina per intero si usa un attributo per il
tag body,l'attributo <b>text</b>
[CODE]<body text="#FFFFFF">[/CODE]
Tutto il testo con questo codice sar scritto in bianco (il colore esadecimale #FF
FFFF corrisponde al bianco).
Naturalmente ci sono altri metodi per colorare diversamente parti del testo,ma n
e parleremo nelle prossime lezioni.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.12 "Cambiare colore ai link di una pagina" </h1>
<hr>
Anche per quanto riguarda i link esistono tre attributi per cambiare il loro col
ore,e sono:
<b>link</b>:per i link normali non ancora visitati
<b>vlink</b>:per i link gi visitati (sta per visited link)
<b>alink</b>:colore dei link appena ci clicchi sopra (sta per active link)
[CODE]<body link="#00FF00" vlink="#FF0000" alink="#000000">[/CODE]
Per avere link non visitati verdi,link visitati rossi e link attivi neri.
Naturalmente si pu cambiare colore a un solo link,ma di questo(ed anche di come i
link si creano,ne parleremo nelle prossime lezioni.
<hr>
439643]FF[/URL]).[/size]</p></div>


<h1>Lezione n.13 "Titoli e paragrafi" </h1>
<hr>
Per inserire il titolo di una pagina web ci dobbiam servire di un nuovo tag,o me
glio,di sei tag:
[CODE]<h1>qu il titolo</h1>[/CODE]
<b>al posto di h1,si possono usare altri pag h con un numero compreso tra 1 e 6,
in cui 1 avr il carattere pi grande,fino ad arrivare al minuscolo h6
</b>.
Per quanto riguarda i paragrafi si usa il tag
[CODE]<p>Testo del paragrafo</p>[/CODE]
I vostri testi compresi tra il tag "p" e la sua chiusura <b>saranno separati di
una riga all'inizio e alla fine dal testo che li circonda</b>.
N.B.Le scritte andrebbero molto meglio se inserite tra i tag "p",o "h",oppure de
i contenitori che vedremo nelle prossime lezioni,per essere formattati,come cons
igliato dalla specifica W3C,con i CSS.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.14 "Blocchi di testo e contenitori" </h1>
<hr>
Questi due elementi che sto per illustrarvi sono importantissimi per l'HTML,sopr
attutto il secondo,quindi,anche se all'inizio sembreranno inutili e noiosi,prest
ate la massima attenzione,poi capirete il perch.
Iniziamo dai blocchi di testo,il codice per crearli :
[CODE]<span>Qu va il testo</span>[/CODE]
Si tratta di un elemento inline,quindi non va a capo dopo il suo utilizzo.
Ecco la parte pi importante:i contenitori.
Il codice per crearli :
[CODE]<div>qu il testo</div>[/CODE]
Si tratta di un elemento di blocco e va a capo dopo il suo utilizzo.
<b>Esistono molti attributi per questi due tag,ma visto che per ora non servono,
ve li spiegher fra molto tempo,quando useremo i CSS</b>.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.15 "Interruzioni di riga e linee separatrici"</h1>
<hr>
Tratteremo ora di due tag molto semplici da usare,per primo quello dell'interruz
ione di riga.
Per chi non avesse capito interrompere la riga vuol dire andare a capo,anche se
non precisissima come interpretazione;il tag :
[CODE]<br>[/CODE]
Non richiede di chiusure ne di alcun attributo(tranne name,id,class e style),in
pratica dovete mettere questo codice dove volete che il vostro testo vada a capo
,ad esempio:
[CODE]Qu sono su una riga <br> qu in un'altra.[/CODE]
Da il risultato:
Qu sono su una riga
qu in un'altra.
Le linee separatrici son create con il tag [CODE]<hr>[/CODE] e separano il conte
nuto di una pagina.
Oltre agli attributi principali (non son supportati lang e dir),ci sono gli attr
ibuti:
<b>size</b>,che esprime lo spessore della linea
<b>width</b>(larghezza),che si pu esprimere in percentuale o pixel,e indica la lu
nghezza rispetto alla pagina(o contenitore) della linea
<b>color</b>,che esprime il colore.
<b>align</b>,che come valori ha left,right e center(sisnistra,destra e centro),i
ndica l'allineamente
<b>noshade</b>,che non richiede valori e imita di sfumare la linea
Ecco un esempio:
[CODE]<hr size="10" width="75%" align="center" noshade>[/CODE]
Che da come risultato
<hr size="10" width="75%" align="center" noshade>
Ed ecco un hr senza attributi,che occuper il 100% della larghezza:

<hr>
Nella prossime lezioni la formattazione del testo.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.16 "Il testo in grassetto"</h1>
<hr>
Brevissima lezione su come rendere grassetto un testo:
Il codice [CODE]<b>Testo</b>[/CODE]
Che da come risultato:
<b>Testo</b>
Il tag "b" non richiede alcun attributo,ma richiede la chiusura.
N.B. La specifica W3C prevede per l'uso dei CSS per la formattazione del testo,ch
e impareremo in una guida apposita.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.17 "Il testo in corsivo"</h1>
<hr>
Brevissima lezione su come scrivere in corsivo un testo:
Il codice [CODE]<i>Testo</i>[/CODE]
<i>Testo</i>
Il tag "i" non richiede alcun attributo,ma richiede la chiusura.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.18 "Il testo barrato"</h1>
<hr>
Brevissima lezione su come barrare un testo:
Il codice [CODE]<s>Testo</s>[/CODE]
<s>Testo</s>
Il tag "s" non richiede alcun attributo,ma richiede la chiusura.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.19 "Il testo sottolineato"</h1>
<hr>
Brevissima lezione su come sottolineare un testo:
Il codice [CODE]<u>Testo</u>[/CODE]
<u>Testo</u>
Il tag "u" non richiede alcun attributo,ma richiede la chiusura.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.20 "Cambiare font,colore,e dimensioni delle scritte"</h1>
<hr>
Per cambiare stile ad un testo si usa il tag "font",che richiede chiusura,ed ha
alcuni attributi che agiscono su colore,dimensione e stile (oltre a quelli princ
ipali).
Il tag normale :
[CODE]<font>Testo</font>[/CODE]
Come potete vedere scrivendo voi il codice non cambiaer nulla alla scritta,perch d
obbiamo avvalerci di tre attributi:
-<b>size</b>:Un numero da 1 a 7 che esprime la dimensione della scritta(1 piccol
o 7 grande)
-<b>color</b>:per cambiare il colore(ricordiamoci di usare i codici di colori es
adecimali).
-<b>face</b>:con il quale si pu scegliere un font(come times new roman) da utiliz
zare per la scritta.
Ecco un esempio:
[CODE]<font face="verdana ,times new roman ,arial" color="#000000" size="6">Test
o</font>[/CODE]
<font face="verdana ,times new roman ,arial" color="#000000" size="6">Testo</fon
t>
Come avrete notato l'attributo face ha tre valori,il browser user il primo font c
he abbiamo scritto,cio Verdana,ma nel caso che il computer dell'utente che visita
la tua pagina web non supportasse il Verdana,il font diventerebbe Times New Rom
an,e se non supporta neanche quest'ultimo,Arial.
<hr>

439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.21 "I link" </h1>
<hr>
Importantissimi nelle pagine HTML sono i link,o collegamenti.
Il tag per crearli "a",l'attributo fondamentale href,che come valore avr l'url da
collegare,vediamo un esempio:
[CODE]<a href="tuapagina.it">Qu il testo</a>[/CODE]
Che da come risultato (naturalmente tuapagina.it non esiste quindi verrete manda
ti ad una pagina di errore)
<a href="tuapagina.it">Qu il testo</a>.
il tag a supporta anche altri attributi,come,oltre a quelli principali:
-<b>alt</b>,che da una spiegazione del link.
-<b>target</b> che con il valore impostato a "_blank" aprir il link in una nuova
pagina.
-<b>accesskey</b> che permette di impostare un tasto,che,quando premuto,attiver i
l link.
-<b>hreflang</b> che specifica il linguaggio della pagina linkata.
es.
[CODE]<a href="tuapagina.it" hreflang="it" accesskey="t" target="_blank" alt="li
nk a pagina">Clicca qu</a>[/CODE].
Ricordae che possibile utilizzare immagini e altri elementi come link,basta mett
ere il codice dell'elemento alternativo al posto del testo
es.
[CODE]<a href="paginaweb.it"><img src="tuaimm.jpg"></a>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.22 "Le ancore" </h1>
<hr>
Le "ancore" sono delle specie di punti di appiglio ad una pagina,in quanto perme
ttono dei link che puntano ad una precisa parte di un documento HTML.
Prima di tutto bisogna dare un nome alla parte di testo che vogliamo linkare,usa
ndo sempre l'elemento "a" con l'attributo "name",ecco un esempio:
[CODE]<a name="testodalinkare">Testo linkato</a>[/CODE]
E creiamo poi un link che puna a quell'ancora
[CODE]<a href="#testodalinkare">Clicca qu</a>[/CODE]
Come avrete notato basta dare il valore all'attributo href del nome che abbiamo
assegnato alla parte di testo da linkare,preceduto da un cancelletto,ecco come s
i presenta il codice:
<a href="#testodalinkare">Clicca qu</a>
<a name="testodalinkare">Testo linkato</a>

<b>Importante sapere che nel caso l'ancora fosse in un'altra pagina,nell'attribu
to href si sarebbe dovuto specificare l'URL della pagina che ospita il testo da
linkare,seguito dal cancelletto e dal nome dell'ancora.</b>
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.23 "Inserire immagini" </h1>
<hr>
Le immagini sono un elemento importantissimo nella creazione di una pagina web,e
si inseriscono con il tag "img",che non richiede la chiusura.
Prima di farvi un esempio vi illustro gli attributi(oltre a quelli principali):
-<b>src</b>:specifica l'url dell'immagine.
-<b>alt</b>:per una descrizione dell'immagine(breve).
-<b>longdesc</b>:per una descrizione dell'immagine pi lunga.
-<b>width</b>:specifica la larghezza dell'immagine.
-<b>height</b>:specifica l'altezza dell'immagine.
-<b>align</b>:il cui valore pu essere center,left o right(ma anche middle,bottom
e top,rispetto al testo che circonda le immagini) e specifica l'allineamento del

l'immagine.
-<b>border</b>:spessore del bordo in pixel.
-<b>bordercolor</b>:colore del bordo.
-<b>hspace</b>:spazio orizzontale in pixel da ci che circonda l'immagine.
-<b>vspace</b>:spazio verticale in pixel da ci che circonda l'immagine.
Ecco un esempio(non vi illustro tutti gli attribui nell'esempio per ragioni di o
rdine e spazio)
[CODE]<img src="tuaimmagine.jpg" alt="immagine" border="1px" align="left" width=
"120px" height="150px">[/CODE]
<b>Importante sapere che specificando solo una valore tra width e height l'altro
valore manterr le proporzioni(diminuendo o aumentando anche lui).</b>
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.24 "La mappa d'immagine lato client,parte 1" </h1>
<hr>
Con mappa di immagine si intende un'immagine che presenta delle zone calde,ossia
zone che,quando cliccate,funzionano come dei link.
Quindi in pratica una stessa immagine pu portare a diverse pagine web.
Passiamo al codice:importante sapere che per identificare l'immagine da mappare
bisogna aggiungere all'elemento img dell'immagine scelta l'attributo <u>usemap</
u>,con il valore che corrisponde al nome che sceglieremo della mappa.
Per creare la mappa vera e propria usiamo il tag <u>map</u> insieme all'attribut
o name(che serve appunto per il valore dell'attributo usemap,oltre che per i jav
ascript).
Il tag map vuole la chiusura,e al suo interno andranno messi altri tag:i tag <b>
area</b>,i quali attributi sono target,alt e longdesc e hanno le stesse funzioni
che abbiamo visto per altri elementi,ma soprattutto tre attributi fondamentali:
<b>shape</b>:con il quale si specifica che tipo di figura sar la zona calda,da sc
egliere fra rect(rettangolo),circle(cerchio) e poly(poligono).
<b>coords</b>:che specifica le coordinate(poi vedremo come trovarle) degli angol
i della nostra figura.
<b>href</b>:gi visto per il tag a,specifica la pagina web alla quale il link ci p
orter.
<hr>

439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.25 "La mappa d'immagine lato client,parte 2" </h1>
<hr>
In questa seconda parte vi spiegher come specificare le coordinate rispetto alla
figura scelta con l'attributo shape,pi naturalmente un esempio.
Se come valore di shape abbiamo impostato <u>rect</u>,dovremo specificare dove s
i trova l'angolo in alto a sinistra e dove quello in basso a destra,per fare ci u
siamo l'attributo coords,che esprime in pixel la distanza da tali angoli dal ver
tice alto a sinistra dell'immagine intera,i valori numerali andranno separati da
una virgola e saranno 4:le due coppie x e y (rispettivamente orizzontale e vert
icale) della distanza dal vertice alto sinistro dell'immagine al vertice alto si
nistro della zona calda,e sempre le due coppie x e y,che per indicano la distanza
dal vertice basso destro della zona calda.
Nel caso avessimo impostato <u>circle</u> ci sarebbero solo 3 valori numerali:le
coppie x e y della distanza tra il vertice in alto a sinistra dell'immagine e i
l valore della lunghezza del raggio del cerchio.
La faccenda si fa complicata sciegliendo <u>poly</u>,dovremo infatti specificare
ogni coppia x e y dal vertice alto sinistro dell'immagine a un vertice del poli
gono(che potr avere qualsiasi numero di lati).
Naturalmente possiamo inserire quante zone calde vogliamo in un'immagine.
Ecco un esempio pratico:
[CODE]<img src="mappaitalia.jpg" usemap="mappa">
<map name="mappa">
<area shape="rect" coords="14,32,90,130" href="tuapagina.it">
<area shape="circle" coords="60,132,47" href="tuapagina2.it">
<area shape="poly" coords="45,70,78,67,120,159,250,320,345,378" href="tuapagina3
.it">[/CODE]
Creeeremo cos 3 zone calde:
-Una a forma di rettangolo,con il lato superiore sinistro distante 14 pixel oriz
zontalmente e 32 verticalmente dal vertice alto sinistro dell'immagine e il lato
inferiore destro distante 90 pixel orizzontalmente e 130 verticalmente dallo st
esso vertice dell'immagine.
-Una a forma di cerchio,con il centro distante 60 pixel orizzontalmente e 132 ve
rticalmente dal vertice alto sinistro dell'immagine e un raggio lungo 47 pixel
-Una a forma di poligono,nel nostro caso con 5 lati (le distanze oramai le capit
e senza che ve le illustri ancora).
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.26 "Struttura di base delle tabelle" </h1>
<hr>
In questa lezione vi illustrer la struttura di base di una tabella,senza aggiunge
re,per ora,nessun'attributo.
Le tabelle si creano con il tag <u>table</u>,invece le righe e le colonne di ess
e rispettivamente con i tag <u>tr</u> e <u>td</u>(tutti essi richiedono la chius
ura).
Subito un esempio:[CODE]<table>
<tr>
<td>Contenuto 1colonna della 1riga</td>
</tr>
<tr>
</tr>
</table>[/CODE]
Con questo codice avremo creato una tabella con due righe e 2 colonne per ogni r
iga.
Come avremo notato dentro il tag table andranno messi i tag per righe e colonne,
mentre il tag tr racchiude tanti tag td quanti si vuole che siano le colonne per
questa riga.
Avremo ora un abbozzo di tabella,che dovremo per aggiustare con vari attributi ch
e vi illustrer nella prossima lezione.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.27 "Attributi delle tabelle"</h1>
<hr>
Fra gli attributi principali di table ricordiamo:
-<u>border</u>:che specifica lo spessore del bordo
-<u>bordercolor</u>:per specificare il colore dei bordi
-<u>cellpadding</u>:specifica la distanza in px tra il bordo di una colonna al c
ontenuto
-<u>cellspacing</u>:distanza tra le colonne in px
-<u>width</u>:specifica la larghezza della tabella
-<u>height</u>:specifica l'altezza della tabella
-<u>align</u>:che pu essere impostato a center,left o right e specifica come semp
re l'allineamento della tabella
-<u>bgcolor</u>:per impostare il colore di sfondo
-<u>background</u>:per inserire un'immagine di sfondo
Tutti questi attributi funzionano con il tag table,mentre bordercolor,width,heig
ht,align,bgcolor e background funzionano anche con i tag tr e td.
N.B. l'attributo align con il tag td specifica l'allineamento del contenuto risp
etto alla cella dove situato.
Inoltre esiste anche l'attributo valign,che sempre con il tag td specifica l'all
ineamento verticale del contenuto della cella e assume i valori top(in cima),mid
dle(a met ed di default) e baseline(alla base della cella).
Ecco un esempio:[CODE]<table border="1px" bordercolor="#000000" align="center" c
ellpading="1px" cellspacing="3px" bgcolor="#FFFFFF">
<tr>
<td background="immagine.jpg" valign="top" align="center">Contenuto...</td>
</tr>
</table>[/CODE]
Avremo cos una tabella con 1 riga e 1 colonna con vari attributi!
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.28 "Caption,thead,tfoot e tbody" </h1>
<hr>
Come avrete notato nel titolo di questa lezione sono inseriti vari elementi,che
servono a dividere una tabella in diverse parti,per dare quindi un po' di ordine
al caos di td e tr.
Ognuno di questi tag richiede la chiusura e devono essere messi in determinati p
arti della tabella,ecco una tabella esemplificativa:
<table border="1" width="75%" ><caption><b>TITOLO</b></caption><thead>

<tr><th bgcolor="#232323"><b>Intestazione della tabella
</b></th>
</tr></thead><tbody>
<tr>
<td height="180px" align="center" bgcolor="#000000>Contenuto della tabella ...</
td>
</tr></tbody><tfoot>
<tr>
<td align="center" bgcolor="#FFFFFF"><b>Parte finale</b></td>
</tr></tfoot>
</table>
La scritta titolo inserita in caption,la riga con sfondo grigio thead,la riga co
n sfondo nero tbody e la riga con sfondo bianco tfoot.
Ecco il codice utilizzato:
[CODE]<table border="1" width="75%" >
<caption><b>TITOLO</b></caption>
<thead>
<tr>
<th bgcolor="#232323"><b>Intestazione della tabella
</b></th>
</tr>
</thead>
<tbody>
<tr>
<td height="180px" align="center" bgcolor="#000000>Contenuto della tabella ...
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center" bgcolor="#FFFFFF"><b>Parte finale</b></td>
</tr>
</tfoot>
</table>[/CODE]
Da notare che in thead l posto del solito td ho utilizzato th,come tutti i tag t
head etc opzionale,infatti potete benissimo usare td.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.29 "Raggruppare righe e colonne"</h1>

<hr>
Esistono due attributi,cio colspan e rowspan,che servono rispettivamente a raggru
ppare colonne e raggruppare righe.
Con il termine raggruppare intendo che la colonna a cui sar applicato l'attributo
colspan occuper lo spazio <u>orizzontale</u> di tante celle quanto sar il valore
dell'attributo stesso,mentre applicando rowspan sempre a una colonna occuper lo s
pazio <u>verticale</u> sempre di tante celle quanto sar il valore dell'attributo.
Ecco un esempio per capire meglio:

<table border="1">
<tr>
<td width="100px" colspan="2" bgcolor="#FFFFFF">Occupo due colonne</td>
<td width="100px">...</td>
</tr>
<tr>
</tr>
<tr>
<td width="100px" rowspan="2" bgcolor="#000000">Occupo 2 righe</td>
</tr>
<tr>
</tr>
</table>
Ed ecco il codice:[CODE]<table border="1">
<tr>
<td width="100px" colspan="2" bgcolor="#FFFFFF">Occupo due colonne</td>
</tr>
<tr>
</tr>
<tr>
<td width="100px" rowspan="2" bgcolor="#000000">Occupo 2 righe</td>
</tr>
<tr>
</tr>
</table>[/CODE]
La cella bianca quella con l'attributo colspan mentre quella nera con l'attribut
o rowspan.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.30 "Gli elenchi"</h1>
<hr>
Importanti nell'HTML sono gli elenchi,quindi prestate attenzione a questa lezion
e.
Partiamo col dire che esistono due tipi di liste:le liste ordinate e le liste no
n ordinate.
Le prime di creano con il tag ol (ordired list),le seconde con il tag ul (unorde
red list) e quest'ultimi li vedremo nella prossima lezione.
L'attributo fondamentale type,con il quele specifichiamo lo stile di enumerazion
e dei vari termini dell'elenco.
I valori di type nel tag ol sono:
-
<b>"1"</b>:Crea
<b>"a"</b>:Crea
<b>"A"</b>:Crea
<b>"i"</b>:Crea
<b>"I"</b>:Crea
una
una
una
una
una
lista
lista
lista
lista
lista
con
con
con
con
con
numeri crescenti
lettere dell'alfabeto
minuscole
maiuscole
romano minuscole
romano maiuscole
Per creare le voci delle liste si usa il tag "li" (list item),la cui chiusura fa
coltativa(invece ol e ul richiedono la chiusura).
Ecco vari esempi:
<ol type="1">
<li>Prima voce</li>
<li>Seconda voce</li>
<li>Terza voce</li>
</ol>
Codice:[CODE]<ol type="1">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>[/CODE]
<ol type="a">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>
Codice:[CODE]<ol type="a">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>[/CODE]
<ol type="A">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>
Codice:[CODE]<ol type="A">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>[/CODE]
<ol type="a">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>
Codice:[CODE]<ol type="a">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>[/CODE]
<ol type="i">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>
Codice:[CODE]<ol type="i">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>[/CODE]
<ol type="I">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>
Codice:[CODE]<ol type="I">
<li>Prima voce</li>
<li>Terza voce</li>
</ol>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.31 "Gli elenchi disordinati"</h1>
<hr>
Tratteremo ora delle liste disordinate,<u>che si creano con il tag ul</u>,a diff
erenza del tag ol delle liste ordinate.
Anche il tag ol ha l'attributo type che ha come possibili valori:
-<u>disc</u>:Crea una lista con pallini pieni
-<u>circle</u>:Crea una lista con pallini vuoti
-<u>square</u>:Crea una lista con quadratini
Ecco degli esempi:
<u>-Type impostato a disc:</u>
<ul type="disc">
<li>Prima voce</li>
<li>Terza voce</li>
</ul>
<u>
-Type impostato a circle:</u>
<ul type="circle">
<li>Prima voce</li>
<li>Terza voce</li>
</ul>
<u>
-Type impostato a square:</u>
<ul type="square">
<li>Prima voce</li>
<li>Terza voce</li>
</ul>
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.32 "Scritte scorrevoli"</h1>
<hr>
Simpatici effetti di scritte scorrevoli possono essere creati con il tag <b>marq
uee</b>.
Ecco subito un esempio:[CODE]<marquee direction="right">Testo</marquee>[/CODE]
E l'effetto:
<marquee direction="right">Testo</marquee>
Come potete vedere ho inserito gi un attributo:direction,che assume i valori righ
t,left,top e down e specifica la direzione verso cui andr il testo.
Altri attributi:
-<b>scrollamount:</b> un valore numerico per esprimere la velocit
-<b>width:</b> specifica il raggio d'azione della scritta in larghezza
-<b>height:</b> specifica il raggio d'azione della scritta in altezza
-<b>bgcolor:</b> colore di sfondo del raggio d'azione
-<b>behavior:</b> assume i valori di scroll(di default),slide(dopo un giro si fe
rma),alternate(cambia a ogni giro la direzione,da non usare insieme a direction)
Ecco vari esempi con gli attributi:
[CODE]<marquee direction="right" width="75%" bgcolor="#000000" scrollamount="7"
behavior="scroll">Testo</marquee>[/CODE]
<marquee direction="right" width="75%" bgcolor="#000000" scrollamount="7" behavi
or="scroll">Testo</marquee>
[CODE]<marquee direction="left" width="100%" scrollamount="3" behavior="slide">T
esto che si ferma al bordo del raggio d'azione</marquee>[/CODE]
<marquee direction="left" width="100%" scrollamount="3" behavior="slide">Testo c
he si ferma al bordo del raggio d'azione</marquee>
[CODE]<marquee width="70%" scrollamount="12" behavior="alternate">Testo che camb
ia direzione</marquee>[/CODE]
<marquee width="70%" scrollamount="12" behavior="alternate">Testo che cambia dir
ezione</marquee>
<hr>

439643]FF[/URL]).[/size]</p></div>

<h1> Lezione n.33 "Introduzione ai frame"</h1>
<hr>
Comporre una pagina in frame significa essenzialmente comporla di pi pagine web,i
nfatti i frame sono letteralmente dei riquadri dove appariranno nuove finestre.
Forse non subito facile capire questo concetto,ma con il passare del tempo di ce
rto capirete questo meccanismo che tutt'altro che complicato.
Vi anticipo subito i vantaggi e gli svantaggi di comporre una pagina in frame:
Come vantaggio hanno quello di essere comodi,infatti si possono crare pi pagine s
enza copiare brutalmente il codice ogni volta,e per gli utenti molto pi veloce il
caricamento delle pagine.
Per ha anche degli svantaggi,infatti una pagina composta in frame di difficile in
dicizzazione da parte dai motori di ricerca(come Google).
Nelle prossime lezioni vedremo come comporre una pagina in frame
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.34 "Comporre una pagina in frame" </h1>
<hr>
Dobbiamo sapere che una pagina composta in frame cambia radicalmente da una norm
ale pagina web,per due cose fondamentali:
-La prima che cambier la dichiarazione DOCTYPE,diventer quindi:
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FRAMESET//EN" "http://www.w3.
org/TR/html4/frameset.dtd">[/CODE]
Da notare quindi la scritta <b>frameset invece di transitional</b> e il riferime
nto alla pagina web del W3C.
-La seconda,pi importante, che il tag <b>body verr omesso per far spazio al tag fra
meset</b>.
Per ora vedremo solo i due attributi principali di frameset:
-<b>rows</b>:specifica la suddivisione della pagina in righe.

-<b>cols</b>:specifica la suddivisione della pagina in colonne.
Sia rows che cols avranno un valore numerico,che potr essere in pixel,una percent
uale,oppure un valore relativo.
Ecco degli esempi:
Se volessimo creare un frameset con 2 colonne e 2 righe,tutte larghe 400 pixel,u
tilizzeremo il tag:
[CODE]<frameset rows="400,400" cols="400,400">[/CODE]
Sapendo che la risoluzione di una pagina in larghezza di 800 pixel avremo quindi
4 riquadri di dimensioni uguali fra loro.
Potremmo per anche usare le percentuali,cos:
[CODE]<frameset rows="50%,50%" cols="50%,50%">[/CODE]
Ottenendo lo stesso risultato.
Addirittura possiamo usare dei valori relativi,ecco l'equivalente dei due esempi
con i valori relativi:
[CODE]<frameset rows="1*,1*" cols="1*,1*">[/CODE]
In pratica il funzionamento semplice:la pagina stata suddivisa in 2 parti,perch,n
el nostro caso 1+1=2,e a ogni riquadro stata assegnata una parte della pagina.
Forse pi difficile da capire quest'ultima parte,quindi vi faccio un altro esempio
:
Se noi volessimo suddividere la pagina in 6 parti,creando 3 colonne,una un sesto
della pagina,l'altra tre sesti e l'ultima due sesti utilizzeremo questo tag.
[CODE]<frameset cols="1*,3*,2*">[/CODE]
Infatti 1+3+2=6 e la prima parte sar 1 sesto,la seconda 3 sesti e la terza 2 sest
i.
N.B. Esprimendo un asterisco(*),al posto di un valore numerale,creeremo un riqua
dro che andr ad occupare automaticamente lo spazio rimanente:
Ecco un esempio per capire meglio,vogliamo creare tre colonne di 20%,50% e 30%,a
bbiamo due modi per farlo:
[CODE]<frameset cols="20%,50%,30%">[/CODE]
OPPURE
[CODE]<frameset cols="20%,50%,*">[/CODE]
Da notare l'asterisco al posto di 30%,che completer quindi lo spazio rimanente de
lla pagina,infatti 20%+50%=70% e per completare quindi la larghezza serve ancora
un 30%,che sar il valore che l'asterisco assumer.
Da ricordare che l'asterisco funziona con qualsiasi valore e anche con l'attribu
to rows.
<b>N.B. </b><u>C' un importante differenza tra il tag body e il tag frameset,infa

tti quest'ultimo pu essere inserito,quindi annidato,pi volte in una sola pagina.</
u>
Nella prossima lezione gli attributi di frameset.
<hr>
439643]FF[/URL]).[/size]</p></div>


<h1>Lezione n.35 "Attributi di frameset e il tag noframes" </h1>
<hr>
Il tag frameset ha vari attributi per rendere migliore la sua visulaizzazione,ec
co quali:
-<b>frameborder</b>:assume i valori sono yes e no,nel primo caso i bordi fra i f
rame verrano visulizzati,nel secondo caso no.
-<b>framespacing</b>:che specifica con un valore in pixel la distanza tra i vari
frame
-<b>border</b>:per impostare la dimensione dei bordi
-<b>bordercolor</b>:per impostare il colore dei bordi
[CODE]<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FRAMESET//EN" "http://www.w3

.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Pagina di esempio</title>
</head>
<frameset rows="20%,40%,* cols="75%,20%,*" frameborder="yes" border="10" borderc
olor="#000000" framespacing="0">
...
...
...
</frameset>
</html>[/CODE]
Per quanto riguarda il tag noframes il suo uso molto semplice,non ha attributi,r
ichiede chiusura e al suo interno andr messo il codice per una pagina alternativa
che i pochi browser obsoleti che non supportano i frame visualizzeranno.
Ecco un esempio completo di tutto:
[CODE]<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FRAMESET//EN" "http://www.w3
.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Pagina di esempio</title>
</head>
<frameset rows="20%,40%,* cols="75%,20%,*" frameborder="yes" border="10" borderc
olor="#000000" framespacing="0">
...
...
...
<noframes>
(Codice alternativo)
</noframes>
</frameset>
</html>[/CODE]
Nella prossima lezione spiegher il tag frame,con il quale possiamo riempire i nos
tri riquadri.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.36 "Il tag frame" </h1>
<hr>
Non basta creare la struttura di una pagina in frame,bisogna anche riempirla,e p
er questo useremo il tag frame.
Come ho gi accennato i frame sono riquadri dove vengono visualizzate tante pagine
web nello spazio di una sola,con il tag frame vengono appunto richiamate queste
pagine.
Ecco subito gli attributi di frame:
-<b>src</b>:il pi importante,specifica l'URL della pagina web che verr visualizzat
a in una cella
-<b>id</b>:anche se sottintesa la sua presenza essendo uno degli attributi di ba
se di quasi ogni tag, impostante ricordarlo,e usarlo per assegnare un nome al nos
tro frame
-<b>marginheight</b>:specifica la distanza verticale tra il frame e il suo conte
nuto
-<b>marginwidth</b>:specifica la distanza orizzontale tra il frame e il suo cont
enuto
-<b>scrolling</b>:ha i valori yes e no,usandolo decidi se visualizzare le barre
di scorrimento nel caso la pagina web caricata da src fosse pi grande dello spazi
o del frame.
-<b>noresize</b>:non vuole alcun valore e quindi mettendolo impedisci all'utente
il ridimensionamento del frame
-<b>frameborder</b>:analogo all'omonimo attributo di frameset ma funziona solo p
er il frame a cui applicato,assume i valori di 0(che sarebbe no) e 1(che sarebbe
yes).
Il tag frame non richiede la chiusura.
N.B.IL PRIMO ELEMENTO FRAME SI RICONDUCE ALLA CELLA IN ALTO A SINISTRA,LA SECOND
A QUELLA ALLA SUA DESTRA E COSI' VIA.
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.37 "Comportamento dei link nei frame" </h1>
<hr>
Se,per esempio,voi aveste creato una pagina in frame,e caricato altre pagine,del
le quali almeno una contenga un link,in questi frame,vi sarete accorti che clicc
ando sul link il contenuto della pagina linkata appariva nel frame che contiene
la scritta linkata.
Mediante l'attributo target,che abbiamo gi incontrato,possiamo specificare in qua
le frame cricare il contenuto della pagina,o addirittura caricarla in una pagina
nuova.
Ecco i valori di target:
-<b>"_blank"</b>:Carica il contenuto in una nuova pagina.
-<b>"_self"</b>:Carica il contenuto nello stesso frame(di default).
-<b>"_parent"</b>:Carica il contenuto nel frame precente(o genitore).
-<b>"_top"</b>:Il link viene caricato nella stessa pagina,cancellando ogni strut
tura a frame.
A mio parere molto comodo dare un nome tramite l'attributo id ad un frame e spec
ificarlo come destinazione di caricamento del link usando cos l'attributo target:
<b>target="Nomeframe"</b>
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.38 "Il frame inline"</h1>
<hr>
Per chi volesse inserire un frame nella propria pagina web,senza costruirla inte
ramente con il tag frameset esiste il tag <b>iframe</b> (inline frame)
Visualizziamo i suoi attributi(oltre a quelli standard):

-<b>src</b>:URL della pagina che sar contenuto nell' iframe
-<b>width</b>:larghezza dell'iframe
-<b>height</b>:altezza dell'iframe
-<b>frameborder</b>:analogo all'omonimo attributo di frame
-<b>scrolling</b>:analogo all'omonimo attributo di frame
-<b>noresize</b>:analogo all'omonimo attributo di frame
A differenza del tag frame richiede la chiusura,al suo interno andr messo il codi
ce alternativo per i browser che non supportano i frame.
Ecco un esempio:
[CODE]<iframe src="pagina.html" noresize scrolling="yes" frameborder="1" width="
600px" height="300px">
Codice alternativo
</iframe>[/CODE]
Da ricordare che per non appesantire troppo la pagina non consigliato inserire u
n intero documento html come codice alternativo,bens un link a una pagina senza f
rame.
Con questo abbiamo concluso la parte riservata ai frame,alle prossime lezioni co
n i form(moduli).
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.39 "Introduzione ai form"</h1>
<hr>
I form sono alla base di ogni documento HTML che si rispetti,forse non ve ne acc
orgete,ma sono presenti in tutti i siti e sono uno dei pi importanti strumenti di
collegamento tra HTML e i linguaggi di scripting(javascript,asp...).
Prendiamo per esempio un sito dove presente un modulo per la registrazione,ecco
quello un form,ma attenzione,con il solo linguaggio html possiamo creare i vari
campi da compilare,ma non il processo di registrazione,che compito dei linguaggi
tipo asp(active server pages)!
Quindi in questa guida ci limiteremo a creare dei form "morti",cio che non hanno
alcuna funzione.
Entriamo subito nel vivo:
Per creare un form esiste l'apposito tag <b>form</b>,che presenta vari attributi
(oltre a quelli standard):
-<b>action</b>:specifica l'url della pagina che elaborer i dati della form
-<b>metod</b>:assume i valori method e post,con il primo i dati verranno inviati
in un unico step e visualizzati nella barra dei browser,con il secondo verranno
inviata in 2 step e non verranno visualizzati nella barra dei browser

-<b>enctype</b>:di default il valore "text/plain",ma se nel form fosse previsto
l'invio di immagini utilizzare il vlore "multipart/form-data"
-<b>target</b>:impostato a "_blank" apre i dati della form in una nuova pagina
il tag form richiede la chiusura e al suo interno andranno messi i vari campi de
l modulo,che vedremo poi come creare.
Ecco un esempio:
[CODE]<form name="mioform" action="pagina_di_elaborazione.asp" enctype="text/pla
in" mothod="post">
...
...
...
</form>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.40 "Il tag input"</h1>
<hr>
Gran parte deimoduli di un form sono creati dal tag input,che,attraverso l'attri
buto type,assume varie funzioni
Gli attributi variano col variare del tipo di input,quindi ve li illustrer man ma
no che esemineremo i valori di type,sapendo che input non richiede la chiusura.
Vi anticipo subito che molto utile usare l'attributo value(che da un valore al c
ampo della form e nei casi di input type="text" lascia una scritta corrispondent
e al suo valore,vedremo poi un esempio) e l'attributo che abbiamo gi visto name(e
anche id),comuni a tutti i tipi di input.
Ecco i valori di type:
-<b>"text"</b>:crea un piccolo campo di testo,gli attributi di input type="text"
sono <i>size</i>(un valore numerico che indica la lunghezza del campo di testo)
,<i>maxlength</i>(che indica il numero massimo di lettere che si possono scriver
e nel campo,<i>readonly</i>(non vuole alcun attributo e non permette di cancella
re la scritta inserita con value) e <i>disabled</i>(non vuole alcun attributo e
disabilita il campo di testo).
Ecco un esempio di <b>input type="text"</b>:[CODE]<input type="text" value="prov
a" maxlength="10" size="20">[/CODE]Che crea:
<input type="text" value="prova" maxlength="10" size="20">
-<b>"password"</b>:stesse funzioni e attributi di type="text",con la differenza
che le scritte vengono criptate.

Ecco un esempio di <b>input type="password"</b>:[CODE]<input type="password" val
ue="prova" maxlength="10" size="20">[/CODE]Che crea:
<input type="password" value="prova" maxlength="10" size="20">
-<b>"submit"</b>:crea un bottone che invia i dati della form,non ha altri attrib
uti oltre a quelli standrard e value.
Ecco un esempio di <b>input type="submit"</b>:[CODE]<input type="submit" value="
prova">[/CODE]Che crea:
<input type="submit" value="prova">
-<b>"reset"</b>:crea un bottone che quando cliccato ripulisce i campi della form
,ha gli stessi attributi di submit.
Ecco un esempio di <b>input type="reset"</b>:[CODE]<input type="reset" value="pr
ova">[/CODE]Che crea:
<input type="reset" value="prova">
-<b>"image"</b>:crea un'immagine che funziona da buttone di submit,ha gli stessi
attributi di type="submit" con l'aggiunta di <i>src</i>(che specifica l'URL del
l'immagine)
-<b>"radio"</b>:crea dei campi di selezione,di cui ne si pu selezionare solo uno
alla volta,ha gli attributi disabled con la stessa funzione gi vista e checked,ch
e imposta come preselezionato un campo e non richiede valori
Ecco un esempio di input type="radio" [CODE]1<input type="radio" name="prova" va
lue="1" checked>
2<input type="radio" name="prova" value="2">
3 <input type="radio" name="prova" value="3">[/CODE]
N.B. a ogni campo input dare lo stesso nome(mediante name) per far sapere al bro
wser che appartengono ad uno stesso modulo(con name diversi se ne potrebbe selez
ionare pi insieme)
-<b>"checkbox"</b>:uguale in tutto per tutto a radio,con la differenza che se ne
pu selezionare pi di uno insieme.
-<b>"file"</b>:il tipico campo di testo seguito dal pulsante "sfoglia",non ha at
tributi oltre a value e quelli standard
-<b>"hidden"</b>:crea un campo non visibile all'utente al quale il webmaster pu d
are un valore(usato per comodit e raramente).
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.41 "Il tag button" </h1>

<hr>
Il tag button sempre pi in uso e tende a sostituire input con type image,submit e
reset.
A differenza di input richiede la chiusura,oltre agli attributi standard support
a i seguenti attributi:
-<b>type</b>:assume i valori submit(invia i dati della form),reset(resetta la fo
rm) e button(bottone normale).
-<b>value</b>:da un valore al bottone.
Fra il tag di apertura e chiusura si potranno mettere testi,immagini,link etc...
,rendendo personalizzabile il bottone,a differenza di quanto si pu fare con il ta
g input.
Da notare che il tag button spesso usato per interagire con i codici javascript.
Ecco un esempio del tag button:
[CODE]<button name="bottone" value="bottone" type="button">Bottone generico di p
rova</button>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.42 "Il tag select" </h1>
<hr>
Utile nei form il tag select,che permette di selezionare tramite un men a tendina
varie opzioni.
Vediamo subito quali sono gli attributi oltre a quelli principali,sapendo che il
tag richiede la chiusura:
-<b>multiple</b>:non richiede valori e permetta all'utente di selezionare pi opzi
oni(tenendo premuto CTRL+click)
-<b>size</b>:valore numerico corrispondente alle opzioni che si visualizzano sen
za scrolling
All'interno del tag select andranno messi altri tag:i tag option.
Anch'essi richiedono chiusura,al loro interno andr messo il testo dell'opzione,su
pporta gli attributi standard e value.
Vediamo due esempi:
[CODE]<select name="select">
<option value="opzione1">Opzione1</option>
</select>[/CODE]
[CODE]<select name="select" multiple size="4">
</selct>[/CODE]
Copiate i due codici nei vostri documenti HTML e notate la differenza.
Esiste anche un tag che crea un etichetta per distinguere le varie opzioni,il ta
g andr messo dentro select e racchiuder tutti i tag option che fanno parte del gru
ppo.
Il tag optgroup e richiede un solo attributo,<b>label</b>,il cui valore sar il no
me dell'etichetta del gruppo
Ecco un esempio:
[CODE]<select name="select">
<optgroup label="prime opzioni">
</optgroup>
<optgroup label="seconde opzioni">
</optgroup>
</select>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.43 "Il tag textarea" </h1>
<hr>
L'ultimo degli elementi che vengono utilizzati per creare i campi delle form il
tag <b>textarea.</b>
Molto simile a input type="text" permette di scrivere dei testi pi lunghi di quel
lo che permetti input.
Ecco i suoi attributi(oltre a quelli principali):
-<b>value</b>:da un valore al tag.
-<b>rows</b>:specifica il numero di righe di testo lungo le quali si estende l'a
rea di testo.
-<b>cols</b>:numero di caratteri contenuti in una riga di testo.

-<b>disabled</b>:non richiede valori e disabilita il campo di testo.
-<b>readonly</b>:non richiede valori e rende in sola lettura il campo di testo.
A differenza di input il tag textarea richiede la chiusura,e fra il tag d'apertu
ra e di chiusura andr messo il testo che si vuole fare apparire nell'area di test
o.
Ecco un esempio pratico:[CODE]<textarea name="area_di_testo" rows="5" cols="50">
Testo</textarea>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.44 "Raggruppare i campi delle form" </h1>
<hr>
Eccoci all'ultima lezione riguardante le form,ci occuperemo di tag usate per far
e un po' di ordine fra i vari moduli.
Questi tag richiedono tutti la chiusura e sono:
-<b>fieldset</b>:Usato per raggruppare i vari campi(come quello dove ti chiede l
a data di nascita,quello dove ti chiede il nome...)
-<b>legend</b>:Usato per scrivere il nome di ogni campo
-<b>label</b>:Letteralmente etichetta,viene usato soprattutto con il tag input c
on l'attributo type impostato a "text"
Sapendo che nessuno di questi tag sono obbligatori vediamo subito un esempio:
[CODE]<form name="mioform" action="pagina.asp">
<fieldset>
<legend>Nome:</legend>
<input type="text" value="qu il nome" name="inserirenome">
</fieldset>
...
</form>[/CODE]
O anche:
[CODE]<form name="mioform" action="pagina.asp">
<fieldset>
<label>Nome: <input type="text" value="qu il nome" name="inserirenome"></label>
</fieldset>
...
</form>[/CODE]
<hr>
439643]FF[/URL]).[/size]</p></div>

<h1>Lezione n.45 "Per concludere" </h1>
<hr>
Siete giunti alla fine di questa guida,spero sia stata di vostro gradimento!
In questa lezione non impareremo nuovi tag,ma faremo un po' di discorso per quan
to riguarda l'HTML.
Per esperienza posso affermarvi che a volte non basta conoscere i codici a memor
ia,bisogna anche metterli in pratica,fino a quando non saranno sotto il vostro p
i totale controllo.
Vi consiglio inoltre di non perdere l'allenamento,e magari di fare un documento
"per scherzo" senza lanciarlo sul web,l'HTML infatti pu essere un utile passatemp
o.
Ah,per precisare su una cosa che io stesso mi sono chiesto dopo il mio primo app
roccio con l'HTML,cio il fatto che dopo aver visto tutti questi codici,molte funz
ioni di certe pagine web non ci sono ancora chiare,ma questo normale,anzi sconta
to,visto che per essere buoni webmaster bisogner ancora imparare altri linguaggi,
come i CSS,i JAVASCRIPT,l'ASP e il PHP.
Di certo ci sar a breve una guida sui CSS(cascading style sheets),e probabilmente
anche una per gli altri linguaggi prima elencati.
Prima di lasciarci devo dirvi due ultime cose:
Una un fatto un po' imbarazzante,infatti mi son dimenticato di inserire una lezi
one sui commenti dell'HTML,utili per fare un po' di spazio,e visto che sono faci
li da capire ve li illustro adesso:
Baster infatti usare un simbolo d'apertura e uno di chiusura,entro i quali si pot
r mettere qualsiasi testo che non apparir a chi visita la vostra pagina web,ma rim
arr scritto fra il codice,i segni sono:

Entro i quali andr il commento,cos:

L'altra invece solo per fare chiarezza su quelli che si chiedono se in questa gu
ida sia presente proprio tutto,beh vi posso dire che la maggior parte delle cose
presente,volutamente non ho spiegato i <b>meta tag</b> e il tag <b>object</b>,q
uest'ultimo perch sar sostituito da altri tag nell'imminente arrivo dell'HTML 5.0
E' giunto il momento dei saluti,non perdetevi la prossima guida CSS

<hr>
439643]FF[/URL]).[/size]</p></div>

Guide

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guide

Caricato da

Copyright:

Formati disponibili

/* CSS */

.divguida h1 {color:blue; display:inline;}

<li>Usare Editor,come Microsoft FrontPage e Dreamweaver,che creano automaticamen

I tag senza chiusura

ingrandimento,il rimpicciolimento e la chiusura della finestra del browser.

Ed ecco un hr senza attributi,che occuper il 100% della larghezza:

tatemi ([URL=?act=Msg&CODE=4&MID=2872324]FC[/URL] - [URL=http://blogfree.net/?ac

<a name="testodalinkare">Testo linkato</a>

e top,rispetto al testo che circonda le immagini) e specifica l'allineamento del

<p align="center">[size=2] Guida creata per [URL=http://thebigworld.blogfree.net

e senza che ve le illustri ancora).

<table border="1" width="75%" ><caption><b>TITOLO</b></caption><thead>

<h1> Lezione n.29 "Raggruppare righe e colonne"</h1>

Ecco un esempio per capire meglio:

tatemi ([URL=?act=Msg&CODE=4&MID=2872324]FC[/URL] - [URL=http://blogfree.net/?ac

-<b>rows</b>:specifica la suddivisione della pagina in righe.

<b>N.B. </b><u>C' un importante differenza tra il tag body e il tag frameset,infa

[CODE]<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FRAMESET//EN" "http://www.w3

Visualizziamo i suoi attributi(oltre a quelli standard):

inviata in 2 step e non verranno visualizzati nella barra dei browser

che le scritte vengono criptate.

<h1>Lezione n.41 "Il tag button" </h1>

-<b>cols</b>:numero di caratteri contenuti in una riga di testo.

E' giunto il momento dei saluti,non perdetevi la prossima guida CSS

Potrebbero piacerti anche