View
3
Download
0
Category
Preview:
Citation preview
HyperText Transfer Protocol
Internet Engineering-Sharif University of Technology
2
Request
Response
Open a connectionMake a requestServer respondsClose connection Listening via a port (80)
Web ServerClient
Stateless◦ If you view 10 web page, your browser makes 10 independent
HTTP request◦ Restart web server?Anonymous
Internet Engineering-Sharif University of Technology
3
User types www.yahoo.com into browserBrowser translates www.yahoo.com into an IP address and tries to open a TCP connection with port 80 of that addressBrowser sends the following byte stream:◦ Get / HTTP/1.0Yahoo responds with a set of headers indicating◦ Which protocol is actually being used◦ Whether or not the file requested was found◦ How many bytes are contained in that file◦ Kind of information (MIME: Multipurpose Internet Mail Extensions)
Internet Engineering-Sharif University of Technology
4
Yahoo’s server sends a blank line to indicate the end of the headersYahoo sends the contents of its index rootThe TCP connection is closed
Internet Engineering-Sharif University of Technology
5
Internet Engineering-Sharif University of Technology
6
When the connection is over, it is overShopping at an e-commerce site (Amazon) ?Engineering Challenge: Creating a stateful application on top of a fundamentally stateless protocol
Internet Engineering-Sharif University of Technology
7
Log file on the web server?◦ HTTP is anonymous◦ The server only knows IP address of client◦ Proxy?Rewriting hyperlinks◦ Sending extra information back to the server◦ http://www.amazon.com/exec/obidos/ASIN/1588750019◦ http://www.amazon.com/exec/obidos/ASIN/1588750019/103-9609966-7089404
◦ All the hyperlinks contain, at the end, this same session ID.◦ HTTP does not place a priori limit on the length of a URI
255 byte limit, error 414: request-URI Too Long
Internet Engineering-Sharif University of Technology
8
Write some information out to an individual user that will be returned on that user’s next requestServer side connections can use it to both store and retrieve information on the client side.Distributed database management system
Internet Engineering-Sharif University of Technology
9
Limit: 20 cookies, max 4 kbCookie information will be passed back up to server on every page load.◦ Overhead: suppose 80 kb for 20 cookies + dialup connectionThey aren’t portable for the userSecurity (privacy problem): some users have disabled them◦ Using unique identifier for the data rather than the data
Internet Engineering-Sharif University of Technology
10
Internet Engineering-Sharif University of Technology
11
DBMSACID test:◦ Atomicity: all committed or all rolled back◦ Consistency: DB is transformed from one valid state to another
valid state.◦ Isolation: the result of a transaction are invisible to other
transactions until the transaction is complete.◦ Durability: once committed, the result are permanent.
Internet Engineering-Sharif University of Technology
12
Declarative query language (SQL)Isolation of important data from programmers mistakesGood performance with many thousands of simultaneous users◦ IBM DB2◦ Oracle◦ Microsoft SQL server◦ Open-source PostgreSQL
Internet Engineering-Sharif University of Technology
13
Develop a data modelDevelop a collection of legal transactions: insert, updateDesign the page flow◦ How user interact with the system?Implement the individual pages◦ HTML◦ ASP (Active Server Page)◦ Java Server Page◦ Servlet◦ …
Internet Engineering-Sharif University of Technology 14
Hyper Text Markup LanguageAn HTML document is just a text document with some special directives, called tags, that a web browser understands.Tags are those things in “angle-brackets”, like <HTML>, <HEAD>, etc.HTML has no variables or commands. HTML is merely a way of formatting a document.Intended to be platform- and device-independent
Internet Engineering-Sharif University of Technology 15
Text with links to other documentsWhat’s the big deal?◦ Links didn’t exist until the 1960’s and were novel well into the
1980’s◦ Hypertext only existed on single computers or local area
networks until about 1990
Internet Engineering-Sharif University of Technology 16
Markup languages have special elements that mark formatting or semantics
HTMLAn <emph>important</emph> conceptLaTeXAn {\em important}concept
Internet Engineering-Sharif University of Technology 17
Nothing SpecialText EditorsFrontPage
Internet Engineering-Sharif University of Technology 18
Formatting is accomplished through the use of ‘tags’. <tag>Many tags have a ‘begin’ tag and an ‘end’ tag.
<TAG> Object the tag effects</TAG>
Examples:◦ <html>…</html> <b>…</b> <p> <br> <a>…</a> <table>…</table> <font>…</font>
Internet Engineering-Sharif University of Technology 19
Some tags have key=value pairs known as attributes. These describe or modify what the tag is doing.Examples:◦ <a href=http://www.rpi.edu>…</a>◦ <font color=“blue”>…</font>◦ <tr align=“center”>…</tr>
Internet Engineering-Sharif University of Technology 20
Every page will contain the following:
<HTML>
<HEAD><TITLE>My web page</TITLE></HEAD>
<BODY>Welcome to my web page!</BODY>
</HTML>Internet Engineering-Sharif University of Technology 21
Contains info about the document. Most common/important: title
<head><title>My HTML Document</title></head>
“My HTML Document” will appear in title bar of Netscape, IE, Opera, etc…
Internet Engineering-Sharif University of Technology 22
Contains all text displayed in the web browser window.<br> - line break<p> - paragraph break (equivalent to 2 <br>s)Appearance <B> makes text bold<center>…</center> Center-align all contained text
Internet Engineering-Sharif University of Technology 23
<b>text to be rendered bold</b>
<B>text to be rendered bold</B>
<b>This would be displayed in the sameway as the other two</b>
<i>text to be rendered in italics</i>
<FONT SIZE=24 COLOR="CC3300" FACE=“Zar">
Internet Engineering-Sharif University of Technology 25
<html><head><title>HTML Basics</title></head><body><p></p></body>
</html>Internet Engineering-Sharif University of Technology 26
Heading 1 -- <H1> Heading 1 </H1>Heading 2 -- <H2> Heading 2 </H2>Heading 3 -- <H3> Heading 3 </H3>Heading 4 -- <H4> Heading 4 </H4>Heading 5 -- <H5> Heading 5 </H5>Heading 6 -- <h6> Heading 6 </H6>
Internet Engineering-Sharif University of Technology 27
<!-- your comment -->Comments can be many lines long.
Internet Engineering-Sharif University of Technology 28
<img src=“name_of_image.gif ” /><img src=“images/image_name.gif” />Example: <IMG SRC="image.gif" BORDER=0>
BORDER=0 BORDER=2 BORDER=5
Internet Engineering-Sharif University of Technology 29
You should create a graphic link for users with slow modems or text-only web access by using the <ALT> option.
Example: <img src=“pencil.gif" ALT=pencil graphic>
pencil graphic
Internet Engineering-Sharif University of Technology 30
<a href=“URL”>Text to be used for the link</a>Example:
<A HREF="http://www.google.com">Google Search</A>| | | |
Opening File to load when User can click on Closing
Tag link is selected this text to pull Tag
up the file
<p>Relative File Path Link
<a href=“../page2.html”>Web Week</a>
</p>
Internet Engineering-Sharif University of Technology 32
<a href=“URL”> <img src=“image.gif” /> </a>
Internet Engineering-Sharif University of Technology 33
<table>…</table>◦ contains entire table<tr>…</tr>◦ contains one row of a table<td>…</td>◦ contains one cell of a table<th>…</th>◦ contains a table column heading (this tag is optional in the
sense that columns do not require column headings)
Internet Engineering-Sharif University of Technology 34
<table><tr><th>Name</th><th>ID</th></tr><tr><td>Eric</td><td>123</td></tr><tr><td>RPI</td><td>456</td></tr></table>
Internet Engineering-Sharif University of Technology 35
Name ID
Eric 123
RPI 456
Internet Engineering-Sharif University of Technology 36
<table><tr><td>Cell 1</td><td>Cell 2</td></tr></table>
Internet Engineering-Sharif University of Technology 37
Cell 1 Cell 2
Internet Engineering-Sharif University of Technology 38
<table border =“0”><tr><td>Cell 1</td><td>Cell 2</td></tr></table>
Internet Engineering-Sharif University of Technology 39
Cell 1 Cell 2
Internet Engineering-Sharif University of Technology 40
Position page elements e.g. imagesSlightly more control
Internet Engineering-Sharif University of Technology 41
Internet Engineering-Sharif University of Technology 42
<table><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td></td><td></td></tr><tr><td>Cell 5</td><td>Cell 6</td></tr></table>
Internet Engineering-Sharif University of Technology 43
Cell 1 Cell 2
Cell 5 Cell 6
Internet Engineering-Sharif University of Technology 44
Cell 1 Cell 2
Cell 5 Cell 6
Internet Engineering-Sharif University of Technology 45
Internet Engineering-Sharif University of Technology 46
< ‘less than’ <> ‘greater than’ >& ‘ampersand’ &" ‘quotes’ “ ‘non-breaking white space’
Internet Engineering-Sharif University of Technology 47
<table><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td> </td><td> </td></tr><tr><td>Cell 5</td><td>Cell 6</td></tr></table>
Internet Engineering-Sharif University of Technology 48
Cell 1 Cell 2
Cell 5 Cell 6
Internet Engineering-Sharif University of Technology 49
<table><tr><th>Column 1</th><th>Column 2</th></tr><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td> </td><td> </td></tr><tr><td>Cell 5</td><td>Cell 6</td></tr></table>
Internet Engineering-Sharif University of Technology 50
Cell 1 Cell 2
Cell 5 Cell 6
Column 1 Column 2
Internet Engineering-Sharif University of Technology 51
un-ordered ListOrdered ListDefinition List (Glossary)
Internet Engineering-Sharif University of Technology 52
<ol><li>First Item on List</li><li>Second Item on List </li><li>Third Item on List </li></ol>
Internet Engineering-Sharif University of Technology 53
1. First Item on List2. Second Item on List 3. Third Item on List
<ul><li>An Item </li><li>Another Item </li><li>The last item </li></ul>
Internet Engineering-Sharif University of Technology 54
• An Item • Another Item • The last item
<dl><dt>Item 1</dt><dd>Text relating to item
1</dd><dt>Item 2</dt><dd>Text relating to item
2</dd></dl>
Internet Engineering-Sharif University of Technology 55
Item 1Text relating to item 1
Item 2Text relating to item 2
<ul><li>Faculty of Science Departments</li><ol><li>Chemistry</li><li>Engineering</li><li>Geology</li></ol></ul>
Internet Engineering-Sharif University of Technology 56
Colour can be used for;Table CellsPage BackgroundsLinksText
Internet Engineering-Sharif University of Technology 57
216 web-safe colour paletteShould I use the Web safe colour palette?
Internet Engineering-Sharif University of Technology 58
Base16
00 00 66 R G B
Internet Engineering-Sharif University of Technology 59
<font color=“#000066” >I’m going to be in Oxford Blue</font>
<font color=“TEAL” >I’m going to be in Teal</font>
Internet Engineering-Sharif University of Technology 60
<html><head><title>HTML Basics</title></head><body><h1>HTML Basics</h1><p><strong><em>Paragraph of bold italic
text</em></strong></p><ul><li>Remember Lists?</li><li>This one is unordered </li></ul><p>This paragraph will link to <a
href="another_page.html"> another page</a> I've created</p>
<table border="2"><tr><td>CELL 1</td><td>CELL 2</td></tr></table><p><img src="/cc/nh13/images/html_lts_logo.jpg“/></p></body></html>
Internet Engineering-Sharif University of Technology 61
Use lower case text in your HTML <tags>Close every <tag> you openNest your <tags> so that the arrows don’t crossCreate valid HTML
Internet Engineering-Sharif University of Technology 62
The form tag <form> ... </form> is used to send user-specified information back to the server. The server then sends back its response, a new HTML document.The form tag itself needs at least 2 attributes, the “action” attribute and the “method” attribute.Although there are other methods, we generally use method=“post” for our interactive programs.The “action” of a form is the program on the server that the form’s contents are sent to. That program processes the information and returns the response document. Only programs in the cgi-bin directory can be processed under our sytstem. Thus, a typical form tag will look something like:<form action=“/cgi-bin/bios546/hello.cgi+ method=“post> ...form contents...</form>Note that since the program that responds to this form is on the same server, the action’s URL doesn’t need to contain http://biolinx.bios.niu.edu”. However, it does need to start with “/cgi-bin”.The form sends name=value pairs to the server. “name” and “value” are both specified within each form element.
Internet Engineering-Sharif University of Technology 63
Buttons are the most common form elements. All forms need a “Submit” button: clicking this button sends the form to the server. Syntax:<input type=“submit” value=“button label”>Radio buttons: You typically use them in groups, all which have the same name but different values. Only one button can be checked; the parameter is given the value associated with the checked button. It is possible to have one button checked as a default, by putting the word "checked" after the value=par_value statement. <input type=radio name="parameter“ value="par_value"> The parameter specified by the “value” attribute in the checked radio button is sent to the server.
Internet Engineering-Sharif University of Technology 64
Check boxes: If checked, the value “TRUE” is sent to the server. If not checked, neither name nor value is sent to the server. If you want it checked by default, include the word “checked” within the tag.
<input type=checkbox name="parameter"> Text boxes: if you want to enter a single line of text. Whateveris typed into the box gets sent as a string to the program givenby the form action mentioned above, as the value of a parameter whose name is given by "name=". You can change the size of the text box with the attribute “size”; its value is the number of characters that can be displayed:<input type=text name="parameter“ size=“25”>
Internet Engineering-Sharif University of Technology 65
Select boxes: a drop down list of options. It has a different syntax than most of the other input tags: <select name’”parameter”> ... </select>.Each option in the select box is specified by the <option> ... </option> tag. When the form is submitted, the text between the opening and closing tags is sent as the value of the parameter specified in the <select name=“parameter”> tag.By default only 1 option is displayed. The size=“number”attribute to the <select> tag displays as many options as you want.To be able to select multiple options, use the keyword “multiple” in the <select> tag.
Internet Engineering-Sharif University of Technology 66
<html><head><title>Basic Form</title></head>
<body><h1> Basic Form</h1><p><form action=“/cgi-bin/bios546/hello.cgi” method=“post>What is your name?<input type=“text”><br>Please select your favorite color:<select name=“color”><option>Red</option><option>Blue</option></select><br><input type=“submit” value=“Click Me!></form></body></html>
Internet Engineering-Sharif University of Technology 67
Questions?
Internet Engineering-Sharif University of Technology 68
Recommended