HTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms.

Size: px

Start display at page:

Download "HTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms."

Magdalene Booth
6 years ago
Views:

1 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

2 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

3 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: name=nisse+andersson HTTP and HTML 28 January

4 A request can look like GET /index.html HTTP/1.1 Host: User-Agent : Mozilla/4.5 [en] (WinNT; I) Accept: image/gif, image/jpeg, image/png, */* Accept-Language : en Accept-Charset : iso ,*,utf-8 A response can look like HTTP/ OK Last-Modified: Mon, 20 Dec :26:42 GMT Date: Tue, 11 Jan :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

5 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

6 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

7 Anchor tags, a link to another place: An absolute URL <a href= > LäsIT </a> Relative URL s, relative the current directory <a href=../ht03/index.html > autumn course</a> <a href= /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

8 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

9 <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 > address:</td> <td> jsmith@hotmail.com</td> </tr> </table> HTTP and HTML 28 January

10 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

11 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

12 Can be used by a <link> tag <head> <title> CSS example </title> <link rel= stylesheet href= murach.css > </head>... HTTP and HTML 28 January

13 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

14 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

15 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

16 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

17 It produces this: HTTP and HTML 28 January

18 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

19 Produces this: HTTP and HTML 28 January

20 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

21 Gives us this with several forms HTTP and HTML 28 January

22 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= add checked> Yes add me to your mailing list<br> Contact me by:<br> <input type= radio name= contacvia value= > <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

23 Which gives us this, with a big nice button HTTP and HTML 28 January

24 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

25 Gives us this HTTP and HTML 28 January

26 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

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version