1. Una Premessa Questo materiale è tratto dal sito http://www.cirocom.it/html e successivamente integrato dal docente. Altre citazioni sono tratte dalle lezioni del Dott. Franceschet e del Dott. Bistarelli HTML combines two well-known ideas: hypertext and markup language. Hypertext is a term coined in the 1950s by Ted Nelson that means 'humanreadable information linked together in an unconstrained way'. A markup language formally describes what part of a document is content, what part is markup, and what the markup means. The term markup refers to anything in a document that is not intended to be printed. Vediamo cosa occorre per creare e mettere on-line una pagina Web : Conoscere l'html Sarà lo scopo di questo Tutorial Un editor per scrivere il codice Oggi il mercato propone software del genere in continuazione, ma per scrivere il codice si può fare anche con il notepad di Windows. Ci sono sostanzialmente due tipologie di Editor: - Editor Testuali Sono editor in cui bisogna scrivere manualmente il codice. - Editor WYSIWYG L'acronimo WYSIWYG sta per :what you see is what you get, cioè ciò che si vede è cio che si ottiene in un browser Web. Questi editor permettono di lavorare tramite una interfaccia grafica, non sul codice ma su oggetti con il semplice trascinamento del mouse. Quindi tutto ciò che si fa su questa interfaccia, verrà tradotto automaticamente in html. Questo tipo di editor è di grande aiuto per i principianti, ma hanno di contro che in presenza di errore, difficilmente riescono a risolverlo, inoltre si rischia di creare siti fotocopia. Un FTP File Transfer Protocol, è un programma che permette di trasferire le pagine create, nel proprio sito Web. Se ne trovano diversi e parecchi gratuiti su internet. Uno spazio Web E un'area su un server, che fa capo al nostro nome di dominio, nel quale andremo atrasferire e quindi immagazzinare le pagine del nostro sito Web. Anche in questo caso si trovano diversi provider che offrono spazio Web gratuito, ma con alcune limitazioni, cioè il nome di dominio del tipo ( di terzo livello ) http://www.nomeprovider.it/nome_mio_sito 2. Intestazione del documento <HEAD> Lo scopo dell'html è quello di fornire, attraverso comandi chiamati TAG, una formattazione (si intende: una forma) al testo contenuto documento, oltre all'inserimento di immagini ed altri elementi multimediali (filmati, applet ecc.).
Il lavoro che uno sviluppatore Web produce all'interno di un documento HTML è indirizzato a fornire tutte le informazioni necessarie al browser per interpretare correttamente la pagina. Un documento HTML si divide in due parti fondamentali: l'intestazione e il corpo del documento. L'intestazione contiene una serie di informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate all'interno dello stesso. L'intestazione, quindi, ha un ruolo non apparente ma sicuramente fondamentale. Per esempio il titolo della pagina,i termini chiave per alcuni motori di ricerca, HTML HEAD TITLE META Vediamo una descrizione : <HTML> Tutti gli elementi ed il contenuto di un documento HTML sono compresi all'interno dei marcatori <HTML></HTML> i quali hanno il compito di aprire e chiudere il file. I tag <HTML></HTML> indicano al browser che il documento è marcato in HTML. Esistono comunque due ragioni per inserire sempre il tag <HTML></HTML> all'interno del documento: HTML non è l'unico linguaggio di contrassegno presente sul web (si pensi per es. ad XML). Gli utenti che usano vecchi browser rischiamo di visualizzare un documento formattato male. <HEAD> Gli elementi <HEAD></HEAD> sono posti immediatamente dopo l'apertura del tag <HTML> e racchiudono l'intestazione vera e propria del documento; cioè tutte le informazioni necessarie al browser, al Webserver ed ai motori di ricerca. Si tratta del primo elemento letto dal browser e per questo è il luogo migliore per inserire script. All'intero di <HEAD></HEAD> va inserito il titolo del documento e altre informazioni. Ecco la sintassi HTML di un documento con i comandi visti: <HTML> <HEAD></HEAD> </HTML> <TITLE> L'elemento <TITLE></TITLE> è il più utilizzato all'interno del tag <HEAD>, in quanto fornisce il titolo alla pagina. Il titolo viene visualizzato dai browser nell'intestazione di pagina. In caso di salvataggio dell'url con "Aggiungi a preferiti" (per MsIe) e "Aggiungi Segnalibro" (per Netscape) il tag TITLE dà il nome al collegamento, cioè quando si salva l'indirizzo, il browser assegna allo stesso quanto presente all'interno di <TITLE></TITLE>. Il contenuto riportato tra i tag <TITLE></TITLE> è anche utilizzato da alcuni motori di ricerca per indicizzare la pagina e trovare parole chiave. La corretta sintassi per il tag TITLE è la seguente: <TITLE>La mia prima home page </TITLE> <META> Fare un buon sito, non basta, occorre poi che lo stesso sia visitato per ripagare il duro lavoro, per fare questo esistono i motori di ricerca, quali Altavista, Virgilio, Yahoo etc., ne esistono a centinaia, ma non occorre registrarsi a tutti, basta registrare il sito nei 4-5 motori più importanti, questo è possibile farlo tramite i form messi a disposizione sui motori di ricerca : Add Your Site, o Aggiungi un Sito. RIEPILOGO Di seguito riportiamo una pagina HTML impostata con il codice visto in questa lezione. Questa pagina costituirà un punto di riferimento anche per le lezioni successive:
<HTML> <HEAD> <META name="keywords" Content="tutorial, html"> <META name="description" content="la mia prima home page con la guida di cirocom.it"> <META name="generator" content="blocco note"> <META name="author" content="nome Cognome"> <TITLE>La mia prima home page </TITLE> </HEAD> </HTML> 3.Impostare il corpo del documento <BODY> Nella precedente lezione abbiamo visto come creare da zero un documento HTML e come impostare il titolo ed i meta tag. L'operazione successiva all'impostazione del documento è la definizione del colore o dell'immagine di sfondo, oltre ai colori dei link attivi e visitati. <BODY> L'elemento <BODY> è posto in posizione immediatamente successiva alla chiusura del tag </HEAD> e comunque all'interno degli elementi <HTML></HTML>; ha un tag di apertura e uno di chiusura, ed all'interno di esso si sviluppa il corpo del documento. Se l'elemento <HEAD> conteneva metadati (cioè non materialmente visualizzati dal browser) la funzione del tag <BODY> è quella di mostrare gli oggetti (testo, immagini, suoni, applet ecc) della pagina. La sintassi corretta per l'elemento <BODY> è la seguente: <BODY> Contenuto del documento </BODY> Il tag <BODY> è utilizzato, oltre che per fornire al browser indicazioni sulla posizione degli oggetti nel documento, anche per impostare vari attributi di visualizzazione per il documento. Di seguito vediamo quali. BGCOLOR L'attributo BGCOLOR imposta un colore unitario di sfondo. La sintassi corretta è la seguente: <BODY BGCOLOR="red"> E' possibile sostituire al nome in inglese, valori esadecimali. Per esempio, il colore rosso (red) si sostiuisce in questo modo: <BODY BGCOLOR="#ff0000"> L'utilità dei colori esadecimali si ha laddove non si vuole un colore standard ma sfumato o con diversa tonalità. I più diffusi editor HTML prevedono palette per la definizione di colori esadecimali, mentre Paint Shop Pro fornisce, oltre al colore, anche il corrispondente valore esadecimale da copiare/incollare. BACKGROUND BACKGROUND ha una funzione simile a BGCOLOR, ma mentre BGCOLOR mostra una tinta unica del colore, BACKGROUND consente di visualizzare sullo sfondo un'immagine in formato grafico. Consideriamo, per esempio, di voler costruire uno sfondo con l'immagine seguente: marchio.gif L'immagine è per ipotesi depositata nella stessa directory del documento. La sintassi corretta per impostare l'immagine come sfondo è:
<BODY BACKGROUND="marchio.gif"> Il browser visualizza l'immagine sfondo.gif e la ripete su ogni punto dello schermo disponibile. In altre parole non si limita a visualizzare l'immagine una sola volta, magari al centro della pagina, ma riempie ogni spazio disponibile. Per questa ragione è assolutamente necessario creare uno sfondo che, se ripetuto, non presenti soluzione di continuità, ma un aspetto il più possibile uniforme. E' bene scegliere un'immagine di sfondo che non infastidisca la lettura e che sia il più possibile coerente con il colore del testo. Per esempio, inserire un testo arancione su uno sfondo rosso non renderebbe leggibile il testo. Sempre meglio usare il colore nero per il testo e tinte leggere per lo sfondo. TEXT Se non stabilito diversamente il colore del testo del documento è nero, in quando i browser assegnano quel colore di default. Grazie all'attributo TEXT è possibile assegnare al testo un colore diverso dal nero. Questa la giusta sintassi: <BODY BACKGROUND="marchio.gif" TEXT="white"> Anche in questo caso i colori possono esprimersi in nomi o valori esadecimali. All'interno del documento è possibile marcare parte del testo in colori differenti da quello impostato su TEXT. 4. Formattare il testo Tag FONT Formattare titoli da <H1> ad <H6> Il tag <Hn> (dove n è il numero da 1 a 6 che è possibile assegnare all'elemento) ha la funzione di fornire stili ai titoli di pagina, dando maggiore o minore enfasi a seconda del numero inserito. Come accennato i numeri vanno da 1 a 6, con maggior importanza dei numeri più bassi rispetto agli alti. Visivamente tale diversa importanza si traduce in differente grandezza del testo, come nell'esempio che segue: Titolo con H1 Titolo con H3 Titolo con H5 Oltre a definire gli stile dei titoli, il tag <Hn> inserisce spaziature di paragrafo rispetto agli elementi che seguono. <FONT> Il tag fisico FONT è uno dei più usati. Il tag FONT formatta tipo e grandezza del testo all'interno dei Tag <FONT>qua dentro</font> Mentre, poi, TEXT determina solo il colore del testo, il tag FONT può definire: font utilizzato, grandezza e colore. Ecco la sintassi corretta del tag: <FONT FACE="arial" SIZE=5 COLOR=red>stringa da formattare </FONT> Ecco la stringa formattata FACE="arial" indica il tipo di carattere da richiamare per la visualizzazione.
SIZE=5 la grandezza del carattere che può andare da 1 a 7 (con maggiore grandezza dei numeri vicini al 7); COLOR=red indica il colore del testo (esprimibile anche in valori esadecimali). <B>, <I>, <U> <B>, <I>, <U> : sono tre dei più usati tag di formattazione fisica dell'html. Tutti vanno aperti e successivamente richiusi: <B> Testo grassetto </B> Testo grassetto Il testo compreso tra questi tag è trasformato in grassetto (la B sta per BOLD). <I> Testo corsivo </I> Testo corsivo Il testo compreso tra questi tag è formattato in corsivo (la I sta per ITALIC) <U> Testo sottolineato </U> Testo sottolineato Il testo compreso tra questi tag è sottolineato pur non essendo un link (la U sta per UNDERLINE). Esiste anche il tag STRIKE per il testo barrato: <STRIKE> Testo barrato </STRIKE> Testo barrato <SUP> e <SUB> Questi due tag di formattazione fisica creano rispettivamente: apici posti leggermente più in alto del normale testo (SUP) e pedici posti leggermente più in basso (SUB). 5.Paragrafi e Giustificazione Creare paragrafi con <P> Il tag <P> indica al browser un nuovo paragrafo del testo,si passa quindi su una nuova riga, il posizionamento può esser a destra, a sinistra o al centro.per defauult l'allineamento è a sinistra. Ecco i comandi giusti per allineare : <P ALIGN="left"> Definisce un paragrafo e allinea sulla sinistra. <P ALIGN="center"> <P ALIGN="right"> Definisce un paragrafo ed allinea al centro. Definisce un paragrafo e allinea sulla destra. Come andare a capo <BR> <BR> è un tag di interruzione di riga. Ha un funzionamento simile al paragrafo visto in precedenza, ma a differenza di <P> non inizia un nuovo paragrafo. La sua funzione è simile alla pressione del tasto "invio" della tastiera. Va usato singolarmente senza tag di chiusura, e durante la compilazione di una pagina web ricorre spesso! Posizionare il testo con <DIV ALIGN> e <CENTER>
L'elemento <DIV> viene utilizzato per allineare il testo in posizione orizzontale a sinistra, destra e centro della pagina. L'attributo ALIGN è fondamentale a questo scopo. <DIV ALIGN="left">Testo e immagini a sinistra</div> Sposta gli elementi contenuti tra i suoi tag sulla sinistra. <DIV ALIGN="right">Testo e immagini a destra</div> Sposta gli elementi sulla destra. <DIV ALIGN="center">Testo e immagini a centro</div> Sposta gli elementi in posizione centrale. Il tag <CENTER> ha un funzionamento del tutto simile a <DIV ALIGN="center"> L'uso di <CENTER> è molto semplice: <CENTER><B>Testo da centrare</b></center> ecco quello che accade : Testo da centrare Linee orizzontali con <HR> Le linee orizzontali sono un ottimo strumento per dividere parti del documento e rendere il testo più leggibile. La sintassi necessaria al loro inserimento in un documento HTML è la seguente: <HR align="center" size="2" width="460" color="red" noshade> eccovi la linea : Il tag HR (horizontal rule) non ha bisogno di chiusure successive. Si compone di diversi attributi: aling="center": definisce la posizione della riga (center, right, left). size="2": definisce l'altezza, in pixel, della riga. width="460": definisce lunghezza orizzontale, in pixel, della linea. Può anche esprimersi in percentuale di spazio disponibile: width=80%. color="red": definisce il colore della linea. noshade: se presente questo attributo elimina l'effetto 3D della linea. 6.Come creare elenchi puntati e numerati Gli elenchi sono comodi per organizzare le informazioni all'interno di pagine Web. Elenchi ordinati (numerati) Gli elenchi ordinati sono costiuiti da un singolo tag di apertura e chiusura <OL></OL> e tanti tag di apertura per quante sono le voci di menu <LI>. Questa è la corretta sintassi per creare elenchi ordinati: <OL> <LI> Quarta voce di menu </OL>
1. Prima voce di menu 2. Seconda voce di menu 3. Terza voce di menu 4. Quarta voce di menu Dall'esempio si nota come è possibile omettere il tag <BR> per il ritorno a capo, visto che è automaticamente inserito da <LI>. Indicizzazione alfabetica maiuscola: <OL TYPE=A> </OL> A. Prima voce di menu B. Seconda voce di menu C. Terza voce di menu Indicizzazione alfatabetica minuscola: <OL TYPE=a> </OL> a. Prima voce di menu b. Seconda voce di menu c. Terza voce di menu Indicizzazione con numeri romani maiuscoli: <OL TYPE=I> </OL> I. Prima voce di menu II. Seconda voce di menu III. Terza voce di menu Indicizzazione con numeri romani minuscoli: <OL TYPE=i> </OL> i. Prima voce di menu ii. Seconda voce di menu iii. Terza voce di menu
Elenchi NON ordinati (puntati) Gli elenchi non ordinati funzionano in modo simile a quelli ordinati. La differenza di fondo è che le risorse indicizzate non sono legate da stretti rapporti di successione gerarchica, per cui non sono previsti elenchi progressivi quali numeri o lettere. Gli elenchi non ordinati (o puntati) si compongono di un tag unico di apertura e chiusura <UL></UL> e tanti tag di elenco per quante sono le voci da indicizzare?. La corretta sintassi per definire un elenco puntato è la seguente: <UL> </UL> Prima voce di menu Seconda voce di menu Terza voce di menu Se non definito diversamente l'elenco è costituito da una serie di pallini. E' possibile indicare diversi tipi di elenco: I pallini pieni visti in precedenza sono ottenibili con disc: <UL TYPE=disc> </UL> Prima voce di menu Seconda voce di menu Terza voce di menu L'attributo circle imposta pallini vuoti all'interno: <UL TYPE=circle> </UL> o Prima voce di menu o Seconda voce di menu o Terza voce di menu L'attributo square imposta elenchi definiti da quadratini pieni: <UL TYPE=square> </UL> Prima voce di menu Seconda voce di menu Terza voce di menu
7. Che cosa è un link? Ci troviamo di fronte un libro, apriamo e diamo uno sguardo all'indice, troviamo un capitolo che ci piace a pagina 120, scorriamo le pagine e raggiungiamo la 120,...buona lettura. Ci troviamo di fronte l'indice della guida di html, il capitolo di nostro interesse è il 10 facciamo un click, si apre la pagina. E' stato capito cosa è un link? La differenza tra un testo ed un ipertesto (le pagine html) è che il testo è un documento sequenziale, per raggiungere il contenuto desiderato bisogna scorrere/leggere tutto il contenuto precedente, mentre l IPERTESTO è un testo NON SOTTOPOSTO al vincolo della sequenzialità: L'elemento <A> (la A sta per Ancora) ha bisogno di un tag di apertura e chiusura e al suo interno è possibile inserire testo, immagini o altri elementi multimediali. Perchè funzioni, l'elmento <A> deve essere associato ad altri attributi. Il più importante di questi è HREF (abbreviazione di Hypertext Reference), contenente l'url o la il contenuto da raggiungere. Ecco la sintassi: <A HREF="http://maxlarocca.arltervista.org/didattica.html">materiale CLEF</A> Nel codice sopracitato cliccando sul testo "materiale CLEF" (compreso tra i tag A in apertura e chiusura) si raggiunge l'url http://www.cirocom.it indicato dall'attributo HREF. E' possibile sostituire al testo un'immagine con effetto identico. HREF può contenere sia link a risorse esterne, collegamenti tra pagine dello stesso sito, che a risorse esterne, collegamenti ad altri siti un esempio di collegamento ad un altro sito, c'è un banner che sponsorizza pippo.com, se faccio un click si apre la prima pagina di pippo.com per esempio index.htm : <A HREF="http://www.pippo.com">Il sito di pippo</a> Un link oltre che verso un sito,può essere fatto verso un file, o verso una casella di posta, vediamo di seguito l'esempio : <A HREF="ftp://ftp.vostro.server/percorso/file.est"> Questo link preleva tramite protocollo ftp il file.est che si trova sul vostro server presso il percorso specificato. <A HREF="http://mailto:qualcuno@suo.indirizzo.email"> 8.Inserire immagini nel documento<img> Per quanto riguarda l'inserimento di una immagine, è una istruzione semplice, ecco la sintassi : <IMG> Il tag IMG significa che c'è una immagine da caricare e quindi visualizzare, però bisogna specificare la sorgente (cioè dove si trova l'immagine). Ammettiamo che questa si chiami "marchio.gif" e si trova nella cartella immagini, vediamo la sintassi completa : <img src="immagini/marchio.gif"> Ammettiamo adesso, che questa immagine abbia delle dimensioni definite, cioè altezza e larghezza, rispettivamente height e width, l'immagine corrente è 98 X 140, e senza specificare le dimensioni, verrà così visualizzata, adesso occorre rimpicciolirla, allora ecco la sintassi : <IMG SRC="marchio.gif" WIDTH="100" HEIGHT="68"> Quindi questo è tutto. Si incontrerà un'altra esigenza, cioè dove posizionare una immagine, per rispondere a questa, bisogna considerare il contesto. Cioè bisogna considerare la pagina globalmente, e di solito si utilizzano TABELLE per incastonare ordinatamente testi e immagini.
Quindi potremo affrontare in modo più completo tale argomento una volta passate in rassegna le tabelle. 9. Creare e gestire Tabelle HTML<TABLE> Una tabella è composta da righe e colonne, quindi creando una tabella occorre specificare una nuova riga con <TR> e poi all'interno di essa le colonne con <TD>, questi sono dei tag che vanno chiusi con </TR> e </TD>. Ma prima di passare alla creazione di righe e colonne, bisogna specificare che si sta per creare una tabella con il tag <TABLE> che va chiuso con </TABLE>, quindi vediamo la sintassi completa : <TABLE>dichiaro la tabella <TR>creo una riga <TD>questa scritta è nella 1 colonna</td>questa è la prima colonna <TD>questa scritta è nella 2 colonna</td>questa è la seconda colonna </TR>chiudo la riga </TABLE>chiudo il tag della tabella Naturalmente, anche per le tabelle esistono altri attributi, che ci permettono di creare tabelle a nostro piacimento, eccoli di seguito elencati : ALIGN : allineamento della tabella o di una cella - center, left, right VALIGN : allineamento di testo o immagini nelle varie celle BACKGROUND : impostare lo sfondo di una cella, è possibile anche con una gif animata BGCOLOR : impostare il colore di fondo di una cella, ed ognuna può essere diversa dall'altra BORDER : dare un bordo alla tabella CELLPADDING e CELLSPACING : lo spazio tra tra le celle di una tabella COLS : HEIGHT : definisce l'altezza sia della tabella che di una riga WIDTH : definisce la larghezza sia della tabella che di una colonna Per esempio <table align=center border=1 height=200 width=400> <tr align=center bgcolor=white> <td align=center height=100 width=200><img src= marchio.gif width=118 height=98></td> <td align=center height=100 width=200 bgcolor=blue><font color=white>questo è il marchio di cirocom.it</font></td> </tr> <tr align=center bgcolor=white> <td align=center height=100 width=200 bgcolor=blue><font color=white>questo è ancora il marchio di cirocom.it</font></td> <td align=center height=100 width=200><img src=marchio.gif width=118 height=98></td> </tr> </table> 10.FRAMES I frames sono delle "sottofinestre" in cui alcune pagine web suddividono la finestra principale del vostro Browser. Naturalmente prima di ricorrere ai frames, è bene fare i conti con carta e penna e righello alla mano, ondevitare di fare premere subito il tasto Indietro ad un visitatore che accede alla pagina, questo perchè un uso esagerato dei frames, rende un aspetto sgradevole ed incromprensibile.
Ecco di seguito riportato un esempio di codice : <HTML> <HEAD> <TITLE>Inizio ad usare i Frames </TITLE> </HEAD> <FRAMESET ROWS="25%,*"> <FRAME> <FRAME> </FRAMESET> </HTML> Dove è finito il <BODY>? Non ci vuole, il <FRAMESET> sostituisce a tutti gli effetti il <BODY> Il comando <FRAMESET> indica al Browser che si intende suddividere la finestra nel modo che riteniamo più opportuno. Quando usiamo i Frames, non ci troviamo più a gestire un documento, ma ne dovremo gestire uno per ogni sotto-finestra (frame). Il primo serve solo ed esclusivamente a preparare il Browser ed a fargli caricare i documenti necessari. Quindi se dividiamo la finestra in due Frames, dobbiamo scrivere tre documenti diversi: 1. il file preparatorio o dichiarazione 2. il documento da visualizzare nel primo frame 3. il documento da visualizzare nel secondo frame Il primo ovviamente va a caricare gli altri due. Tornando sull'esempio : Rows : spiega al Browser che la suddivisione è fatta in righe, in questo caso il primo frame andrà ad occupare il 25% dell'altezza dello schermo, la rimanente parte la prenderà il secondo frame. La suddivisione può essere anche fatta in colonne con Cols. Vediamo gli attributi dei FRAME : NAME: dà un nome al frame, in modo che il browser lo possa riconoscere ogni volta che un documento html lo dichiarerà apertamente. SRC : punta ad un file html e lo inserisce nel frame corrente. SCROLL : (yes/no) stabilisce se l'utente può far scorrere il contenuto o no. NORESIZE : nega la possibilità al visitatore di modificare la dimensione della finestrella Bisogna considerare la possibilità che qualcuno avendo un vecchio browser, non riesca a visualizzare i frames, in questo caso occorre il tag : <NOFRAME> Cosa aspetti ad installare un nuovo Browser? </NOFRAME> Nella pagina che riempie un frame, un collegamento ipertestuale <A> avrà bisogno di sapere dove caricare la pagina collegata. Allo scopo, l attributo TARGET può essere valorizzato: Per visualizzare nello stesso Frame, Target="_self" Per visualizzare nel Frame denominato pippo, Target="pippo" Per visualizzare nella finestra madre, Target="_top" Per visualizzare in una nuova finestra, Target="_blank"
11. Cosa è un FORM? <FORM> I Form, servono per raccogliere dati, rendendo così un sito interattivo. Per esempio, stiamo immettendo dei dati quali, nome, cognome, età,... tutti questi dati, li stiamo inserendo in un form il quale alla pressione del tasto Invia, che generalmente si trova in basso, li spedisce allo script che provvede al controllo ed alla registrazione. Si capisce dunque che per fare uso dei form, è necessario uno script, comunque sia funziona così. Quindi è possibile creare Form per raccogliere dati di qualsiasi entità, ma occorre conoscere qualche linguaggio di scripting per poter memorizzare i dati su un DataBase. Un linguaggio che possiamo utilizzare è l'asp o il PHP, Quindi la creazione di un modulo consta di due fasi : impostazione dei tag per la creazione del modulo, dei campi e del tasto di spedizione; creazione di uno script che li processa e li archivia 12. I vari tipi di FORM In seguito sono elencati i tag per la creazione di un form: <FORM> qua dentro ci sono i campi dei dati da raccogliere </FORM> Apre e chiude il modulo e raccoglie il contenuto dello stesso. Non è possibile inserire un modulo interno ad un altro, cioè i form non consentono nidificazioni. <FORM method="get/post" action="http://www.miosito.it/azione.php"> Adesso vediamo i tag per i vari campi : INPUT TYPE=TEXT <INPUT TYPE="text" name="cognome" SIZE="19"> Permette di inserire un nome, cognome Il tuo cognome INPUT TYPE=PASSWORD <INPUT type="password" NAME="passw" SIZE="19"> Permette di inserire la password ******** INPUT TYPE=HIDDEN <INPUT type="hidden" NAME="passw" SIZE="19"> Questo è un campo nascosto, nel quale si può memorizzare dati riservati
INPUT TYPE=CHECKBOX <INPUT type="checkbox" name="età" value="yes" checked> Viene utilizzato per informazioni del tipo "si/no" e "vero/falso". Crea delle piccole caselle spuntate o da lasciare in bianco. Se la casella è spuntata, input restituisce un valore allo script, altrimenti non restituisce alcun valore. Value impostato su "yes" significa che di defoult la casella è spuntata. Checked controlla lo stato iniziale della casella, all'atto del caricamento della pagina. Sei studente/lavoratore? Yes/No INPUT TYPE=RADIO <input type="radio" name="voto" value="ottimo"> <input type="radio" name="voto" value="buono"> <input type="radio" name="voto" value="sufficiente"> Questo attributo è simile al precedente, ma consente più scelte. Dai un giudizio : Ottimo Buono Sufficiente INPUT TYPE=SUBMIT <input type="submit" value="invia"> E' il classico bottone che invia il Form allo script. La grandezza del bottone dipende dalla dimensione della scritta : Invia INPUT TYPE=RESET <input type="reset" value="cancella"> Con un click si cancellano i dati inseriti nel Form : Cancella
INPUT TYPE=IMAGE <input type="image" src="tasto.gif"> Simile a submit, con la differenza che al posto del tasto, si può mettere una immagine SELECT <SELECT size="1" cols=4 Name="giudizio"> <OPTION selected value=nessuna> <OPTION value=nessuna> <OPTION value=ottimo> <OPTION value=buono> <OPTION value=sufficiente> </SELECT> Permette la creazione di elenchi a discesa, con diverse possibilità di scelta. Serve per esempio, per scegliere e dare un giudizio, scegliere una nazione. nessuna TEXTAREA <TEXTAREA cols=40 rows=5 WRAP="physical" name="commento></textarea> E' utilizzata per commenti o campi che prevedono l'inserimento di molto testo. La larcghezza è impostata dalle colonne cols, l'altezza dalle righe rows. E' utilizzata per commenti o campi che prevedono l'inserimento di molto testo.