HTML

1. HTML Applet, Form, Map

2. APPLET • Applets are mall programs written in Java that can be executed by the browser. • <APPLET> tag is used to add an applet to a web page. • CLASS extension file is the source file to be used by the browser. • <PARAM> tag is used to set the programmer specified parameters.

3. APPLET <APPLET CODE=“x.class” NAME=“mycolors” VSPACE=“20” WIDTH=“400” HEIGHT=“50”> <PARAM NAME=“bgcol” VALUE=“Red”> (PARAM:parameters passed to object) (VALUE:value associated with param) </APPLET>

4. FORM • With forms you can put a survey on your page to see what people think. • You can use forms as an order form for your site, or just as a questionnaire to see what people think of you pages. • Regardless of why you use them, forms may just be the trick you need to get the feedback you desire.

5. FORM • FORM element • METHOD attribute indicates the way the Web server will organize and send you form output • Web server: Machine that processes browser requests • METHOD = “post” in a form that causes changes to server data • METHOD = “get” in a form that does not cause any changes in server data • Form data sent to server as an environment variable • Processed by scripts • ACTION attribute • Path to a script (a CGI script written in Perl, C or other languages)

6. FORM-ENCODING • The form field names and values are escaped: space characters are replaced by ' +', and then reserved characters are escaped as per [URL]; that is, non-alphanumeric characters are replaced by '%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character. Line breaks, as in multi-line text field values, are represented as CR LF pairs, i.e. '%0D%0A'. • The fields are listed in the order they appear in the document with the name separated from the value by '=' and the pairs separated from each other by '&'. Fields with null values may be omitted. In particular, unselected radio buttons and checkboxes should not appear in the encoded data, but hidden fields with VALUE attributes present should.

7. FORM • GET: The default, will send the form input in an URL. • POST: Sends the form in the body of the submission. You can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

8. REQUEST OBJECT- QueryString (GET) Retrieve information sent by the client using HTTP Get method with an HTML form and data appended to the URL when the page is requested. QueryString is less capable than the Form collection (limitation of about 2000 characters) http://www.mis.boun.edu.tr/egeli/asp/query.asp?place=mis

9. REQUEST OBJECT- Form (POST) • User enters input into the fields of a form • When form is submitted, data in each field is transferred to the server, and then to ASP • Data is sent in the format: name = value name (attribute of <INPUT>)

10. FORM-POST & GET • The HTML specifications technically define the difference between "GET" and "POST" so that former means that form data is to be encoded (by a browser) into a URL while the latter means that the form data is to appear within a message body. • "GET" is basically for just getting (retrieving) data whereas "POST" may involve anything, like storing or updating data, or ordering a product, or sending E-mail.

11. <FORM> • <FORM> is a container tag and holds the form elements. <FORM method="post" name="views“ action="mailto:x@full-moon.com"> • This command does 3 things: • Tells the browser a form has begun and will be called 'views'. • "Post" is the method you want the results to be handled. • You want the data posted to an e-mail address. Note that there are no spaces between 'mailto:' and the e-mail address you specify.

12. <TEXTAREA> • TEXTAREA element • Inserts a scrollable text box into FORM • ROWS and COLS attributes specify the number of character rows and columns <TEXTAREA NAME="I_think" ROWS=6 COLS=30> </TEXTAREA> • ROWS: Specifies the height of textarea box as rows. • COLS: Specifies the width of textarea box as characters.

13. <INPUT TYPE=“TEXT”> • Tells the browser the name, type and size of the input box. <INPUT TYPE="text" NAME="My_name" SIZE="30"> • NAME: Defines the name of the form. • SIZE: Defines the width of the form by specifying the number of characters.

14. <INPUT> • INPUT element • Attributes: • TYPE (required) • Hidden inputs always have TYPE = “hidden” • Defines the usage of the INPUT element • TYPE = “text” inserts a one-line text box • NAME provides a unique identification for INPUT element • VALUE indicates the value that the INPUT element sends to the server upon submission • SIZE • For TYPE = “text”, specifies the width of the text input, measured in characters • MAXLENGTH • For TYPE = “text”, specifies the maximum number of characters that the text input will accept

15. <INPUT> • INPUT element (cont.) • Include textual identifier adjacent to INPUT element • 2 types of INPUT elements that should be inserted into every form: • TYPE = “submit” inserts a button that submits data to the server • VALUE attribute changes the text displayed on the button (default is “Submit”) • TYPE = “reset” inserts a button that clears all entries the user entered into the form • VALUE attribute changes the text displayed on the button (default is “Reset”)

16. <INPUT> SUBMIT AND RESET • At the end of the forms page buttons can be inserted that either submit or reset the form. <INPUT TYPE="submit"> <INPUT TYPE="reset" VALUE="Clear"> • VALUE: Specifies the text to be displayed on the button.

17. <INPUT TYPE=IMAGE> • Specifies an image resource to display, and allows input of two form fields: the x and y coordinate of a pixel chosen from the image. • Implies `TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as a whole is submitted. • The SRC attribute is required • the ALIGN is optional Choose a point on the map: <INPUT TYPE="IMAGE" NAME="map“ SRC="foo.gif">

18. <INPUT TYPE=“PASSWORD”> • INPUT element • TYPE = “password” • Inserts a text box where data displayed as asterisks • Actual data submitted to server

19. <INPUT TYPE=“HIDDEN”> • An INPUTelement with `TYPE=HIDDEN' represents a hidden field.The user does not interact with this field; instead, the VALUE attribute specifies the value of the field. The NAME and VALUE attributes are required. <INPUT TYPE=hidden NAME=context VALUE="l2k3j4l2k3j4l2k3j4lk23">

20. <INPUT TYPE=“CHECKBOX”> • As opposed to Radio Buttons, check boxes can have more than 1 option selected. So, while you might ask what computer brand a reader prefers using radio buttons, you would ask what peripherals a reader has hooked up with checkboxes and present a list of choices. <INPUT TYPE="checkbox" NAME="peripherals" VALUE="mouse">

21. <INPUT TYPE=“CHECKBOX”> • Creates a checkbox • Used individually or in groups • Each checkbox in a group should have same NAME • Make sure that the checkboxes within a group have different VALUE attribute values • Otherwise, browser will cannot distinguish between them • CHECKED attribute checks boxes initially

22. <INPUT TYPE=“RADIO”> • When type radio is used the form will let only 1 button to be selected. Tthe name will be the same regardless with the value differing per your suggestion. <INPUT TYPE="radio" NAME="Letter" VALUE="A">A <INPUT TYPE="radio" NAME="Letter" VALUE="B"> B • VALUE: Defines the value to be returned by the form action.

23. <INPUT TYPE=“RADIO”> • Radio buttons similar in function and usage to checkboxes • Only one radio button in a group can be selected • CHECKED attribute indicates which radio button is selected initially

24. <SELECT> • A pop-up box is a text box that displays one option of several possibilities. An Arrow is displayed next to the box. When the user clicks on the arrow, the pop-up box opens and displays all of the possible options that are available. • SELECT: Start of the pop-up box • SIZE: Defines how many options will show before you have clicked on the pop-up box. • OPTION SELECTED: Notes the option that will be initially displayed in the box. • OPTION: Notes the item that can be selected.

25. <SELECT> <SELECT NAME="Web_Use" SIZE="1"> <OPTION SELECTED> Surfing <OPTION> Playing Games <OPTION> Chatting </SELECT>

26. <SELECT> • SELECT element • Places a selectable list of items inside FORM • Include NAME attribute • Add an item to list • Insert an OPTION element in the <SELECT>…</SELECT> tags • Closing OPTION tag optional • SELECTED attribute applies a default selection to list • Change the number of list options visible • Including the SIZE = “x” attribute inside the <SELECT> tag • x number of options visible

27. FORM-EXAMPLE-1 <FORM method="POST" action="mailto:egeli@boun.edu.tr"> <p>Your Name &nbsp; &nbsp; <input type="text" name="NAME" size="20"></p> <p>Your Surname <input type="text" name="SURNAME" size="20"></p> <p><input type="submit" value="Post"> <input type="reset" value="Reset"> </p> </FORM>

28. FORM-EXAMPLE-1

29. FORM-EXAMPLE-1 • When “post” method is used to send the form as a mail message, this form is posted from Microsoft Internet Explorer as an attachment. File Name: POSTDATA.ATT File Type: Text file (Notepad) Content: NAME=Birgul&SURNAME=Egeli

30. EXAMPLE-2

31. FORM-EXAMPLE-2 <FORM method="post" name="formex" action="mailto:egeli@boun.edu.tr"> Name: <INPUT Type="text" name="Name" size="30"> <br> Surname: <INPUT Type="text" name="Surname" size="30"> <br>

32. FORM-EXAMPLE-2 Password: <INPUT Type="password" name="Password" size="6" maxlength=6> <br> <INPUT Type="hidden" name="Usercode" <br> <!– Can be used to pass parameters --> Address: <TEXTAREA name="Address" rows=3 cols=30> </TEXTAREA> <br>

33. FORM-EXAMPLE-2 Your favorite home pet: <br> <INPUT type="radio" name="pet" value="Cat" checked> Cat <br> <INPUT type="radio" name="pet" value="Dog"> Dog <br> <INPUT type="radio" name="pet" value="Bird"> Bird <br>

34. FORM-EXAMPLE-2 Interests:<br> <INPUT type="checkbox" name="interest1" value="Read"> Reading <br> <INPUT type="checkbox" name="interest2" value="Swim"> Swimming <br> <INPUT type="checkbox" name="interest3" value="Music"> Music <br>

35. FORM-EXAMPLE-2 Job preference: <SELECT Name="jobpref" size="1"> <OPTION SELECTED> Teaching <OPTION> Research <OPTION> Management </SELECT> <br>

36. FORM-EXAMPLE-2 Multiple Select Interest (select with ctrl+click): <SELECT Name="minterest" size="3" multiple> <OPTION SELECTED> Reading <OPTION> Swimming <OPTION> Music </SELECT>

37. FORM-EXAMPLE-2 <INPUT TYPE="image" src="logo.jpg"> <br> <INPUT TYPE="submit" value="Submit"> <br> <INPUT TYPE="reset" value="Reset">

38. EXAMPLE-2

39. FORM-EXAMPLE-2 Name=Birgul& Surname=Egeli& Password=mis371& Usercode=& Address=+Bo%F0azi%E7i+%DCniversitesi& pet=Cat& interest1=Read& jobpref=Teaching& minterest=Reading& minterest=Music

40. FORM-EXAMPLE-3 • The URL specified in the ACTION attribute does not have to be a CGI script, although you can get pretty weird results if you try to feed data to a document which isn't a CGI script. A popular reason to do this is to get a "button" which when pressed takes you to a new page. <FORMACTION="http://www.mis.boun.edu.tr“ METHOD=GET> <INPUT TYPE=submit NAME=foo VALUE="Go to destination"> </FORM>

41. FORM Using Mail.Object • <form name="frm1" method="post" action="talep.asp"> • <input type="text" name="req1" value=""> • <br> • <input type="submit" value="Submit"> • </form>

42. FORM Using Mail.Object(talep.asp) • <!-- • METADATA • TYPE="typelib" • UUID="CD000000-8B95-11D1-82DB-00C04FB1625D" • NAME="CDO for Windows 2000 Library" • --> • <%talep=request.form("req1") • sch = "http://schemas.microsoft.com/cdo/configuration/" • Set cdoConfig = CreateObject("CDO.Configuration")

43. FORM Using Mail.Object(talep.asp) • With cdoConfig.Fields • .Item(cdoSendUsingMethod) = cdoSendUsingPort • .Item(cdoSMTPServer) = "smtp.boun.edu.tr" • .Item(cdoSMTPAuthenticate) = 1 • .Item(cdoSendUsername) = "turinfo" • .Item(cdoSendPassword) = "tuygar" • .Update • End With

44. FORM Using Mail.Object(talep.asp) • dim theBody • Set myMail=CreateObject("CDO.Message") • set myMail.Configuration= cdoConfig • myMail.Subject="County Workshop" • myMail.From="turinfo@boun.edu.tr" • myMail.To="birgul.kutlu@boun.edu.tr" • theBody="<b>County Workshop Request </b><br>" • theBody=theBody & “Requester: " & talep & "<br>" • myMail.HTMLBody=theBody • myMail.Send • set myMail=nothing • %>

45. FORM Using Mail.Object(talep.asp) • <HTML> • <HEAD> • <META http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> • <LINK rel="stylesheet" type="text/css" href="styles/Style.css"> • </HEAD> • <BODY leftMargin=0 topMargin=0 > • Your request is sent. • </BODY> • </HTML>

46. MAP • A client-side image map is an image map that is run by the browser rather than a CGI. What happens is you will provide all the information required to run the map in your HTML document. • First the image needs to be prepared. Then the hot spot coordinates are specified.

47. MAP • Image maps • Designate certain sections of an image as hotspots • Use hotspots as anchors for linking • All elements of image map inside <MAP>…</MAP> tags • <MAP> tag requires NAME attribute • Ex. <MAP NAME = “picture”> • Hotspots designated with AREA element • AREA attributes: • HREF sets the target for the link on that spot • SHAPE and COORDS set the characteristics of the AREA • ALT provides alternate textual description

48. MAP • AREA element (continued) • SHAPE = “rect” • Causes rectangular hotspot to be drawn around the coordinates given in the COORDS attribute • COORDS - pairs of numbers corresponding to the x and y axes • x axis extends horizontally from upper-left corner • y axis extends vertically from upper-left corner • Ex. <AREA HREF = “form.html” SHAPE = “rect” COORDS = “3, 122, 73, 143” ALT = “Go to the form”> • Rectangular hotspot with upper-left corner of rectangle at (3, 122) and lower-right corner at (73, 143)

49. MAP • AREA element (continued) • SHAPE = “poly” • Causes a hotspot to be created around specified coordinates • Ex. <AREA HREF = “mailto:deitel@deitel.com” SHAPE = “poly” COORDS = “28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13” ALT = “Email the Deitels”> • SHAPE = “circle” • Creates a circular hotspot • Coordinates of center of circle and radius of circle, in pixels • Ex. <AREA HREF = “mailto:deitel@deitel.com” SHAPE = “circle” COORDS = “146, 66, 42” ALT = “Email the Deitels”>

50. MAP • To use the image map with an IMG element • Insert the USEMAP = “#name” attribute into the IMG element • name - value of the NAME attribute in the MAP element • Ex. <IMG SRC = "deitel.gif" WIDTH = "200" HEIGHT="144" BORDER="1" ALT = "Harvey and Paul Deitel" USEMAP = "#picture">