HTML Creazione di moduli Prof.ssa Daniela Decembrino.

Presentazione sul tema: "HTML Creazione di moduli Prof.ssa Daniela Decembrino."— Transcript della presentazione:

1 HTML Creazione di moduli Prof.ssa Daniela Decembrino

2 La pagina web Una pagina web è un insieme di contenuti testuali (parole), grafici (disegni, immagini, foto) multimediali (suoni, video) visualizzati sullo schermo durante una connessione in rete (Internet, Intranet, Extranet) effettuata utilizzando un opportuno programma (browser) quale Internet Explorer, Mozzilla Fire Fox, Google Chrome.

3 Gli aspetti di un pagina web Una pagina web può essere: statica HTML dinamica HTML + script = DHTML interattiva DHTML + presenza umana da ambo i lati della comunicazione (ricevitore, trasmettitore): videoconferenza, chat.

4 Il modulo web Un modulo web è una pagina web contenente elementi che possano essere inviati dallutente umano redattore (trasmettitore) allutente umano destinatario (ricevitore) sia in modalità sincrona che in modalità asincrona. Esistono varie tipologie di moduli: modulo dordine ; modulo di iscrizione; sondaggio. Un modulo web costituisce esempio di pagina web dinamica.

5 Linterazione client/server Modulo dordine Internet Up Load Down Load

6 I linguaggi di rete I linguaggi di rete si suddividono in due categorie: Client side; Server side. Questi linguaggi permettono di programmare le pagine web rendendole dinamiche oppure interattive. Ricordiamo che lHTML non è un linguaggio di programmazione!

7 Gli script Client side Gli script Client side sono codici eseguiti sulla macchina in cui risiede il browser. I più famosi e diffusi script Client side sono: JavaScript, VBScript; Applet Java. I primi due sono embedded cioè interni: vengono inseriti allinterno dellHTML della pagina web cui si riferiscono. Lultimo è esterno cioè risiede in un file esterno che viene richiamato allinterno dellHTML.

8 Gli script Server side Gli script Server side sono codici eseguiti sulla macchina in cui risiede il Server che deve elaborare i dati ricevuti dal Client. I più famosi e diffusi script Server side sono: PHP (Personal Home Pages); ASP (Active Server Pages). Il primo è open source scaricabile liberamente dal sito www.php.net. Il secondo è proprietario.www.php.net Entrambi questi script vengono inclusi nellHTML.

9 Le applicazioni CGI Le applicazioni CGI (Common Gateway Interface) consentono di creare pagine web dinamiche sia lato Client che lato Server ricorrendo ai linguaggi di programmazione quali: C; Java.

10 La creazione di un form Linserimento di un modulo allinterno di una pagina web avviene attraverso la creazione di un form accompagnato dai suoi attributi method e action. … Modulo da compilare e inviare. …

11 Lattributo method Lattributo method specifica il metodo di invio dei dati dal client al server e può assumere tre parametri: get invia i dati inseriti nel modulo rendendo visibile lindirizzo di ricezione (poco sicuro!); post invia i dati inseriti nel modulo rendendo invisibile lindirizzo di destinazione (preferibile!); enctype riguarda i MIME (Multipurpose Internet Mail Extension).

12 Lattributo action Lattributo action specifica lazione invocata in seguito alla pressione del bottone di invio (submit) che indica lindirizzo del destinatario. … Modulo da compilare e inviare. …

13 Gli elementi che compongono il form Gli elementi che compongono un form sono quattro: input consente limmissione dei dati descritti mediante lattributo type (pulsante, casella di testo, sceltamutipla); textarea consente la creazione di una area di testo per contenere testi estesi; select consente la creazione di menù; fieldset consente di incorniciare più campi.

14 Lelemento input e i parametri dellattributo type Lelemento input è seguito dallattributo type che può assumere i seguenti parametri: text casella di testo su riga singola; radio scelta esclusiva; checkbox scelta multipla; submit, image, reset pulsante di invio, pulsante di ripristino.

15 Lelemento input e gli altri attributi che seguono type Lelemento input deve essere seguito dallattributo type e dagli altri attributi che sono: name nome della variabile; maxlength lunghezza del valore assunto dalla variabile; size dimensione dello scrolling; value contenuto della variabile ; readonly eventuale sola lettura; enabled eventuale disabilitazione.

16 Lelemento input seguito dallattributo type=text … … Cognome … …

17 Lelemento input seguito dallattributo type=radio … … 0-9 10-19 … …

18 Lelemento input seguito dallattributo type=checkbox … … cinema teatro … …

19 Lelemento input seguito dallattributo type=submit … … … …

20 Lelemento input seguito dallattributo type=image Se lelemento input viene seguito dallattributo type impostato al parametro image seguito a sua volta dallindicazione dellURL specificato tramite il tag SRC allora il pulsante di invio dei dati contenuti nel modulo viene raffigurato con limmagine specificata.

21 Lattributo type=image … … … …

22 Lelemento input seguito dallattributo type=reset … … … …

23 Lelemento textarea e i parametri dei suoi attributi Lelemento textarea è seguito dai seguenti attributi: name nome del testo; rows numero di righe del testo; cols numero di colonne del testo; wrap possibilità di andare a capo (off / virtual)

24 Lelemento textarea … … Il presente testo viene inserito continuativamente perché WRAP è OFF! … …

25 Lelemento select e i parametri dei suoi attributi Lelemento select è seguito dai seguenti attributi: name nome dellelenco; multiple size opzione per indicare la scelta multipla. Lelemento select prevede un tag di chiusura e uno di apertura al cui interno viene inscatolato un altro tag di chiusura e apertura che è option riscritto per ciascuna opzione di scelta possibile.

26 Lelemento select … … Primo valore Secondo valore … …

27 Lelemento select seguito dal tag optgroup Lelemento select può anche essere seguito dal tag di sola apertura optgroup che consente di raggruppare le opzioni di scelta utilizzando il seguente attributo: label nome del sotto elenco. Il tag optgroup deve precedere ogni coppia di tag option previsti allinterno del tag di apertura e chiusura select.

28 Luso del tag optgroup allinterno dellelemento select … … Pere Mele Rape Cicorie … …

29 Lelemento fieldset Lelemento fieldset svolge una funzione puramente esteticag consentendo di raggruppare più campi di uno stesso modulo incorniciandoli. Questo elemento è seguito dallattributo di apertura e chiusura espresso mediante il seguente tag : legend titolo aggiuntivo alla sezione di campi incorniciati. Il tag legend consente di allineare (align) il titolo e di posizionarlo (top, center, bottom, left, right).

30 Raggruppamento dei campi allinterno del modulo … … Area riservata … … Ordine … … …