HTML Manuale di programmazione by Ivs

 INDICE

Premessa

 

Generale

Struttura di base di un documento HTML

Formattazione

Dal grassetto all'allineamento, dal colore all'impostazione della grandezza del testo

Immagini

Inserimento di immagini, loro dimensione e risoluzione video

Collegamenti (Link, Hyperlink, Ancore)

Capire e strutturare i link interni ed esterni dei documenti ipertestuali

Frames

Divisione e gestione della finestra del browser in porzioni

Mappe: definizione

Creare immagini intelligenti!!! , tipi di mappature e programmi di utilità

Segni di paragrafo e argomento
     Spaziature e formattazioni
Liste

Liste libere, elenchi puntati e numerati, liste composte

Sfondi e colori

Attributi colore del documento, programmi per gestire colori RGB

Caratteri speciali

Tabelle di conversione e di consultazione per caratteri latin e simboli di utilità generica

Moduli , Schede o form

Tutti i tag per la creazione di form complessi e di acquisizione dati utente

Tabelle

Uso delle tabelle per presentazione dati e per impaginazioni di alto livello grafico

Target (destinazione dei link)

Gestione della destinazione dell' output proveniente da link o processi server come risposte di form

Varie e curiosità

Comandi non classificabili nelle sezioni precedenti

TORNA ALL'INDICE

Premessa

Se avete deciso di leggere questo manuale, allora vuol dire che vi siete decisi quanto meno ad avvicinarvi ad HTML, il linguaggio di programmazione base di tutta internet.
Senza dilungarmi nella premessa, passiamo subito a studiare  HTML.

Quello che serve è un semplice editor.

Se decidete di utilizzare un editor di testo, sceglietene uno adatto per scrivere del codice html, infatti se utilizzerete noti software di editing, vi troverete del codice danneggiato da tutti quei caratteri invisibili all'utente che va ad insinuarsi tra il codice stesso rendendolo inutilizzabile. Ricordate inoltre di non formattare il testo, altrimenti danneggerete allo stesso modo il codice html.
Di editor adatti ne troverete tanti in giro per la rete e tutti o quasi gratuiti, anche in questo sito ne troverete qualcuno, decidete voi quale procurarvi. Cercate di imparare a programmare in html con un editor testuale, non arrendetevi e studiate, i risultati non tarderanno ad arrivare. La regola è STUDIARE.
Quindi riepilogando: html vi serve per realizzare le vostre pagine web che costituiranno il vostro website, per imparare a programmare in html dovete studiare, vi serve un editor, meglio se specifico per scrivere codice html e continuare a studiare per utilizzarlo.

Se invece optate per un programma visuale che realizzi per voi una pagina, vuol dire che non dovrete studiare questo manuale, vi serve qualcosa di semplice e funzionale, per iniziare, in giro per la rete e ovviamente. Ovviamente questo manuale è dedicato ad Html puro, destinato a chi vuole realizzare pagine web programmando e non facendole realizzare a programmi dedicati. Utilizzare un programma che offre la possibilità di ottenere il risultato di un codice scritto senza effettivamente farlo non implica che si può fare a meno di html, molte volte infatti, è necessario manipolare il codice, altrimenti ci si deve accontentare dei limiti del software che stiamo utilizzando (e vi assicuro che ad un certo livello sono limitati).Vedrete che imparando sempre più, sentirete l'esigenza di modificare i parametri di una tabella o di un collegamento ipertestuale diversamente rispetto a quelli di default scelti dal software che lo ha fatto per voi, ma andiamo con ordine.

Attenzione: Per fare in modo di rendervi padroni del linguaggio, ho appositamente evitato di mostrarvi il risultato del codice in questo manuale riportato. Io vi assicuro che il codice di esempio è esatto, A voi tocca utilizzare il codice tramite l'impiego dell'editor html e incominciare a scriverne del vostro. Questo è il metodo per imparare: studiare e applicare, non arrendetevi, ma studiate sempre nuove soluzioni, vedrete che ci riuscirete.

TORNA ALL'INDICE

Generale

TORNA ALL'INDICE

Formattazione

Il primo passo importante da compiere per imparare a realizzare una pagina web è quello di sapere immettere del testo in essa. Abbiamo visto come tramite il tag <p> </p> siamo riusciti a scrivere qualcosa, in maniera analoga adesso procederemo a realizzare qualcosa di più complesso.    

Il testo e il comando Align

Si utilizza con gli attributi left, center, right, justify, per allineare il testo rispettivamente a sinistra, centro, destra, giustificato.

Per utilizzare align e tutti i suoi attributi si deve ricorrere all'esatta sintassi che segue:

<p align="left">Questo testo sarà allineato a sinistra</p>

<p align="center">Questo testo sarà allineato in maniera centrale</p>

<p align="right">Questo testo sarà allineato a destra</p>

<p align="justify">Questo testo sarà allineato in maniera giustificata</p>

Per vederne gli effetti ricopiate il codice sopra descritto su di un editor html, salvate la pagina ed eseguitelo.
Sappiate che per tornare a capo durante la digitazione del testo non basta la semplice pressione del tasto Invio, ma dovrete digitare <br> (vedere anche in seguito), oppure aprire e chiudere il tag <p> (in questa maniera: <p> </p>). Il tag <br> non possiede relativo tag di chiusura.

Nota: Formattare il testo allineandolo a sinistra, al centro, a destra o in maniera giustificata potrebbe non essere sufficiente. Immaginate di dover incolonnare un testo in modo chiaro, justify sarebbe una buona soluzione, ma sarebbe ancora meglio qualcosa che si comportasse come justify, ma con la peculiarità extra di distanziare i termini con una spaziatura fissa. Il tag è <KBD></KBD> ed il testo da incolonnare deve essere racchiuso tra di essi. In alternativa potrete utilizzare i tags <TT></TT> oppure <SAMP></SAMP>.

Grassetto, Corsivo e sottolineato

Potrebbe capitare di dover formattare il testo anche nella sua estetica. Ad esempio, rendere in stile grassetto un termine servirebbe a metterlo in evidenza, così come il corsivo lo stilizzerebbe oppure il sottolineato ne suggerirebbe l'importanza. Vediamo ora come fare per ottenere gli effetti appena descritti:

<B> </B> (Bold)

Tutto quello che verrà scritto tra <b> e </b> risulterà scritto in grassetto.
Potrete utilizzare anche <strong> e </strong>

<U> </U> (Underlined)

Per ottenere l'effetto sottolineato scrivete il vostro testo tra questi tags.

<u> Il vostro testo </u>

<I> </I> (Italic)

Si utilizzano per rendere il testo in stile corsivo.

<i> Il vostro testo </i>

In alternativa utilizzate i tags <VAR></VAR>, in alternativa potrete utilizzare in maniera analoga i due tags <EM></EM>

Sotto un esempio di quanto descritto, potete fare il copia-incolla da questa pagina al vostro editor html per vederne gli effetti:

     <HTML>

     <HEAD>

     </HEAD>
    

     <BODY>

      <B>Questo stile è grassetto </B>

     
       <U>Questo stile è sottolineato </U>

      
       <I> Questo stile è corsivo </I>

       </BODY>

        </HTML>

  Se avete provato il codice sopra descritto, vi sarete accorti che tutto quanto viene scritto su unica riga. Per evitare ciò dovete utilizzare il tag <br>, in questa maniera otterrete l'interruzione della riga corrente ed un ritorno a capo.

Nota: ripeto che il tag <br> non possiede un tag di chiusura.

Copiate e incollate ora sul vostro editor html il codice che segue e vedete gli effetti del tag <br>.

      <HTML>

      <HEAD>

      </HEAD>

      <BODY>

             <B>Questo stile è grassetto, la prossima riga è a capo </B><br>

             <U>Questo stile è sottolineato, la prossima riga è a capo </U><br>

             <I> Questo stile è corsivo, la prossima riga sarà a capo </I><br>

      </BODY>

       </HTML>

 
Per cambiare invece il tipo di carattere, la sua dimensione ed il suo colore, dovrete utilizzare i tag <FONT> </FONT> con gli attributi SIZE, FACE, COLOR.

SIZE
Specifica la grandezza del carattere. Il valore massimo è 7.

FACE
Specifica il tipo di carattere.

COLOR
Specifica il colore del testo.

Sotto un esempio per illustrare chiaramente quanto descritto. Il mio consiglio è sempre quello di copiare ed incollare il codice seguente su di un editor html.

<HTML>
<HEAD>
</HEAD>
<BODY>
<font size="5" face="Arial" color="black">
<p> Questo è il risultato: grandezza del carattere: 5, tipo del carattere: Arial, colore: nero.</p> 
</BODY>
</HTML>

Un altro elemento che potrebbe risultare utile è la linea orizzontale, per separare le sezioni di una pagina.
Il tag che la riproduce è <HR>, non possiede chiusura e attributi. Per modificarne la lunghezza si utilizza Width.
Sotto un esempio:

<HR WIDTH="75">

La linea in tal maniera viene visualizzata con effetto 3D, per renderla bidimensionale con NOSHADE, scrivere il codice come segue:

<HR WIDTH="75" NOSHADE>

E' inoltre possibile settarne l'altezza e lo spessore utilizzando SIZE:

<HR WIDTH="75" SIZE="6" NOSHADE>

TORNA ALL'INDICE

Immagini

Inserire delle immagini su di una pagina contribuirà a renderla più gradevole a vedersi, oltre che professionale. Tuttavia prima di vedere come si inseriscono le immagini con il codice html, è doveroso analizzare delle problematiche che sovente si verificano dopo la realizzazione e la pubblicazione online del sito. Tutti noi avremo notato pagine particolarmente lente nel caricarsi, ritrovandoci ad aspettare anche parecchi minuti (se siamo stati disposti ad aspettare...) prima di poterle consultare. Le cause di tale lentezza potrebbero essere tante, tra le quali la immagini definite "pesanti". Per immagine "pesante" si intende una immagine dalle dimensioni espresse in kilobyte o peggio in megabyte, troppo grosse per potere essere caricate nei tempi dovuti. Un esempio classico è quello di impostare come sfondo della nostra home page una immagine delle dimensioni ad esempio di 500 kb, il risultato sarebbe un'attesa di caricamento che spesso si conclude con l'abbandono del sito alla ricerca di qualcosa di più fruibile da parte del visitatore.
la soluzione a questo inconveniente è banale: basta utilizzare i formati grafici adatti ed eventualmente del software reperibile anche su questo sito che si occupi di ottimizzarle riducendone le dimensioni.

I formati utilizzati a tale scopo sono principalmente due:

-         Gif (Graphic Interchange Format): ottimo per rappresentare colori uniformi come quelli dei loghi. Possiede una palette dei colori limitata, in compenso non rappresenta un sovraccarico ai fini del caricamento delle immagini.

 -   Jpeg (Joint Photographic Experts Group): consigliato per le fotografie, le quali contengono   milioni di colori, perchè possiede una palette di colori maggiore rispetto al formato gif.

Esiste da poco inoltre un nuovo formato che promette una migliore qualità delle immagini: il Png e che vorrebbe sostituire il formato Gif.  Il suo utilizzo è però ristretto solo ai browser più recenti.

Chiarito questo concetto passiamo ora a vedere come inserire una immagine nella nostra pagina.
Supponiamo di possedere una immagine denominata foto.jpeg e di volerla rendere visibile sulla nostra pagina, sarà indispensabile allora l'utilizzo del comando IMG e del suo attributo SRC.

IMG e SRC

Prendiamo come struttura di esempio quella già utilizzata allo scopo di inserire del testo:

     <HTML>

     <HEAD>

     </HEAD>
     <BODY>

        <p> In questo modo inizio a scrivere sulla mia nuova pagina web.</p>

        <p align="left">Questo testo sarà allineato a sinistra</p>

       <p align="center">Questo testo sarà allineato in maniera centrale</p>

        <p align="right">Questo testo sarà allineato a destra</p>

        <p align="justify">Questo testo sarà allineato in maniera giustificata</p>

        </BODY>

       </HTML>

Il nostro compito sarà ora quello di scrivere l'esatta sintassi per richiamare l'immagine, vediamo come:

<img src="foto.jpeg">

Come per tutto quello che deve essere trovato tramite codice, anche in questo caso si deve specificare la posizione di "foto.jpeg", altrimenti non otterremmo il risultato desiderato. Se la foto si trovasse nella stessa directory del file che la richiama (la nostra pagina), andrebbe bene il codice sopra descritto, nel caso la foto non dovesse trovarsi nella stessa directory del file che la richiama, allora dovremo specificare tutto il percorso (path). Sotto alcuni esempi:

<img src="../nomecartella/foto.jpeg">

E' opportuno inoltre specificare le dimensioni dell'immagine al fine di velocizzare il caricamento della pagina nel modo seguente:

<img src="foto.jpeg" width="100" height="50">

Width rappresenta la larghezza della foto, il valore 100 rappresenta invece i pixel della foto. Analogamente height rappresenta l'altezza della foto ed il valore 50 i pixel.
Gli attributi di img non sono però solo quelli appena descritti, ne esistono altri che mi appresto a descrivere:

Alt
Si utilizza per dare una descrizione testuale all'immagine al passaggio del puntatore del mouse.

<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine">

Vspace
Si utilizza per porre uno spazio laterale, superiore o inferiore da un eventuale testo, una immagine e anche dai bordi di una tabella se ci si trova naturalmente al suo interno. Il valore 10 è espresso in pixel.

<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine" vspace="10">

Hspace
Si utilizza per porre uno spazio alla destra e alla sinistra da un eventuale testo, immagine e come vspace, dal bordo interno di una tabella.

Il valore 10 è espresso in pixel.

<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine" vspace="10" hspace="10">

Align
Questo comando lo abbiamo già visto prima, ma riporto ugualmente il paragrafo ad esso dedicato:

Si utilizza con gli attributi left, center, right, justify, per allineare il testo rispettivamente a sinistra, centro, destra, giustificato. Per utilizzare align e tutti i suoi attributi si deve ricorrere all'esatta sintassi che segue:

<p align="left">Questo testo sarà allineato a sinistra</p>

<p align="center">Questo testo sarà allineato in maniera centrale</p>

<p align="right">Questo testo sarà allineato a destra</p>

<p> align="justify">Questo testo sarà allineato in maniera giustificata</p>

Per vederne gli effetti ricopiate il codice sopra descritto su di un editor html, salvate la pagina ed eseguitela lanciandola con il vostro browser.

Sappiate che per tornare a capo durante la digitazione del testo non basta la semplice pressione del tasto Invio, ma dovrete digitare <br> oppure aprire e chiudere il tag <p> (in questa maniera: <p> </p>).

<img src="foto.jpeg" width="100" height="50" align="center" alt="Descrizione immagine" vspace="10" hspace="10">

Fate attenzione alla sintassi di target, contiene un carattere denominato "underscore", si ottiene con shift + - (operatore aritmetico di sottrazione).

A questo punto dovreste essere capaci di realizzare almeno una pagina web con tutte le carte in regola per funzionare.

TORNA ALL'INDICE

Collegamenti ipertestuali

I links

Dopo avere visto come inserire del testo e delle immagini, passiamo ad analizzare un altro aspetto importante: i links o collegamenti ipertestuali. Un link, o "àncora" sono tutti quegli elementi grafici o testuali che, se cliccati, trasferiscono l'utente in un altro luogo della pagina, del sito o di un sito esterno rispetto a quello che si sta consultando al momento. Spero che fino ad ora abbiate messo in pratica con un editor (ripeto che lo trovate nella sezione download) la teoria esposta, perchè ora inseriremo i primi links con il tag <a> </a>. Ricordando che non ha importanza l'uso delle maiuscole e delle minuscole, mentre lo ha invece la sintassi (spazi non richiesti, ecc...), il tag <a> e </a> da solo non serve a molto, deve infatti essere utilizzato con HREF (Hypertext Reference), il quale fa in modo che tutto quello che è compreso tra il tag <a> e </a> diventi un ipertesto, cioè un link. Riprendiamo ora l'esempio di prima (privato di tutti gli elementi già visti per evitare confusione) e realizziamo un collegamento ipertestuale ad esempio alla prima pagina di questo sito:

     <HTML>

     <HEAD>

     </HEAD>

     <BODY>

     <A HREF="http://www.nettarget.supereva.it/index.htm">NetTarget</A>

     </BODY>

     </HTML>

 

Il codice sopra riportato rende visibile sulla pagina "NetTarget" che, se cliccato, apre la prima pagina del sito stesso. Fate attenzione ai tags ed in specie alla chiusura di essi.
Resta ovvio che ogni link potrebbe puntare a diversi bersagli (target), vediamo alcuni dei quali:

<A HREF="ftp://...">

Collegamento ad un sito FTP.

<A HREF="mailto:...">

Spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica.

<A HREF="news:...">

Collegamento ad un gruppo di discussione (newsgroup Usenet).

<A HREF="nomefile.zip">

Download di un file compresso.

<A HREF="foto.jpg">

Collegamento ipertestuale sfruttando una immagine. 

Se il sito è strutturato in frames (cioè diviso in più settori con uno principale), capiterà di certo che una volta cliccato sul link, esso apparirà nel settore del link e non in quello principale. Per ovviare tale inconveniente, utilizzeremo un comando molto potente, anche se per adesso ne vedremo solo la funzione di puntamento, il comando in questione è target.

Vediamo subito la sintassi per poi commentarla al fine di rendere agevole la comprensione del nuovo comando.

     <HTML>

    <HEAD>

    </HEAD>

    <BODY>

     <A HREF="http://www.nettarget.supereva.it/index.htm"

           target="pagina_Principale>NetTarget</A>
    

     </BODY>

     </HTML>

TORNA ALL'INDICE

Frame

Da ora in poi il corso si fa più complicato (ma non così tanto in fondo).Se non siete padroni di tutto quello che ho scritto in precedenza riguardo questo manuale, non sarete in grado di applicare la teoria che segue ora: i frames.

Cosa è un frame

Una pagina con frame è una pagina web che viene suddivisa in più aree indipendenti: i frames.
Cliccando su di un link contenuto in un frame, in genere la pagina a cui punta viene aperta in un altro frame.

Perchè un frame, pro e contro e alternativa

Perchè un frame è presto spiegato, perchè in questo modo si potrebbe sempre avere una barra di navigazione a portata di mouse, perchè si potrebbe decidere di rendere sempre visibile un banner o un bottone pubblicitario, perchè praticamente potrebbe ospitare qualsiasi cosa e tenerlo sempre visibile all'utente. Il contro (l'unico a parere mio e rimediabile), è rappresentato dai motori di ricerca i quali potrebbero restituire all'utente la pagina senza il frame (praticamente la pagina collegata) che magari non contiene il menu ed il link alla homepage impedendogli di risalire al sito nella sua integralità. Tuttavia questo inconveniente è rimediabile, io personalmente inserisco su ogni pagina del mio sito un banner contenente oltre all'indirizzo esatto, anche un collegamento ipertestuale al medesimo. L'alternativa è rappresentata da un sito strutturato in tabelle, sicuramente più semplice da realizzare.

Prima di programmare un frame

Dovete decidere se il frame deve essere laterale o superiore o inferiore, anche se potrete decidere per tutti. Presupponendo che il frame debba essere laterale sinistro, preparate un file con estensione .htm denominato magari framesinistro.htm. Fatto ciò preparatene un altro denominato ad esempio principale.htm, i nomi delle pagine sono del tutto soggettivi, ma ricordatevi di utilizzarli nel caso utilizzaste il mio codice di esempio e funzionante di questo manuale. Ora create una nuova pagina che dovete denominare index.htm.

A questo punto inizia la programmazione del frame:

sotto </head> di index.htm scriviamo il nuovo tag <FRAMESET> che da solo non serve a niente, deve infatti precedere rows (righe) e/o cols (colonne), che indicano rispettivamente se il frame deve essere superiore o inferiore (rows) o laterale (cols).

Supponendo di voler realizzare una pagina con un frame laterale sinistro, allora dovremo scrivere subito sotto </head> il seguente codice:

<FRAMESET COLS="25, *">

</frameset>

dove <frameset> indica al browser che deve visualizzare un frame, dove cols indica che si tratta di un frame verticale dalla larghezza del 25% della pagina originale (una colonna, in pratica), dove * indica che il resto dello spazio deve essere occupato dalla pagina di destinazione. 
Dopo avere stabilito le dimensioni del frame, si devono richiamare i file creati in precedenza nel modo seguente:

<frame name="framesinistro" src="framesinistro.htm">

<frame name="principale" src="principale.htm">

name è un attributo necessario in quanto permette di identificare il frame nel quale richiamare la pagina tramite src (source).

Salvate ora la pagina come index.htm e provatela.

La lezione sui frame non è finita, se avete strutturato una pagina in tal modo, molto probabilmente avrete una barra di navigazione così come dovrete decidere in quale finestra visualizzare le altre pagine che compongono il sito. Non potete utilizzare un semplice collegamento ipertestuale o vedrete la pagina collegata direttamente nel frame che invece contiene il menu. Per rimediare a questo inconveniente dovrete utilizzare un comando molto potente: target (bersaglio).
Supponendo che abbiate creato delle pagine nominate come quelle di questo esempio, vi basterà  scrivere un codice simile al seguente per collegare tutte le pagine che volete alla principale:

     <A HREF="nomepagina.html" target="principale">

Adesso avete davvero tutte le nozioni per poter realizzare un sito di successo. Da ora in avanti proseguirò con una lezione davvero interessante e se avrete studiato con attenzione, la capirete senza fatica.

In particolare su Target

Altri utilizzi di target sono:

1. target="_top"    Eliminazione del frameset con l'utilizzo della pagina intera per la visualizzazione dei dati.

Esempio
<A HREF="nomepagina.html" target="_top">

2. target="_blank" Apre una nuova finestra del browser nella quale verranno visualizzati i dati.
Esempio
<A HREF="nomepagina.html" target="_blank">

3. target="_self"  La pagina puntata viene visualizzata sullo stesso frame che ospita il link.
Esempio
<A HREF="nomepagina.html" target="_Self">

Proprietà dei frames

I bordi di un frame possono rovinare l'estetica di una pagina. Per ovviare il problema si deve utilizzare FRAMEBORDER impostato a 0 (zero) nel seguente modo:

<FRAMESET FRAMEBORDER="0" COLS="25, *">

Eliminando il bordo è opportuno assicurarsi che i frames siano uniti l'uno all'altro tramite l'attributo FRAMESPACING come segue:

<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" COLS="25, *">

Si raccomanda di utilizzare FRAMEBORDER e FRAMESPACING specialmente se i frames contengono colori o immagini di sfondo per renderli graficamente professionali.
L'attributo NORESIZE impedisce che il frame venga ridimensionato, altrimenti puntandone il bordo con il mouse, esso potrà essere "trascinato", rovinando l'estetica del sito. Sotto l'utilizzo dell'attributo NORESIZE.

<FRAMESET FRAMEBORDER="0" COLS="25, *">

<FRAMENAME="framesinistro" src="framesinistro.htm" NORESIZE>

Potreste anche impedire che il frame venga spostato in verticale, tramite la barra di spostamento, ma prima di decidere, assicuratevi che il vostro sito sia perfettamente visibile a bassa risoluzione, altrimenti potrebbe essere impossibile per molti vostri visitatori visualizzare l'intera barra del menu. L'attributo da utilizzare per disabilitare la barra di spostamento di un frame è SCROLLING utilizzato nel modo seguente:

<FRAMESET FRAMEBORDER="0" COLS="25, *">

<FRAMENAME="framesinistro" src="framesinistro.htm" NORESIZE SCROLLING="NO">

Altri valori possibili di SCROLLING sono: YES, AUTO.

Inserendo YES, la barra di scorrimento sarà sempre presente, inserendo AUTO le barre si visualizzeranno solo in caso di effettiva necessità.

 
Per una guida a questo tag sul web andare su Preferiti di www.nettarget.supereva.it/preferiti.htm  e andare su "Zibaldone"

Dopo avere creato un link, bisogna decidere dove questo deve visualizzare le informazioni, con il codice che vedete sopra, si deduce che il sito che ospita il link è strutturato con i frames e che la pagina index.htm di NetTarget verrà visualizzata nella finestra principale (quella che di solito sta al centro, tra due riquadri, uno a sinistra che spesso ospita la barra verticale di navigazione e quello superiore che potrebbe ad esempio ospitare oltre ad una barra orizzontale di navigazione, un banner o altro ancora). Se si desidera che la pagina collegata venga visualizzata in una finestra nuova, allora si deve utilizzare il codice seguente:

     <HTML>

     <HEAD>

     </HEAD>

     <BODY>

      <A HREF="http://www.nettarget.supereva.it/index.htm" target="_blank">NetTarget</A>

     </BODY>

      </HTML>

TORNA ALL'INDICE

Mappe

TORNA ALL'INDICE

Paragrafo e argomento

TORNA ALL'INDICE

Liste

TORNA ALL'INDICE

Sfondi e definizione del colore

TORNA ALL'INDICE

Caratteri speciali

TORNA ALL'INDICE

Moduli

I moduli (o forms) sono costituiti da elementi come caselle di testo o menu a tendina associati a pulsanti e di solito servono per interagire con i nostri visitatori, visto la possibilità di inviare dati tramite essi. Le potenzialità dei moduli sono infinite, si possono utilizzare da soli o con java scripts, vi si possono eseguire calcoli matematici e in pratica dipende dal programmatore a renderli sempre più funzionali. Vediamo ora come dotare il nostro sito (presuppongo che abbiate creato almeno la pagina principale ormai...) di un form. Il comando da utilizzare è

     <form>

da solo non serve a niente, ha bisogno degli attributi sotto descritti:

Action
Serve ad indirizzare il modulo al server (per inviare ad esempio dei messaggi al webmaster del sito che ospita il form).

Metod
Ammette due metodi: Post e Get, i quali servono per inviare i dati scritti nel form

Name
Il nome del modulo, è facoltativo in html, obbligatorio in javascript. 

Proviamo ora a vedere come iniziare a realizzare il form per inviare un messaggio tramite una casella mail ed un tasto Invia. Di seguito il codice, come sempre, editor html  e provate:

     <form>

        Inserisci il tuo nome: <input type="Text" name="tuo nome">

     </form>

Il campo dentro il quale scrivere la e-mail si ottiene con <input> associato ad alcuni parametri quali type="text" e name="tuo nome" in modo tale da raccogliere i dati e spedirli. Ovviamente il modulo non è ancora funzionante per il semplice motivo che manca un tasto di invio ed una destinazione per i dati da inviare. Provvediamo a realizzare un tasto di invio con il comando input e submit come vedete nel codice a seguire, per scrivere sul pulsante utilizzeremo value, esattamente come segue:

     <form>

     Inserisci il tuo nome: <input type="Text" name="tuo nome">

      <input type="Submit" value="invia">

     </form>

Ora che avete provato il codice sul vostro editor, vi sarete accorti di avere una casella di testo e un pulsante di invio. Manca tuttavia qualcosa: l'indirizzo al quale inviare il messaggio, cioè il nostro. Abbiamo due alternative, potremmo scegliere di farci inviare il messaggio tramite i CGI, ma spesso i server che mettono a disposizione gratuitamente dello spazio non mettono a disposizione i CGI, allora utilizziamo la nostra e-mail, magari creata allo scopo. Di seguito il codice completo per rendere funzionante il modulo utilizzando un indirizzo di posta elettronica:

   <form method="post" action="mailto:tuoindirizzo@qui.it" enctype="text/plain"

      name="mio_form">

     Il tuo nome: <input type="Text" name="tuo nome">

     Il tuo giudizio: <input type="Text" name="giudizio">

     <input type="Submit" value="invia">

     </form>

Ora non vi resta che provare il codice e quindi studiarlo.

TORNA ALL'INDICE

Tabelle

Se avete studiato con attenzione questo manuale, sarete ora in grado di costruire in maniera più professionale la vostra pagina web. Questo non vuol dire che siete in grado di sviluppare un sito con tutti gli accorgimenti per essere considerato un buon sito, avete ancora tanto da imparare. Abbiamo parlato di testo e di immagini, ma nel momento in cui deciderete di usufruire di entrambe le cose, vi accorgerete che il risultato non sarà esattamente ciò che desiderate, cioè un complesso armonico nella lettura e nella grafica, ma un insieme di frasi e immagini poste in maniera disordinata, difficile o faticoso da interpretare. Per porre rimedio a quanto detto si deve ricorrere alle tabelle.
Una tabella è una griglia composta da righe e colonne, perfettamente formattabile in tutti i suoi aspetti (colori, dimensioni, stile, ecc...), dentro la quale è possibile inserire in maniera perfettamente ordinata testo ed immagini. Io vi fornisco la teoria e del codice che volendo potrebbe essere utilizzabile, quello che non vi fornisco è l'esempio grafico delle tabelle, perchè sono convinto che dovrete essere voi ad ottenerle, magari copiando il codice, vi servirà oltretutto per imparare ad utilizzare il vostro editor html. Sotto un unico esempio di tabella composta da due righe e due colonne:
Ora vediamo come si realizza una tabella, il tag da utilizzare è <TABLE> e prevede almeno altri tre tags per essere utilizzabili: <TR> <TD> e l'attributo BORDER che si trovano annidati tra il codice che costituisce la tabella e che suddividono rispettivamente la tabella in righe e colonne, mentre BORDER specifica lo spessore del bordo della tabella da un valore minimo di 0 (zero).. 
Vediamo sotto un esempio di codice che permette la realizzazione di una tabella:

                                         

     <table border="1">

     <tr>

     <td> Contenuto della tabella </td>

     </tr>

     </table>

se volessimo creare una tabella con due celle, allora utilizzeremo i tags sopra descritti nel seguente modo:

     <table border="1">

     <tr>

     <td> cella alta di sinistra </td><td> cella alta di destra </td>

     </tr>

     <tr>

     <td> cella bassa di sinistra </td><td> cella bassa di destra </td>

     </tr>
     </table>

Quello che abbiamo visto è il codice per ottenere delle tabelle regolari, spesso capita però di avere bisogno di tabelle dalla struttura irregolare, come ad esempio quella che restituisce il codice che segue grazie all'attributo colspan che unisce due o più celle di una stessa riga, cambiando il valore da 2 a 3 e via dicendo:

     <table border="1">

     <tr>

     <td> cella alta di sinistra </td><td> cella alta di destra </td>

     </tr>

      <tr>

      <td colspan="2"> Due celle unite in basso </td>

      </tr>

      </table>

Sotto un altro esempio di tabella dalla struttura irregolare, questa volta ad essere unite saranno due celle di diverse righe, l'attributo utilizzato è rowspan e segue le regole di colspan:

     <table border="1">

     <tr>

     <td rowspan="2"> Due celle unite in colonna </td><td> cella alta di destra </td>

     </tr>

     <tr>

      <td> cella bassa di destra </td>

     </tr>

     </table>

Quello che segue sotto è il codice per ottenere diversi tipi di tabelle elaborate. Ricordate che potete utilizzare il codice, ma il mio consiglio è sempre quello di studiare, leggetelo ricordando tutto quello che abbiamo visto fino ad ora, vi accorgerete presto che riuscirete a capire a cosa serve il codice che avete davanti!

Codice di una tabella elaborata

<table border="1">

<tr>

<td colspan="3">testata della tabella (tre celle unite)</td>

</tr>

<tr>

<td>colonna di sinistra </td>

<td>colonna di centro </td>

<td>colonna di destra </td>

</tr>

<tr>

<td colspan="3" align="center">piede della tabella</td>

</tr>

 </table>

Le tabelle possono essere modificabili in altri modi, ad esempio, se volessimo il bordo non visibile, basterà impostare border su 0 (zero) nel seguente modo:

BORDER="0"

Se invece i bordi della tabella devono essere visibili, ma con distanze diverse, allora dovremo ricorrere ad altri due attributi: cellspacing e cellpadding, rispettivamente controllano lo spazio da lasciare tra le singole celle (cellspacing) e quanto spazio lasciare fra il bordo e i dati contenuti all'interno della singola cella (cellpadding).

Sotto un esempio di tabella con inclusi i due nuovi attributi:

     <table border="1" cellspacing="20" cellpadding="10">

     <tr>

     <td colspan="3">testata della tabella (tre celle unite)</td>

     </tr>

     <tr>

     <td>colonna di sinistra </td>

     <td>colonna di centro </td>

     <td>colonna di destra </td>

     </tr>

     <tr>

     <td colspan="3" align="center">piede della tabella</td>

     </tr>

     </table>

Questo è tutto quello che si deve sapere sulle tabelle. Ovviamente potrete costruirne voi di diverse ora che avete le nozioni esatte, ad esempio potrete colorarle e formattare anche il testo, ripeto, potrei fornirvi del codice di esempio, ma avete la teoria ed i singoli esempi.

TORNA ALL'INDICE

Targhet

TORNA ALL'INDICE

Varie

TORNA ALL'INDICE