Ali Kamandi [email protected] Sharif University of...
Transcript of Ali Kamandi [email protected] Sharif University of...
![Page 2: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/2.jpg)
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
![Page 3: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/3.jpg)
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
![Page 4: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/4.jpg)
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
![Page 5: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/5.jpg)
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
![Page 6: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/6.jpg)
Internet Engineering-Sharif University of Technology
6
![Page 7: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/7.jpg)
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
![Page 8: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/8.jpg)
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
![Page 9: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/9.jpg)
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
![Page 10: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/10.jpg)
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
![Page 11: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/11.jpg)
Internet Engineering-Sharif University of Technology
11
![Page 12: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/12.jpg)
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
![Page 13: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/13.jpg)
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
![Page 14: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/14.jpg)
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
![Page 15: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/15.jpg)
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
![Page 16: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/16.jpg)
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
![Page 17: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/17.jpg)
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
![Page 18: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/18.jpg)
Nothing SpecialText EditorsFrontPage
Internet Engineering-Sharif University of Technology 18
![Page 19: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/19.jpg)
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
![Page 20: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/20.jpg)
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
![Page 21: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/21.jpg)
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
![Page 22: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/22.jpg)
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
![Page 23: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/23.jpg)
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
![Page 24: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/24.jpg)
<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>
![Page 25: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/25.jpg)
<FONT SIZE=24 COLOR="CC3300" FACE=“Zar">
Internet Engineering-Sharif University of Technology 25
![Page 26: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/26.jpg)
<html><head><title>HTML Basics</title></head><body><p></p></body>
</html>Internet Engineering-Sharif University of Technology 26
![Page 27: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/27.jpg)
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
![Page 28: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/28.jpg)
<!-- your comment -->Comments can be many lines long.
Internet Engineering-Sharif University of Technology 28
![Page 29: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/29.jpg)
<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
![Page 30: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/30.jpg)
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
![Page 31: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/31.jpg)
<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
![Page 32: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/32.jpg)
<p>Relative File Path Link
<a href=“../page2.html”>Web Week</a>
</p>
Internet Engineering-Sharif University of Technology 32
![Page 33: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/33.jpg)
<a href=“URL”> <img src=“image.gif” /> </a>
Internet Engineering-Sharif University of Technology 33
![Page 34: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/34.jpg)
<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
![Page 35: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/35.jpg)
<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
![Page 36: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/36.jpg)
Name ID
Eric 123
RPI 456
Internet Engineering-Sharif University of Technology 36
![Page 37: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/37.jpg)
<table><tr><td>Cell 1</td><td>Cell 2</td></tr></table>
Internet Engineering-Sharif University of Technology 37
![Page 38: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/38.jpg)
Cell 1 Cell 2
Internet Engineering-Sharif University of Technology 38
![Page 39: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/39.jpg)
<table border =“0”><tr><td>Cell 1</td><td>Cell 2</td></tr></table>
Internet Engineering-Sharif University of Technology 39
![Page 40: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/40.jpg)
Cell 1 Cell 2
Internet Engineering-Sharif University of Technology 40
![Page 41: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/41.jpg)
Position page elements e.g. imagesSlightly more control
Internet Engineering-Sharif University of Technology 41
![Page 42: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/42.jpg)
Internet Engineering-Sharif University of Technology 42
![Page 43: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/43.jpg)
<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
![Page 44: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/44.jpg)
Cell 1 Cell 2
Cell 5 Cell 6
Internet Engineering-Sharif University of Technology 44
![Page 45: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/45.jpg)
Cell 1 Cell 2
Cell 5 Cell 6
Internet Engineering-Sharif University of Technology 45
![Page 46: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/46.jpg)
Internet Engineering-Sharif University of Technology 46
![Page 47: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/47.jpg)
< ‘less than’ <> ‘greater than’ >& ‘ampersand’ &" ‘quotes’ “ ‘non-breaking white space’
Internet Engineering-Sharif University of Technology 47
![Page 48: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/48.jpg)
<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
![Page 49: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/49.jpg)
Cell 1 Cell 2
Cell 5 Cell 6
Internet Engineering-Sharif University of Technology 49
![Page 50: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/50.jpg)
<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
![Page 51: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/51.jpg)
Cell 1 Cell 2
Cell 5 Cell 6
Column 1 Column 2
Internet Engineering-Sharif University of Technology 51
![Page 52: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/52.jpg)
un-ordered ListOrdered ListDefinition List (Glossary)
Internet Engineering-Sharif University of Technology 52
![Page 53: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/53.jpg)
<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
![Page 54: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/54.jpg)
<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
![Page 55: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/55.jpg)
<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
![Page 56: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/56.jpg)
<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
![Page 57: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/57.jpg)
Colour can be used for;Table CellsPage BackgroundsLinksText
Internet Engineering-Sharif University of Technology 57
![Page 58: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/58.jpg)
216 web-safe colour paletteShould I use the Web safe colour palette?
Internet Engineering-Sharif University of Technology 58
![Page 59: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/59.jpg)
Base16
00 00 66 R G B
Internet Engineering-Sharif University of Technology 59
![Page 60: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/60.jpg)
<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
![Page 61: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/61.jpg)
<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
![Page 62: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/62.jpg)
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
![Page 63: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/63.jpg)
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
![Page 64: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/64.jpg)
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
![Page 65: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/65.jpg)
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
![Page 66: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/66.jpg)
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
![Page 67: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/67.jpg)
<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
![Page 68: Ali Kamandi kamandi@sharif.edu Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates](https://reader034.fdocuments.in/reader034/viewer/2022042920/5f653baa47f87954d67ff964/html5/thumbnails/68.jpg)
Questions?
Internet Engineering-Sharif University of Technology 68