<SELECT> …. </SELECT> • Used along with the tag <OPTION>. • Used to define a selectable list of elements. – The list appears as a scrollable menu or a pop-up menu (depends on browser). • Attributes are: – NAME: name of the field. – SIZE: specifies the number of option elements that will be displayed at a time on the menu. (If actual number exceeds SIZE, a scrollbar will appear). – MULTIPLE: specifies that multiple selections from the list can be made. Internet & Web Based Technology 35
<FORM ………….> …….. Languages known: <SELECT NAME=“lang” SIZE=3 MULTIPLE> <OPTION> English <OPTION> Hindi <OPTION> French <OPTION> Hebrew </SELECT> </FORM> Internet & Web Based Technology 36
Example 1 <HTML> <HEAD> <TITLE> Using HTML Forms </TITLE> </HEAD> <BODY TEXT="#FFFFFF" BGCOLOR="#0000FF" LINK="#FF9900" VLINK="#FF9900" ALINK="#FF9900"> <CENTER><H3> Student Registration Form </H3> </CENTER> Please fill up the following form about the courses you will register for this Semester. Internet & Web Based Technology 37
<FORM METHOD="POST" ACTION="/cgi/feedback"> <P> Name: <INPUT NAME="name" TYPE="TEXT" SIZE="30" MAXLENGTH="50"> <P> Roll Number: <INPUT NAME="rollno" TYPE="TEXT" SIZE="7"> <P> Course Numbers: <INPUT NAME="course1" TYPE="TEXT" SIZE="6"> <INPUT NAME="course2" TYPE="TEXT" SIZE="6"> <INPUT NAME="course3" TYPE="TEXT" SIZE="6"> <P> <P> Press SUBMIT when done. <P> <INPUT TYPE="SUBMIT"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML> Internet & Web Based Technology 38
39 Internet & Web Based Technology
Example 2 <HTML> <HEAD> <TITLE> Using HTML Forms </TITLE> </HEAD> <BODY TEXT="#FFFFFF" BGCOLOR="#0000FF" LINK="#FF9900" VLINK="#FF9900" ALINK="#FF9900"> <CENTER> <H3> Student Registration Form </H3> </CENTER> Please fill up the form below and press DONE when done. Internet & Web Based Technology 40
<FORM METHOD="POST" ACTION="/cgi/feedback"> <P> Name: <INPUT NAME="name" TYPE="TEXT" SIZE="30" MAXLENGTH="50"> <P> Roll Number: <INPUT NAME="rollno" TYPE="TEXT" SIZE="7"> <P> Course Numbers: <INPUT NAME="course1" TYPE="TEXT" SIZE="6"> <INPUT NAME="course2" TYPE="TEXT" SIZE="6"> <INPUT NAME="course3" TYPE="TEXT" SIZE="6"> <P> Category: SC <INPUT NAME="cat" TYPE=RADIO> ST <INPUT NAME="cat" TYPE=RADIO> GE <INPUT NAME="cat" TYPE=RADIO> Internet & Web Based Technology 41
<P> Mother tongue: <SELECT NAME="mtongue" SIZE="3"> <OPTION> Hindi <OPTION> Bengali <OPTION> Gujrati <OPTION> Tamil <OPTION> Oriya <OPTION> Assamese </SELECT> <P> <P> Thanks for the information. <P> <INPUT TYPE="SUBMIT" VALUE="DONE"> <INPUT TYPE="RESET" VALUE="CLEAR FORM"> </FORM> </BODY> </HTML> Internet & Web Based Technology 42
43 Internet & Web Based Technology
Example 3 <HTML> <HEAD> <TITLE> Using HTML Forms </TITLE> </HEAD> <BODY TEXT="#FFFFFF" BGCOLOR="#0000FF" LINK="#FF9900" VLINK="#FF9900" ALINK="#FF9900"> <CENTER> <H3> Student Feedback Form </H3> </CENTER> Please fill up the following form and press DONE when finished. Internet & Web Based Technology 44
<FORM METHOD="POST" ACTION="/cgi/feedback"> <P> Name: <INPUT NAME="name" TYPE="TEXT" SIZE="30" MAXLENGTH="50"> <P> Roll Number: <INPUT NAME="rollno" TYPE="TEXT" SIZE="7"> <P> Password: <INPUT NAME="code" TYPE=PASSWORD SIZE="10"> <P> Course Numbers: <INPUT NAME="course1" TYPE="TEXT" SIZE="6"> <INPUT NAME="course2" TYPE="TEXT" SIZE="6"> <INPUT NAME="course3" TYPE="TEXT" SIZE="6"> Internet & Web Based Technology 45
<P> Category: SC <INPUT NAME="cat" TYPE=RADIO> ST <INPUT NAME="cat" TYPE=RADIO> GE <INPUT NAME="cat" TYPE=RADIO> <P> Mother tongue: <SELECT NAME="mtongue" SIZE="3"> <OPTION> Hindi <OPTION> Bengali <OPTION> Gujrati <OPTION> Tamil <OPTION> Assamese <OPTION> Oriya </SELECT> Internet & Web Based Technology 46
<P> Languages known: English <INPUT NAME="lang" TYPE=CHECKBOX> Hindi <INPUT NAME="lang" TYPE=CHECKBOX> <P> Scholarship holder (select for yes): <INPUT NAME="schol" TYPE=CHECKBOX> <P> General feedback: <TEXTAREA NAME="feed" ROWS=3 COLS=20> </TEXTAREA> <P> <P> Thanks for the information. <P> <INPUT TYPE="SUBMIT" VALUE="DONE"> <INPUT TYPE="RESET" VALUE="CLEAR FORM"> </FORM> </BODY> </HTML> Internet & Web Based Technology 47
48 Internet & Web Based Technology
How to Submit a Form? • Three different ways: – Clicking on the Submit button. – Clicking on an active map. – Pressing <ENTER> on a TEXT box or TEXTAREA. Internet & Web Based Technology 49
The Basic Mechanism original page P P submit form cgi new html page Browser Internet & Web Based Technology 50
• Web page including form – Resides on the web server in the regular folder where html files and other documents are kept. • CGI script program handling form data – Resides under a special folder on the web server (usually, “cgi-bin). – May be written in Perl, C, shell script, etc. • Web page linked to the cgi script. Internet & Web Based Technology 51
<FORM METHOD=“POST” ACTION=“cgi-bin/myprog.pl”> …….. …….. </FORM> Internet & Web Based Technology 52
How to Write the CGI Program? • Must know … – How to access the form data. • Mechanism depends on METHOD (GET or POST). – How to return processed output back to the browser. • HTML file created on the fly (typically). • Details to be discussed later. – Good idea to have a look at a typical Perl script. Internet & Web Based Technology 53
Image Maps
Introduction • An image map allows us to create links to different URLs depending upon where we click on the image. – Useful for creating links on maps, diagrams, fancy buttons, etc. • There are two parts to an image map. – The image. – The map file. • The map file defines the areas of the image and the URLs that correlate to different areas. Internet & Web Based Technology 55
So basically … • An image map is a single image that contains hot spots . – When we click on a hot spot, we go to a new location (URL). – Requires loading of only one image from the server. • Thus requires fewer server calls. • Is generally better looking. Internet & Web Based Technology 56
Types of Image Maps • Depending on the way they are configured and the location where the processing is carried out, image maps can be classified as two types. – Server side • Traditional – Client side • More efficient; supported by all recent browsers. Internet & Web Based Technology 57
Server Side Image Maps
Basic Functioning Three ingredients are required to incorporate an • image map into a HTML document. a) Creating the image map with well-defined boundaries. b) Creating an image map configuration file. � Contains relative pixel co-ordinates marking the boundaries of the different clickable regions. � Allowable geometries: circle, poly, point, rect. c) Establish appropriate HTML information in the page to link � the map image, � the map configuration file, and � an (optional) CGI script which decodes of map co- ordinates and selects the corresponding URL. Internet & Web Based Technology 59
Typical Usage <HTML> <BODY> …….. …….. <A HREF = “cgi-bin/map/menu.map”> <IMG SRC = “IMAGES/imagemap.gif” ISMAP> </A> …….. …….. </BODY> </HTML> Internet & Web Based Technology 60
The URL that is sent to the image map program or web server • when a user clicks the map resembles the following: http://myserver.com/menu.map?x,y where x and y are integers denoting the pixel co-ordinate of the point of click. Internet & Web Based Technology 61
Image Map Configuration File • There are several different formats, all similar, and varying slightly in syntax. a) NCSA httpd server b) APACHE httpd server c) CERN httpd server d) W3C httpd server Internet & Web Based Technology 62
Example: APACHE server • A sample configuration file looks like: # An example default http://www.myserver.edu base_url http://www.iitkgp.ac.in/demo circle circle.html 45,45,80,45 rect rectangle.html 20,10,178,70 point point.html 100,50 poly polygon.html 200,60,295,60,275,10 Internet & Web Based Technology 63
• Defining the default – Typically, the first line in the map file is a default line. – Defines the URL to which users will be taken if they click on an undefined area of the image. • Defining circles – A circle is defined by two co-ordinates. – The first co-ordinate is the centre point. – The second co-ordinate is any point on the circumference. Internet & Web Based Technology 64
Defining rectangles • – A rectangle is defined by two co-ordinates. – The first co-ordinate refers to the upper left corner. – The second co-ordinate refers to the bottom right corner. Defining points • – Defines by a single co-ordinate. – Clicks closest to that point on the image map will take to the specified URL. • Defining polygons – A polygon is defined by a series of co-ordinates that outline the area to be defined. – We can start from any vertex of the polygon. – Maximum number of vertices is 100. Internet & Web Based Technology 65
Illustrative Example Internet & Web Based Technology 66
An Important Point • For each of the specified URLs, it is required to specify the entire path. • However, common prefix URL can be specified by the base_url command. base_url http://www.iitkgp.ac.in circle circle.html 45,45,80,45 rect rectangle.html 20,10,178,70 Internet & Web Based Technology 67
Client Side Image Maps
Introduction • In client-side image maps, the map information is contained in the HTML document itself. • Consists of three components: – An ordinary image file (gif, jpeg, png) – A map delimited by <MAP> tags containing the co-ordinate and URL information for each region. – The USEMAP attribute within the <IMG> tag that indicates which map to reference. Internet & Web Based Technology 69
Advantages • They are self-contained within the HTML document. • No dependence on the server to handle every client’s request for image mapping. • Faster processing; improves response time. • No longer required to specify a default URL. – Clicking outside hyperlinked area will take a user nowhere. • Complete URL information displays in the status bar when the mouse moves over the hot spots. – In contrast, server-side image maps show only co- ordinates. Internet & Web Based Technology 70
Disadvantage • The only disadvantage is that they are not universally supported. – Netscape Navigator 1.0 and Internet Explorer 2.0 do not support client-side image maps. Internet & Web Based Technology 71
Sample Client-side Image Map <MAP NAME = “demo_map”> <AREA SHAPE=CIRCLE COORDS=“45,45,20” HREF=“circle.html” ALT=“Circle”> <AREA SHAPE=RECT COORDS=“20,20,80,80” HREF=“rectangle.html” ALT=“Rectangle”> <AREA SHAPE=POLY COORDS=“10,10,50,50,70,100” HREF=“polygon.html” ALT=“Triangle”> </MAP> Internet & Web Based Technology 72
• Some points: – POINT is not supported. – CIRCLE is specified by the centre co-ordinates, followed by its radius. – Comments can be included as in HTML, using <! ……….. > Internet & Web Based Technology 73
Linking to an Image • This can be done using the <IMG> tag using the USEMAP attribute. <IMG SRC=“mymap.gif” USEMAP=“#demo_map”> – References the image “mymap.gif”. – Searches for the <MAP> element with the NAME attribute of “demo_map”. Internet & Web Based Technology 74
A Complete Example <HTML> <HEAD><TITLE> Client Side Image map </TITLE></HEAD> <BODY> <MAP NAME = “demo_map”> <AREA SHAPE=CIRCLE COORDS=“45,45,20” HREF=“circle.html” ALT=“Circle”> <AREA SHAPE=RECT COORDS=“20,20,80,80” HREF=“rectangle.html” ALT=“Rectangle”> <AREA SHAPE=POLY COORDS=“10,10,50,50,70,100” HREF=“polygon.html” ALT=“Triangle”> </MAP> <IMG SRC=“mymap.gif” USEMAP=“#demo_map”> </BODY> </HTML> Internet & Web Based Technology 75
Combining the Two • Motivation for combining client and server side image map processing: – Browsers ignore tags they do not understand. – Newer browsers will use client-side map. – Older browsers will use the server-side map. • How to do this? Internet & Web Based Technology 76
<A HREF = “http://myserver.edu/cgi-bin/map/demo_map”> <IMG SRC = “mymap.gif” USEMAP = “#demo_map” ISMAP> </A> • USEMAP will be ignored by older browsers. • ISMAP will be considered redundant by browsers supporting client-side map. Internet & Web Based Technology 77
Creating Image Maps
Available Tools • There are several tools using which we can create an image map. • Some of the tools are: – MapEdit – Macromedia Dreamweaver – Adobe GoLive • Irrespective of the tool used, the steps required for creation are more or less the same. Internet & Web Based Technology 79
Creating the Map • Typical steps: – Open the image in the imagemap editor. – Define areas within the image that will be clickable: rectangle, circle or polygon. – Highlight an area, and enter the URL for that area. – Repeat the above steps for all the clickable areas of the image. – For server-side image maps, we also need to define a default URL. – Select the type (client or server side). Internet & Web Based Technology 80
Hyper Text Transfer Protocol (HTTP)
What is HTTP? • Hyper Text Transfer Protocol – A protocol using which web clients (browsers) interact with web servers. • It is a stateless protocol. – Fresh connection for every item to be downloaded. • Transfers hypertext across the Internet. – A text with links to other text documents. Internet & Web Based Technology 82
HTTP Protocol • Web clients (browsers) and web servers communicate via HTTP protocol. • Basic steps: – Client opens socket connection to the HTTP server. • Typically over port 80. – Client sends HTTP requests to server. – Server sends back response. – Server closes connection. • HTTP is a stateless protocol. Internet & Web Based Technology 83
Illustration http Web request Servers http response Web Client http request http response Internet & Web Based Technology 84
HTTP Request Format • A client request to a server consists of: – Request method – Path portion of the HTTP URL – Version number of the HTTP protocol – Optional request header information – Blank line – POST or PUT data if present. Internet & Web Based Technology 85
HTTP Request Methods • GET – Most common HTTP method. – Returns the contents of the specified document. – Places any parameters in request header. – Can also be used to submit forms: • The form data is URL-encoded and appended to the GET command URL. GET /cgi-bin/myscript.cgi?Roll=1234&Sex=M HTTP/1.0 Internet & Web Based Technology 86
Illustration of GET – A very simple HTTP connection to a server. telnet www.facweb.iitkgp.ac.in http – Client sends request for a file: GET /test.html HTTP/1.0 – The server sends back the response: HTTP/1.1 200 OK Date: Sun, 22 May 2005 09:51:42 GMT Server: Apache/1.3.33 (Win32) Last-Modified: Sun, 22 May 2005 09:51:10 GMT Accept-Ranges: bytes Content-Length: 119 Connection: close Internet & Web Based Technology 87
Illustration of GET (contd.) Content-Type: text/html <html> <head> <title> A test page </title> </head> <body> This is the body of the test page. </body> </html> Internet & Web Based Technology 88
HTTP Request Methods (contd.) • HEAD – Returns only the header information of the specified document. – Used by clients to determine the file size, modification date, server version, etc. Internet & Web Based Technology 89
Illustration of HEAD Client sends • HEAD /index.html HTTP/1.0 Server responds back with: • HTTP/1.1 200 OK Date: Sun, 22 May 2005 10:08:37 GMT Server: Apache/1.3.33 (Win32) Last-Modified: Thu, 03 May 2001 11:30:38 GMT Accept-Ranges: bytes Content-Length: 1494 Connection: close Content-Type: text/html Internet & Web Based Technology 90
HTTP Request Methods (contd.) • POST – Used to send data to the server to be processed in some way, as in a CGI script. – Basic difference from GET: • A block of data is sent along with the request. • Extra headers like Content-Type and Content-Length are used for this purpose. • The requested object is not a resource to retrieve. Rather, it is a script that can handle the data being sent. • The server response is not a static file; but is generated dynamically as the program output. Internet & Web Based Technology 91
Illustration of POST – A typical form submission, using POST is illustrated below: POST /cgi-bin/myscript.cgi HTTP/1.0 From: isg@hotmail.com User-Agent: HTTPTool/1.0 Content-Type: application/x-www-form-urlencoded Content-Length: 32 Roll=1234&Sex=M&Age=20 Internet & Web Based Technology 92
HTTP Request Methods (contd.) • PUT – Replaces the contents of the specified document with data supplied along with the command. – Not used widely. • DELETE: – Deletes the specified document from the server. – Not used widely. Internet & Web Based Technology 93
HTTP Request Headers • After a HTTP request line, a client can send any number of header fields. – Usually optional – used to convey some information. – Some commonly used fields: • Accept: MIME types client accepts, in order of preference. • Connection: connection options, close or Keep-Alive. • Content-Length: number of bytes of data to follow. • Content-Type: MIME type and subtype of the data that follows. • Pragma: “no-cache” option directs the server/proxy to return a fresh document even though a cached copy may exist. Internet & Web Based Technology 94
HTTP Request Data • To be given if the request type is either PUT or POST . – Send the data immediately after the HTTP request header, and a blank line. Internet & Web Based Technology 95
HTTP Response • An initial response line. – Also called the status line. – Consists of three parts separated by spaces • The HTTP version • A 3-digit response status code • An English phrase describing the status code. HTTP/1.0 200 OK HTTP/1.0 404 Not Found Internet & Web Based Technology 96
HTTP Response (contd.) • Header information, followed by a blank line, and then the data. HTTP/1.1 200 OK Date: Sun, 22 May 2005 09:51:42 GMT Server: Apache/1.3.33 (Win32) Last-Modified: Sun, 22 May 2005 09:51:10 GMT Content-Length: 119 Connection: close Content-Type: text/html <html> <head> <title> A test page </title> </head> <body> This is the body of the test page. </body> </html> Internet & Web Based Technology 97
3-digit Status Code • 1xx – Indicates informational messages only. • 2xx – Indicates successful transaction. • 3xx – Redirects the client to another URL. • 4xx – Indicates client error, such as unauthorized request. • 5xx – Indicates internal server error. Internet & Web Based Technology 98
Common Status Codes • 200 OK • 301 Moved Permanently • 302 Moved Temporarily • 401 Unauthorized • 403 Forbidden • 404 Not Found • 500 Internal Server Error Internet & Web Based Technology 99
HTTP Response Headers • Common response headers include: – Content-Length • Size of the data in bytes. – Content-Type • MIME type and subtype of data being sent. – Date • Current date. – Expires • Date at which document expires. – Last-Modified – Set-Cookie • Name/value pair to be stored as cookie. Internet & Web Based Technology 100
Recommend
More recommend
