Progettazione di siti web a.a. 2015/16
|
|
- Emilio Cenci
- 6 anni fa
- Visualizzazioni
Transcript
1 Form Progettazione di siti web a.a. 2015/16 Web form e frame Maria Simi Marzo, 2016 [Manuale di riferimento del W3C, Learning web design] HTML mette a disposizione strumenti per la raccolta di informazioni da parte dell utente: le form web (in italiano moduli web) Una form è un elemento HTML generalmente composto da: campi necessari alla raccolta delle informazioni, di vario tipo un pulsante per l'invio dei dati all'applicazione (tipicamente sul server) che li elaborerà Le form in questo corso ci interessano principalmente come elementi di interazione sul lato client Un esempio : la risposta Accesso da parte dell'utente ad un database che risiede sul server: la pagina web è una interfaccia per accedere ai dati che risiedono sul server Come funzionano? Il tag form definisce un elemento di tipo blocco L'elemento form racchiude una serie di elementi HTML, detti controlli, usati dall utente per inserire informazione: campi per input di testo, scelte multiple, menù a discesa, ma non altre form Ciascun controllo ha un nome e un valore: Il nome è specificato nel codice HTML con l'attributo name Il valore corrisponde all input fornito dall utente Una volta inserita l informazione le coppie nome-valore dei controlli della form vengono inviati all applicazione sul server che li elaborerà Invio dati L invio dei dati coinvolge due pagine La pagina HTML che contiene la form per l inserimento dei dati La pagina (o il programma PHP/ASP/JSP ) che riceve i dati inviati dalla form I valori specificati dall utente sono inviati all URL specificato come un insieme di coppie nome=valore separate da & Es. nome=giovanna&soprannome=jo 1 di 7
2 Il tag form Sintassi per l inserimento di un form: <form id="modulo" method="get" action="script.php" "script.php"> <!-- Qui si inseriscono i controlli --> L attributo id identifica la form L attributo action fornisce l URL dello script o dell applicazione che elaborerà i dati inseriti dall utente. Ogni form può avere una sola action. L attributo method specifica il metodo di invio dei dati al server. Il protocollo HTTP prevede due metodi: get e post Le form non possono essere annidate l una dentro l altra Metodo GET Con il metodo get i dati vengono passati nella URL Il carattere? separa il nome della pagina dai parametri che vengono passati nella form quello che segue è la query string o stringa di interrogazione I caratteri non consentiti nelle URL vengono automaticamente resi con i loro caratteri esadecimali (URL Encoding, standard di codifica Internet Media Type) : lo spazio diventa %20, la / diventa %2F di GET Metodo POST Con il metodo post le informazioni da passare al server non compaiono nella URL ma in una richiesta separata Questo metodo è preferibile se se non si desidera che i parametri siano mostrati all utente se i dati da trasmettere sono tanti La sintassi è: <form id="modulo" method="post" action="script.php" "script.php"> <!-- Qui si inseriscono i controlli --> GET vs POST Con il metodo GET: i parametri sono uniti alla URL: una pagina dinamica può essere memorizzata nei bookmark le informazioni passate sono visibili nella barra degli indirizzi del browser (problemi di sicurezza) se la form ha molti campi la querystring diventa eccessivamente lunga (vincoli sulla lunghezza massima di una URL: 256 caratteri). Con il metodo POST: il ricaricamento di una pagina implica la spedizione da parte del browser dei parametri maggiore sicurezza non ci sono limiti sulla lunghezza dei caratteri Elementi HTML base per l'interazione input type=" ="text" type=" ="password" type=" ="hidden" type=" ="checkbox" " e type=" ="radio" type=" ="button" type=" ="submit" type=" ="reset" type=" ="image" type=" ="file" textarea select e option i n p u t t y p e = " t e x t " <label><p>nome: Nome:</p> name="nome" value="inserisci il tuo nome" size="18" maxlength="50" </label> value permette di inserire il testo che compare nella form Nome: Inserisci il tuo nome size indica le dimensioni del campo di testo che il browser mostra (in numero di caratteri, default 20 caratteri) maxlength indica il numero massimo di caratteri che l utente può inserire name è il nome del valore che lo identifica nella query string 2 di 7
3 i n p u t : t y p e = " p a s s w o r d " i n p u t : t y p e = " h i d d e n " <p>qual è la tua password?</p> <input type="password" name="password" size="8" maxlength="8" Qual è la tua password? Consente all utente di inserire testo mascherandolo con * oppure un pallino (dipende dal browser) Sistema non sicuro: l invio dei dati attraverso il web avviene, se non vengono adottate altre misure di sicurezza, 'in chiaro' <input type="hidden" name="urldiprovenienza" value=" " Serve per trasmettere parametri di servizio, senza far percepire la loro presenza all utente. In questo caso si utilizzano campi nascosti (hidden), presenti all interno del form ma non visibili all utente i n p u t t y p e = " c h e c k b o x " i n p u t t y p e = " r a d i o " <input name="os" type="checkbox" <input name="os" type="checkbox" checked="checked" <input name="os" type="checkbox" disabled="disabled" Le checkbox sono tipicamente usate per opzioni multiple Quali di questi sistemi operativi hai usato? <input type="radio" name="os" checked="checked" "checked"> Unix </input> <input type="radio" name="os" value="mac"> Macintosh 9.0 </input> <input type="radio" name="os" value="winnt" disabled> Windows NT </input> Quali di questi sistemi operativi hai usato? Unix Macintosh 9.0 Windows NT I "radio button" ("bottoni circolari") consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l altra. i n p u t t y p e = " s u b m i t " Ogni form necessita di un bottone di invio per trasmettere i dati al server i n p u t t y p e = " r e s e t " Il bottone di Reset consente di riportare la form allo stato originario, cancellando ogni dato inserito <input type="submit" value="invia i dati" Invia i dati <input type="reset" value="cancella" "cancella"> cancella i n p u t t y p e = " b u t t o n " Esiste infine un tipo di bottone generico che non esegue nessuna azione particolare ma che può essere utilizzato per associare degli eventi con JavaScript <input type="button" value="clicca!" "Clicca!"> Clicca! 3 di 7
4 i n p u t t y p e = " i m a g e " Il campo "image" ci consente di utilizzare come bottoni vere e proprie immagini SRC mi permette di specificare l url dell immagine Usare l attributo ALT! <input type="image" name="invia" src="img/enter.jpg" width="88px" height="40px" alt="invia il modulo" i n p u t t y p e = " f i l e " Consente di fare upload di un un file Il campo di testo è affiancato dal bottone Browse, Sfoglia (a seconda della lingua del browser dell utente) maxlength indica il numero massimo di caratteri che l utente può inserire size indica le dimensioni del campo di testo che il browser mostra (la larghezza è data dal numero di caratteri, default 20 caratteri) Occorre specificare <form enctype="multipart/form-data" "multipart/form-data"> <input type="file" > Textarea Consente di inserire un testo rows specifica il numero di righe dell area da visualizzare cols specifica la larghezza (in caratteri) dell area da visualizzare Appare una scrallbar nel casp il testo inserito sia più lungo delle dimensioni specificate <textarea name="testo" cols="40" rows="5" "5"> Racconta il tuo sogno in 100 parole o meno </textarea> Nota: ampiezza e altezza si possono inserire con i CSS Select 1. Consente di inserire un menu a tendina (o a discesa), in inglese "drop-down" 2. Consente di realizzare una lista "scrollabile" size: : numero di righe da visualizzare multiple: : permette di selezionare più opzioni Ciascuna voce deve essere compresa all interno del tag option e il valore deve essere specificato attraverso l'attributo value Con l attributo selected si può indicare una scelta predefinita Sintassi s e l e c t Etichette - labels 1. Menù a tendina <select name="colore" "colore"> <option>rosso</option> <option>giallo</option> <option selected="selected" "selected"> verde </option> <option>blu</option> <option>arancione</option> </select> 2. Lista "scrollabile" <select name="colore" size="3" multiple="multiple" "multiple"> <option>rosso</option> <option>giallo</option> <option>verde</option> <option>blu</option> <option>arancione</option> </select> È buona pratica marcare con un tag specifico il significato dei campi di una form (label) Due modi di associare etichette ai controlli di una form: <form > <label for="log" "log">login: </label> name="login" id = "log" <form > <label> Login: name="login" </label> 4 di 7
5 Le novità nelle web form HTML5 Comportamenti ricorrenti implementati dai browser invece che dagli sviluppatori in Javascript: li vedremo Nuovi controlli Datalist Input specializzati con comportamenti particolari Slider Spinner Date e tempi color picker Nuovi controlli: datalist Incrocio tra: una input box normale, in cui si digita testo una select <input list="browsers" name="browser" "browser"> <datalist id="browsers" "browsers"> <option value="internet Explorer"> <option value="firefox" "Firefox"> <option value="chrome" "Chrome"> <option value="opera" "Opera"> <option value="safari" "Safari"> </datalist> <input type="submit" "submit"> da w3schools Nuovi tipi di input Input relativi alle date e ai tempi Search (type=search) Date (type=date) Slider (type=range) Color picker (type=color) (type= ) Spinner (type=number)... eccetera Importante: se non supportate diventano normali input box Grazie w3schools! Uso delle informazioni semantiche Tastiere specializzate in Safari per ios! F i e l d s e t e l e g e n d I fieldset servono per raggruppare logicamente un insieme di controlli con una legenda associata <fieldset> <legend>iscrizione mailing list</legend> <ul> <li>aggiungimi alla tua mailing list</li> <li><label>nome e cognome: name="name" </label></li> <li><label> name=" " </label></li> </ul> </fieldset> Iscrizione mailing list Aggiungimi alla tua mailing list Nome e cognome: 5 di 7
6 Form con stile Allineare gli elementi di una form Con l uso di tabelle minimali (dentro la form) o liste (senza decorazioni) Con CSS usando float sulle label HTML CSS Frame I frame suddividono la finestra del browser in sottoparti in cui vengono caricate pagine diverse di pagina a frame Motivi a favore: Si può far variare una parte della pagina e tenere fisso il resto Si può riutilizzare uno stesso componente in più pagine Si può tenere fissa una parte della pagina (es. logo) e scorrere il resto Si possono integrare pagine da server diversi (mashup) Ci sono comunque svantaggi e motivi per non utilizzarli: XHTML1.0 richiede un DOCTYPE particolare i nuovi linguaggi non li utilizzano: HTML5 li elimina ci sono modi alternativi di fare le cose Problemi di usabilità dei frame Non si possono mettere bookmark (segnalibri, favoriti) e inviare URL per , a pagine contenute nei frame (o almeno è complicato) Le pagine destinate ad essere incluse in frame potrebbero essere usate anche fuori contesto (es. recuperate da un motore di ricerca) se la pagina inclusa è a frame si potrebbero avere frame dentro frame... Problemi nella navigazione Necessità di versioni alternative Problemi per i crawler e motori di ricerca Frame inline (iframe) I frame inline consentono di inserire il contenuto di un documento come elemento inline Sono ammessi anche in HTML5 In generale: <iframe src="url"...> contenuto alternativo per browser non abilitati </iframe> Il documento da inserire è identificato da URL All interno dell'elemento dovrebbe essere fornito testo alternativo, magari un link al documento 1 di inclusione di orario Questioni legali Nel caso dei frame e degli iframe è il browser che richiede al server un documento via http, non c è modo di evitare sul lato server che il documento venga incluso nella pagina di un altro (framing). Il contenuto incluso può essere anche graficamente adattato alla pagina "ospite". Il framing è considerato scorretto e una violazione del copyright, quando fatto senza chiedere autorizzazioni. Alternative all'uso dei frame Se c'è una componente che si deve ripetere nelle varie pagine di un sito (es. un menù di navigazione, un logo) si preferisce farla includere dal server con funzionalità sul lato server Server Side Includes (SSI) Una funzionalità semplice offerta dai Web server tipo Apache (se installato modulo mod_include) È una richiesta al server di includere frammenti di pagina contenuti in file specificati. SSI è un primo esempio di pagine assemblate al volo sul lato server, o pagine dinamiche. 6 di 7
7 Come funziona SSI : <html> <head><title>ssi</title></head> <body> <!--#include virtual="intestazione.html" -->... contenuto della pagina... </body> </html> Javascript lato client Anche con Javascript si può includere contenuto nelle pagine Con AJAX si possono fare richieste asincrone al server e caricare su richiesta pezzi di pagina o dati: Limitazione: questi contenuti devono provenire dallo stesso server che ospita la pagina che li richiede ( same server policy ) Per motivi di sicurezza File intestazione.html: <div id="logo" "logo"><img src="logo.gif" </div> Conclusioni Le form sono un importante strumento di interazione con l'utente I controlli da usare servono per input di diverso tipo HTML5 introduce molti controlli con semantica precisa e "incoraggia" i browser a implementare compartamenti standard e buone pratiche Riferimenti utili per le form: Web form design (Luke Wroblewski) 7 di 7
Il tag form indica l'inizio della costruzione di un modulo. Necessita del tag di chiusura
LE FORM Le form, note in italiano anche come moduli sono delle strutture che permettono all'utente di inserire dei dati o di effettuare delle scelte. Le form, prese singolarmente non sono nient'altro che
DettagliProgrammazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
DettagliD B M G Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
DettagliModulo o Form in Html
Pagina dinamica E un documento contenente oggetti, dati e informazioni che possono variare anche in base all iterazione dell utente con il documento stesso. Un esempio classico è quello di una persona
Dettagli@2011 Politecnico di Torino 1
Concetti di base Programmazione Web Il linguaggio HTML HTML consente di annotare un testo per contrassegnare le parti che lo compongono Le annotazioni sono realizzate tramite i "tag" Visualizzare documenti
Dettagli04/05/2011. Lezione 6: Form
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
DettagliHTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML: FORM Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Form Text Radio Select CheckBox TextArea Button ... L'elemento serve per delimitare un modulo
DettagliDURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE
MODULI O FORM DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE ADATTE ALLA LETTURA MA POSSONO SVOLGERE UN RUOLO ATTIVO NEI CONFRONTI DI UNA PAGINA WEB
DettagliHTML e interattività FORM
HTML e interattività FORM Interattività delle pagine web I moderni siti web non sono più soltanto un insieme di pagine da leggere con testo e immagini, ma rappresentano uno strumento per interagire con
DettagliForm HTML. <form> campi del modulo </form>
Form HTML I form (o moduli) HTML permettono ad un utente di interagire con la pagina che sta visitando. L inserimento di un form in una pagina web avviene mediante il tag FORM. Attributi del form campi
DettagliDott.ssa Adriana Pietramala
Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Adriana Pietramala a.pietramala@mat.unical.it Riferimenti Sito del corso: Manuale PHP http://www.php.net/download-docs.php Editor di
DettagliLaboratorio Progettazione Web PHP e FORMs HTML. Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2013/2014
Laboratorio Progettazione Web PHP e FORMs HTML Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2013/2014 Struttura Applicazioni Web Browser Web HTTP Server Web API Dati Presentation Application Storage
DettagliLezione 6: Form 27/04/2012
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
DettagliIl linguaggio HTML - Parte 3
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 3 Dott. Chiara Braghin braghin@dti.unimi.it Addenda Vedi tabella caratteri speciali Vedi file caratteri_speciali.html
Dettagli1) Il client(browser utilizzato) invia al server i dati inseriti dall utente. Server
2) Il Server richiama l'interprete PHP il quale esegue i comandi contenuti nel file.php specificato nell'attributo action del tag form creando un file HTML sulla base dei dati inviati dall utente 1) Il
Dettagli"-//W3C//DTD XHTML 1.1//EN
XHTML 1.1 extensible HyperText Markup Language DOCTYPE All inizio di un documento xhtml bisogna specificare a quali regole ci atteniamo. Tutti i documenti che scriveremo inizieranno con 2 righe particolari:
DettagliI TAG - Form (moduli) (1/21)
I TAG - Form (moduli) (1/21) Scopo: Raccogliere dati dell utente, interagire con esso. L invio dei dati è solitamente organizzato in due parti: una pagina principale che contiene i vari campi dei form,
DettagliStrumenti a disposizione
FORM Strumenti a disposizione L'HTML visto fino ad ora permette di descrivere solo documenti statici e passivi Colori, immagini, testi, etc... L'utente può solo interagire con i link Non sempre questo
DettagliEsercizi su HTML5 e form
Linguaggi e tecnologie per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria informatica Sapienza Università di Roma, a.a. 2016/2017 Esercizi su HTML5 e form Esercizio 1 Scrivere un documento
DettagliHTML FORM E PHP. Programmazione Web 1
HTML FORM E PHP Programmazione Web 1 Form Un insieme di elemen5 in una pagina web con cui l'utente interagisce per inviare informazioni ad uno script Realizzazione di due cose la pagina contente il form
DettagliESEMPI DI FORM (da www.html.it)
ESEMPI DI FORM (da www.html.it) Vediamo, nel particolare, tutti i tag che HTML 4.0 prevede per la creazione di form. Questo tag apre e chiude il modulo e raccoglie il contenuto dello stesso,
DettagliMetodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 7. HTML Parte III (Aspetti avanzati) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso
DettagliTecnologie di Sviluppo per il Web
Tecnologie di Sviluppo per il Web JavaScript Introduzione versione 2.1 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina) G. Mecca Università della Basilicata
DettagliHTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
DettagliMetodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 9. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze
DettagliELEMENTI INTERATTIVI
ELEMENTI INTERATTIVI A Il tag definisce un collegamento ipertestuale, che viene utilizzato per collegare una risorsa internet. L'attributo più importante dell'elemento è l'attributo href, che indica
DettagliInterazione con l utente : i moduli.
Interazione con l utente : i moduli. Nelle lezioni fin qui riportate, non abbiamo mai trattato l input di utente. Nelle applicazioni web, l input dell utente si acquisisce tramite i moduli (o FORM) HTML.
DettagliApplicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche
Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche A.A. 2006-07 Lezione n.10 parte II Prof. Roberto Canonico Università degli Studi di Napoli Federico
DettagliLaboratorio di Basi di Dati e Web/Basi di dati e Multimedia. Docenti: Alberto Belussi e Carlo Combi Lezione 5
Laboratorio di Basi di Dati e Web/Basi di dati e Multimedia Docenti: Alberto Belussi e Carlo Combi Lezione 5 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard
DettagliLE PRIME ACTIVE SERVICE PAGE: oggetto REQUEST
LE PRIME ACTIVE SERVICE PAGE: oggetto REQUEST L'oggetto Request può essere considerato come l'esatto contrario dell'oggetto Response, infatti mentre quest'ultimo invia dati al browser, Request serve a
DettagliMODULO 1 PARTE 3. Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link)
MODULO 1 PARTE 3 Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link) Goy - a.a. 2009/2010 Programmazione Web 1 Gli oggetti HTTP request e HTTP response -I Vi ricordate?
DettagliSicurezza Protezioni in una pagina Web
Pagina 1 di 7 Sicurezza Protezioni in una pagina Web HTML è un linguaggio che consente di presentare informazioni in pagine di formato predefinito e accattivante. Quando non si hanno a disposizione informazioni
DettagliGuida introduttiva al PHP
Fabio Castellini 26/01/2016 Guida introduttiva al PHP Cos'è il PHP? Il PHP è un linguaggio di scripting interpretato, simile al JavaScript, per intenderci, originariamente concepito per la programmazione
DettagliMantenimento dello stato
Mantenimento dello stato Laboratorio Progettazione Web AA 2009/2010 Chiara Renso ISTI- CNR - c.renso@isti.cnr.it Abbiamo visto come il passaggio di informazioni (parametri) tra le pagine possa avvenire
DettagliI FORM. L'attributo action contiene l'url del file php a cui devono essere inviati i file per essere elaborati.
I FORM Che cosa sono e che caratteristiche hanno Un form contiene molti oggetti che permettono di inserire dati usando la tastiera. Tali dati verranno poi inviati alla pagina php che avrà il compito di
DettagliPer la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:
I Form in HTML5 L'HTML mette a disposizione una serie di interessantissimi tag il cui scopo è quello di creare moduli con tanto di caselle di testo, opzioni, bottoni di invio ed altro ancora. Il termine
DettagliI Tag dell html. Parte quarta
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:
DettagliArray, Funzioni e interazione con l utente
Array, Funzioni e interazione con l utente Laboratorio di Progettazione Web AA 2009/2010 Chiara Renso ISTI- CNR - c.renso@isti.cnr.it Gli array sono contenitori in grado di memorizzare una sequenza di
DettagliMODULO 7 HTML HTML. HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali
MODULO 7 HTML MODULO 6 - HTML 1 HTML HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali Un sistema ipertestuale è un insieme di nodi connessi da collegamenti.
DettagliHTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
DettagliMODULI E FORM. L'attributo enctype specifica il tipo di media utilizzato per codificare i dati del modulo, per default è di tipo MINE.
- 1 - MODULI E FORM I Moduli o Forms permettono di interagire con i visitatori del proprio sito offrendo loro la possibilità di immettere, o richiedere, informazioni tramite semplici caselle di testo,
DettagliIntroduzione ad HTML seconda parte WWW. Fabio Vitali
Introduzione ad HTML seconda parte Fabio Vitali Introduzione Oggi esaminiamo in breve, in HTML: u Il tag HEAD u Oggetti e mappe u Form u Frame A seguire: I tag di H EAD 2/26 I tag di H EAD HEAD contiene
DettagliPOSTECERT POST CERTIFICATA GUIDA ALL USO DELLA WEBMAIL
POSTECERT POSTEMAIL CERTIFICATA GUIDA ALL USO DELLA WEBMAIL Sommario Pagina di accesso... 3 Posta in arrivo... 4 Area posta... 5 Scrivi un nuovo messaggio... 5 Selezione ricevuta di consegna... 5 Inserimento
DettagliForms. Commercio elettronico Registrazione di nuovi membri (organizzazioni non-profit) Ricerca di mercato (collezione di dati relativi a utenti)
Forms Rendono XHTML interattivo in modo semplice: Commercio elettronico Registrazione di nuovi membri (organizzazioni non-profit) Ricerca di mercato (collezione di dati relativi a utenti) Svariati controlli
DettagliEsercizi su JavaScript, DOM e Web Storage
Linguaggi e tecnologie per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria informatica e automatica Sapienza Università di Roma, a.a. 2017/2018 Esercizi su JavaScript, DOM e Web Storage Esercizio
DettagliUso di form HTML per inviare dati nel web dinamico. I form HTML ed il web dinamico. Accesso ai dati di un form HTML. Struttura di base dei form HTML
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica orario.html Uso di form HTML per inviare dati nel web dinamico partenza arrivo data INVIA
DettagliCorso di Web Programming
Corso di Web Programming 4. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica Applicata A.A.
DettagliLezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente!
Lezione nr. 5 >> Come creare un modulo Web I moduli web sono delle strutture fondamentali per ogni sito web e la loro conoscenza ti permetterà di risolvere almeno il 60% delle problematiche di gestione
DettagliForm Editor. Dove NomeProfilo è personalizzabile.
Form Editor Il tema permette di generare automaticamente dei moduli per la raccolta di dati in tre semplici step: 1. Si crea una tabella nel database per la raccolta dei dati. Per la creazione si parte
DettagliCorso PHP: Strutturare un sito, GET, Form HTML, POST
Corso PHP: Strutturare un sito, GET, Form HTML, POST Copyright (c) 2011 Antonio Gallo (antoniog.web@gmail.com) Il seguente documento è rilasciato sotto licenza Creative Commons 2.5 Attribution Share alike.
DettagliOBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia
DettagliIl linguaggio HTML - Parte 5
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 5 Dott. Chiara Braghin braghin@dti.unimi.it Frame I frame (cornici) permettono di suddividere la finestra
DettagliLinguaggi e tecnologie per il Web 2016/2017 Facsimile di un compito d esame
Esercizio 1 Linguaggi e tecnologie per il Web 2016/2017 Facsimile di un compito d esame (a) Scrivere un documento HTML contenente una form contenente i seguenti campi: cognome e nome (casella di testo
DettagliGuida all uso del sistema gestionale schede online per attività commerciali e turistiche
Guida all uso del sistema gestionale schede online per attività commerciali e turistiche Versione 1.0 Ultima revisione: 09/11/2012 www.bormio.info Questa guida è di proprietà esclusiva di Bormio.info e
DettagliIl linguaggio PHP. Elementi base
Il linguaggio PHP Elementi base Il Linguaggio PHP PHP è un acronimo ricorsivo che sta per PHP Hypertext Preprocessor Sintassi di base: un blocco di scripting PHP può stare ovunque in un documento, inizia
DettagliLa stampa unione in Word 2007
La stampa unione in Word 2007 Preparazione della lista dei contatti Devi inviare a più persone lo stesso documento e vuoi personalizzarlo con il nome del destinatario? È semplice con la funzione stampa
DettagliManuale per l utilizzo del backend FIDAL.IT. Versione 1.0
Manuale per l utilizzo del backend FIDAL.IT Versione 1.0 20 Gennaio 2015 Sommario Introduzione... 2 Accesso alla piattaforma... 2 Inserimento contenuti... 3 Chiusura sessione di lavoro... 8 Introduzione
DettagliMaster SIT settembre Corso Web & GIS. Chiara Renso. ISTI- CNR
MAPSERVER Corso ISTI- CNR c.renso@isti.cnr.it Mapserver è un software opensource fornito dall Università del Minnesota http://www.mapserver.org/ e fornisce un ambiente per la pubblicazione sul web di mappe.
DettagliUtilizzo collegamento remoto
Utilizzo collegamento remoto Introduzione Il collegamento VPN (virtual private network) consente a PC collegati ad internet ma fisicamente fuori dalla rete interna regionale, di accedere, con le credenziali
DettagliDott.ssa Maria Vittoria Avolio. Dott.ssa Adriana Pietramala
Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Maria Vittoria Avolio avoliomv@unical.it Dott.ssa Adriana Pietramala a.pietramala@unical.it Riferimenti Manuale PHP http://www.php.net/download-docs.php
DettagliModifica Pagina Web. Pulsante LogOut: cliccare per uscire dall'ambiente di amministrazione
Modifica Pagina Web Dopo aver effettuato la Login con la Username e la Password fornitavi (alla url http:// [nomedominio]/account oppure attraverso la pagina login se presente sul sito) vi troverete all'interno
DettagliInternet e Motori di ricerca
Università di Roma Tor Vergata Anno Accademico 2013 2014 Internet e Motori di ricerca Struttura della rete Tipologia rete geografica Users o Clients Rete Host IMP o Server di rete IMP Interface Message
DettagliMANUALE UTENTE. Portale Web Scambio sul posto GSE IMPRESE DI VENDITA. stato documento draft approvato consegnato
MANUALE UTENTE Portale Web Scambio sul posto GSE IMPRESE DI VENDITA stato documento draft approvato consegnato Riferimento Versione 2.0 Creato 03/09/2009 INDICE 1. SCOPO DEL DOCUMENTO... 3 1.1 Ambito di
Dettagliscrivere window.alert(). 2 Nell esempio sarebbe scritto solo var hello, senza pertanto attribuire alla variabile hello alcun valore
In genere il metodo alert() è usato per verificare il valore delle variabili durante la fase di correzione degli errori (debugging), fase che può essere svolta anche con l ausilio di appositi programmi
DettagliIntroduzione. Java HTTP. G. Prencipe
Java html e http G. Prencipe prencipe@di.unipi.it Introduzione Tutte le comunicazioni tra client e server Web avvengono mediate il (HyperText Transfer Protocol, attualmente alla versione 1.1), che è un
DettagliMetodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo Esercitazione con HTML 5 - Video e Grafica Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it
DettagliPrefazione... xi. Da leggere prima di iniziare...xiv. Capitolo 1 Introduzione a JavaScript Sezione A Programmazione, HTML e JavaScript...
SOMMARIO Prefazione... xi Panoramica del libro... xi Caratteristiche distintive...xii Aspetti qualificanti del libro...xii Browser Web da usare... xiii Ringraziamenti... xiii Da leggere prima di iniziare...xiv
DettagliLa Back Office Console consente di costruire lo scheletro degli schema.
BACK OFFICE CONSOLE 1.1 Introduzione 3 1.2 Creazione di uno Schema 4 1.2.1 Struttura dello Schema 5 1.2.2 Caratteristiche dei campi 6 1.2.3 Traduzioni 8 1.3 Ricerca degli schema 8 1.4 Gestione delle Categorie
DettagliAppunti su ASP (Active Server Pages)
Client Client Appunti su ASP (Active Server Pages) Che cosa è ASP Un server web è un computer che contiene tutte le pagine web di un determinato sito web. In tale computer è installato un software che
DettagliMANUALE PER IL REDATTORE DELL UFFICIO STAMPA
MANUALE PER IL REDATTORE DELL UFFICIO STAMPA INDICE: 1 CREA AGENZIA DI STAMPA 2 CREA NOTIZIE DEL GIORNO 3 CREA EVENTO NELL AGENDA In appendice: COME UTILIZZARE GLI STRUMENTI DI INSERIMENTO TESTO Entra
DettagliLa pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.
Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,
DettagliProva d Esame Tecnologie Web LA A.A. 2008/2009 Tempo Disponibile: 3 ore Ai candidati è consentita la consultazione di manuali e materiale didattico
Prova d Esame Tecnologie Web LA A.A. 2008/2009 Tempo Disponibile: 3 ore Ai candidati è consentita la consultazione di manuali e materiale didattico Esercizio 1. Modellazione Si progetti il DTD per la gestione
DettagliHTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...
HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento
DettagliTito Flagella - Il protocollo HTTP
Tito Flagella - tito@link.it Il protocollo HTTP Il protocollo HTTP È il protocollo standard tramite il quale i server Web rispondono alle richieste dei client (inizialmente i browser); È basato su un modello
DettagliExchangefile 2.0 manuale utente
Exchangefile 2.0 manuale utente Paolo Bison Claudio Cavaggion ISIB-CNR Rapporto Tecnico 02/12, ISIB-CNR Padova, Novembre 2012 ISIB-CNR Corso Stati Uniti 4 35100 Padova IT Versione 26/11/12 SOMMARIO Exchangefile
DettagliLaboratorio di Basi di Dati Web/MM
Laboratorio di Basi di Dati Web/MM Docente: Alberto Belussi Lezione 5 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized Markup Language) Gli ipertesti
DettagliI form HTML ed il web dinamico. Uso di form HTML per inviare dati nel web dinamico. Accesso ai dati di un form HTML. script client-side
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Uso di form HTML per inviare dati nel web dinamico orario.html partenza arrivo from=torino&to=roma&day=31/03/07
DettagliUso di form HTML per inviare dati nel web dinamico. I form HTML ed il web dinamico. Struttura di base dei form HTML. Form: controlli di input
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica orario.html Uso di form HTML per inviare dati nel web dinamico partenza arrivo data browser
DettagliLaboratorio di Progettazione Web Introduzione
Laboratorio di Progettazione Web Introduzione AA 2009/2010 Chiara Renso ISTI - CNR - chiara.renso@isti.cnr.it Introduzione alle applicazioni web Il Server web Introduzione a PHP i costrutti di base Forms
DettagliINDICAZIONI UTILI ALL UTILIZZO NUOVA POSTA ELETTRONICA
INDICAZIONI UTILI ALL UTILIZZO NUOVA POSTA ELETTRONICA Accesso alla casella di posta Personale L accesso può avvenire o partendo dall area riservata del sito web (Intranet) selezionando Web Mail Fig. 1
DettagliCODE MODEL - Modalità di scrittura del codice
CODE MODEL - Modalità di scrittura del codice Visual Studio supporta due modelli per la codifica di pagine web: - Codice Inline: Questo modello è il più vicino al tradizionale ASP. Tutto il markup HTML
DettagliOpzioni contenitore Prodotti
Opzioni contenitore Prodotti Clicca il pulsante destro del mouse sul contenitore prodotti per accedere alle opzioni. Clicca il pulsante OPZIONI del menù che appare. Adesso puoi accedere a tutte le opzioni
DettagliHTML5 and Next RIA Apps. Le API per HTML5 Forms
HTML5 and Next RIA Apps Le API per HTML5 Forms Le API per HTML5 Forms Nella precedente lezione abbiamo visto i principali nuov tag di HTML5, un esempio di progetto base con Initializr http://www.initializr.com/
DettagliGUIDA STUDENTE ALL USO DELLA PIATTAFORMA EXCHANGE E-LEARNING - Lotus Quickr
GUIDA STUDENTE ALL USO DELLA PIATTAFORMA EXCHANGE E-LEARNING - Lotus Quickr 1. ACCESSO Accesso Interfaccia e navigazione Inserimento Modulo A Allegati e messaggi Risposta ad un messaggio ricevuto Area
DettagliAUTENTICAZIONE N.B. Attenzione!
AUTENTICAZIONE Per accedere al menù principale, inserire Codice Utente e Password, che verranno forniti dalla scuola, nei campi relativi all Autenticazione (parte sinistra della figura sotto riportata)
DettagliTecnologie informatiche multimediali
Università degli Studi di Ferrara Facoltà di Lettere e Filosofia Corso di Laurea in «Scienze e Tecnologie della Comunicazione» aa 2011-2012 Tecnologie informatiche multimediali Prof. Giorgio Poletti giorgio.poletti@unife.it
Dettagli. Il DVR supporta la connessione WebServer tramite Browser Internet Explorer. La porta Web Server di default è la 3000 ( Es. http://192.168.1.100:3000 ). Manuale d uso DVR 401L MANUALE
DettagliREPORT DI VALUTAZIONE DELL ACCESSIBILITÀ
Pag. 1 di 13 REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ PUBBLICA AMMINISTRAZIONE Comune di Volpedo (AL) www.comune.volpedo.al.it DATA DELLA VALUTAZIONE 1/12/2008 AUTORE DELLA VALUTAZIONE Fabio Regina COMMENTI
DettagliISCRIZIONE ONLINE AI SERVIZI SCOLASTICI
ISCRIZIONE ONLINE AI SERVIZI SCOLASTICI Per accedere all iscrizione online dei servizi scolastici (mensa, trasporto e asilo nido) è necessario accedere tramite browser (solo da pc) all indirizzo www.comune.teramo.it
DettagliIstruzioni per la compilazione del modulo di deposito per parti non rituali
Istruzioni per la compilazione del modulo di deposito per parti non rituali Questa nota descrive le attività necessarie per preparare il modulo per il deposito per parti non rituali. Sommario Attività
DettagliScelta del Browser. Accesso Area Redazione
Scelta del Browser Si consiglia l utilizzo dei più comuni browser: Internet Explorer Safari Opera Mozilla Firefox Google Chrome Accesso Area Redazione Per poter accedere all area redazione bisogna: 1.
Dettagli3.3.6 Gli operatori Le funzioni di accesso al tipo Le strutture di controllo Le funzioni
IIndice Capitolo 1 Da dove partiamo: pagine web statiche 1 1.1 Principi di base.............................. 1 1.1.1 Il paradigma client-server.................... 1 1.1.2 Ipertesto, multimedia, ipermedia................
DettagliCOME CANCELLARE LA CRONOLOGIA
COME CANCELLARE LA CRONOLOGIA Internet Explorer Se vuoi cancellare la cronologia ed utilizzi il browser Internet Explorer di Microsoft, tutto quello che devi fare è avviare il programma facendo clic sulla
DettagliManuale Utente di registrazione alla BDAP (Banca Dati delle Amministrazioni Pubbliche) Bilanci Armonizzati
Manuale Utente di registrazione alla BDAP (Banca Dati delle Amministrazioni Pubbliche) Bilanci Armonizzati Versione 1.2 Roma, Novembre 2016 1 1 Indice 1 GENERALITA... 3 1.1. SCOPO DEL DOCUMENTO... 3 1.2.
DettagliGUIDA ALLA REGISTRAZIONE
GUIDA ALLA REGISTRAZIONE 1. Collegarsi al sito internet www.apservice.it/pslatina 2. Cliccare su registrati (fig. a) e nella nuova finestra inserire i dati richiesti e cliccare sul bottone REGISTRATI per
DettagliFabio Proietti (c) 2012 Licenza:
data di ultima modifica 30/01/2013 Prerequisiti per la comprensione aver usato almeno una volta l'editor notepad++ aver creato almeno una volta una pagina web, usando Una calcolatrice in javascript
DettagliIMMAGINI INTRODUZIONE
IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer
DettagliAnno scolastico INFORMATICA. 2. Conoscere e classificare il software
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI Schiaparelli via Settembrini 4, 20124 Milano tel. 02/2022931 fax 29512285 E-mail schiaparelli@libero.it Gramsci L.go Sereni 1, 20133 Milano tel.
DettagliFondamenti di Informatica II 29. Elementi di programmazione web e linguaggi di script (2)
Interazione client-server (1) per far interagire il client con il server e necessario usare programmi residenti su server (p.e. script CGI - Common Gateway Interface) Fondamenti di Informatica II 29. Elementi
DettagliHTML: tag. HTML: tag. HTML: tag. HTML: un semplice esempio
HTML: tag Alcuni tag prevedono un identificatore di inizio () e di fine marcatura () altri sono dei tag singoli (es.: , ). Esistono delle codifiche per rappresentare in modo universale
Dettagli