Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
01 - W3 intro - OpenWebSchool
Search
openwebschool
August 12, 2012
Programming
3
250
01 - W3 intro - OpenWebSchool
openwebschool
August 12, 2012
Tweet
Share
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
340
09 - Node.JS - OpenWebSchool
openwebschool
1
390
07 - Javascript - OpenWebSchool
openwebschool
3
340
08 - js frontend & jQuery - OpenWebSchool
openwebschool
3
280
05 - MySQL - OpenWebSchool
openwebschool
1
250
06 - PHP & MySQL - OpenWebSchool
openwebschool
1
270
03 - PHP II - OpenWebSchool
openwebschool
2
390
04 - CSS - OpenWebSchool
openwebschool
4
360
02 - PHP I - OpenWebSchool
openwebschool
3
270
Other Decks in Programming
See All in Programming
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Discover Metal 4
rei315
2
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
ニーリーにおけるプロダクトエンジニア
nealle
0
840
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.2k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to train your dragon (web standard)
notwaldorf
95
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Six Lessons from altMBA
skipperchong
28
3.9k
Done Done
chrislema
184
16k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Scaling GitHub
holman
460
140k
The Cult of Friendly URLs
andyhume
79
6.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Navigating Team Friction
lara
187
15k
Transcript
WWW Intro Ensky / 林宏昱
None
None
None
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 • HTML 規範了有什麼東西要被顯示在網頁上 • 是一個 Markup Language < 段落
> 這是一篇文章 </ 段落 > < 圖片 網址 =“http://this.is.a.pic/pic.jpg”>
HTML < 標籤名稱 屬性 1=“ 值 ” 屬性 2=“ 值
2”> 子元素 </ 標籤名稱 > <p> 這是一個真的段落 </p>
HTML 呈現的是「文件」 嚴格來說, HTML 不算是一種「程式語言」
HTML Tags <!doctype html> <html> <head> <meta charset=“utf-8”> <title> 這是網頁的標題
</title> </head> <body> <p> 這是一個段落文字 </p> </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> <p> 這是一個段落文字 </p> </body> 仔細看之後你會發現,在 <p>
之前有好多空白 ( 或者是 tab) 但網頁上卻不會真的顯示出那些空白
HTML Entities 那如果我要打「 < 」或者是空白,怎麼辦? 常見的保留字: < < >
> & & © © ® ® ™ ™
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 :自我介紹