Università di Bergamo Facoltà di Ingegneria. Applicazioni Internet B. Paolo Salvaneschi B3_2 V1.22. HTML Parte B

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Università di Bergamo Facoltà di Ingegneria. Applicazioni Internet B. Paolo Salvaneschi B3_2 V1.22. HTML Parte B"

Aniello Pasquali
5 anni fa
Visualizzazioni

1 Università di Bergamo Facoltà di Ingegneria Applicazioni Internet B Paolo Salvaneschi B3_2 V1.22 HTML Parte B Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per supporto a lezioni universitarie. Ogni altro uso è riservato, e deve essere preventivamente autorizzato dall autore. Sono graditi commenti o suggerimenti per il miglioramento del materiale B3 HTML Parte B Paolo Salvaneschi 1

2 Tag Mappe sensibili Inserimento oggetto Frames Finestre Form INDICE B3 HTML Parte B Paolo Salvaneschi 2 B3 HTML Parte B Paolo Salvaneschi 2

3 Mappe sensibili <p>il punto 2 è sensibile<p> <br> <map name= mappa > <area shape= rect coords="30,48,51,69" href="testo esplicativo.htm"> </map> <img src="citta.gif" width="435" height="320" border="0" usemap="#mappa"> left-x, top-y, right-x, bottom-y B3 HTML Parte B Paolo Salvaneschi 3 B3 HTML Parte B Paolo Salvaneschi 3

Inserimento oggetto <body> <p><font size="5">inserimento di un oggetto (controllo ActiveX)</font></p> <p> </p> <p> <object classid="clsid:8e27c92b-1264-101c-8a2f-040224009c02" id="calendar1"

4 Inserimento oggetto <body> <p><font size="5">inserimento di un oggetto (controllo ActiveX)</font></p> <p> </p> <p> <object classid="clsid:8e27c92b c-8a2f c02" id="calendar1" width="288" height="192"> <param name="_version" value="524288"> <param name="_extentx" value="7620">.. <param name="_stockprops" value="1"> <param name="valueisnull" value="0"> </object> </p> </body> B3 HTML Parte B Paolo Salvaneschi 4 B3 HTML Parte B Paolo Salvaneschi 4

5 Inserimento oggetto <HTML> <HEAD> <TITLE>A Clock (1.6)</TITLE> </HEAD> <BODY> <h1>a Clock (1.6)</h1> <applet code="clock.class" width="170" height="150"> <param name="bgcolor" value="000000"> <param name="fgcolor1" value="ff0000"> <param name="fgcolor2" value="ff00ff"> </applet> </BODY> </HTML> B3 HTML Parte B Paolo Salvaneschi 5 B3 HTML Parte B Paolo Salvaneschi 5

6 Frames <html> <head> <title>la prima pagina Web di Mario Rossi</title> </head> <frameset cols="20%,200,*"> <frame src="es6_paragrafi.htm"> <frame src="es7_a capo.htm"> <frame src="es14_stili.htm"> </frameset> </html> B3 HTML Parte B Paolo Salvaneschi 6 B3 HTML Parte B Paolo Salvaneschi 6

7 Frames <html> <head> <title>la prima pagina Web di Mario Rossi</title> </head> <frameset rows="*,80"> <frameset cols="30%,*"> <frame src="es6_paragrafi.htm"> <frame src="es7_a capo.htm"> </frameset> <frame src="es14_stili.htm"> </frameset> </html> B3 HTML Parte B Paolo Salvaneschi 7 B3 HTML Parte B Paolo Salvaneschi 7

8 Frames <body> <center> <br><br><br><br><br> <h2>nel mezzo del cammin di nostra vita...</h2> <Iframe src="es17_sfondo colore.htm" width="400" height="200" scrolling="auto" frameborder="1"> </Iframe> </center> <body> Iframe elemento a livello riga B3 HTML Parte B Paolo Salvaneschi 8 B3 HTML Parte B Paolo Salvaneschi 8

9 Frames <html> Frame.htm <head> <title>la prima pagina Web di Mario Rossi</title> </head> <frameset cols="200,*"> <frame name="indice" src= Indice.htm"> <frame name="contenuto" src="contenuto.htm"> </frameset> </html> Frame.htm Indice.htm Contenuto.htm B3 HTML Parte B Paolo Salvaneschi 9 B3 HTML Parte B Paolo Salvaneschi 9

<html> Indice.htm <head> <title>apri nuova finestra</title> </head> <body bgcolor="#eeeeee"> <p><a href="es23_linkinterno.htm" target="contenuto"> TESTO1</a></p> <p><a href="es14_stili.

10 <html> Indice.htm <head> <title>apri nuova finestra</title> </head> <body bgcolor="#eeeeee"> <p><a href="es23_linkinterno.htm" target="contenuto"> TESTO1</a></p> <p><a href="es14_stili.htm" target="contenuto">testo2</a></p> </body> </html> <html> Contenuto.htm <head> <title>apri nuova finestra</title> </head> <body bgcolor="#eeeeee"> </body> </html> Frames B3 HTML Parte B Paolo Salvaneschi 10 B3 HTML Parte B Paolo Salvaneschi 10

11 Finestre <body bgcolor="#eeeeee"> <p>apri una nuova finestra e visualizza il <a href="es6_paragrafi.htm" target="prima_finestra"> TESTO1</a></p> <p>visualizza nella stessa finestra aperta il <a href="es14_stili.htm" target="prima_finestra">testo2</a></p> B3 HTML Parte B Paolo Salvaneschi 11 B3 HTML Parte B Paolo Salvaneschi 11

12 Finestre B3 HTML Parte B Paolo Salvaneschi 12 B3 HTML Parte B Paolo Salvaneschi 12

13 Finestre <center> <p>il punto 2 è sensibile<p> <br> <map name="mappa"> <area shape="rect" coords="30,48,51,69" href="testo esplicativo.htm" target="finestra1"> </map> <img src="citta.gif" width="435" height="320" border="0" usemap="#mappa"> B3 HTML Parte B Paolo Salvaneschi 13 B3 HTML Parte B Paolo Salvaneschi 13

Form Raccolta dati da client via form Method (POST GET): identifica il metodo HTTP utilizzato per trasmettere i dati della form Action: indirizza l applicazione che elabora

14 Form Raccolta dati da client via form Method (POST GET): identifica il metodo HTTP utilizzato per trasmettere i dati della form Action: indirizza l applicazione che elabora i dati <body> <form method= "post" action=" </form> </body> B3 HTML Parte B Paolo Salvaneschi 14 B3 HTML Parte B Paolo Salvaneschi 14

15 Form Metodo GET Nomi e valori sono appesi alla URL Metodo POST Nomi e valori sono nel corpo del messaggio nome=valore&nome=valore B3 HTML Parte B Paolo Salvaneschi 15 B3 HTML Parte B Paolo Salvaneschi 15

16 Form cgi.bin/programma (Script) Server HTTP nome=valore&nome=valore Browser Pagina HTML Standard CGI (Common Gateway Interface) B3 HTML Parte B Paolo Salvaneschi 16 B3 HTML Parte B Paolo Salvaneschi 16

17 Form Textinput: single-line input Nome e Cognome: <input type= "text" name= "Nome" size= "30" > Nome Valore B3 HTML Parte B Paolo Salvaneschi 17 B3 HTML Parte B Paolo Salvaneschi 17

18 Form Textinput: textarea <p>hai commenti da proporre?</p> <textarea name="consigli" rows= "7" cols= "25"> </textarea> <center> B3 HTML Parte B Paolo Salvaneschi 18 B3 HTML Parte B Paolo Salvaneschi 18

19 Form Radio Buttons <input type= "radio" name="tipo foto" value="tipo1">bianco/nero <br> <input type= "radio" name="tipo foto" value="tipo2" checked>colore Bottone a on all inizio Stesso nome: mutuamente esclusivi B3 HTML Parte B Paolo Salvaneschi 19 B3 HTML Parte B Paolo Salvaneschi 19

20 Form Checkboxes <p>quali soggetti ti interessano maggiormente?</p> <input type="checkbox" name="persone" value="tipo1">persone <br> <input type="checkbox" name="natura" value="tipo2">natura <br> <input type="checkbox" name="arte" value="tipo3">arte <br> Default value on Possono essere selezionati più valori B3 HTML Parte B Paolo Salvaneschi 20 B3 HTML Parte B Paolo Salvaneschi 20

21 Form Menus <p>da quanto tempo ti interessi di fotografia?</p> <select name="anni"> <option>meno di un anno</option> <option>da uno a tre anni</option> <option>da tre a dieci anni</option> <option>più di dieci anni</option> </select> E inviato: Anni= il contenuto di option selezionata B3 HTML Parte B Paolo Salvaneschi 21 B3 HTML Parte B Paolo Salvaneschi 21

22 Form Hidden Controls <input type="hidden" name="utente value="pippo"> B3 HTML Parte B Paolo Salvaneschi 22 B3 HTML Parte B Paolo Salvaneschi 22

Form Submit Buttons Spedisce i dati della form a "http://nome.server/cgi.

23 Form Submit Buttons Spedisce i dati della form a " <input type= "submit" value="spedisci i dati"> <input type="reset" value="inizializza form" > </center> </body> B3 HTML Parte B Paolo Salvaneschi 23 B3 HTML Parte B Paolo Salvaneschi 23

24 Form <a href = testo </a> Il risultato è lo stesso <FORM method= get" action=" Nome: <br> <input type="text" name="nome" size=30> <br> Cognome: <br> <input type="text" name= Cognome" size=30> <br><br> <input type="submit" value="invia"> </FORM> B3 HTML Parte B Paolo Salvaneschi 24 B3 HTML Parte B Paolo Salvaneschi 24

Documenti analoghi

Laboratorio di Informatica (Chimica)

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