DISI Dipartimento di Informatica e Scienze dell'Informazione

Esercitazione sul linguaggio HTML, i moduli

In questa esercitazione impariamo a produrre dei moduli usando il tag <form>

Esercizi
  1. Preparate un file HTML contenente dei campi di testo, dei pulsanti di tipo radio o check box, un'area per contenere un commento da parte dell'utente. Ad esempio, potete inserire:
    1. un campo per il nome dell'utente
    2. un campo per il cognome dell'utente
    3. un campo per l'indirizzo di posta elettronica
    4. ...
    5. un'area per richiedere dei suggerimenti/commenti sul vostro sito
    6. ...
    7. ovviamente non dovrà mancare il pulsante per l'invio del modulo

    ... ricordate di dare un nome ad ogni elemento del modulo

    Quando l'utente, dopo aver compilato il modulo, preme sul pulsante di invio, i dati in esso inseriti vengono
    1. inviati per e-mail, se nell'intestazione del modulo è specificato un indirizzo di posta elettronica (e se il browser è configurato per l'invio della posta elettronica, nel laboratorio SW1 non si riesce)
    2. inviati ad un opportuno programma che si trova su un server web

    Provate a modificare l'intestazione del vostro modulo inserendo il seguente codice HTML

    <form action="http://www.educ.disi.unige.it/ribaudo/risposta.asp" method="post" >

    e guardate cosa succede. Di fatto avete richiesto l'esecuzione di un programma remoto, (risposta.asp) residente su un server web (www.educ.disi.unige.it). Questo programma, letti i dati inviati mediante il vostro modulo, ve li rispedisce indietro immediatamente. Di solito i programmi residenti sui server web eseguono delle computazioni più complesse con i dati che vengono inviati mediante moduli, ma il meccanismo di interazione rimane lo stesso. Si parla di interazione client/server: il vostro browser è il client, il calcolatore su cui risiede il programma eseguito in remoto è il server. Rivredremo questi argomenti a lezione ...


  2. Scrivete il codice HTML per la compilazione di un questionario on line. Pensate ad alcune domande che ammettono risposta singola e create dei radio button con le risposte (se avete domande a risposta multipla, ricordate di usare i pulsanti di tipo check box)

Per il progetto di laboratorio

  1. Cominciate a pensare alla struttura (layout) che volete dare alle vostre pagine

  2. Scegliete lo schema di colori per lo sfondo, per il testo, per i link, ... (non esagerate nel numero di colori e fate attenzione al contrasto tra il colore dello sfondo e il colore del testo)

  3. Scegliete i font per i caratteri (ricordate di usare font standard, in modo da garantirne la disponibilità sulla maggior parte degli elaboratori)

  4. Sulla base del layout, decidete quali sono gli elementi HTML che dovete usare (sono obbligatori alcuni elementi "semplici", le tabelle e almeno un elemento "complesso" tra frame, form, image map)

  5. Non scrivete "romanzi" ma sfruttate l'ipertestualità fornita dal linguaggio

  6. Ricordate che browser diversi interpretano alcuni tag del linguaggio HTML in modo diverso, ed è pertanto una buona regola controllare l'aspetto dell'ipertesto almeno sui due browser principali (Microsoft Internet Explorer e Netscape Navigator)

  7. Il progetto può essere fatto in coppia, la verifica della conoscenza del linguaggio HTML è individuale



  un po' di svago con il gioco del Memory
Istruzioni scegli due carte premendo con il mouse nelle celle della tabella. Se le carte sono uguali, premi il pulsante Elimina, se le carte sono diverse premi il pulsante Nascondi. Aspetta la mossa del calcolatore poi continua ...





last update >>>