HTML. Pagine localizzate su server web e visualizzate da un client (browser)

Transcript

1 Pagine localizzate su server web e visualizzate da un client (browser) HTML Linguaggio base per produrre documenti per World Wide Web (WWW o WEB) Documenti WEB pagine ipermediali che contengono testo immagini suoni legami ipertestuali a - altre pagine - programmi - immagini, suoni,...

2 Per visualizzare le pagine HTML si usano programmi chiamati Web browser (Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari ) Le pagine WWW sono trasferite attraverso la rete Internet usando un protocollo particolare HTTP (HyperText Transfer Protocol) costruito al di sopra di TCP/IP (base di Internet) Localizzate mediante un ben preciso sistema di indirizzamento: URL (Uniform Resource Locator)

3 Caratteristiche HTML è un linguaggio di formattazione di documenti Un documento HTML è un file di testo (file ASCII) contenente dei comandi per formattazione inserimento parti multimediali link ipertestuali I comandi (TAGS) hanno una forma sintattica particolare <NOME-COMANDO> informazioni </NOME-COMANDO> I comandi (tags) hanno nomi mnemonici

4 GLI EDITOR Editor di puro testo aiutano a creare file richiamando i tag e gestendo link. Editor WYSIWYG (Frontpage -Dreamweaver) Usare tutti gli strumenti, ma può essere necessario utilizzare il linguaggio HTML direttamente usando gli editor di tag.

5 WYSIWYG What you see is what you get La capacità di un programma grafico di visualizzare esattamente sullo schermo la pagina una volta stampata (pubblicata). Ciò che si vede è ciò che si ottiene. DREAMWEAVER FRONTPAGE NVU HTML

6 Un documento HTML è costituito da due parti <HTML> <HEAD> descrizione delle caratteristiche del documento </HEAD> <BODY> documento vero e proprio </BODY> </HTML>

7 HEAD la parte fondamentale è il titolo del documento che verrà visualizzato nella finestra del browser. ATTENZIONE: poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo. <HEAD> <TITLE> Sistemi - prova di HTML </TITLE> </HEAD>

8 IL TAG META <HEAD> <TITLE> Sistemi - prova di HTML </TITLE> <meta name="keywords" content= sistemi, HTML, ITI, Medi"> <meta name="description" content= Prova di HTML per la classe dell ITI Medi"> <meta name= author" content= Mario Catalano"> </HEAD>

9 Il tag <Doctype> Seguendo le indicazioni del W3C (consorzio internazionale che si occupa di armonizzare l'utilizzo dell'html) Doctype deve essere il primo elemento ad aprire il documento. Questo vuol dire che andrebbe posto prima di <HTML>. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Questa riga fornisce alcune informazioni sul documento: HTML PUBLIC: il documento è pubblico W3C: il tipo di HTML pubblico è gestito dal W3C DTD HTML 4.01: la versione di HTML supportata è la 4.01 EN: la lingua del documento è l'inglese L'uso di DOCTYPE non è obbligatorio e può essere omesso. Certamente un suo utilizzo aiuta il server Web ad interpretare correttamente il documento, ma la sua assenza non è condizionante ai fini della corretta visualizzazione.

10 BODY Contiene il documento (pagina) vero e proprio Il testo può essere inserito liberamente nella parte BODY e verrà visualizzato secondo le direttive di formattazione. <BODY> corpo della pagina </BODY> Più avanti vedremo vari attributi di Body

11 HEADERS <H1> titolo1 </H1>... <H6> titolo6 </H6> permettono di indicare quali parti di testo vengono usate come titoli. H1,..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi,..., H6 a caratteri piccoli.

12 COMANDI PER ANDARE A CAPO <BR> a capo <P> a capo e inizio nuovo paragrafo (salta una linea) HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi HTML non è sensibile ai blank e alle linee vuote

13 ATTRIBUTI DI BODY Il comando BODY ha attributi che permettono di stabilire lo stile dei caratteri <BODY bgcolor="colore sfondo" text="colore testo" background="pathname del file con immagine per lo sfondo" link="colore link da visitare" vlink="colore link visitati" alink= colore link attivo (sul quale è stato premuto ma non rilasciato il pulsante del mouse)>.

14 Il colore può essere specificato con: red, yellow,... codice esadecimale (rosso verde blu vengono combinati numericamente per formare tutti i colori) Di default si ha sfondo bianco, testo nero, link da visitare blu, link visitati rossi. Es: <body Bgcolor = #00000 text= #FFFFFF link= #9805ff > Crea uno sfondo nero, testo bianco e link non visitati di colore viola.

15 DIMENSIONI CARATTERI HTML <BASEFONT> e <FONT> Dimensioni dei caratteri da 1 (piccolo) a 7 (grande) <BASEFONT size=4> <FONT size=3> testo a dimensione 3 </FONT>... si ritorna a basefont <FONT size=+1> dim+1 del precedente </FONT>

16 Il comando FONT ha in realtà tre attributi size per cambiare la dimensione color per cambiare il colore face per cambiare il font <FONT size= 5 color="red" face= Courier > Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier </FONT>

17 CARATTERI SPECIALI I file html sono ASCII puri. Vengono definiti un set di caratteri speciali chiamati entità per aggirare il problema dei caratteri speciali. Possono avere due forme: Entità con nome ed iniziano con la & e terminano con il ; es : " «Le entità con numero iniziano con la & aggiunte con il # e termina con il ; es:  õ Per scrivere la parola poiché: poiché oppure poiché

18 Spazi Gli spazi in HTML vengono considerati diversamente da come siamo abituati Se scrivo <body>spazio1 Spazio2</body> o <body>spazio1 Spazio2</body> Il browser dopo la parola Spazio1 in entrambi i casi aggiungerà solamente uno spazio. Come aggiungere gli spazi? Grazie ad un carattere speciale:

19 Caratteri Speciali Oltre a usato per lo spazio ci sono altri metacaratteri alcuni dei quali devono essere usati obbligatoriamente in HTML < > [ ] & < < > > [ ] & & { } % { } % à é à à é é " " Vedi:

20 ALLINEAMENTO Il comando <P> ha un'opzione align per l'allineamento del testo nel paragrafo <P align= left > testo allineato a sinistra </P> <P align= right > testo allineato a destra </P> <P align= center > testo allineato al centro </P> <P align= justify > testo giustificato </P> La centratura del testo si può ottenere anche con il comando <CENTER> testo da centrare </CENTER>

21 FORMATO Esistono vari modi per cambiare il formato dei caratteri Stili fisici Stili Logici STILI FISICI <B> testo </B> testo in grassetto <I> testo </I> testo in corsivo <TT> testo </TT> testo typewriter <U> testo </U> testo sottolineato <STRIKE>testo </STRIKE> testo sbarrato (testo)

22 STILI LOGICI <EM> testo </EM> {emphasized (di solito corsivo)} <CITE> testo </CITE> {per citazioni, ad esempio titoli libri (di solito in corsivo)} <CODE> testo </CODE> {per codici di programmi (font con caratteri a grandezza fissa)} <STRONG> testo </STRONG> {bold}

23 Tabella colori in esadecimale I colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu), scrivendoli in esadecimale (eventualmente preceduti da #). Miscelando questi valori è possibile ottenere una scala cromatica. Esistono in Internet Le TABELLE ESADECIMALI dei colori.

24 Liste di elementi Può essere utile poter costruire liste di elementi come quella seguente: Il menu prevede due primi penne all arrabbiata lasagne al forno HTML fornisce vari comandi per creare le liste LISTE NON NUMERATE <UL> LISTE NUMERATE <OL>

25 1) Liste non numerate: <UL> Il menu prevede due primi <UL> <LI> penne all arrabbiata <LI> lasagne al forno </UL> <UL> ha l'opzione type <UL type=disc> <UL type=circle> <UL type=square>

26 2) Liste numerate: <OL> Il menu prevede due primi <OL> <LI> penne all arrabbiata <LI> lasagne al forno </OL> Produce Il menu prevede due primi 1. penne all arrabbiata 2. lasagne al forno

27 Opzioni type={1,a,a,i,i} start=numero ES: Il menu prevede due primi <OL type=i start=3> <LI> penne all arrabbiata <LI> lasagne al forno </OL> Produce: Il menu prevede due primi iii iv penne all arrabbiata lasagne al forno

28 Si possono annidare liste, non necessariamente dello stesso tipo. <UL> <LI> primo elemento <OL> <LI> prima sottolista </OL> <LI> seconda sottolista <LI> secondo elemento <UL>

29 Testo preformattato È possibile dare disposizioni affinché una parte di testo non venga formattata <PRE> </PRE> questo testo sarà lasciato come scritto

30 Citazioni Per inserire citazioni nel testo si usa il comando <BLOCKQUOTE> citazione </BLOCKQUOTE>

31 Linee orizzontali Per separare parti di testo si può usare il comando <HR> che produce Questo comando ha tre opzioni: <HR size=numero {spessore in pixel} width=numero numero% {lunghezza in pixel o in percentuale} align={left right} {default centro} color= codice esadecimale/nome colore noshade (definisce se la riga deve essere solida o con un effetto di ombreggiatura).

32 Testo lampeggiante (SOLO CON alcuni browser!!!) Testo, in qualunque forma, che lampeggia in fase di visualizzazione <BLINK> questo testo lampeggia </BLINK> Testo scorrevole (SOLO CON alcuni browser!!!) <MARQUEE> testo che scorre </MARQUEE>

33 TESTI SCORREVOLI (MARQUEE) <MARQUEE> QUESTO TESTO SCORRE </MARQUEE> L attributo behavior può assumere i valori : scroll,slide e alternate scroll e standard, slide si ferma quando raggiunge il margine, alternate fa rimbalzare il testo da sinistra verso destra. Direction : right o left determina il verso. Scrollmount determinana la velocità di spostamento del testo e il valore numerico ad esso assiciato corrisponde al numero di pixel per ogno movimento del testo. Scrolldelay, determina la durata del passo espressa in millisecondi. Per cambiare l aspetto del testo usare bgcolor. Heiht e width determina le dimensioni del riquadro che circonda il testo scorrevole. Hspace e vspace, lo spazio compreso tra i bordi e il testo

34 Commenti Può essere utile mettere dei commenti nel documento che non sono visualizzati dal browser

35 Immagini Fino ad ora abbiamo visto come si può formattare il testo; HTML permette di inserire immagini usando il comando <IMG> l'immagine deve essere su un file a parte i browser supportano formati quali GIF, JPEG TIFF, PNG il comando IMG ha vari attributi

36 <IMG src=pathname o URL dell'immagine align=left right {piu allineamenti particolari con il testo} alt=text border=numero height=numero width=numero hspace=numero vspace=numero {testo alternativo all'immagine} {larghezza in pixel del bordo} {altezza in pixel} {larghezza in pixel} {spazio in pixel a destra e sinistra dell'immagine} {spazio in pixel sopra e sotto l'immagine} >

37 Attributi del tag <IMG> ALIGN definisce la posizione dell immagine rispetto al testo prima e dopo essa. Esistono varie opzioni: ALIGN= top testo sulla sommità dell immagine ALIGN= middle testo al centro ALIGN= bottom testo nella parte più bassa dell immagine ALIGN= left immagine a sinistra ALIGN= right immagine a destra <IMG src= img.jpg align=... >

38 GIF e JPG Gif Utilizza solo 256 colori e quindi le foto tendono ad essere sgranate e poco definite. JPEG Può avere qualsiasi numero di colori e l algoritmo di compressione funzione bene per le immagini fotografiche. Però è poco adatto per le immagini in bianco e nero o per immagini con blocchi estesi di colore uniforme.

39 URL assoluti e relativi Per ogni file che intendiamo usare dobbiamo specificarne l URL (che rimanda ad una zona dell hard disk o ad un luogo esterno): pippo.html (nella stessa cartella) immagini/sfondo.jpg (la cartella immagini all interno della cartella corrente)../cartella/pluto.html (la cartella superiore rispetto a quella del file html di partenza) (url assoluto)

40 ATTENZIONE! Per centrare l immagine usate il tag <CENTER> in questo modo: <CENTER> <IMG scr= sole.jpg > </CENTER>

41 Suoni È possibile associare suoni alla presentazione di una pagina usando il comando <BGSOUND> Anche i suoni devono essere memorizzati su file a parte; esistono vari formati.au,.wav.aiff MIDI (.mid)

42 <BGSOUND > HTML src="pathname del suono" "URL del suono" loop="numero" "infinite" Il parametro LOOP serve per stabilire quante volte si deve ripetere il suono. Se assume valore infinite si ripete il suono fino a quando non si esce dalla pagina ES: <BGSOUND src="suoni/pippo.wav" loop="3">

43 GLI APPLET Sono programmi java interpretati dal browser e richiamati dal file HTML <html> <head> <title> class ciaoancora </title> </head> <body> <applet code="ciaoancora.class" width=220 heigth=50 align="left" vspace=50 hspace=50> </applet> ciao da questo applet <br> mentre vspace e hspace sono stati usati per inserire spazi verticali ed orizzontali. </body> </html>

44 LEGAMI IPERTESTUALI Vediamo ora come creare link ipertestuali in una pagina HTML Primo passo: Definizione precisa di URL standard URL è costituita da tre parti protocollo:// indirizzo internet [:porta]/pathname#label Il PROTOCOLLO descrive il tipo di collegamento da realizzare

45 file: http: ftp: news: telnet: mailto: {per file locali senza indirizzo Internet} {per file remoti da trasferire con http} {attiva trasferimento dati con ftp} {attiva collegamento a server news} {attiva sessione di collegamento remoto} {attiva spedizione di mail} Il protocollo più importante per i legami ipertestuali è http

46 ES: HTML file:html/pippo.html {file pippo.html in directory HTML locale} {file home.html su server

47 {attiva il programma di invio mail} ftp://ftp.itimedi.it/pippo.htm {attiva trasferimento del file pippo dal server ftp.itimedi.it}

48 FTP (File Transfer Protocol) è un protocollo di comunicazione studiato per la copia di file o di testo tra due computer collegati alla rete. Esso è stato sviluppato prima dell'http, che svolge funzioni relativamente simili anche se mirate al World Wide Web HTTP è essenzialmente centrato sul trasferimento di iperoggetti e sulla loro visualizzazione FTP permette di leggere le directory e il loro contenuto sul computer remoto, e di muoversi al loro interno; in pratica, l'hard disk del sito FTP viene momentaneamente collegato al proprio, ed è possibile compiere tutte le operazioni che normalmente si compiono con i file presenti sul proprio hard disk

49 CREAZIONE DEL LEGAME 2 aspetti il testo (immagine) che si comporta come hotword o bottone il servizio da attivare comando ANCHOR: <A> </A> <A href="url servizio da attivare"> testo o immagine che funge da link </A>

50 ES: <A href=" questo testo funge da hotword </A> <A spedisci una mail a Pippo </A> <A href=" <IMG src="pippo.jpg"> </A> <A href="file:c:\pippo.html"> collegamento al file pippo</a>

51 ETICHETTE (LABEL) E SALTI A SEZIONI Con il comando <A> è anche possibile etichettare un punto di un documento con un nome (una label) e quindi saltare direttamente a quel punto grazie ad un link <A name="nome label"> testo a cui saltare </A>

52 ES: Nel documento relazione.html... <H1><A name="cap1"> Capitolo 1 </A> <H1>... In un altro punto dello stesso file relazione.html si avrà <A href="#cap1"> vai al capitolo 1 </A>

53 In un altro file sullo stesso server si avrà <A href="relazione.html#cap1"> vai al capitolo 1 </A> In un file su un altro server si avrà <A href=" vai al capitolo 1 </A>

54 LINK A IMMAGINI SUONI E ANIMAZIONI ESTERNE Si possono visualizzare immagini, suoni, animazioni specificando nella URL il nome di un file corrispondente I formati riconosciuti sono: immagini: GIF, TIFF, JPEG, BITMAP suoni: AIFF, AU, WAV animazioni:.mov (QuickTime).AVI.MPEG

55 <A href="pippo.jpg"> fa partire visore con immagine </A> <A href="pippo.mpeg"> fa partire visore con animazione </A> <A href="suono.aiff"> fa partire suono </A>

56 <A href= pippo.html target= _blank title= > Target: _top, _parent, _self, nella stessa pagina _blank una nuova pagina

57 Creare un target L attributo target consente l apertura di un collegamento in una pagina specificata (generalmente utilizzato nei frame per specificare in quale di essi deve aprirsi il link): <A href= file.html target= _new > (al posto di _new si può usare _blank) consente di aprire il collegamento in una pagina nuova; è utile per mantenere aperta la pagina di partenza e non far perdere il visitatore

58 Testo di commento di un link TITLE. Come per le immagini, anche per i link è possibile specificare un testo di commento che si attiva quando il mouse ci passa sopra: <A href= Sistemi.html title= la pagina dedicata a Sistemi >

59 Tabelle Per creare una tabella si usa il comando <TABLE> tabella </TABLE> <TABLE> ha vari attributi che servono per stabilire le caratteristiche della tabella

60 summary= descrizione del contenuto> <TABLE HTML border=numero {larghezza in pixel dei bordi} align=left right center {allineamento della tabella nella pagina} cellspacing=numero {spazio in pixel tra le celle} cellpadding=numero {spazio tra bordo e contenuto delle celle} width=numero percentuale {larghezza della tabella in pixel o in %}

61 COMANDI PER LA FORMATTAZIONE: <TR> (table row) per creare righe della tabella <TR> nuova riga </TR> <TR align=left right center {allineamento nella tabella} valign=top middle bottom baseline {allineamento del testo rispetto alle celle} background = file name bgcolor = colore bordercolor = colore bordercolordark = colore ( per le ombre dei bordi) >

62 <TR> table row per ogni riga <TD> table data per ogni cella della riga Esempio: tabella a 2 righe e 3 colonne: <TABLE> <TR> <TD>testo della cella</td> <TD>testo della cella</td> <TD>testo della cella</td> </TR> <TR> <TD>testo della cella</td> <TD>testo della cella</td> <TD>testo della cella</td> </TR> </TABLE> HTML Righe e colonne

63 ES: HTML <table> <tr><td>questa è la prima riga.</td></tr> <tr><td>questa è la seconda riga.</td></tr> </table> Questa è la prima riga Questa è la seconda riga

64 <TD> per inserire dati <TD> inserimento di una dato </TD> <TH> per il titolo delle colonne <TH> titolo della colonna (bold e centrato) </TH> <CAPTION> titolo tabella <CAPTION align=top bottom> titolo della tabella </CAPTION>

65 ESEMPIO prima seconda terza a b c i ii iii una tabella

66 I comandi TD e TH hanno vari attributi: <TD (TH) width=numero percentuale colspan=numero rowspan= numero {larghezza della cella in pixel o in %} {numero di colonne nella cella} {numero di righe nella cella} nowrap {non andare a capo nelle celle} >

67 ESEMPIO COLSPAN Permette di raggruppare le delle all'interno delle colonne in modo da avere ad esempio una riga da 2 colonne e un altra da 3. <table border="1" > <tr><td >prima colonna</td> <td >seconda colonna</td> <td> terza colonna</td> </tr> <tr> <td> </td> <td colspan="2">cella che occupa 2 colonne</td> </tr> </table>

68 Prima colonna Seconda colonna Terza colonna Cella che occupa 2 colonne

69 <table border="1" > <tr> <td > </td> <td rowspan="2"> cella che occupa 2 righe</td> <td> </td> </tr> <tr> <td></td> <td></td> </tr> </table> HTML ESEMPIO COLSPAN Nella seconda riga devo definire solo 2 celle, perché la terza è già occupata da quella definita con rowspan Permette di creare celle che occupino più di una riga.

70 Cella che occupa due righe

71 OSS: le tabelle possono essere annidate se non sono annidate allora </TD> </TR> </TH> possono essere omessi

72 Image maps In un documento può essere utile rendere attive delle porzioni di immagini, ossia realizzare con delle parti di immagini dei link ipertestuali. Esistono due tipi di image maps client-side (interpretate dal browser) server-side (richiedono che l'utente abbia accesso al server e sono praticamente in disuso)

73 Un image map è un immagine suddivisa in aree sensibili che, al click del mouse, si comportano come link. Per es, consideriamo l immagine contenuta nel file SigAnelli.jpg Clicca qui per aprire frodo.html Clicca qui per aprire legolass.html Clicca qui per aprire aragorn.html

74 Per creare le image maps è necessario avere: 1. l'immagine 2. una specifica di quali parti sono attive e di quali azioni devono essere svolte quando si clicca su di esse L'immagine viene caricata con il comando <IMG> ma usando gli attributi ISMAP o USEMAP

75 CLIENT SIDE IMAGE MAPS Questo tipo di mappa è contraddistinto dall attributo usemap del tag img: <img src= miaimmagine.gif usemap= nomemappa > come valore dell attributo usemap bisogna specificare il nome della mappa a cui l'immagine fa riferimento. A questo punto non ci resta che creare la mappa in 2 modi possibili: A) Creare un file con estensione.map che contiente la mappatura dell img (POCO USATO) <map name= nomemappa > </map> E poi richiamare all interno di <IMG USEMAP= > il file.map

76 ATTENZIONE! Il nome del file.map, il name dentro il comando <MAP> e il valore di USEMAP devono coincidere HTML B) Usare una label (attraverso USEMAP) per far riferimento alla mappatura e scrivere la specifica della mappatura al fondo del documento, alla fine del body (per la mappatura si usa il tag MAP) 1) RIFERIMENTO ALLA MAPPATURA <IMG src="pathname immagine USEMAP="#miamappa"> 2) e di seguito o prima della chiusura di body specifico LA MAPPATURA <MAP NAME= miamappa >

77 Comandi di mappatura del tag <MAP> : <AREA> Si specificano delle aree dell'immagine e ad ogni area si associa la URL corrispondente <AREA shape="rect" "circle" "polygon" coord="left-x, top-y, right-x, bottom-y " {per i rect, in alto a sin e in basso a destra} "center-x, center-y, radius " {per i circle, coordinate del centro da sinistra e in alto, e raggio} "x1, y1, x2, y2,..., xn, yn " {coordinate di tutti i vertici} href="url" {URL associata all'area} nohref {per aree non attive} alt = Testo alternativo all immagine target = _blank {apre il link in un altra pagina}

78 <MAP NAME= mappalord"> <AREA SHAPE="rect" COORDS="320,20,200,90" HREF= frodo.html"> <AREA SHAPE="rect" COORDS="390,40,490,110" HREF= legolas.html"> <AREA SHAPE="rect" COORDS="360,150,460,230" HREF= aragorn.html"> </MAP> HTML ESEMPIO DI IMAGE MAP Si dichiara che, in corrispondenza di una certa immagine, verrà usata una certa "mappa" (con l'attributo USEMAP) <IMG SRC="SigAnelli.jpg" USEMAP="#mappalord"> Si definisce la "mappa" (con il tag MAP)

79 Come si possono scoprire le coordinate?? Si può caricare l'immagine con l'opzione ISMAP <IMG src="pathname" ISMAP> e, muovendosi con il mouse, leggere le coordinate visualizzate dal browser (funziona solo dal lato server!) OSS: l'origine delle coordinate è in alto a sinistra sullo schermo.

80 Per il resto, il tag <area> si comporta esattamente come il tag <a>, con la possibilità di specificare ad esempio il target in cui aprire i link. In realtà non è difficile disegnare le mappe, perché ci sono già software che lo fanno al posto nostro. Se utilizzate un editor visuale (ad esempio Dreamwever MX) potete trovare degli strumenti integrati nell ambiente di sviluppo. che vi consentono di disegnare le mappe in tutta tranquillità. Trovate un esempio di image map sul sito

81 SERVER SIDE IMAGE MAPS l'immagine viene caricata con l'opzione ISMAP <IMG src="pathname immagine"... ISMAP> l'immagine deve essere all'interno di un comando <A> che contiene l'indirizzo del file della image map <A href="pathname image map (.map)"> <IMG src="pathname"... ISMAP> </A>

82 Il file.map è come quello del caso precedente ma senza i comandi AREA. È costituito da un insieme di righe come quella seguente shape URL coordinate OSS: è meglio usare sempre mappe di tipo client-side con mappatura in fondo al file HTML in quanto oggi tutti i browser più diffusi sono in grado di interpretarle

83 Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio sull'area che è stata appena cliccata. Per eliminarlo è sufficiente utilizzare la seguente sintassi: onfocus='this.blur()' da applicare al tag <AREA> in questo modo: <area shape="circle" coords="45,100" href=" target="_blank" alt= LordOfRings" onfocus= this.blur() >

84 Frames In molti casi può essere utile dividere un documento HTML in più parti, ognuna delle quali può a sua volta contenere un documento HTML gestibile in modo separato ATTN: non tutti i browser supportano i frame (Nescape a partire dalla versione 2.0; MS Explorer a partire da 3.0) Si devono usare i comandi <FRAMESET> e <FRAME>

85 Il documento frame.html HTML > non ha il comando <BODY>... </BODY> che è rimpiazzato dai comandi <FRAMESET>... </FRAMESET> > ha una parte finale <NOFRAMES>... </NOFRAMES> che viene visualizzata nel caso in cui il browser non supporti i frame Il comando FRAMESET permette di partizionare un documento attraverso una suddivisione in righe e colonne

86 <FRAMESET rows="numero1,..., numeron" {altezze in pixel delle righe} "percent1,..., percentn" {altezza in % (somma<100%!!)} * {indica il resto della pagina o la grandezza relativa} cols="numero1,..., numeron" "percent1,..., percentn" * > ATTENZIONE!! ogni frameset può usare solo uno tra i due parametri rows o cols

87 <FRAMESET rows="50,50,80"> <FRAMESET rows="20%,50%,30%"> <FRAMESET rows="30,*,20,20"> {il resto nella seconda riga} <FRAMESET rows="2*,*"> {la prima riga deve essere il doppio della seconda}

88 Il comando <FRAME> si usa per indicare i frame creati con FRAMESET <FRAME src="url" {URL associata al frame} name="nome della finestra" {usato per riferimenti} scrolling="yes" "no" "auto" {scrollbar associate al frame} noresize {impedito resize da parte dell'utente} marginwidth="numero" {larghezza dei margini in pixel} marginheight="numero" {altezza dei margini in pixel } >

89 <FRAMESET cols="40%,60% > <FRAME src="frodo.html" name="finestra1" scrolling="yes" noresize> <FRAME src=" name="finestra2" scrolling="yes" noresize > </FRAMESET> <NOFRAMES> Il tuo browser non supporta i frame; cliccare <A href="frodo.html"> qui </A> per vedere la pagina senza frame </NOFRAMES>

90 <FRAMESET rows="50%,50%"> <FRAMESET cols="*,2*,*"> <FRAME src="legolas.html" name="finestra1 scrolling="yes" noresize> <FRAME src=" name="finestra2 scrolling="auto" noresize> <FRAME src="aragorn.html" name="finestra3 scrolling="yes" noresize> </FRAMESET> <FRAMESET cols="50%,50%"> <FRAME src=" name="finestra4" scrolling="no"> <FRAME src=" name="finestra5" scrolling="auto" noresize> </FRAMESET> </FRAMESET> <NOFRAMES> Mi spiace </NOFRAMES>

91 Se da un documento in una pagina si passa ad un altro documento attraverso un link, questo per default viene aperto nello stesso frame ES: in aragorn.html aperto in finestra3 <A href="frodo.html > APRI LA PAGINA DI FRODO </A>... cliccando APRI LA PAGINA DI FRODO si apre il nuovo documento ancora nel frame finestra3

92 Si può scegliere in quale finestra aprire un documento usando i nomi delle finestre e l'attributo target all'interno di <A> in aragorn.html aperto in finestra3 <A target="finestra5"... href="frodo.html > APRI LA PAGINA DI FRODO </A> Cliccando APRI LA PAGINA DI FRODO si apre il nuovo documento nel frame finestra5

93 In target si possono usare alcuni nomi speciali target="_self" {la finestra stessa: default} target="_top" {nella finestra intera} target="_blank" {nuova finestra} target="_parent" {nel frameset in cui è il frame}

94 FORMS In alcuni documenti HTML può essere utile creare dei moduli che possono essere riempiti da chi consulta le pagine stesse. Le informazioni inserite possono poi essere spedite per Si deve usare il comando <FORM> modulo </FORM>

95 CREAZIONE DI UNA SCHEDA E costituita da due operazioni indipendenti: la creazione degli elementi della scheda la realizzazione del programma script che dovrà essere richiamato dal server ( chiamato script CGI o script) e che si occupa di elaborare le informazioni che l utente invia utilizzando la scheda. La scheda si crea con il tag <FORM> e chiusura </FORM> Il form include due argomenti: METHOD ACTION METHOD = a GET o POST e determinano il modo in cui le informazioni verranno inviate allo script (sul server) che si deve occupare della loro elaborazione. ACTION : Indica lo script sul server che deve essere richiamato nel momento in cui viene inoltrata questa scheda.

96 <FORM HTML action="mailto:indirizzo internet a cui inviare la form/indirizzo di una pagina dinamica method="post/get name= form > qui la form testo, immagini + comandi per input che vedremo... <INPUT type= text"> <INPUT type="submit"> <INPUT type="reset"> </FORM>

97 I due comandi di input "submit" e "reset" devono essere presenti. Restituiscono due bottoni: "submit" quando cliccato spedisce la form "reset" quando cliccato cancella la form

98 È necessario creare degli spazi per l'input dell'utente Ogni spazio deve avere un nome che viene usato nella mail creata dalla form per spedire le informazioni testo libero check box (caselle a selezione multipla) radio box (caselle a selezione singola) menù a selezione singola o multipla

99 COMANDI DENTRO <FORM> Il comando TEXTAREA lascia una zona libera per il testo in input dell'utente <TEXTAREA name="nome" rows=numero cols=numero {nome usato nella risposta} {numero di righe per scrivere} {numero di colonne per scrivere} > testo di default </TEXTAREA>

100

101 <INPUT HTML Comando <INPUT> type= "text" "radio" {input di testo} {crea radio box} "checkbox" {crea checkbox} "password" {spazio per la password} "submit" "reset" > Il comando INPUT ha altri attributi che dipendono dal type

102 size=20 value="italiana"> 1) type= text HTML <INPUT type="text" name="nome del campo di input" size=numero {numero caratteri} value="testo"{testo di default} maxlength="45 > ES: <INPUT type="text" name="nazionalita"

103 2) type="radio" HTML <INPUT type="radio" name="nome del gruppo di bottoni" value="valore di risposta del bottone" {valore che viene restituito quando il bottone viene selezionato} checked {il bottone è selezionato di default} > testo {questo è il testo che appare sul bottone}

104

105 3) type="checkbox" HTML simile a radio ma permette selezione multipla <INPUT type="checkbox" name="nome del gruppo di checkbox" value="valore di risposta del box" {valore restituito quando si seleziona il bottone} > checked {bottone selezionato per default}

106

107 4) type="password" HTML <INPUT type="password" name="nome dell'input" size=numero {spazio che viene lasciato} value="testo" {il testo è la password}>

108 5) type= hidden type="submit" type="reset" value="testo" {il testo permette di personalizzare le scritte sui bottoni}

109

110 Creazione di menù L'ultima possibilità importante permette di creare dei menù popup a selezione singola o multipla. Per racchiudere il menù si usa il comando <SELECT> </SELECT> Per ogni riga del menù si usa il comando <OPTION> elemento del menu </OPTION>

111 <SELECT name="nome del menù size=numero {quante righe del menù devono essere visualizzate} > multiple {permette la selezione multipla; altrimenti si ha selezione singola}

112 <OPTION > value="valore restituito" {valore restituito quando viene selezionata la riga} selected {riga selezionata di default} </OPTION> testo che compare nel menù

113 Esempio scelta singola HTML

114 Esempio Scelta Multipla HTML

115 <textarea name="testolungo" cols="40" rows="20" > Prova </textarea> Se volete che non sia editabile dovete aggiungere readonly

116

117 Al comando "submit" l'utente si vedrà arrivare una mail simile a quella seguente: anno="2" ind="i" commenti="mio commento" Queste informazioni possono essere usate da altri programmi. Ad esempio, le form sono utili in combinazione con i database: ogni form produce un record che viene memorizato in un database per elaborazioni successive.

118 E' possibile incolonnare le aree di testo per avere un effetto più ordinato attraverso l'uso del comando <TABLE> La form sarà quindi inserita in una tabella. <table> <tr> <td> <font size=7> Come ti chiami? </font> </td> <td> <form> <input type="text" name=nome size=20 value="elena" checked> </form> </td> </tr> <tr> etc...