Embed Size (px)
DESCRIPTION
Citation preview
WWW Introduction
Ensky / 林宏昱
What happened when you open a browser?
DNS lookup
dns
what's the ip of facebook.com?
It's 173.252.110.27
HTTP protocol
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
HTTP Protocol
• Protocol between Browser <-> Web server
• Initially used to transmit documents in HTML format
• We know GET method now, but how about post something to webserver?
What happened when you post a form on
website?
Perform a POST in HTTP
POST /register HTTP/1.1Host: www.facebook.com
HTTP/1.1 200 OK
HTML
save to database
surname=E&name=ensky&email=…
HTTP usage
• Actually, HTTP is very simple, trivial, and easy to use in many situations
• When it comes to data-manipulation, there are four basic method:Create, Read, Update, Delete(CRUD)they can be perfectly mapped into HTTP protocol
HTTP protocol -> REST API
• Using HTTP protocol to serve an data-manipulation API, we call it REST API.
• WIKI: REST
Operation HTTP
Read GET
Create POST
Update PUT
Delete DELETE
Imagine you're writing a game
• you'll have
– character info
• maybe life, age, attack power, skills, location, …
– Monster info
• maybe life, skills, …
– and many data need to be CRUD
REST API
• And it'll be very easy if you use REST API.– GET /characters/1/life
– PUT /characters/1
life=60&isPoisoned=1
– PUT /characters/1/location
map=1&block=123
What about HTML?
HyperText Markup Language
Insights
HTML is
a markup language
(not a programming language)
defines
defines what elements on the page(images, links, texts, videos, forms, scripts, etc.)
http://goo.gl/qOu6OF
defines what orders the elements are
1
2
3
4
http://goo.gl/qOu6OF
HTML
• cooperates
–layouts with CSS
–functions with Javascript
CSS, HTML, JS
Structures Layouts Functions
結構 樣式 功能
HTML hello world
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>Hello world! Title</title>
</head>
<body>
<p>Hello world!</p></body>
</html>
HTML is a nested language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>Hello world! Title</title>
</head>
<body>
<p>Hello world!</p></body>
</html>
HTML is a markup language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>…</p></body>
</html>
• Tag
• Attribute
• Value
• Node
• Parent
• Children
HTML is a markup language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>…</p></body>
</html>
• Head defines something for browser
• Encoding
• Title of the page
• Resources
• CSS
• Javascript
HTML is a markup language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>…</p></body>
</html>
• Body defines something to render(the contents)
Common attributes
<p id="unique" class="red-div" title="help text">HIHI</p>
• classclassify elements, usually set for CSS or JS to select some elements. One element can have multiple classes
• idsame as class, but unique in a document. One element can only have one id
• styleinline CSS
• titlehelp text when hover
Debug tools
• Chrome debug tool F12
Debug tools
CSS, HTML, JS
Structures Layouts Functions
結構 樣式 功能
HTTP protocol review
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
Imagine if you want to write a web server…
1.Initialize a socketwait for client's HTTP request
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
port 80
2.Parse the HTTP request find out some useful information
like URL, Hostname, …
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
3.Prepare file according to above information
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
get icon.png from somewhere in your file system
4.Response the document back to client
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
Virtual host
• One web server can host many domains
• It can be determined by "Host: " part in HTTP protocol
www.facebook.com
GET /enskylin HTTP/1.1
Host: www.facebook.com
Virtual host
• In case of static file mapping, you can simply do
www.facebook.com -> c:\Domains\www
image.facebook.com -> c:\Domains\image
so any request to http://www.facebook.com/song.mp3web server will try to find the file at c:\Domains\www\song.mp3
However, static files is not rocks enough!
How about dynamic generated documents?
The only difference is we get data from database
rather than disk file
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
And we need to generate the HTML
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
And send it back to browser
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
If you want to write a web server
1. Initialize a socket to wait for client's HTTP request
2. Parse the HTTP request and find out some useful information like URL, Host, …
3. Prepare document according to above information
4. Response the document back to client
If you want to write a web server
1. Initialize a socket to wait for client's HTTP request
2. Parse the HTTP request and find out some useful information like URL, Host, …
3. Prepare document according to above information
4. Response the document back to client
there is different logic for each page-> it is hard to write in Web server
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
If you want to write a web server
1. Initialize a socket to wait for client's HTTP request
2. Parse the HTTP request and find out some useful information like URL, Host, …
3. Prepare document according to above information
4. Response the document back to client
web Server
CGI
CGI and Web server
Web server
CGI
HTTP Request
stdin + env
stdout
HTTP Response + BODY
HTTP request
body
HTTP request header
HTTP response
head + body
CGI Implemention
#include <iostream>
using namespace std;
int main () {
cout << “<!doctype html>”;
cout << “<html>”;
cout << “ <head>”;
// …omitted
}
Any better choice?
We Save Your Time!
Next two weeks
References
IDE
• We highly recommended to use
IDE Note
• You must save in UTF-8, otherwise you'll not be able to render Chinese correctly
• see: ChineseWorld PTT
Save as UTF-8
• Notepad++
Save as UTF-8
• Sublime
Save as UTF-8
• VIM
• Putty
HTML Tags - Text
p: paragraph
<p>Jlhuang Rocks!</p>
HTML Tags - Text
br: break
<p>Jlhuang <br> Rocks!</p>
HTML Tags - Link
a: anchor
<a href="http://www.google.com">Click me</a>
HTML Tags - Heading
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
HTML Tags - List
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<ol>
<li>Item4</li>
</ol>
</ul>
HTML Tags - Table
<table>
<thead>
<tr><td>Name</th><td>Score</td></tr>
</thead>
<tbody>
<tr><th>Ensky</th><td>100</td></tr>
<tr><th>dy93</th><td>80</td></tr>
</tbody>
<tfoot>
<tr><th>Average</th><td>90</td></tr>
</tfoot>
</table>
Name Score
Ensky 100
dy93 80
Average 90
HTML Tags - Images
img: image
<img src="http://i1.ytimg.com/vi/iYQHkwCfCiw/maxresdefault.jpg">
CSS reference
• https://speakerdeck.com/openwebschool/04-css-openwebschool
Javascript reference
• https://speakerdeck.com/openwebschool/07-javascript-openwebschool
• https://speakerdeck.com/openwebschool/08-js-frontend-and-jquery-openwebschool
