Ali Kamandi Spring 2007 kamandi@sharif.edu Sharif University of - - PowerPoint PPT Presentation
Ali Kamandi Spring 2007 kamandi@sharif.edu Sharif University of Technology HyperText Transfer Protocol Web Server Client Request Response Open a connection Make a request Server responds Listening via a port (80) Close
Ali Kamandi Spring 2007 kamandi@sharif.edu Sharif University of Technology
HyperText Transfer Protocol
Internet Engineering-Sharif University of Technology
2
Request Response
Open a connection Make a request Server responds Close connection
Listening via a port (80) Web Server Client
Stateless
HTTP request
Anonymous
Internet Engineering-Sharif University of Technology
3
User types www.yahoo.com into browser Browser translates www.yahoo.com into an IP address and
tries to open a TCP connection with port 80 of that address
Browser sends the following byte stream:
Yahoo responds with a set of headers indicating
Internet Engineering-Sharif University of Technology
4
Yahoo’s server sends a blank line to indicate the end of
the headers
Yahoo sends the contents of its index root The 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 over Shopping at an e-commerce site (Amazon) ? Engineering Challenge: Creating a stateful application
Internet Engineering-Sharif University of Technology
7
Log file on the web server?
Rewriting hyperlinks
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 request
Server 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 kb Cookie information will be passed back up to server on
every page load.
They aren’t portable for the user Security (privacy problem): some users have disabled
them
Internet Engineering-Sharif University of Technology
10
Internet Engineering-Sharif University of Technology
11
DBMS ACID test:
valid state.
transactions until the transaction is complete.
Internet Engineering-Sharif University of Technology
12
Declarative query language (SQL) Isolation of important data from programmers mistakes Good performance with many thousands of
simultaneous users
Internet Engineering-Sharif University of Technology
13
Develop a data model Develop a collection of legal transactions: insert,
update
Design the page flow
Implement the individual pages
Internet Engineering-Sharif University of Technology
14
Hyper Text Markup Language An 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 documents What’s the big deal?
1980’s
networks until about 1990
Internet Engineering-Sharif University of Technology
16
Markup languages have special elements that mark
formatting or semantics
HTML
An <emph>important</emph> concept
LaTeX
An {\em important}concept
Internet Engineering-Sharif University of Technology
17
Nothing Special Text Editors FrontPage
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:
<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:
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 same way 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>
<tr>…</tr>
<td>…</td>
<th>…</th>
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. images Slightly 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 List Ordered List Definition 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
<ul> <li>An Item </li> <li>Another Item </li> <li>The last item </li> </ul>
Internet Engineering-Sharif University of Technology
54
<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 1 Text relating to item 1 Item 2 Text 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 Cells Page Backgrounds Links Text
Internet Engineering-Sharif University of Technology
57
216 web-safe colour palette Should 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 open Nest your <tags> so that the arrows don’t cross Create 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
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
“checked” within the tag. <input type=checkbox name="parameter">
Text boxes: if you want to enter a single line of text. Whatever
is typed into the box gets sent as a string to the program given by 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
Internet Engineering-Sharif University of Technology
68