jan股幣

我們今天講的主題是， 什麼是 Web Development and HTML ?，大綱如下

第一章 : Internet 是如何工作 ?

第二章 : Web Development ?

第三章 : HTML ?

第一章 : Internet 是如何工作 ?

我們每天都在看網頁對不對 ? 舉個例子來講。假設說今天我要在 Google 上面查 Node.js ，我會在網址欄輸入 https://www.wikipedia.org/wiki/Node.js，如下 :

那各位沒有想過，從我按下 Enter 到這個網頁跑出來，背後到底發生了什麼事情呢？

首先，我們可以先把這個 URL 就是我們輸入的這個網址欄，先分成三個部分，如下 :

HTTP 裡面的 P 是 Protocol 的意思，就是上述講的通訊協定，把他想成machine講的話，定義為machine之間要交換資訊的話，這些資訊要有那些欄位

● 藍色的部分「https://」我們稱為「protocol」，中文的意思就是「通訊協定」，你的 Browser 跟你的 Server 可能要遵守某一些協定，就是要做某一些制式的訊息交換，那我才可以拿到這個網頁。

● 綠色的部分「www.wikipedia.org」，我們稱為「domain address」，你是要連到哪一個「網域」的網站。

● 紅色的部分「/wiki/Node.j」，我們稱為「path」，通常就代表了這個網站所提供的一個resouce，就是一些資源的目錄。

當你按下 Enter 時，URL 裡的「domain address」先拿出來去問DNS (Domain Name Server)，得知「www.wikipedia.org」所代表的 IP 是什麼，「198.35.26.96」得到之後你的 Browser，就可以連到對應的 Web Server。

再來就是看你是用哪個protocol通訊協定來去跟Web Server要網頁「www.wikipedia.org」的哪一個path「/wiki/Node.j」。

HTTP 裡面的 P 是 Protocol 的意思，就是上述講的通訊協定，把他想成machine講的話，定義為machine之間要交換資訊的話，這些資訊要有那些欄位

首先，它定義兩種型態的message，一種是request，一種是response，

Request : (送請求給Server)

● GET : 跟Server要resources，它就把網頁回傳給你

● POST : 跟Server說我要修改resources的path

● PUT : 增加resources到Server裡面

● DELETE : 刪除Server裡面的resources

Response : (Server回傳)

● 200 OK : 沒問題回傳網頁給你

● 300 moved : 網頁已經移到另一個地方了，再送一個請求去改到新的path

● 400 Not Found : 你輸入的path對Server來講是不存在的

● 500 Server Error : 不是Browser的錯，是Server沒有辦法處理，可能系統出了問題在維修或是有Bug

HTTP 它的 Messages 實際上長什麼樣子呢 ?

基本上可以分成三個部分，initial line，header lines，body

● initial line (橘色): 你要求 (request) 什麼 resources，回傳 (response) 給你 code

● header lines (綠色): 你要求 (request) 什麼 resources 時，其它要包含的東西

● body (紫色): 網頁要的東西放在 body 裡面

最後就由 Browser 顯示出網頁

一個 resources 可以有不同的呈現格式 : HTML，XML，JSON 等。

再來是說明，Chrome Inspector，在一個網頁中按 F12，或按右鍵→檢查，或按Chrome右上方的三點控制列表→更多工具→開發人員工具，如下 :

這個 Chrome Inspector 可以看到這網頁的原始碼，我們先切換到 Network的部分，可以看到你的 Browser 和 machine 交換了什麼 messages，可以看到上述所提到的 request，response 的所有資訊。

第一章 : Internet 是如何工作 ?

第二章 : Web Development ?

第三章 : HTML ?

痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com/