WebLink - Tutto per la costruzione delle tue pagine web.

Spiacente, il tuo browser non supporta i frames.


Guida Html di WebLink - Tutto per la costruzione delle tue pagine web

Audio

La musica, il suono Non sarà indispensabile ma spesso fa piacere essere accompagnati da una buona musica di sottofondo, mentre si navigano pagine web. Due sono gli elementi possibili: BGSOUND e EMBED. Il primo, supportato dai browser MS IE e dal browser OPERA, mentre il secondo dai browser NS e da quelli MS IE a partire dalla versione 4.0 in poi.

<BGSOUND>

L'elemento <BGSOUND> supporta attributi quali: SRC e LOOP, vediamoli:

SRC

L'attributo SRC specifica l'indirizzo di un suono da riprodurre, questo può essere in formato wav , midi, mp3 o qualsiasi altro purchè supportato dal vostro plug-in. Per ovvie ragioni di "peso" è preferibile adoperare un file di tipo midi. Vediamo un esempio:

<BGSOUND SRC="midi.mid">

LOOP

Con questo sistema il brano sarà avviato una sola volta ed automaticamente senza alcun intervento da parte del navigatore. E' possibile stabilire quante volte il brano dovrà essere ripetuto, oppure decidere per una riproduzione all'infinito, per fare questo si adopera l'attributo LOOP.

<BGSOUND SRC="midi.mid" LOOP="infinite">

Anche in questo caso il brano sarà avviato automaticamente senza alcun intervento da parte del navigatore e sarà ripetuto all'infinito solo un cambio pagina fermerà la musica. Al posto di infinite si potrebbe mettere un numero qualsiasi equivalente al numero di volte che il brano dovrà essere ripetuto.

<EMBED>

L'elemento <EMBED> supporta attributi quali: SRC LOOP AUTOSTART WIDTH HEIGTH ed è riconosciuto dai browser NS e IE , quest'ultimo a partire dalla versione 4.0. Vediamo questi attributi:

SRC

L'attributo SRC specifica l'indirizzo di un suono da riprodurre, questo può essere in formato wav, midi, mp3 o qualsiasi altro formato valido e supportato dal plug-in. Per ovvie ragioni di "peso" è preferibile adoperare un file di tipo midi. Se non vengono specificate alcune dimensioni i browser IE visualizzano l'intera interfaccia grafica, per offrire il controllo diretto sul player, quindi volume, avvio, stop, pausa. Vediamo un esempio:

<EMBED SRC="midi.mid">

LOOP

E' possibile stabilire quante volte il brano dovrà essere ripetuto, oppure decidere per una riproduzione all'infinito, per fare questo si adopera l'attributo LOOP.

<EMBED SRC="midi.mid" LOOP="infinite">

Anche in questo caso il brano sarà avviato automaticamente, senza cioè alcun intervento da parte del navigatore, e sarà ripetuto all'infinito. Soltanto un cambio pagina fermerà la musica. Al posto di "infinite" si potrebbe mettere il numero equivalente alle volte che il brano dovrà essere ripetuto.

AUTOSTART

E' possibile stabilire se la musica dovrà avviarsi da sola oppure no. Autostart accetta come parametri true o false rispettivamente per avviare o meno la musica.

<EMBED SRC="midi.mid" autostart="False">

WIDTH e HEIGTH

E' possibile stabilire la porzione dell'interfaccia da visualizzare. Questa varia a seconda del browser adoperato, per IE la mancanza di valori farà si che sia vista per intero. A volte è più comodo avere solo i pulsanti... vediamo come.

<EMBED SRC="midi.mid" autostart="False" WIDTH="145" HEIGHT="35">

Queste dimensioni variano a seconda del tipo di browser adoperato, per questo motivo è preferibile non far vedere alcuna interfaccia, oppure affidarsi ad uno script che una volta intercettato il tipo di browser richiami o una dimensione o l'latra. Si veda a questo proposito la mia sez. F.A.Q.

© Andrea Bianchi 1997 ~ 2002


Struttura

Si potrebbe decidere quali elementi (tags) adoperare a seconda di quello che abbiamo intenzione di fare. Questo linguaggio non ha variabili da dichiarare o cose di questo genere, ma ha comunque delle regole da rispettare, la più importate di queste regole è la struttura entro la quale lavorano tutti i singoli elementi, questa dovrà essere sempre presente su ogni pagina che andremo a creare, vediamo come è composta questa struttura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>la mia prima pagina web</title>

</head>

<body>

<p>Ecco la mia prima pagina in html destinata al web.</p>

</body>

</html>

Di tutto il codice scritto sopra, noi vedremo soltanto ciò che è stato scritto nel corpo (body) del listato; quindi fra gli elementi <body> e </body>:

Ecco la mia prima pagina in html destinata al web.

Ogni pagina html grande o piccola che sia dovrà obbligatoriamente avere sempre i due tags di definizione <html></html>, i due tags per la testata <head></head>, il tag per il titolo <title></title>, i due tags per il corpo <body></body>, ed anche un prologo <doctype> anche se quest'ultimo non è obbligatorio, è comunque consigliato.

Vediamo in dettaglio tutte queste cose:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    2. Questa prima riga chiamata "prologo" è solitamente generata in modo automatico dall'editor visuale o testuale che sia, non è obbligatoria ed ha il solo compito di informare il browser che si tratta di un documento html relativo a determinate specifiche del w3c, in questo caso versione 4.0

  2. <html>

    3. Inizio codice html vero e proprio, tutto ciò che sarà posto all'interno di questo documento e fino al relativo tag di chiusura sarà inteso come struttura del codice html

  4. <head>

    5. Testata o head del documento, in questa sezione trovano posto tutti quei tags che impartiscono direttive al browser quali: titolo, comandi Meta, richiami ai fogli di stile, scripts.
    Tutto ciò che si trova all'interno della struttura head non sarà visualizzato ma interpretato dal browser, una zona quindi destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche.

  5. </head>
  6. <body>

    7. Corpo o body del documento, è in questa sezione che lavoreremo maggiormente ed è proprio qui che andranno messe immagini, suoni , filmati, testo, form, tabelle, links e quant'altro faccia parte di html.

  7. </body>

  9. </html>

Chiusura dei vari elementi (tags), da non dimenticare mai, solo cosi' potremo avere la certezza di una giusta e corretta interpretazione da parte del browser.

I tags possono essere scritti indifferentemente sia in minuscolo che in maiuscolo, gli spazi lasciati fra un tag e l'altro e fra una parola e l'altra saranno ignorati.


Contenitore musica immagini

micio.jpg (2500 byte) questo foglio serve solo come contenitore per il file midi e per le immagini del applet


Elementi della Struttura

Identificatore di prologo

Affinchè un documento sia identificato come HTML, esso deve iniziare con il prologo: !DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Questo tipo di riga chiamata prologo, è solitamente generata in modo automatico dall'editor che adoperate, visuale o testuale che sia. Non è obbligatoria ed ha il solo compito di informare il browser che si tratta di un documento html relativo a determinate specifiche, in mancanza di questa dichiarazione il documento sarà identificato come rispondente alla specifica HTML 2.0

<HTML>...</HTML>

L'elemento <HTML> identifica un documento che contiene elementi HTML, esso dovrebbe seguire l'identificatore di prologo e circondare tutto il testo restante, inclusi tutti gli altri elementi o tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

la parte restante del documento

</html>

<HEAD>...</HEAD>

L'elemento <HEAD> viene utilizzato per fornire informazioni sul documento, in questa sezione trovano posto tutti quei tags che impartiscono direttive ai browser quali: titolo, Meta comandi , richiami ai fogli di stile, script.

Notare che tutto ciò che si trova all'interno della struttura head non sarà visualizzato, ma interpretato dal browser, quindi una zona destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

elementi di informazione quali:

 <BASE>
<LINK>
<META>
<STYLE>
<TITLE>
<SCRIPT>

</head>

la parte restante del documento

</html>

<BASE>

Consente di specificare la destinazione per tutti i link della pagina, qualora questa fosse strutturata in frames:

<BASE TARGET="nome_del_frame_sul_quale_aprire_i_links">

<LINK>

Ha diverse funzioni ma la più adoperata è il richiamo a fogli di style esterni:

<LINK REL="stylesheet href="weblink.css" type="text/css">

<META>

Sono davvero molti i Meta Comandi che si possono inserire:

<META HTTP EQUIV="clicca questo link per un elenco completo.">

<STYLE>...</STYLE>

Sono molti gli attributi di style che si possono inserire:

<STYLE TYPE="text/css"clicca questo link per un'ampia panoramica.">

<TITLE>...</TITLE>

Il titolo da assegnare alla pagina.

<Title>Web-Link - Tutto per la costruzione delle tue pagine web</Title>

<SCRIPT>...</SCRIPT>

Inserimento di funzioni o altro, sotto forma di script:

<script LANGUAGE="JavaScript" type="text/javascript">......</script>

<BODY>...</BODY>

L'elemento <BODY> contiene la pagina vera e propria, o almeno quello che si vedrà a video. Quindi il testo, le immagini e tutti gli elementi che forniscono il controllo e la formattazione della pagina stessa. I possibili attributo sono : Background, Bgcolors, Bgproperties, Link, Vlink, Alink, Text, Topmargin, Bottommargin, Leftmargin, Rightmargin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<Title> la mia prima pagina web </Title>

</head>

<body>

Molti gli attributi associabili a questo tag:

BACKGROUND
BGPROPERTIES
BGCOLOR
LINK
VLINK
ALINK
TEXT
TOPMARGIN
BOTTOMMARGIN
LEFTMARGIN
RIGHTMARGIN

la parte restante del documento

</body>

</html>

BACKGROUND

Permette di adoperare un'immagine come sfondo della pagina, immagine che dovrà essere di tipo .gif .jpg o .png. Indipendentemente dalle dimensioni verrà usata a riempimento di tutta la finestra del browser, qualunque sia la sua dimensione e risoluzione del video:

<body background="nome_immagine.gif">

E' possibile richiamare l'immagine anche da altro sito, specificandone l'indirizzo completo (URL)

<body background="http://freeweb.org/inernet/ab/nome_immagine.gif">

BGPROPERTIES

L'immagine adoperata a riempimento può essere tenuta ferma durante lo spostamento verticale (scrolling) sulla pagina, dando l'impressione di scivolare con le immagini e i testi sullo sfondo, operazione per altro possibile soltanto con i browser IE

<body background="nome_immagine.gif" bgproperties="fixed">

BGCOLOR

Si adopera questo attributo per colorare lo sfondo della pagina di una tinta unita, il colore può essere espresso sia col nome inglese che nel relativo codice esadecimale.

<body bgcolor="green">

oppure

<body bgcolor="#006600">

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori.

LINK

Si adopera questo attributo per decidere il colore di tutti i links facenti parte della pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale.

<body link="green">

oppure

<body link="#006600">

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è blù (blue) #0000ff

VLINK

Si adopera questo attributo per decidere il colore di tutti i links, dopo che questi sono stati visitati, può essere espresso sia col nome inglese che col relativo codice esadecimale.

<body vlink="green">

oppure

<body vlink="#006600">

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è porpora (purple) #800080

ALINK

Si adopera questo attributo per decidere il colore di tutti i links attivi, colore che cammbierà nel moneto del clik su di esso, può essere espresso sia col nome inglese che col relativo codice esadecimale.

<body alink="green">

oppure

<body alink="#006600">

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è rosso (red) #ff0000

TEXT

Si adopera questo attributo per decidere il colore di tutto il testo nella pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale.

<body text="green">

oppure

<body text="#006600">

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Fate attenzione a non assegnare colori assomiglianti allo sfondo, scelta che renderebbe il testo quasi invisibile.

MARGINI

Topmargin, Bottommargin, Leftmargin, Rightmargin sono i quattro attributi per definire la distanza in pixel rispettivamente da: margine superiore, margine inferiore, margine sinistro e margine destro. Un margine uguale a zero farà si che il testo inizi praticamente sul bordo della finestra del browser.

<body topmargin="30">

<body bottommargin="30">

<body leftmargin="30">

<body rightmargin="30">

ESEMPIO

Riassumendo, questa potrebbe essere una definizione del corpo (body), di una pagina che abbia uno sfondo come riempimento, e questo resti fisso durante le operazioni di spostamento (scrolling), con un testo di colore nero, i links di colore rosso, i links visitati di colore verde, il tutto con una distanza dai quattro margini di 50 pixel.

<body background="nome_immagine.gif" bgproperties="fixed" text="black" link="red" vlink="green" topmargin="50" bottommargin="50" leftmargin="50" rightmargin="50" >


Elenchi

Spesso su una pagina web si ha la necessità di descrivere voci o altro sottoforma di elenchi, html offre questa possibilità con il tag <LI> (voce dell'elenco) che in abbinamento con uno degli altri tags permette di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.

<LI>

Elemento voce dell'elenco, da solo serve a poco, deve essere combinato con altri elementi descritti sotto.

<DIR>...</DIR>

L'elemento <DIR> può essere utilizzato per un elenco di voci disposte su colonne, per default la larghezza è di 24 caratteri, al suo interno si adopera <LI> come voce dell'elenco.

<DIR>

<LI>WebLink

<LI>CSS

<LI>META

<LI>FAQ

</DIR>

 Questo il risultato:
  • WebLink
  • CSS
  • META
  • FAQ
    •

    <DL>...</DL>

    L'elemento <DL> accetta al suo interno gli elementi <DT> e <DD> come voci dell'elenco. L'elemento <DT> riserva un terzo dello schermo per la voce descritta, mentre il restante è assegnato all'elemento <DD> che porta la descrizione una riga sotto.

    <DL>

    <DT>WebLink<DD>Tutto per la tua home page

    <DT>CSS <DD>Cascading Style Sheets

    <DT>META <DD>Comandi Speciali

    <DT>FAQ <DD>Le domande frequenti

    </DL>

             Questo il risultato:
    Web-Link
    Tutto per la tua home page
    CSS
    Cascading Style Sheets
    META
    Comandi Speciali
    FAQ
    Le domande frequenti

    E' possibile ridurre lo spazio fra le righe nel caso in cui l'elenco fosse molto lungo, per fare questo si adopera l'attributo COMPACT nel tag <DL>

    <DL COMPACT>

             Questo il risultato:
    WebLink
    Tutto per la tua home page
    CSS
    Cascading Style Sheets
    META
    Comandi Speciali
    FAQ
    Le domande frequenti

    <MENU>...</MENU>

    L'elemento <MENU> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione compatta di un elenco puntato. Personalmente non vedo molte differenze con l'elemento <DIR>

    <MENU>

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </MENU>

             Questo il risultato:
  • WebLink
  • CSS
  • META
  • FAQ

    • <OL>...</OL>

    L'elemento <OL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione ordinata e numerata di un elenco puntato.

    <OL>

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </OL>

             Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ

    Anche <OL> accetta l'attributo COMPACT per una visualizzazione più
compatta. Per default la numerazione segue 1, 2 , 3, e così via ma grazie all'attributo TYPE
si possono cambiare le voci dell'elenco in uno dei seguenti modi:
TYPE=A Lettere maiuscole, ad esempio : A , B, C, ...
TYPE=a Lettere minuscole, ad esempio : a, b, c, ...
TYPE=I Numerazione romana maiuscola, ad esempio: I, II, III, ...
TYPE=i Numerazione romana minuscola, ad esempio: i, ii, iii, ...
TYPE=l I numeri come da default: 1, 2, 3, ...

    <OL TYPE="a">

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </OL>

             Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ

    Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente fare uso dell'attributo START impostando il numero da cui iniziare l'incremento.

    <OL START="3">

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </OL>

             Questo il risultato:
    3. WebLink
    4. CSS
    5. META
    6. FAQ

    Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera "C" ed essendo questa la terza lettera dell'alfabeto, si dovrà inserire il numero "3":

    <OL TYPE="a" START="3">

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </OL>

             Questo il risultato:
    3. WebLink
    4. CSS
    5. META
    6. FAQ

    <UL>...</UL>

    L'elemento <UL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione non ordinata di un elenco puntato.

    <UL>

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </UL>

             Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ

    Anche <UL> accetta l'attributo COMPACT per una visualizzazione più compatta. A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si possono cambiare, è sufficiente specificarlo nell'attributo TYPE:
    TYPE=disc disco solido
    TYPE=circle cerchietto
    TYPE=square quadrato

    <UL TYPE="circle">

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </UL>

             Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ

    Nel caso in cui ci fosse la necessità di cambiare segno, si potrà farlo con l'attributo TYPE anche dall'interno dei vari TAGS <UL>.

    <UL TYPE="square">

    <LI>WebLink

    <LI>CSS

    <LI>META

    <LI>FAQ

    </UL>

             Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ


Pagina dimostrativa richiamata da Iframe, questa pagina ha uno sfondo di colore diverso a solo scopo dimostrativo per rendere meglio il contrasto

è possibile vedere la pagina originale per rendersi conto delle sue dimensioni e del suo contenuto cliccando su questo link

parliamone sul forum fi web-link


Pagina dimostrativa richiamata da Iframe, questa pagina ha uno sfondo di colore diverso a solo scopo dimostrativo per rendere meglio il contrasto

è possibile vedere la pagina originale per rendersi conto delle sue dimensioni e del suo contenuto cliccando su questo link


Moduli o Form

I Moduli permettono all'utente di immettere informazioni tramite caselle di testo, menù a scorrimento, caselle di tipo "spunta". Molto utili, per non dire indispensabili, nella raccolta di dati sottoforma di questionario.

Il modulo per funzionare necessita di un'ulteriore elaborazione, di solito si inviano i dati ad uno script CGI che provvede a formattare gli stessi per poi compiere determinate azioni, la più comune è la spedizione alla propria casella postale. E' possibile farsi inviare il modulo anche senza che questo sia processato da uno script CGI ma il risultato è decisamente più scadente. Se vi interessa questo tipo di spedizione, vi rimando alla mia rubrica Primi Passi alla lezione sui form.

Sono diversi i siti che offrono un formmail in cambio di nulla, quasi tutti i server free hanno il proprio, provate a cercare anche il vostro cliccando sui servizi offerti dalla home page del vostro sito.

Questi due ne sono un esempio:

Formail di Tiscalinet.it
Formail di Freeweb.Supereva.it

A quel punto non resta che seguire le loro istruzioni...

Vediamo gli elementi e gli attributi che costituiscono un modulo :

<FORM>...</FORM>

L'elemento <FORM> serve per delimitare un modulo di input per l'inserimento dati. In un documento html possono esserci più moduli ma questi dovranno essere indipendenti uno dall'altro, nel senso che il tag <FORM> non può essere annidato (un modulo all'interno di un altro modulo). L'elemento Form ha bisogno di alcuni attributi quali:ACTION,METHOD e ENCTYPE

<FORM>

attributi assegnabili all'elemento FORM:

 ACTION
METHOD
ENCTYPE

</FORM>

ACTION

L'attributo ACTION è un URL che specifica la locazione a cui vengono inviati i dati del modulo, può essere semplicemente un indirizzo di posta. Se manca l'attributo ACTION viene assunto per default l'URL stesso in cui si trova il modulo.

METHOD

L'attributo METHOD specifica il metodo per accedere all'URL dichiarato in ACTION e di solito si tratta dei metodi POST o GET. Il metodo GET viene preferito per quei moduli che non necessitano di elaborazioni esterne.

ENCTYPE

L'attributo ENCTYPE specifica il tipo di media utilizzato per codificare i dati del modulo, per default è il tipo MINE.

Un esempio tipo, potrebbe essere questo:

<FORM METHOD="GET" ACTION="/cgi-bin/usermail">

<INPUT>

L'elemento <INPUT> rappresenta un campo in cui i dati possono essere introdotti o modificati dall'utente; ha diversi attributi quali:

<INPUT>

attributi assegnabili all'elemento INPUT:

 ALIGN
CHECKED
MAXLENGTH
NAME
SIZE
SRC
VALUE
TYPE

ALIGN

Questo attributo specifica l'allineamento dell'immagine, quindi adoperato con l'impostazione TYPE=IMAGE.

CHECKED

Attributo che indica la selezione della casella o del pulsante di controllo, quindi adoperato con TYPE=CHECKBOX o TYPE=RADIO.

MAXLENGTH

Attributo che indica il numero massimo di caratteri che possono essere immessi nel campo testo, quindi adoperato con TYPE=TXT. Il numero potrebbe essere anche più grande di quello specificato dall'attributo SIZE, in questo caso il testo scorrerà orizzontalmente, essendo il numero di default illimitato.

NAME

Attributo che indica un nome univoco per il campo o per un gruppo di file correlati.

SIZE

Attributo che specifica le dimensioni del campo in numero di caratteri.

SRC

Attributo che indica l'URL a cui fare riferimento per l'immagine desiderata, da utilizzare con TYPE=IMAGE.

VALUE

Attributo che se utilizzato con gli attributi TYPE=... imposta il valore di visualizzazione iniziale di un campo, sia esso testo che numerico.

TYPE

Attributo che definisce il tipo di dati accettati dal campo, per default è libero testo; possono essere definiti diversi tipi quali:

<TYPE>

tipi di campi assegnabili all'attributo TYPE:

 BUTTON
CHECKBOX
HIDDEN
IMAGE
PASSWORD
RADIO
RESET
SUBMIT
TEXT
TEXTAREA

BUTTON

Utilizzato per incorporare pulsanti. L'attributo NAME è utilizzato per assegnare al pulsante un nome univoco. L'attributo VALUE specifica il testo da visualizzare sul pulsante stesso.

CHECKBOX

Utilizzato per semplici attributi booleani, dove un campo può essere vero o falso , si o no.

FILE

Con l'attributo File è possibile inviare un file contentuto nel proprio PC, ovviamente il server che lo riceve deve essere configurato per la scrittura sul disco.

HIDDEN

Con questo tipo di input non viene mostrato alcun campo a video, ma il contenuto del campo viene comunque spedito con il modulo.

IMAGE

E' un campo di immagine su cui poter cliccare, è necessario l'attributo NAME e l'immagine è specificata dall'attributo SRC, proprio come avviene per l'elemento <IMAGE>.

PASSWORD

Con l'attributo password è possibile inserire del testo in un campo senza che questo venga visualizzato, si vedranno una serie di asterischi.

RADIO

Utilizzato per un valore singolo su campi con diverse alternative. Se infatti allo stesso gruppo viene assegnato lo stesso nome, un solo valore potrà essere selezionato. E' possibile con CHECKED stabilire anche una scelta iniziale, sono obbligatori gli attributi NAME e VALUE.

Si noti come sia possibile selezionare una sola delle tre voci e come la prima sia già selezionata per default.

RESET

E' un pulsante che riporta il modulo ai valori iniziali, cioè vuoto, anche in questo caso l'attributo VALUE serve per il nome da visualizzare sul pulsante.

SUBMIT

E' un pulsante che serve per inviare il modulo riempito, anche in questo caso l'attributo VALUE serve per il nome da visualizzare sul pulsante.

TEXT

Utilizzato per i campi di testo a riga singola, si devono utilizzare gli attributi SIZE e MAXLENGTH per impostare la quantità massima di testo ammesso. Sono necessari gli attributi VALUE e NAME rispettivamente per assegnare un valore iniziale e per definire il nome univoco.

TEXTAREA

Utilizzato per i campi di testo a righe multiple, si devono utilizzare gli attributi SIZE e MAXLENGTH per impostare la quantità massima di testo ammesso.

<OPTION>

L'elemento <OPTION> è utilizzato soltanto con l'elemento SELECT, rappresenta una scelta fra diversi valori. Ha due possibili attributi: SELECTED per indicare l'opzione inizialmente selezionata e VALUE per indicarne il valore rappresentato.

<SELECT>...</SELECT>

L'elemento <SELECT> consente di effettuare delle scelte rappresentate dall'elemento OPTION . Ha tre possibili attributi: MULTIPLE per effettuare diverse selezioni, NAME il nome che sarà inviato come coppia nome/valore, SIZE specifica il numero di voci visibili. Provate a selezionare le voci tenendo premuto il tasto CTRL o SHIFT come avviene normalmente per selezionare i files nel vostro sistema operativo.

<TEXTAREA>...</TEXTAREA>

L'elemento <TEXTAREA> consente di immettere testo su più righe. Gli attributi ROWS e COLS specificano le dimensioni visibili del campo in caratteri. Con l'attributo WRAP si torna automaticamente a capo una volta raggiunto il margine, diversamente il testo prosegue a scorrimento orizzontale. Provate ad introdurre del testo:

Un esempio Ancora una volta un esempio chiarirà forse meglio tutto quanto. Il FORM sotto se riempito dal mio sito mi invierà un tuo parere; il form viene elaborato da uno dei tanti script CGI per l'invio form prima di essermi recapitato tramite e-mail, unico campo obbligatorio quello con l'asterisco *. (in questa guida vale soltanto come esempio ma di fatto è funzionante soltanto la versione on line, e questo per ovvie ragioni di sicurezza contro lo spam)

Nome:
E-mail: *
Inserisci
qui di lato
il tuo commento
Come sei arrivato su WebLink:
Se altro specificare:
Se vuoi.....
puoi dirmi
come giudichi
questa guida:

Pessima
Mediocre
Sufficiente
Buona
Ottima
Non saprei

Sempre se vuoi....
puoi dirmi
la tua Età?

0-15
16-25
26-35
36-45
46-55
55+

Questo il codice per ottenerlo:

<FORM name="parere" ACTION="/cgi-bin/usermail" METHOD=get>
<INPUT TYPE="hidden" NAME="_DEST" VALUE="tuamail@server.com">
<input type="hidden" name="_SUBJ" value="Guida Html">

Da notare che certi parametri sopra inseriti sono espressamente richiesti dallo script o dal server sul quale ci si appoggia per la spedizione.

<FORM name="parere" ACTION="/cgi-bin/usermail" METHOD=get>
<INPUT TYPE="hidden" NAME="_DEST" VALUE="tuamail@server.com">
<input type="hidden" name="_SUBJ" value="tuo subject"> <table border=0 cellspacing=5 cellpadding=5>
<tr>
<td><font color="#660000">Nome:</font></td><td><input type=text name="nome" size=35 maxlength=40 value=""></td>
</tr><tr>
<td><font color="#660000">E-mail:&nbsp;&nbsp;*</font></td><td><input type=text name="email" size=35 maxlength=40 value=""></td>
</tr><tr>
<td valign=middle><font color="#660000">Inserisci<br>qui di lato <br>il tuo commento</font></td>
<td><textarea name="commento" rows=4 cols=30></textarea></td></tr>
<tr><td><font color="#660000">Come sei arrivato su WebLink:<br>Se altro specificare: </font></td><td>
<SELECT NAME="come sei arrivato">
<OPTION SELECTED>Motore di ricerca</OPTION>
<OPTION>Banner</OPTION>
<OPTION>Link su altro sito</OPTION>
<OPTION>Guestbook</OPTION>
<OPTION>News Group</OPTION>
<OPTION>Casualmente</OPTION>
<OPTION>(Altro)</OPTION>
</SELECT>
<br>
<input type=text name="come" size=35 maxlength=40 value=" ">
</td>
</tr><tr>
<td><font color="#660000">Se vuoi.....<br>puoi dirmi <br>come giudichi<br> questa guida:</font>
</td><td><hr width="50%" align="left"><font color="#006600">
<input type=radio name="giudizio" value="pessimo">&nbsp;Pessima<br>
<input type=radio name="giudizio" value="mediocre">&nbsp;Mediocre<br>
<input type=radio name="giudizio" value="sufficiente">&nbsp;Sufficiente<br>
<input type=radio name="giudizio" value="buono">&nbsp;Buona<br>
<input type=radio name="giudizio" value="ottimo">&nbsp;Ottima<br>
<input type=radio name="giudizio" value="non saprei">&nbsp;Non saprei&nbsp;</font><hr width="50%" align="left"></td></tr>
<tr><td><font color="#660000">Sempre se vuoi....<br>puoi dirmi<br>la tua Et&agrave;?</font>
</td><td><hr width="50%" align="left"><font color="#000066">
<input type=radio name="eta" value="0-15">&nbsp;0-15<br>
<input type=radio name="eta" value="16-25">&nbsp;16-25<br>
<input type=radio name="eta" value="26-35">&nbsp;26-35<br>
<input type=radio name="eta" value="36-45">&nbsp;36-45<br>
<input type=radio name="eta" value="46-55">&nbsp;46-55<br>
<input type=radio name="eta" value="55+">&nbsp;55+<br></font><hr width="50%" align="left"></td></tr>
<tr><td></td><td><input type=submit value="Invia i Dati"><input type=reset value="Annulla"></td></tr>
</table>

</form>

Per indirizzare il form ad un server formail valido, fare riferimento alle istruzioni contenute nelle pagine del formmail stesso, quello del servizio che abbiamo deciso di adoperare, infatti queste cambiano a seconda dello script adoperato dallo stesso gestore.

Quasi tutti gli spazi web che vengono offerti gratuitamente hanno un servizio CGI di invio form (form-mail), si tratta semplicemente di leggere le istruzioni che il fornitore del servizio mette a disposizione su apposite pagine.

Questi sotto, sono i due servizi offerti da Tiscalinet.it e dal Freeweb di Supereva, provate a vederli.

Formail di Tiscalinet.it
Formail di Freeweb.Supereva.it

Sul server di Tiscalinet ci sono alcuni moduli già pronti per essere ulizzati, sono in formato compresso e direttamente scaricabili .


Elementi di formattazione

<BASEFONT>

Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di <FONT SIZE=+..> Il valore di default è 3 e può essere compreso tra 1 e 7. Questo Tag è in via di estinzione visto che con i nuovi browser e i relativi fogli di style si ha la sempre più la tendenza a non adoperare più il tag <FONT>-

<BASEFONT SIZE=4>

SI possono inserire anche altri due attributi

FACE specifica il tipo di font

COLOR specifica il colore che potrebbe essere espresso oltre che col nome in inglese anche con il codice numerico esadecimale.

<BASEFONT SIZE="4" FACE="arial" COLOR="green">

Il mio consiglio è di non adoperarlo, guardate la mia sezione dedicata ai fogli di style e capirete il perchè.

<BR>

L'elemento <BR> specifica che una nuova riga deve iniziare in un determinato punto, un ritorno a capo forzato, più <br> consecutivi equivalgono a più righe saltate.

<BR>

Con l'aggiunta di immagini flottanti, allineate a destra o sinistra con il testo che le contorna, è possibile aggiungere l'attributo CLEAR con i seguenti risultati:

CLEAR=left : Spezza la riga e si sposta verticalmente verso il basso fino ad avere un margine sinistro libero.

CLEAR=right : Stessa cosa ma con margine libero destro.

CLEAR=ALL : Si sposta verso il basso fino a quando entrambi i margini non siano liberi da immagini.

<BR clear=all>

<CENTER>...</CENTER>

Tutto ciò che si trova fra gli elementi center /center sarà centrato rispetto ai margini destro e sinistro della finestra del browser. Questo Tag è in disuso da quando elementi quali <DIV> offrono maggiore flessibilità, si ottengono analoghi risultati anche assegnando l'attributo alingn=center ai vari tags di formattazione.

<CENTER>

Questo testo è centrato sulla finestra di visualizzazione

</CENTER>

<COMMENT>...</COMMENT>

Consente di lasciare un testo di commento all'interno del listato html senza che questo possa influire o essere visualizzato dal browser. Lo stesso risultato si ottiene anche con i tags <!-- ... -->

<COMMENT>

Questo testo non serve a niente è semplicemente un commento, un qualcosa da ricordare dovendo visionare il listato.

</COMMENT>

<!--

Questo testo non serve a niente è semplicemente un commento, un qualcosa da ricordare dovendo visionare il listato.

-->

<DIV>...</DIV>

L'elemento <DIV> non ha una sua vera e propria caratteristica, serve infatti da supporto, da contenitore per l'associazione con fogli di style e/o layers che sono dei soli browser di nuova generazione. Tutti gli attributi e le associazioni applicate al tag DIV saranno estese a tutto il blocco di codice interessato.

<DIV align="center">

Questa riga di testo ed anche eventuali altri elementi,
se presenti,
subiranno in questo caso l'allineamento centrato.

</DIV>

<SPAN>...</SPAN>

L'elemento <SPAN> non ha alcuna caratteristica se non quella di fare da supporto per gli stili, come DIV si presta bene come contenitore per l'associazione di tutto quello che serve ad Html dynamico.

<SPAN style="color:red">

Questa riga di testo è colorata di rosso, anzi di red. :-)

</SPAN>

<FONT>...</FONT>

L'elemento <FONT> definisce le dimensioni, il colore e il tipo di carattere adoperato per la scrittura di testo. Questo Tag viene adoperato sempre meno dal momento che i fogli di style riescono a gestire il tutto in modo più semplice e versatile. Il Tag <font> ha dimensione di base(default) del caratte uguale a 3, si veda a questo proposito anche <BASEFONT>. Font da solo non ha ragione di esistere, al suo interno si deve sempre inserire almeno un attributo.

<FONT attributo="specifica">

Testo che avrà tutti gli attributi specificati nel tag font

</FONT>

E' possibile specificare quale carattere adoperare dando anche delle eventuali alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e se nessuno dei tre fosse presente il browser adopererà il suo, quello di default. Evitate dunque fonts particolari o meglio poco comuni, quasi sicuramente nessuno riuscirà a vedere il testo allo stesso modo di come avreste voluto.

FACE=nome [,nome] [,nome] L'attributo face imposta il carattere utilizzato e questo deve trovarsi già installato nel computer dell'utente, le alternative sono separate da uno spazio e da una virgola.

<FONT FACE="Comic Sans MS">Testo con font Comic Sans MS

COLOR=#rrggbb oppure COLOR= nome in inglese del colore

<FONT COLOR="red">Testo con font di colore rosso

SIZE=n oppure SIZE=+n o anche SIZE=-n dove n è un numero compreso fra 1 e 7, mentre i vari + o - si riferiscono al numero che per default è3 a meno di qualche variazione specificata con BASEFONT

<FONT SIZE="-1">Testo con font di dimensione -1 rispetto a quella di default.

Gli attributi possono essere adoperati contemporaneamente

<FONT FACE="Comic Sans MS" COLOR="red" SIZE="-1">
Testo con font Comic di colore rosso ed una dimensione -1
</FONT>

<HR>

L'elemento <HR> Horizontal Rules, altro non è che una linea orizzontale divisoria, come quella che potete vedere in questa pagina a divisione dei vari elementi (tags), per default questa linea è ombreggiata e in rilievo. Si possono modificare i vari attributi.

<HR> questo sotto il risultato

attributi di formattazione quali:

 <ALIGN>
<COLOR>
<NOSHADE>
<SIZE>
<WIDTH>

<HR ALIGN=left | right | center>Dove left right center sono allineamento a sinistra, a destra o centrato

Adopero una linea ridotta del 50% per meglio rendere l'idea

<HR ALIGN="left">

<HR ALIGN="right">

<HR ALIGN="center">

<HR COLOR=nome | #rrggbb>Dove nome è il nome in inglese di uno dei colori possibili, mentre #rrggbb è il codice numerico esadecimale del colore scelto. L'attributo color è supportato dai soli browser IE.

<HR COLOR="red">

<HR NOSHADE>Nessuna ombreggiatura, praticamente una barra solida.

<HR NOSHADE>

<HR SIZE=numero>Dove numero è espresso in pixel e si riferisce allo spessore della barra.

una riga di spessore 5 pixel

<HR SIZE="50">

<HR WIDTH=numero | percentuale>Senza alcuna specifica la linea orizzontale occupa tutta la largezza della pagina. Con questo attributo si possono specificare con esattezza la sua ampiezza, dove numero sono i pixel. percentuale invece è relativa alla percentuale della finestra del browser

una riga di lunhezza 150 pixel

<HR WIDTH="150">

Si possono anche combinare i vari attributi, quello sotto è un esempio per ottenere una riga che sia di colore blu, spessore 3 pixel, che occupi il 70% della finestra alla quale è destinata e che non sia ombreggiata (la percentuale di ampiezza è relativa alla cornice che la ospita):

<HR width="70%" color="#0000ff" size="3" noshade>

<Hx>...<Hx>

Titoli - è possibile avere sei livelli di titolo che dimensionano i caratteri. Il più alto livello è <H1> seguito a salire da tutti gli altri:

<H1>...</H1>

Grassetto, carattere molto grande e centrato, una o due righe vuote sopra e sotto.

<H2>...</H2>

Grassetto, carattere grande a sinistra, una o due righe vuote sopra e sotto.

<H3>...</H3>

Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto.

<H4>...</H4>

Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e sotto.

<H5>...</H5>

Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra.

<H6>...</H6>

Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra.

<P>...</P>

L'elemento <P> specifica un paragrafo di testo, ha come attributo ALIGN che permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY, rispettivamente per: Centrato, a sinistra, a destra , giustificato. Viene adoperato prevalentemente con l'attributo CLASS che richiama una classe di style in modo da avere paragrafi con font, colori e formattazione prsonalizzata. Si veda a questo proposito le spiegazioni relative ai fogli di stile.

<P align="left">Questo paragrafo è allineato a sinistra.</P>

Questo paragrafo è allineato a sinistra.

<P align="right">Questo paragrafo invece è allineato a destra.</P>

Questo paragrafo invece è allineato a destra.

<P align="center">Questo paragrafo è allineato al centro.</P>

Questo paragrafo è allineato al centro.

<P align="justify">Questo paragrafo è allineato al centro con giustificazione.</P>

Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione ? Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi fra le parole.

<B>...</B>

L'elemento <B> specifica un blocco di testo da mostrare in grassetto (bold). Risultato simile si ottiene anche con <STRONG>...</STRONG>

Questa guida è offerta da <B> Web-Link </B> tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.

<U>...</U>

L'elemento <U> specifica un blocco di testo da mostrare sottolineato (underline).

Questa guida è offerta da <U> WebLink </U> tutto per la tua pagina web.

Questa guida è offerta da WebLink tutto per la tua pagina web.

<I>...</I>

L'elemento <I> specifica un blocco di testo da mostrare in corsivo (italic). Risultato simile si ottiene anche con <EM>...</EM>

Questa guida è offerta da <I> Web-Link </I> tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.

Gli elementi possono essere fra loro nidificati, combinando i vari attributi, per esempio posso scrivere weblink in modo marcato, inclinato e sottolineato:

Questa guida è offerta da <U><I><B> Web-Link </B></I></U> tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.

<PRE>...</PRE>

L'elemento <PRE> specifica un blocco di testo preformattato, cioè a larghezza e spaziatura fissa. Attenzione, talmente fissa che non torna neppure a capo se non con il comando <br>.

<PRE>Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente dai vari parametri di pagina </PRE>

Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente dai vari parametri di pagina


Elementi di formattazione: marquee

<MARQUEE>...</MARQUEE>

L'elemento <MARQUEE> supportato soltanto dai browser IE serve unicamente per fare del testo scorrevole sullo schermo, molte le combinazioni possibili.

<MARQUEE>

Questo testo scorre da sinistra verso destra

</MARQUEE>

Molti gli attributi associabili a questo tag:

ALIGN

BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT

HSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

VSPACE

WIDTH

ALIGN

Permette di allineare il testo che circonda il marquee in modo che si disponga in uno dei tre modi possibili: TOP MIDDLE o BOTTOM, rispettivamente per : in alto, nel mezzo, in basso.

BEHAVIOR

Permette di scegliere il tipo di spostamento in uno dei tre modi possibili: SCROLL, SLIDE o ALTERNATE. Dove SCROLL, impostazione di default, inizia lo spostamento e ricomincia ogni volta che il testo è sparito dalla finestra. SLIDE permette lo scorrimento una sola volta prima di trasformarsi in testo fisso. ALTERNATE una volta raggiunto il margine opposto questo rimbalza continuando lo spostamento nel lato opposto.

<MARQUEE BEHAVIOR="SCROLL">

Questo testo ha come attributo BEHAVIOR SCROLL (di default)

</MARQUEE>

<MARQUEE BEHAVIOR="SLIDE">

Questo testo ha come attributo BEHAVIOR SLIDE

</MARQUEE>

<MARQUEE BEHAVIOR="ALTERNATE">

Questo testo ha come attributo BEHAVIOR ALTERNATE

</MARQUEE>

BGCOLOR

Questo attributo specifica il colore di sfondo e può essere espresso in valore numerico (la solita tripletta esadecimale) o con il nome del colore in lingua inglese.

<MARQUEE BGCOLOR="#c0c0c0">

Questo testo ha come attributo BGCOLOR un grigio chiaro

</MARQUEE>

La notazione esadecimale è da preferirsi in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16Mil. di colori.

DIRECTION

Si adopera questo attributo per decidere la direzione di scorrimento per default è LEFT cioè da destra verso sinistra, è possibile invertire il senso adoperando RIGHT

<MARQUEE DIRECTION="right">

Questo testo ha come attributo DIRECTION RIGHT

</MARQUEE>

HEIGHT

Si adopera questo attributo per impostare l'altezza del marquee, il valore può essere espresso in pixel HEIGHT=n oppure in percentuale HEIGHT=n% rispetto all'altezza dello schermo.

<MARQUEE HEIGHT="50">

Questo testo ha come attributo HEIGHT = 50 pixel

</MARQUEE>

HSPACE

Si adopera questo attributo per determinare quanto spazio libero deve rimanere sui due lati, destro e sinistro, in modo tale che il testo non debordi. Viene espresso con un numero equivalente al numero di pixel.

<MARQUEE HSPACE="50">

Questo testo ha come attributo HSPACE = 50 pixel

</MARQUEE>

LOOP

Si adopera questo attributo per decidere il numero di volte che il testo deve ripetere il marquee, per default è infinito. Una volta eseguiti i cicli impostati con loop, il testo scomparirà lasciando lo spazio vuoto.

<MARQUEE LOOP="5">

Questo testo ha come attributo di ripetizione LOOP = 5

</MARQUEE>

SCROLLAMOUNT

Si adopera questo attributo per specificare lo spazio, espresso in numero di pixel, fra ciascuno dei successivi spostamenti del testo.

<MARQUEE SCROLLAMOUNT="15">

Questo testo ha come attributo SCROLLAMOUNT = 15 pixel

</MARQUEE>

Più alto il numero, maggiore sarà la rapidità dello spostamento

SCROLLDELAY

Si adopera questo attributo per specificare il numero di millisecondi fra ciascuno dei successivi spostamenti del testo. Praticamente controlla la velocità con cui avvengono i movimenti del testo.

<MARQUEE SCROLLDELAY="1">

Questo testo ha come attributo SCROLLAMOUNT = 50 e SCROLLDELAY = 1

</MARQUEE>

Più alto il numero maggiore sarà il rallentamento. Non riuscite a leggere cosa cìè scritto? Questo testo ha come attributo SCROLLAMOUNT = 50 e SCROLLDELAY = 1

VSPACE

Come per HSPACE ma riferito ai bordi superiore ed inferiore

<MARQUEE VSPACE="50">

Questo testo ha come attributo VSPACE = 50 pixel

</MARQUEE>

WIDTH

Questo attributo specifica l'ampiezza del marquee ed è espresso in pixel WIDTH="n" o come percentuale della larghezza dello schermo WIDTH="n%"

<MARQUEE WIDTH="50">

Questo testo ha come attributo WIDTH = 50 pixel

</MARQUEE>

© Andrea Bianchi 1997 ~ 2002


Frames o Cornici

I Frames Introdotti a partire dalla versione 2 di NS e 3 di IE, sono oggi un'ottima soluzione per la struttura di un sito più o meno complesso. Essi permettono infatti di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata o contenere dati in modo completamente autonomo e diverso rispetto alle altre. Questo mio sito che state visitando ne è un esempio. Frame principale è il più grande, dove visualizzare le varie pagine. Frame laterale invece è il frame destinato ad ospitare il menù. Si possono inserire tutti i frames che servono e combinarli nel più svariato dei modi a seconda delle proprie necessità, ho reso bene l'idea ?

<FRAMESET>...</FRAMESET>

L'elemento <FRAMESET> è l'elemento principale, possiede due attributi quali ROWS e COLS. Al suo interno può contenere annidati altri elementi quali <FRAMESET>, <FRAME> o <NOFRAME>.

<FRAMESET>

attributi assegnabili:

 ROWS
COLS

ROWS

L'attributo ROWS raccoglie i valori per l'altezza della riga, quando si suddivide la finestra principale in righe. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel, mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser.

<FRAMESET ROWS="30%, 70%">

L'esempio sopra crea una cornice suddividendo orizzontalmente la finestra in due parti, la prima che occupa il 30% delle dimensioni totali lasciando il rimanente 70% alla seconda finestra. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio:

<FRAMESET ROWS="150, 600">

In questo caso si avrebbero due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor, grandi o piccoli che siano. Per evitare questa limitazione, si possono adoperare i caratteri jolly (asterisco *) che significano imposta la massima dimensione rimanente. (vedi esempio sotto)

<FRAMESET ROWS="150, *">

Così facendo si otterrà un frame orizzontale di dimensione fissa di 150 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende soltanto dl monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame superiore fisso 150 pixel
Frame inferiore
che varia occupando il rimanente spazio della finestra

COLS

L'attributo COLS raccoglie i valori per la larghezza della colonna, quando si suddivide la finestra principale in colonne. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel, mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser. Praticamente valgono le stesse regole spiegate sopra, ma anzichè suddividere lo schermo in righe, lo si suddivide in colonne.

<FRAMESET COLS="25%, 75%">

L'esempio sopra crea una cornice suddividendo verticalmente la finestra in due parti, la prima che occupa il 25% delle dimensioni totali lasciando il rimanente 75% alla seconda finestra. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio:

<FRAMESET COLS="150, 600">

In questo caso si avrebbero due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor, grandi o piccoli che siano. Per evitare questa limitazione, si possono adoperare i caratteri jolly (asterisco *) che significano imposta la massima dimensione rimanente. (vedi esempio sotto)

<FRAMESET COLS="150, *">

Così facendo si otterrà un frame verticale di dimensione fissa 150 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende soltanto dl monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame laterale sinistro fisso 150 pixel Frame laterale destro che varia occupando il rimanente spazio della finestra

<FRAME>

L'elemento FRAME definisce le proprietà del frame stesso all'interno di FRAMESET, esso ha ben 8 attributi, non necessita del relativo tag di chiusura /FRAME . Questi gli attributi possibili:

<FRAME>

attributi assegnabili all'elemento FRAME:

 SRC
NAME
MARGINWIDTH
MARGINHEIGHT
SCROLLING
NORESIZE
FRAMEBORDER
FRAMESPACING

SRC="url"

L'attributo SRC="url" definisce l'indirizzo del file html che verrà visualizzato nella sezione frame nel frameset. Potrebbe sembrare complicato ma altro non è che il file html da visualizzare.

<FRAME SRC="nome_file.html">

NAME="nome_frame"

L'attributo NAME è di vitale importanza ai fini di un corretto funzionamento, serve infatti per assegnare un nome al frame stesso facendolo diventare bersaglio di collegamenti da altri frames o semplici links tramite l'attributo TARGET. A questo proposito si veda anche la sezione dedicata proprio ai links e loro gestione. Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi. Se tutto ciò può sembrare complesso, a fine pagina un esempio riassuntivo chiarirà sicuramente meglio ogni cosa.

<FRAME NAME="TITOLO">

MARGINWIDTH="valore"

L'attributo MARGINWIDTH accetta valori numerici che corrispondono a pixel, forza il rientro sui lati, destro e sinistro, in base a tale valore. Non può essere impostato a zero.

<FRAME MARGINWIDTH="valore">

MARGINHEIGHT="valore"

L'attributo MARGINHEIGHT accetta valori numerici che corrispondono a pixel, forza il rientro sui lati, superiore e inferiore, in base a tale valore. Non può essere impostato a zero.

<FRAME MARGINHEIGHT="valore">

SCROLLING="yes|no|auto"

L'attributo SCROLLING serve per il controllo della barra laterale di scorrimento, quando il contenuto della pagina supera le dimensioni del frame viene visualizzata una barra di scorrimento. yes= si alla visualizzazione di questa barra, no= nessuna barra, auto= solo se il contenuto del frame la richiede.

<FRAME SCROLLING="auto">

NORESIZE

L'attributo NORESIZE non ha alcun parametro, se impostato evita al frame di essere ridimensionato. Diversamente saràì possibile, portando il puntatore del mouse nella divisione dei due frames, ottenere una doppia freccia di posizionamento.

<FRAME NORESIZE>

FRAMEBORDER="yes|no"

L'attributo FRAMEBORDER, riconosciuto dai soli browser IE, serve per rendere visibili o meno i bordi dei frames, per default si trova a YES quindi impostare no soltanto nel caso in cui non si voglia ridisegnare il bordo.

<FRAME FRAMEBORDER="no">

FRAMESPACING="valore"

L'attributo FRAMESPACING, riconosciuto dai soli browser IE, serve per impostare spazio aggiuntivo intorno ai frames facendoli sembrare "flottanti", il valore impostabile si riferisce al numero di pixel.

<FRAME FRAMESPACING="valore">

<NOFRAMES>...</NOFRAMES>

L'elemento NOFRAMES serve per creare un alternativa a quei browser che non supportano i frames. Come detto all'inizio di questo documento, non tutti i browser supportano la gestione dei frames, conviene creare un'alternativa o semplicemente un messaggio di avviso fra i tags <NOFRAMES>...</NOFRAMES>

<NOFRAMES>
Spiacente ma il tuo browser non supporta i frames, clicca su questo link per continuare
</NOFRAMES>

ESEMPIO

Forse un esempio pratico potrebbe chiarire ogni dubbio, diciamo subito che la struttura di un sito a frames si basa su almeno 3 pagine web:
Una per dichiararne la struttura.
Le altre due rispettivamente per i due frames.
Ipotizziamo di voler creare un sito simile a questo con un frame laterale per il menu, uno centrale principale per la navigazione, ed uno fisso in alto per eventuali sponsor, musica, informazioni varie.

Inizieremo col creare le tre pagine menu.html, home.html e sponsor.html io le ho chiamate così ma qualsiasi altro nome non cambierebbe assolutamente nulla.

Fatto questo non resta che creare la pagina per i frames che chiameremo index.html Per questa pagina valgono le stesse regole di tutte le altre pagine html, quindi avrà i tags di base quali html, body, head, title, meta e tutti gli altri eventuali.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Web-Link.it Tutto per la tua pagina web </title>
</head>

<FRAMESET COLS="20%,80%">

<FRAME NAME="menu" SRC="menu.html" SCROLLING="auto">

<FRAMESET ROWS="15%,85%">

<FRAME NAME="sponsor" SRC="sponsor.html" SCROLLING="auto">

<FRAME NAME="homepage" SRC="home.html" SCROLLING="auto">

</FRAMESET>

</FRAMESET>
<body>

<NOFRAMES>

Spiacente il tuo browser non supporta i frames

</NOFRAMES>

</body>
</html>

Il listato sopra produrrà un risultato simile a questo sotto, si noti la struttura nidificata del frameset che crea a sua volta due finestre dalle due precedentemente impostate.

Frame menu Frame Sponsor
Frame Home Page

© Andrea Bianchi 1997 ~ 2002


html WebLink

Rev. 2 Agosto 2002

Benvenuti su questa mia guida dedicata a HTML. Nessuna pretesa, semplicemente vuole essere una guida con basi introduttive, qualcosa che illustri le potenzialità del linguaggio stesso. Nasce dalle molte domande che ricevo in forma privata. Mi auguro quindi con questo mio lavoro di soddisfarle tutte, se poi l'argomento dovesse interessare al punto tale di volerlo ulteriormente approfondire, la cosa migliore sarebbe affidarsi alla letteratura specializzata.

HTML ( Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser delle direttive ben precise al fine di ottenere il risultato a video, una sorta di interpretazione che varia a volte a seconda del tipo di browser adoperato. Si tratta dunque di conoscere il significato dei vari elementi e come questi possono essere combinati per avere la padronanza del linguaggio.

Per la stesura di questo linguaggio si fa uso di un normale editor di testi, meglio se un editor specifico per HTML, cominciamo proprio da qui, cliccando su questo link potremo scaricarne uno dalla rete.

Cosa è un editor e cosa è il codice html ?

Un editor, altro non è che uno strumento che ci consente di scrivere in modo semplice e veloce righe di codice html; il codice che i browser di navigazione, qualunque essi siano, riconoscono ed interpretano. Si potrebbe paragonarlo ad un programma per videoscrittura, anzi sono moltissime le similitudini, con la sola differenza che il testo scritto da questi editors è formattato nel modo giusto per dare vita a pagine di ipertesto, da qui il nome HTML: Hyper Text Markup Language.

Gli editors si dividono in due categorie:

Visuali, molto semplici, simili ai programmi di grafica permettono di disegnare o semplicemente trascinare quello che serve all'interno dell'ambiente di sviluppo, operazione che genera automaticamente codice html.

Testuali, bisogna scrivere il codice, quindi conoscerlo, offrono gli strumenti giusti con suggerimenti necessari alle varie esigenze, si ha il pieno controllo della situazione superando quelli che spesso sono i limiti degli editors visuali. Personalmente adopero: Allaire HomeSite ora di Macromedia, lo trovo formidabile. Ha un solo difetto: costa, a differenza di altri editors reperibili gratuitamente :-)

Dopo quanto appena detto è abbastanza ovvio immaginare che il principiante si affiderà agli editors visuali, considerando poi che questi sono parte integrante dei vari browser adoperati per la navigazione. Forse non tutti sono a conoscenza di avere un editor html a portata di mano; verificatelo, chi ha IE cliccando sull'icona modifica in alto a destra, richiamerà l'editor visuale Front page express, chi invece adopera NS, con i tasti CTRL+4 avvierà composer, anch'esso editor visuale.

C'è chi consiglia di adoperare il notepad o il wordpad di windows, personalmente reputo la scelta a dir poco illogica, della serie "facciamoci del male da soli". Non capisco infatti perchè mai si dovrebbe adoperare uno strumento che di html non ha nulla, quando la rete offre ottimi programmi, alcuni di questi addirittura gratuiti (freeware).

Dopo questa considerazione chi avesse deciso di affidarsi agli editors visuali può tranquillamente smettere di leggere il seguito di queste pagine, non gli serviranno a molto infatti visto che parleremo di codice che l'editor visuale gestisce in assoluta autonomia.Un arrivederci a queste persone che probabilmente torneranno non appena insorgeranno le prime difficoltà dovute alla mancata realizzazione di determinate "cose" che non sempre un editor visuale è in grado di fare. Non ho nulla contro gli editor visuali ve lo assicuro, anzi per certe "cose" ne faccio uso anch'io.

Un'ultima raccomandazione prima di passare in rassegna i vari elementi (tags); sarà bene ricordare sempre, che qualsiasi pagina creata per la rete, prima di essere visualizzata dovrà essere scaricata nella memoria del browser (cache); quindi pagine lunghe o farcite di immagini, applets e suoni sono spesso un ottimo motivo per il visitatore che abbandona stanco di attendere . Evitatele nel modo più assoluto, meglio pianificare diverse pagine al posto di una singola. Suddividere il lavoro in più pagine non costa nulla ed offre maggiore flessibilità anche a voi stessi per eventuali future modifiche.

Cliccando su questo link, sarà possibile avere un menù laterale che renderà più comoda la consultazione di tutti i tags trattati, elencati e suddivisi per argomenti. Perchè questa scelta ?

Html non è un vero e proprio linguaggio di programmazione, o almeno non come si è abituati a credere quando si parla di programmazione. HTML è molto più semplicemente un insieme di istruzioni: <TAGS> ,che il browser legge in maniera sequenziale, dall'alto verso il basso, da sinistra verso destra; esattamente come avviene la normale lettura di un testo per noi umani.

Queste istruzioni, o meglio questi elementi (tags), sono racchiusi fra parentesi angolari: <queste> ogni elemento (tag) ha un compito preciso e termina con lo stesso elemento preceduto da una barra retroversa, per rifarmi all'esempio appena citato: </queste>

Non sono poi molti gli elementi che compongono il linguaggio, alcuni non vengono addirittura mai adoperati, al punto che spesso mi sono chiesto cosa li abbiano inseriti a fare :-). Come già detto, mi limiterò ad illustrare soltanto quelli che secondo il mio modesto parere possono realmente essere utili.

Per chi non avesse mai avuto prima d'ora alcuna esperienza con HTML è consigliabile iniziare dalla rubrica primi passi che in sole 10 lezioni ha la presunzione di schiarire molto meglio le idee e mettervi addirittura in condizioni di crearvi un vostro sito, su questa guida potrete sempre ritornare una volta acquisito quel minimo di esperienza.

Non vi resta che selezionare dal menu laterale l'elemento che vi serve o che pensate possa servirvi, i nomi che non sono racchiusi fra parentesi angolari sono attributi e non elementi veri e propri. Clicca su questo link per ulteriori informazioni sulla struttura di base

parliamone sul forum fi web-link

© Andrea Bianchi 1997 ~ 2002

300.gif (1390 byte)

Versione Guida di Windows a cura di:

Claudio GUCCHIERATO © 2003


Iframe

Iframe Introdotto e supportato inizialmente soltanto dai browser Internet Explorer oggi è finalmente riconosciuto anche dal browser NetScape a partire dalla versione 6.0.

Si adopera per creare una cornice (frame) all'interno di una pagina web, (internal frame) in questa cornice è possibile visualizzare una qualsiasi altra pagina web, così facendo si ottengono pagine web all'interno di altre pagine web. Non è necessario avere una struttura a frames per farne uso, questo elemento è indipendendte dai frames ed è sufficiente richiamarlo all'interno di qualsiasi pagina web.

<IFRAME>...</IFRAME>

L'elemento <IFRAME> possiede al suo interno diversi attributi, quello fondamentale è src che serve per specificare il nome della pagina web da richiamare.

<IFRAME>

attributi assegnabili:

 src
width
height
scrolling
frameborder
marginwidth
marginheight
hspace
vspace
align
name

SRC="nome pagina"

L'attributo SRC è fondamentale in quanto specifica il nome della pagina da visualizzare all'interno di iframe.

<IFRAME src="nome_della_pagina.html">
</IFRAME>

L'esempio sopra privo di qualsiasi altro attributo genera una finestra con le stesse dimensioni esatte di quella che vedete in questo esempio, vengono assegnate per default le due barre di scorrimento laterale e verticale nel caso in cui la pagina da visualizzare fosse di dimensioni superiori a quelle generata da iframe.

A questo proposito conviene specificare anche le dimensioni esatte che necessitano per una corretta e più comoda visualizzazione ( larghezza ed altezza) facendo uso dei due attributi:

WIDTH="valore" HEIGHT="valore"

Gli attributi width e height servono rispettivamente per impostare le dimensioni in larghezza ed in altezza per la finestra generata da iframe.

<IFRAME src="nome_della_pagina.html" height="300" width="80%">
</IFRAME>

Da notare che le dimensioni possono essere espresse sia in pixel "300" (fissa), che in percentuale "80%" (variabile), oppure anche in entrambi i modi. Se anche una sola delle misure adoperate viene espressa in percentuale(%) verranno generate in modo automatico le relative barre di scorrimento orizzontale e verticale nel caso in cui le dimensioni della finestra del browser fossero più piccole di quelle della finestra di IFRAME. Provate a ridimensionare la vostra finestra adesso; noterete come anche iframe si ridimensiona e raggiunte le dimensioni minime della pagina vengono generate automaticamente le barre di scorrimento.

SCROLLING="yes|no|auto"

L'attributo SCROLLING serve per le barre di scorrimento, quando le dimensioni della pagina IFRAME superano le dimensioni della finestra del browser vengono visualizzate le barre di scorrimento. yes = si alla visualizzazione di queste barre sempre, no = no nessuna barra mai, auto = si ma soltanto se il contenuto di iframe la richiede.

<IFRAME src="nome_della_pagina.html" height="300" width="80%" scrolling="No">
</IFRAME>

Da notare che ridimensionando la finestra il suo contenuto tende a sparire ma non saranno visualizzate in alcun modo le barre di scorrimento perchè è stato impostato il parametro NO per la generazione dello scrolling.

FRAMEBORDER="0|1"

L'attributo FRAMEBORDER serve per rendere visibili o meno i bordi di iframes, per default si trova a [1] quindi impostare [0] soltanto nel caso in cui non si voglia ridisegnare il bordo.

<IFRAME src="nome_della_pagina.html" height="300" width="80%" scrolling="No" frameborder="0">
</IFRAME>

Notare la mancanza assoluta di bordi quasi fosse un'immagine piatta inserita nella pagina web.

MARGINWIDTH="valore" MARGINHEIGHT="valore"

Gli attributi MARGINWIDTH e MARGINHEIGHT accettano valori numerici che corrispondono a pixel, forzano il rientro sui lati: destro e sinistro, alto e basso.

<IFRAME src="nome_della_pagina.html" height="300" width="80%" scrolling="No" frameborder="0"marginwidth="50" marginheight="100">
</IFRAME>

In questo esempio 50 pixel per i bordi laterali destro e sinistro e 100 pixel per il bordo verticale.

HSPACE="valore" VSPACE="valore"

Gli attributi HSPACE e VSPACE accettano valori numerici che corrispondono a pixel, forzano la spaziatiura sui lati: destro e sinistro, alto e basso.

<IFRAME src="nome_della_pagina.html" height="100" width="95%" scrolling="No" frameborder="0" vspace="50">
</IFRAME>

Questo testo non serve a nulla se non per evidenziare lo spazio verticale (vspace 50) impostato come parametro di Iframe. Questo testo non serve a nulla se non per evidenziare lo spazio verticale (vspace 50) impostato come parametro di Iframe. Questo testo non serve a nulla se non per evidenziare lo spazio verticale (vspace 50) impostato come parametro di Iframe.Questo testo non serve a nulla se non per evidenziare lo spazio verticale (vspace 50) impostato come parametro di Iframe.

ALIGN="bottom | left | middle | right | top"

Allineamento del riquadro iframe rispetto al testo e agli altri elementi che compongono la pagina web.(in basso, a sinistra, nel mezzo, a destra, in alto)

<IFRAME src="nome_della_pagina.html" height="100" width="250" scrolling="Yes" frameborder="1"align="right">
</IFRAME>

In questo esempio l'allineamento scelto è quello destro (right). Per i vari modi di allineare vale quanto detto per l'attributo align dell'elemento IMG

NAME="nome_frame"

L'attributo NAME è estremamente importante nel caso in cui volessimo aprire dei links all'interno dello stesso iframe, serve infatti per assegnare un nome a iframe stesso in modo da farne uso facendolo diventare "bersaglio" o meglio destinazione di collegamenti da altri links tramite l'attributo TARGET. A questo proposito si veda anche la sezione dedicata proprio ai links e loro gestione. Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi, oppure lo stesso nome ma con funzioni decisamente diverse.

<IFRAME src="nome_della_pagina.html" height="300" width="450" scrolling="Yes" frameborder="1" name="pippo">
</IFRAME>

Così facendo è stato assegnato il nome pippo al nostro iframe, facendo adesso uso di target="pippo" ad eventuali link, questi saranno aperti dentro iframe stesso. Provate con questi link di prova: link 1 link 2 link 3


Immagini

Le immagini Cosa sarebbe una pagina web senza immagini ? Impossibile anche solo pensarlo. Questo elemento è dunque senza alcun dubbio di primaria importanza. I formati supportati dal w.w.w. sono diversi e variano a seconda del browser adoperato, diciamo che .gif e .jpg sono quelli riconosciuti maggiormente, si parla spesso anche di .png ma non credo sia il caso di approfondire.

<IMG...>

L'elemento <IMG> necessita di attributi, di cui uno necessariamente obbligatorio: SRC, a differenza di molti altri elementi html, questo non ha bisogno di essere concluso dallo stesso elemento preceduto dalla barra retroversa </IMG>. vediamo i possibili attributi:

ALIGN-----------------------
ALT
BORDER
ISMAP
LOWSRC
SRC
VSPACE
HSPACE
WIDTH
HEIGHT
USEMAP
 left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom

ALIGN

L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga di testo successiva, i valori ammessi sono : left, right, top, texttop, middle, absmiddle, baseline, bottom e absbottom. I due valori left e right fanno si che l'immagine diventi di tipo flottante, vediamo come:

ALIGN=left Allinea l'immagine sul bordo sinistro della finestra di visualizzazione del browser, il testo che segue circonda la parte destra dell'immagine.

Allineamento di tipo left, il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capirne l'allineamento.

ALIGN=right Allinea l'immagine sul bordo destro della finestra di visualizzazione del browser, il testo che segue circonda la parte sinistra dell'immagine.

Allineamento di tipo right il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=top Allinea il testo che segue l'immagine con la parte superiore dell'elemento più alto nella riga.

Allineamento di tipo top il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=texttop Allinea il testo che segue l'immagine con la parte superiore del testo più alto nella riga.

Allineamento di tipo texttop il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=middle Allinea la linea di base della riga corrente con la parte centrale dell'immagine.

Allineamento di tipo middle il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=absmiddle Allinea la parte centrale della riga corrente con la parte centrale dell'immagine.

Allineamento di tipo absbmiddle il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=baseline Allinea la parte inferiore dell'immagine con la linea di base della riga corrente di testo.

Allineamento di tipo baseline il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=bottom Allinea il testo che segue l'immagine con la parte inferiore dell'elemento più basso nella riga di testo.

Allineamento di tipo bottom il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=absbotton Allinea la parte inferiore dell'immagine con la parte inferiore della riga di testo corrente.

Allineamento di tipo absbottom il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

Alcuni attributi sembrano gli stessi di altri, è vero, molto dipende dal tipo di browser adoperato, dalle dimensioni della finestra e da qualche altra cosa ancora. L'importante era farsi un'idea, ognuno di noi adopererà quello che riterrà più adatto alle proprie esigenze.

ALT

L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei browser non grafici. Viene di solito adoperato per descrivere l'immagine ma potrebbe essere adoperato per qualsiasi altro motivo che necessiti una descrizione, il testo apparirà nel caso in cui l'immagine non venisse caricata o quando il puntatore del mouse sarà portato sopra la stessa.

Ciao sono una tartaruga Questo il codice:

<img src="tarta.jpg" alt="Ciao sono una tartaruga">

Provate a posizionare il mouse sull'immagine, sarà così possibile leggere il testo alternativo immesso con l'attributo ALT.

BORDER

L'attributo border permette di specificare lo spessore del bordo. Molto utile impostare border=0 quando l'immagine fa parte di un collegamento ancora e non si vuole visualizzare quel fastidioso bordino azzurro di default, tipico delle immagini facenti parte di un link.

Si noti il bordo dell'immagine che e' piuttosto spesso Questo il codice:

<img src="tarta.jpg" border="3">

Si noti lo spessore del bordo dell'immagine che in questo caso è stato impostato come spessore 3.

ISMAP

L'attributo ISMAP (is map) ovvero è una mappa, può essere adoperato in modo corretto soltanto nel caso in cui il server HTTP ha installato un certo tipo di software, l'ho citato solo per completezza, non credo infatti serva a molto visto che per le immagini mappate si adopera ormai USEMAP che funziona dal lato client.(cioè sul vostro browser)

LOWSRC

L'attributo lowsrc, non supportato da tutti i browser, permette di adoperare due immagini nello stesso spazio, quella definita con LOWSRC sarà caricata subito, trattandosi di un'immagine a bassa risoluzione, in alcuni casi anche in bianco e nero, servirà come intrattenimento fino a caricamento pagina ultimato, dopodichè sarà automaticamente sostituita con l'immagine vera e propria definita con SRC.

Questa la sintassi:

<img src="tarta.jpg" lowsrc="tartabn.jpg">

I browser che non supportano questo attributo visualizzeranno la sola immagine dichiarata in SRC.

SRC

L'attributo src è indispensabile per l'elemento IMG, senza di questo non funzionerebbero neppure tutti gli altri. Permette di specificare il nome dell'immagine da visualizzare se questa si trova nella stessa cartella (dir) in cui è presente la pagina che la richiama. E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e sottocartelle (subdirectory) compresi gli URL completi da altri siti.
Il tag img src può essere adoperato anche all'interno del tag ancora, potrà essere cliccato come un normale link testo.

Questa la sintassi:

<img src="nome_immagine.jpg">

o anche

<img src="http://www.web-link.it/nome_immagine.jpg">

VSPACE HSPACE

L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali e orizzontali fra il testo e l'immagine stessa, o anche fra l'immagine e la sua cornice. Un esempio chiarirà sicuramente meglio:.

Questa la sintassi:

<img src="tarta.jpg" hspace="50">

ho impostato uno spazio orizzontale di 50 pixel.

Questa la sintassi:

<img src="tarta.jpg" vspace="50">

ho impostato uno spazio verticale di 50 pixel.

Questa la sintassi:

<img src="tarta.jpg" hspace="50" vspace="50">

ho impostato uno spazio orizzontale ed uno spazio verticale entrambi di 50 pixel.

WIDTH HEIGHT

L'attributo WIDTH, così come l'attributo HEIGHT, vengono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine; se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre eventuale testo, per questo motivo conviene impostare sempre questi valori, visto poi che sono noti. Si possono impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare l'immagine a certe dimensioni, compreso un'eventuale distorsione.

Questa la sintassi:

<img src="tarta.jpg" width="114" height="75">

ho impostato le dimensioni orizzontali e verticali dell'immagine.

potrei decidere di modificare l'immagine assegnando valori diversi da quelli reali, come in questo caso:

<img src="tarta.jpg" width="60" height="35">

ho impostato le dimensioni orizzontali a 60 px e verticali a 45 px.

Potrei deformare l'immagine assegnando valori sproporzionati, come in questo caso:

<img src="tarta.jpg" width="35" height="60">

ho impostato dimensioni orizzontali 50 px e verticali 100 px.

USEMAP

L'attributo USEMAP viene adoperato per indicare che l'immagine è una mappa d'immagine sul lato client. Cosa significa mappa di immagini ? E' possibile suddividere un'immagine in diverse aree tipo una mappa, da qui appunto il nome. Associare ad ognuna di queste aree la possibilità di richiamare un link diverso. In pratica la stessa immagine usata come link è in grado di richiamare links diversi a seconda del punto in cui viene cliccata. Se l'argomento USEMAP inizia con un simbolo # si assume che la descrizione della mappa si trovi nello stesso documento in cui si trova il tag IMG; risulta infatti possibile avere la definizione della mappa anche su un file di testo separato.

Questo un esempio:

<img src="tarta.jpg" USEMAP="map.htm#mappa1" >

Questo codice utilizza la mappa descritta come mappa1 in map.htm, per il file di immagine tarta.jpg

Le aree attive dell'immagine vengono descritte adoperando i tags MAP e AREA

<MAP>...<MAP>

L'elemento MAP descrive ciascuna delle aree dell'immagine a cui è stata assegnata una mappa, e indica la posizione del documento da scaricare quando viene attivata l'area definita.

Questo un esempio:

<MAP NAME="nome">
<AREA [SHAPE="forma"] COORDS="x,y,..." [HREF="riferimento"] [NOHREF] >
</MAP>

dove:
nome specifica il nome della mappa in modo che USEMAP possa fare riferimento ad essa.
forma fornisce la forma dell'area specificata es. RECT per rettangolo.
Nel caso si omettesse l'attributo SHAPE viene assunto SHAPE="RECT" per default, le altre forme sono circle e poly.
L'attributo COORDS fornisce le coordinate nella forma utilizzando pixel dell'immagine come unità. Per un rettangolo le coordinate vengono fornite - sinistro, alto, destro, basso - L'area rettangolare definita comprende l'angolo inferiore destro specificato , se per esempio si volesse specificare l'intera area di una immagine 100 x 100 pixel le coordinate saranno:"0,0,99,99"
HREF richiama il link ad esso associato NOHREF indica che eventuali clic in questa zona non richiameranno alcun link.

<AREA>

L'elemento AREA specifica le diverse aree, nel caso in cui due aree si intersecano quella che appare per prima nella definizione avrà prevalenza.

Vediamo un esempio per riassumere il tutto:

<MAP NAME="tartaruga">
<AREA SHAPE="RECT" COORDS="32,39,78,63" HREF="interno.htm">
<AREA SHAPE="RECT"COORDS="13,2,99,37" HREF="guscio.htm">
</MAP>
<img src="tarta.jpg" USEMAP="tartaruga">

Provate a cliccare sulla testa o sul guscio della tartaruga, per andare rispettivamente ad inizio o fine di questo documento.

tartaruga

Non so bene se funzioni con tutti i browser, alcuni infatti supportano solo RECT e non CIRCLE e POLY. Questa spiegazione ha il solo scopo di chiarire meglio il funzionamento di una immagine suddivisa in mappa. Per la sua realizzazione nessuno ricorre ai comandi manuali, i programmi in grado di generare mappe da un'immagine sono infatti ormai moltissimi. Esistono anche editors HTML in grado di generare automaticamente codice per mappe cliccabili, sarà sufficiente tracciare le aree da cliccare, esattamente come adoperare un programma di grafica.


WebLink - Tutto per la costruzione delle tue pagine web.

Home
Struttura
<!DOCTYPE>
<HTML>
<HEAD>
<BODY>
<BASE>
<LINK>
<META>
<STYLE>
<TITLE>
<SCRIPT>
backgroung
bgcolor
bgproperties
link
vlink
alink
text
margini
Formattazione
<BASEFONT>
<BR>
<CENTER>
<COMMENT>
<DIV>
<SPAN>
<FONT>
<HR>
<HX>
<MARQUEE>
<P>
<PRE>
<B>
<I>
<U>
color
face
size
Tabelle
<TABLE>
<TR>
<TD>
<TH>
<CAPTION>
<COL>
<COLGROUP>
<TBODY>
<TFOOT>
<THEAD>
align
background
bgcolor
border
bordercolor
bordercolordark
bordercolorlight
cellpadding
cellspacing
colspan
frame
height
nowrap
rowspan
rules
valign
width
Elenchi
<DIR>
<DL>
<MENU>
<OL>
<UL>
<LI>
<DT>
<DD>
compact
type
start
Immagini
<IMG>
<MAP>
<AREA>
align
alt
border
ismap
lowsrc
src
vspace
hspace
width
height
usemap
Links
<a>
name
href
mailto
target
Audio
<bgsound>
<embed>
loop
autostart
Frames
<frameset>
<frame>
<noframe>
rows
col
src
name
marginwidth
marginheight
scrolling
noresize
frameborder
framespacing
Iframe
<iframe>
src
width
height
scrolling
frameborder
marginwidth
marginheight
vspace
hspace
align
name
Form
<form>
action
method
enctype
<input>
align
checked
maxlength
name
size
src
value
type
<option>
<select>
<textarea>
button
checkbox
hidden
image
password
radio
reset
submit
text
textarea
Java - JS
<APPLETS>
<SCRIPT>
onAbort
onBlur
onChange
onClick
onError
onFocus
onLoad
onMouseOut
onMouseOver
onReset
onSelect
OnSubmit
OnUnload


Java

Nota Html è un linguaggio piuttosto semplice, nella sua semplicità risiedono purtroppo alcune limitazioni, dovute sicuramente al fatto che quando è nato non c'erano le molte necessità di oggi. Per colmare queste carenze si ricorre spesso a linguaggi da integrare con lo stesso html. Il più adoperato è in assoluto Javat che non ha nulla in comune con JavaScript se non la sua parte iniziale del nome.

A questo proposito se ne sentono dire molte, alcune sono prive di ogni fondamento, mi riferisco al fatto che possano recare danni alla macchina sulla quale vengono eseguiti. Personalmente non credo sia possibile, le storie che circolano a proposito di virus o formattazioni varie, sono a mio personale e modesto parere solo leggenda, questo almeno ad oggi... Sappiamo infatti con quale rapidità si evolve e si sviluppa il settore, domani però è un altro giorno e tutto potrebbe accadere. :-)

Java Un linguaggio completo e indipendente col quale ottenere vere e proprie applicazioni eseguibili all'interno di pagine web. Si tratta di un linguaggio basato sul C++ che genera codice precompilato sottoforma di applet. Non preoccupatevi, non dobbiamo creare queste applet ma sapere come inserirle, la rete è piena di applet già pronte, anche Web-Link ne raccoglie fra le più belle; si tratta soltanto di scegliere quelle che fanno al caso nostro ed incorporarle, vediamo come:

<APPLET>...</APPLET>

L'elemento <APPLET> (i Browser IE riconoscono come inserimento di applet anche l'elemento <OBJECT>) entrambi servono appunto per inserire applet nella pagina web, diversi sono gli attributi possibili:

<APPLET>

attributi assegnabili:

 ALIGN
ALT
CODE
CODEBASE
NAME
WIDTH
HEIGTH
VSPACE
HSPACE

</APPLET>

ALIGN

L'attributo ALIGN, opzionale, specifica l'allineamento dell'applet; i valori possono essere gli stessi dell'elemento IMG quindi: left, right, top, texttop, middle, absmiddle, baseline, bottom e absbottom.

<APPLET ALIGN="center">

ALT

L'attributo ALT, opzionale, specifica un testo alternativo da visualizzare nel caso in cui il browser riconoscesse l'elemanto APPLET ma non fosse in grado di eseguirne il codice.

<APPLET ALT="spiacente il tuo browser non è in grado di visualizzare questo applet">

CODE

L'attributo CODE, obbligatorio, specifica il nome del file che contiene il codice compilato dell'applet. Di norma un file con estensione .class

<APPLET CODE="weblink.class">

CODEBASE

L'attributo CODEBASE, opzionale, specifica l' URL di base dell'applet; ovvero la cartella (directory) che contiene il codice compilato dell'applet.

<APPLET CODE="http://web-link.it/weblink">

NAME

L'attributo NAME, opzionale, specifica il nome per l'istanza dell'applet, consentendo agli altri applet che si trovano sulla stessa pagina di riconoscersi e comunicare a vicenda tra di loro.

<APPLET NAME="web">

WIDTH e HEIGHT

Gli attributi WIDTH e HEIGHT, obbligatori, specificano le dimensioni dell'area di visualizzazione dell'applet stesso.

<APPLET WHIDTH="200" HEIGHT="150" >

VSPACE e HSPACE

Gli attributi VSPACE e HSPACE, opzionali, specificano il numero di pixel da lasciare sopra e sotto l'applet, una sorta di margini.

<APPLET VSPACE="12" HSPACE="5" >

<PARAM NAME= attributo1 VALUE = valore>

Questo elemento rappresenta l'unico modo possibile per inviare dati all'applet; di solito i vari parametri sono suggeriti dall'applet stesso e sono indispensabili ai fini del suo corretto funzionamento. Ipotiziamo che l'applet richieda un determinato font, questo sotto un possibile esempio:

<APPLET>

<PARAM NAME=FontName VALUE="TimesRoman">

</APPLET>

© Andrea Bianchi 1997 ~ 2002


JavaScript

Nota Html è un linguaggio piuttosto semplice, nella sua semplicità risiedono purtroppo alcune limitazioni, dovute sicuramente al fatto che quando è nato non c'erano le molte necessità di oggi. Per colmare queste carenze si ricorre spesso a linguaggi di scripting da integrare con lo stesso html. Il più adoperato è in assoluto JavaScript che non ha nulla in comune con Java se non la sua parte iniziale del nome.

A questo proposito se ne sentono dire molte, alcune sono prive di ogni fondamento, mi riferisco al fatto che possano recare danni alla macchina sulla quale vengono eseguiti. Personalmente non credo sia possibile, non essendo in grado di scrivere su disco fisso se non a livello di piccoli file di testo (cookie). Le storie che circolano a proposito di virus o formattazioni varie, sono a mio personale e modesto parere solo leggenda, questo almeno ad oggi... Sappiamo infatti con quale rapidità si evolve e si sviluppa il settore, domani è un altro giorno e tutto potrebbe accadere. :-)

JavaScript Come dice la parola stessa si tratta di script, istruzioni che vengono impartite ed eseguite dallo stesso browser di navigazione, che le legge e le interpreta in modo sequenziale, se combinate insieme ai fogli di style danno vita al DHTML (Dynamic HTML). Sono relativamente semplici da comprendere e da adoperare. Per alcune funzioni sono addirittura indispensabili.

Lo scopo di questa mia guida non è insegnare JavaSscript, più semplicemente come integrarlo con html, per questo motivo mi soffermerò soltanto su ciò che si trova in stretta relazione fra le due cose. Vi ricordo che la rete è piena di siti che offrono script, anche su Web-Link ne troverete diversi e per disparati utilizzi; si tratta semplicemente di sapere cosa cercare, dopodichè non resta che inserire il tutto nelle proprie pagine, vediamo alcune regole:

<SCRIPT>...</SCRIPT>

Gli elementio <SCRIPT> </SCRIPT> fanno da contenitore del codice, sia esso semplice o complesso, da notare che si trovano anche sofisticati e complessi programmi racchiusi in questo elemento. La sua collocazione avviene di norma nella sezione <head>...</head> del documento html. Il richiamo o l'attivazione di questo codice, quando richiesta, è associata ad un gestore di eventi posto all'interno di <body>...</body>.

Gestori di eventi potrebbero essere: il passaggio (OnMouseOver), il click (OnClink) del mouse su di un link, l'avvenuto caricamento della pagina (OnLoad) ecc. ecc.

<HEAD>

<SCRIPT>

... il codice di scripting

</SCRIPT>

</HEAD>

<BODY>

... il richiamo al codice di scripting

</BODY>

Se non specificato diversamente, lo script si intende valido per tutti i browser che supportano JavaScript. Negli ultimi anni si sono viste diverse e continue evoluzioni dei browser, queste hanno permesso di introdurre nuovi comandi e nuove funzioni anche per linguaggi di scripting, laddove si facesse uso di particolari script supportati solo da determinate versioni si dovrà specificarlo in modo da evitare che browser obsoleti possano leggere e male interpretare lo script.

Per fare questo è sufficiente dichiarare la versione di riferimento e fare magari uso anche di elementi di commento quali <!-- --> che nascondono il codice ai browser che non lo supportano.

<HEAD>

<SCRIPT language="JavaScript1.1" type="text/javascript">

<!--

... il codice di scripting qualunque esso sia

-->

</SCRIPT>

</HEAD>

<BODY>

... il richiamo al codice di scripting

</BODY>

Nell'esempio sopra, la dichiarazione SCRIPT language= JavaScript1.1 informa il browser che lo script fa uso di funzioni supportate a partire dalla versione 1.1 di javascript (attualmente l'ultima versione è la 1.3, supportata da NS V.4.5 o superiore e IE V 5.0 o superiore). Gli elementi di commento: <!-- e --> servono invece a nascondere completamente lo script a quei browser che non supportano questa versione.

Gestori di eventi:

Come abbiamo detto, uno script semplice o complesso che sia, ha bisogno di un determinato evento che lo richiami per poter andare in esecuzione, soltanto in quel determinato caso svolgerà la funzione per la quale è stato programmato. Sono molti i gestori di eventi nella attuale versione 1.3 di javascript, mi limiterò ad elencarli dando una breve spiegazione per ognuno di loro, evitando così il rischio di dover scrivere anche una guida su JavaScript :-)

Gli eventi e le relative azioni:

onAbort | Avvia uno script quando l'utente interrompe il caricamento di una immagine
onBlur | Avvia uno script quando il puntatore del mouse esce dalla finestra, dal frame, dal campo di un form.
onChange | Avvia uno script quando il contenuto di un campo modulo è modificato.
onClik | Avvia uno script quando il tasto del mouse viene premuto.
onError | Avvia uno script quando gli attributi del tag <IMG> generano un errore.
onFocus | Avvia uno script quando il puntatore del mouse entra nella finestra, nel frame, nel campo di un form. (l'opposto di onBlur).
onLoad | Avvia uno script quando la pagina è stata caricata completamente.
onMouseOut | Avvia uno script quando il puntatore del mouse abbandona il testo o l'immagine associata ad un link.
onMouseOver | Avvia uno script quando il puntatore del mouse passa sopra al testo o all'immagine associata ad un link.(l'opposto di onMouseOut).
onReset | Avvia uno script quando viene premuto sul pulsante reset di un modulo form.
onSelect | Avvia uno script quando si seleziona col mouse del testo all'interno di una casella testo di un form.
onSubmit | Avvia uno script quando viene premuto il pulsante invio di un modulo form.
onUnload | Avvia uno script quando si abbandona un documento o una pagina web.

Ancora una volta un piccolo esempio chiarirà meglio tutto quanto. Con i gestori di evento onMouseOver e onMouseOut è possibile cambiare immagine passando sopra un link, provate poi a cliccare sull'immagine stessa. Si tratta solo di banali esempi per meglio rendere l'idea e la potenza degli script:


Ancore o Links

Le ancore Una pagina senza ancore (link) non sarebbe una pagina web. La forza delle pagine web è proprio quella di agganciare ed essere a sua volta agganciate alle altre pagine rendendo tutta la rete un unico documento. Quando cliccate sopra un link azionate un meccanismo, di fatto interagite con la pagina web. Questo meccanismo potrebbe essere semplicemente un cambio pagina o l'inizio dello scaricamento di un file, o l'apertura del vostro programma di posta elettronica per l'invio mail. Tutte queste azioni sono gestite dal tag ancora <A> di sicuro uno dei tags più importanti di HTML

<A>...</A>

L'elemento <A> necessita di uno dei due attributi possibili, e cioè NAME o HREF, da solo infatti non serve a nulla. Vediamo questi due attributi:

NAME

L'attributo NAME serve per creare una specie di etichetta, questa vine collocata nel punto esatto in cui è stata creata, sarà poi possibile richiamarla con l'elemento <A> seguito dall'attributo HREF. In questo modo anzichè richiamre una pagina richiameremo quel punto preciso dove si trova l'etichetta.
Complicato ?
Con NAME si crea un punto nel documento e con HREF="#nome assegnato al name" si raggiunge quel punto, praticamente un collegamento ipertestuale normalissimo con la sola differenza che anzichè richiamare una nuova pagina se ne richiama anche o un punto della stessa.
Vediamo un esempio:

<A name="weblink"></A>

Così facendo ho creato un'etichetta con nome weblink

L'eticchetta risulterà essere completamente trasparente alla pagina web, non si vedrà nulla a video. Fatto questo non resta che richiamarla da qualsiasi altra parte del documento o da qualsiasi altra pagina web, il link sposterà la visualizzazione in questo punto preciso. Poco più avanti, spiegando le varie possibilità di HREF, sarà possibile avere una dimostrazione pratica di come funziona l'etichetta WebLink appena creata.

HREF

L'attributo HREF (Hypertext REFerence) all'interno dell'elemento <A> trasforma in un collegamento ipertestuale il testo o l'immagine che segue fino alla chiusura dell'elemento con </A>.
Generalmente il testo o la cornice dell'immagine diventa di colore blu sottolineato salvo diverse impostazioni voluti all'interno dell'elemento <body> Questo per meglio evidenziare che si tratta di un collegamento, il cursore del mouse una volta posizionato sopra la scritta o l'immagine si trasformerà in una piccola mano col dito indice teso pronto a premere il link. Vediamo quali sono le diverse forme per questo attributo:

Questo simbolo # (pound o cancelletto) seguito dal nome che è stato assegnato con l'attributo NAME permette di saltare nel punto esatto in cui l'etichetta è stata posizionata, si veda la spiegazione di NAME un paio di righe sopra. Vediamo un esempio pratico:

<A HREF="#weblink"></A>

Clicca su questa scritta per saltare all'etichetta WebLink definita sopra

http:// questo tipo di ancora è senza dubbio la più adoperata serve per richiamare altre pagine. E' sufficiente specificare l'intero percorso. Vediamo un esempio pratico:

<A HREF="http://www.web-link.it"></A>

Clicca su questa scritta per WebLink tutto per la tua pagina web

mailto: questo tipo di ancora serve per ricevere un msg nella propria casella postale, oltre all'indirizzo è possibile impostare anche il subject della mail, infatti questo collegamento richiama il programma client di posta adoperato dal navigatore. Vediamo un esempio pratico:

<A HREF="mailto:weblink@lycosmail.com"></A>

Clicca su questa scritta per inviarmi una mail

E' possibile impostare anche il subject, si dovrà aggiungere un punto interrogativo e la parola subject dopo l'indirizzo. Vediamo un esempio pratico:

<A HREF="mailto:guidahtml@web-link.it?subject=La tua guida HTML"></A>

Per inviarmi una mail con soggetto: la tua guida HTML

Queste le altre forme che sono ammesse dall'attributo HREF:

<A HREF="pagina.htm">Realizza un collegamento ad una pagina che si trova nella stessa dir

<A HREF="http://..."> Realizza un collegamento ad una pagina che si trova in un server web

<A HREF="ftp://..."> Realizza un collegamento di tipo FTP

<A HREF="gopher://..."> Realizza un collegamento ad un server gopher

<A HREF="mailto:..."> Realizza un collegamento al client di posta elettronica

<A HREF="news:..."> Realizza un collegamento a NewsGroup Usenet

Ci sono anche altre forme quali newsrc:... nntp://... telnet://... wais://... ma credo saino molto rare.

TARGET

L'attributo TARGET serve per aprire il collegamento su un frame diverso da quello in cui si trova. Ovviamente questo attributo è adoperato solo in caso di un sito strutturato in frames, è utile specialmente per chi avendo un menu laterale voglia fare in modo che i links richiamati dal menu siano visualizzati sulla pagina principale. Per fare questo si dovrà specificarne il nome, quello che è stato assegnato al frame. Ipotizziamo di avere con nome home il frame principale , volendo fare in modo che il link venga aperto su quel frame questa la sintassi:

<A HREF="http://www.web-link.it" target="home"></A>

Nel caso in cui non esistesse un frame con nome home verrà aperta una nuova finestra del browser.


Tabelle

Le Tabelle una delle più geniali invenzioni che si potessero fare per html :-)
Croce e delizia dei due browser che le supportano in modo molto diverso. Non servono soltanto per incolonnare e tabulare dati come si potrebbe pensare, le tabelle se sapientemente sapute sfruttare permettono una precisa impaginazione di tutti gli elementi che compongono la pagina stessa; siano questi testi, immagini o qualsiasi altra cosa.

Alcuni elementi sono ad uso esclusivo dei soli browser IE. Alcuni di questi li ho trascurati oltre che per l'esclusiva, anche perchè personalmente li trovo inutili.

Chi sono io per poter giudicare a questo modo ???
Nessuno, non sono proprio nessuno... ma se pensate che possano servire potete sempre ricredervi più avanti :-))

<TABLE>...</TABLE>

Una tabella inizierà sempre con questo elemento <TABLE> delimitatore della tabella stessa, all'interno di questo elemento sono molti gli attributi che si possono inserire, vediamoli:

<TABLE>

attributi assegnabili all'elemento TABLE:

 ALIGN
BACKGROUND
BGCOLOR
BORDER
BORDERCOLOR
BORDERCOLORDARK
BORDERCOLORLIGHT
CELLPADDING
CELLSPACIG
FRAME
HEIGHT
RULES
WIDTH

Si inseriscono lasciando uno spazio vuoto fra la scritta table e la sua chiusura > gli attributi possono essere più di uno e specificati uno di seguito all'altro.

ALIGN

Consente di specificarne l'allineamento con le seguenti possibilità: Center, Left e Right rispettivamente per centrato, a sinistra, a destra.

BACKGROUND

Permette di avere un'immagine come sfondo della tabella, è possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti. Si possono utilizzare i vari tipi di file grafici consentiti: gif, jpg, png.

<TABLE background="immagine_di_sfondo.jpg">

BGCOLOR

Permette di avere un colore in tinta unita come sfondo della tabella, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.

<TABLE BGCOLOR="Yellow">

<TABLE BGCOLOR="#ffff00">

BORDER

Permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è possibile impostarne anche lo spessore. Alcuni browser in mancanza di questo attributo lasciano un piccolo spazio pur non facendo vedere alcun bordo, per recuperare quello spazio è necessario impostare il border a zero.

<TABLE border ="1">

<TABLE border ="5">

<TABLE border ="10">

BORDERCOLOR

Permette di selezionare il colore del bordo, questo attributo supportato solo da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.

<TABLE border="1" bordercolor="Red">

BORDERCOLORDARK

Permette di selezionare il colore più scuro su un bordo (l'opposto di BORDERCOLORLIGHT); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.

<TABLE border="1" bordercolordark="Red">

BORDERCOLORLIGHT

Permette di selezionare il colore più chiaro su un bordo (l'opposto di BORDERCOLORDARK); creando un effetto di luce. Questo attributo supportato solo da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.

<TABLE border="1" bordercolorlight="Red">

CELLPADDING

Specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il dato vero e proprio in esse contenuto, il valore per default è 1 , quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero.

<TABLE cellpadding="0">

<TABLE cellpadding="10">

CELLSPACING

Specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare cellspacing uguale a zero .

<TABLE cellspacing="0">

<TABLE cellspacing="10">

FRAME

Permette di scegliere quale tipo di visualizzazione assegnare al bordo. Questo attributo
supportato dal solo IE, per funzionare deve avere impostato l'attributo border. I valori
possibili sono:

void = rimuove tutti i bordi esterni
above = visualizza solo i bordi esterni in cima alla tabella
below = visualizza solo i bordi esterni in fondo alla tabella
hsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabella
lhs = visualizza i bordi esterni solo al margine sinistro della tabella
rhs = visualizza i bordi esterni solo al margine destro della tabella
vsides = visualizza i bordi esterni ai due margini destro e sinistro della tabella
box = visualizza un riquadro attorno alla tabella (tutti i margini)
border = visualizza un riquadro attorno alla tabella (come box)

<TABLE cborder="2" frame="void" >

<TABLE border="2" frame="above">

<TABLE cborder="2" frame="bellow" >

<TABLE border="2" frame="hsides">

<TABLE cborder="2" frame="lhs" >

<TABLE border="2" frame="rhs">

<TABLE border="2" frame="vsides">

<TABLE cborder="2" frame="box" >

<TABLE border="2" frame="border">

HEIGHT

Permette di specificare l'altezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza.

<TABLE height="50">

<TABLE height="10%">

Provate a variare le dimensioni della vostra finestra, quella in cui state vedendo questa pagina, vedrete che anche l'altezza della tabella varia mantenendo il 10% di visualizzazione specificato.

RULES

Serve per la visualizzazione dei bordi interni quando si fa uso dei tags <THEAD> <TBODY> e <TFOOT>, tutti questi attributi sono supportati dai soli browser IE per funzionare deve essere necessariamente impostato anche l'attributo border. I valori possibili sono:

none = rimuove tutti i bordi esterni
basic = visualizza bordi orizzontali fra le sessioni <THEAD><TBODY><TFOOT>
rows = visualizza bordi orizzontali tra ciascuna riga
cols = visualizza bordi orizzontali tra cisacuna colonna
all = visualizza tutti i bordi interni

WIDTH

Permette di specificare la larghezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza.

<TABLE width="350">

<TABLE width="50%">

Provate a variare le dimensioni della vostra finestra, quella in cui state vedendo questa pagina, vedrete che anche l'altezza della tabella varia mantenendo il 50% di visualizzazione specificato.

<CAPTION>...</CAPTION>

L'elemento <CAPTION> rappresenta la didascalia della tabella, deve trovarsi all'interno della tabella ma non all'interno di righe o di celle.

<TABLE>

<CAPTION>

Didascalia della tabella

</CAPTION>

<TR><TD>cella</TD></TR>

</TABLE>

gli attributi associabili a questo tag sono:

ALIGN
VALIGN

ALIGN

L'attributo ALIGN controlla se la didascalia deve essere sovrapposta o restare sullo sfondo a seconda che si assegni il valore TOP o BOTTOM. Per default questo valore è TOP. IE consente anche un allineamento verticale col l'attributo VALIGN. Gli altri valori possibili oltre a TOP e BOTTOM sono LEFT, CENTER, RIGHT.

Questa è una didascalia con align = TOP

<TABLE>

<CAPTION align="top">

Questa è una didascalia con align = TOP

</CAPTION>

</TABLE>

<TABLE>

<CAPTION align="bottom">

Questa è una didascalia con align = BOTTOM

</CAPTION>

</TABLE>
Questa è una didascalia con align = BOTTOM

VALIGN

Permette di specificare l'allineamento verticale del testo visualizzato nelle celle di una tabella, per default questo valore è centrato, questo tipo di attributo è supportato soltanto da IE.

<COL>...</COL>

Serve per specificare l'allineamento del testo per le colonne della tabella, questo TAG è supportato soltanto da IE.

<COLGROUP>...</COLGROUP>

Serve per raggruppare alcune colonne in modo da impostarne le relative proprietà di allineamento, questo TAG è supportato soltanto da IE ed accetta i seguenti attributi:

ALIGN = center, justify, left, right. per default è impostato center
SPAN = valore. Imposta il numero di colonne su cui agire con ALIGN e VALIGN
VALIGN = baseline, bottom, middle, top. Imposta l'allineamento verticale del testo

<TBODY>...</TBODY>

Questo elemento supportato soltanto da IE serve per specificare la sezione del corpo della tabella, è analogo all'elemento <BODY> di html ed influenza direttamente la visualizzazione della tabella stessa.

<TD>...</TD>

Questa coppia di tags definiscono la cella vera e propria della tabella, molto importante per non dire indispensabile, supporta tutti gli attributi di TABLE; quindi non soltanto i vari allineamenti ma è possibile avere anche colori o immagini di sfondo, volendo anche diverse fra le singole celle. Attenzione però, a differenza di table è possibile adoperare anche l'attributo NOWRAP, che se presente impedisce il ritorno a capo del contenuto della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Questo tag è di norma preceduto dal tag TR che definisce l'inizio della riga. All'interno di una stessa tabella e delle stesse singole righe si dovranno definire lo stesso identico numero di celle, a meno che non si faccia uso dell'attributo COLSPAN.

<TR><TD>questa è una cella </TD></TR>

<TR><TD>queste sono due celle </TD>

<TD>queste sono due celle </TD></TR>

<TR><TD>queste sono tre celle </TD>

<TD>queste sono tre celle </TD>

<TD>queste sono tre celle </TD></TR>

E così via... Il tutto ovviamente all'interno dei tags <TABLE> e </TABLE> Ho reso visibile il bordo per permettere di capirne meglio il funzionamento, molto spesso invece il bordo è impostato a zero in modo da usare la tabella solo come struttura portante dei dati.

Le tabelle si possono nidificare, cioè è possibile mettere delle tabelle all'interno di altre tabelle creando così strutture più o meno complesse che si adattano prfettamente a qualsiasi tipo di impaginazione voluta. Queste potrebbero addirittura contenere parti di immagini che si ricompongono cella per cella come se si trattasse di un puzzle. Anzi, per immagini di grosse dimensioni vengono adoperate proprio a questo modo per non creare lunghe attese di caricamento.

<TFOOT>...</TFOOT>

Questo elemento supportato soltanto da IE, serve per specificare la sezione del piede della tabella.

<TH>...</TH>

Questo tag definisce la cella intestazione della tabella, significa che il testo all'interno di questo tag sarà in neretto,supporta tutti gli attributi di TABLE e di TD. Attenzione all'attributo NOWRAP, se presente impedisce il ritorno a capo del contenuto della cella forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Necessita di essere racchiuso fra i tags <TR> </TR> esattamente cone TD

<TABLE>

<TH> questa la cella TH </TH>

<TR><TD> questa la cella TD </TD></TR>

</TABLE>

Questo il risultato

questa la cella TH

questa la cella TD

<THEAD>...</THEAD>

Questo elemento ad uso dei soli browser IE è utilizzato per specificare la sezione di intestazione della tabella. E' simile all'elemento HEAD di html.

<TR>...</TR>

Questo tag definisce l'inizio di una riga della tabella, significa che il numero di righe di una tabella è pari al numero di elementi TR in essa contenuti. Supporta molti degli attributi di TABLE e di TD. A differenza di TD non contiene dati al suo interno in quanto serve solo per creare la struttura, non hanno quindi ragione di esistere attributi quali BGCOLOR o BACKGROUND che se occorrono potranno essere definiti nel tag TD all'interno di TR stesso.

<TR><TD>questa è una riga con una cella </TD></TR>

<TR><TD>queste sono due righe </TD></TR>

<TR><TD>con una cella per riga </TD></TR>

ROWSPAN e COLSPAN

Come già accennato, le tabelle, salvo casi particolari, hanno un numero di celle uguale per ogni riga ed un numero di righe pari ad ogni serie di celle. Se non si potesse intervenire diversamente, questo le renderebbe piuttosto rigide e forse poco utilizzabili dal lato pratico. Gli attributi COLSPAN e ROWSPAN servono proprio a spezzare questa regola e dare la possibilità di modificarle a proprio piacimento, si tratta di avere le idee chiare su come dovrà essere fatta questa tabella, prima di passare alla sua realizzazione. Vediamo alcuni esempi che chiariranno certamente meglio il concetto.

<table>
<tr><td> riga 1 cella 1 </td><td> riga 1 cella 2 </td></tr>
<tr><td> riga 2 cella 3 </td><td> riga 2 cella 4 </td></tr>
</table>

Questo sotto il risultato

riga 1 cella 1 | riga 1 cella 2
riga 2 cella 3 | riga 2 cella 4

E' abbastanza intuitivo che se servisse una tabella con 16 celle si potrebbe disporla su 4 righe con 4 celle, oppure due righe con 8 celle, o anche 8 righe con 2 celle. E perchè no 16 righe da una sola cella ?
Quando però la tabella non è più regolare, per esempio nel caso servano 7 celle e dove magari la prima di dimensioni maggiori, per mettere al suo interno un'intestazione o altro... come fare ?
ROWSPAM e COLSPAN servono proprio a questo, a spezzare righe e colonne mantenendo la struttura, vediamo un esempio.

La tabella regolare prevede due TR ed otto TD, praticamente quattro per ogni TR
questo il risultato:

riga 1 cella 1 | riga 1 cella 2 | riga 1 cella 3 | riga 1 cella 4
riga 2 cella 5 | riga 2 cella 6 | riga 1 cella 7 | riga 1 cella 8

Adesso al primo TD, quello della cella 1 riga uno, aggiungeremo l'attributo ROWSPAN seguito dal numero 2, così facendo la tabella espanderà la colonna cella 1 in modo che prenda 2 posti, quindi si fonderà con la cella sottostante che andrà eliminata. Questo il listato ed anche l'esempio pratico:

<table>
<tr><td rowspan="2"> riga 1/2 cella 1 </td><td> riga 1 cella 2 </td><td> riga 1 cella 3 </td><td> riga 1 cella 4 </td></tr>
<tr><td> riga 2 cella 5 </td><td> riga 2 cella 6 </td><td> riga 2 cella 7 </td></tr>
</table>

riga 1/2 cella 1 | riga 1 cella 2 | riga 1 cella 3 | riga 1 cella 4
 | riga 2 cella 5 | riga 2 cella 6 | riga 2 cella 7

Vediamo adesso lo stesso esempio ma immaginando che sia la prima riga che dovrà essere di dimensioni pari a 3 celle. Torniamo al primo TD, quello della cella 1 riga 1, e mettiamo l'attributo COLSPAN seguito dal numero 3; la tabella espanderà la riga cella 1 in modo che prenda altri 2 posti, quindi si fonderà con le celle laterali che noi elimineremo. Questo il listato ed anche l'esempio pratico:

<table>
<tr><td colspan="3"> riga 1 cella 1, 2, 3 </td></tr>
<tr><td> riga 2 cella 2 </td><td> riga 2 cella 3 </td><td> riga 2 cella 4 </td></tr>
</table>

riga 1 cella 1, 2, 3
riga 2 cella 2 riga 2 cella 3 riga 2 cella 4

Dicevo all'inizio di questa lezione che le tabelle possono essere nidificate fra di loro, non ci sono limiti se non quello della propria fantasia. Magari evitate di complicarvi troppo la vita se non ce ne fosse realmente il bisogno. Ecco un altro esempio pratico:

<table>
<tr><td colspan="3"> riga 1 cella 1, 2, 3 </td></tr>
<tr><td> riga 2 cella 2 </td><td> riga 2 cella 3 </td><td> riga 2 cella 4 </td></tr>
</table>

tab 2 rig 1 cel 1 | tab 2 rig 1 cel 2
tab 2 rig 2 cel 3 | tab 2 rig 2 cel 4
 tab1 riga 1 cella 2 tab1 riga 1 cella 3
tab 1 riga 2 cella 4 tab1 riga 2 cella 5