01 - W3 intro - OpenWebSchool

WWW Intro Ensky / 林宏昱

Client – Server 1. 商店開著等顧客進來 2. 顧客隨時想來就來 3. 越大的店可以容納越多的顧客

Client – Server • 我們的網路世界也是一樣 • 有一些商店（ Server ） •
使用者是顧客（ Client ） • 我想上某個網站的時候就連過去， Server 永遠開著

Hostname and IP • IP is an Unique identifier –
就像身分証一樣 • 網路有自己的機制，可以讓你輸入 IP 就找到那台機器。 • http://140.113.41.8 – 但這不 make sense • http://www.nctu.edu.tw – It’s great!

Uniform Resource Identifier http://comic.ensky.tw/register ftp://ca.nctu.edu.tw Protocol (like FTP, HTTP, Telnet…)
Host( Domain Name / IP ) Path URI = Protocol :// Host + Path

Uniform Resource Identifier • 絕對連結 • 所有網路資源都可以用一個絕對連結來代表。 • ftp://ca.nctu.edu.tw
• telnet://bs2.to • ssh://bsd6.cs.nctu.edu.tw

Links • In http://ensky.tw/test/test1/index.html • A.txt -> http://ensky.tw/test/test1/A.txt • ../A.txt
-> http://ensky.tw/test/A.txt • ../b/A.txt -> http://ensky.tw/test/b/A.txt • ../../b/A.txt -> http://ensky.tw/b/A.txt • /A.txt -> http://ensky.tw/A.txt

HTTP Basic（餐廳） • 1. 說中文 • 2. 清楚描述我要吃啥 • 這就是協定
(protocol) : 我和店家的協定

HTTP Request 我要 /index.php 好喔，給你

HTTP Request Overview • http://comic.ensky.tw/register 1. 連到 140.113.27.33:80 // 就是
comic.ensky.tw 這個 hostname 轉換成的 IP 2. 丟下面的文字 GET /register HTTP/1.1 Host: comic.ensky.tw ...

HTTP Request Method GET /register HTTP/1.1 Host: comic.ensky.tw OR GET
http://comic.ensky.tw/register HTTP/1.1 Method URI Protocol_version Key: value

HTTP Request Method • GET http://comic.ensky.tw/register HTTP/1.1 • GET –
Read, 讀取資料 • POST – Create, 新增資料 • PUT – Update, 修改資料 • DELETE – Delete, 刪除資料

HTTP Request Feature Host: comic.ensky.tw Cookie: xx=yy; aa=bb; … Referer:
http://comic.ensky.tw/ User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.60 Safari/537.1

HTTP Response 我要 index.php 好喔，給你

HTTP Response Overview HTTP/1.1 200 OK Set-Cookie: a=b; c=d; …
Content-Type: text/html; charset=utf-8 Content-Encoding: gzip 文件內容 (html) Protocol Code Response_text Key: value

Take a Break

HTML • HTML 規範了有什麼東西要被顯示在網頁上 • 是一個 Markup Language < 段落
> 這是一篇文章 </ 段落 > < 圖片網址 =“http://this.is.a.pic/pic.jpg”>

HTML < 標籤名稱屬性 1=“ 值 ” 屬性 2=“ 值
2”> 子元素 </ 標籤名稱 > 這是一個真的段落

HTML 呈現的是「文件」嚴格來說， HTML 不算是一種「程式語言」

HTML Tags <!doctype html> <html> <head> <meta charset=“utf-8”> <title> 這是網頁的標題
</title> </head> <body> 這是一個段落文字 </body> </html>

HTML Tags • <head> 裡面放的是「關於這個網頁的資訊」 – 編碼 – 網頁標題 •
<body> 放的是「這個網頁的內容」也就是所有顯示出來的東西

HTML Tags • 其他 Tag 請自己看 • 請務必要搞懂最基本的那些 tags •
比方說 a, img, table, form, textarea, select, br, p, div, span, pre, style, link, script, …

HTML Attributes 每個元素會有不同的屬性可以設定 <img width=“123” height=“456” src=“…”> 以下四個屬性是每個元素都有的 • class
- 元素的類別 • id - 元素的唯一名稱 • style - 元素的樣式 • title - 元素的標題文字

HTML Entities 還記得 C 語言中，你為什麼不能宣告 int for = 1; 嗎？
因為 for 是 C 語言中的保留字同樣的， HTML 中也有所謂的「保留字」比如說「 < 」這個符號就是

HTML Entities 還記得這行是什麼意思嗎？ <body> 這是一個段落文字 </body> 仔細看之後你會發現，在 
之前有好多空白 ( 或者是 tab) 但網頁上卻不會真的顯示出那些空白

Encodings 很久很久以前，老美發明了電腦那時的電腦還沒有網路老美自己當然只用 ABCDEFG 所以他們發明了 ASCII code 的表示方法

Encodings 但是用中文的我們可不能只用 ASCII 去表示中華博大精深的文字 1 個 byte 完全就是不夠用阿所以我們自己創了 Big5
這套編碼方式用兩個 byte 來表示中文

Encodings 那時候網路可還沒有普及呢大家用 big5 用爽爽，反正只有我們會用所以沒差但網路一普及就崩潰了阿每個國家都有一套自己的編碼方法我們有 big5
中國有 GB2312 日本有 JIS

Encodings 於是有人就提出一套編碼完全攻略叫做 unicode 用 4 個 bytes 把全部的字都塞進去於是普天同慶
全世界的電腦都可以正確顯示中文網站了！

Encodings 而 UTF-8 是 Unicode 的一種實作方法詳細資訊請參考 wiki ，在此不多做說明於是乎，我們寫網頁的都要記得
你寫好的網頁要存成 UTF-8 HTML 裡面也要註明編碼是 UTF-8 不然瀏覽器會搞錯

Encodings • Nodepad++ 中編成 UTF-8 的方法 • 記事本中編成 UTF-8 的方法

URL Encoding 網址有一套規範，叫做 RFC 1738 裡面規定 URL 只能是 ASCII 的某些文字組成
因此若是你想在 HTTP Request 中使用中文（比如說你想做一個抓漫畫機器人之類的）需要作 URL Encoding google ： URL Encoding

Homework • 搞懂 HTML 基本元素的用途、實際操作看看 ref: http://goo.gl/QVoic • 搞懂這份投影片介紹過的東西 ref:
http://www.google.com.tw • 練習 1 ：自我介紹

01 - W3 intro - OpenWebSchool

01 - W3 intro - OpenWebSchool

More Decks by openwebschool

Other Decks in Programming

Featured

Transcript