passo 1 della guida 2 )
Tabelle
In HTML le tabelle sono degli strumenti molto utili per l'impaginazione e la formattazione dei contenuti delle pagine web, se utilizzate in modo corretto spesso sono la soluzione di molte problematiche e possono dare un aspetto grafico più gradevole al contenuto della pagina e all'organizzazione di dati, come schede prodotto, elenchi, ecc.
La tabella può essere sia visibile che invisibile, fissa oppure adattarsi ad una pagina ed essere formattata in varie maniere; si tratta di un elemento molto flessibile.
Il Tag "<table>"
La sintassi per creare una tabella di 2x2 celle è questa:
<table width="400" border="3" cellpadding="3" cellspacing="3">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
Il risultato nel browser è questo:
cella 1 cella 2
cella 3 cella 4
Analizziamo questo codice. I Tag per l'inizio e la fine della tabella sono "<table>...</table>", in mezzo a questi ci sono i Tag per la definizione di righe e colonne, ma vediamo gli attributi principali della tabella. L'attributo "width" ne determina la larghezza in pixel, se omesso la tabella si allargherà o restringerà a seconda del contenuto, è possibile inoltre specificare una larghezza della tabella in percentuale, se per esempio scriviamo come valore "70%" la tabella si dimensionerà automaticamente al 70% dello spazio disponibile adattandosi alla larghezza della finestra del . E' possibile anche specificare la proprietà "height" che ne specifica l'altezza, ma si consiglia di non usarla. L'attributo "border" specifica la larghezza del bordo, se come valore si da zero allora la tabella risulterà completamente trasparente però manterrà la forma e il contenuto, più si aumenta questo valore e più si otterrà un bordo ampio, come preimpostazione il bordo avrà un aspetto rialzato, ma anche i bordi possono essere colorati. Gli attributi "cellpadding" e "cellspacing" specificano rispettivamente lo spazio che c'è fra l'interno della cella e il proprio contenuto e lo spazio che c'è fra una cella e l'altra.
Per speficificare un colore di sfondo globale per la tabella basta aggiungere la proprietà "bgcolor" seguito da un valore esadecimale per il colore, in questo modo: bgcolor="#0000ff", e la tabella si colorerà tutta con quel colore.
Per specificare il colore del bordo chiaro bisogna aggiungere la proprietà "bordercolorlight" seguito da un valore esadecimale per il colore, la stessa cosa vale per il bordo scuro con la proprietà "bordercolordark"
Vediamo un esempio di codice per tutto ciò:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
Il risultato sarà:
cella 1 cella 2
cella 3 cella 4
E' possibile inoltre specificare un'immagine di sfondo, proprio come nel tag "<body>", in questo modo: background="sfondo.jpg"; un esempio pratico:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff" background="sfondo.jpg">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
risultato:
cella 1 cella 2
cella 3 cella 4
ll Tag <tr>
Il Tag "<tr>...</tr>" specifica l'inizio e la fine di una riga, ogni volta che avremo bisogno di una nuova riga bisognerà aggiungere questi due Tag fra "<table>...</table>", ma non è possibile inserire alcun contenuto in mezzo ai Tag che specificano la riga in quanto c'è comunque bisogno di specificare la colonna, anche se questa fosse unica.
Il Tag <td>
Il Tag "<td>...</td> specifica una colonna ed è proprio fra questi due che vengono inseriti i contenuti, praticamente tutti gli altri Tag costituiscono solo informazioni sulla struttura globale della tabella. Il contenuto di questo tag può essere qualsiasi cosa: un testo formattato e colorato, delle immagini, paragrafi o altre tabelle. Può anche essere colorato, avere degli sfondi grafici ed essere allineato.
Vediamo un esempio di tutto ciò:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff">
<tr>
<td bgcolor="#00FF00" align="center"><b><font face="arial">cella 1</font></b></td>
<td bgcolor="#0000FF" align="right"><font color="#ffff00" face="verdana" size="1">cella 2</font></td>
</tr>
<tr>
<td bgcolor="#800000" align="left"><b><i><font color="#ffffff">cella 3</font></i></b></td>
<td background="sfondo.jpg">cella 4</td>
</tr>
</table>
Il risultato sarà:
cella 1 cella 2
cella 3 cella 4
Il contenuto del Tag "<td>" può anche essere allineato verticalmente, utilizzando la proprietà "valign" assegnando i valori "top" (sopra), "middle" (centro) e "bottom" (sotto), come nell'esempio:
<table border="3" cellpadding="3" cellspacing="3" width="400" height="200">
<tr>
<td valign="top">cella 1</td>
<td valign="middle">cella 2</td>
<td valign="bottom">cella 3</td>
</tr>
</table>
Risultato:
cella 1 cella 2 cella 3
Tabelle dentro altre tabelle
E' possibile inserire tabelle dentro ad altre celle di una tabella preesistente, in modo molto semplice, basta reinserire il codice di un'intera tabella all'interno dei Tag "<td>...</td>", ad esempio:
<table border="3" cellpadding="3" cellspacing="3" width="400">
<tr>
<td valign="top">Tabella1<br>cella1
<table border="3" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td>Tabella2<br>cella1</td>
<td>Tabella2<br>cella2</td>
<td>Tabella2<br>cella3</td>
</tr>
<tr>
<td>Tabella2<br>cella4</td>
<td>Tabella2<br>cella5</td>
<td>Tabella2<br>cella6</td>
</tr>
</table>
</td>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella3</td>
</tr>
<tr>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella2</td>
</tr>
</table>
Il risultato è:
Tabella1
cella1 Tabella2
cella1 Tabella2
cella2 Tabella2
cella3
Tabella2
cella4 Tabella2
cella5 Tabella2
cella6
Tabella1
cella2 Tabella1
cella3
Tabella1
cella2 Tabella1
cella2 Tabella1
cella2
Unione di celle
Le celle di una tabella possono essere unite, sia in senso verticale che orizzontale, per creare impaginazioni particolari, questo si ottiene con gli attributi "rowspan" per unire verticalmente e con "colspan" per unire orizzontalmente. Ma vediamo un esempio pratico:
<table border="3" cellpadding="3" cellspacing="3">
<tr>
<td colspan="3">cella1</td>
<td>cella2</td>
</tr>
<tr>
<td rowspan="3">cella3</td>
<td>cella4</td>
<td>cella5</td>
<td>cella6</td>
</tr>
<tr>
<td>cella7</td>
<td>cella8</td>
<td>cella9</td>
</tr>
<tr>
<td>cella10</td>
<td>cella11</td>
<td>cella12</td>
</tr>
</table>
si ottiene
cella1 cella2
cella3 cella4 cella5 cella6
cella7 cella8 cella9
cella10 cella11 cella12
passo 2 della guida 2 )
Divisione delle pagine in Frame
Prima di iniziare a trattare questo argomento è necessario chiarire bene che i motori di ricerca non indicizzano i siti e le pagine web sviluppate con i frame, questi interrompono l'indicizzazione del sito non appena appare la struttura di un frame, fermandosi a quella pagina web, quindi se il sito è tutto sviluppato con i frame sin dalla prima pagina avete poche speranze che il sito abbia molte visite. Quindi dimenticatevi dei frame e sviluppate solo pagine intere. Se proprio avete vagliato ogni possibile soluzione e non vi resta altro che suddividere le vostre pagine in frame allora dovrete mettere un particolare impegno nella cura dei Meta Tags , del titolo e del contenuto che andrete a mettere in mezzo ai Tag "<noframes>...</noframes>", inoltre se sviluppate tutto un sito basato sui frame è buona norma affiancarlo ad un sito alternativo, magari solo testuale, in modo che i motori di ricerca possano indicizzare nei loro database tutte le pagine e sottopagine.
Una pagina in frame non è altro che un contenitore che contiene altre sottopagine, quindi se per esempio creiamo una pagina web suddivisa in due frame indipendenti ci ritroveremo a lavorare con 3 pagine web, cioè la prima che rappresenta la struttura base e altre due che riempiono questa struttura.
Per impostare una pagina in frame dovremo, come detto sopra, creare un documento HTML dove ci sarà specificata la struttura e le divisioni, poi altrettante pagine web (di contenuto) per quante divisioni avremo impostato. Un esempio di struttura base è questo:
<html>
<head>
<title>Titolo</title>
</head>
<frameset rows="100,*">
<frame name="intestazione" src="intestazione.htm">
<frame name="principale" src="principale.htm">
</frameset>
</html>
Per visualizzare il risultato clicca qui.
Come è possibile vedere dall'esempio abbiamo ottenuto una pagina web divisa in due frame orizzontali, che rappresentano due pagine indipendenti, questi due frame sono divisi da una barra che è possibile anche spostare ridimensionando così i frame stessi, se si vuole invece rendere invisibile questa barra divisoria basta aggiungere nel Tag "<frameset>" gli attributi: framespacing="0" border="0" frameborder="0" , in questo modo:
<frameset rows="100,*" framespacing="0" border="0" frameborder="0">
Righe e colonne
Il Tag "<frameset>" è quello che determina la struttura base delle divisioni della pagina che può essere divisa più volte in righe, tramite l'attributo "rows", e colonne, tramite l'attributo "cols", la larghezza, o altezza, di queste divisioni può essere specificata sia in pixel che in percentuale, per esempio se scriviamo:
<frameset cols="100,*,100">...</frameset>
avremo una pagina divista in tre frame verticali, di cui quello a sinistra e quello a destra saranno larghi 100 pixel, quello al centro invece si adatterà a quanto spazio disponibile è rimasto, indipendentemente dalla larghezza della finestra del browser.
Se scriviamo:
<frameset rows="20%,15%,*">
avremo una pagina web divisa in tre frame orizzontali, di cui il primo in alto sarà alto il 20% dell'altezza totale della finestra del browser, il secondo (in mezzo) il 15% dell'altezza totale della finestra del browser, e il terzo in basso prenderà tutto lo spazio rimasto disponibile.
Se scriviamo:
<frameset rows="*,*,*">
avremo una pagina web divisa in tre frame orizzontali, semplicemente divisi in parti uguali, ognuno di 1/3 l'altezza totale della finestra del browser.
Contenuti
Se per esempio dividiamo la pagina in tre colonne, quindi tre frames verticali, dovremo inserire altrettante pagine web di contenuto, tramite le istruzioni:
<frame name="sinistra" src="sx.htm">
<frame name="centro" src="centro.htm">
<frame name="destra" src="dx.htm">
queste vanno inserite ovviamente, come nell'esempio sopra, fra i Tag "<frameset>...</frameset>".
L'attributo "name" serve appunto per dare un nome al frame, questo sarà utile per la navigazione, infatti se c'e' un link nel primo frame che, al clic, deve far aprire una pagina web nel frame al centro, dovremo utilizzare l'attributo "target" nel link (come spiegato sopra nella sezione link), specificando il nome del frame che ospiterà la pagina web.
L'attributo "src" indica quale pagina web deve essere aperta inizialmente in quello specifico frame, come valore deve contenere il nome del file HTML.
Il Tag "<noframes>"
Questo Tag è molto utile per due ragioni principali, la prima è relativa ai motori di ricerca, in quanto possono indicizzare il contenuto che va inserito in questo Tag, la seconda è che da la possibilità, ai browser che non supportano i frame, di visualizzare comunque un minimo di contenuto.
Si utilizza così:
<frameset rows="100,*">
<frame name="intestazione">
<frame name="principale">
<noframes>
<body>
...contenuto...
</body>
</noframes>
</frameset>
Fra i Tag "<noframes>...</noframes>" va inserita una vera e propria pagina web completa, partendo da "<body>" fino a "</body>", è consigliabile sviluppare una pagina HTML testuale, completa di link alle sottopagine, poi fare copia/incolla del codice fra i due Tag, questo, come detto sopra, permetterà sia ai motori di ricerca di indicizzare un minimo di contenuto, che ai (pochi) utenti che non posseggono un browser aggiornato di visualizzare la pagina.
Frame dentro ad altri frame.
E' possibile nidificare le divisioni in frame in modo che la pagina sia divisa molte volte in sezioni che contengono altre sezioni, sia righe che colonne; vediamo un esempio:
<html>
<head>
<title>Titolo</title>
</head>
<frameset rows="100,*,100">
<frame name="sopra1" src="f1.htm">
<frameset cols="30%,*,30%">
<frame name="sinistra2" src="f2.htm">
<frameset rows="50%,*">
<frameset cols="30%,*,30%">
<frame name="sinistra4" src="f3.htm">
<frame name="destra4" src="f4.htm">
<frame name="destra4" src="f5.htm">
</frameset>
<frame name="sotto3" src="f6.htm">
</frameset>
<frame name="destra2" src="f7.htm">
</frameset>
<frame name="sotto1" src="f8.htm">
<noframes>
<body>
...contenuto...
</body>
</noframes>
</frameset>
</html>
Per visualizzare l'esempio pratico clicca qui.
Abbiamo ottenuto una pagina web con ben 8 divisioni, per cui sono stati necessari ben 9 file HTML!
passo 3 della guida 2 )
Form
Fino ad ora abbiamo visto come è possibile utilizzare i vari Tag HTML per descrivere l'aspetto di una pagina, però fin qui ci siamo limitati al senso unidirezionale del Web; per rendere bidirezionale, quindi interattiva, una pagina web si usano le Form, che servono per raccogliere dati che poi verranno elaborati da programmi (CGI) residenti sul server oppure da script inseriti nell'HTML.
Le Form vengono spesso anche utilizzate come modulo da compilare che poi verrà spedito ad un indirizzo email, questo richiede sempre un CGI o uno script che invii i dati ad un dato indirizzo di posta elettronica.
Ci sono molti siti in internet che offrono CGI e script gratuiti quindi se si ha bisogno di attuare qualcosa di specifico, come la lettura/scrittura di un database, l'invio di dati ad un indirizzo email, ecc, basta fare delle ricerche e molto probabilmente si troveranno esempi e tutorial completi di quel che si vuole attuare.
Il Tag "<form>"
Nel codice HTML le form sono delimitate dai Tag "<form>...</form>", fra questi due Tag ne vengono inseriti altri che specificano diversi tipi tipologie di immissione dati, opzioni, valori, ecc.
Ad ogni Form va sempre associata un'azione, cioè i dati specificati ed immessi dall'utente vengono inviati ad un CGI o ad uno script che li elabora e fa il lavoro e le procedure per cui è stato creato; la sintassi è questa:
<form method="post" action="cgi-bin/script.cgi">
...
</form>
La proprietà "action" indica al browser la posizione dello script che deve analizzare e processare i dati. E' possibile anche fare degli esperimenti con la Form immettendo la seguente stringa nel valore di "action", cioe': "mailto:tuoindirizzo@email.it", immettendo il tuo indirizzo email, ogni volta che si invierà la Form tramite l'apposito pulsante, i dati verranno inviati nella propria casella di posta elettronica, ma saranno pressochè illeggibili in quanto codificati, però risulta un buon metodo per fare degli esperimenti.
La proprietà "method" indica in che formato i dati devono essere inviati allo script, se si utilizza "get" il limite massimo di caratteri contenuti nella form è di 255, se si utilizza "post" i dati vengono inviati come un flusso direttamente al CGI quindi non c'è limite nella lunghezza dei dati.
Il Tag "<input>"
Questo Tag ha molteplici sfaccettature che permettono di utilizzarlo in molte maniere, specificando il tipo con "type", il nome con "name" e il valore con "value", ma vediamo alcuni esempi pratici:
Per inserimento di testi:
<input type="text" name="cognome" size="20">
Il risultato è:
Come tipo, cioe' "type", è stato specificato "text" e questo ha reso il tipo di input una casella di inserimento testo, come nome, cioe' "name", è stato specificato "cognome", quando i dati verranno inviati di conseguenza al CGI questi conterranno una variabile che si chiama "cognome" e che avrà come valore il testo che l'utente avra' inserito.
Opzioni con scelte multiple:
Colore Blu <input type="checkbox" name="colore" value="blu"><br>
Colore Verde <input type="checkbox" name="colore" value="verde"><br>
Colore Rosso <input type="checkbox" name="colore" value="rosso">
Il risultato è:
Colore Blu
Colore Verde
Colore Rosso
Il tipo di input "checkbox" permette di dare all'utente una serie di opzioni a selezione multipla, cioe' alla stessa variabile "colore" verrà assegnato un valore oppure più valori, come in un array.
Opzioni con scelta singola:
Colore Blu <input type="radio" name="colore" value="blu"><br>
Colore Verde <input type="radio" name="colore" value="verde"><br>
Colore Rosso <input type="radio" name="colore" value="rosso">
Il risultato è:
Colore Blu
Colore Verde
Colore Rosso
Contrariamente al tipo "checkbox", il tipo "radio" permette di dare una sola opzione possibile alla variabile "colore", infatti se si prova a selezionare un differente colore si noterà che il precedente selezionato si deseleziona automaticamente e all'invio della form, la variabile colore, avrà un solo valore.
Inserimento di password:
<input type="password" name="codicesegreto" size="20">
Il risultato è:
Usando il tipo "password" se si prova a inserire del testo nella casella si noterà che questo è mascherato.
Pulsante di invio della Form:
<input type="submit" name="pulsante" value="Invia">
Il risultato è:
Specificando il tipo "submit" il Tag si e' trasformato in un pulsante, che indica come scritta il testo che è specificato nella proprietà "value", e si utilizza alla fine della Form quando l'utente ha compilato tutto il resto delle caselle ed opzioni e vuole inviare tutti i dati al CGI, infatti premendo il pulsante tutti i dati immessi vengono raccolti, codificati e inviati al programma che li analizza e fa le procedure per cui è stato creato.
Per resettare la Form:
<input type="reset" value="Pulisci la form">
Il risultato è:
Il tipo "reset" di solito si affianca al tipo "submit", infatti "reset" serve per pulire la Form da tutti i dati immessi e ripristinare le condizioni iniziali.
Utilizzare un'immagine al posto di un pulsante.
<input type="image" src="invia.jpg">
Il risultato è:
Funziona esattamente come il tipo "submit" solo che e' possibile sostituire il pulsante con un'immagine.
Il Tag "<textarea>"
Con il Tag "<textarea>...</textarea>" è possibile utilizzare in una Form un'area di testo dove l'utente può inserire un testo lungo, per esempio per scrivere il testo di un messaggio, un curriculum, ecc. E' possibile utilizzare quest'area di testo anche al di fuori di una Form, per esempio per visualizzare un lungo testo in un'area ristretta senza inserire il testo medesimo in una lunga pagina.
Con il codice:
<textarea rows="6" name="messaggio" cols="41"></textarea>
si ottiene:
Dove l'utente può inserire un testo, se si vuole già inserire un testo nell'area di testo è sufficiente inserirlo nella posizione fra i due Tag "<textarea>...</textarea>".
Per specificare la larghezza e l'altezza dell'area di testo è sufficiente cambiare i valori di "rows" e "cols", rispettivamente per l'altezza e la larghezza.
Menù a tendina
E' possibile creare un menù a tendina con varie scelte, praticamente il concetto è lo stesso dell'input type radio o checkbox ma il menù a tendina permette di raggruppare in un piccolo spazio molte scelte, anche decine e decine.
La sintassi è questa:
<select name="scelta">
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
Il risultato è:
Scelta 1 Scelta 2 Scelta 3 Scelta 4 Scelta 5 Scelta 6 Scelta 7 Scelta 8 Scelta 9 Scelta 10
Se si vuole espandere il menù in modo che non sia a tendina, ma sia a scorrimento, bisogna specificarne l'altezza tramite "size", in questo modo:
<select name="scelta" size="4">
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
Il risultato sarà:
Scelta 1 Scelta 2 Scelta 3 Scelta 4 Scelta 5 Scelta 6 Scelta 7 Scelta 8 Scelta 9 Scelta 10
Se si vuole inoltre dare all'utente la possibilità di scegliere più di una voce nell'elenco, basta aggiungere la parola "multiple", in questo modo:
<select name="scelta" size="4" multiple>
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
E si avrà:
Scelta 1 Scelta 2 Scelta 3 Scelta 4 Scelta 5 Scelta 6 Scelta 7 Scelta 8 Scelta 9 Scelta 10
Sarà possibile scegliere più di una voce cliccando e tenendo premuto il tasto Control.
Esempio pratico di una Form completa
Per completare questa sezione scriviamo una Form completa con tutti gli elementi spiegati:
<form method="post" action="inviaemail.asp">
<input type="hidden" name="indirizzoemail" value="indirizzo@email.it">
Nome<br>
<input type="text" name="nome" size="20"><br>
<br>
Cognome<br>
<input type="text" name="cognome" size="20"><br>
<br>
Email<br>
<input type="text" name="email" size="20"><br>
<br>
Indirizzo completo<br>
<textarea rows="3" name="indirizzo" cols="27"></textarea><br>
<br>
Scelgli il prodotto<br>
<select size="1" name="prodotto">
<option>Servizio A</option>
<option>Servizio B</option>
<option>Servizio C</option>
<option>Servizio D</option>
<option>Servizio E</option>
<option>Servizio F</option>
<option>Servizio G</option>
<option>Servizio H</option>
</select><br>
<br>
Metodo di pagamento<br>
<input type="radio" value="cartadicredito" checked name="pagamento">Carta di
credito<br>
<input type="radio" name="pagamento" value="bonifico">Bonifico<br>
<input type="radio" name="pagamento" value="contrassegno">Contrassegno<br>
<br>
Servizi aggiuntivi<br>
<input type="checkbox" name="serviziaggiuntivi" value="domicilio">Spedizione a
domicilio<br>
<input type="checkbox" name="serviziaggiuntivi" value="assicurato">Pacco
assicurato<br>
<input type="checkbox" name="serviziaggiuntivi" value="urgente">Spedizione
urgente<br>
<br>
Messaggi e commenti eventuali<br>
<textarea rows="7" name="messaggio" cols="35"></textarea><br>
<br>
<input type="submit" value="Invia richiesta" name="B3">
<input type="reset" value="Cancella tutto" name="B4"><br>
<p> </p>
<p><input type="submit" value="Invia" name="B1">
<input type="reset" value="Reimposta" name="B2"></p>
</form>
Si ottiene:
Nome
Cognome
Email
Indirizzo completo
Scelgli il prodotto
Servizio A Servizio B Servizio C Servizio D Servizio E Servizio F Servizio G Servizio H
Metodo di pagamento
Carta di credito
Bonifico
Contrassegno
Servizi aggiuntivi
Spedizione a domicilio
Pacco assicurato
Spedizione urgente
Messaggi e commenti eventuali
e qui finisce tutta la guida di darkware ciao a tutti
fonte : asciitable
se vi piace datemi punti favore per la reputazione
))))))
Tabelle
In HTML le tabelle sono degli strumenti molto utili per l'impaginazione e la formattazione dei contenuti delle pagine web, se utilizzate in modo corretto spesso sono la soluzione di molte problematiche e possono dare un aspetto grafico più gradevole al contenuto della pagina e all'organizzazione di dati, come schede prodotto, elenchi, ecc.
La tabella può essere sia visibile che invisibile, fissa oppure adattarsi ad una pagina ed essere formattata in varie maniere; si tratta di un elemento molto flessibile.
Il Tag "<table>"
La sintassi per creare una tabella di 2x2 celle è questa:
<table width="400" border="3" cellpadding="3" cellspacing="3">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
Il risultato nel browser è questo:
cella 1 cella 2
cella 3 cella 4
Analizziamo questo codice. I Tag per l'inizio e la fine della tabella sono "<table>...</table>", in mezzo a questi ci sono i Tag per la definizione di righe e colonne, ma vediamo gli attributi principali della tabella. L'attributo "width" ne determina la larghezza in pixel, se omesso la tabella si allargherà o restringerà a seconda del contenuto, è possibile inoltre specificare una larghezza della tabella in percentuale, se per esempio scriviamo come valore "70%" la tabella si dimensionerà automaticamente al 70% dello spazio disponibile adattandosi alla larghezza della finestra del . E' possibile anche specificare la proprietà "height" che ne specifica l'altezza, ma si consiglia di non usarla. L'attributo "border" specifica la larghezza del bordo, se come valore si da zero allora la tabella risulterà completamente trasparente però manterrà la forma e il contenuto, più si aumenta questo valore e più si otterrà un bordo ampio, come preimpostazione il bordo avrà un aspetto rialzato, ma anche i bordi possono essere colorati. Gli attributi "cellpadding" e "cellspacing" specificano rispettivamente lo spazio che c'è fra l'interno della cella e il proprio contenuto e lo spazio che c'è fra una cella e l'altra.
Per speficificare un colore di sfondo globale per la tabella basta aggiungere la proprietà "bgcolor" seguito da un valore esadecimale per il colore, in questo modo: bgcolor="#0000ff", e la tabella si colorerà tutta con quel colore.
Per specificare il colore del bordo chiaro bisogna aggiungere la proprietà "bordercolorlight" seguito da un valore esadecimale per il colore, la stessa cosa vale per il bordo scuro con la proprietà "bordercolordark"
Vediamo un esempio di codice per tutto ciò:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
Il risultato sarà:
cella 1 cella 2
cella 3 cella 4
E' possibile inoltre specificare un'immagine di sfondo, proprio come nel tag "<body>", in questo modo: background="sfondo.jpg"; un esempio pratico:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff" background="sfondo.jpg">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
risultato:
cella 1 cella 2
cella 3 cella 4
ll Tag <tr>
Il Tag "<tr>...</tr>" specifica l'inizio e la fine di una riga, ogni volta che avremo bisogno di una nuova riga bisognerà aggiungere questi due Tag fra "<table>...</table>", ma non è possibile inserire alcun contenuto in mezzo ai Tag che specificano la riga in quanto c'è comunque bisogno di specificare la colonna, anche se questa fosse unica.
Il Tag <td>
Il Tag "<td>...</td> specifica una colonna ed è proprio fra questi due che vengono inseriti i contenuti, praticamente tutti gli altri Tag costituiscono solo informazioni sulla struttura globale della tabella. Il contenuto di questo tag può essere qualsiasi cosa: un testo formattato e colorato, delle immagini, paragrafi o altre tabelle. Può anche essere colorato, avere degli sfondi grafici ed essere allineato.
Vediamo un esempio di tutto ciò:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000" bordercolorlight="#ffff00" bgcolor="#ccffff">
<tr>
<td bgcolor="#00FF00" align="center"><b><font face="arial">cella 1</font></b></td>
<td bgcolor="#0000FF" align="right"><font color="#ffff00" face="verdana" size="1">cella 2</font></td>
</tr>
<tr>
<td bgcolor="#800000" align="left"><b><i><font color="#ffffff">cella 3</font></i></b></td>
<td background="sfondo.jpg">cella 4</td>
</tr>
</table>
Il risultato sarà:
cella 1 cella 2
cella 3 cella 4
Il contenuto del Tag "<td>" può anche essere allineato verticalmente, utilizzando la proprietà "valign" assegnando i valori "top" (sopra), "middle" (centro) e "bottom" (sotto), come nell'esempio:
<table border="3" cellpadding="3" cellspacing="3" width="400" height="200">
<tr>
<td valign="top">cella 1</td>
<td valign="middle">cella 2</td>
<td valign="bottom">cella 3</td>
</tr>
</table>
Risultato:
cella 1 cella 2 cella 3
Tabelle dentro altre tabelle
E' possibile inserire tabelle dentro ad altre celle di una tabella preesistente, in modo molto semplice, basta reinserire il codice di un'intera tabella all'interno dei Tag "<td>...</td>", ad esempio:
<table border="3" cellpadding="3" cellspacing="3" width="400">
<tr>
<td valign="top">Tabella1<br>cella1
<table border="3" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td>Tabella2<br>cella1</td>
<td>Tabella2<br>cella2</td>
<td>Tabella2<br>cella3</td>
</tr>
<tr>
<td>Tabella2<br>cella4</td>
<td>Tabella2<br>cella5</td>
<td>Tabella2<br>cella6</td>
</tr>
</table>
</td>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella3</td>
</tr>
<tr>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella2</td>
</tr>
</table>
Il risultato è:
Tabella1
cella1 Tabella2
cella1 Tabella2
cella2 Tabella2
cella3
Tabella2
cella4 Tabella2
cella5 Tabella2
cella6
Tabella1
cella2 Tabella1
cella3
Tabella1
cella2 Tabella1
cella2 Tabella1
cella2
Unione di celle
Le celle di una tabella possono essere unite, sia in senso verticale che orizzontale, per creare impaginazioni particolari, questo si ottiene con gli attributi "rowspan" per unire verticalmente e con "colspan" per unire orizzontalmente. Ma vediamo un esempio pratico:
<table border="3" cellpadding="3" cellspacing="3">
<tr>
<td colspan="3">cella1</td>
<td>cella2</td>
</tr>
<tr>
<td rowspan="3">cella3</td>
<td>cella4</td>
<td>cella5</td>
<td>cella6</td>
</tr>
<tr>
<td>cella7</td>
<td>cella8</td>
<td>cella9</td>
</tr>
<tr>
<td>cella10</td>
<td>cella11</td>
<td>cella12</td>
</tr>
</table>
si ottiene
cella1 cella2
cella3 cella4 cella5 cella6
cella7 cella8 cella9
cella10 cella11 cella12
passo 2 della guida 2 )
Divisione delle pagine in Frame
Prima di iniziare a trattare questo argomento è necessario chiarire bene che i motori di ricerca non indicizzano i siti e le pagine web sviluppate con i frame, questi interrompono l'indicizzazione del sito non appena appare la struttura di un frame, fermandosi a quella pagina web, quindi se il sito è tutto sviluppato con i frame sin dalla prima pagina avete poche speranze che il sito abbia molte visite. Quindi dimenticatevi dei frame e sviluppate solo pagine intere. Se proprio avete vagliato ogni possibile soluzione e non vi resta altro che suddividere le vostre pagine in frame allora dovrete mettere un particolare impegno nella cura dei Meta Tags , del titolo e del contenuto che andrete a mettere in mezzo ai Tag "<noframes>...</noframes>", inoltre se sviluppate tutto un sito basato sui frame è buona norma affiancarlo ad un sito alternativo, magari solo testuale, in modo che i motori di ricerca possano indicizzare nei loro database tutte le pagine e sottopagine.
Una pagina in frame non è altro che un contenitore che contiene altre sottopagine, quindi se per esempio creiamo una pagina web suddivisa in due frame indipendenti ci ritroveremo a lavorare con 3 pagine web, cioè la prima che rappresenta la struttura base e altre due che riempiono questa struttura.
Per impostare una pagina in frame dovremo, come detto sopra, creare un documento HTML dove ci sarà specificata la struttura e le divisioni, poi altrettante pagine web (di contenuto) per quante divisioni avremo impostato. Un esempio di struttura base è questo:
<html>
<head>
<title>Titolo</title>
</head>
<frameset rows="100,*">
<frame name="intestazione" src="intestazione.htm">
<frame name="principale" src="principale.htm">
</frameset>
</html>
Per visualizzare il risultato clicca qui.
Come è possibile vedere dall'esempio abbiamo ottenuto una pagina web divisa in due frame orizzontali, che rappresentano due pagine indipendenti, questi due frame sono divisi da una barra che è possibile anche spostare ridimensionando così i frame stessi, se si vuole invece rendere invisibile questa barra divisoria basta aggiungere nel Tag "<frameset>" gli attributi: framespacing="0" border="0" frameborder="0" , in questo modo:
<frameset rows="100,*" framespacing="0" border="0" frameborder="0">
Righe e colonne
Il Tag "<frameset>" è quello che determina la struttura base delle divisioni della pagina che può essere divisa più volte in righe, tramite l'attributo "rows", e colonne, tramite l'attributo "cols", la larghezza, o altezza, di queste divisioni può essere specificata sia in pixel che in percentuale, per esempio se scriviamo:
<frameset cols="100,*,100">...</frameset>
avremo una pagina divista in tre frame verticali, di cui quello a sinistra e quello a destra saranno larghi 100 pixel, quello al centro invece si adatterà a quanto spazio disponibile è rimasto, indipendentemente dalla larghezza della finestra del browser.
Se scriviamo:
<frameset rows="20%,15%,*">
avremo una pagina web divisa in tre frame orizzontali, di cui il primo in alto sarà alto il 20% dell'altezza totale della finestra del browser, il secondo (in mezzo) il 15% dell'altezza totale della finestra del browser, e il terzo in basso prenderà tutto lo spazio rimasto disponibile.
Se scriviamo:
<frameset rows="*,*,*">
avremo una pagina web divisa in tre frame orizzontali, semplicemente divisi in parti uguali, ognuno di 1/3 l'altezza totale della finestra del browser.
Contenuti
Se per esempio dividiamo la pagina in tre colonne, quindi tre frames verticali, dovremo inserire altrettante pagine web di contenuto, tramite le istruzioni:
<frame name="sinistra" src="sx.htm">
<frame name="centro" src="centro.htm">
<frame name="destra" src="dx.htm">
queste vanno inserite ovviamente, come nell'esempio sopra, fra i Tag "<frameset>...</frameset>".
L'attributo "name" serve appunto per dare un nome al frame, questo sarà utile per la navigazione, infatti se c'e' un link nel primo frame che, al clic, deve far aprire una pagina web nel frame al centro, dovremo utilizzare l'attributo "target" nel link (come spiegato sopra nella sezione link), specificando il nome del frame che ospiterà la pagina web.
L'attributo "src" indica quale pagina web deve essere aperta inizialmente in quello specifico frame, come valore deve contenere il nome del file HTML.
Il Tag "<noframes>"
Questo Tag è molto utile per due ragioni principali, la prima è relativa ai motori di ricerca, in quanto possono indicizzare il contenuto che va inserito in questo Tag, la seconda è che da la possibilità, ai browser che non supportano i frame, di visualizzare comunque un minimo di contenuto.
Si utilizza così:
<frameset rows="100,*">
<frame name="intestazione">
<frame name="principale">
<noframes>
<body>
...contenuto...
</body>
</noframes>
</frameset>
Fra i Tag "<noframes>...</noframes>" va inserita una vera e propria pagina web completa, partendo da "<body>" fino a "</body>", è consigliabile sviluppare una pagina HTML testuale, completa di link alle sottopagine, poi fare copia/incolla del codice fra i due Tag, questo, come detto sopra, permetterà sia ai motori di ricerca di indicizzare un minimo di contenuto, che ai (pochi) utenti che non posseggono un browser aggiornato di visualizzare la pagina.
Frame dentro ad altri frame.
E' possibile nidificare le divisioni in frame in modo che la pagina sia divisa molte volte in sezioni che contengono altre sezioni, sia righe che colonne; vediamo un esempio:
<html>
<head>
<title>Titolo</title>
</head>
<frameset rows="100,*,100">
<frame name="sopra1" src="f1.htm">
<frameset cols="30%,*,30%">
<frame name="sinistra2" src="f2.htm">
<frameset rows="50%,*">
<frameset cols="30%,*,30%">
<frame name="sinistra4" src="f3.htm">
<frame name="destra4" src="f4.htm">
<frame name="destra4" src="f5.htm">
</frameset>
<frame name="sotto3" src="f6.htm">
</frameset>
<frame name="destra2" src="f7.htm">
</frameset>
<frame name="sotto1" src="f8.htm">
<noframes>
<body>
...contenuto...
</body>
</noframes>
</frameset>
</html>
Per visualizzare l'esempio pratico clicca qui.
Abbiamo ottenuto una pagina web con ben 8 divisioni, per cui sono stati necessari ben 9 file HTML!
passo 3 della guida 2 )
Form
Fino ad ora abbiamo visto come è possibile utilizzare i vari Tag HTML per descrivere l'aspetto di una pagina, però fin qui ci siamo limitati al senso unidirezionale del Web; per rendere bidirezionale, quindi interattiva, una pagina web si usano le Form, che servono per raccogliere dati che poi verranno elaborati da programmi (CGI) residenti sul server oppure da script inseriti nell'HTML.
Le Form vengono spesso anche utilizzate come modulo da compilare che poi verrà spedito ad un indirizzo email, questo richiede sempre un CGI o uno script che invii i dati ad un dato indirizzo di posta elettronica.
Ci sono molti siti in internet che offrono CGI e script gratuiti quindi se si ha bisogno di attuare qualcosa di specifico, come la lettura/scrittura di un database, l'invio di dati ad un indirizzo email, ecc, basta fare delle ricerche e molto probabilmente si troveranno esempi e tutorial completi di quel che si vuole attuare.
Il Tag "<form>"
Nel codice HTML le form sono delimitate dai Tag "<form>...</form>", fra questi due Tag ne vengono inseriti altri che specificano diversi tipi tipologie di immissione dati, opzioni, valori, ecc.
Ad ogni Form va sempre associata un'azione, cioè i dati specificati ed immessi dall'utente vengono inviati ad un CGI o ad uno script che li elabora e fa il lavoro e le procedure per cui è stato creato; la sintassi è questa:
<form method="post" action="cgi-bin/script.cgi">
...
</form>
La proprietà "action" indica al browser la posizione dello script che deve analizzare e processare i dati. E' possibile anche fare degli esperimenti con la Form immettendo la seguente stringa nel valore di "action", cioe': "mailto:tuoindirizzo@email.it", immettendo il tuo indirizzo email, ogni volta che si invierà la Form tramite l'apposito pulsante, i dati verranno inviati nella propria casella di posta elettronica, ma saranno pressochè illeggibili in quanto codificati, però risulta un buon metodo per fare degli esperimenti.
La proprietà "method" indica in che formato i dati devono essere inviati allo script, se si utilizza "get" il limite massimo di caratteri contenuti nella form è di 255, se si utilizza "post" i dati vengono inviati come un flusso direttamente al CGI quindi non c'è limite nella lunghezza dei dati.
Il Tag "<input>"
Questo Tag ha molteplici sfaccettature che permettono di utilizzarlo in molte maniere, specificando il tipo con "type", il nome con "name" e il valore con "value", ma vediamo alcuni esempi pratici:
Per inserimento di testi:
<input type="text" name="cognome" size="20">
Il risultato è:
Come tipo, cioe' "type", è stato specificato "text" e questo ha reso il tipo di input una casella di inserimento testo, come nome, cioe' "name", è stato specificato "cognome", quando i dati verranno inviati di conseguenza al CGI questi conterranno una variabile che si chiama "cognome" e che avrà come valore il testo che l'utente avra' inserito.
Opzioni con scelte multiple:
Colore Blu <input type="checkbox" name="colore" value="blu"><br>
Colore Verde <input type="checkbox" name="colore" value="verde"><br>
Colore Rosso <input type="checkbox" name="colore" value="rosso">
Il risultato è:
Colore Blu
Colore Verde
Colore Rosso
Il tipo di input "checkbox" permette di dare all'utente una serie di opzioni a selezione multipla, cioe' alla stessa variabile "colore" verrà assegnato un valore oppure più valori, come in un array.
Opzioni con scelta singola:
Colore Blu <input type="radio" name="colore" value="blu"><br>
Colore Verde <input type="radio" name="colore" value="verde"><br>
Colore Rosso <input type="radio" name="colore" value="rosso">
Il risultato è:
Colore Blu
Colore Verde
Colore Rosso
Contrariamente al tipo "checkbox", il tipo "radio" permette di dare una sola opzione possibile alla variabile "colore", infatti se si prova a selezionare un differente colore si noterà che il precedente selezionato si deseleziona automaticamente e all'invio della form, la variabile colore, avrà un solo valore.
Inserimento di password:
<input type="password" name="codicesegreto" size="20">
Il risultato è:
Usando il tipo "password" se si prova a inserire del testo nella casella si noterà che questo è mascherato.
Pulsante di invio della Form:
<input type="submit" name="pulsante" value="Invia">
Il risultato è:
Specificando il tipo "submit" il Tag si e' trasformato in un pulsante, che indica come scritta il testo che è specificato nella proprietà "value", e si utilizza alla fine della Form quando l'utente ha compilato tutto il resto delle caselle ed opzioni e vuole inviare tutti i dati al CGI, infatti premendo il pulsante tutti i dati immessi vengono raccolti, codificati e inviati al programma che li analizza e fa le procedure per cui è stato creato.
Per resettare la Form:
<input type="reset" value="Pulisci la form">
Il risultato è:
Il tipo "reset" di solito si affianca al tipo "submit", infatti "reset" serve per pulire la Form da tutti i dati immessi e ripristinare le condizioni iniziali.
Utilizzare un'immagine al posto di un pulsante.
<input type="image" src="invia.jpg">
Il risultato è:
Funziona esattamente come il tipo "submit" solo che e' possibile sostituire il pulsante con un'immagine.
Il Tag "<textarea>"
Con il Tag "<textarea>...</textarea>" è possibile utilizzare in una Form un'area di testo dove l'utente può inserire un testo lungo, per esempio per scrivere il testo di un messaggio, un curriculum, ecc. E' possibile utilizzare quest'area di testo anche al di fuori di una Form, per esempio per visualizzare un lungo testo in un'area ristretta senza inserire il testo medesimo in una lunga pagina.
Con il codice:
<textarea rows="6" name="messaggio" cols="41"></textarea>
si ottiene:
Dove l'utente può inserire un testo, se si vuole già inserire un testo nell'area di testo è sufficiente inserirlo nella posizione fra i due Tag "<textarea>...</textarea>".
Per specificare la larghezza e l'altezza dell'area di testo è sufficiente cambiare i valori di "rows" e "cols", rispettivamente per l'altezza e la larghezza.
Menù a tendina
E' possibile creare un menù a tendina con varie scelte, praticamente il concetto è lo stesso dell'input type radio o checkbox ma il menù a tendina permette di raggruppare in un piccolo spazio molte scelte, anche decine e decine.
La sintassi è questa:
<select name="scelta">
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
Il risultato è:
Scelta 1 Scelta 2 Scelta 3 Scelta 4 Scelta 5 Scelta 6 Scelta 7 Scelta 8 Scelta 9 Scelta 10
Se si vuole espandere il menù in modo che non sia a tendina, ma sia a scorrimento, bisogna specificarne l'altezza tramite "size", in questo modo:
<select name="scelta" size="4">
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
Il risultato sarà:
Scelta 1 Scelta 2 Scelta 3 Scelta 4 Scelta 5 Scelta 6 Scelta 7 Scelta 8 Scelta 9 Scelta 10
Se si vuole inoltre dare all'utente la possibilità di scegliere più di una voce nell'elenco, basta aggiungere la parola "multiple", in questo modo:
<select name="scelta" size="4" multiple>
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
E si avrà:
Scelta 1 Scelta 2 Scelta 3 Scelta 4 Scelta 5 Scelta 6 Scelta 7 Scelta 8 Scelta 9 Scelta 10
Sarà possibile scegliere più di una voce cliccando e tenendo premuto il tasto Control.
Esempio pratico di una Form completa
Per completare questa sezione scriviamo una Form completa con tutti gli elementi spiegati:
<form method="post" action="inviaemail.asp">
<input type="hidden" name="indirizzoemail" value="indirizzo@email.it">
Nome<br>
<input type="text" name="nome" size="20"><br>
<br>
Cognome<br>
<input type="text" name="cognome" size="20"><br>
<br>
Email<br>
<input type="text" name="email" size="20"><br>
<br>
Indirizzo completo<br>
<textarea rows="3" name="indirizzo" cols="27"></textarea><br>
<br>
Scelgli il prodotto<br>
<select size="1" name="prodotto">
<option>Servizio A</option>
<option>Servizio B</option>
<option>Servizio C</option>
<option>Servizio D</option>
<option>Servizio E</option>
<option>Servizio F</option>
<option>Servizio G</option>
<option>Servizio H</option>
</select><br>
<br>
Metodo di pagamento<br>
<input type="radio" value="cartadicredito" checked name="pagamento">Carta di
credito<br>
<input type="radio" name="pagamento" value="bonifico">Bonifico<br>
<input type="radio" name="pagamento" value="contrassegno">Contrassegno<br>
<br>
Servizi aggiuntivi<br>
<input type="checkbox" name="serviziaggiuntivi" value="domicilio">Spedizione a
domicilio<br>
<input type="checkbox" name="serviziaggiuntivi" value="assicurato">Pacco
assicurato<br>
<input type="checkbox" name="serviziaggiuntivi" value="urgente">Spedizione
urgente<br>
<br>
Messaggi e commenti eventuali<br>
<textarea rows="7" name="messaggio" cols="35"></textarea><br>
<br>
<input type="submit" value="Invia richiesta" name="B3">
<input type="reset" value="Cancella tutto" name="B4"><br>
<p> </p>
<p><input type="submit" value="Invia" name="B1">
<input type="reset" value="Reimposta" name="B2"></p>
</form>
Si ottiene:
Nome
Cognome
Indirizzo completo
Scelgli il prodotto
Servizio A Servizio B Servizio C Servizio D Servizio E Servizio F Servizio G Servizio H
Metodo di pagamento
Carta di credito
Bonifico
Contrassegno
Servizi aggiuntivi
Spedizione a domicilio
Pacco assicurato
Spedizione urgente
Messaggi e commenti eventuali
e qui finisce tutta la guida di darkware ciao a tutti
fonte : asciitable
se vi piace datemi punti favore per la reputazione
))))))