La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

1 HTML Il linguaggio per creare pagine per il web.

Presentazioni simili


Presentazione sul tema: "1 HTML Il linguaggio per creare pagine per il web."— Transcript della presentazione:

1 1 HTML Il linguaggio per creare pagine per il web

2 2 World Wide Web Si basa sul protocollo http ed è la vera novità degli anni 90. Si basa sul protocollo http ed è la vera novità degli anni 90. Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee) è il più potente mezzo di diffusione telematica di documenti elettronici. Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee) è il più potente mezzo di diffusione telematica di documenti elettronici. Mezzo di comunicazione globale, interattivo, multimediale e ipertestuale ha cambiato radicalmente il modo di comunicare e di lavorare. Mezzo di comunicazione globale, interattivo, multimediale e ipertestuale ha cambiato radicalmente il modo di comunicare e di lavorare.

3 3 Organizzazione di un testo Accesso sequenziale

4 4 Organizzazione di un ipertesto Accesso secondo legami associativi

5 5 Linguaggi di markup In un documento il markup è il codice che contiene le informazioni per la sua formattazione. In un documento il markup è il codice che contiene le informazioni per la sua formattazione.

6 6 Linguaggi di markup (II) Nellambito dellelaborazione elettronica dei testi sono stati creati strumenti informatici per automatizzare alcune operazioni per la creazione dei documenti. Nellambito dellelaborazione elettronica dei testi sono stati creati strumenti informatici per automatizzare alcune operazioni per la creazione dei documenti. Esistono programmi per lelaborazione dei testi di tipo diverso. Esistono programmi per lelaborazione dei testi di tipo diverso. Gli editor WYSIWYG.Gli editor WYSIWYG. Gli editor che usano il concetto di markup.Gli editor che usano il concetto di markup. Nel caso di editor che usano il concetto di markup, un testo è costituito da due parti Nel caso di editor che usano il concetto di markup, un testo è costituito da due parti Il contenuto vero e proprio.Il contenuto vero e proprio. Le istruzioni che specificano come il contenuto deve essere rappresentato sul dispositivo (lo schermo di un PC, ma anche per esempio una stampante).Le istruzioni che specificano come il contenuto deve essere rappresentato sul dispositivo (lo schermo di un PC, ma anche per esempio una stampante). In genere si racchiude il testo fra istruzioni chiamate tag (o etichette, o codici). In genere si racchiude il testo fra istruzioni chiamate tag (o etichette, o codici). I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati usando semplici editor di testo. I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati usando semplici editor di testo.

7 7 File Word (.doc)

8 8 Aprendo il file precedente con Blocco Note si vede il formato interno di Word e non si distinguono markup.

9 9 File in formato RTF (.rtf) RTF è un formato solo testo in cui si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del contenuto.

10 10 File in formato PostScript (.ps) Questo è un formato usato per la stampa. Anche in questo caso si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del documento stesso.

11 11 HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). HTML non è un linguaggio di programmazione! HTML non è un linguaggio di programmazione! HTML è un linguaggio di markup e permette di descrivere la disposizione di tutti gli elementi presenti allinterno di un documento. HTML è un linguaggio di markup e permette di descrivere la disposizione di tutti gli elementi presenti allinterno di un documento. I documenti HTML sono dei file in formato testo (codice ASCII). I documenti HTML sono dei file in formato testo (codice ASCII). Si possono creare con degli editor di testo dando lestensione.htm o.html. Si possono creare con degli editor di testo dando lestensione.htm o.html. I browser leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione in modo sequenziale. I browser leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione in modo sequenziale.

12 12 HTML: esempio Pagina HTML di prova Pagina HTML di prova Utilizzare un editor di testo: in ambiente Windows WordPad va bene, in ambiente Unix vi per esempio

13 13 HTML: sintassi informazioni Un documento HTML inizia sempre con il tag e termina sempre con il tag. Un documento HTML inizia sempre con il tag e termina sempre con il tag. NB: il linguaggio HTML è case-insensitive e quindi,, sono tutti tag leciti (lo stesso vale per gli altri tag). Suggerimenti: È meglio decidere allinizio come si scriveranno i tag ed essere consistenti. È meglio decidere allinizio come si scriveranno i tag ed essere consistenti. Per analogia con XHTML (derivato dellXML e dellHTML che è case-sensitive) è consigliabile scrivere tutto in minuscolo. Per analogia con XHTML (derivato dellXML e dellHTML che è case-sensitive) è consigliabile scrivere tutto in minuscolo.

14 14 HTML: sintassi (II) caratteristiche del documento documento

15 15 HTML: HTML: titolo del documento titolo del documento ……………………………………………………

16 16 HTML: HTML: Questa sezione del documento contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto ed interpretato. Questa sezione del documento contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto ed interpretato. È la parte del documento dove vengono inseriti i metatag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, i fogli di stile, ecc. È la parte del documento dove vengono inseriti i metatag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, i fogli di stile, ecc.

17 17 HTML: HTML: titolo del documento titolo del documento documento vero e proprio

18 18 HTML: HTML: NB: lordine in cui si scrivono gli attributi non è importante.

19 19 HTML: HTML: bgcolor=red bgcolor=yellow bgcolor=#00ffff text=#eeeeee link=#ffffff background=images/sfondo.gif

20 20 HTML: HTML: Esempio Sfondo Esempio Sfondo Qui il nostro contenuto

21 21 HTML: RGB Ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso. Ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso. Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale corrispondente (base 16). Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale corrispondente (base 16). Con questa codifica si possono rappresentare più di 16,7 milioni di colori diversi. Con questa codifica si possono rappresentare più di 16,7 milioni di colori diversi.

22 22 HTML: RGB (II) NB: nei file HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre.

23 23 HTML: titoli Il documento inserito nel viene visualizzato secondo le direttive di formattazione. Il documento inserito nel viene visualizzato secondo le direttive di formattazione. Per scrivere titoli si possono usare: titolo1 titolo2 …… titolo6 Per andare a capo: ……….

24 24 HTML: esempio Esempio 2 Esempio 2 Titolo importante Titolo importante Titolo meno importante Titolo meno importante

Hello world hello world hello world hello world


25 25 HTML: caratteri Formato dei caratteri: Formato dei caratteri: grassetto grassetto corsivo corsivo enfatizzato enfatizzato codice codice grassetto grassetto testo testo … …

26 26 HTML: allineamento Allineamento: Allineamento: testo da centrare testo da centrare

27 27 HTML: elenchi e (unordered list) e (unordered list)

    primo elemento primo elemento secondo elemento secondo elemento
e (ordered list) e (ordered list)
    primo elemento primo elemento secondo elemento secondo elemento

28 28 HTML: esempio Esempio 3 Esempio 3


    Primo elemento della lista Primo elemento della lista Secondo elemento della lista Secondo elemento della lista Terzo elemento della lista Terzo elemento della lista

29 29 HTML: altri marcatori Linee orizzontali : Linee orizzontali : Testo lampeggiante (solo per Netscape): Testo lampeggiante (solo per Netscape): questo testo lampeggia questo testo lampeggia Testo scorrevole (solo per Explorer): Testo scorrevole (solo per Explorer): questo testo scorre questo testo scorre Commenti: Commenti:

30 30 HTML: HTML: Link ……… Link ……… testo del link testo del link Gli indirizzi per trovare i documenti nel web sono detti Uniform Resource Locator (URL) e li identificano in modo univoco. Gli indirizzi per trovare i documenti nel web sono detti Uniform Resource Locator (URL) e li identificano in modo univoco. protocollo://indirizzo internet del server/pathname

31 31 HTML: HTML: Esempio Link Sono nella pagina principale pagina principale 1a pagina pagina interna 2a pagina 3a pagina

32 32 HTML: HTML: Università di Firenze protocollo Indirizzo internet del server Anno Accademico 2006/2007

33 33 HTML: link interni (ancore) Link interni allo stesso documento: si usa lattributo name del tag. Link interni allo stesso documento: si usa lattributo name del tag.

34 34 HTML: link interni (ancore) (II) Si devono marcare quelle porzioni del documento dove si vuole saltare. Si devono marcare quelle porzioni del documento dove si vuole saltare.

35 35 HTML: link interni (ancore) (III) Per i link interni si deve usare nellattributo href il nome scelto come valore dellattributo name, preceduto dal simbolo #. Per i link interni si deve usare nellattributo href il nome scelto come valore dellattributo name, preceduto dal simbolo #.

36 36 HTML: HTML: testo NB: limmagine deve essere su un file a parte in formato GIF, PNG o JPEG (BMP solo per Explorer).

37 37 HTML: esempio Prova di documento Prova di documento










38 38 HTML: audio Formati audio.au.aiff.mid.wav Formati audio.au.aiff.mid.wav clicca qui clicca qui NB: bgsound fa partire laudio quando si entra nella pagina ma funziona solo in Explorer.

39 39 HTML: video Formati video.mpeg.avi.mov Formati video.mpeg.avi.mov clicca qui clicca qui NB: dynsrc fa partire automaticamente il video ma funziona solo in Explorer.

40 40 HTML: tabelle Per creare una tabella in HTML si usano i tag: Per creare una tabella in HTML si usano i tag: allinterno dei quali si deve definire il contenuto della tabella. Per definire una tabella si procede nel modo seguente: Per definire una tabella si procede nel modo seguente: Si realizza la prima riga facendo uso del tag (table row)Si realizza la prima riga facendo uso del tag (table row) Si indicano le varie celle facendo uso:Si indicano le varie celle facendo uso: Del tag per le intestazioni di cella (table header). Del tag per le intestazioni di cella (table header). Del tag per i dati della cella (table data). Del tag per i dati della cella (table data). Si passa alla seconda riga con le relative celle avendo cura di usare il tag.Si passa alla seconda riga con le relative celle avendo cura di usare il tag.

41 41 HTML: HTML: Esempio tabella Esempio tabella

Tabella Uno Due Uno Due aaaaaaaaaabbbbbbbb ccccccccc ddddddddd ccccccccc ddddddddd

42 42 HTML: tabelle

43 43 HTML: (II)


44 44 HTML: HTML:

…una tartaruga …una tartaruga …dei pinguini …dei pinguini

45 45 HTML: esempio Esempio di tabella Esempio di tabella


46 46 HTML: tabelle Le tabelle si usano anche per organizzare gli elementi allinterno di una pagina. Le tabelle si usano anche per organizzare gli elementi allinterno di una pagina. Per fare questo non si visualizzano i bordi. Per fare questo non si visualizzano i bordi. righe e colonne <\table>

47 47 HTML: frame I frame servono per suddividere il browser in parti indipendenti allinterno delle quali si possono caricare documenti HTML diversi. I frame servono per suddividere il browser in parti indipendenti allinterno delle quali si possono caricare documenti HTML diversi. È necessario innanzitutto realizzare un file HTML che definisca la struttura della pagina (ovvero la sua suddivisione in parti indipendenti). È necessario innanzitutto realizzare un file HTML che definisca la struttura della pagina (ovvero la sua suddivisione in parti indipendenti). Il tag serve per creare una pagina strutturata in frame. Il tag serve per creare una pagina strutturata in frame. sostituisce il comando sostituisce il comando

48 48 HTML: HTML: ha due attributi: ha due attributi: rows divide lo schermo in righe orizzontali;rows divide lo schermo in righe orizzontali; cols divide lo schermo in colonne verticali.cols divide lo schermo in colonne verticali. Le dimensioni delle righe e delle colonne possono essere espresse in pixel oppure in percentuale. Le dimensioni delle righe e delle colonne possono essere espresse in pixel oppure in percentuale. Tra gli altri attributi si può usare frameborder per associare un bordo alle varie porzioni dello schermo (esteticamente discutibile). Tra gli altri attributi si può usare frameborder per associare un bordo alle varie porzioni dello schermo (esteticamente discutibile).

49 49 HTML: HTML: Allinterno di ogni porzione di interfaccia del browser si deve aprire un documento usando il tag Allinterno di ogni porzione di interfaccia del browser si deve aprire un documento usando il tag

50 50 HTML: (II) Esempio frame Esempio frame qui può essere indicato il link a una versione del sito che non utilizzi un layout a frame qui può essere indicato il link a una versione del sito che non utilizzi un layout a frame

51 51 HTML: target In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. Grazie allattributo target possiamo specificare qual è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno: Grazie allattributo target possiamo specificare qual è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno:

52 52 HTML: target (esempi) Ci sono poi delle parole chiave che ci consentono di ricaricare i link in destinazioni predefinite: Ci sono poi delle parole chiave che ci consentono di ricaricare i link in destinazioni predefinite: target=_blank. Apre il link in una nuova finestra, senza nome;target=_blank. Apre il link in una nuova finestra, senza nome; target=_self. Apre il link nel frame stesso (è così di default);target=_self. Apre il link nel frame stesso (è così di default); target=_parent. Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore);target=_parent. Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore); target=_top. Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame (si noti la differenza con _parent). Più precisamente il documento viene caricato nella parte più alta (top) della struttura, ed è questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.target=_top. Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame (si noti la differenza con _parent). Più precisamente il documento viene caricato nella parte più alta (top) della struttura, ed è questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.

53 53 HTML: mappe dimmagine Una mappa dimmagine è unimmagine cui si possono associare link diversi. Una mappa dimmagine è unimmagine cui si possono associare link diversi. È necessario avere il file dellimmagine (.gif o.jpeg) e una specifica della mappatura, cioè lindicazione di quali parti dellimmagine sono attive e quali no. È necessario avere il file dellimmagine (.gif o.jpeg) e una specifica della mappatura, cioè lindicazione di quali parti dellimmagine sono attive e quali no.

54 54 HTML: HTML: Esempio map Esempio map

<\map>

55 55 HTML: HTML: Come si possono mappare le regioni italiane? Come si possono mappare le regioni italiane?

56 56 HTML: form Uno dei fattori che hanno decretato il successo del Web è senzaltro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list). Uno dei fattori che hanno decretato il successo del Web è senzaltro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list). Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dellutente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form). Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dellutente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form). Linvio dei dati è solitamente organizzato in due parti: Linvio dei dati è solitamente organizzato in due parti: Una pagina principale che contiene i vari campi del form, che consentono allutente di effettuare delle scelte, scrivere del testo, inserire unimmagine …Una pagina principale che contiene i vari campi del form, che consentono allutente di effettuare delle scelte, scrivere del testo, inserire unimmagine … Una pagina secondaria che viene richiamata dalla principale e che effettua il lavoro vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro.Una pagina secondaria che viene richiamata dalla principale e che effettua il lavoro vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro. In questa parte ci occuperemo della sola pagina principale. In questa parte ci occuperemo della sola pagina principale.

57 57 HTML: form (name e action) Per creare una pagina con dei moduli, bisogna usare lapposito tag Per creare una pagina con dei moduli, bisogna usare lapposito tag ………… Come si può vedere, name serve per indicare il nome del form, action indica lURL del programma o della pagina di risposta che processerà i dati. Come si può vedere, name serve per indicare il nome del form, action indica lURL del programma o della pagina di risposta che processerà i dati. Grazie all action è anche possibile far sì che i dati vengano inviati in al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Grazie all action è anche possibile far sì che i dati vengano inviati in al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL).


58 58 HTML: form (metodo) Quando creiamo un form possiamo scegliere due metodi di invio: GET e POST. Quando creiamo un form possiamo scegliere due metodi di invio: GET e POST. Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. NellURL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella query string, cioè nella stringa di interrogazione) secondo questa forma:Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. NellURL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella query string, cioè nella stringa di interrogazione) secondo questa forma: datiInviati=prova+invio I dati (nella forma nome del campo=valore del campo) sono appesi alla pagina dopo il punto interrogativo.I dati (nella forma nome del campo=valore del campo) sono appesi alla pagina dopo il punto interrogativo. Alcuni server hanno tuttavia delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi per linvio in GET è:Alcuni server hanno tuttavia delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi per linvio in GET è:

59 59 HTML: form (metodo) Nel metodo POST invece linvio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string. Nel metodo POST invece linvio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string. In questo caso non ci sono limiti sulla lunghezza dei caratteri. La sintassi è:In questo caso non ci sono limiti sulla lunghezza dei caratteri. La sintassi è:

60 60 HTML: form (Enctype) Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito a errori (ad esempio gli spazi vengono convertiti in +). Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito a errori (ad esempio gli spazi vengono convertiti in +). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottinteso linvio di semplice testo. Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottinteso linvio di semplice testo. A volte però, come quando è necessario inviare unimmagine, è tuttavia indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo è necessario inviare lattributo enctype (encoding type, cioè tipo di codifica). A volte però, come quando è necessario inviare unimmagine, è tuttavia indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo è necessario inviare lattributo enctype (encoding type, cioè tipo di codifica). Ma nel caso di invio di immagini dovremo dichiarare: Ma nel caso di invio di immagini dovremo dichiarare:

61 61 HTML: form (target) Grazie allattributo target è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente o in una determinata parte di un frameset: Grazie allattributo target è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente o in una determinata parte di un frameset:

62 62 HTML: form - raggruppare i moduli Con lHTML4 sono stati introdotti dei tag per fare un po dordine allinterno dei form. Con lHTML4 sono stati introdotti dei tag per fare un po dordine allinterno dei form. Grazie al tag possiamo creare delle macro-aree allinterno dei form, e grazie al tag possiamo indicare il nome di ciascuna macro-area. Grazie al tag possiamo creare delle macro-aree allinterno dei form, e grazie al tag possiamo indicare il nome di ciascuna macro-area. Es.: raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio e reperibilità sul lavoro:Es.: raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio e reperibilità sul lavoro:

Dati anagrafici Dati anagrafici


Residenza



63 63 HTML: form - raggruppare i moduli Un altro tag particolarmente utile – si può utilizzare con ogni tipo di campo che vedremo dora in poi – è il tag, che permette di indicare unetichetta per il nome del campo: Un altro tag particolarmente utile – si può utilizzare con ogni tipo di campo che vedremo dora in poi – è il tag, che permette di indicare unetichetta per il nome del campo:

Dati anagrafici Dati anagrafici Anno di nascita: Anno di nascita:

64 64 HTML: form – Il tag input Per quel che riguarda i campi del form, il tag più utilizzato è, che è senza chiusura. Per specificare un determinato tipo di campo è sufficiente indicare il tipo di input: Per quel che riguarda i campi del form, il tag più utilizzato è, che è senza chiusura. Per specificare un determinato tipo di campo è sufficiente indicare il tipo di input: (crea un campo di testo) (crea un bottone). (crea un campo di testo) (crea un bottone). I vari sono dotati di attributi che consentono di indicare il tipo di campo, il nome (ad esempio, per interagire con JavaScript), e il valore (per lo più il testo visualizzato): I vari sono dotati di attributi che consentono di indicare il tipo di campo, il nome (ad esempio, per interagire con JavaScript), e il valore (per lo più il testo visualizzato):

65 65 I bottoni (submit, reset) Creare un bottone di invio: Creare un bottone di invio:

Un altro bottone utile è il reset che, una volta premuto, consente di riportare il form allo stato originario: Un altro bottone utile è il reset che, una volta premuto, consente di riportare il form allo stato originario:

66 66 Campo testo, textarea, password Per consentire allutente di inserire del testo è possibile utilizzare un campo testo. Se il campo è su una singola linea avremo: Per consentire allutente di inserire del testo è possibile utilizzare un campo testo. Se il campo è su una singola linea avremo: maxlength indica il numero massimo di caratteri che lutente può inserire, con size si esprimono invece le dimensioni del campo di testo.maxlength indica il numero massimo di caratteri che lutente può inserire, con size si esprimono invece le dimensioni del campo di testo. Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una textareaSe si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una textarea qui puoi scrivere il tuo testo qui puoi scrivere il tuo testo

67 67 Campo testo, textarea, password Esiste infine il campo password che codifica i caratteri inseriti con degli asterischi: Esiste infine il campo password che codifica i caratteri inseriti con degli asterischi:

68 68 Scelte: Checkbox Con i checkbox possiamo consentire allutente di operare delle scelte multiple: Con i checkbox possiamo consentire allutente di operare delle scelte multiple:

Linguaggi conosciuti Linguaggi conosciuti html html
css css
JavaScript JavaScript
Si possono anche selezionare uno o più valori di default:Si possono anche selezionare uno o più valori di default: È possibile disabilitare una casella:È possibile disabilitare una casella:

69 69 Scelte: Radiobutton I radio button invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude laltra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore: I radio button invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude laltra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore:

Linguaggi conosciuti Linguaggi conosciuti HTML HTML CSS CSS JavaScript JavaScript
Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante: Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante:

70 70 Scelte: Menu di opzioni (select) Grazie al tag è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa allinterno del tag (la chiusura del tag è opzionale) e il valore deve essere specificato attraverso lattributo value. Con lattributo selected si può indicare una scelta predefinita: Grazie al tag è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa allinterno del tag (la chiusura del tag è opzionale) e il valore deve essere specificato attraverso lattributo value. Con lattributo selected si può indicare una scelta predefinita:

Siti per webmaster Siti per webmaster freephp.html.it freephp.html.it freasp.html.it freasp.html.it

71 71 Scelte: Menu di opzioni (select) NellHTML 4 è stato introdotto il tag che consente di suddividere le varie possibilità di scelta in gruppi tramite lutilizzo di apposite etichette NellHTML 4 è stato introdotto il tag che consente di suddividere le varie possibilità di scelta in gruppi tramite lutilizzo di apposite etichette freephp.html.it freephp.html.it freasp.html.it freasp.html.it font.html.it font.html.it cgipoint.html.it cgipoint.html.it

72 72 Scelte: Menu di opzioni (select) Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando lattributo multiple laspetto del tag select cambia notevolmente Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando lattributo multiple laspetto del tag select cambia notevolmente Quali siti visiti? Quali siti visiti? freephp.html.it freephp.html.it freasp.html.it freasp.html.it font.html.it font.html.it cgipoint.html.it cgipoint.html.it

73 73 HTML HTML ha anche altri tag HTML ha anche altri tag Molti manuali sono in rete, ad esempio si veda Molti manuali sono in rete, ad esempio si veda Libri: HTML 4.0 flash – Apogeo Libri: HTML 4.0 flash – Apogeo HTML 4.0 – McGraw Hill HTML 4.0 – McGraw Hill


Scaricare ppt "1 HTML Il linguaggio per creare pagine per il web."

Presentazioni simili


Annunci Google