Strumenti via WEB per la gestione dinamica dei

Strumenti via WEB per la gestione dinamica dei siti Sviluppo servizi su rete, banche dati Corso di formazione 2002 1

La direzione scelta Esigenze espresse dalla Provincia di Torino: 1) Utilizzare Internet come canale strategico di comunicazione e di interazione con il cittadino - utente 2) Gestire in modo diretto i contenuti del sito, delegando ad altri la gestione del supporto informatico (compresa la formazione tecnica delle redazioni) Sviluppo servizi su rete, banche dati Corso di formazione 2002 2

Glossario • Contenuti: informazioni relative alla materia specifica • Redazione: gruppo di esperti di dominio che si occupano della gestione del sito, attraverso un meccanismo di flusso di pubblicazione delle pagine • Sito gestibile autonomamente: possibilità di pubblicare direttamente contenuti sul sito della Provincia, nelle sezioni di propria competenza • Strumento di gestione dinamica di un sito: Ars. Digita Community System di Ars. Digita • Strumenti di collaborazione: strumenti che assicurano un contatto immediato tra PA e cittadino (Forum, News. Letter, News, ecc. ) • Dinamicizzazione: realizzazione del sito con uno strumento che consente la gestione dinamica dei contenuti da parte di una redazione esperta di dominio Sviluppo servizi su rete, banche dati Corso di formazione 2002 3

Scopi del corso Fornire gli strumenti per rendere le redazioni del sito indipendenti nella gestione dei contenuti Conoscenze base del Formazione per l’uso di: linguaggio HTML: strumenti via WEB per la autonomia nella redazione di contenuti gestione dinamica dei siti Cos’è ACS Nozioni elementari di Internet: è funzionamento siti Internet è utilizzo strumenti via WEB Sviluppo servizi su rete, banche dati Conoscere e imparare a usare: • il CMS (Content Management System) • gli altri strumenti di collaborazione Corso di formazione 2002 4

Organizzazione del corso è Lunedì mattina: progettazione e gestione siti Internet è Lunedì pomeriggio: HTML, teoria è Martedì: HTML, teoria ed esercitazioni pratiche è Giovedì mattina: ACS, CMS e gli strumenti di collaborazione è Giovedì pomeriggio: presentazione manuali è Venerdì: Ulterioni esercitazioni con il CMS Sviluppo servizi su rete, banche dati Corso di formazione 2002 5

Lunedì mattina: AGENDA • Cosa vuol dire essere in rete • Struttura generale di una rete • Browser, HTML, URL …. . Chi sono costoro? • I siti: pagine statiche e dinamiche • Accessibilità e usabilità Sviluppo servizi su rete, banche dati Corso di formazione 2002 6

Cosa vuol dire essere in rete Definizione semplice di rete Sistema che permette la comunicazione fra diverse componenti. Fra tali componenti ci sono: • Client • Server • Data base Il collegamento fra le diverse componenti può avvenire via: • Modem • Linea ISDN (collegamento digitale, migliori prestazioni) • Linea ADSL (collegamento a fibre ottiche) Sviluppo servizi su rete, banche dati Corso di formazione 2002 7

Cosa vuol dire essere in rete Il client Componente di una rete che usufruisce dei servizi messi a disposizione dagli altri componenti della rete Client Sviluppo servizi su rete, banche dati Corso di formazione 2002 8

Cosa vuol dire essere in rete Il server Componente di una rete che mette a disposizione dati, servizi, applicazioni. . . Possono esserci: file server data server -> Server che ospita i Data Base application server -> Server che ospita le applicazioni > printer server > > > Sviluppo servizi su rete, banche dati Corso di formazione 2002 9

Cosa vuol dire essere in rete Il Data Base (o DB) Sistema per immagazzinare dati: > > Dati semplici (numeri, parole. . ) File interi DB utilizzato nel sistema informativo della Provincia di Torino: ORACLE Nuovi strumenti Sviluppo servizi su rete, banche dati Compatibilità con ORACLE Corso di formazione 2002 10

Struttura generale di una rete: Internet - LAN e WWW Internet e' il nome con cui si designa un grande insieme di reti di calcolatori collegate fra loro. Cellula fondamentale e' la LAN (Local Area Network) che ha le dimensioni di un edificio o poco di piu' L'insieme di pagine HTML, immagini, suoni, filmati (iperoggetti) collegati fra di loro costituisce il World Wide Web (WWW). Un iperoggetto e' un documento che al suo interno contiene i rimandi verso altri iperoggetti (link). Sviluppo servizi su rete, banche dati Corso di formazione 2002 11

Struttura generale di una rete: Reti locali (LAN) Server Printer Router Client WAN Sviluppo servizi su rete, banche dati Corso di formazione 2002 12

Struttura generale di una rete Rete esterna/Rete aziendale Firewall: protezione della rete locale dal resto del mondo In generale i client interni alla rete locale possono accedere ad un numero di servizi maggiore rispetto ai client sulla rete esterna Es: Internet/Intranet Sviluppo servizi su rete, banche dati Corso di formazione 2002 13

Struttura generale di una rete Come si comunica? I protocolli Protocollo = Insieme di regole per comunicare Protocollo HTTP E’ il protocollo di comunicazione utilizzato per trasferire sulla rete gli ipertesti. http: //www. provincia. torino. it FTP (File Transfer Process) E’ il protocollo di comunicazione studiato per il trasferimento di file fra due computer collegati alla rete. Sviluppo servizi su rete, banche dati Corso di formazione 2002 14

Browser, HTML, URL …. . Chi sono costoro? Il Browser Il browser è il software che permette la navigazione in Internet. Svolge due funzioni principali: Puntare ad oggetti Internet: E’ in grado di accedere ad un indirizzo internet Formattare e visualizzare i dati: Interpreta i documenti Web redatti in HTML Unisce eventuali file separati (immagini, alcuni Javascript, applet Java…) Sviluppo servizi su rete, banche dati Corso di formazione 2002 15

Browser, HTML, URL …. . Chi sono costoro? I Browser Il browser può permettere: • la navigazione • l’invio e la ricezione della posta elettronica • lo scaricamento (download) di file e programmi • le teleconferenze • l’integrazione con software esterni • il supporto di plug-in • l’editor visuale codice HTML Applicazione che amplia le funzionalità del browser stesso I browser più diffusi sono: • Internet Explorer • Netscape Sviluppo servizi su rete, banche dati Corso di formazione 2002 16

Browser, HTML, URL …. . Chi sono costoro? I Browser Explorer Netscape Attualmente il più diffuso al mondo Sviluppo servizi su rete, banche dati Corso di formazione 2002 17

Browser, HTML, URL …. . Chi sono costoro? I Browser ATTENZIONE !!!!! Ci possono essere piccole differenze nell’interpretazione dell’HTML da parte di diversi browser E’ quindi opportuno verificare la corretta visualizzazione delle pagine WEB create da parte dei browser più diffusi Sviluppo servizi su rete, banche dati Corso di formazione 2002 18

Browser, HTML, URL …. . Chi sono costoro? HTML - Hyper. Text Markup Language - è un linguaggio per creare documenti per il Web HTML non è un linguaggio di programmazione HTML descrive tutti gli elementi presenti in un ipertesto E’ costituito da <TAG> che delimitano il tipo di informazione Sviluppo servizi su rete, banche dati Corso di formazione 2002 19

Browser, HTML, URL …. . Chi sono costoro? HTML Alcuni esempi di TAG : In generale: <nome del comando> Informazioni </nome del comando> <html> <head> (caratteristiche del documento) <title> Titolo della pagina </title> • Formattazione: paragrafi, tabelle, colori, font • Inserimento di: link, immagini Sviluppo servizi su rete, banche dati </head> <body> Contenuto del file html </body> </html> Corso di formazione 2002 20

Browser, HTML, URL …. . Chi sono costoro? Esempio di pagina HTML: <a href="http: //www. provincia. torino. it">Link</a> <table BORDER COLS=2 WIDTH="100%" > <tr> <td>Tabella</td> <td>Colonna 2</td> </tr> <td>Riga 2</td> <td>Riga 2 Colonna 2</td> </tr> </table> Sviluppo servizi su rete, banche dati Corso di formazione 2002 21

Browser, HTML, URL …. . Chi sono costoro? URL Uniform Resurce Locator E’ l’indirizzo di una specifica pagina Web Esempio: http: //www. provincia. torino. it Il prefisso http: indica il tipo di protocollo // Sviluppo servizi su rete, banche dati Corso di formazione Indirizzo Internet 2002 22

I siti: pagine statiche e dinamiche Cosa vuol dire pagina statica ? Collegandosi ad una certa URL, viene restituito sempre lo stesso file HTML L’informazione HTML è fissa Server Viene trovato il file HTML richiesto URL del Server: richiesta di un file Client Sviluppo servizi su rete, banche dati Corso di formazione 2002 23

I siti: pagine statiche e dinamiche Come viene generata una pagina dinamica ? Nel server viene attivato un programma che elabora i dati e crea la pagina HTML Server Attivazione programma URL del Server: richiamato file di programma Creazione dinamica della pagina HTML Client Restituzione pagina Web dinamica Sviluppo servizi su rete, banche dati Corso di formazione 2002 24

I siti: pagine statiche e dinamiche Soluzioni tecniche per generare pagine dinamiche: • CGI (Common Gateway Interface) programmi per generare la pagina HTML dinamica, componendo le informazioni elaborate Compatibilità con sistemi UNIX o LINUX (scelti dalla Provincia di Torino) • ASP (Active Server Pages) • PHP (Php Hypertext Preprocessor) Sviluppo servizi su rete, banche dati Corso di formazione 2002 25

I siti: pagine statiche e dinamiche Non confondere le pagine dinamiche con gli strumenti dinamici per la gestione del sito!! Richiesta Redazione della pagina HTML semplificata: Template predefiniti da associare, Creazione Contenuto da scrivere (in HTML) istantanea e automatica Versioning della pagina HTML tramite Publishing apposito programma Sviluppo servizi su rete, banche dati Corso di formazione 2002 26

I siti: pagine statiche e dinamiche Non confondere le pagine dinamiche con gli strumenti dinamici per la gestione del sito!! Gli strumenti dinamici per la gestione di siti utilizzano pagine dinamiche Non è vero il contrario: ci sono pagine dinamiche non costruite con strumenti dinamici per la gestione dei siti Sviluppo servizi su rete, banche dati Corso di formazione 2002 27

Accessibilità e usabilità Un qualunque sito Web deve essere facilmente accessibile: • Tempi di attesa ridotti • Compatibilità con diverse versioni di browser • Non richiedere continui aggiornamenti software per il corretto funzionamento Nell’ambito della Pubblica Amministrazione: Il sito Web deve essere accessibile a tutti (anche con problemi fisici o cognitivi): • Effetti grafici semplici • Facile navigabilità Sviluppo servizi su rete, banche dati Corso di formazione 2002 28

Accessibilità e usabilità Un qualunque sito Web deve essere facilmente usabile: • Facile da navigare: • Menu semplici • Interfacce chiare • No pop-up inopportune (pubblicità, . . . ) • No bottoni strani, immagini animate, musichette , . . . Nell’ambito della Pubblica Amministrazione: • Regole imposte dall’AIPA sull’usabilità dei siti • La distribuzione dell’informazione dev’essere rivolta a tutti Sviluppo servizi su rete, banche dati Corso di formazione 2002 29

Lunedì pomeriggio: HTML, TEORIA Agenda • • • Le regole d’oro per pubblicare su internet Le basi dell’HTML; i tag fondamentali I font I paragrafi Le liste I link Le immagini Le tabelle I form I fogli di stile Sviluppo servizi su rete, banche dati Corso di formazione 2002 30

Pubblicare su Internet 10 Regole d’oro 1 pianificare il messaggio 2 preferire la semplicità e la chiarezza 3 scegliere la brevità 4 incuriosire la visita 5 agevolare la navigazione 6 riportare le informazioni indispensabili 7 utilizzare materiali esistenti 8 aggiornare continuamente le pagine 9 mantenere le promesse 10 promuovere il proprio sito web Sviluppo servizi su rete, banche dati Corso di formazione 2002 31

HTML u HTML - Hypertext Markup Language - è un linguaggio per creare documenti per il Web u HTML non è un linguaggio di programmazione u HTML descrive la posizione di tutti gli elementi presenti in un documento Sviluppo servizi su rete, banche dati Corso di formazione 2002 32

Pagine statiche Il server contiene le pagine web (file scritti in html) e le immagini <HTML> <HEAD> <TITLE> CSI Piemonte </TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF” BACKGROUND=“images/image 1. gif> Sviluppo servizi su rete, banche dati Corso di formazione Il browser interpreta le istruzioni html e visualizza la pagina 2002 33

Sintassi del linguaggio HTML Tag Fondamentali <NOME DEL COMANDO> informazioni </NOME DEL COMANDO> Un documento HTML inizia sempre con il tag <HTML> e termina sempre con il Tag </HTML> TAG = istruzioni che identificano la posizione e la funzione degli elementi Sviluppo servizi su rete, banche dati Corso di formazione 2002 34

Sintassi del linguaggio HTML Tag Fondamentali <HTML> <HEAD> caratteristiche del documento <TITLE> titolo della pagina </TITLE> </HEAD> <BODY> contenuto del file HTML </BODY> </HTML> Sviluppo servizi su rete, banche dati Corso di formazione 2002 35

Sintassi del linguaggio HTML Dimensioni dei caratteri Il documento inserito nel Body viene visualizzato secondo le direttive di formattazione headers <H 1> Il più grande</H 1> <H 2></H 2> <H 3></H 3> <H 4></H 4> <H 5></H 5> <H 6> Il più piccolo</H 6> N. B. Non usare gli elementi <H 1 -H 6> per ottenere effetti sul testo. <H 1 -H 6> segnalano la presenza di titoli. Sviluppo servizi su rete, banche dati Corso di formazione 2002 36

Sintassi del linguaggio HTML Istruzione Font <FONT specifica alcuni attributi delle font (colore, tipo. . . ) SIZE= dimensione dei caratteri (da “ 1” a “ 7”); + o - determinano un aumento o una diminuzione dei caratteri COLOR= colore “#codifica esadecimale” FACE= tipo di carattere (Arial, Verdana, . . . ) > </FONT> Esempio: <FONT FACE=“ARIAL, VERDANA” SIZE=3>testo tipo</FONT> N. B. E’ buona norma prevedere almeno due font alternative (una simile per stile, una di default visibile su tutti i sistemi) Sviluppo servizi su rete, banche dati Corso di formazione 2002 37

Sintassi del linguaggio HTML La codifica RGB • Ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano la quantità di ROSSO, VERDE e BLU presenti nel colore stesso • Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale (base 16) corrispondente • Con questa codifica si possono rappresentare più di 16 mila colori diversi Sviluppo servizi su rete, banche dati Corso di formazione 2002 38

Sintassi del linguaggio HTML Paragrafi <P apre il paragrafo; gestisce le proprietà di allineamento ALIGN=“center/right/left” > </P> si può omettere <BR> mette a capo il testo <CENTER> centra il testo</CENTER> <HR> inserisce una linea di separazione nel testo <HR WIDTH=“valore in pixel o percentuale” SIZE=“ 3” (spessore della linea)> <BLOCKQUOTE> indica la presenza di citazioni </BLOCKQUOTE> N. B. Non usare BLOCKQUOTE per delimitare il rientro del testo Sviluppo servizi su rete, banche dati Corso di formazione 2002 39

Sintassi del linguaggio HTML Liste di elementi <UL> inizio di una lista non ordinata <UL TYPE=[disc o circle o square]> determina il tipo di punto <LI> primo elemento</LI> <LI> secondo elemento</LI> </UL> <OL> inizio di una lista ordinata <OL TYPE=[1 o a o A]> determina il tipo di lista numerata o letterale <LI> primo elemento</LI> <LI> secondo elemento</LI> </OL> N. B. Non è necessario chiudere </LI> Sviluppo servizi su rete, banche dati Corso di formazione 2002 40

Sintassi del linguaggio HTML Link <A>serve per “ancorare” il collegamento alla pagina</A> COLLEGAMENTI ESTERNI <A HREF=“http: //www. csi. it”>La pagina del Csi</A> ALTRI COLLEGAMENTI ESTERNI (altri protocolli) <A HREF=“ftp: //ftp. gutenberg. org”> ftp del Progetto Gutenberg</A> <A HREF=“news: //news. polito. it”> area news del Politecnico</A> Sviluppo servizi su rete, banche dati Corso di formazione 2002 41

Sintassi del linguaggio HTML Link COLLEGAMENTI INTERNI <A HREF=“#riferimento”>se fai click qui</A> <A NAME=“#riferimento”>arrivi qui</A> COLLEGAMENTI DI POSTA ELETTRONICA <A HREF=“mailto: comunica@itocsivm. csi. it> Gruppo Comunicazione</A> URL indirizzi “ASSOLUTI”: /prova/index. htm indirizzi “RELATIVI”: . . / index. htm Sviluppo servizi su rete, banche dati Corso di formazione 2002 42

Sintassi del linguaggio HTML Immagini/GIF FORMATO GIF (Grafics Interchange Format) • supporta al massimo 256 colori (8 bit) • prevede l’interlacciamento, cioè le immagini vengono visualizzate con successive schermate di definizione • è utile per la grafica semplice, con grandi superficie di colore uniforme • non è adatto con particolari tipi di compressione grafica Sviluppo servizi su rete, banche dati Corso di formazione 2002 43

Sintassi del linguaggio HTML Immagini/JPEG FORMATO JPEG (Joint Photografic Experts Format) • l’estensione dei file è JPG • supporta 16 milioni di colori (24 bit) • prevede una forte compressione, con perdita di qualità, quindi le dimensioni dei file sono molto piccole • è ideale per le immagini fotografiche con sfumature • non è adatto per immagini con aree di colore omogeneo Sviluppo servizi su rete, banche dati Corso di formazione 2002 44

Sintassi del linguaggio HTML Immagini/Attributi <IMG SRC= “nome del file dell’immagine” ALT= “testo” testo descrittivo nel caso in cui un’immagine non possa essere visualizzata ALIGN= “top/middle/bottom” allineamento del testo con la figura BORDER= “valore in pixel” HSPACE= “valore in pixel” spazio orizzontale tra testo e oggetti intorno ad un’immagine VSPACE= “valore in pixel” spazio verticale tra testo e oggetti intorno all’immagine > Sviluppo servizi su rete, banche dati Corso di formazione 2002 45

Sintassi del linguaggio HTML Immagini/Mappa • consente di costruire immagini sensibili • è necessario avere il file dell’immagine e una specifica della mappatura, cioè l’indicazione di quali parti sono attive e quali no • per preparare l’immagine adatta a questo scopo, è necessario usare particolari programmi, come “Mapedit” oppure programmi WYSIWYG • preparata l’immagine, con Mapedit è possibile definire aree rettangolari, poligonali e circolari alle quali associare distinti URL Sviluppo servizi su rete, banche dati Corso di formazione 2002 46

Sintassi del linguaggio HTML Immagini/Mappa <IMG SRC=“nome del file dell’immagine” USEMAP=“#nome della mappa” ISMAP (indica che l’immagine è una mappa)> <MAP name=“mappa”> <AREA shape=“rect” <AREA shape=“circle” coords=“ 50, 100, 100” HREF=“. . . ”> coords=“ 20, 15” HREF=“. . . ”> </MAP> Sviluppo servizi su rete, banche dati Corso di formazione 2002 47

Sintassi del linguaggio HTML Tabella/Struttura <TABLE> inizio tabella <TR> inizio nuova riga <TD> inizio nuova cella Contenuto della cella </TD> fine cella </TR> fine riga </TABLE> fine tabella Sviluppo servizi su rete, banche dati Corso di formazione 2002 48

Sintassi del linguaggio HTML Tabella/Attributi <TABLE >. . . BORDER=4 bordo tabella WIDTH=50% larghezza tabella in pixel o percentuale HEIGHT= altezza della tabella in pixel BGCOLOR colore di sfondo della tabella CELLSPACING spaziatura interna tra le celle CELLPADDING spaziatura tra il testo e il bordo delle celle </TABLE> Sviluppo servizi su rete, banche dati Corso di formazione 2002 49

Sintassi del linguaggio HTML Tabella/Attributi TD <TABLE> <TD WIDTH larghezza cella HEIGHT altezza cella COLSPAN estensione in larghezza delle singole colonne ROWSPAN altezza delle singole celle ALIGN allineamento testo (“left”, “center”, “right”) VALIGN allineamento testo (“top”, “middle”, “bottom”) > </TD> </TABLE> Sviluppo servizi su rete, banche dati Corso di formazione 2002 50

Sintassi del linguaggio HTML Tabella/Esempio <TABLE WIDTH=50% BORDER=4 CELLSPACING=6> <TR> <TH>Uno</TH> <TH>Due</TH> </TR> <TD BGCOLOR=“#00 ff 00” ALIGN=right>aaaa</TD> <TD BGCOLOR=“#00 ff 00” ALIGN=right>bbbb</TD> </TR> <TD>cccc</TD> <TD>ddddddd</TD> </TR> </TABLE> Sviluppo servizi su rete, banche dati Corso di formazione 2002 51

Sintassi del linguaggio HTML Form Pressione del tasto SUBMIT sul form il Server elabora il contenuto del form il SERVER restituisce l’output all’utente Sviluppo servizi su rete, banche dati Corso di formazione 2002 52

Sintassi del linguaggio HTML Form/Struttura <FORM>descrizione</FORM> <FORM action=url a cui il modulo invia le informazioni dopo aver premuto il tasto di submit method=metodo di trasmissione dati; si usa GET o POST >. . . Sviluppo servizi su rete, banche dati Corso di formazione 2002 53

Sintassi del linguaggio HTML Form/Campi Text. Field Drop. Down. List Check. Box Text. Area Radio. Button Bottone Scroll. List I vari campi di un modulo sono sempre dichiarati all’interno del form come <INPUT> <TEXTAREA> <SELECT> Sviluppo servizi su rete, banche dati Corso di formazione 2002 54

Sintassi del linguaggio HTML Form/Comandi <INPUT> definisce un campo di input. Ha un attributo obbligatorio TYPE (indica il tipo di elemento da inserire nel form) TYPE = text TYPE = radio TYPE = checkbox <SELECT> </SELECT> definisce inizio e fine di una serie di opzioni <OPTION> </OPTION> definisce una scelta all’interno di <SELECT> <TEXTAREA> </TEXTAREA> definisce un campo di input con più linee Sviluppo servizi su rete, banche dati Corso di formazione 2002 55

Sintassi del linguaggio HTML Form/Tipi di INPUT <INPUT TYPE=TEXT (textfield) NAME=nome del campo SIZE=lunghezza massima del campo MAX-LENGTH=lunghezza max del valore inserito nel campo> <INPUT TYPE=RADIO (Radiobutton) NAME=nome del campo VALUE=valore inviato al server, quando il radiobutton è selezionato> <INPUT TYPE=CHECKBOX (Check. Box) NAME=“nome del campo” VALUE. . . > <INPUT TYPE=“SUBMIT” (Bottone) NAME=nome del campo VALUE=nome che appare sul bottone> Sviluppo servizi su rete, banche dati Corso di formazione 2002 56

Sintassi del linguaggio HTML Form/Text. Area N. B. : Il Radiobutton, usando l’attributo VALUE, permette di escludere le altre opzioni, il Checkbox no. <TEXTAREA NAME=nome assegnato a textarea ROWS=numero righe visibili COLS=numero colonne visibili WRAP=attributo che fa scorrere automaticamente il testo (HARD per forzare a capo, SOFT per procedere sulla stessa riga> </TEXTAREA> Sviluppo servizi su rete, banche dati Corso di formazione 2002 57

Sintassi del linguaggio HTML Form/Text. Area <FORM action=“. . . ” method=“. . . ”> <TEXTAREA name=“area 1” rows=10 cols=10> testo che viene visualizzato </TEXTAREA> <BR> <INPUT type=“submit” value=“invia”> <INPUT type=“reset” value=“cancella”> </FORM> TESTO CHE VIENE VISUALIZZATO INVIA Sviluppo servizi su rete, banche dati CANCELLA Corso di formazione 2002 58

Sintassi del linguaggio HTML Form/Drop Down List <SELECT NAME=nome del campo> <OPTION VALUE=valore del campo quando viene sottomesso al server> <SELECT NAME=“. . . ”> <OPTION VALUE=“ 1”>voce di scelta 1</OPTION> <OPTION VALUE=“ 2”>voce di scelta 2</OPTION> <OPTION VALUE=“n”> voce di scelta n </OPTION> </SELECT> Sviluppo servizi su rete, banche dati Corso di formazione 2002 59

Sintassi del linguaggio HTML Form/Scroll List <SELECT NAME=nome del campo SIZE=numero delle voci visibili nel campo> <SELECT NAME=“. . . ” SIZE=5> <OPTION VALUE=“ 1”>voce di scelta 1</OPTION> <OPTION VALUE=“ 2”>voce di scelta 2</OPTION> <OPTION VALUE=“n”>voce di scelta n</OPTION> </SELECT> Sviluppo servizi su rete, banche dati Corso di formazione 2002 60

Sintassi del linguaggio HTML Form/Esempio <H 3>Compila il seguente questionario: </H 3> <FORM METHOD=“POST” ACTION=“http: //www. hal. com/sample”> <P>Il tuo nome: <INPUT NAME=“nam” size=“ 48”> <P>Maschio<INPUT NAME=“gender” TYPE=RADIO VALUE=“MALE”> <P>Femmina<INPUT NAME=“gender” TYPE=RADIO VALUE=“female”> <P>Quante persone in famiglia: <INPUT NAME=“family” TYPE=text> <P>Città di residenza: <UL> <LI>Ivrea<INPUT NAME=“city” TYPE=checkbox VALUE=“kent”> <LI>Pescara<INPUT NAME=“city” TYPE=checkbox VALUE=“miami”> </UL> <P>Grazie per aver compilato il questionario <P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM> Sviluppo servizi su rete, banche dati Corso di formazione 2002 61

Sintassi del linguaggio HTML Form/Esempio Compila il seguente questionario: Il tuo nome: Maschio Femmina Quante persone in famiglia: Città: • Ivrea • Pescara Grazie per aver compilato il questionario Submit Query Reset Sviluppo servizi su rete, banche dati Corso di formazione 2002 62

Sintassi del linguaggio HTML Fogli di stile Permettono di determinare la formattazione delle pagine (impaginazione del testo, spaziature, rientri. . . ), la dimensione, il colore e il font. I fogli di stile possono essere applicati a: • una porzione del documento; • al documento intero. Codice per definire il foglio di stile (regola): selettore {dichiarazione proprietà: valore} es. H 2 {font-size: 16 pt; color: “FF 0000”} Sviluppo servizi su rete, banche dati Corso di formazione 2002 63

Sintassi del linguaggio HTML Fogli di stile Tipi di fogli di stile: • interni al documento (in linea); • incorporati; • esterni. Fogli di stile: INTERNI Per formattare una sola parte del testo di un documento si usano <SPAN> o <DIV> per assegnare lo stile. <DIV STYLE="font-size: 18 px; font-family: arial; color: red"> Questo testo ha colore rosso </DIV> DIV si usa per porzioni di testo più grandi, SPAN per una riga soltanto. Sviluppo servizi su rete, banche dati Corso di formazione 2002 64

Sintassi del linguaggio HTML Fogli di stile: INCORPORATI Vanno dichiarati nella HEAD del documento <HTML> <HEAD> <style type="text/css"> H 1 { font-size: 17 px; font-family: verdana; color: green } H 2 { font-size: 14 px; font-family: arial; color: red } </style> </HEAD> <BODY> <H 1>Titolo del documento</H 1> <H 2>Sottotitolo del documento </H 2> </BODY> </HTML> Sviluppo servizi su rete, banche dati Corso di formazione 2002 65

Sintassi del linguaggio HTML; Fogli di stile: ESTERNI Vanno dichiarati in un file separato con estensione. css (es. stile. css) e richiamati all’interno del documento HTML nella HEAD <HTML> <HEAD> <link rel=stylesheet href="stile. css" type="text/css"> </HEAD> Nel file stile. css si avrà: P {font-family: Arial, Helvetica, "Times New Roman"; color: rgb(0, 0, 102); text-indent: 10 px; textalign: justify; margin-left: 20 px; margin-right: 10 px; font-size: 9 pt; } A: LINK {text-decoration: none; color: rgb(153, 0, 0); } A: VISITED {text-decoration: none; color: rgb(153, 0, 0); } UL {font-family: Arial, Helvetica, "Times New Roman"; color: rgb(0, 0, 102); text-align: justify; margin -left: 20 px; margin-right: 10 px; font-size: 9 pt; } Sviluppo servizi su rete, banche dati Corso di formazione 2002 66

Sintassi del linguaggio HTML; Fogli di stile Si possono specificare anche dei fogli di stile personalizzati senza intervenire sulle TAG predefinite dall’HTML. . testobianco { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 10 pt; color: #FFFFFF}. testonero { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 10 pt; color: #000000}. linknero { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 10 pt; font-weight: bold; color: #000000}. titolo { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 10 pt; font-style: normal; font-weight: bold; color: #FFFFFF} E poi richiamarli nelle pagine attraverso il CLASS: <TD class=“testonero”>…</TD> il contenuto della cella sarà scritto in Arial, con colore nero e sarà grande 10 pt Sviluppo servizi su rete, banche dati Corso di formazione 2002 67

Bibliografia On. Line/1 BUILDER. COM http: //www. builder. com/Authoring/Html/ Il sito degli sviluppatori web, vi troviamo informazioni su: trucchi HTML, i segreti Java e Javascript, come aumentare il proprio traffico, come guadagnare qualcosa grazie al proprio sito, oltre ad un completo manuale HTML per principianti. Lingua inglese. CORSO HTML http: //www. geocities. com/Silicon. Valley/5912/corso. htm Questo utile corso è interamente contenuto in un'unica pagina senza alcuna immagine è facilmente stampabile, e rappresenta un'ottima soluzione per iniziare a conoscere il linguaggio HTML. DEVELOPER. COM www. developer. com Vero e proprio deposito di informazioni tecniche, questo sito offre guide e forum di grande aiuto per gli sviluppatori Web. Sviluppo servizi su rete, banche dati Corso di formazione 2002 68

Bibliografia On. Line/2 DYNAMIC HTML LAB webreference. com/dhtml Raccolta di news e di approfondimenti sul Dynamic Html aggiornata con regolarità. Lingua inglese GUIDA COMPLETA HTML www. html. it Nuova guida all'HTML con piu' di 50 lezioni e tre livelli di approfondimento. Principianti - se ti stai avvicinando per la prima volta all'HTML e non hai altre esperienze di realizzazione siti; avanzata - se già realizzi siti e vuoi migliorare la tua conoscenza degli strumenti di sviluppo; professionale - se le tue esigenze sono di tipo professionale e lavorativo. Sviluppo servizi su rete, banche dati Corso di formazione 2002 69

Bibliografia On. Line/3 GUIDE ALL’HTML http: //www. unive. it/!wda/rete/html/guide Un insieme di guide e di manuali sia in italiano sia in inglese. Il materiale in inglese è più completo e aggiornato. HTML 4 http: //www. stars. com/Authoring/HTML/4/ L'evoluzione della versione 3. 2 del linguaggio HTML: l'innovazione più importante nella versione 4 è rappresentata dai fogli di stile, di cui si trovano tutte le informazioni su questo sito. Lingua Inglese. HTML DEVELOPERS PAGE http: //why. dada. it/html La base per costruire le proprie pagine web utilizzando hml 3. 2. Sviluppo servizi su rete, banche dati Corso di formazione 2002 70