HTTP and HTML We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms. HTTP and HTML 28 January 2008 1
When the browser and the server communicates they use the HTTP protocol. HTTP Browser Server The browser sends a request to the server and gets back a response. Request Browser Response Server HTTP is a stateless protocol, i. e. it has no memory. Your request is received, a reponse is constructed and returned to you, and the server forgets all about it. There are two versions of HTTP, 1.0 and 1.1 HTTP and HTML 28 January 2008 2
The browser locates the server using a URL, a Universal Resource Locator. A URL is a special case of a URI, a Universal Resource Identifier. Examples of: URL s are: http://www.it.uu.se http://user.it.uu.se/~olle http://www.it.uu.se?action=show&name=nisse http://www.it.uu.se?action=show& name=nisse+andersson http://tomcat.it.uu.se:8080/olle/test HTTP and HTML 28 January 2008 3
A request can look like GET /index.html HTTP/1.1 Host: www.gefionsoftware.com User-Agent : Mozilla/4.5 [en] (WinNT; I) Accept: image/gif, image/jpeg, image/png, */* Accept-Language : en Accept-Charset : iso-8859-1,*,utf-8 A response can look like HTTP/1.1 200 OK Last-Modified: Mon, 20 Dec 2001 23:26:42 GMT Date: Tue, 11 Jan 2002 20:52:40 GMT Status: 200 Content-Type: text/html Servlet-Engine: Tomcat Web Server/4.0.1 Content-Length: 59 <html> <body> <h1>hello World</h1> </body> </html> HTTP and HTML 28 January 2008 4
There are several request methods in HTTP: GET POST HEAD OPTIONS PUT TRACE DELETE CONNECT The HEAD is used if you just want the header of the response. GET and POST are used to send a request to the server. GET can only use the URL string to pass data to the server POST can transfer data within the body of the request. HTTP and HTML 28 January 2008 5
HTML, HyperText Markup Language is used by the browser to produce the output. HTML is text with embedded tags. Some basic tags are: <!doctype... > <html> </html> <head></head> <title></title> <body></body> <h1></h1> <h2></h2> <p> <br> <b></b> <i></i> <u></u> <!-- --> Most of the tags have an opening tag and a closing tag. HTML is not case sensitive. Some systems use XHTML, that is a stricter version of HTML: lower case tags only must have closing tags, e. g. <i> </i> or <br/> tags must be nested correctly HTTP and HTML 28 January 2008 6
Anchor tags, a link to another place: An absolute URL <a href= http://www.it.uu.se/lesit > LäsIT </a> Relative URL s, relative the current directory <a href=../ht03/index.html > autumn course</a> <a href= email/index.html > mail list</a> The anchor tag has an attribute,, it has a name, href, and a value. Attributes are separated by spaces. Quoted values are optional in HTML but required in XHTML and XML. HTTP and HTML 28 January 2008 7
Tables in HTML: The basic table tags are <table>, <tr>, <td>, starts a table starts a table row starts a cell within a row Some attributes: <table> border, cellspacing, cellpadding, width height <tr> valign width of the border number of pixels between cells number of pixels between the contents of a cell and the edge of the cell width of the table, pixels height of the table, pixels vertical alignment of the contents of the row, Top, Bottom or Middle HTTP and HTML 28 January 2008 8
<td> align colspan rowspan height width valign horizontal alignment of contents of the cell, Left, Right or Center number of columns that the cell will span the number of rows the cell will span height of the cell width of the cell override valign in <tr> <table cellspacing= 5 cellpadding= 5 border= 1 > <tr> <td align= right > First name:</td> <td> John</td> </tr> <tr> <td align= right > Last name:</td> <td> Smith</td> </tr> <tr> <td align= right > Email address:</td> <td> jsmith@hotmail.com</td> </tr> </table> HTTP and HTML 28 January 2008 9
The <img> tag, images: Some attributes: src height width alt border hspace vspace align URL for a GIF or JPEG image height of the image width of the image text that is to be displayed if you can t display an image border width horizontal space on the left and right side of the image vertical space on the top and bottom of the image alignment of the image on the page Left, Right, Top, Bottom, Middle <img src=../images/olle.gif alt=../text/olle.html width= 150 height= 65 align = Left > HTTP and HTML 28 January 2008 10
Style sheets: HTML can use CSS (Cascading Style Sheets) style sheets. This means that you create a style sheet file that applies to the selected elements e. g. Put this in the file murach.css p {font-family: Arial, sans-serif; font-size: 12px} a:hover {text-decoration : underline; color : #CC0000} h1 { font-family: Arial, sans-serif; font-size: 16px; color : #003366; vertical-align : top; margin-top: 10px; margin-bottom: 0px} h2 { font-family: Arial, sans-serif; font-size: 16px; color : #003366} h3 { font-family: Arial, sans-serif; font-size: 16px; color : #003366} HTTP and HTML 28 January 2008 11
Can be used by a <link> tag <head> <title> CSS example </title> <link rel= stylesheet href= murach.css > </head>... HTTP and HTML 28 January 2008 12
The <form> tag specifies a form that can be filled in and submitted to the server. A form is built from controls, a control is a text field, a menu, a button etc. A control is defined with the <input> tag. There should be a submit button in a form. The most common attributes to <form> is name, action, method, The name of the form The URL to use when the form is submitted The HTTP method to use, GET or POST <form action= entry.jsp method= post >... </form> HTTP and HTML 28 January 2008 13
GET uses the actions URL to append all data using the?name=value -syntax. POST sends all data as a separate part of the request block This means that: A GET request has a size limitation. It can be bookmarked with all data, this might not always be desirable A POST request does not show the parameters, therefore they cannot be bookmarked and there is no size limitation. The default is GET. One rule that can be used here is: Use GET if the request is a readonly request. Otherwise POST. HTTP and HTML 28 January 2008 14
Each control has three optional parameters: type, name and value: name, value, type, the name of the control the value of the control. The name and value produces a name/value pair that is submitted as data. The meaning of the value differs depending on the type of control type is one out of text, checkbox, radio, password, submit, reset, hidden, image, button and file. The default is text. HTTP and HTML 28 January 2008 15
An example of a form looks like <!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN > <html> <head> <title>a simple form</title> </head> <body> <p> Here s a form that contains two text boxes and a button: </p> <form action= entry.jsp method= post > <p> First name <input type= text name= firstname ><br> Last name <input type= text name= lastname ><br> <input type= submit value= Submit > </p> </form> </body> </html> HTTP and HTML 28 January 2008 16
It produces this: HTTP and HTML 28 January 2008 17
Another form <!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN > <html> <head> <title>another simple form</title> </head> <body> <form action= entry.jsp method= post > <p> Username: <input type= text name= username value = jsmith ><br> Password: <input type= password name= password value= opensesame ><br> <input type= hidden name= productcode value= jr01 > <input type= submit value= login > </p> </form> </body> </html> HTTP and HTML 28 January 2008 18
Produces this: HTTP and HTML 28 January 2008 19
One more example <!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN > <html> <head> <title>another simple form</title> </head> <body> <form action= entry.jsp method= post > <p> <input type= submit value = Submit ><br> <input type= reset value= Reset ><br> <input type= button value= Validate onclick= validate(this.form) > </p> </form> <form action= /shop method= post > <p> <input type= submit value = Continue Shopping ><br> </p> </form> <form action= /checkout method= post > <p> <input type= submit value = Checkout ><br> </p> </form> </body> </html> HTTP and HTML 28 January 2008 20
Gives us this with several forms HTTP and HTML 28 January 2008 21
Still another example <!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN > <html> <head> <title>another simple form</title> </head> <body> <form action= entry.jsp method= post > <p> <input type= checkbox name= addemail checked> Yes add me to your mailing list<br> Contact me by:<br> <input type= radio name= contacvia value= Email >Email <input type= radio name= contacvia value= Postal Mail >Postal mail <input type= radio name= contacvia value= Both >Both <br> I m interested in these types of music<br> <input type= checkbox name= rock > Rock<br> <input type= checkbox name= country > Country<br> <input type= checkbox name= bluegrass > Bluegrass<br> <input type= image value= submit SRC=./olle.gif ALT= Send It > </p></form> </body> </html> HTTP and HTML 28 January 2008 22
Which gives us this, with a big nice button HTTP and HTML 28 January 2008 23
One final example showing select and textarea <!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN > <html> <head> <title>another simple form</title> </head><body> <form action= entry.jsp method= post > <p> Select a country:<br> <select name= country > <option value= USA selected>united States <option value= Canada >Canada <option value= Mexico >Mexico </select> </p> <p> Select one or more countries:<br> <select name= countries multiple> <option value= USA selected>united States <option value= Canada >Canada <option value= Mexico >Mexico </select> <br> Comments:<br> <textarea name= comment rows= 5 cols= 60 > </textarea> </p> </form> </body> </html> HTTP and HTML 28 January 2008 24
Gives us this HTTP and HTML 28 January 2008 25
You can add the attribute tabindex= nn to a control to set the order that tabbing through the controls will follow. HTTP and HTML 28 January 2008 26