I Tag dell html Parte quarta
Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag: <form action="uri" method="post >...</form> L'attributo ACTION specifica l'uri della risorsa a cui il browser invierà i dati.
Tag <input> Un modulo può contenere più elementi INPUT, aventi diverse funzioni, definiti nel modo seguente: <input type="text" "password" "radio" "checkbox" "submit" "reset" "button" "image name="string" [value="string"] [checked] [size="n"] [maxlength="n"] >
Type TEXT Crea un campo per l'immissione di una stringa. L'attributo SIZE definisce la dimensione del campo, ma resta comunque possibile inserire stringe di dimensione maggiore fino al valore definito da MAXLENGTH(in tal caso il testo scorrerà). L'attributo VALUE permette di inizializzare il campo.
Type PASSWORD Funziona come TEXT, con la differenza che il testo è offuscato da asterischi. L'invio dei dati avviene però in chiaro, dunque non è assicurata la confidenzialità.
Type RADIO Crea un gruppo di voci di selezione mutuamente esclusive. Il gruppo è definito dall'attributo NAME, che deve avere lo stesso valore per ogni voce appartenente al gruppo, mentre VALUE è diverso per ogni voce. Il dato inviato è costituito dalla coppia NAME+VALUE.
Type CHECKBOX Crea una singola voce di selezione; se selezionata, ritorna NAME=on.
Type SUBMIT Crea un pulsante che mostra il testo definito dall'attributo VALUE. Quando premuto, il browser invia i dati secondo il metodo specificato le form.
Type RESET Crea un pulsante che mostra il testo definito dall'attributo VALUE. Quando premuto, il browser ripristina i valori di default in tutti gli elementi del modulo.
Tag <select> Il tag <select> crea un menu di voci opzionali. <select name="string" >...</select> Le singole voci sono definite dall'elemento <option>: <option value="string" [selected] >... </option> Se una voce è SELECTED, sarà quella selezionata per default.
Esempio form <form action="mailto:youremailaddress@yourdomain.com" method="post ENCTYPE="text/plain"> <p align="left">text:</p> <input type="text" value="testo di default" size="20"> <p align="left">radio:</p> <input type="radio" name="uno" value="uno1" checked="checked">prima opzione<br /> <input type="radio" name="uno" value="uno2">seconda opzione<br /> <input type="radio" name="uno" value="uno3">terza opzione<br /> <p align="left">checkbox:</p> <input type="checkbox" name="uno">prima opzione<br /> <input type="checkbox" name="due">seconda opzione<br /> <input type="checkbox" name="tre">terza opzione<br /> <p align="left">select:</p> <select name="uno"> <option value="uno" selected>uno</option> <option value="due">due</option> <option value="tre">tre</option> </select> <p align="left">reset:</p> <input type="reset" value="cancella tutto"> <p align="left">submit:</p> <input type="submit" value="spedisci i dati"> </form>
Invio tramite posta <html> <head> <script> // Soggetto della mail subject = "Dati dal sito"; // Indirizzo email per il ritorno dei dati email = "info@tarabaralla.info"; function sendform() { var data = ""; for (j = 0; j < document.forms[0].length - 1; ++j) { data += document.forms[0].elements[j].name + ": " + document.forms[0].elements[j].value + " "; } window.open("mailto:" + email + "?subject=" + subject + "&body=" + data,"_self"); } </script> </head> <body>
Invio tramite posta 2 <form name="iscrizione"> Nome:<input type="text" name="nome" value="carlo"><br><br> Indirizzo:<input type="text" name="indirizzo" value="via del pozzetto"><br><br> Telefono:<input type="text" name="telefono" value="056939293"><br><br> <input type="button" value="send" onclick="sendform()"> </form></body></html>
Tag <object> Consentono di inserire oggetti multimediali come video: <object data= video.mpeg type= application/ mpeg > Alternativa al video </object>
Tag <object> (video youtube) <object width="425" height="344"><param name="movie" value="http://www.youtube.com/ v/hkob0mhvbvm&hl=it&fs=1"></ param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></ param><embed src="http://www.youtube.com/ v/hkob0mhvbvm&hl=it&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
Tag <div> E usato per raggruppare logicamente gli elementi dell html. Non ha nessun effetto diretto visibile sulla visualizzazione degli elementi in esso contenuti. Verrà usato per la definizione degli stili con il css.
Introduzione ai CSS Introduzione
Cosa è il CSS I fogli di stile a cascata (CSS) costituiscono uno strumento potente e flessibile per controllare la presentazione dei documenti. I CSS semplificano notevolmente il lavoro di editing ed eliminano la ripetizione dei comandi. E' infatti possibile definire il layout delle pagine e l'aspetto di elementi ricorrenti all'interno del documento (ad esempio, dimensione, font e colori di testo e titoli). L'introduzione dei CSS ha reso obsoleti molti attributi degli elementi HTML.
Cosa è il CSS (2) Tramite il linguaggio CSS si può definire lo stile (colore, sfondo, grandezza, bordo, allineamento ) di uno o più gruppi (tag) di una pagina (o più) html.
Struttura del CSS Come gli attributi dell html, ogni caratteristica dello stile di un elemento html o di un gruppo di elementi deve essere definita tramite la seguente sintassi: attributo1: valore; attributo2: valore In html era: attributo1= valore attributo2= valore Nota che in CSS gli attributi sono separati da ; in html dagli spazi.
Come si specificano i CSS Gli attributi CSS associati a ciascun tag html si possono specificare in due modi: Tramite l attributo style dell html : <p style= background: yellow; color: red > In questo modo però si perdono i vantaggi del CSS dato che lo stile potrebbe essere specificato tramite gli attributi classici dell html Tramite I fogli di stile.
I fogli di stile I fogli di stile sono dei file esterni o delle sezioni della pagina html in cui si specifica lo stile di ciascun tag della pagina tramite il CSS. Il foglio di stile può essere integrato nella pagina html specificando il css nell header all interno del tag <style type= text/css > o in un file esterno.
Fogli di stile Che sia racchiuso in un tag o in un file esterno I fogli di stile hanno questa struttura: P { color: red } Con tale stile tutti gli elementi racchiusi dentro I tag <p> avranno il testo di color rosso
Fogli di stile esterni Se si definisce lo stile in un foglio esterno tutte le pagine che dovranno seguire quello stile dovranno contenere dentro head: <link rel="stylesheet" href= style.css" type="text/ css" media="screen">
Stile interno Se invece si vuole definire lo stile all interno di una pagina html si deve aggiungere una sezione style dentro head (comunque sconsigliato perchè va ripetuto in ogli pagina con lo stesso stile): <style> <!-- h2 { font-family: sans-serif; color: red; font-style: oblique; text-align: center; border: thin groove; } --> </style>