• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
OpenWebSchool - 01 - WWW Intro
 

OpenWebSchool - 01 - WWW Intro

on

  • 743 views

 

Statistics

Views

Total Views
743
Views on SlideShare
743
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
3

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 很謝謝你的回應,原來有這樣的概念在裡面阿:)
    Are you sure you want to
    Your message goes here
    Processing…
  • /A.txt這是絕對路徑的概念
    /開頭就表示直接接在hostname的後面,
    所以/A.txt才會直接是http://ensky.tw/A.txt

    當然妳的寫法也行, 兩種用法各有優缺點, 端看使用方式而定
    Are you sure you want to
    Your message goes here
    Processing…
  • hi,
    想請問第10張投影片的最後一行為什麼要這樣寫呢:
    /A.txt ->http://ensky.tw/A.txt
    若照這一行的前三行形式的話,
    可以這樣寫嗎
    ../../A.txt ->http://ensky.tw/A.txt
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    OpenWebSchool - 01 - WWW Intro OpenWebSchool - 01 - WWW Intro Presentation Transcript

    • WWW IntroEnsky / 林宏昱
    • Client – Server1.商店開著等顧客進來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 Identifierhttp://comic.ensky.tw/registerftp://ca.nctu.edu.twProtocol (like FTP, HTTP, Telnet…)Host( Domain Name / IP )PathURI = 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/register1. 連到140.113.27.33:80 //就是comic.ensky.tw這個hostname轉換成的IP2. 丟下面的文字GET /register HTTP/1.1Host: comic.ensky.tw...
    • HTTP Request MethodGET /register HTTP/1.1Host: comic.ensky.twORGET http://comic.ensky.tw/register HTTP/1.1Method URI Protocol_versionKey: value
    • HTTP Request Method• GET http://comic.ensky.tw/register HTTP/1.1• GET – Read, 讀取資料• POST – Create, 新增資料• PUT – Update, 修改資料• DELETE – Delete, 刪除資料
    • HTTP Request FeatureHost: comic.ensky.twCookie: xx=yy; aa=bb; …Referer: http://comic.ensky.tw/User-Agent: Mozilla/5.0 (Windows NT 6.1;WOW64) AppleWebKit/537.1 (KHTML, likeGecko) Chrome/21.0.1180.60 Safari/537.1
    • HTTP Response 我要 index.php 好喔,給你
    • HTTP Response OverviewHTTP/1.1 200 OKSet-Cookie: a=b; c=d; …Content-Type: text/html; charset=utf-8Content-Encoding: gzip文件內容(html)Protocol Code Response_textKey: 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那如果我要打「<」或者是空白,怎麼辦?常見的保留字: &nbsp;< &lt;> &gt;& &amp;© &copy; &reg;®™ &trade;
    • 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-8HTML裡面也要註明編碼是UTF-8不然瀏覽器會搞錯
    • Encodings• Nodepad++中編成UTF-8的方法• 記事本中編成UTF-8的方法
    • URL Encoding網址有一套規範,叫做RFC 1738裡面規定URL只能是ASCII的某些文字組成因此若是你想在HTTP Request中使用中文(比如說你想做一個抓漫畫機器人之類的)需要作URL Encodinggoogle:URL Encoding
    • Homework• 搞懂HTML基本元素的用途、實際操作看看 ref: http://goo.gl/QVoic• 搞懂這份投影片介紹過的東西 ref: http://www.google.com.tw• 練習1:自我介紹