Laboratorio di Informatica (Chimica) HTML: Elementi Avanzati. Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter Cazzola HTML: Elementi Avanzati 1
HTML: Frame I frame servono per suddividere il browser in parti indipendenti all interno 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. Walter Cazzola HTML: Elementi Avanzati 2
HTML: <frameset> Il tag <frameset> serve per creare una pagina strutturata in frame <frameset> </frameset frameset> <noframes> </noframes noframes> <frameset> sostituisce il comando <body> Walter Cazzola HTML: Elementi Avanzati 3
HTML: <frameset> <frameset> ha due attributi rows divide lo schermo in righe orizzontali; cols divide lo schermo in colonne verticali; 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. Walter Cazzola HTML: Elementi Avanzati 4
HTML: <frame> All interno di ogni porzione dell interfaccia del browser si deve aprire un documento usando il tag <frame>. <frame src="file HTML da aprire nel frame" name="nome nome della finestra" scrolling="yes" "no" "auto" noresize marginwidth="numero" marginheight="numero" > Walter Cazzola HTML: Elementi Avanzati 5
HTML: Esempio <FRAMESET COLS="5%,19%" BORDER="0" "0"> <FRAME SRC="index_page.html" NAME="index_box" SCROLLING="AUTO" FRAMEBORDER="0"> <FRAME SRC="main_page.html" NAME="main_box" SCROLLING="AUTO" FRAMEBORDER="0" "0"> <NOFRAMES> It is time to update your browser.</noframes> </FRAMESET> </HTML> Walter Cazzola HTML: Elementi Avanzati 6
HTML: target Se da un documento si passa ad un altro, questo viene aperto nella stessa finestra. Si può scegliere la finestra usando l attributo target: in cui aprire il documento <a target="principale principale href="..." "...">clicca qui</a> In target si possono usare alcuni valori speciali: target="_self" target="_blank" target="_top" target="_parent" Walter Cazzola HTML: Elementi Avanzati 7
HTML: image map Una image map è un immagine cui si possono associare link diversi. È necessario avere il file dell immagine (.gif( o.jpg)) e una specifica della mappatura, cioè l indicazione di quali parti dell immagine sono attive e quali no. Walter Cazzola HTML: Elementi Avanzati 8
HTML: <map> <img src="nomefile nomefile.gif" usemap="#mappa1" "#mappa1"> La a specifica della mappatura si mette nel documento HTML (di solito al fondo). <map name="mappa1" "mappa1"> <area shape="rect rect" coords="50,10,100,100" href="..." "..."> <area shape="circle circle" coords="20,20,15" href="..." "..."> <area shape="default default" href="..." "..."> </map> Walter Cazzola HTML: Elementi Avanzati 9
HTML: <area> <area shape=" ="circle" coords="20,20,15" href="..."> 0,0 15 50,10 20,20 100,100 <area shape=" ="default" href="..."> <area shape=" ="rect" coords="50,10,100,100" href=... > Walter Cazzola HTML: Elementi Avanzati 10
Trovare le Coordinate Come si scoprono le coordinate? si può aprire l immagine con Paint (xpaint( xpaint) muovere il mouse sull immagine e leggere le coordinate nella barra di stato in basso Walter Cazzola HTML: Elementi Avanzati 11
HTML: Form I form sono dei moduli che possono essere compilati dai visitatori di un sito permettendo così la creazione di pagine HTML interattive e non solo di consultazione. Si i deve usare il comando: <form> descrizione </form form> <form action="..." method="..."> descrizione del form <input type="submit submit" value="invia" "Invia"> <input type="reset" value="cancella" "Cancella"> </form form> Walter Cazzola HTML: Elementi Avanzati 12
HTML: Textarea Lo spazio per l input può essere creato con il tag: <textarea> </textarea textarea> <form name="frm1" action="..." method="..."> <textarea name="area1" rows="10" cols="20"> inserisci qui un tuo commento </textarea textarea> <br> <input type="submit submit" name="b1" value="invia" "Invia"> <input type="reset" name="b2" value="cancella" "Cancella"> </form form> Walter Cazzola HTML: Elementi Avanzati 13
HTML: input Altri elementi possono essere creati con il tag <input> e valori diversi dell attributo type: type=" ="text" type=" ="checkbox" type=" ="radio" type=" ="hidden" type=" ="password" type=" ="file" <input type="text" name="nome nome" size="30" "30"> NB: ogni elemento di un modulo deve avere un nome (name="...") che viene usato al momento dell invio dei dati. Walter Cazzola HTML: Elementi Avanzati 14
HTML: input form name="frm1" action="..." method="..." "..."> ome <input type="text text" size="30" name="nome" "nome">< ><br> ognome <input type="text text" size="30" name="cog cognome" nome">< ><br> -mail <input type="text text" size="30" name="mail mail"> br> br> uoi ricevere le nostre novità per e-mail? e input type="radio" value="s" name="news news">sì input type="radio" value="n" name="news news">no br> br> input type="submit submit" name="b1" value="invia" "Invia"> input type="reset" name="b2" value="cancella" "Cancella"> /form> Walter Cazzola HTML: Elementi Avanzati 15
HTML: form + table Servizi riservati, per accedere devi digitare user name e password e poi premere il pulsante <b>ok OK</b> </b>.<br><br> <br><br> <center><form form> <table bgcolor="# "#dddddd" cellpadding="10" "10"> <tr>< ><td>user name</ </td> <td><input type="text text" name="user user" size="20" "20"></ ></td></ ></tr> <tr>< ><td>password</ </td> <td><input type="password" name="pws pws" size="20" "20"></ ></td></ ></tr> <tr>< ><td colspan="2" "2"><center> <input type="submit submit" value="ok" "OK"> <input type="reset" value="cancella" "Cancella"> </center></td td></ ></tr> </table table> </form form></center> Walter Cazzola HTML: Elementi Avanzati 16
HTML: menu È possibile inserire dei menu nei form usando i tag <select>... </select select> e <option>... </option option> <form name="frm1" action="..." method="..." "..."> <select name="menu1" "menu1"> <option value="net" "net">netscape</ </option> <option value="exp exp">explorer</ </option> </select select> <br> <input type="submit submit" name="b1" value="invia" "Invia"> <input type="reset name="b2" value="cancella" "Cancella"> </form form> NB: il tag <select> ha anche un attributo size che permette di specificare quanti elementi del menu devono essere visibili.. Se non si specifica nulla, c è un solo elemento visibile. Walter Cazzola HTML: Elementi Avanzati 17
HTML: action <form action="..." method="..." "..."> Quando si seleziona il pulsante Invia viene eseguita l azione specificata nell attributo action. action="mailto mailto:cazzola@dico.unimi. :cazzola@dico.unimi.it" action="http://www.uni "http://www.unige.it/cgi-bin/programma" Nell attributo method si possono scrivere i valori POST o GET che servono per inviare i dati inseriti nel form. NB: : in entrambi i casi è richiesta programmazione dal lato server. Walter Cazzola HTML: Elementi Avanzati 18
HTML: Riferimenti Bibliografici HTML ha molti altri tag. Potete consultare manuali e tutorial che si trovano in rete, es.: www.html.it/guida www.w3.org/tr/wd.w3.org/tr/wd-html40 www.htmlcodetutorial.com Libri: HTML 4.0 flash - Apogeo HTML 4.0 - Mc Graw Hill Walter Cazzola HTML: Elementi Avanzati 19